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 2023-10-13 14:14:21 +08:00
parent 27210e57f4
commit e3aef88a58
8 changed files with 109 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Button.vue
View File

@ -9,6 +9,8 @@
'checkbox': !disabled && type === 'checkbox',
'radio': !disabled && type === 'radio',
'small': size === 'small',
'first': first,
'last': last,
}"
@click="handleClick()"
>
@ -22,11 +24,15 @@ const props = withDefaults(defineProps<{
disabled?: boolean
type?: 'default' | 'primary' | 'checkbox' | 'radio'
size?: 'small' | 'normal'
first?: boolean
last?: boolean
}>(), {
checked: false,
disabled: false,
type: 'default',
size: 'normal',
first: false,
last: false,
})
const emit = defineEmits<{

83
src/components/ButtonGroup.vue
View File

@ -1,36 +1,85 @@
<template>
<div class="button-group">
<div class="button-group" :class="{ 'passive': passive }" ref="groupRef">
<slot></slot>
</div>
</template>
<script lang="ts" setup>
withDefaults(defineProps<{
passive?: boolean
}>(), {
passive: false,
})
</script>
<style lang="scss" scoped>
.button-group {
display: flex;
align-items: center;
border: 1px solid #d9d9d9;
border-right: 0;
border-radius: $borderRadius;
overflow: hidden;
::v-deep(.button) {
::v-deep(button.button) {
border-radius: 0;
border: 0;
border-left-width: 1px;
border-right-width: 0;
display: inline-block;
position: relative;
}
&::after {
content: '';
width: 1px;
height: 100%;
background-color: #d9d9d9;
position: absolute;
top: 0;
right: 0;
&:not(.passive) {
::v-deep(button.button) {
&:not(:last-child, .radio, .checkbox):hover {
position: relative;
&::after {
content: '';
width: 1px;
height: calc(100% + 2px);
background-color: $themeColor;
position: absolute;
top: -1px;
right: -1px;
}
}
&:first-child {
border-top-left-radius: $borderRadius;
border-bottom-left-radius: $borderRadius;
border-left-width: 1px;
}
&:last-child {
border-top-right-radius: $borderRadius;
border-bottom-right-radius: $borderRadius;
border-right-width: 1px;
}
}
}
&.passive {
::v-deep(button.button) {
&:not(.last, .radio, .checkbox):hover {
position: relative;
&::after {
content: '';
width: 1px;
height: calc(100% + 2px);
background-color: $themeColor;
position: absolute;
top: -1px;
right: -1px;
}
}
&.first {
border-top-left-radius: $borderRadius;
border-bottom-left-radius: $borderRadius;
border-left-width: 1px;
}
&.last {
border-top-right-radius: $borderRadius;
border-bottom-right-radius: $borderRadius;
border-right-width: 1px;
}
}
}
}

8
src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue
View File

@ -105,7 +105,7 @@
</div>
</Popover>
</div>
<ButtonGroup class="row">
<ButtonGroup class="row" passive>
<Popover trigger="click" v-model:open="presetThemesVisible" style="width: 40%;">
<template #content>
<div class="preset-themes">
@ -123,10 +123,10 @@
</div>
</div>
</template>
<Button class="no-padding" style="width: 100%;">推荐主题</Button>
<Button first style="width: 100%;">推荐主题</Button>
</Popover>
<Button
class="no-padding"
<Button
last
:disabled="themeColor.length >= 10"
style="width: 60%;"
@click="addThemeColor()"

6
src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue
View File

@ -7,8 +7,8 @@
<ElementFlip />
<ButtonGroup class="row">
<Button style="width: calc(100% / 6 * 5);" @click="clipImage()"><IconTailoring class="btn-icon" /> 裁剪图片</Button>
<ButtonGroup class="row" passive>
<Button first style="width: calc(100% / 6 * 5);" @click="clipImage()"><IconTailoring class="btn-icon" /> 裁剪图片</Button>
<Popover trigger="click" v-model:value="clipPanelVisible" style="width: calc(100% / 6);">
<template #content>
<div class="clip">
@ -37,7 +37,7 @@
</template>
</div>
</template>
<Button class="popover-btn" style="width: 100%;"><IconDown /></Button>
<Button last class="popover-btn" style="width: 100%;"><IconDown /></Button>
</Popover>
</ButtonGroup>

7
src/views/Editor/Toolbar/ElementStylePanel/MultiStylePanel.vue
View File

@ -77,7 +77,7 @@
</template>
</Select>
</SelectGroup>
<ButtonGroup class="row">
<ButtonGroup class="row" passive>
<Popover trigger="click" style="width: 30%;">
<template #content>
<ColorPicker
@ -85,7 +85,7 @@
@update:modelValue="value => updateFontStyle('color', value)"
/>
</template>
<TextColorButton :color="richTextAttrs.color" v-tooltip="'文字颜色'">
<TextColorButton first :color="richTextAttrs.color" v-tooltip="'文字颜色'">
<IconText />
</TextColorButton>
</Popover>
@ -106,7 +106,8 @@
v-tooltip="'增大字号'"
@click="updateFontStyle('fontsize-add', '2')"
><IconFontSize />+</Button>
<Button
<Button
last
class="font-size-btn"
style="width: 20%;"
v-tooltip="'减小字号'"

7
src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue
View File

@ -124,7 +124,7 @@
</Select>
</SelectGroup>
<ButtonGroup class="row">
<ButtonGroup class="row" passive>
<Popover trigger="click" style="width: 30%;">
<template #content>
<ColorPicker
@ -132,7 +132,7 @@
@update:modelValue="value => emitRichTextCommand('color', value)"
/>
</template>
<TextColorButton v-tooltip="'文字颜色'" :color="richTextAttrs.color">
<TextColorButton first v-tooltip="'文字颜色'" :color="richTextAttrs.color">
<IconText />
</TextColorButton>
</Popover>
@ -153,7 +153,8 @@
v-tooltip="'增大字号'"
@click="emitRichTextCommand('fontsize-add')"
><IconFontSize />+</Button>
<Button
<Button
last
class="font-size-btn"
style="width: 20%;"
v-tooltip="'减小字号'"

6
src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue
View File

@ -28,7 +28,7 @@
</Select>
</SelectGroup>
<ButtonGroup class="row">
<ButtonGroup class="row" passive>
<Popover trigger="click" style="width: 50%;">
<template #content>
<ColorPicker
@ -36,7 +36,7 @@
@update:modelValue="value => updateTextAttrs({ color: value })"
/>
</template>
<TextColorButton v-tooltip="'文字颜色'" :color="textAttrs.color">
<TextColorButton first v-tooltip="'文字颜色'" :color="textAttrs.color">
<IconText />
</TextColorButton>
</Popover>
@ -47,7 +47,7 @@
@update:modelValue="value => updateTextAttrs({ backcolor: value })"
/>
</template>
<TextColorButton v-tooltip="'单元格填充'" :color="textAttrs.backcolor">
<TextColorButton last v-tooltip="'单元格填充'" :color="textAttrs.backcolor">
<IconFill />
</TextColorButton>
</Popover>

33
src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue
View File

@ -41,7 +41,7 @@
</Select>
</SelectGroup>
<ButtonGroup class="row">
<ButtonGroup class="row" passive>
<Popover trigger="click" style="width: 30%;">
<template #content>
<ColorPicker
@ -49,7 +49,7 @@
@update:modelValue="value => emitRichTextCommand('color', value)"
/>
</template>
<TextColorButton v-tooltip="'文字颜色'" :color="richTextAttrs.color">
<TextColorButton first v-tooltip="'文字颜色'" :color="richTextAttrs.color">
<IconText />
</TextColorButton>
</Popover>
@ -70,7 +70,8 @@
v-tooltip="'增大字号'"
@click="emitRichTextCommand('fontsize-add')"
><IconFontSize />+</Button>
<Button
<Button
last
class="font-size-btn"
style="width: 20%;"
v-tooltip="'减小字号'"
@ -132,8 +133,9 @@
><IconQuote /></CheckboxButton>
</ButtonGroup>
<ButtonGroup class="row">
<ButtonGroup class="row" passive>
<CheckboxButton
first
style="flex: 1;"
v-tooltip="'清除格式'"
@click="emitRichTextCommand('clear')"
@ -155,6 +157,7 @@
</div>
</template>
<CheckboxButton
last
style="width: 100%;"
:checked="!!richTextAttrs.link"
v-tooltip="'超链接'"
@ -177,9 +180,10 @@
<RadioButton value="justify" v-tooltip="'两端对齐'" style="flex: 1;"><IconAlignTextBoth /></RadioButton>
</RadioGroup>
<div class="row">
<div class="row" passive>
<ButtonGroup style="flex: 1;">
<Button
first
:type="richTextAttrs.bulletList ? 'primary' : 'default'"
style="flex: 1;"
v-tooltip="'项目符号'"
@ -198,12 +202,13 @@
</ul>
</div>
</template>
<Button class="popover-btn"><IconDown /></Button>
<Button last class="popover-btn"><IconDown /></Button>
</Popover>
</ButtonGroup>
<div style="width: 10px;"></div>
<ButtonGroup style="flex: 1;">
<ButtonGroup style="flex: 1;" passive>
<Button
first
:type="richTextAttrs.orderedList ? 'primary' : 'default'"
style="flex: 1;"
v-tooltip="'编号'"
@ -222,29 +227,29 @@
</ul>
</div>
</template>
<Button class="popover-btn"><IconDown /></Button>
<Button last class="popover-btn"><IconDown /></Button>
</Popover>
</ButtonGroup>
</div>
<div class="row">
<ButtonGroup style="flex: 1;">
<Button style="flex: 1;" v-tooltip="'减小段落缩进'" @click="emitRichTextCommand('indent', '-1')"><IconIndentLeft /></Button>
<ButtonGroup style="flex: 1;" passive>
<Button first style="flex: 1;" v-tooltip="'减小段落缩进'" @click="emitRichTextCommand('indent', '-1')"><IconIndentLeft /></Button>
<Popover trigger="click" v-model:value="indentLeftPanelVisible">
<template #content>
<PopoverMenuItem @click="emitRichTextCommand('textIndent', '-1')">减小首行缩进</PopoverMenuItem>
</template>
<Button class="popover-btn"><IconDown /></Button>
<Button last class="popover-btn"><IconDown /></Button>
</Popover>
</ButtonGroup>
<div style="width: 10px;"></div>
<ButtonGroup style="flex: 1;">
<Button style="flex: 1;" v-tooltip="'增大段落缩进'" @click="emitRichTextCommand('indent', '+1')"><IconIndentRight /></Button>
<ButtonGroup style="flex: 1;" passive>
<Button first style="flex: 1;" v-tooltip="'增大段落缩进'" @click="emitRichTextCommand('indent', '+1')"><IconIndentRight /></Button>
<Popover trigger="click" v-model:value="indentRightPanelVisible">
<template #content>
<PopoverMenuItem @click="emitRichTextCommand('textIndent', '+1')">增大首行缩进</PopoverMenuItem>
</template>
<Button class="popover-btn"><IconDown /></Button>
<Button last class="popover-btn"><IconDown /></Button>
</Popover>
</ButtonGroup>
</div>