JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-11-04 02:28:04 +08:00
Code Issues Projects Releases Wiki Activity

fix(editor): 样式优化调整

Browse Source
This commit is contained in:
roymondchen 2022-03-15 15:41:26 +08:00 committed by jia000
parent 73ffc6580d
commit 12de0f5414
5 changed files with 14 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/editor/src/components/ScrollViewer.vue
View File

@ -57,6 +57,7 @@ export default defineComponent({
width: ${props.width}px; width: ${props.width}px;
height: ${props.height}px; height: ${props.height}px;
position: absolute; position: absolute;
margin-top: 30px;
`, `,
), ),
}; };

10
packages/editor/src/layouts/NavMenu.vue
View File

@ -1,16 +1,16 @@
<template> <template>
<div class="m-editor-nav-menu" :style="{ height: `${height}px` }"> <div class="m-editor-nav-menu" :style="{ height: `${height}px` }">
<div v-for="key in keys" :class="`menu-${key}`" :key="key"> <div v-for="key in keys" :class="`menu-${key}`" :key="key" :style="`width: ${columnWidth?.[key]}px`">
<tool-button :data="item" v-for="(item, index) in data[key]" :key="index"></tool-button> <tool-button :data="item" v-for="(item, index) in data[key]" :key="index"></tool-button>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, PropType } from 'vue'; import { computed, defineComponent, inject, PropType } from 'vue';
import ToolButton from '@editor/components/ToolButton.vue'; import ToolButton from '@editor/components/ToolButton.vue';
import { MenuBarData } from '@editor/type'; import { GetColumnWidth, MenuBarData, Services } from '@editor/type';
export default defineComponent({ export default defineComponent({
name: 'nav-menu', name: 'nav-menu',
@ -29,8 +29,12 @@ export default defineComponent({
}, },
setup(props) { setup(props) {
const services = inject<Services>('services');
return { return {
keys: computed(() => Object.keys(props.data) as Array<keyof MenuBarData>), keys: computed(() => Object.keys(props.data) as Array<keyof MenuBarData>),
columnWidth: computed(() => services?.uiService.get<GetColumnWidth>('columnWidth')),
}; };
}, },
}); });

6
packages/editor/src/theme/nav-menu.scss
View File

@ -21,12 +21,12 @@
align-items: center; align-items: center;
} }
.menu-left { .menu-center {
padding-left: 16px; justify-content: center;
} }
.menu-right { .menu-right {
padding-right: 16px; justify-content: flex-end;
} }
.menu-item { .menu-item {

1
packages/editor/src/theme/stage.scss
View File

@ -15,6 +15,7 @@
position: relative; position: relative;
border: 1px solid $--border-color; border: 1px solid $--border-color;
transition: transform 0.3s; transition: transform 0.3s;
box-sizing: content-box;
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 0 !important; width: 0 !important;

3
packages/editor/src/utils/scroll-viewer.ts
View File

@ -25,7 +25,8 @@ export class ScrollViewer {
const { width, height } = contentRect; const { width, height } = contentRect;
const targetRect = this.target.getBoundingClientRect(); const targetRect = this.target.getBoundingClientRect();
const targetWidth = targetRect.width * this.zoom; const targetWidth = targetRect.width * this.zoom;
const targetHeight = targetRect.height * this.zoom; const targetMarginTop = Number(this.target.style.marginTop) || 0;
const targetHeight = (targetRect.height + targetMarginTop) * this.zoom;
if (targetWidth < width) { if (targetWidth < width) {
(this.target as any)._left = 0; (this.target as any)._left = 0;