github/skywalking-booster-ui
3
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-10-15 12:49:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: implement the Dark Theme (#334)

Browse Source
This commit is contained in:
Fine0830
2023-11-14 20:37:15 +08:00
committed by GitHub
parent 780104c5d2
commit 832dc1676b
81 changed files with 638 additions and 351 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/views/dashboard/controls/ContinuousProfiling.vue
View File

@@ -75,7 +75,7 @@ limitations under the License. -->
.header {
padding: 10px;
font-size: $font-size-smaller;
border-bottom: 1px solid #dcdfe6;
border-bottom: 1px solid $border-color;
}
.tools {
@@ -87,7 +87,7 @@ limitations under the License. -->
&:hover {
color: $active-color;
background-color: #eee;
background-color: $popper-hover-bg-color;
}
}
@@ -95,6 +95,6 @@ limitations under the License. -->
font-weight: bold;
line-height: 40px;
padding: 0 10px;
border-bottom: 1px solid #dcdfe6;
border-bottom: 1px solid $border-color;
}
</style>

4
src/views/dashboard/controls/DemandLog.vue
View File

@@ -69,7 +69,7 @@ limitations under the License. -->
.header {
padding: 10px;
font-size: $font-size-smaller;
border-bottom: 1px solid #dcdfe6;
border-bottom: 1px solid $border-color;
min-width: 1024px;
}
@@ -82,7 +82,7 @@ limitations under the License. -->
&:hover {
color: $active-color;
background-color: #eee;
background-color: $popper-hover-bg-color;
}
}
</style>

4
src/views/dashboard/controls/Ebpf.vue
View File

@@ -68,7 +68,7 @@ limitations under the License. -->
.header {
padding: 10px;
font-size: $font-size-smaller;
border-bottom: 1px solid #dcdfe6;
border-bottom: 1px solid $border-color;
}
.tools {
@@ -80,7 +80,7 @@ limitations under the License. -->
&:hover {
color: $active-color;
background-color: #eee;
background-color: $popper-hover-bg-color;
}
}

4
src/views/dashboard/controls/Event.vue
View File

@@ -80,7 +80,7 @@ limitations under the License. -->
.header {
padding: 10px;
font-size: $font-size-smaller;
border-bottom: 1px solid #dcdfe6;
border-bottom: 1px solid $border-color;
min-width: 1024px;
}
@@ -93,7 +93,7 @@ limitations under the License. -->
&:hover {
color: $active-color;
background-color: #eee;
background-color: $popper-hover-bg-color;
}
}

4
src/views/dashboard/controls/Log.vue
View File

@@ -77,7 +77,7 @@ limitations under the License. -->
.header {
padding: 10px;
font-size: $font-size-smaller;
border-bottom: 1px solid #dcdfe6;
border-bottom: 1px solid $border-color;
min-width: 1024px;
}
@@ -90,7 +90,7 @@ limitations under the License. -->
&:hover {
color: $active-color;
background-color: #eee;
background-color: $popper-hover-bg-color;
}
}

6
src/views/dashboard/controls/NetworkProfiling.vue
View File

@@ -67,7 +67,7 @@ limitations under the License. -->
.header {
padding: 10px;
font-size: $font-size-smaller;
border-bottom: 1px solid #dcdfe6;
border-bottom: 1px solid $border-color;
}
.tools {
@@ -79,7 +79,7 @@ limitations under the License. -->
&:hover {
color: $active-color;
background-color: #eee;
background-color: $popper-hover-bg-color;
}
}
@@ -87,6 +87,6 @@ limitations under the License. -->
font-weight: bold;
line-height: 40px;
padding: 0 10px;
border-bottom: 1px solid #dcdfe6;
border-bottom: 1px solid $border-color;
}
</style>

4
src/views/dashboard/controls/Profile.vue
View File

@@ -68,7 +68,7 @@ limitations under the License. -->
.header {
padding: 10px;
font-size: $font-size-smaller;
border-bottom: 1px solid #dcdfe6;
border-bottom: 1px solid $border-color;
}
.tools {
@@ -80,7 +80,7 @@ limitations under the License. -->
&:hover {
color: $active-color;
background-color: #eee;
background-color: $popper-hover-bg-color;
}
}

11
src/views/dashboard/controls/Tab.vue
View File

