This is an automated email from the ASF dual-hosted git repository.
hanahmily pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/skywalking-banyandb.git
The following commit(s) were added to refs/heads/main by this push:
new 38ccc66 This PR mainly changes the style of stream page (#222)
38ccc66 is described below
commit 38ccc66c3396bf7cf3c716f9a4ce4eacfc41c825
Author: Wu ChuSheng <[email protected]>
AuthorDate: Wed Nov 30 14:12:02 2022 +0800
This PR mainly changes the style of stream page (#222)
* Make some changes to the UI style
* Make some changes to the table and the Detail UI style
Co-authored-by: Gao Hongtao <[email protected]>
---
ui/src/App.vue | 4 +
.../Database/Main/components/DataTable/index.vue | 8 +-
.../DrawerRight/components/detail-table.vue | 2 +-
.../Database/Main/components/DrawerRight/index.vue | 16 +-
.../Main/components/SecondNavigation/index.vue | 57 +++---
.../Main/components/TagNavigation/index.vue | 4 +-
ui/src/components/Database/Main/index.vue | 13 +-
ui/src/styles/custom.scss | 1 +
ui/src/styles/elementPlus.scss | 192 +++++++++++++++++++++
ui/src/styles/main.scss | 2 +-
10 files changed, 251 insertions(+), 48 deletions(-)
diff --git a/ui/src/App.vue b/ui/src/App.vue
index a28359e..e16e006 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -92,6 +92,10 @@ const handleRightItem = (index) => {
</div>
</template>
+<style lang="scss">
+@use './styles/elementPlus.scss' as *;
+</style>
+
<style lang="scss">
html,
body {
diff --git a/ui/src/components/Database/Main/components/DataTable/index.vue
b/ui/src/components/Database/Main/components/DataTable/index.vue
index 40ccbe7..3f62a1b 100644
--- a/ui/src/components/Database/Main/components/DataTable/index.vue
+++ b/ui/src/components/Database/Main/components/DataTable/index.vue
@@ -197,15 +197,15 @@ initData()
<template>
<div>
<el-table v-loading="data.loading" element-loading-text="loading"
element-loading-spinner="el-icon-loading"
- element-loading-background="rgba(0, 0, 0, 0.8)"
ref="multipleTable" max-height=700 stripe
+ element-loading-background="rgba(0, 0, 0, 0.8)"
ref="multipleTable" max-height=700 stripe border
:data="data.tableData" highlight-current-row tooltip-effect="dark"
@selection-change="handleSelectionChange"
- border empty-text="No data yet">
+ empty-text="No data yet">
<el-table-column type="selection" width="55">
</el-table-column>
- <el-table-column type="index" label="number" width="80">
+ <el-table-column type="index" label="number" width="90">
</el-table-column>
<el-table-column v-for="item in data.tableTags" sortable
:sort-change="sortChange" :key="item.name"
- :label="item.name" :prop="item.name">
+ :label="item.name" :prop="item.name" show-overflow-tooltip>
</el-table-column>
</el-table>
diff --git
a/ui/src/components/Database/Main/components/DrawerRight/components/detail-table.vue
b/ui/src/components/Database/Main/components/DrawerRight/components/detail-table.vue
index c323d61..6f5dcca 100644
---
a/ui/src/components/Database/Main/components/DrawerRight/components/detail-table.vue
+++
b/ui/src/components/Database/Main/components/DrawerRight/components/detail-table.vue
@@ -32,7 +32,7 @@ function handleSelectionChange() { }
<div>
<el-table ref="multipleTable" height=395 stripe :data="tableData"
highlight-current-row tooltip-effect="dark"
@selection-change="handleSelectionChange" border empty-text="No
data yet">
- <el-table-column type="index" label="number" width="80">
+ <el-table-column type="index" label="number" width="90">
</el-table-column>
<el-table-column v-for="item in options" :key="item" :prop="item"
:label="item" show-overflow-tooltip>
</el-table-column>
diff --git a/ui/src/components/Database/Main/components/DrawerRight/index.vue
b/ui/src/components/Database/Main/components/DrawerRight/index.vue
index a2a6e34..f3e6b5d 100644
--- a/ui/src/components/Database/Main/components/DrawerRight/index.vue
+++ b/ui/src/components/Database/Main/components/DrawerRight/index.vue
@@ -100,13 +100,12 @@ function closeDetail() {
<template>
<div class="drawer-container flex column">
- <div class="text-secondary-color text-tips text-start text-family
detail-title">Details</div>
- <div class="detail-content border-radius-little">
- <div class="detail-content-container margin-all">
+ <el-card style="max-height: calc(100% - 30px); margin: 15px;">
+ <div class="detail-content-container">
<div class="detail-content-title flex justify-between">
<div class="text-main-color text-title text-family">
<span :title="fileData.metadata.name">
- {{fileData.metadata.name}}
+ {{ fileData.metadata.name }}
</span>
</div>
<el-icon class="el-icon-close pointer detail-close icon"
@click="closeDetail"
@@ -116,7 +115,7 @@ function closeDetail() {
</el-icon>
</div>
<div class="text-secondary-color text-tips text-start
text-family margin-top-bottom-little">
- {{fileData.metadata.group}}</div>
+ {{ fileData.metadata.group }}</div>
<div v-for="item in data.detailList" :key="item.key">
<detail-list-component :keyName="item.key"
:value="item.value"></detail-list-component>
</div>
@@ -135,15 +134,14 @@ function closeDetail() {
<detail-table-component
:tableData="tableData"></detail-table-component>
</div>
- </div>
+ </el-card>
</div>
</template>
<style lang="scss" scoped>
.drawer-container {
- width: calc(100% - 20px);
- height: calc(100% - 20px);
- margin: 10px;
+ width: 100%;
+ height: 100%;
.detail-title {
width: 100%;
diff --git
a/ui/src/components/Database/Main/components/SecondNavigation/index.vue
b/ui/src/components/Database/Main/components/SecondNavigation/index.vue
index 2949706..89df03b 100644
--- a/ui/src/components/Database/Main/components/SecondNavigation/index.vue
+++ b/ui/src/components/Database/Main/components/SecondNavigation/index.vue
@@ -99,43 +99,50 @@ function openDesign() { }
</script>
<template>
- <div class="flex second-nav-contain justify-start align-item-center">
- <div class="flex justify-start align-item-center" style="width: 10%">
+ <div class="flex second-nav-contain align-item-center justify-center">
+ <div style="width: 130px;">
<el-select v-model="data.tagFamily" @change="changeTagFamilies"
filterable placeholder="Please select">
<el-option v-for="item in data.options" :key="item.value"
:label="item.label" :value="item.value">
</el-option>
</el-select>
</div>
- <div class="flex justify-between align-item-center" style="width: 89%;
margin-left: 1%;" >
- <div class="flex justify-start align-item-center" style="width:
35%">
- <el-date-picker v-model="value" type="datetimerange"
:shortcuts="pickerOptions.shortcuts"
- range-separator="to" start-placeholder="begin"
end-placeholder="end" align="right" disabled>
- </el-date-picker>
+ <div class="flex justify-between align-item-center" style="width:
calc(100% - 130px);">
+ <div class="flex align-item-center" style="width: 50%;">
+ <div class="flex justify-start align-item-center
set-margin-left" style="width: 270px;">
+ <el-date-picker v-model="value" type="datetimerange"
:shortcuts="pickerOptions.shortcuts"
+ range-separator="to" start-placeholder="begin"
end-placeholder="end" align="right" disabled>
+ </el-date-picker>
+ </div>
+ <div class="flex justify-start align-item-center
set-margin-left" style="width: 270px;">
+ <el-input class="search-input" placeholder="Search by
Tags" clearable v-model="query" disabled>
+ <template #append>
+ <el-button :icon="Search" />
+ </template>
+ </el-input>
+ </div>
</div>
-
- <div class="flex justify-start align-item-center" style="width:
35%">
- <el-input class="search-input" placeholder="Search by Tags"
clearable v-model="query" disabled>
- <template #append>
- <el-button :icon="Search" />
- </template>
- </el-input>
- </div>
- <div class="flex justify-start align-item-center" style="width:
8%">
- <el-button class="nav-button" @click="refresh"
icon="el-icon-refresh-right" disabled>Refresh</el-button>
- </div>
- <div class="flex justify-start align-item-center" style="width:
8%">
- <el-button class="nav-button" @click="openDetail">{{
showDrawer ? "Close Detail" : "Open Detail" }}
- </el-button>
- </div>
- <div class="flex justify-start align-item-center" style="width:
8%">
- <el-button class="nav-button" @click="openDesign"
disabled>Open Design</el-button>
+ <div class="flex align-item-center justify-end" style="width:50%;">
+ <div>
+ <el-button class="nav-button" @click="refresh"
disabled>Refresh</el-button>
+ </div>
+ <div class="set-margin-left">
+ <el-button class="nav-button" @click="openDesign"
disabled>Open Design</el-button>
+ </div>
+ <div class="set-margin-left">
+ <el-button class="nav-button" type="primary"
@click="openDetail">
+ {{ showDrawer ? "Close Detail" : "Open Detail" }}
+ </el-button>
+ </div>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
+.set-margin-left {
+ margin-left: 10px;
+}
.nav-button {
width: 100%;
margin: 0;
@@ -143,7 +150,7 @@ function openDesign() { }
.second-nav-contain {
width: calc(100% - 20px) !important;
- height: 50px;
+ height: 30px;
padding: 0 10px 0 10px;
.search-input {
diff --git a/ui/src/components/Database/Main/components/TagNavigation/index.vue
b/ui/src/components/Database/Main/components/TagNavigation/index.vue
index 87a8ae2..dbe168c 100644
--- a/ui/src/components/Database/Main/components/TagNavigation/index.vue
+++ b/ui/src/components/Database/Main/components/TagNavigation/index.vue
@@ -39,7 +39,7 @@ function handleClose(item, index) {
<div class="justify-start flex">
<el-tag class="pointer flex align-item-center" size="large"
v-for="(item, index) in tagsList"
:key="item.metadata.name" closable @click="changeMenu(item)"
@close="handleClose(item, index)"
- style="width:180px;" :effect="currentMenu.metadata.group ===
item.metadata.group &&
+ style="width:130px;" :effect="currentMenu.metadata.group ===
item.metadata.group &&
currentMenu.metadata.type === item.metadata.type &&
currentMenu.metadata.name === item.metadata.name
? 'dark'
@@ -57,7 +57,7 @@ div {
margin: 10px 10px 0 10px;
.el-tag {
- margin-right: 5px;
+ margin-right: 10px;
}
}
</style>
\ No newline at end of file
diff --git a/ui/src/components/Database/Main/index.vue
b/ui/src/components/Database/Main/index.vue
index cfcba51..c924ceb 100644
--- a/ui/src/components/Database/Main/index.vue
+++ b/ui/src/components/Database/Main/index.vue
@@ -47,17 +47,18 @@ function closeDetail() {
<template>
<div class="flex" style="height:100%; width:100%;">
<div :style="data.showDrawer ? 'width: calc(80% - 2px)' : 'width:
calc(100% - 2px)'" style="height: 100%;">
- <el-card style="max-height: 97.5%;">
- <div style="width: 100%; height: 40px;">
+ <el-card style="max-height: calc(100% - 30px);">
+ <div style="width: 100%; height: 30px;">
<tag-navigation-component></tag-navigation-component>
</div>
+ <el-divider border-style="dashed" />
<!--top-navigation-component
@handleNavigation="handleNavigation"></top-navigation-component-->
- <second-navigation-component @openDetail="openDetail"
:showDrawer="data.showDrawer" style="width: 100%">
+ <second-navigation-component @openDetail="openDetail"
:showDrawer="data.showDrawer" style="width: 100%; margin-top: 10px;">
</second-navigation-component>
<data-table-component @drawerRight="drawerRight"
class="margin-all-little"></data-table-component>
</el-card>
</div>
- <div class="bd-top bd-left drawer-right" v-if="data.showDrawer">
+ <div class="bd-left drawer-right" v-if="data.showDrawer">
<drawer-right-component :fileData="data.fileData"
@closeDetail="closeDetail"></drawer-right-component>
</div>
</div>
@@ -65,7 +66,7 @@ function closeDetail() {
<style lang="scss">
.el-card {
- margin: 10px;
+ margin: 15px;
padding: 0;
height: 100%;
}
@@ -78,7 +79,7 @@ function closeDetail() {
-webkit-animation: rtl-drawer-in .3s 1ms;
animation: rtl-drawer-in .3s 1ms;
width: 20%;
- height: calc(100% - 5px);
+ height: 100%;
background-color: var(--color-background);
}
</style>
\ No newline at end of file
diff --git a/ui/src/styles/custom.scss b/ui/src/styles/custom.scss
index 7673a90..e4d93f0 100644
--- a/ui/src/styles/custom.scss
+++ b/ui/src/styles/custom.scss
@@ -22,6 +22,7 @@ html {
color
==================== */
--color-main: #6E38F7; /* main color */
+ --color-main-background: #daccff;
--color-background: #e7ebfc;
--color-top-background: #1d1f2a;
diff --git a/ui/src/styles/elementPlus.scss b/ui/src/styles/elementPlus.scss
new file mode 100644
index 0000000..1cd3fec
--- /dev/null
+++ b/ui/src/styles/elementPlus.scss
@@ -0,0 +1,192 @@
+/*
+ * Licensed to 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. Apache Software Foundation (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.
+ */
+
+@use './custom.scss' as *;
+
+/* ====================
+ button
+=======================*/
+.el-button.nav-button {
+ height: 25px;
+ border-radius: 1px;
+ line-height: 28px;
+ font-size: 12px;
+ margin: 0;
+
+ &:hover {
+ color: var(--color-main) !important;
+ background-color: var(--color-main-background) !important;
+ border: 1px solid var(--color-main) !important;
+ }
+}
+
+.el-button--primary {
+ background-color: var(--color-main) !important;
+ border: 1px solid var(--color-main) !important;
+}
+
+.el-button.is-disabled.nav-button {
+ &:hover {
+ color: #a8abb2 !important;
+ background-color: white !important;
+ border: 1px solid #e4e7ed !important;
+ }
+}
+
+/* =============
+ el-tag
+===============*/
+.el-tag {
+ border-radius: 1px !important;
+ justify-content: space-between !important;
+}
+
+.el-tag--plain {
+ color: var(--color-main) !important;
+ border: 1px solid var(--color-main) !important;
+
+ .el-icon.el-tag__close {
+ color: var(--color-main) !important;
+ margin-right: 5px;
+ font-size: 15px !important;
+
+ &:hover {
+ width: 15px;
+ height: 15px;
+ color: white !important;
+ background-color: var(--color-main) !important;
+ }
+ }
+ &:hover {
+ background-color: var(--color-main-background) !important;
+ }
+}
+
+.el-tag--dark {
+ color: white !important;
+ background-color: var(--color-main) !important;
+ border: 1px solid var(--color-main) !important;
+
+ .el-icon.el-tag__close {
+ margin-right: 5px;
+ font-size: 15px !important;
+
+ &:hover {
+ width: 15px;
+ height: 15px;
+ color: white !important;
+ background-color: var(--color-main-background) !important;
+ }
+ }
+}
+
+.el-tag--large {
+ height: 25px !important;
+ font-size: 12px !important;
+ line-height: 25px !important;
+ padding: 0px !important;
+ --el-icon-size: 20px !important;
+}
+
+.el-tag__content {
+ margin-left: 10px;
+ height: 100%;
+ width: 65%;
+}
+
+/* =================
+ el-select
+==================== */
+.el-select {
+ height: 25px !important;
+ border-radius: 1px !important;
+ --el-select-input-focus-border-color: var(--color-main) !important;
+ --el-select-border-color-hover: var(--color-main) !important;
+}
+.el-scrollbar__view.el-select-dropdown__list {
+ margin: 0 !important;
+ font-size: 12px !important;
+ .el-select-dropdown__item.selected {
+ font-size: 14px !important;
+ color: var(--color-main);
+ }
+ .el-select-dropdown__item {
+ font-size: 14px !important;
+ }
+}
+
+
+/* ==================
+ el-input
+====================*/
+.el-input {
+ height: 25px !important;
+ --el-input-border-radius: 1px !important;
+ --el-input-focus-border-color: var(--color-main) !important;
+ --el-input-clear-hover-color: var(--color-main) !important;
+ .el-input__inner {
+ height: 25px !important;
+ }
+}
+
+/* ================
+ el-date-editor
+=====================*/
+.el-date-editor {
+ height: 25px !important;
+ border-radius: 1px !important;
+ .el-range-input {
+ height: 21px !important;
+ }
+}
+
+/* ================
+ el-divider
+=====================*/
+.el-divider {
+ margin: 15px 0 15px 0 !important;
+}
+
+/*=====================
+ el-table
+=======================*/
+.el-table {
+ --el-table-border-color: white !important;
+ --el-table-header-bg-color: #f2f5fc !important;
+ --el-table-header-text-color: black !important
+}
+.el-table .sort-caret.ascending {
+ border-bottom-color: var(--el-text-color-placeholder) !important;
+}
+.el-table .ascending .sort-caret.ascending {
+ border-bottom-color: var(--color-main) !important;
+}
+.el-table .sort-caret.descending {
+ border-top-color: var(--el-text-color-placeholder) !important;
+}
+.el-table .descending .sort-caret.descending {
+ border-top-color: var(--color-main) !important;
+}
+
+/* ================
+ el-card
+===================*/
+.el-card {
+ border-radius: 0px !important;
+}
\ No newline at end of file
diff --git a/ui/src/styles/main.scss b/ui/src/styles/main.scss
index 5ef282c..4e70c25 100644
--- a/ui/src/styles/main.scss
+++ b/ui/src/styles/main.scss
@@ -17,7 +17,7 @@
* under the License.
*/
-@import './custom.scss';
+ @use './custom.scss' as *;
/* ==================
flex layout
