github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-07-01 13:59:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Making checkbox toggle collumns

Browse Source
This commit is contained in:
Peter Olu 2022-06-05 22:57:17 +01:00
parent c37b7ee0f5
commit 615ba79185
1 changed files with 15 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/views/dashboard/related/log/Header.vue
View File

@ -17,27 +17,29 @@ limitations under the License. -->
<div v-if="currentSearchTerm === 'column'" class="flex-h items-center mr-5"> <div v-if="currentSearchTerm === 'column'" class="flex-h items-center mr-5">
<!-- <p style="margin-right: 10px">Select visible columns</p> --> <!-- <p style="margin-right: 10px">Select visible columns</p> -->
<el-dropdown class="dark" :hide-on-click="false"> <el-dropdown class="dark" :hide-on-click="false">
<span class="el-dropdown-link"> <span class="cursor-pointer">
Select visible columns<el-icon class="el-icon--right" Select visible columns<el-icon class="el-icon--right"
><arrow-down ><arrow-down
/></el-icon> /></el-icon>
</span> </span>
<template #dropdown> <template #dropdown>
<el-dropdown-menu class="dropdownSelector" > <el-dropdown-menu class="dropdownSelector">
<el-dropdown-item> <el-dropdown-item>
<div <div
style="width: 100%" style="width: 100%"
class="flex-h items-center justify-between" class="flex-h items-center justify-between"
> >
<span style="margin-right: 10px">Show All</span>
<el-checkbox :checked="showAllColumns" size="large" /> <el-checkbox :checked="showAllColumns" size="large" />
<span style="margin-right: 10px">Show All</span>
</div> </div>
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item <el-dropdown-item
v-for="item in logStore.serviceLogColumn" v-for="item in logStore.serviceLogColumn"
:key="item.value" :key="item.value"
> >
<el-checkbox v-model="item.isVisible" :label="item.value" fill="success" /> <el-checkbox class="custom-checkbox" v-model="item.isVisible">
<span>{{ item.value }}</span>
</el-checkbox>
<!-- <div <!-- <div
style="width: 100%" style="width: 100%"
class="flex-h items-center justify-between" class="flex-h items-center justify-between"
@ -623,7 +625,7 @@ watch(
); );
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.dropdownSelector{ .dropdownSelector {
background: var(--nice-black); background: var(--nice-black);
} }
.el-dropdown-link { .el-dropdown-link {
@ -632,6 +634,14 @@ watch(
display: flex; display: flex;
align-items: center; align-items: center;
} }
.cursor-pointer {
cursor: pointer;
}
.custom-checkbox .el-checkbox__input.is-checked + .el-checkbox__label,
.custom-checkbox .el-checkbox__label {
color: var(--spp-white) !important;
}
// .log-wrapper { // .log-wrapper {
// width: 600px; // width: 600px;
// padding-left: 40px; // padding-left: 40px;