amass/md
1
0
Fork 0
mirror of https://github.com/doocs/md.git synced 2024-11-24 19:10:34 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feature: dark-theme

Browse Source
This commit is contained in:
JimQing 2020-05-17 16:53:21 +08:00
parent e029f5f13d
commit 8a3f855282
12 changed files with 129 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/assets/css/loading.css
View File

@ -8,6 +8,10 @@
background-color: #f2f2f2;
}
.loading_night {
background-color: #303133;
}
.loading-wrapper {
position: fixed;
top: 50%;

2
src/App.vue
View File

@ -5,7 +5,7 @@
<script>
import Loading from './components/Loading'
import CodemirrorEditor from './components/CodemirrorEditor'
import CodemirrorEditor from './view/CodemirrorEditor'
export default {
name: 'App',
components: {

BIN
src/assets/images/light.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.6 KiB

BIN
src/assets/images/night.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.5 KiB

62
src/assets/less/theme.less Normal file
View File

@ -0,0 +1,62 @@
@nightBgColor: #333333;
@nightPreviewColor: #1e1e1e;
@nightHeaderColor: #3c3c3c;
@nightCodeMirrorColor: #1e1e1e;
@nightActiveCodeMirrorColor: gray;
@nightFontColor: gray;
@nightLinkColor: #8e9eb9;
@nightLinkTextColor: #84868b;
@nightBorderColor: #ffffff;
@nightButtonBg: #1e1e1e;
@nightButtonHoverColor: #84868b;
.container_night {
background-color: @nightBgColor;
.CodeMirror {
caret-color: @nightFontColor;
color: @nightFontColor;
background-color: @nightCodeMirrorColor;
box-shadow: inset 0 0 0 1px rgba(100, 37, 37, 0.102);
}
.preview {
background-color: @nightPreviewColor;
box-shadow: 0 0 70px rgba(0, 0, 0, 0.3);
}
.preview-wrapper {
background-color: @nightCodeMirrorColor;
box-shadow: inset 0 0 0 1px rgba(233, 231, 231, 0.102);
}
.cm-s-xq-light span.cm-variable-2 {
color: @nightFontColor;
}
.cm-s-xq-light .CodeMirror-activeline-background {
background-color: transparent;
}
.cm-s-xq-light span.cm-string {
color: @nightLinkColor;
}
.cm-s-xq-light span.cm-link {
color: @nightLinkTextColor;
}
.editor__header {
background-color: @nightHeaderColor;
}
.el-button {
color: @nightBorderColor;
background-color: @nightCodeMirrorColor;
border: 1px solid #eeeeee;
}
.el-button.is-plain:focus, .el-button.is-plain:hover {
background: @nightButtonBg;
color: @nightButtonHoverColor;
border: 1px solid @nightButtonHoverColor;
i {
color: @nightButtonHoverColor;
}
}
i {
color: #ffffff;
}
::-webkit-scrollbar {
background-color: @nightCodeMirrorColor;
}
}

56
src/components/codeMirror/header.vue
View File

@ -1,24 +1,24 @@
<template>
<el-container class="top">
<el-container class="top is-dark">
<!-- 图片上传 -->
<el-upload class="header__item" action="https://imgkr.com/api/files/upload"
:headers="{'Content-Type': 'multipart/form-data'}"
:show-file-list="false" :multiple="true" accept=".jpg,.jpeg,.png,.gif" name="file"
:before-upload="beforeUpload">
<el-tooltip effect="dark" content="上传图片" placement="bottom-start">
<el-tooltip :effect="effect" content="上传图片" placement="bottom-start">
<i class="el-icon-upload" size="medium"></i>
</el-tooltip>
</el-upload>
<!-- 下载文本文档 -->
<el-tooltip class="header__item" effect="dark" content="下载编辑框Markdown文档" placement="bottom-start">
<el-tooltip class="header__item" :effect="effect" content="下载编辑框Markdown文档" placement="bottom-start">
<i class="el-icon-download" size="medium" @click="downloadEditorContent"></i>
</el-tooltip>
<!-- 页面重置 -->
<el-tooltip class="header__item" effect="dark" content="重置页面" placement="bottom-start">
<el-tooltip class="header__item" :effect="effect" content="重置页面" placement="bottom-start">
<i class="el-icon-refresh" size="medium" @click="reset"></i>
</el-tooltip>
<!-- 插入表格 -->
<el-tooltip class="header__item header__item_last" effect="dark" content="插入表格" placement="bottom-start">
<el-tooltip class="header__item header__item_last" :effect="effect" content="插入表格" placement="bottom-start">
<i class="el-icon-s-grid" size="medium" @click="$emit('showDialogForm')"></i>
</el-tooltip>
<el-form size="mini" class="ctrl" :inline=true>
@ -47,19 +47,23 @@
</el-option>
</el-select>
</el-form-item>
<el-tooltip content="自定义颜色" placement="top">
<el-tooltip content="自定义颜色" :effect="effect" placement="top">
<el-color-picker v-model="selectColor" size="mini" show-alpha @change="colorChanged"></el-color-picker>
</el-tooltip>
<el-tooltip content="微信外链自动转为文末引用" placement="top">
<el-switch class="header__switch" v-model="citeStatus" active-color="#67c23a" inactive-color="#dcdfe6" @change="statusChanged">
</el-switch>
<el-tooltip content="微信外链自动转为文末引用" :effect="effect" placement="top">
<el-switch class="header__switch" v-model="citeStatus" active-color="#67c23a" inactive-color="#dcdfe6" @change="statusChanged">
</el-switch>
</el-tooltip>
</el-form>
<el-tooltip class="item" effect="dark" content="自定义CSS样式" placement="left">
<el-button type="success" plain size="medium" icon="el-icon-setting" @click="customStyle"></el-button>
<el-tooltip class="item" :effect="effect" content="自定义CSS样式" placement="left">
<el-button :type="btnType" plain size="medium" icon="el-icon-setting" @click="customStyle"></el-button>
</el-tooltip>
<el-button :type="btnType" plain size="medium" @click="copy">复制</el-button>
<el-button :type="btnType" plain size="medium" class="about" @click="$emit('showAboutDialog')">关于</el-button>
<el-tooltip content="夜间模式" placement="bottom-start">
<div class="mode__switch" v-if="!nightMode" @click="themeChanged"></div>
<div class="mode__switch mode__switch_black" v-else @click="themeChanged"></div>
</el-tooltip>
<el-button type="success" plain size="medium" @click="copy">复制</el-button>
<el-button type="success" plain size="medium" class="about" @click="$emit('showAboutDialog')">关于</el-button>
</el-container>
</template>
@ -90,13 +94,20 @@ export default {
};
},
computed: {
effect() {
return this.nightMode ? 'dark' : 'light'
},
btnType() {
return !this.nightMode ? 'success' : 'default';
},
...mapState({
output: state=> state.output,
editor: state=> state.editor,
cssEditor: state=> state.cssEditor,
currentFont: state=> state.currentFont,
currentSize: state=> state.currentSize,
currentColor: state=> state.currentColor
currentColor: state=> state.currentColor,
nightMode: state=> state.nightMode
})
},
methods: {
@ -228,7 +239,7 @@ export default {
downLink.click()
document.body.removeChild(downLink)
},
...mapMutations(['clearEditorToDefault','setCurrentColor', 'setCiteStatus',
...mapMutations(['clearEditorToDefault','setCurrentColor', 'setCiteStatus', 'themeChanged',
'setHtml', 'setCurrentFont', 'setCurrentSize', 'setCssEditorValue', 'setWxRendererOptions'])
},
mounted() {
@ -252,4 +263,19 @@ export default {
.header__switch {
margin-left: 8px;
}
.mode__switch {
margin-left: 24px;
width: 24px;
height: 24px;
background: url('../../assets/images/night.png') no-repeat;
background-size: cover;
transition: all .3s;
}
.mode__switch_black {
background: url('../../assets/images/light.png') no-repeat;
background-size: cover;
}
.top {
margin-right: 0;
}
</style>

7
src/main.js
View File

@ -1,6 +1,5 @@
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
@ -9,12 +8,12 @@ import 'codemirror/lib/codemirror.css';
import "codemirror/theme/ambiance.css";
import "codemirror/addon/hint/show-hint.css";
import "codemirror/theme/xq-light.css";
import "./assets/less/theme.less";
Vue.use(ElementUI)
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
store,
render: h => h(App)
}).$mount('#app')

29
src/router/index.js
View File

@ -1,29 +0,0 @@
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router

6
src/store/index.js
View File

@ -21,7 +21,8 @@ const state = {
currentFont: '',
currentSize: '',
currentColor: '',
citeStatus: 0
citeStatus: 0,
nightMode: true
};
const mutations = {
setHtml(state, data) {
@ -52,6 +53,9 @@ const mutations = {
state.currentColor = data;
localStorage.setItem('color', data)
},
themeChanged(state) {
state.nightMode = !state.nightMode;
},
initEditorState(state) {
state.currentFont = localStorage.getItem('fonts') || config.builtinFonts[0].value
state.currentColor = localStorage.getItem('color') || config.colorOption[1].value

21
src/components/CodemirrorEditor.vue → src/view/CodemirrorEditor.vue
View File

@ -1,7 +1,7 @@
<template>
<div id="app" class="container">
<div class="container" :class="{'container_night': nightMode}">
<el-container>
<el-header class="top editor__header">
<el-header class="editor__header is-dark">
<editor-header
@refresh="onEditorRefresh"
@uploaded="uploaded"
@ -53,9 +53,9 @@ import 'codemirror/addon/hint/css-hint.js'
import '../scripts/format.js'
import fileApi from '../api/file';
import editorHeader from './codeMirror/header';
import aboutDialog from './codeMirror/aboutDialog';
import insertFormDialog from './codeMirror/insertForm';
import editorHeader from '../components/codeMirror/header';
import aboutDialog from '../components/codeMirror/aboutDialog';
import insertFormDialog from '../components/codeMirror/insertForm';
import {
setFontSize,
css2json,
@ -93,7 +93,8 @@ export default {
cssEditor: state=> state.cssEditor,
currentSize: state=> state.currentSize,
currentColor: state=> state.currentColor,
html: state=> state.html
html: state=> state.html,
nightMode: state=> state.nightMode
})
},
created() {
@ -207,7 +208,7 @@ export default {
},
// 左右栏同步滚动
leftAndRightScroll() {
$('div.CodeMirror-scroll, #preview').on('scroll', function callback() {
$('#preview').on('scroll', function callback() {
clearTimeout(this.timeout)
let source = $(this)
@ -246,6 +247,10 @@ export default {
<style lang="less" scoped>
@import url('../scripts/google-code-prettify/prettify.css');
.main-body {
padding-top: 0;
padding-top: 12px;
overflow: hidden;
}
.container {
transition: all .3s;
}
</style>

5
src/views/About.vue
View File

@ -1,5 +0,0 @@
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>

14
src/views/Home.vue
View File

@ -1,14 +0,0 @@
<template>
<div class="home">
</div>
</template>
<script>
// @ is an alias to /src
export default {
name: 'home',
components: {
}
}
</script>