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

refactor: style fix

Browse Source
This commit is contained in:
pipipi-pikachu 2023-10-05 12:37:29 +08:00
parent 3758aab0cf
commit 9fb4a10549
21 changed files with 162 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/Popover.vue
View File

@ -58,6 +58,7 @@ onMounted(() => {
offset: [0, 8],
duration: 200,
animation: 'scale',
theme: 'popover',
onShow() {
contentVisible.value = true
},
@ -84,5 +85,13 @@ onMounted(() => {
border: 1px solid $borderColor;
box-shadow: $boxShadow;
border-radius: 2px;
font-size: 13px;
}
</style>
<style lang="scss">
.tippy-box[data-theme~='popover'] {
border: 0;
outline: 0;
}
</style>

8
src/views/Editor/CanvasTool/TableGenerator.vue
View File

@ -26,21 +26,21 @@
<div class="custom" v-else>
<div class="row">
<div class="label" style="flex: 1;">行数：</div>
<div class="label" style="width: 25%;">行数：</div>
<NumberInput
:min="1"
:max="20"
v-model:value="customRow"
style="flex: 3;"
style="width: 75%;"
/>
</div>
<div class="row">
<div class="label" style="flex: 1;">列数：</div>
<div class="label" style="width: 25%;">列数：</div>
<NumberInput
:min="1"
:max="20"
v-model:value="customCol"
style="flex: 3;"
style="width: 75%;"
/>
</div>
<div class="btns">

4
src/views/Editor/Toolbar/ElementAnimationPanel.vue
View File

@ -101,7 +101,7 @@
/>
</div>
<div class="config-item">
<Button style="flex: 1;" @click="openAnimationPool(element.id)">更换动画</Button>
<Button style="width: 100%;" @click="openAnimationPool(element.id)">更换动画</Button>
</div>
</div>
</div>
@ -424,7 +424,7 @@ $attentionColor: #e8b76a;
}
.sequence-item {
border: 1px solid $borderColor;
padding: 10px 6px;
padding: 8px;
border-radius: $borderRadius;
margin-bottom: 8px;
transition: all .5s;

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

@ -31,18 +31,18 @@
:step="5"
:value="left"
@update:value="value => updateLeft(value)"
style="flex: 4;"
style="width: 45%;"
>
<template #prefix>
水平：
</template>
</NumberInput>
<div style="flex: 1;"></div>
<div style="width: 10%;"></div>
<NumberInput
:step="5"
:value="top"
@update:value="value => updateTop(value)"
style="flex: 4;"
style="width: 45%;"
>
<template #prefix>
垂直：
@ -59,17 +59,17 @@
:disabled="isVerticalText"
:value="width"
@update:value="value => updateWidth(value)"
style="flex: 4;"
style="width: 45%;"
>
<template #prefix>
宽度：
</template>
</NumberInput>
<template v-if="['image', 'shape', 'audio'].includes(handleElement!.type)">
<IconLock style="flex: 1;" class="icon-btn" v-tooltip="'解除宽高比锁定'" @click="updateFixedRatio(false)" v-if="fixedRatio" />
<IconUnlock style="flex: 1;" class="icon-btn" v-tooltip="'宽高比锁定'" @click="updateFixedRatio(true)" v-else />
<IconLock style="width: 10%;" class="icon-btn" v-tooltip="'解除宽高比锁定'" @click="updateFixedRatio(false)" v-if="fixedRatio" />
<IconUnlock style="width: 10%;" class="icon-btn" v-tooltip="'宽高比锁定'" @click="updateFixedRatio(true)" v-else />
</template>
<div style="flex: 1;" v-else></div>
<div style="width: 10%;" v-else></div>
<NumberInput
:min="minSize"
:max="800"
@ -77,7 +77,7 @@
:disabled="isHorizontalText || handleElement!.type === 'table'"
:value="height"
@update:value="value => updateHeight(value)"
style="flex: 4;"
style="width: 45%;"
>
<template #prefix>
高度：
@ -96,15 +96,15 @@
:step="5"
:value="rotate"
@update:value="value => updateRotate(value)"
style="flex: 8;"
style="width: 45%;"
>
<template #prefix>
旋转：
</template>
</NumberInput>
<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 style="width: 7%;"></div>
<div class="text-btn" @click="updateRotate45('-')" style="width: 24%;"><IconRotate /> -45°</div>
<div class="text-btn" @click="updateRotate45('+')" style="width: 24%;"><IconRotate :style="{ transform: 'rotateY(180deg)' }" /> +45°</div>
</div>
</template>
</div>

14
src/views/Editor/Toolbar/ElementStylePanel/AudioStylePanel.vue
View File

@ -1,21 +1,21 @@
<template>
<div class="audio-style-panel">
<div class="row">
<div style="flex: 2;">图标颜色：</div>
<Popover trigger="click" style="flex: 3;">
<div style="width: 40%;">图标颜色：</div>
<Popover trigger="click" style="width: 60%;">
<template #content>
<ColorPicker
:modelValue="handleAudioElement.color"
@update:modelValue="value => updateAudio({ color: value })"
/>
</template>
<ColorButton :color="handleAudioElement.color" style="width: 100%;" />
<ColorButton :color="handleAudioElement.color" />
</Popover>
</div>
<div class="row switch-row">
<div style="flex: 2;">自动播放：</div>
<div class="switch-wrapper" style="flex: 3;">
<div style="width: 40%;">自动播放：</div>
<div class="switch-wrapper" style="width: 60%;">
<Switch
:value="handleAudioElement.autoplay"
@update:value="value => updateAudio({ autoplay: value })"
@ -24,8 +24,8 @@
</div>
<div class="row switch-row">
<div style="flex: 2;">循环播放：</div>
<div class="switch-wrapper" style="flex: 3;">
<div style="width: 40%;">循环播放：</div>
<div class="switch-wrapper" style="width: 60%;">
<Switch
:value="handleAudioElement.loop"
@update:value="value => updateAudio({ loop: value })"

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

@ -72,7 +72,7 @@
@update:modelValue="value => updateFill(value)"
/>
</template>
<ColorButton :color="fill" style="width: 100%;" />
<ColorButton :color="fill" />
</Popover>
</div>
<div class="row">
@ -84,7 +84,7 @@
@update:modelValue="value => updateGridColor(value)"
/>
</template>
<ColorButton :color="gridColor" style="width: 100%;" />
<ColorButton :color="gridColor" />
</Popover>
</div>
@ -100,7 +100,7 @@
/>
</template>
<div class="color-btn-wrap" style="width: 100%;">
<ColorButton :color="color" style="width: 100%;" />
<ColorButton :color="color" />
<div class="delete-color-btn" v-tooltip="'删除'" @click.stop="deleteThemeColor(index)" v-if="index !== 0"><IconCloseSmall /></div>
</div>
</Popover>

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

@ -1,6 +1,8 @@
<template>
<div class="latex-style-panel">
<div class="row"><Button style="flex: 1;" @click="latexEditorVisible = true">编辑 LaTeX</Button></div>
<div class="row">
<Button style="flex: 1;" @click="latexEditorVisible = true">编辑 LaTeX</Button>
</div>
<Divider />
@ -13,7 +15,7 @@
@update:modelValue="value => updateLatex({ color: value })"
/>
</template>
<ColorButton :color="handleLatexElement.color" style="width: 100%;" />
<ColorButton :color="handleLatexElement.color" />
</Popover>
</div>
<div class="row">

2
src/views/Editor/Toolbar/ElementStylePanel/LineStylePanel.vue
View File

@ -21,7 +21,7 @@
@update:modelValue="value => updateLine({ color: value })"
/>
</template>
<ColorButton :color="handleLineElement.color" style="width: 100%;" />
<ColorButton :color="handleLineElement.color" />
</Popover>
</div>
<div class="row">

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

@ -9,7 +9,7 @@
@update:modelValue="value => updateFill(value)"
/>
</template>
<ColorButton :color="fill" style="width: 100%;" />
<ColorButton :color="fill" />
</Popover>
</div>
@ -36,7 +36,7 @@
@update:modelValue="value => updateOutline({ color: value })"
/>
</template>
<ColorButton :color="outline.color || '#000'" style="width: 100%;" />
<ColorButton :color="outline.color || '#000'" />
</Popover>
</div>
<div class="row">
@ -52,7 +52,7 @@
<SelectGroup class="row">
<Select
style="flex: 3;"
style="width: 60%;;"
:value="richTextAttrs.fontname"
@update:value="value => updateFontStyle('fontname', value as string)"
:options="[
@ -65,7 +65,7 @@
</template>
</Select>
<Select
style="flex: 2;"
style="width: 40%;"
:value="richTextAttrs.fontsize"
@update:value="value => updateFontStyle('fontsize', value as string)"
:options="fontSizeOptions.map(item => ({
@ -78,37 +78,37 @@
</Select>
</SelectGroup>
<ButtonGroup class="row">
<Popover trigger="click" style="flex: 3;">
<Popover trigger="click" style="width: 30%;">
<template #content>
<ColorPicker
:modelValue="richTextAttrs.color"
@update:modelValue="value => updateFontStyle('color', value)"
/>
</template>
<TextColorButton :color="richTextAttrs.color" style="width: 100%;" v-tooltip="'文字颜色'">
<TextColorButton :color="richTextAttrs.color" v-tooltip="'文字颜色'">
<IconText />
</TextColorButton>
</Popover>
<Popover trigger="click" style="flex: 3;">
<Popover trigger="click" style="width: 30%;">
<template #content>
<ColorPicker
:modelValue="richTextAttrs.backcolor"
@update:modelValue="value => updateFontStyle('backcolor', value)"
/>
</template>
<TextColorButton :color="richTextAttrs.backcolor" style="width: 100%;" v-tooltip="'文字高亮'">
<TextColorButton :color="richTextAttrs.backcolor" v-tooltip="'文字高亮'">
<IconHighLight />
</TextColorButton>
</Popover>
<Button
class="font-size-btn"
style="flex: 2;"
style="width: 20%;"
v-tooltip="'增大字号'"
@click="updateFontStyle('fontsize-add', '2')"
><IconFontSize />+</Button>
<Button
class="font-size-btn"
style="flex: 2;"
style="width: 20%;"
v-tooltip="'减小字号'"
@click="updateFontStyle('fontsize-reduce', '2')"
><IconFontSize />-</Button>

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

@ -22,7 +22,7 @@
<div class="row">
<Select
style="flex: 10;"
style="flex: 1;"
:value="fillType"
@update:value="value => updateFillType(value as 'fill' | 'gradient')"
:options="[
@ -30,18 +30,18 @@
{ label: '渐变填充', value: 'gradient' },
]"
/>
<div style="flex: 1;"></div>
<Popover trigger="click" v-if="fillType === 'fill'" style="flex: 10;">
<div style="width: 10px;"></div>
<Popover trigger="click" v-if="fillType === 'fill'" style="flex: 1;">
<template #content>
<ColorPicker
:modelValue="fill"
@update:modelValue="value => updateFill(value)"
/>
</template>
<ColorButton :color="fill" style="width: 100%;" />
<ColorButton :color="fill" />
</Popover>
<Select
style="flex: 10;"
style="flex: 1;"
:value="gradient.type"
@update:value="value => updateGradient({ type: value as 'linear' | 'radial' })"
v-else
@ -54,33 +54,33 @@
<template v-if="fillType === 'gradient'">
<div class="row">
<div style="flex: 2;">起点颜色：</div>
<Popover trigger="click" style="flex: 3;">
<div style="width: 40%;">起点颜色：</div>
<Popover trigger="click" style="width: 60%;">
<template #content>
<ColorPicker
:modelValue="gradient.color[0]"
@update:modelValue="value => updateGradient({ color: [value, gradient.color[1]] })"
/>
</template>
<ColorButton :color="gradient.color[0]" style="width: 100%;" />
<ColorButton :color="gradient.color[0]" />
</Popover>
</div>
<div class="row">
<div style="flex: 2;">终点颜色：</div>
<Popover trigger="click" style="flex: 3;">
<div style="width: 40%;">终点颜色：</div>
<Popover trigger="click" style="width: 60%;">
<template #content>
<ColorPicker
:modelValue="gradient.color[1]"
@update:modelValue="value => updateGradient({ color: [gradient.color[0], value] })"
/>
</template>
<ColorButton :color="gradient.color[1]" style="width: 100%;" />
<ColorButton :color="gradient.color[1]" />
</Popover>
</div>
<div class="row" v-if="gradient.type === 'linear'">
<div style="flex: 2;">渐变角度：</div>
<div style="width: 40%;">渐变角度：</div>
<Slider
class="slider"
style="width: 60%;"
:min="0"
:max="360"
:step="15"
@ -98,7 +98,7 @@
<SelectGroup class="row">
<Select
class="font-select"
style="flex: 3;"
style="width: 60%;"
:value="richTextAttrs.fontname"
@update:value="value => emitRichTextCommand('fontname', value as string)"
:options="[
@ -111,7 +111,7 @@
</template>
</Select>
<Select
style="flex: 2;"
style="width: 40%;"
:value="richTextAttrs.fontsize"
@update:value="value => emitRichTextCommand('fontsize', value as string)"
:options="fontSizeOptions.map(item => ({
@ -125,37 +125,37 @@
</SelectGroup>
<ButtonGroup class="row">
<Popover trigger="click" style="flex: 3;">
<Popover trigger="click" style="width: 30%;">
<template #content>
<ColorPicker
:modelValue="richTextAttrs.color"
@update:modelValue="value => emitRichTextCommand('color', value)"
/>
</template>
<TextColorButton v-tooltip="'文字颜色'" :color="richTextAttrs.color" style="width: 100%;">
<TextColorButton v-tooltip="'文字颜色'" :color="richTextAttrs.color">
<IconText />
</TextColorButton>
</Popover>
<Popover trigger="click" style="flex: 3;">
<Popover trigger="click" style="width: 30%;">
<template #content>
<ColorPicker
:modelValue="richTextAttrs.backcolor"
@update:modelValue="value => emitRichTextCommand('backcolor', value)"
/>
</template>
<TextColorButton v-tooltip="'文字高亮'" :color="richTextAttrs.backcolor" style="width: 100%;">
<TextColorButton v-tooltip="'文字高亮'" :color="richTextAttrs.backcolor">
<IconHighLight />
</TextColorButton>
</Popover>
<Button
class="font-size-btn"
style="flex: 2;"
style="width: 20%;"
v-tooltip="'增大字号'"
@click="emitRichTextCommand('fontsize-add')"
><IconFontSize />+</Button>
<Button
class="font-size-btn"
style="flex: 2;"
style="width: 20%;"
v-tooltip="'减小字号'"
@click="emitRichTextCommand('fontsize-reduce')"
><IconFontSize />-</Button>
@ -380,15 +380,9 @@ const emitRichTextCommand = (command: string, value?: string) => {
align-items: center;
margin-bottom: 10px;
}
.font-select {
max-width: 50%;
}
.font-size-btn {
padding: 0;
}
.slider {
flex: 3;
}
.title {
display: flex;
justify-content: space-between;

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

@ -36,7 +36,7 @@
@update:modelValue="value => updateTextAttrs({ color: value })"
/>
</template>
<TextColorButton v-tooltip="'文字颜色'" :color="textAttrs.color" style="width: 100%;">
<TextColorButton 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" style="width: 100%;">
<TextColorButton v-tooltip="'单元格填充'" :color="textAttrs.backcolor">
<IconFill />
</TextColorButton>
</Popover>
@ -160,7 +160,7 @@
@update:modelValue="value => updateTheme({ color: value })"
/>
</template>
<ColorButton :color="theme.color" style="width: 100%;" />
<ColorButton :color="theme.color" />
</Popover>
</div>
</template>

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

@ -15,7 +15,7 @@
<SelectGroup class="row">
<Select
class="font-select"
style="width: 50%;"
style="width: 60%;"
:value="richTextAttrs.fontname"
@update:value="value => emitRichTextCommand('fontname', value as string)"
:options="[
@ -28,7 +28,7 @@
</template>
</Select>
<Select
style="width: 50%;"
style="width: 40%;"
:value="richTextAttrs.fontsize"
@update:value="value => emitRichTextCommand('fontsize', value as string)"
:options="fontSizeOptions.map(item => ({
@ -42,37 +42,37 @@
</SelectGroup>
<ButtonGroup class="row">
<Popover trigger="click" style="flex: 3;">
<Popover trigger="click" style="width: 30%;">
<template #content>
<ColorPicker
:modelValue="richTextAttrs.color"
@update:modelValue="value => emitRichTextCommand('color', value)"
/>
</template>
<TextColorButton v-tooltip="'文字颜色'" :color="richTextAttrs.color" style="width: 100%;">
<TextColorButton v-tooltip="'文字颜色'" :color="richTextAttrs.color">
<IconText />
</TextColorButton>
</Popover>
<Popover trigger="click" style="flex: 3;">
<Popover trigger="click" style="width: 30%;">
<template #content>
<ColorPicker
:modelValue="richTextAttrs.backcolor"
@update:modelValue="value => emitRichTextCommand('backcolor', value)"
/>
</template>
<TextColorButton v-tooltip="'文字高亮'" :color="richTextAttrs.backcolor" style="width: 100%;">
<TextColorButton v-tooltip="'文字高亮'" :color="richTextAttrs.backcolor">
<IconHighLight />
</TextColorButton>
</Popover>
<Button
class="font-size-btn"
style="flex: 2;"
style="width: 20%;"
v-tooltip="'增大字号'"
@click="emitRichTextCommand('fontsize-add')"
><IconFontSize />+</Button>
<Button
class="font-size-btn"
style="flex: 2;"
style="width: 20%;"
v-tooltip="'减小字号'"
@click="emitRichTextCommand('fontsize-reduce')"
><IconFontSize />-</Button>
@ -144,7 +144,7 @@
v-tooltip="'格式刷'"
@click="toggleFormatPainter()"
><IconFormatBrush /></CheckboxButton>
<Popover placement="bottom-end" trigger="click" v-model:value="linkPopoverVisible" style="flex: 1;">
<Popover placement="bottom-end" trigger="click" v-model:value="linkPopoverVisible" style="width: 33.33%;">
<template #content>
<div class="link-popover">
<Input v-model:value="link" placeholder="请输入超链接" />
@ -178,7 +178,7 @@
</RadioGroup>
<div class="row">
<ButtonGroup style="flex: 15;">
<ButtonGroup style="flex: 1;">
<Button
:type="richTextAttrs.bulletList ? 'primary' : 'default'"
style="flex: 1;"
@ -201,8 +201,8 @@
<Button class="popover-btn"><IconDown /></Button>
</Popover>
</ButtonGroup>
<div style="flex: 1;"></div>
<ButtonGroup style="flex: 15;">
<div style="width: 10px;"></div>
<ButtonGroup style="flex: 1;">
<Button
:type="richTextAttrs.orderedList ? 'primary' : 'default'"
style="flex: 1;"
@ -228,7 +228,7 @@
</div>
<div class="row">
<ButtonGroup style="flex: 15;">
<ButtonGroup style="flex: 1;">
<Button style="flex: 1;" v-tooltip="'减小段落缩进'" @click="emitRichTextCommand('indent', '-1')"><IconIndentLeft /></Button>
<Popover trigger="click" v-model:value="indentLeftPanelVisible">
<template #content>
@ -237,8 +237,8 @@
<Button class="popover-btn"><IconDown /></Button>
</Popover>
</ButtonGroup>
<div style="flex: 1;"></div>
<ButtonGroup style="flex: 15;">
<div style="width: 10px;"></div>
<ButtonGroup style="flex: 1;">
<Button style="flex: 1;" v-tooltip="'增大段落缩进'" @click="emitRichTextCommand('indent', '+1')"><IconIndentRight /></Button>
<Popover trigger="click" v-model:value="indentRightPanelVisible">
<template #content>
@ -302,7 +302,7 @@
@update:modelValue="value => updateFill(value)"
/>
</template>
<ColorButton :color="fill" style="width: 100%;" />
<ColorButton :color="fill" />
</Popover>
</div>
@ -550,9 +550,6 @@ const updateLink = (link?: string) => {
margin-top: -1px;
}
}
.font-select {
max-width: 50%;
}
.font-size-btn {
padding: 0;
}

4
src/views/Editor/Toolbar/ElementStylePanel/VideoStylePanel.vue
View File

@ -10,7 +10,9 @@
</div>
</FileInput>
</div>
<div class="row"><Button style="flex: 1;" @click="updateVideo({ poster: '' })">重置封面</Button></div>
<div class="row">
<Button style="flex: 1;" @click="updateVideo({ poster: '' })">重置封面</Button>
</div>
</div>
</template>

65
src/views/Editor/Toolbar/SlideDesignPanel.vue
View File

@ -3,7 +3,7 @@
<div class="title">背景填充</div>
<div class="row">
<Select
style="flex: 10;"
style="flex: 1;"
:value="background.type"
@update:value="value => updateBackgroundType(value as 'gradient' | 'image' | 'solid')"
:options="[
@ -12,20 +12,20 @@
{ label: '渐变填充', value: 'gradient' },
]"
/>
<div style="flex: 1;"></div>
<div style="width: 10px;"></div>
<Popover trigger="click" v-if="background.type === 'solid'" style="flex: 10;">
<Popover trigger="click" v-if="background.type === 'solid'" style="flex: 1;">
<template #content>
<ColorPicker
:modelValue="background.color"
@update:modelValue="color => updateBackground({ color })"
/>
</template>
<ColorButton :color="background.color || '#fff'" style="width: 100%;" />
<ColorButton :color="background.color || '#fff'" />
</Popover>
<Select
style="flex: 10;"
style="flex: 1;"
:value="background.imageSize || 'cover'"
@update:value="value => updateBackground({ imageSize: value as 'repeat' | 'cover' | 'contain' })"
v-else-if="background.type === 'image'"
@ -37,7 +37,7 @@
/>
<Select
style="flex: 10;"
style="flex: 1;"
:value="background.gradientType || ''"
@update:value="value => updateBackground({ gradientType: value as 'linear' | 'radial' })"
v-else
@ -60,50 +60,52 @@
<div class="background-gradient-wrapper" v-if="background.type === 'gradient'">
<div class="row">
<div style="flex: 2;">起点颜色：</div>
<Popover trigger="click" style="flex: 3;">
<div style="width: 40%;">起点颜色：</div>
<Popover trigger="click" style="width: 60%;">
<template #content>
<ColorPicker
:modelValue="background.gradientColor![0]"
@update:modelValue="value => updateBackground({ gradientColor: [value, background.gradientColor![1]] })"
/>
</template>
<ColorButton :color="background.gradientColor![0]" style="width: 100%;" />
<ColorButton :color="background.gradientColor![0]" />
</Popover>
</div>
<div class="row">
<div style="flex: 2;">终点颜色：</div>
<Popover trigger="click" style="flex: 3;">
<div style="width: 40%;">终点颜色：</div>
<Popover trigger="click" style="width: 60%;">
<template #content>
<ColorPicker
:modelValue="background.gradientColor![1]"
@update:modelValue="value => updateBackground({ gradientColor: [background.gradientColor![0], value] })"
/>
</template>
<ColorButton :color="background.gradientColor![1]" style="width: 100%;" />
<ColorButton :color="background.gradientColor![1]" />
</Popover>
</div>
<div class="row" v-if="background.gradientType === 'linear'">
<div style="flex: 2;">渐变角度：</div>
<div style="width: 40%;">渐变角度：</div>
<Slider
class="slider"
:min="0"
:max="360"
:step="15"
:value="background.gradientRotate || 0"
@update:value="value => updateBackground({ gradientRotate: value as number })"
style="width: 60%;"
/>
</div>
</div>
<div class="row"><Button style="flex: 1;" @click="applyBackgroundAllSlide()">应用背景到全部</Button></div>
<div class="row">
<Button style="flex: 1;" @click="applyBackgroundAllSlide()">应用背景到全部</Button>
</div>
<Divider />
<div class="row">
<div style="flex: 2;">画布尺寸：</div>
<div style="width: 40%;">画布尺寸：</div>
<Select
style="flex: 3;"
style="width: 60%;"
:value="viewportRatio"
@update:value="value => updateViewportRatio(value as number)"
:options="[
@ -119,9 +121,9 @@
<div class="title">全局主题</div>
<div class="row">
<div style="flex: 2;">字体：</div>
<div style="width: 40%;">字体：</div>
<Select
style="flex: 3;"
style="width: 60%;"
:value="theme.fontName"
@update:value="value => updateTheme({ fontName: value as string })"
:options="[
@ -131,43 +133,45 @@
/>
</div>
<div class="row">
<div style="flex: 2;">字体颜色：</div>
<Popover trigger="click" style="flex: 3;">
<div style="width: 40%;">字体颜色：</div>
<Popover trigger="click" style="width: 60%;">
<template #content>
<ColorPicker
:modelValue="theme.fontColor"
@update:modelValue="value => updateTheme({ fontColor: value })"
/>
</template>
<ColorButton :color="theme.fontColor" style="width: 100%;" />
<ColorButton :color="theme.fontColor" />
</Popover>
</div>
<div class="row">
<div style="flex: 2;">背景颜色：</div>
<Popover trigger="click" style="flex: 3;">
<div style="width: 40%;">背景颜色：</div>
<Popover trigger="click" style="width: 60%;">
<template #content>
<ColorPicker
:modelValue="theme.backgroundColor"
@update:modelValue="value => updateTheme({ backgroundColor: value })"
/>
</template>
<ColorButton :color="theme.backgroundColor" style="width: 100%;" />
<ColorButton :color="theme.backgroundColor" />
</Popover>
</div>
<div class="row">
<div style="flex: 2;">主题色：</div>
<Popover trigger="click" style="flex: 3;">
<div style="width: 40%;">主题色：</div>
<Popover trigger="click" style="width: 60%;">
<template #content>
<ColorPicker
:modelValue="theme.themeColor"
@update:modelValue="value => updateTheme({ themeColor: value })"
/>
</template>
<ColorButton :color="theme.themeColor" style="width: 100%;" />
<ColorButton :color="theme.themeColor" />
</Popover>
</div>
<div class="row"><Button style="flex: 1;" @click="applyThemeToAllSlides()">应用主题到全部</Button></div>
<div class="row">
<Button style="flex: 1;" @click="applyThemeToAllSlides()">应用主题到全部</Button>
</div>
<Divider />
@ -414,7 +418,4 @@ const updateViewportRatio = (value: number) => {
}
}
}
.slider {
flex: 3;
}
</style>

