This is an automated email from the ASF dual-hosted git repository.
jscheffl pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/airflow.git
The following commit(s) were added to refs/heads/main by this push:
new cd5eb2ca4ab Create a User Settings button with light/dark mode toggle
as a menu item (#42964)
cd5eb2ca4ab is described below
commit cd5eb2ca4abc67ebc85fcaa44d12f3343d03fafa
Author: Aryan Khurana <101019909+aryank1...@users.noreply.github.com>
AuthorDate: Sun Oct 13 06:34:02 2024 -0400
Create a User Settings button with light/dark mode toggle as a menu item
(#42964)
---
airflow/ui/src/layouts/Nav/Nav.tsx | 16 +------
airflow/ui/src/layouts/Nav/UserSettingsButton.tsx | 58 +++++++++++++++++++++++
2 files changed, 60 insertions(+), 14 deletions(-)
diff --git a/airflow/ui/src/layouts/Nav/Nav.tsx
b/airflow/ui/src/layouts/Nav/Nav.tsx
index 9886b5eb757..3b47595e8c1 100644
--- a/airflow/ui/src/layouts/Nav/Nav.tsx
+++ b/airflow/ui/src/layouts/Nav/Nav.tsx
@@ -21,7 +21,6 @@ import {
Flex,
Icon,
Link,
- useColorMode,
useColorModeValue,
VStack,
} from "@chakra-ui/react";
@@ -32,9 +31,7 @@ import {
FiDatabase,
FiGlobe,
FiHome,
- FiMoon,
FiSettings,
- FiSun,
} from "react-icons/fi";
import { AirflowPin } from "src/assets/AirflowPin";
@@ -42,9 +39,9 @@ import { DagIcon } from "src/assets/DagIcon";
import { DocsButton } from "./DocsButton";
import { NavButton } from "./NavButton";
+import { UserSettingsButton } from "./UserSettingsButton";
export const Nav = () => {
- const { colorMode, toggleColorMode } = useColorMode();
const navBg = useColorModeValue("blue.100", "blue.900");
return (
@@ -106,16 +103,7 @@ export const Nav = () => {
title="Return to legacy UI"
/>
<DocsButton />
- <NavButton
- icon={
- colorMode === "light" ? (
- <FiMoon size="1.75rem" />
- ) : (
- <FiSun size="1.75rem" />
- )
- }
- onClick={toggleColorMode}
- />
+ <UserSettingsButton />
</Flex>
</VStack>
);
diff --git a/airflow/ui/src/layouts/Nav/UserSettingsButton.tsx
b/airflow/ui/src/layouts/Nav/UserSettingsButton.tsx
new file mode 100644
index 00000000000..c43c17b6d03
--- /dev/null
+++ b/airflow/ui/src/layouts/Nav/UserSettingsButton.tsx
@@ -0,0 +1,58 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import {
+ IconButton,
+ Menu,
+ MenuButton,
+ useColorMode,
+ MenuItem,
+ MenuList,
+} from "@chakra-ui/react";
+import { FiMoon, FiSun, FiUser } from "react-icons/fi";
+
+import { navButtonProps } from "./navButtonProps";
+
+export const UserSettingsButton = () => {
+ const { colorMode, toggleColorMode } = useColorMode();
+
+ return (
+ <Menu placement="right">
+ <MenuButton
+ as={IconButton}
+ icon={<FiUser size="1.75rem" />}
+ {...navButtonProps}
+ />
+ <MenuList>
+ <MenuItem onClick={toggleColorMode}>
+ {colorMode === "light" ? (
+ <>
+ <FiMoon size="1.25rem" style={{ marginRight: "8px" }} />
+ Switch to Dark Mode
+ </>
+ ) : (
+ <>
+ <FiSun size="1.25rem" style={{ marginRight: "8px" }} />
+ Switch to Light Mode
+ </>
+ )}
+ </MenuItem>
+ </MenuList>
+ </Menu>
+ );
+};
