coosld/mind-map
1
0
Fork 0
mirror of https://github.com/wanglin2/mind-map.git synced 2026-02-25 04:17:42 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Demo:完善右键菜单和富文本工具条的暗黑模式

Browse Source
This commit is contained in:
wanglin2 2023-08-10 08:47:16 +08:00
parent d9a6981df4
commit 9625129691
2 changed files with 69 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
web/src/pages/Edit/components/Contextmenu.vue
View File

@ -3,6 +3,7 @@
class="contextmenuContainer listBox"
v-if="isShow"
:style="{ left: left + 'px', top: top + 'px' }"
:class="{ isDark: isDark }"
>
<template v-if="type === 'node'">
<div
@ -13,7 +14,11 @@
{{ $t('contextmenu.insertSiblingNode') }}
<span class="desc">Enter</span>
</div>
<div class="item" @click="exec('INSERT_CHILD_NODE')" :class="{ disabled: isGeneralization }">
<div
class="item"
@click="exec('INSERT_CHILD_NODE')"
:class="{ disabled: isGeneralization }"
>
{{ $t('contextmenu.insertChildNode') }}
<span class="desc">Tab</span>
</div>
@ -45,18 +50,23 @@
{{ $t('contextmenu.deleteNode') }}
<span class="desc">Delete</span>
</div>
<div class="item" @click="exec('COPY_NODE')" :class="{ disabled: isGeneralization }">
<div
class="item"
@click="exec('COPY_NODE')"
:class="{ disabled: isGeneralization }"
>
{{ $t('contextmenu.copyNode') }}
<span class="desc">Ctrl + C</span>
</div>
<div class="item" @click="exec('CUT_NODE')" :class="{ disabled: isGeneralization }">
<div
class="item"
@click="exec('CUT_NODE')"
:class="{ disabled: isGeneralization }"
>
{{ $t('contextmenu.cutNode') }}
<span class="desc">Ctrl + X</span>
</div>
<div
class="item"
@click="exec('PASTE_NODE')"
>
<div class="item" @click="exec('PASTE_NODE')">
{{ $t('contextmenu.pasteNode') }}
<span class="desc">Ctrl + V</span>
</div>
@ -74,7 +84,7 @@
</div>
<div class="item">
{{ $t('contextmenu.expandTo') }}
<div class="subItems listBox">
<div class="subItems listBox" :class="{ isDark: isDark }">
<div
class="item"
v-for="(item, index) in expandList"
@ -130,7 +140,8 @@ export default {
},
computed: {
...mapState({
isZenMode: state => state.localConfig.isZenMode
isZenMode: state => state.localConfig.isZenMode,
isDark: state => state.isDark
}),
expandList() {
return [
@ -309,6 +320,10 @@ export default {
border-radius: 4px;
padding-top: 16px;
padding-bottom: 16px;
&.isDark {
background: #363b3f;
}
}
.contextmenuContainer {
position: fixed;
@ -317,6 +332,16 @@ export default {
font-weight: 400;
color: #1a1a1a;
&.isDark {
color: #fff;
.item {
&:hover {
background: hsla(0, 0%, 100%, 0.05);
}
}
}
.item {
position: relative;
height: 28px;

43
web/src/pages/Edit/components/RichTextToolbar.vue
View File

@ -3,6 +3,7 @@
class="richTextToolbar"
ref="richTextToolbar"
:style="style"
:class="{ isDark: isDark }"
@click.stop.passive
v-show="showRichTextToolbar"
>
@ -44,7 +45,7 @@
<el-tooltip content="字体" placement="top">
<el-popover placement="bottom" trigger="hover">
<div class="fontOptionsList">
<div class="fontOptionsList" :class="{ isDark: isDark }">
<div
class="fontOptionItem"
v-for="item in fontFamilyList"
@ -64,7 +65,7 @@
<el-tooltip content="字号" placement="top">
<el-popover placement="bottom" trigger="hover">
<div class="fontOptionsList">
<div class="fontOptionsList" :class="{ isDark: isDark }">
<div
class="fontOptionItem"
v-for="item in fontSizeList"
@ -93,17 +94,18 @@
<el-tooltip content="背景颜色" placement="top">
<el-popover placement="bottom" trigger="hover">
<Color :color="fontBackgroundColor" @change="changeFontBackgroundColor"></Color>
<Color
:color="fontBackgroundColor"
@change="changeFontBackgroundColor"
></Color>
<div class="btn" slot="reference">
<span class="icon iconfont iconbeijingyanse"></span>
</div>
</el-popover>
</el-tooltip>
<el-tooltip content="清除样式" placement="top">
<div
class="btn" @click="removeFormat"
>
<div class="btn" @click="removeFormat">
<span class="icon iconfont iconqingchu"></span>
</div>
</el-tooltip>
@ -113,6 +115,7 @@
<script>
import { fontFamilyList, fontSizeList } from '@/config'
import Color from './Color'
import { mapState } from 'vuex'
export default {
name: 'RichTextToolbar',
@ -138,6 +141,8 @@ export default {
}
},
computed: {
...mapState(['isDark']),
fontFamilyList() {
return fontFamilyList[this.$i18n.locale] || fontFamilyList.zh
}
@ -211,7 +216,7 @@ export default {
},
changeFontBackgroundColor(background) {
this.formatInfo.background = background
this.formatInfo.background = background
this.mindMap.richText.formatText({
background
})
@ -237,6 +242,18 @@ export default {
align-items: center;
transform: translateX(-50%);
&.isDark {
background: #363b3f;
.btn {
color: #fff;
&:hover {
background: hsla(0, 0%, 100%, 0.05);
}
}
}
.btn {
width: 55px;
height: 55px;
@ -266,6 +283,16 @@ export default {
.fontOptionsList {
width: 150px;
&.isDark {
.fontOptionItem {
color: #fff;
&:hover {
background-color: hsla(0, 0%, 100%, 0.05);
}
}
}
.fontOptionItem {
height: 30px;
width: 100%;