This is an automated email from the ASF dual-hosted git repository.
songjian pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/dolphinscheduler.git
The following commit(s) were added to refs/heads/dev by this push:
new cb70e89ded [Feature][UI] Revamped interface settings options in the
top navigation bar. (#12530)
cb70e89ded is described below
commit cb70e89dedd893fbd8950e2b4576f12ec37733b8
Author: songjianet <[email protected]>
AuthorDate: Wed Oct 26 12:57:36 2022 +0800
[Feature][UI] Revamped interface settings options in the top navigation
bar. (#12530)
---
.../content/components/navbar/index.module.scss | 34 ---------------
.../layouts/content/components/navbar/index.tsx | 49 ++++++++++++++--------
.../src/layouts/content/use-dataList.ts | 10 +----
dolphinscheduler-ui/src/locales/en_US/menu.ts | 2 +-
4 files changed, 34 insertions(+), 61 deletions(-)
diff --git
a/dolphinscheduler-ui/src/layouts/content/components/navbar/index.module.scss
b/dolphinscheduler-ui/src/layouts/content/components/navbar/index.module.scss
deleted file mode 100644
index de54e9a27b..0000000000
---
a/dolphinscheduler-ui/src/layouts/content/components/navbar/index.module.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-/*
- * 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.
- */
-
-.container {
- display: flex;
- align-items: center;
- width: 100%;
- height: 64px;
- border-bottom: 1px solid var(--n-border-color);
-
- .nav {
- margin-left: 12px;
- }
-
- .settings {
- display: flex;
- flex: 1;
- justify-content: flex-end;
- }
-}
diff --git
a/dolphinscheduler-ui/src/layouts/content/components/navbar/index.tsx
b/dolphinscheduler-ui/src/layouts/content/components/navbar/index.tsx
index 96a7702742..11d2d1df1c 100644
--- a/dolphinscheduler-ui/src/layouts/content/components/navbar/index.tsx
+++ b/dolphinscheduler-ui/src/layouts/content/components/navbar/index.tsx
@@ -17,8 +17,9 @@
import { defineComponent, PropType, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
-import styles from './index.module.scss'
-import { NMenu } from 'naive-ui'
+import { SettingOutlined } from '@vicons/antd'
+import { useI18n } from 'vue-i18n'
+import { NMenu, NSpace, NButton, NIcon } from 'naive-ui'
import Logo from '../logo'
import Locales from '../locales'
import Timezone from '../timezone'
@@ -48,13 +49,17 @@ const Navbar = defineComponent({
setup() {
const route = useRoute()
const router = useRouter()
-
+ const { t } = useI18n()
const menuKey = ref(route.meta.activeMenu as string)
const handleMenuClick = (key: string) => {
router.push({ path: `/${key}` })
}
+ const handleUISettingClick = () => {
+ router.push({ path: '/ui-setting' })
+ }
+
watch(
() => route.path,
() => {
@@ -62,27 +67,37 @@ const Navbar = defineComponent({
}
)
- return { handleMenuClick, menuKey }
+ return { handleMenuClick, handleUISettingClick, menuKey, t }
},
render() {
return (
- <div class={styles.container}>
- <Logo />
- <div class={styles.nav}>
- <NMenu
- value={this.menuKey}
- mode='horizontal'
- options={this.headerMenuOptions}
- onUpdateValue={this.handleMenuClick}
- />
- </div>
- <div class={styles.settings}>
+ <NSpace style='height: 65px' justify='space-between' align='center'>
+ <NSpace align='center'>
+ <NSpace>
+ <Logo />
+ <NMenu
+ value={this.menuKey}
+ mode='horizontal'
+ options={this.headerMenuOptions}
+ onUpdateValue={this.handleMenuClick}
+ />
+ </NSpace>
+ </NSpace>
+ <NSpace align='center'>
+ <NButton quaternary onClick={this.handleUISettingClick}>
+ {{
+ icon: () => <NIcon size='16'>
+ <SettingOutlined />
+ </NIcon>,
+ default: this.t('menu.ui_setting')
+ }}
+ </NButton>
<Theme />
<Locales localesOptions={this.localesOptions} />
<Timezone timezoneOptions={this.timezoneOptions} />
<User userDropdownOptions={this.userDropdownOptions} />
- </div>
- </div>
+ </NSpace>
+ </NSpace>
)
}
})
diff --git a/dolphinscheduler-ui/src/layouts/content/use-dataList.ts
b/dolphinscheduler-ui/src/layouts/content/use-dataList.ts
index c7f13aac20..242859e33d 100644
--- a/dolphinscheduler-ui/src/layouts/content/use-dataList.ts
+++ b/dolphinscheduler-ui/src/layouts/content/use-dataList.ts
@@ -314,15 +314,7 @@ export function useDataList() {
icon: renderIcon(SafetyOutlined)
}
]
- },
- // add UI setting to the banner
- {
- label: () =>
- h(NEllipsis, null, { default: () => t('menu.ui_setting') }),
- key: 'ui-setting',
- icon: renderIcon(SettingOutlined),
- children: []
- },
+ }
]
}
diff --git a/dolphinscheduler-ui/src/locales/en_US/menu.ts
b/dolphinscheduler-ui/src/locales/en_US/menu.ts
index af788e86c9..852c9ba302 100644
--- a/dolphinscheduler-ui/src/locales/en_US/menu.ts
+++ b/dolphinscheduler-ui/src/locales/en_US/menu.ts
@@ -57,5 +57,5 @@ export default {
data_quality: 'Data Quality',
task_result: 'Task Result',
rule: 'Rule management',
- ui_setting: 'Setting',
+ ui_setting: 'UI Setting',
}
