lunanting/jmalcloud-view
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化文本编辑器样式

Browse Source
This commit is contained in:
jmal 2020-07-27 17:38:49 +08:00
parent 599693210c
commit b30d2b0d50
3 changed files with 160 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/FancyTree/index.vue
View File

@ -132,9 +132,13 @@
return !isModifying return !isModifying
}, },
edit: function(event, data){ edit: function(event, data){
let intput = data.node.span.querySelector('.fancytree-title .fancytree-edit-input') let input = data.node.span.querySelector('.fancytree-title .fancytree-edit-input')
let width = intput.style.width.substring(0,intput.style.width.length-2) let width = input.style.width.substring(0,input.style.width.length-2)
intput.style.width = parseInt(width)+50+'px' input.style.width = parseInt(width)+50+'px'
if(input.value.length -1 > data.node.data.suffix.length){
input.selectionStart = 0
input.selectionEnd = input.value.length - 1 - data.node.data.suffix.length
}
}, },
beforeClose: function(event, data){ beforeClose: function(event, data){
if(data.originalEvent.type === "mousedown") { if(data.originalEvent.type === "mousedown") {
@ -165,8 +169,7 @@
}); });
}, },
addRef(node){ addRef(node){
let title = node.span.querySelector('.fancytree-title') this.$refs.contextmenu.addRef({el:node.span,vnode: node.span})
this.$refs.contextmenu.addRef({el:title,vnode: title})
}, },
contextmenu(vnode){ contextmenu(vnode){
this.rightClicking = true this.rightClicking = true
@ -542,9 +545,7 @@
position: relative; position: relative;
width: 20px; width: 20px;
height: 20px; height: 20px;
margin-top: -3px; padding: 2.5px 0 0 0;
margin-left: -2px;
padding: 2px;
} }
</style> </style>

211
src/components/preview/SimTextPreview.vue
View File

