Skip to content

Commit

Permalink
style: update styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@YangFong
YangFong committed Jul 7, 2024
1 parent 5cff888 commit c7235b1
Show file tree
Hide file tree
Showing 4 changed files with 107 additions and 43 deletions.
10 changes: 10 additions & 0 deletions src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,4 +70,14 @@ body,
background: #f0f0f0;
}
}
// 修复分栏线负数 margin 导致的轴向滚动条
.el-dropdown-menu__item--divided:before {
margin: 0;
}
// 修复颜色选择器下拉箭头位置
.el-icon.el-color-picker__icon.is-icon-arrow-down {
position: absolute;
}
</style>
43 changes: 31 additions & 12 deletions src/components/CodemirrorEditor/EditorHeader/StyleOptionMenu.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,26 @@ export default {
required: true,
},
},
setup(props) {
// 暂时以别名形式使用，后续需要修改
const title = props.label
return {
title,
}
},
}
</script>

<template>
<el-dropdown placement="right" class="style-option-menu">
<div class="el-dropdown-link">
{{ label }}
<el-icon><ElIconArrowRight /></el-icon>
<el-dropdown placement="right" class="style-option-menu" style="margin: 0;">
<div class="el-dropdown-link leading-8 flex items-center">
<el-icon class="opacity-0">
<ElIconCheck />
</el-icon>
{{ title }}
<el-icon class="ml-auto">
<ElIconArrowRight />
</el-icon>
</div>
<template #dropdown>
<el-dropdown-menu style="width: 200px">
Expand All @@ -41,24 +53,31 @@ export default {
<ElIconCheck />
</el-icon>
{{ label }}
<span class="select-item-right" :style="{ fontFamily: value }">{{
desc
}}</span>
<span v-if="title === '字体'" class="ml-auto" :style="{ fontFamily: value }">
{{ desc }}
</span>
<span v-else-if="title === '字号'" class="ml-auto" :style="{ fontSize: value }">
{{ desc }}
</span>
<span v-else-if="title === '颜色'" class="ml-auto" :style="{ color: value }">
{{ desc }}
</span>
<span v-else class="ml-auto">
{{ desc }}
</span>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</template>

<style lang="less" scoped>
.style-option-menu.el-dropdown {
.style-option-menu {
margin: 0;
width: 150px;
width: 180px;
.el-dropdown-link {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
}
Expand Down
95 changes: 64 additions & 31 deletions src/components/CodemirrorEditor/EditorHeader/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -323,30 +323,30 @@ export default {
<div class="dropdowns">
<el-dropdown>
<span class="el-dropdown-link">
文件<el-icon><ElIconArrowDown /></el-icon>
文件<el-icon class="ml-2"><ElIconArrowDown /></el-icon>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="refClick">
<el-dropdown-item class="leading-8" @click="refClick">
<el-icon><ElIconUpload /></el-icon>
导入 .md
<input ref="fileInput" hidden type="file" accept=".md">
</el-dropdown-item>
<el-dropdown-item @click="$emit('download')">
<el-dropdown-item class="leading-8" @click="$emit('download')">
<el-icon><ElIconDownload /></el-icon>
导出 .md
</el-dropdown-item>
<el-dropdown-item @click="$emit('export')">
<el-dropdown-item class="leading-8" @click="$emit('export')">
<el-icon><ElIconDocument /></el-icon>
导出 .html
</el-dropdown-item>
<el-dropdown-item divided @click="themeChanged">
<el-icon :style="{ opacity: +!!nightMode }">
<el-dropdown-item divided class="leading-8" @click="themeChanged">
<el-icon :style="{ opacity: +nightMode }">
<ElIconCheck />
</el-icon>
暗黑模式
</el-dropdown-item>
<el-dropdown-item divided @click="isEditOnLeftChanged">
<el-dropdown-item divided class="leading-8" @click="isEditOnLeftChanged">
<el-icon :style="{ opacity: +isEditOnLeft }">
<ElIconCheck />
</el-icon>
Expand All @@ -357,20 +357,23 @@ export default {
</el-dropdown>
<el-dropdown>
<span class="el-dropdown-link">
格式<el-icon><ElIconArrowDown /></el-icon>
格式<el-icon class="ml-2"><ElIconArrowDown /></el-icon>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-menu class="format-list">
<el-dropdown-item
v-for="{ label, kbd, emitArgs } in formatItems"
:key="kbd"
class="format-item"
class="leading-8 format-item"
@click="$emit(...emitArgs)"
>
<el-icon class="opacity-0">
<ElIconCheck />
</el-icon>
{{ label }}
<kbd>{{ kbd }}</kbd>
<kbd class="ml-auto">{{ kbd }}</kbd>
</el-dropdown-item>
<el-dropdown-item divided @click="statusChanged">
<el-dropdown-item divided class="leading-8" @click="statusChanged">
<el-icon><ElIconCheck /></el-icon>
微信外链转底部引用
</el-dropdown-item>
Expand All @@ -379,15 +382,21 @@ export default {
</el-dropdown>
<el-dropdown>
<span class="el-dropdown-link">
编辑<el-icon><ElIconArrowDown /></el-icon>
编辑<el-icon class="ml-2"><ElIconArrowDown /></el-icon>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="$emit('showDialogUploadImg')">
<el-dropdown-item
class="leading-8"
@click="$emit('showDialogUploadImg')"
>
<el-icon><ElIconUpload /></el-icon>
上传图片
</el-dropdown-item>
<el-dropdown-item @click="$emit('showDialogForm')">
<el-dropdown-item
class="leading-8"
@click="$emit('showDialogForm')"
>
<el-icon><ElIconGrid /></el-icon>
插入表格
</el-dropdown-item>
Expand All @@ -396,43 +405,43 @@ export default {
</el-dropdown>
<el-dropdown>
<span class="el-dropdown-link">
样式<el-icon><ElIconArrowDown /></el-icon>
样式<el-icon class="ml-2"><ElIconArrowDown /></el-icon>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item class="padding-left-3">
<el-dropdown-item class="leading-8">
<StyleOptionMenu
label="字体"
:options="config.builtinFonts"
:current="selectFont"
:charge="fontChanged"
/>
</el-dropdown-item>
<el-dropdown-item class="padding-left-3">
<el-dropdown-item class="leading-8">
<StyleOptionMenu
label="字号"
:options="config.sizeOption"
:current="selectSize"
:charge="sizeChanged"
/>
</el-dropdown-item>
<el-dropdown-item class="padding-left-3">
<el-dropdown-item class="leading-8">
<StyleOptionMenu
label="颜色"
:options="config.colorOption"
:current="selectColor"
:charge="colorChanged"
/>
</el-dropdown-item>
<el-dropdown-item class="padding-left-3">
<el-dropdown-item class="leading-8">
<StyleOptionMenu
label="代码主题"
:options="config.codeThemeOption"
:current="selectCodeTheme"
:charge="codeThemeChanged"
/>
</el-dropdown-item>
<el-dropdown-item class="padding-left-3">
<el-dropdown-item class="leading-8">
<StyleOptionMenu
label="图注格式"
:options="config.legendOption"
Expand All @@ -442,44 +451,57 @@ export default {
</el-dropdown-item>
<el-dropdown-item
divided
class="padding-left-3"
class="leading-8"
@click="showPicker()"
>
<el-icon class="opacity-0">
<ElIconCheck />
</el-icon>
自定义颜色
<el-color-picker
ref="colorPicker"
v-model="selectColor"
show-alpha
style="float: right; margin-top: 3px"
class="ml-auto"
style="height: 2em"
@change="colorChanged"
/>
</el-dropdown-item>
<el-dropdown-item class="padding-left-3" @click="customStyle">
<el-dropdown-item class="leading-8" @click="customStyle">
<el-icon class="opacity-0">
<ElIconCheck />
</el-icon>
自定义 CSS
</el-dropdown-item>
<el-dropdown-item divided @click="codeBlockChanged">
<el-dropdown-item divided class="leading-8" @click="codeBlockChanged">
<el-icon :style="{ opacity: +isMacCodeBlock }">
<ElIconCheck />
</el-icon>
Mac 代码块
</el-dropdown-item>
<el-dropdown-item
divided
class="padding-left-3"
class="leading-8"
@click="showResetConfirm = true"
>
<el-icon class="opacity-0">
<ElIconCheck />
</el-icon>
重置
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-dropdown>
<span class="el-dropdown-link">
帮助<el-icon><ElIconArrowDown /></el-icon>
帮助<el-icon class="ml-2"><ElIconArrowDown /></el-icon>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="$emit('showAboutDialog')">
<el-dropdown-item
class="leading-8"
@click="$emit('showAboutDialog')"
>
关于
</el-dropdown-item>
</el-dropdown-menu>
Expand Down Expand Up @@ -521,6 +543,8 @@ export default {
}
.el-dropdown-link {
display: flex;
align-items: center;
cursor: pointer;
}
Expand All @@ -543,14 +567,23 @@ export default {
}
}
.format-item {
.padding-left-3;
width: 180px;
.format-list {
width: 250px;
}
.format-item {
kbd {
font-size: 0.75em;
float: right;
color: #666;
}
}
// .md-dropdown-item&:extend(.flex) {
.md-dropdown-item {
// .flex;
// .leading-8;
line-height: 20em;
}
</style>
2 changes: 2 additions & 0 deletions src/views/CodemirrorEditor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -648,6 +648,8 @@ export default {
}
.container {
// 覆盖默认设定
min-width: 100%;
transition: all 0.3s;
}
Expand Down

0 comments on commit c7235b1

Please sign in to comment.