perf: 优化文本编辑器和流程图的使用体验
This commit is contained in:
jmal
parent
82c6b84be3
commit
c9827aa305
@ -417,6 +417,7 @@ export default {
|
||||
this.saved = true
|
||||
this.title = this.file.name
|
||||
this.$emit('onEdit', this.saved)
|
||||
this.bakValue = value
|
||||
this.$refs.historyPopover.loadHistoryList(this.file.id)
|
||||
}).catch(() => {
|
||||
this.saveBtnUpdating = false
|
||||
|
||||
@ -119,6 +119,19 @@ export default {
|
||||
theme: theme,
|
||||
...options
|
||||
});
|
||||
this.editor.addAction({
|
||||
id: 'my-unique-id',
|
||||
label: 'Hello World',
|
||||
keybindings: [
|
||||
monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_M,
|
||||
],
|
||||
contextMenuGroupId: 'navigation',
|
||||
contextMenuOrder: 1.5,
|
||||
run: function(ed) {
|
||||
alert('Hello World!');
|
||||
}
|
||||
});
|
||||
|
||||
this.diffEditor && this._setModel(this.value, this.original);
|
||||
this._editorMounted(this.editor); //编辑器初始化后
|
||||
},
|
||||
|
||||
@ -449,9 +449,10 @@
|
||||
title="提示"
|
||||
content="此文件不支持预览, 是否下载该文件?"
|
||||
:show.sync="notPreviewDialogVisible"
|
||||
operatButtonText="强行使用文本编辑器打开"
|
||||
button-size="mini"
|
||||
operatButtonText="取消"
|
||||
confirmButtonText="下载"
|
||||
@operating="forciblyOpen(openingFile)"
|
||||
@operating="notPreviewDialogVisible = false"
|
||||
@confirm="determineDownload(openingFile)"
|
||||
>
|
||||
</message-dialog>
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- <el-container v-loading="loading">-->
|
||||
<!-- </el-container>-->
|
||||
<el-dialog
|
||||
class="jmal-message-dialog"
|
||||
:title="title"
|
||||
@ -14,7 +12,6 @@
|
||||
<svg-icon v-if="!loading" icon-class="warring"></svg-icon> <span class="dialog-msg">{{content}}</span>
|
||||
<span v-if="!loading" slot="footer" class="dialog-footer">
|
||||
<el-button :size="buttonSize" @click="operating">{{operatButtonText}}</el-button>
|
||||
<!-- <el-button :size="buttonSize" @click="cancel">{{cancelButtonText}}</el-button>-->
|
||||
<el-button :size="buttonSize" type="primary" @click=confirm>{{confirmButtonText}}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
@ -1,13 +1,14 @@
|
||||
<template>
|
||||
<div class="drawio-content" :style="{'top': readOnly ? '0': '2.5rem'}">
|
||||
<div class="drawio-title">
|
||||
<div class="drawio-title-name" :style="{'color': saved ? '': '#ff8200'}">{{title}}</div>
|
||||
<div class="drawio-title-name" :style="{'color': saved ? (lightTheme ? '':'#ffffff'): '#ff8200'}">{{title}}</div>
|
||||
<div class="drawio-operation">
|
||||
<div style="margin-right: 15px">
|
||||
<el-button v-if="historyVersion.metadata.time" @click="cancelPreview" size="mini">取消预览</el-button>
|
||||
<el-button v-if="historyVersion.metadata.time" @click="cancelPreview" size="mini" :class="lightTheme ? '':'dark-button'">取消预览</el-button>
|
||||
</div>
|
||||
<history-popover
|
||||
ref="historyPopover"
|
||||
:light-theme.sync="lightTheme"
|
||||
:has-history-version.sync="hasHistoryVersion"
|
||||
:history-list-popover-visible.sync="historyListPopoverVisible"
|
||||
:history-operation-loading="!loading.closed"
|
||||
@ -17,7 +18,7 @@
|
||||
>
|
||||
</history-popover>
|
||||
|
||||
<div><el-button v-if="!saved" @click="save" size="mini" :loading="saveBtnUpdating">保存</el-button></div>
|
||||
<div><el-button v-if="!saved" @click="save" size="mini" :loading="saveBtnUpdating" :class="lightTheme ? '':'dark-button'">保存</el-button></div>
|
||||
</div>
|
||||
</div>
|
||||
<iframe ref="myFlow" class="drawio-iframe" :src="url" :title="file.name"></iframe>
|
||||
@ -56,6 +57,7 @@ export default {
|
||||
url: null,
|
||||
bakData: '',
|
||||
xml: '',
|
||||
drawioUrlValid: false,
|
||||
saveBtnUpdating: false,
|
||||
title: this.file.name,
|
||||
saved: true,
|
||||
@ -69,6 +71,7 @@ export default {
|
||||
loading: {
|
||||
closed: true
|
||||
},
|
||||
lightTheme: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@ -109,7 +112,11 @@ export default {
|
||||
path: encodeURI(this.file.path),
|
||||
username: this.$store.state.user.name,
|
||||
content: true,
|
||||
}).then((res) => {
|
||||
}).then(async (res) => {
|
||||
await this.checkDrawioUrl()
|
||||
if (!this.drawioUrlValid) {
|
||||
return
|
||||
}
|
||||
this.file.path = res.data.path
|
||||
this.xml = res.data.contentText
|
||||
if (this.bakData === res.data.contentText) {
|
||||
@ -127,6 +134,19 @@ export default {
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async checkDrawioUrl() {
|
||||
await axios.get(this.url).then(response => {
|
||||
if (response.status === 200) {
|
||||
this.drawioUrlValid = true
|
||||
} else {
|
||||
this.$emit('onClose')
|
||||
Bus.$emit('loadFileFaild')
|
||||
}
|
||||
}).catch(() => {
|
||||
this.$emit('onClose')
|
||||
Bus.$emit('loadFileFaild')
|
||||
})
|
||||
},
|
||||
viewHistoryFile({historyInfo, recovery}) {
|
||||
if (!this.saved) {
|
||||
this.$message({type: 'info', message: "请先保存当前修改的内容"})
|
||||
@ -207,11 +227,25 @@ export default {
|
||||
this.saved = true
|
||||
this.title = this.file.name
|
||||
this.$emit('onEdit', this.saved)
|
||||
this.bakData = this.xml
|
||||
this.updateContent()
|
||||
this.$refs.historyPopover.loadHistoryList(this.file.id)
|
||||
}).catch(() => {
|
||||
this.saveBtnUpdating = false
|
||||
})
|
||||
},
|
||||
onSwitchTheme() {
|
||||
let isDarkMode = false;
|
||||
let linkElements = this.$refs.myFlow.contentWindow.document.getElementsByTagName("link");
|
||||
for (let i = 0; i < linkElements.length; i++) {
|
||||
let link = linkElements[i];
|
||||
if (link.href.includes("styles/dark.css")) {
|
||||
isDarkMode = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
this.lightTheme = !isDarkMode
|
||||
},
|
||||
handleMessage(event) {
|
||||
const editWindow = this.$refs.myFlow.contentWindow
|
||||
if (event.source !== editWindow) {
|
||||
@ -221,11 +255,17 @@ export default {
|
||||
const payload = $J.jsonParse(event.data)
|
||||
switch (payload.event) {
|
||||
case "init":
|
||||
console.log('init')
|
||||
this.ready = true
|
||||
this.$emit('onReady')
|
||||
this.updateContent()
|
||||
let helpMenu = doc.querySelector('.geMenubarContainer .geMenubar').childNodes[5]
|
||||
doc.addEventListener('click', this.$refs.historyPopover.onGlobalClick)
|
||||
helpMenu.style.display = 'none'
|
||||
let elementTheme = doc.querySelector('.geToolbarContainer').querySelector('[title="主题"][class="geButton geAdaptiveAsset"]');
|
||||
if (elementTheme) {
|
||||
elementTheme.addEventListener('click', this.onSwitchTheme)
|
||||
}
|
||||
break
|
||||
case "load":
|
||||
if (this.xml.length < 1) {
|
||||
@ -271,24 +311,38 @@ export default {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
>>>.dark-button {
|
||||
background: #3e3e3e;
|
||||
border: 1px solid #3e3e3e;
|
||||
color: #ffffff;
|
||||
}
|
||||
>>>.dark-button:hover {
|
||||
color: #409EFF;
|
||||
background-color: #181818;
|
||||
}
|
||||
|
||||
.drawio-title {
|
||||
text-align: left;
|
||||
background-color: #fbfbfb;
|
||||
z-index: 2001;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: calc(50% + 121px);
|
||||
margin-left: calc(50% - 121px);
|
||||
height: 0;
|
||||
position: relative;
|
||||
|
||||
.drawio-title-name {
|
||||
line-height: 32px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
z-index: 2001;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 40%;
|
||||
top: 16px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
}
|
||||
|
||||
.drawio-operation {
|
||||
display: flex;
|
||||
float: right;
|
||||
margin-top: -32px;
|
||||
margin-right: 15px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
@ -1123,348 +1123,188 @@
|
||||
border-radius: unset!important;
|
||||
}
|
||||
}
|
||||
|
||||
>>>.el-dialog {
|
||||
/*width: 1035px;*/
|
||||
margin: 0 !important;
|
||||
overflow: hidden;
|
||||
|
||||
.el-button--small.is-circle {
|
||||
padding: 9px 10px;
|
||||
}
|
||||
|
||||
.light-button {
|
||||
background: #ececec;
|
||||
border: 1px solid #ececec;
|
||||
}
|
||||
.light-button:hover {
|
||||
background: #DCDFE6;
|
||||
}
|
||||
.dark-button {
|
||||
background: #3e3e3e;
|
||||
border: 1px solid #3e3e3e;
|
||||
color: #ffffff;
|
||||
}
|
||||
.dark-button:hover {
|
||||
color: #409EFF;
|
||||
background-color: #181818;
|
||||
}
|
||||
|
||||
.el-dialog__header {
|
||||
padding: 5px 10px 5px;
|
||||
.simtext-dialog {
|
||||
>>>.el-dialog {
|
||||
/*width: 1035px;*/
|
||||
margin: 0 !important;
|
||||
overflow: hidden;
|
||||
|
||||
.el-dialog__headerbtn {
|
||||
display: none;
|
||||
.el-button--small.is-circle {
|
||||
padding: 9px 10px;
|
||||
}
|
||||
.title-name {
|
||||
line-height: 34px;
|
||||
}
|
||||
.title-extension {
|
||||
float: right;
|
||||
margin-right: 0;
|
||||
margin-top: 3px;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
|
||||
.title-extension-button {
|
||||
padding: 0;
|
||||
margin-left: 15px;
|
||||
background: 0 0;
|
||||
border: none;
|
||||
outline: 0;
|
||||
cursor: pointer;
|
||||
color: #909399;
|
||||
.svg-icon {
|
||||
font-size: 18px;
|
||||
.light-button {
|
||||
background: #ececec;
|
||||
border: 1px solid #ececec;
|
||||
}
|
||||
.light-button:hover {
|
||||
background: #DCDFE6;
|
||||
}
|
||||
.dark-button {
|
||||
background: #3e3e3e;
|
||||
border: 1px solid #3e3e3e;
|
||||
color: #ffffff;
|
||||
}
|
||||
.dark-button:hover {
|
||||
color: #409EFF;
|
||||
background-color: #181818;
|
||||
}
|
||||
|
||||
.el-dialog__header {
|
||||
padding: 5px 10px 5px;
|
||||
overflow: hidden;
|
||||
|
||||
.el-dialog__headerbtn {
|
||||
display: none;
|
||||
}
|
||||
.title-name {
|
||||
line-height: 34px;
|
||||
}
|
||||
.title-extension {
|
||||
float: right;
|
||||
margin-right: 0;
|
||||
margin-top: 3px;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
|
||||
.title-extension-button {
|
||||
padding: 0;
|
||||
margin-left: 15px;
|
||||
background: 0 0;
|
||||
border: none;
|
||||
outline: 0;
|
||||
cursor: pointer;
|
||||
color: #909399;
|
||||
.svg-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
.svg-icon:hover {
|
||||
color: #409EFF;
|
||||
}
|
||||
.el-icon-close {
|
||||
font-size: 28px;
|
||||
}
|
||||
.el-icon-close:hover {
|
||||
color: #409EFF;
|
||||
}
|
||||
}
|
||||
.svg-icon:hover {
|
||||
color: #409EFF;
|
||||
|
||||
}
|
||||
|
||||
&[data-theme=dark] {
|
||||
.redirect{
|
||||
color: #f5f5f5;
|
||||
}
|
||||
.el-icon-close {
|
||||
font-size: 28px;
|
||||
.no-redirect {
|
||||
color: #b7b7b7;
|
||||
}
|
||||
.el-icon-close:hover {
|
||||
color: #409EFF;
|
||||
.home-link {
|
||||
color: #f5f5f5;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&[data-theme=dark] {
|
||||
.redirect{
|
||||
color: #f5f5f5;
|
||||
}
|
||||
.no-redirect {
|
||||
color: #b7b7b7;
|
||||
}
|
||||
.home-link {
|
||||
color: #f5f5f5;
|
||||
}
|
||||
.el-dialog__body {
|
||||
padding: 0;
|
||||
word-break: normal;
|
||||
}
|
||||
|
||||
}
|
||||
.el-dialog__body {
|
||||
padding: 0;
|
||||
word-break: normal;
|
||||
}
|
||||
.content {
|
||||
background: #F3F3F3;
|
||||
border-top: unset!important;
|
||||
display: inline-flex;
|
||||
|
||||
.monaco-editor .minimap-shadow-visible {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
width: 6px;
|
||||
box-shadow: -2px 0px 5px #dddddd;
|
||||
}
|
||||
|
||||
.el-tabs__header {
|
||||
margin: 0 0 0;
|
||||
.el-tabs__item {
|
||||
height: 32px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.editor_main_storey {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
background: linear-gradient(rgba(221,221,221,1), rgba(255, 255, 255, 0));
|
||||
}
|
||||
|
||||
.el-tabs__nav-wrap {
|
||||
//margin-left: -1px;
|
||||
}
|
||||
|
||||
.el-tabs--card>.el-tabs__header .el-tabs__nav {
|
||||
border-radius: 0 0 0 0;
|
||||
}
|
||||
|
||||
.el-tabs__nav-next, .el-tabs__nav-prev {
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.file-contents{
|
||||
|
||||
left: 0;
|
||||
position: absolute;
|
||||
|
||||
.content-tree{
|
||||
background-color: #F3F3F3;
|
||||
//box-shadow: inset #ececec -7px 0px;
|
||||
|
||||
.svg-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
#dir-tree {
|
||||
|
||||
$fancytreeTitleHoverColor: #E9E9E9;
|
||||
$fancytreeTitleActiveColor: #b6d8fb;
|
||||
|
||||
overflow-x: hidden;
|
||||
@include scrollBarLightStyle;
|
||||
|
||||
ul.fancytree-container{
|
||||
padding: 3px 0 0 0;
|
||||
background-color: #F3F3F3;
|
||||
}
|
||||
|
||||
span.fancytree-title {
|
||||
padding: 2.5px 3px 0 3px;
|
||||
}
|
||||
|
||||
.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{
|
||||
background-color: $fancytreeTitleActiveColor;
|
||||
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{
|
||||
background-color: $fancytreeTitleHoverColor;
|
||||
border-color: $fancytreeTitleHoverColor;
|
||||
}
|
||||
|
||||
.fancytree-plain.fancytree-container.fancytree-treefocus span.fancytree-active span.fancytree-title{
|
||||
background-color: $fancytreeTitleActiveColor;
|
||||
border-color: $fancytreeTitleActiveColor;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.dir-tools {
|
||||
background: #ececec;
|
||||
.el-button--small {
|
||||
padding: 9px 10px;
|
||||
}
|
||||
.el-button-group {
|
||||
display: unset;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.editor-resize {
|
||||
width: 2px;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
cursor: col-resize;
|
||||
background-color: #ffffff;
|
||||
.darg-resize-conter {
|
||||
width: 2px;
|
||||
}
|
||||
.editor-resize-conter{
|
||||
height: 50px;
|
||||
width: 14px;
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
// top: 48%;
|
||||
background: #e2e2e2;
|
||||
border-top-right-radius: 15px;
|
||||
border-bottom-right-radius: 15px;
|
||||
border: 1px solid #ececec;
|
||||
border-left: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.editor-resize-conter:after {
|
||||
content: " ";
|
||||
display: inline-block;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -5px;
|
||||
left: 3px;
|
||||
z-index: 999;
|
||||
border-width: 2px 2px 0 0;
|
||||
border-color: #9a9a9a;
|
||||
border-style: solid;
|
||||
-webkit-transform: matrix(-0.71, 0.71, 0.71, 0.71, 0, 0);
|
||||
transform: matrix(-0.71, 0.71, 0.71, 0.71, 0, 0);
|
||||
}
|
||||
|
||||
&[icon-style=hide] {
|
||||
.editor-resize-conter:after {
|
||||
left: -2px;
|
||||
-webkit-transform: matrix(0.71, -0.71, -0.71, -0.71, 0, 0);
|
||||
transform: matrix(0.71, -0.71, -0.71, -0.71, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&[data-theme=dark] {
|
||||
|
||||
background: #202020;
|
||||
.content {
|
||||
background: #F3F3F3;
|
||||
border-top: unset!important;
|
||||
display: inline-flex;
|
||||
|
||||
.monaco-editor .minimap-shadow-visible {
|
||||
box-shadow: -2px 0px 5px #000000;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
width: 6px;
|
||||
box-shadow: -2px 0px 5px #dddddd;
|
||||
}
|
||||
|
||||
.editor-resize {
|
||||
background-color: #181818;
|
||||
.editor-resize-conter{
|
||||
background: #292929;
|
||||
border: 1px solid #3e3e3e;
|
||||
border-left: 1px solid #292929;
|
||||
}
|
||||
.editor-resize-conter:after {
|
||||
border-color: #b2b2b2;
|
||||
.el-tabs__header {
|
||||
margin: 0 0 0;
|
||||
.el-tabs__item {
|
||||
height: 32px;
|
||||
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 #202021;
|
||||
color: #aaaaaa;
|
||||
background-color: #292929;
|
||||
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: #181818;
|
||||
background-color: #181818;
|
||||
color: #fefefe;
|
||||
border-bottom-color: #ffffff;
|
||||
background-color: #ffffff;
|
||||
color: #2F302F;
|
||||
}
|
||||
}
|
||||
|
||||
.editor_main_storey {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
background: linear-gradient(rgba(221,221,221,1), rgba(255, 255, 255, 0));
|
||||
}
|
||||
|
||||
.el-tabs__nav-wrap {
|
||||
//margin-left: -1px;
|
||||
}
|
||||
|
||||
.el-tabs--card>.el-tabs__header .el-tabs__nav {
|
||||
border-radius: 0 0 0 0;
|
||||
}
|
||||
|
||||
.el-tabs__nav-next, .el-tabs__nav-prev {
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.file-contents{
|
||||
|
||||
background: #3e3e3e;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
|
||||
.dir-tools {
|
||||
background: #3e3e3e;
|
||||
}
|
||||
.content-tree{
|
||||
background-color: #F3F3F3;
|
||||
//box-shadow: inset #ececec -7px 0px;
|
||||
|
||||
.content-tree {
|
||||
background: #202021;
|
||||
//box-shadow: inset #2d2d2d -7px 0px;
|
||||
.svg-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
#dir-tree {
|
||||
@include scrollBarDarkStyle;
|
||||
span.fancytree-title {
|
||||
color: #dedede;
|
||||
}
|
||||
ul.fancytree-container {
|
||||
background: #202021;
|
||||
|
||||
$fancytreeTitleHoverColor: #E9E9E9;
|
||||
$fancytreeTitleActiveColor: #b6d8fb;
|
||||
|
||||
overflow-x: hidden;
|
||||
@include scrollBarLightStyle;
|
||||
|
||||
ul.fancytree-container{
|
||||
padding: 3px 0 0 0;
|
||||
background-color: #F3F3F3;
|
||||
}
|
||||
|
||||
$fancytreeTitleHoverColor: #242A2B;
|
||||
$fancytreeTitleActiveColor: #004471;
|
||||
span.fancytree-title {
|
||||
padding: 2.5px 3px 0 3px;
|
||||
}
|
||||
|
||||
.fancytree-active {
|
||||
background-color: $fancytreeTitleActiveColor;
|
||||
@ -1481,7 +1321,7 @@
|
||||
.fancytree-plain span.fancytree-active span.fancytree-title{
|
||||
background-color: $fancytreeTitleActiveColor;
|
||||
border-color: $fancytreeTitleActiveColor;
|
||||
color: #FFFFFF;
|
||||
color: #000000;
|
||||
}
|
||||
.fancytree-plain span.fancytree-active:hover span.fancytree-title{
|
||||
background-color: $fancytreeTitleActiveColor!important;
|
||||
@ -1498,42 +1338,203 @@
|
||||
border-color: $fancytreeTitleActiveColor;
|
||||
}
|
||||
|
||||
.fancytree-edit-input {
|
||||
background-color: #202021;
|
||||
border: unset;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.editor_main_storey {
|
||||
background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0));
|
||||
|
||||
.dir-tools {
|
||||
background: #ececec;
|
||||
.el-button--small {
|
||||
padding: 9px 10px;
|
||||
}
|
||||
.el-button-group {
|
||||
display: unset;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.monaco-editor, .monaco-editor-background, .monaco-editor .inputarea.ime-input {
|
||||
background-color: #181818;
|
||||
.editor-resize {
|
||||
width: 2px;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
cursor: col-resize;
|
||||
background-color: #ffffff;
|
||||
.darg-resize-conter {
|
||||
width: 2px;
|
||||
}
|
||||
.editor-resize-conter{
|
||||
height: 50px;
|
||||
width: 14px;
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
// top: 48%;
|
||||
background: #e2e2e2;
|
||||
border-top-right-radius: 15px;
|
||||
border-bottom-right-radius: 15px;
|
||||
border: 1px solid #ececec;
|
||||
border-left: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.editor-resize-conter:after {
|
||||
content: " ";
|
||||
display: inline-block;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -5px;
|
||||
left: 3px;
|
||||
z-index: 999;
|
||||
border-width: 2px 2px 0 0;
|
||||
border-color: #9a9a9a;
|
||||
border-style: solid;
|
||||
-webkit-transform: matrix(-0.71, 0.71, 0.71, 0.71, 0, 0);
|
||||
transform: matrix(-0.71, 0.71, 0.71, 0.71, 0, 0);
|
||||
}
|
||||
|
||||
&[icon-style=hide] {
|
||||
.editor-resize-conter:after {
|
||||
left: -2px;
|
||||
-webkit-transform: matrix(0.71, -0.71, -0.71, -0.71, 0, 0);
|
||||
transform: matrix(0.71, -0.71, -0.71, -0.71, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.monaco-editor{
|
||||
.margin {
|
||||
&[data-theme=dark] {
|
||||
|
||||
background: #202020;
|
||||
|
||||
.monaco-editor .minimap-shadow-visible {
|
||||
box-shadow: -2px 0px 5px #000000;
|
||||
}
|
||||
|
||||
.editor-resize {
|
||||
background-color: #181818;
|
||||
.editor-resize-conter{
|
||||
background: #292929;
|
||||
border: 1px solid #3e3e3e;
|
||||
border-left: 1px solid #292929;
|
||||
}
|
||||
.editor-resize-conter:after {
|
||||
border-color: #b2b2b2;
|
||||
}
|
||||
}
|
||||
|
||||
.el-tabs--card>.el-tabs__header {
|
||||
border-bottom: unset;
|
||||
.el-tabs__nav {
|
||||
border: unset;
|
||||
}
|
||||
.el-tabs__item {
|
||||
border-left: 1px solid #202021;
|
||||
color: #aaaaaa;
|
||||
background-color: #292929;
|
||||
}
|
||||
.el-tabs__item:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
.el-tabs__item.is-active {
|
||||
border-bottom-color: #181818;
|
||||
background-color: #181818;
|
||||
color: #fefefe;
|
||||
}
|
||||
}
|
||||
|
||||
.file-contents{
|
||||
|
||||
background: #3e3e3e;
|
||||
|
||||
.dir-tools {
|
||||
background: #3e3e3e;
|
||||
}
|
||||
|
||||
.content-tree {
|
||||
background: #202021;
|
||||
//box-shadow: inset #2d2d2d -7px 0px;
|
||||
#dir-tree {
|
||||
@include scrollBarDarkStyle;
|
||||
span.fancytree-title {
|
||||
color: #dedede;
|
||||
}
|
||||
ul.fancytree-container {
|
||||
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{
|
||||
background-color: $fancytreeTitleActiveColor;
|
||||
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{
|
||||
background-color: $fancytreeTitleHoverColor;
|
||||
border-color: $fancytreeTitleHoverColor;
|
||||
}
|
||||
|
||||
.fancytree-plain.fancytree-container.fancytree-treefocus span.fancytree-active span.fancytree-title{
|
||||
background-color: $fancytreeTitleActiveColor;
|
||||
border-color: $fancytreeTitleActiveColor;
|
||||
}
|
||||
|
||||
.fancytree-edit-input {
|
||||
background-color: #202021;
|
||||
border: unset;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.editor_main_storey {
|
||||
background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0));
|
||||
}
|
||||
|
||||
.monaco-editor, .monaco-editor-background, .monaco-editor .inputarea.ime-input {
|
||||
background-color: #181818;
|
||||
}
|
||||
}
|
||||
|
||||
.monaco-editor{
|
||||
.margin {
|
||||
background-color: #181818;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.nwse-resize {
|
||||
z-index: 99999;
|
||||
position: fixed;
|
||||
width: 15px;
|
||||
background: #00000000;
|
||||
height: 15px;
|
||||
margin-top: -15px;
|
||||
float: right;
|
||||
cursor: nwse-resize;
|
||||
}
|
||||
.el-button--small.is-circle {
|
||||
padding: 9px 9px;
|
||||
}
|
||||
}
|
||||
.nwse-resize {
|
||||
z-index: 99999;
|
||||
position: fixed;
|
||||
width: 15px;
|
||||
background: #00000000;
|
||||
height: 15px;
|
||||
margin-top: -15px;
|
||||
float: right;
|
||||
cursor: nwse-resize;
|
||||
}
|
||||
.el-button--small.is-circle {
|
||||
padding: 9px 9px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1542,7 +1543,6 @@
|
||||
width: 420px;
|
||||
height: 200px;
|
||||
top: calc(50% - 100px);
|
||||
left: calc(50% - 210px);
|
||||
.el-dialog {
|
||||
.el-dialog__header {
|
||||
padding: 15px 20px 15px;
|
||||
|
||||
@ -5,7 +5,7 @@ export const suffix = {
|
||||
'vue','asp','jsp','TXT',
|
||||
'xml','xsl','iml','m','bas','prg','cmd',
|
||||
'sass','sas','php','lst','key','pem','log',
|
||||
'cmake','db','gradle','bat','','conf','dart','plist'
|
||||
'cmake','db','gradle','bat','conf','dart','plist'
|
||||
],
|
||||
compressedFile: [
|
||||
'zip','tar','jar','tar.gz','tgz','tar.bz2'
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user