github/PPTist
1
0
Fork 0
mirror of https://github.com/pipipi-pikachu/PPTist.git synced 2025-04-15 02:20:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf: 优化UI

Browse Source
This commit is contained in:
pipipi-pikachu 2021-06-05 14:01:18 +08:00
parent f713957048
commit 85ce023845
2 changed files with 18 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/views/Editor/Toolbar/ElementPositionPanel.vue
View File

@ -1,19 +1,18 @@
<template> <template>
<div class="element-positopn-panel"> <div class="element-positopn-panel">
<div class="title">层级：</div>
<ButtonGroup class="row"> <ButtonGroup class="row">
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="置顶层"> <Button style="flex: 1;" @click="orderElement(handleElement, 'top')"><IconSendToBack class="btn-icon" /> 置于顶层</Button>
<Button style="flex: 1;" @click="orderElement(handleElement, 'top')"><IconSendToBack /></Button> <Button style="flex: 1;" @click="orderElement(handleElement, 'bottom')"><IconBringToFrontOne class="btn-icon" /> 置于底层</Button>
</Tooltip>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="置底层">
<Button style="flex: 1;" @click="orderElement(handleElement, 'bottom')"><IconBringToFrontOne /></Button>
</Tooltip>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="上移一层">
<Button style="flex: 1;" @click="orderElement(handleElement, 'up')"><IconBringToFront /></Button>
</Tooltip>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="下移一层">
<Button style="flex: 1;" @click="orderElement(handleElement, 'down')"><IconSentToBack /></Button>
</Tooltip>
</ButtonGroup> </ButtonGroup>
<ButtonGroup class="row">
<Button style="flex: 1;" @click="orderElement(handleElement, 'up')"><IconBringToFront class="btn-icon" /> 上移一层</Button>
<Button style="flex: 1;" @click="orderElement(handleElement, 'down')"><IconSentToBack class="btn-icon" /> 下移一层</Button>
</ButtonGroup>
<Divider />
<div class="title">对齐：</div>
<ButtonGroup class="row"> <ButtonGroup class="row">
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="左对齐"> <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="左对齐">
<Button style="flex: 1;" @click="alignElementToCanvas('left')"><IconAlignLeft /></Button> <Button style="flex: 1;" @click="alignElementToCanvas('left')"><IconAlignLeft /></Button>
@ -260,9 +259,15 @@ export default defineComponent({
align-items: center; align-items: center;
margin-bottom: 10px; margin-bottom: 10px;
} }
.title {
margin-bottom: 10px;
}
.label { .label {
text-align: center; text-align: center;
} }
.btn-icon {
margin-right: 3px;
}
.icon-btn { .icon-btn {
cursor: pointer; cursor: pointer;
} }

1
src/views/Editor/Toolbar/index.vue
View File

@ -100,6 +100,7 @@ export default defineComponent({
font-size: 12px; font-size: 12px;
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;
user-select: none;
} }
.tab { .tab {
flex: 1; flex: 1;