@ -78,6 +78,7 @@
:label="item.title" :label="item.title"
:name="item.name" :name="item.name"
> >
<span slot="label"><svg-icon class="tabs-icon-svg" :icon-class="findSvgClass(item.name)"></svg-icon> {{item.title}}</span>
<div class="editor"> <div class="editor">
<MonacoEditor <MonacoEditor
v-if="textPreviewVisible" v-if="textPreviewVisible"
@ -109,7 +110,7 @@
import api from '@/api/file-api' import api from '@/api/file-api'
import markdownApi from '@/api/markdown-api' import markdownApi from '@/api/markdown-api'
import { lineWrapping,suffix } from '@/utils/file-type' import { iconClass,lineWrapping,suffix } from '@/utils/file-type'
import MonacoEditor from '../MonacoEditorVue' import MonacoEditor from '../MonacoEditorVue'
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api' import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
@ -182,8 +183,8 @@
removeIndex: 0, removeIndex: 0,
loading: {}, loading: {},
darkButton: { darkButton: {
background: '#444444!important', background: '#3e3e3e!important',
border: '1px solid #444444!important', border: '1px solid #3e3e3e!important',
color: '#ffffff!important' color: '#ffffff!important'
}, },
directoryTreeData: {}, directoryTreeData: {},
@ -417,6 +418,13 @@
} }
} }
}, },
findSvgClass(fileName){
const suffix = fileName.substring(fileName.lastIndexOf('.') + 1);
if(iconClass.has(suffix)){
return iconClass.get(suffix)
}
return 'file'
},
loadPath(data){ loadPath(data){
this.$refs.fancTree.loadPath(data) this.$refs.fancTree.loadPath(data)
}, },
@ -648,32 +656,37 @@
}, },
// 换肤 // 换肤
skinning() { skinning() {
this.transition = 'none 500ms ease 0s'
this.lightTheme = !this.lightTheme this.lightTheme = !this.lightTheme
this.setTheme() this.setTheme()
const that = this
setTimeout(function () {
that.transition = 'all 500ms ease 0s'
},100)
}, },
setTheme(){ setTheme(){
let dialog = document.querySelector('.simtext-dialog .el-dialog') let dialog = document.querySelector('.simtext-dialog .el-dialog')
let header = document.querySelector('.simtext-dialog .el-dialog .el-dialog__header') let header = document.querySelector('.simtext-dialog .el-dialog .el-dialog__header')
let fileContests = document.querySelector('.content'); let fileContests = document.querySelector('.content');
if(this.lightTheme){ if(this.lightTheme){
header.style.background = '#FFF' header.style.background = '#e6e6e6'
header.style.color = '#181818' header.style.color = '#181818'
if(fileContests){ if(fileContests){
fileContests.setAttribute('data-theme', 'light') fileContests.setAttribute('data-theme', 'light')
} }
if(dialog){ if(dialog){
dialog.style.background = '#FFF' dialog.style.background = '#fff'
} }
if(header){ if(header){
header.setAttribute('data-theme', 'light') header.setAttribute('data-theme', 'light')
} }
}else{ }else{
header.style.background = '#292929' header.style.background = '#2e2e30'
header.style.color = '#fff' header.style.color = '#fff'
if(dialog){ if(dialog){
dialog.style.background = '#1e1e1e' dialog.style.background = '#181818'
} }
if(fileContests){1 if(fileContests){
fileContests.setAttribute('data-theme', 'dark') fileContests.setAttribute('data-theme', 'dark')
} }
if(header){ if(header){
@ -713,7 +726,6 @@
<style lang="scss" scoped> <style lang="scss" scoped>
@import "src/styles/markdown"; @import "src/styles/markdown";
//$bg-color: #1e1e1e;
$bg-color: #292929; $bg-color: #292929;
$tree-title-bg-color: #3e3e3e; $tree-title-bg-color: #3e3e3e;
@ -746,7 +758,7 @@
} }
&::-webkit-scrollbar-track-piece { &::-webkit-scrollbar-track-piece {
border: unset!important; border: unset!important;
background-color: #444444 !important; background-color: #3e3e3e !important;
border-radius: unset!important; border-radius: unset!important;
} }
} }
@ -766,8 +778,8 @@
} }
.dark-button { .dark-button {
background: #444444; background: #3e3e3e;
border: 1px solid #444444; border: 1px solid #3e3e3e;
color: #ffffff; color: #ffffff;
} }
/*.el-button:focus{*/ /*.el-button:focus{*/
@ -776,8 +788,8 @@
/*color: #606266;*/ /*color: #606266;*/
/*}*/ /*}*/
/*.dark-button:focus{*/ /*.dark-button:focus{*/
/*background: #444444;*/ /*background: #3e3e3e;*/
/*border: 1px solid #444444;*/ /*border: 1px solid #3e3e3e;*/
/*color: #ffffff;*/ /*color: #ffffff;*/
/*}*/ /*}*/
.light-button:hover { .light-button:hover {
@ -785,7 +797,7 @@
} }
.dark-button:hover { .dark-button:hover {
color: #409EFF; color: #409EFF;
background-color: #1e1e1e; background-color: #181818;
} }
.el-dialog__header { .el-dialog__header {
@ -848,14 +860,39 @@
word-break: normal; word-break: normal;
} }
.content { .content {
background: #F3F3F3;
border-top: unset!important; border-top: unset!important;
display: inline-flex; display: inline-flex;
.el-tabs__header { .el-tabs__header {
margin: 0 0 0; margin: 0 0 0;
.el-tabs__item { .el-tabs__item {
height: 31px; height: 32px;
line-height: 31px; line-height: 32px;
}
}
.tabs-icon-svg {
font-size: 14px;
}
.el-tabs--card>.el-tabs__header {
border-bottom: unset;
.el-tabs__nav {
border: unset;
}
.el-tabs__item {
border-left: 1px solid #f3f3f3;
color: #6A6A6A;
background-color: #ebebeb;
}
.el-tabs__item:first-child {
border-left: none;
}
.el-tabs__item.is-active {
border-bottom-color: #ffffff;
background-color: #ffffff;
color: #2F302F;
} }
} }
@ -869,7 +906,7 @@
} }
.el-tabs__nav-wrap { .el-tabs__nav-wrap {
margin-left: -1px; //margin-left: -1px;
} }
.el-tabs--card>.el-tabs__header .el-tabs__nav { .el-tabs--card>.el-tabs__header .el-tabs__nav {
@ -877,7 +914,7 @@
} }
.el-tabs__nav-next, .el-tabs__nav-prev { .el-tabs__nav-next, .el-tabs__nav-prev {
line-height: 31px; line-height: 32px;
} }
.file-contents{ .file-contents{
@ -886,35 +923,59 @@
position: absolute; position: absolute;
.content-tree{ .content-tree{
background-color: #F3F3F3;
background: #fff;
//box-shadow: inset #ececec -7px 0px; //box-shadow: inset #ececec -7px 0px;
.svg-icon {
font-size: 18px;
}
#dir-tree { #dir-tree {
$fancytreeTitleHoverColor: #E9E9E9;
$fancytreeTitleActiveColor: #b6d8fb;
overflow-x: hidden; overflow-x: hidden;
@include scrollBarLightStyle; @include scrollBarLightStyle;
ul.fancytree-container{ ul.fancytree-container{
padding: 3px 0 0 0; padding: 3px 0 0 0;
background-color: #F3F3F3;
} }
}
.svg-icon { span.fancytree-title {
font-size: 18px; padding: 2.5px 3px 0 3px;
} }
#dir-tree {
.fancytree-active {
background-color: $fancytreeTitleActiveColor;
}
.fancytree-active:hover {
background-color: $fancytreeTitleActiveColor!important;
}
.fancytree-node:hover {
background-color: $fancytreeTitleHoverColor;
}
.fancytree-plain span.fancytree-active span.fancytree-title{ .fancytree-plain span.fancytree-active span.fancytree-title{
background-color: #409eff30; background-color: $fancytreeTitleActiveColor;
border-color: #ffffff; border-color: $fancytreeTitleActiveColor;
color: #000000;
}
.fancytree-plain span.fancytree-active:hover span.fancytree-title{
background-color: $fancytreeTitleActiveColor!important;
border-color: $fancytreeTitleActiveColor!important;
} }
.fancytree-plain span.fancytree-node:hover span.fancytree-title{ .fancytree-plain span.fancytree-node:hover span.fancytree-title{
background-color: #409eff30; background-color: $fancytreeTitleHoverColor;
border-color: #ffffff; border-color: $fancytreeTitleHoverColor;
} }
.fancytree-plain.fancytree-container.fancytree-treefocus span.fancytree-active span.fancytree-title{ .fancytree-plain.fancytree-container.fancytree-treefocus span.fancytree-active span.fancytree-title{
background-color: #409eff30; background-color: $fancytreeTitleActiveColor;
border-color: #ffffff; border-color: $fancytreeTitleActiveColor;
} }
} }
} }
@ -933,8 +994,7 @@
bottom: 0; bottom: 0;
top: 0; top: 0;
cursor: col-resize; cursor: col-resize;
background-color: #ececec; background-color: #ffffff;
.darg-resize-conter { .darg-resize-conter {
width: 2px; width: 2px;
} }
@ -978,20 +1038,16 @@
} }
.monaco-editor .margin {
background-color: #ececec;
}
&[data-theme=dark] { &[data-theme=dark] {
background: $bg-color; background: #202020;
.editor-resize { .editor-resize {
background-color: #1e1e1e; background-color: #181818;
.editor-resize-conter{ .editor-resize-conter{
background: #222; background: #292929;
border: 1px solid #3e3e3e; border: 1px solid #3e3e3e;
border-left: 1px solid #1e1e1e; border-left: 1px solid #292929;
} }
.editor-resize-conter:after { .editor-resize-conter:after {
border-color: #b2b2b2; border-color: #b2b2b2;
@ -999,34 +1055,35 @@
} }
.el-tabs--card>.el-tabs__header { .el-tabs--card>.el-tabs__header {
border-bottom: 1px solid #444444; border-bottom: unset;
.el-tabs__nav { .el-tabs__nav {
border: 1px solid #444444; border: unset;
border-bottom: none;
} }
.el-tabs__item { .el-tabs__item {
border-left: 1px solid #444444; border-left: 1px solid #202021;
color: #afafaf; color: #aaaaaa;
background-color: #292929;
} }
.el-tabs__item:first-child { .el-tabs__item:first-child {
border-left: none; border-left: none;
} }
.el-tabs__item.is-active { .el-tabs__item.is-active {
border-bottom-color: $bg-color; border-bottom-color: #181818;
color: #409EFF; background-color: #181818;
color: #fefefe;
} }
} }
.file-contents{ .file-contents{
background: #444444; background: #3e3e3e;
.dir-tools { .dir-tools {
background: #444444; background: #3e3e3e;
} }
.content-tree { .content-tree {
background: #292929; background: #202021;
//box-shadow: inset #2d2d2d -7px 0px; //box-shadow: inset #2d2d2d -7px 0px;
#dir-tree { #dir-tree {
@include scrollBarDarkStyle; @include scrollBarDarkStyle;
@ -1034,21 +1091,47 @@
color: #dedede; color: #dedede;
} }
ul.fancytree-container { ul.fancytree-container {
background: #292929; background: #202021;
} }
$fancytreeTitleHoverColor: #242A2B;
$fancytreeTitleActiveColor: #004471;
.fancytree-active {
background-color: $fancytreeTitleActiveColor;
}
.fancytree-active:hover {
background-color: $fancytreeTitleActiveColor!important;
}
.fancytree-node:hover {
background-color: $fancytreeTitleHoverColor;
}
.fancytree-plain span.fancytree-active span.fancytree-title{ .fancytree-plain span.fancytree-active span.fancytree-title{
background-color: $tree-title-bg-color; background-color: $fancytreeTitleActiveColor;
border-color: $bg-color; border-color: $fancytreeTitleActiveColor;
color: #FFFFFF;
}
.fancytree-plain span.fancytree-active:hover span.fancytree-title{
background-color: $fancytreeTitleActiveColor!important;
border-color: $fancytreeTitleActiveColor!important;
} }
.fancytree-plain span.fancytree-node:hover span.fancytree-title{ .fancytree-plain span.fancytree-node:hover span.fancytree-title{
background-color: $tree-title-bg-color; background-color: $fancytreeTitleHoverColor;
border-color: $bg-color; border-color: $fancytreeTitleHoverColor;
} }
.fancytree-plain.fancytree-container.fancytree-treefocus span.fancytree-active span.fancytree-title{ .fancytree-plain.fancytree-container.fancytree-treefocus span.fancytree-active span.fancytree-title{
background-color: $tree-title-bg-color; background-color: $fancytreeTitleActiveColor;
border-color: $bg-color; border-color: $fancytreeTitleActiveColor;
}
.fancytree-edit-input {
background-color: #202021;
border: unset;
} }
} }
} }
@ -1057,8 +1140,14 @@
background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0)); background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0));
} }
.monaco-editor .margin { .monaco-editor, .monaco-editor-background, .monaco-editor .inputarea.ime-input {
background-color: #292929; background-color: #181818;
}
.monaco-editor{
.margin {
background-color: #181818;
}
} }
} }

2
src/utils/request.js
View File

@ -91,7 +91,7 @@ service.interceptors.response.use(
}, },
error => { error => {
Message({ Message({
message: '哎呀！服务器出错，请稍后再试！', message: '哎呀！服务器出错了，请稍后再试！',
type: 'error', type: 'error',
duration: 5 * 1000 duration: 5 * 1000
}) })