github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-07-20 14:37:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

add switch

Browse Source
This commit is contained in:
Qiuxia Fan 2022-03-21 18:55:46 +08:00
parent 9bb78ae80c
commit 1cd9165a61
1 changed files with 34 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/views/dashboard/panel/Tool.vue
View File

@ -72,7 +72,8 @@ limitations under the License. -->
/> />
</div> </div>
</div> </div>
<div class="tool-icons" v-if="dashboardStore.editMode"> <div class="flex-h tools">
<div class="tool-icons flex-h" v-if="dashboardStore.editMode">
<span <span
@click="clickIcons(t)" @click="clickIcons(t)"
v-for="(t, index) in toolIcons" v-for="(t, index) in toolIcons"
@ -86,6 +87,14 @@ limitations under the License. -->
</el-tooltip> </el-tooltip>
</span> </span>
</div> </div>
<div class="switch">
<el-switch
v-model="dashboardStore.editMode"
active-text="Edit"
inactive-text="View"
/>
</div>
</div>
</div> </div>
</template> </template>
@ -106,7 +115,9 @@ import {
import { useSelectorStore } from "@/store/modules/selectors"; import { useSelectorStore } from "@/store/modules/selectors";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import { Option } from "@/types/app"; import { Option } from "@/types/app";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const dashboardStore = useDashboardStore(); const dashboardStore = useDashboardStore();
const selectorStore = useSelectorStore(); const selectorStore = useSelectorStore();
const appStore = useAppStoreWithOut(); const appStore = useAppStoreWithOut();
@ -434,12 +445,17 @@ function getTools() {
<style lang="scss" scoped> <style lang="scss" scoped>
.dashboard-tool { .dashboard-tool {
text-align: right; text-align: right;
padding: 5px; padding: 3px 5px 5px 5px;
background: rgb(240, 242, 245); background: rgb(240, 242, 245);
border-bottom: 1px solid #dfe4e8; border-bottom: 1px solid #dfe4e8;
justify-content: space-between; justify-content: space-between;
} }
.switch {
padding-top: 2px;
margin: 0 10px;
}
.label { .label {
font-size: 12px; font-size: 12px;
display: inline-block; display: inline-block;
@ -450,6 +466,10 @@ function getTools() {
margin-top: 2px; margin-top: 2px;
} }
.tools {
justify-content: space-between;
}
.icon-btn { .icon-btn {
display: inline-block; display: inline-block;
padding: 3px; padding: 3px;