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: 位置面板调整

Browse Source
This commit is contained in:
pipipi-pikachu 2022-09-03 14:11:17 +08:00
parent b8d108d574
commit 3292572160
2 changed files with 29 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/assets/styles/antd.scss
View File

@ -60,4 +60,9 @@
// tooltip // tooltip
.ant-tooltip-inner { .ant-tooltip-inner {
font-size: 12px; font-size: 12px;
}
// input
.ant-input-number-input {
line-height: 30px;
} }

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

@ -2,12 +2,12 @@
<div class="element-positopn-panel"> <div class="element-positopn-panel">
<div class="title">层级：</div> <div class="title">层级：</div>
<ButtonGroup class="row"> <ButtonGroup class="row">
<Button style="flex: 1;" @click="orderElement(handleElement!, ElementOrderCommands.TOP)"><IconSendToBack class="btn-icon" /> 置于顶层</Button> <Button style="flex: 1;" @click="orderElement(handleElement!, ElementOrderCommands.TOP)"><IconSendToBack class="btn-icon" /> 置顶</Button>
<Button style="flex: 1;" @click="orderElement(handleElement!, ElementOrderCommands.BOTTOM)"><IconBringToFrontOne class="btn-icon" /> 置于底层</Button> <Button style="flex: 1;" @click="orderElement(handleElement!, ElementOrderCommands.BOTTOM)"><IconBringToFrontOne class="btn-icon" /> 置底</Button>
</ButtonGroup> </ButtonGroup>
<ButtonGroup class="row"> <ButtonGroup class="row">
<Button style="flex: 1;" @click="orderElement(handleElement!, ElementOrderCommands.UP)"><IconBringToFront class="btn-icon" /> 上移一层</Button> <Button style="flex: 1;" @click="orderElement(handleElement!, ElementOrderCommands.UP)"><IconBringToFront class="btn-icon" /> 上移</Button>
<Button style="flex: 1;" @click="orderElement(handleElement!, ElementOrderCommands.DOWN)"><IconSentToBack class="btn-icon" /> 下移一层</Button> <Button style="flex: 1;" @click="orderElement(handleElement!, ElementOrderCommands.DOWN)"><IconSentToBack class="btn-icon" /> 下移</Button>
</ButtonGroup> </ButtonGroup>
<Divider /> <Divider />
@ -39,8 +39,8 @@
<Divider /> <Divider />
<div class="row"> <div class="row">
<div style="flex: 3;">位置：</div>
<InputNumber <InputNumber
prefix="水平："
:step="5" :step="5"
:value="left" :value="left"
@change="value => updateLeft(value as number)" @change="value => updateLeft(value as number)"
@ -48,23 +48,18 @@
/> />
<div style="flex: 1;"></div> <div style="flex: 1;"></div>
<InputNumber <InputNumber
prefix="垂直："
:step="5" :step="5"
:value="top" :value="top"
@change="value => updateTop(value as number)" @change="value => updateTop(value as number)"
style="flex: 4;" style="flex: 4;"
/> />
</div> </div>
<div class="row">
<div style="flex: 3;"></div>
<div style="flex: 4;" class="label">X</div>
<div style="flex: 1;"></div>
<div style="flex: 4;" class="label">Y</div>
</div>
<template v-if="handleElement!.type !== 'line'"> <template v-if="handleElement!.type !== 'line'">
<div class="row"> <div class="row">
<div style="flex: 3;">大小：</div>
<InputNumber <InputNumber
prefix="宽度："
:min="minSize" :min="minSize"
:max="1500" :max="1500"
:step="5" :step="5"
@ -83,6 +78,7 @@
</template> </template>
<div style="flex: 1;" v-else></div> <div style="flex: 1;" v-else></div>
<InputNumber <InputNumber
prefix="高度："
:min="minSize" :min="minSize"
:max="800" :max="800"
:step="5" :step="5"
@ -92,41 +88,24 @@
style="flex: 4;" style="flex: 4;"
/> />
</div> </div>
<div class="row">
<div style="flex: 3;"></div>
<div style="flex: 4;" class="label">宽</div>
<div style="flex: 1;"></div>
<div style="flex: 4;" class="label">高</div>
</div>
</template> </template>
<template v-if="!['line', 'video', 'audio'].includes(handleElement!.type)"> <template v-if="!['line', 'video', 'audio'].includes(handleElement!.type)">
<Divider /> <Divider />
<div class="row"> <div class="row">
<div style="flex: 3;">旋转：</div>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="逆时针旋转">
<IconRotate class="icon-btn" @click="updateRotate45('-')" style="flex: 2;" />
</Tooltip>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="顺时针旋转">
<IconRotate
class="icon-btn"
@click="updateRotate45('+')"
:style="{
flex: 2,
transform: 'rotateY(180deg)',
}"
/>
</Tooltip>
<div style="flex: 1;"></div>
<InputNumber <InputNumber
prefix="旋转："
:min="-180" :min="-180"
:max="180" :max="180"
:step="5" :step="5"
:value="rotate" :value="rotate"
@change="value => updateRotate(value as number)" @change="value => updateRotate(value as number)"
style="flex: 4;" style="flex: 8;"
/> />
<div style="flex: 1;"></div>
<div class="text-btn" @click="updateRotate45('-')" style="flex: 5;"><IconRotate /> -45°</div>
<div class="text-btn" @click="updateRotate45('+')" style="flex: 5;"><IconRotate :style="{ transform: 'rotateY(180deg)' }" /> +45°</div>
</div> </div>
</template> </template>
</div> </div>
@ -278,4 +257,15 @@ const updateRotate45 = (command: '+' | '-') => {
.icon-btn { .icon-btn {
cursor: pointer; cursor: pointer;
} }
.text-btn {
height: 30px;
line-height: 30px;
text-align: center;
cursor: pointer;
&:hover {
background-color: #efefef;
border-radius: $borderRadius;
}
}
</style> </style>