3
src/views/Editor/Toolbar/common/ColorButton.vue
View File

@ -17,6 +17,7 @@ defineProps<{
<style lang="scss" scoped>
.color-btn {
width: 100%;
display: flex !important;
align-items: center;
justify-content: center;
@ -34,7 +35,7 @@ defineProps<{
height: 100%;
}
.color-btn-icon {
width: 34px;
width: 32px;
font-size: 13px;
color: #bfbfbf;
}

17
src/views/Editor/Toolbar/common/ElementColorMask.vue
View File

@ -1,8 +1,8 @@
<template>
<div class="element-color-mask">
<div class="row">
<div style="flex: 1;">着色（蒙版）：</div>
<div class="switch-wrapper" style="flex: 1;">
<div style="width: 40%;">着色（蒙版）：</div>
<div class="switch-wrapper" style="width: 60%;">
<Switch
:value="hasColorMask"
@update:value="value => toggleColorMask(value)"
@ -11,26 +11,26 @@
</div>
<template v-if="hasColorMask">
<div class="row" style="margin-top: 15px;">
<div style="flex: 2;">蒙版颜色：</div>
<Popover trigger="click" style="flex: 3;">
<div style="width: 40%;">蒙版颜色：</div>
<Popover trigger="click" style="width: 60%;">
<template #content>
<ColorPicker
:modelValue="colorMask.color"
@update:modelValue="value => updateColorMask({ color: value })"
/>
</template>
<ColorButton :color="colorMask.color" style="width: 100%;" />
<ColorButton :color="colorMask.color" />
</Popover>
</div>
<div class="row">
<div style="flex: 2;">不透明度：</div>
<div style="width: 40%;">不透明度：</div>
<Slider
class="opacity-slider"
:max="1"
:min="0"
:step="0.05"
:value="colorMask.opacity"
@update:value="value => updateColorMask({ opacity: value as number })"
style="width: 60%;"
/>
</div>
</template>
@ -98,7 +98,4 @@ const updateColorMask = (colorMaskProp: Partial<ImageColorElementMask>) => {
.switch-wrapper {
text-align: right;
}
.opacity-slider {
flex: 3;
}
</style>

7
src/views/Editor/Toolbar/common/ElementOpacity.vue
View File

@ -1,14 +1,14 @@
<template>
<div class="element-opacity">
<div class="row">
<div style="flex: 2;">不透明度：</div>
<div style="width: 40%;">不透明度：</div>
<Slider
class="slider"
:min="0"
:max="1"
:step="0.1"
:value="opacity"
@update:value="value => updateOpacity(value as number)"
style="width: 60%;"
/>
</div>
</div>
@ -48,7 +48,4 @@ const updateOpacity = (value: number) => {
align-items: center;
margin-bottom: 10px;
}
.slider {
flex: 3;
}
</style>

18
src/views/Editor/Toolbar/common/ElementOutline.vue
View File

@ -1,8 +1,8 @@
<template>
<div class="element-outline">
<div class="row" v-if="!fixed">
<div style="flex: 2;">启用边框：</div>
<div class="switch-wrapper" style="flex: 3;">
<div style="width: 40%;">启用边框：</div>
<div class="switch-wrapper" style="width: 60%;">
<Switch
:value="hasOutline"
@update:value="value => toggleOutline(value)"
@ -11,9 +11,9 @@
</div>
<template v-if="hasOutline && outline">
<div class="row">
<div style="flex: 2;">边框样式：</div>
<div style="width: 40%;">边框样式：</div>
<Select
style="flex: 3;"
style="width: 60%;"
:value="outline.style || ''"
@update:value="value => updateOutline({ style: value as 'dashed' | 'solid' })"
:options="[
@ -23,23 +23,23 @@
/>
</div>
<div class="row">
<div style="flex: 2;">边框颜色：</div>
<Popover trigger="click" style="flex: 3;">
<div style="width: 40%;">边框颜色：</div>
<Popover trigger="click" style="width: 60%;">
<template #content>
<ColorPicker
:modelValue="outline.color"
@update:modelValue="value => updateOutline({ color: value })"
/>
</template>
<ColorButton :color="outline.color || '#000'" style="width: 100%;" />
<ColorButton :color="outline.color || '#000'" />
</Popover>
</div>
<div class="row">
<div style="flex: 2;">边框粗细：</div>
<div style="width: 40%;">边框粗细：</div>
<NumberInput
:value="outline.width || 0"
@update:value="value => updateOutline({ width: value })"
style="flex: 3;"
style="width: 60%;"
/>
</div>
</template>

25
src/views/Editor/Toolbar/common/ElementShadow.vue
View File

@ -1,16 +1,16 @@
<template>
<div class="element-shadow">
<div class="row">
<div style="flex: 2;">启用阴影：</div>
<div class="switch-wrapper" style="flex: 3;">
<div style="width: 40%;">启用阴影：</div>
<div class="switch-wrapper" style="width: 60%;">
<Switch :value="hasShadow" @update:value="value => toggleShadow(value)" />
</div>
</div>
<template v-if="hasShadow && shadow">
<div class="row">
<div style="flex: 2;">水平阴影：</div>
<div style="width: 40%;">水平阴影：</div>
<Slider
class="slider"
style="width: 60%;"
:min="-10"
:max="10"
:step="1"
@ -19,9 +19,9 @@
/>
</div>
<div class="row">
<div style="flex: 2;">垂直阴影：</div>
<div style="width: 40%;">垂直阴影：</div>
<Slider
class="slider"
style="width: 60%;"
:min="-10"
:max="10"
:step="1"
@ -30,9 +30,9 @@
/>
</div>
<div class="row">
<div style="flex: 2;">模糊距离：</div>
<div style="width: 40%;">模糊距离：</div>
<Slider
class="slider"
style="width: 60%;"
:min="1"
:max="20"
:step="1"
@ -41,15 +41,15 @@
/>
</div>
<div class="row">
<div style="flex: 2;">阴影颜色：</div>
<Popover trigger="click" style="flex: 3;">
<div style="width: 40%;">阴影颜色：</div>
<Popover trigger="click" style="width: 60%;">
<template #content>
<ColorPicker
:modelValue="shadow.color"
@update:modelValue="value => updateShadow({ color: value })"
/>
</template>
<ColorButton :color="shadow.color" style="width: 100%;" />
<ColorButton :color="shadow.color" />
</Popover>
</div>
</template>
@ -113,7 +113,4 @@ const toggleShadow = (checked: boolean) => {
.switch-wrapper {
text-align: right;
}
.slider {
flex: 3;
}
</style>

1
src/views/Editor/Toolbar/common/TextColorButton.vue
View File

@ -17,6 +17,7 @@ defineProps<{
<style lang="scss" scoped>
.text-color-btn {
width: 100%;
display: flex !important;
flex-direction: column;
justify-content: center;

4
src/views/Mobile/MobileEditor/ElementToolbar.vue
View File

@ -37,11 +37,11 @@
<ButtonGroup class="row">
<Button
style="flex: 2;"
style="flex: 1;"
@click="emitRichTextCommand('fontsize-add')"
><IconFontSize />+</Button>
<Button
style="flex: 2;"
style="flex: 1;"
@click="emitRichTextCommand('fontsize-reduce')"
><IconFontSize />-</Button>
</ButtonGroup>