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 2021-03-31 17:01:03 +08:00
parent 0dcfb797a9
commit 928ec2d5c3
4 changed files with 30 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/views/Editor/EditorHeader/index.vue
View File

@ -1,10 +1,8 @@
<template> <template>
<div class="editor-header"> <div class="editor-header">
<div class="left"> <div class="left">
<Dropdown :trigger="['click']" @visibleChange="visible => editDropdownVisible = visible"> <Dropdown :trigger="['click']">
<div class="menu-item" :class="['dropdown-menu', { 'active': editDropdownVisible }]"> <div class="menu-item"><IconEdit /> <span class="text">编辑</span></div>
<IconEdit /> <span class="text">编辑</span>
</div>
<template #overlay> <template #overlay>
<Menu> <Menu>
<MenuItem @click="undo()">撤销</MenuItem> <MenuItem @click="undo()">撤销</MenuItem>
@ -16,10 +14,8 @@
</Menu> </Menu>
</template> </template>
</Dropdown> </Dropdown>
<Dropdown :trigger="['click']" @visibleChange="visible => screenDropdownVisible = visible"> <Dropdown :trigger="['click']">
<div class="menu-item" :class="['dropdown-menu', { 'active': screenDropdownVisible }]"> <div class="menu-item"><IconPpt /> <span class="text">演示</span></div>
<IconPpt /> <span class="text">演示</span>
</div>
<template #overlay> <template #overlay>
<Menu> <Menu>
<MenuItem @click="enterScreeningFromStart()">从头开始</MenuItem> <MenuItem @click="enterScreeningFromStart()">从头开始</MenuItem>
@ -27,10 +23,8 @@
</Menu> </Menu>
</template> </template>
</Dropdown> </Dropdown>
<Dropdown :trigger="['click']" @visibleChange="visible => helpDropdownVisible = visible"> <Dropdown :trigger="['click']">
<div class="menu-item" :class="['dropdown-menu', { 'active': helpDropdownVisible }]"> <div class="menu-item"><IconHelpcenter /> <span class="text">帮助</span></div>
<IconHelpcenter /> <span class="text">帮助</span>
</div>
<template #overlay> <template #overlay>
<Menu> <Menu>
<MenuItem @click="openDoc()">开发文档</MenuItem> <MenuItem @click="openDoc()">开发文档</MenuItem>
@ -84,10 +78,6 @@ export default defineComponent({
const { createSlide, deleteSlide, resetSlides } = useSlideHandler() const { createSlide, deleteSlide, resetSlides } = useSlideHandler()
const { redo, undo } = useHistorySnapshot() const { redo, undo } = useHistorySnapshot()
const editDropdownVisible = ref(false)
const screenDropdownVisible = ref(false)
const helpDropdownVisible = ref(false)
const showGridLines = computed(() => store.state.showGridLines) const showGridLines = computed(() => store.state.showGridLines)
const toggleGridLines = () => { const toggleGridLines = () => {
store.commit(MutationTypes.SET_GRID_LINES_STATE, !showGridLines.value) store.commit(MutationTypes.SET_GRID_LINES_STATE, !showGridLines.value)
@ -111,9 +101,6 @@ export default defineComponent({
resetSlides, resetSlides,
openDoc, openDoc,
hotkeyDrawerVisible, hotkeyDrawerVisible,
editDropdownVisible,
screenDropdownVisible,
helpDropdownVisible,
} }
}, },
}) })
@ -140,18 +127,15 @@ export default defineComponent({
align-items: center; align-items: center;
font-size: 13px; font-size: 13px;
padding: 0 10px; padding: 0 10px;
transition: background-color .2s;
cursor: pointer; cursor: pointer;
&:hover {
background-color: $lightGray;
}
.text { .text {
margin-left: 4px; margin-left: 4px;
} }
} }
.dropdown-menu {
transition: background-color .2s;
&.active {
background-color: $lightGray;
}
}
</style> </style>

22
src/views/Editor/Toolbar/SlideStylePanel.vue
View File

@ -98,6 +98,17 @@
<Divider /> <Divider />
<div class="row">
<div style="flex: 2;">画布尺寸：</div>
<Select style="flex: 3;" :value="viewportRatio" @change="value => updateViewportRatio(value)">
<SelectOption :value="0.5625">宽屏 16 : 9</SelectOption>
<SelectOption :value="0.625">宽屏 16 ：10</SelectOption>
<SelectOption :value="0.75">标准 4 ：3</SelectOption>
</Select>
</div>
<Divider />
<div class="title">全局主题</div> <div class="title">全局主题</div>
<div class="row"> <div class="row">
<div style="flex: 2;">字体：</div> <div style="flex: 2;">字体：</div>
@ -176,17 +187,6 @@
</div> </div>
<div class="row"><Button style="flex: 1;" @click="applyThemeAllSlide()">应用主题到全部</Button></div> <div class="row"><Button style="flex: 1;" @click="applyThemeAllSlide()">应用主题到全部</Button></div>
<Divider />
<div class="row">
<div style="flex: 2;">画布尺寸：</div>
<Select style="flex: 3;" :value="viewportRatio" @change="value => updateViewportRatio(value)">
<SelectOption :value="0.5625">宽屏 16 : 9</SelectOption>
<SelectOption :value="0.625">宽屏 16 ：10</SelectOption>
<SelectOption :value="0.75">标准 4 ：3</SelectOption>
</Select>
</div>
</div> </div>
</template> </template>

9
src/views/components/element/TableElement/CustomTextarea.vue
View File

@ -81,4 +81,11 @@ export default defineComponent({
} }
}, },
}) })
</script> </script>
<style lang="scss" scoped>
.custom-textarea {
border: 0;
outline: 0;
}
</style>

2
src/views/components/element/TableElement/EditableTable.vue
View File

@ -706,8 +706,6 @@ table {
.cell-text { .cell-text {
min-height: 32px; min-height: 32px;
padding: 5px; padding: 5px;
border: 0;
outline: 0;
line-height: 1.5; line-height: 1.5;
user-select: none; user-select: none;
cursor: text; cursor: text;