github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-07-20 14:57:35 +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

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

@ -72,19 +72,28 @@ limitations under the License. -->
/> />
</div> </div>
</div> </div>
<div class="tool-icons" v-if="dashboardStore.editMode"> <div class="flex-h tools">
<span <div class="tool-icons flex-h" v-if="dashboardStore.editMode">
@click="clickIcons(t)" <span
v-for="(t, index) in toolIcons" @click="clickIcons(t)"
:key="index" v-for="(t, index) in toolIcons"
:title="t.content" :key="index"
> :title="t.content"
<el-tooltip :content="t.content" placement="bottom"> >
<i> <el-tooltip :content="t.content" placement="bottom">
<Icon class="icon-btn" size="sm" :iconName="t.name" /> <i>
</i> <Icon class="icon-btn" size="sm" :iconName="t.name" />
</el-tooltip> </i>
</span> </el-tooltip>
</span>
</div>
<div class="switch">
<el-switch
v-model="dashboardStore.editMode"
active-text="Edit"
inactive-text="View"
/>
</div>
</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;