This is an automated email from the ASF dual-hosted git repository.
chengpan pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/kyuubi.git
The following commit(s) were added to refs/heads/master by this push:
new f8dc86914 [KYUUBI #5634] [UI] Smoother the icon animation on
collapsing sidebar
f8dc86914 is described below
commit f8dc86914f26658967bafe19ee1fba89e19b815d
Author: William Tong <[email protected]>
AuthorDate: Tue Nov 7 11:41:25 2023 +0800
[KYUUBI #5634] [UI] Smoother the icon animation on collapsing sidebar
### _Why are the changes needed?_
* Renamed type.ts to types.ts as the project uses the naming convention
"types.ts" uniformly.
* Removed the title 'Swagger' from the Swagger page.
* Optimizations for Kyuubi icon display when collapsing the sidebar: make
the icon and version jump smoother when expanded.
### _How was this patch tested?_
- [ ] Add some test cases that check the changes thoroughly including
negative and positive cases if possible
- [ ] Add screenshots for manual tests if appropriate
<img width="312" alt="image"
src="https://github.com/apache/kyuubi/assets/13530192/cbe2b502-a47e-471b-ab77-dab822f793da";>
<img width="1731" alt="image"
src="https://github.com/apache/kyuubi/assets/13530192/61f0ed56-9328-4046-89aa-bdd1ef6f78e6";>
<img width="807" alt="image"
src="https://github.com/apache/kyuubi/assets/13530192/cb53a342-ce29-4181-aad5-d32bd32f9009";>
- [ ] [Run
test](https://kyuubi.readthedocs.io/en/master/contributing/code/testing.html#running-tests)
locally before make a pull request
### _Was this patch authored or co-authored using generative AI tooling?_
Closes #5634 from tongwl/master-20231106-2.
Closes #5634
d2745e360 [weitong] code change
5ac8ce377 [weitong] UI optimize
Lead-authored-by: William Tong <[email protected]>
Co-authored-by: weitong <[email protected]>
Signed-off-by: Cheng Pan <[email protected]>
---
.../web-ui/src/components/monaco-editor/index.vue | 2 +-
.../components/monaco-editor/{type.ts => types.ts} | 0
.../web-ui/src/layout/components/aside/index.vue | 40 ++++++++++++----------
kyuubi-server/web-ui/src/views/swagger/index.vue | 1 -
4 files changed, 22 insertions(+), 21 deletions(-)
diff --git a/kyuubi-server/web-ui/src/components/monaco-editor/index.vue
b/kyuubi-server/web-ui/src/components/monaco-editor/index.vue
index 4c387172a..a98a3f31b 100644
--- a/kyuubi-server/web-ui/src/components/monaco-editor/index.vue
+++ b/kyuubi-server/web-ui/src/components/monaco-editor/index.vue
@@ -24,7 +24,7 @@
import * as monaco from 'monaco-editor'
import { format } from 'sql-formatter'
import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
- import { editorProps } from './type'
+ import { editorProps } from './types'
import { useEditorStore } from '@/pinia/editor'
import { ref, toRaw, watch, onBeforeUnmount, onMounted } from 'vue'
diff --git a/kyuubi-server/web-ui/src/components/monaco-editor/type.ts
b/kyuubi-server/web-ui/src/components/monaco-editor/types.ts
similarity index 100%
rename from kyuubi-server/web-ui/src/components/monaco-editor/type.ts
rename to kyuubi-server/web-ui/src/components/monaco-editor/types.ts
diff --git a/kyuubi-server/web-ui/src/layout/components/aside/index.vue
b/kyuubi-server/web-ui/src/layout/components/aside/index.vue
index 78cbbc774..42db213e3 100644
--- a/kyuubi-server/web-ui/src/layout/components/aside/index.vue
+++ b/kyuubi-server/web-ui/src/layout/components/aside/index.vue
@@ -20,7 +20,7 @@
<header>
<img v-if="!isCollapse" src="@/assets/kyuubi-logo.svg" />
<img v-else class="collapsed-logo" src="@/assets/kyuubi.png" />
- <pre v-if="!isCollapse">{{ version }}</pre>
+ <span v-if="!isCollapse">{{ version }}</span>
</header>
<c-menu :is-collapse="isCollapse" :active-path="activePath" :menus="menus" />
</template>
@@ -42,37 +42,39 @@
</script>
<style lang="scss" scoped>
+ $height: 64px;
header {
+ width: 100%;
position: absolute;
top: 0;
left: 0;
- height: 64px;
- padding-left: 16px;
- line-height: 64px;
+ height: $height;
+ line-height: $height;
+ padding: 0 16px;
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-between;
+ box-sizing: border-box;
img {
- display: inline-block;
width: 140px;
height: 50px;
- top: -10px;
- position: relative;
- vertical-align: middle;
+ &.collapsed-logo {
+ width: 40px;
+ height: 40px;
+ position: relative;
+ top: -4px;
+ left: -4px;
+ }
}
- pre {
+ span {
+ position: relative;
+ top: 17px;
font-size: 10px;
- display: inline-block;
- width: 100px;
- margin-top: 20px;
- text-align: center;
font-family: 'Myriad Pro', 'Helvetica Neue', Arial, Helvetica,
sans-serif;
color: rgba(255, 255, 255, 0.87);
}
- .collapsed-logo {
- width: 40px;
- height: 40px;
- margin-top: 30px;
- }
}
.el-menu {
- margin-top: 64px;
+ margin-top: $height;
}
</style>
diff --git a/kyuubi-server/web-ui/src/views/swagger/index.vue
b/kyuubi-server/web-ui/src/views/swagger/index.vue
index 7f8fb7f99..1ff671d1f 100644
--- a/kyuubi-server/web-ui/src/views/swagger/index.vue
+++ b/kyuubi-server/web-ui/src/views/swagger/index.vue
@@ -18,7 +18,6 @@
<template>
<main>
- Swagger
<div id="swagger-ui" class="swagger-ui"> </div>
</main>
</template>
