my_org
/
PPTist
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update

This commit is contained in:
pipipi-pikachu 2021-01-07 10:27:24 +08:00
parent 19cf9a8761
commit 5bf32419bb
4 changed files with 112 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/CheckboxButton.vue Normal file
View File

@ -0,0 +1,46 @@
<template>
<button class="checkbox-button" :class="{ 'checked': checked }">
<slot></slot>
</button>
</template>
<script lang="ts">
export default {
name: 'checkbox-button',
props: {
checked: {
type: Boolean,
default: false,
},
},
}
</script>
<style lang="scss" scoped>
.checkbox-button {
outline: 0;
background-color: #fff;
border: 1px solid #d9d9d9;
font-size: 12px;
padding: 0 15px;
height: 32px;
transition: all 0.3s;
text-align: center;
cursor: pointer;
&:hover {
color: $themeColor;
}
&.checked {
color: #fff;
background-color: $themeColor;
border-color: $themeColor;
&:hover {
background: rgba($color: $themeColor, $alpha: .9);
border-color: rgba($color: $themeColor, $alpha: .9);
}
}
}
</style>

41
src/components/CheckboxButtonGroup.vue Normal file
View File

@ -0,0 +1,41 @@
<template>
<div class="checkbox-button-group">
<slot></slot>
</div>
</template>
<script lang="ts">
export default {
name: 'checkbox-button-group',
}
</script>
<style lang="scss" scoped>
.checkbox-button-group {
display: flex;
align-items: center;
::v-deep .checkbox-button {
border-radius: 0;
border-left-width: 0;
border-right-width: 0;
display: inline-block;
& + .checkbox-button {
border-left-width: 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;
}
}
}
</style>

2
src/views/Editor/Canvas/Operate/RotateHandler.vue
View File

@ -2,7 +2,7 @@
<div class="rotate-handler"></div>
</template>
<script>
<script lang="ts">
export default {
name: 'rotate-handler',
}

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

@ -49,20 +49,20 @@
</Popover>
</ButtonGroup>
<ButtonGroup class="row">
<Button style="flex: 1;" :type="richTextAttrs.bold ? 'primary' : 'default'"><BoldOutlined /></Button>
<Button style="flex: 1;" :type="richTextAttrs.em ? 'primary' : 'default'"><ItalicOutlined /></Button>
<Button style="flex: 1;" :type="richTextAttrs.underline ? 'primary' : 'default'"><UnderlineOutlined /></Button>
<Button style="flex: 1;" :type="richTextAttrs.strikethrough ? 'primary' : 'default'"><StrikethroughOutlined /></Button>
</ButtonGroup>
<CheckboxButtonGroup class="row">
<CheckboxButton style="flex: 1;" :checked="richTextAttrs.bold"><BoldOutlined /></CheckboxButton>
<CheckboxButton style="flex: 1;" :checked="richTextAttrs.em"><ItalicOutlined /></CheckboxButton>
<CheckboxButton style="flex: 1;" :checked="richTextAttrs.underline"><UnderlineOutlined /></CheckboxButton>
<CheckboxButton style="flex: 1;" :checked="richTextAttrs.strikethrough"><StrikethroughOutlined /></CheckboxButton>
</CheckboxButtonGroup>
<ButtonGroup class="row">
<Button style="flex: 1;" :type="richTextAttrs.superscript ? 'primary' : 'default'">上</Button>
<Button style="flex: 1;" :type="richTextAttrs.subscript ? 'primary' : 'default'">下</Button>
<Button style="flex: 1;" :type="richTextAttrs.code ? 'primary' : 'default'">码</Button>
<Button style="flex: 1;" :type="richTextAttrs.blockquote ? 'primary' : 'default'">引</Button>
<Button style="flex: 1;">清</Button>
</ButtonGroup>
<CheckboxButtonGroup class="row">
<CheckboxButton style="flex: 1;" :checked="richTextAttrs.superscript">上</CheckboxButton>
<CheckboxButton style="flex: 1;" :checked="richTextAttrs.subscript">下</CheckboxButton>
<CheckboxButton style="flex: 1;" :checked="richTextAttrs.code">码</CheckboxButton>
<CheckboxButton style="flex: 1;" :checked="richTextAttrs.blockquote">引</CheckboxButton>
<CheckboxButton style="flex: 1;">清</CheckboxButton>
</CheckboxButtonGroup>
<Divider />
@ -72,10 +72,10 @@
<RadioButton value="right" style="flex: 1;"><AlignRightOutlined /></RadioButton>
</RadioGroup>
<ButtonGroup class="row">
<Button style="flex: 1;" :type="richTextAttrs.bulletList ? 'primary' : 'default'"><UnorderedListOutlined /></Button>
<Button style="flex: 1;" :type="richTextAttrs.orderedList ? 'primary' : 'default'"><OrderedListOutlined /></Button>
</ButtonGroup>
<CheckboxButtonGroup class="row">
<CheckboxButton style="flex: 1;" :checked="richTextAttrs.bulletList"><UnorderedListOutlined /></CheckboxButton>
<CheckboxButton style="flex: 1;" :checked="richTextAttrs.orderedList"><OrderedListOutlined /></CheckboxButton>
</CheckboxButtonGroup>
<Divider />
@ -121,6 +121,8 @@ import ElementOpacity from '../common/ElementOpacity.vue'
import ElementOutline from '../common/ElementOutline.vue'
import ElementShadow from '../common/ElementShadow.vue'
import ColorPicker from '@/components/ColorPicker/index.vue'
import CheckboxButton from '@/components/CheckboxButton.vue'
import CheckboxButtonGroup from '@/components/CheckboxButtonGroup.vue'
import { Select, Input, Button, Divider, Popover, Radio } from 'ant-design-vue'
import {
FontColorsOutlined,
@ -142,7 +144,12 @@ import {
export default defineComponent({
name: 'text-style-panel',
components: {
ElementOpacity,
ElementOutline,
ElementShadow,
ColorPicker,
CheckboxButton,
CheckboxButtonGroup,
Select,
SelectOption: Select.Option,
InputGroup: Input.Group,
@ -166,9 +173,6 @@ export default defineComponent({
UnorderedListOutlined,
ColumnHeightOutlined,
ColumnWidthOutlined,
ElementOpacity,
ElementOutline,
ElementShadow,
},
setup() {
const store = useStore<State>()