@@ -302,15 +302,16 @@ limitations under the License. -->
height: 20px;
line-height: 20px;
outline: none;
color: #333;
color: $font-color;
font-style: normal;
overflow: hidden;
text-overflow: ellipsis;
margin-right: 20px;
background-color: $theme-background;
}
.tab-icons {
color: #333;
color: $font-color;
i {
margin-right: 3px;
@@ -350,17 +351,17 @@ limitations under the License. -->
.tab-header {
justify-content: space-between;
width: 100%;
border-bottom: 1px solid #eee;
border-bottom: 1px solid $border-color-primary;
}
.vue-grid-layout {
background: #f7f9fa;
background: $layout-background;
height: auto !important;
}
.vue-grid-item:not(.vue-grid-placeholder) {
background: $theme-background;
box-shadow: 0 1px 4px 0 #00000029;
box-shadow: 0 0 3px 0 $box-shadow-color;
border-radius: 3px;
}

6
src/views/dashboard/controls/TaskTimeline.vue
View File

@@ -67,7 +67,7 @@ limitations under the License. -->
.header {
padding: 10px;
font-size: $font-size-smaller;
border-bottom: 1px solid #dcdfe6;
border-bottom: 1px solid $border-color;
}
.tools {
@@ -79,7 +79,7 @@ limitations under the License. -->
&:hover {
color: $active-color;
background-color: #eee;
background-color: $popper-hover-bg-color;
}
}
@@ -87,6 +87,6 @@ limitations under the License. -->
font-weight: bold;
line-height: 40px;
padding: 0 10px;
border-bottom: 1px solid #dcdfe6;
border-bottom: 1px solid $border-color;
}
</style>

16
src/views/dashboard/controls/Text.vue
View File

@@ -32,7 +32,7 @@ limitations under the License. -->
<div
class="body"
:style="{
backgroundColor: TextColors[graph.backgroundColor],
backgroundColor,
justifyContent: graph.textAlign,
}"
>
@@ -40,7 +40,7 @@ limitations under the License. -->
:href="graph.url"
target="_blank"
:style="{
color: TextColors[graph.fontColor],
color: fontColor,
fontSize: graph.fontSize + 'px',
}"
>
@@ -55,6 +55,8 @@ limitations under the License. -->
import { useI18n } from "vue-i18n";
import { useDashboardStore } from "@/store/modules/dashboard";
import { TextColors } from "@/views/dashboard/data";
import { useAppStoreWithOut } from "@/store/modules/app";
import { Themes } from "@/constants/data";
/*global defineProps */
const props = defineProps({
@@ -65,9 +67,17 @@ limitations under the License. -->
activeIndex: { type: String, default: "" },
});
const { t } = useI18n();
const appStore = useAppStoreWithOut();
const graph = computed(() => props.data.graph || {});
const dashboardStore = useDashboardStore();
const backgroundColor = computed(
() => TextColors[graph.value.backgroundColor] || (appStore.theme === Themes.Dark ? "#212224" : "#fff"),
);
const fontColor = computed(
() => TextColors[graph.value.fontColor] || (appStore.theme === Themes.Dark ? "#fafbfc" : "#3d444f"),
);
function removeTopo() {
dashboardStore.removeControls(props.data);
}
@@ -112,7 +122,7 @@ limitations under the License. -->
&:hover {
color: $active-color;
background-color: #eee;
background-color: $popper-hover-bg-color;
}
}
</style>

2
src/views/dashboard/controls/ThirdPartyApp.vue
View File

@@ -103,7 +103,7 @@ limitations under the License. -->
&:hover {
color: $active-color;
background-color: #eee;
background-color: $popper-hover-bg-color;
}
}

2
src/views/dashboard/controls/TimeRange.vue
View File

@@ -176,7 +176,7 @@ limitations under the License. -->
&:hover {
color: $active-color;
background-color: #eee;
background-color: $popper-hover-bg-color;
}
}
</style>

3
src/views/dashboard/controls/Topology.vue
View File

@@ -59,7 +59,6 @@ limitations under the License. -->
</script>
<style lang="scss" scoped>
.topology {
// background-color: #333840;
width: 100%;
height: 100%;
font-size: $font-size-smaller;
@@ -82,7 +81,7 @@ limitations under the License. -->
&:hover {
color: $active-color;
background-color: #eee;
background-color: $popper-hover-bg-color;
}
}

4
src/views/dashboard/controls/Trace.vue
View File

@@ -76,7 +76,7 @@ limitations under the License. -->
.header {
padding: 10px;
font-size: $font-size-smaller;
border-bottom: 1px solid #dcdfe6;
border-bottom: 1px solid $border-color;
min-width: 1200px;
}
@@ -89,7 +89,7 @@ limitations under the License. -->
&:hover {
color: $active-color;
background-color: #eee;
background-color: $popper-hover-bg-color;
}
}

4
src/views/dashboard/controls/Widget.vue
View File

@@ -277,7 +277,7 @@ limitations under the License. -->
height: 30px;
padding: 5px;
width: 100%;
border-bottom: 1px solid #eee;
border-bottom: 1px solid $border-color-primary;
justify-content: space-between;
}
@@ -294,7 +294,7 @@ limitations under the License. -->
&:hover {
color: $active-color;
background-color: #eee;
background-color: $popper-hover-bg-color;
}
}