Compare commits
2 Commits
dev-luannv
...
fa68aa31e6
| Author | SHA1 | Date | |
|---|---|---|---|
| fa68aa31e6 | |||
| 2533d5bb7a |
@ -9,6 +9,8 @@
|
||||
@import "./common/card.scss";
|
||||
@import "./common/tabs.scss";
|
||||
@import "./common/numericInput.scss";
|
||||
@import "./common/editor.scss";
|
||||
|
||||
|
||||
html,
|
||||
body {
|
||||
@ -1166,14 +1168,14 @@ a {
|
||||
}
|
||||
}
|
||||
|
||||
.toastui-editor-contents {
|
||||
* {
|
||||
color: map-deep-get($config,
|
||||
#{$theme},
|
||||
"tui-editor-contents-color"
|
||||
) !important;
|
||||
}
|
||||
}
|
||||
// .toastui-editor-contents {
|
||||
// * {
|
||||
// color: map-deep-get($config,
|
||||
// #{$theme},
|
||||
// "tui-editor-contents-color"
|
||||
// ) !important;
|
||||
// }
|
||||
// }
|
||||
|
||||
.lnb-logo {
|
||||
color: map-deep-get($config, #{$theme}, "v-dialog-card-text-color");
|
||||
|
||||
474
assets/scss/common/editor.scss
Normal file
474
assets/scss/common/editor.scss
Normal file
@ -0,0 +1,474 @@
|
||||
@charset "utf-8";
|
||||
.toastui-editor-dark .toastui-editor-defaultUI {
|
||||
border-color: #424242;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-md-container,
|
||||
.toastui-editor-dark .toastui-editor-ww-container {
|
||||
background-color: #212224;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-defaultUI-toolbar {
|
||||
background-color: #212224;
|
||||
border-bottom-color: #303238;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-toolbar-icons {
|
||||
background-position-y: -49px;
|
||||
border-color: #232428;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-toolbar-icons:not(:disabled):hover {
|
||||
background-color: #36383f;
|
||||
border-color: #36383f;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-toolbar-divider {
|
||||
background-color: #303238;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-tooltip {
|
||||
background-color: #535662;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-tooltip .arrow {
|
||||
background-color: #535662;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-defaultUI-toolbar .scroll-sync::before {
|
||||
color: #8f939f;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-defaultUI-toolbar .scroll-sync.active::before {
|
||||
color: #67ccff;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-defaultUI-toolbar .switch {
|
||||
background-color: #2b4455;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-defaultUI-toolbar input:checked + .switch {
|
||||
background-color: #2b4455;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-defaultUI-toolbar .switch::before {
|
||||
background-color: #8f939f;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-defaultUI-toolbar input:checked + .switch::before {
|
||||
background-color: #67ccff;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-main .toastui-editor-md-splitter {
|
||||
background-color: #303238;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-mode-switch {
|
||||
border-top-color: #424242;
|
||||
background-color: #212224;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-mode-switch .tab-item {
|
||||
border-color: #424242;
|
||||
background-color: #212224;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-mode-switch .tab-item.active {
|
||||
border-top-color: #424242;
|
||||
background-color: #212224;
|
||||
color: #1677FF;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-popup,
|
||||
.toastui-editor-dark .toastui-editor-context-menu {
|
||||
background-color: #121212;
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
|
||||
border-color: #494c56;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-popup-add-heading ul li:hover {
|
||||
background-color: #36383f;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-popup-body label {
|
||||
color: #9a9da3;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-popup-body input[type='text'] {
|
||||
background-color: transparent;
|
||||
color: #eee;
|
||||
border-color: #303238;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-popup-body input[type='text']:focus {
|
||||
outline-color: #67ccff;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-popup-body input[type='text'].disabled {
|
||||
color: #969aa5;
|
||||
border-color: #303238;
|
||||
background-color: rgba(48, 50, 56, 0.4);
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-popup-add-image .toastui-editor-tabs .tab-item {
|
||||
border-bottom-color: #292e37;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-popup-add-image .toastui-editor-tabs .tab-item:hover {
|
||||
border-bottom-color: #3c424d;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-popup-add-image .toastui-editor-tabs .tab-item.active {
|
||||
color: #67ccff;
|
||||
border-bottom-color: #67ccff;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-popup-body .toastui-editor-file-name {
|
||||
border-color: #303238;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-popup-body .toastui-editor-file-select-button {
|
||||
border-color: #303238;
|
||||
background-color: #232428;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-popup-body .toastui-editor-file-select-button:hover {
|
||||
border-color: #494c56;
|
||||
}
|
||||
|
||||
.toastui-editor-dark.toastui-editor-defaultUI .toastui-editor-close-button {
|
||||
color: #eee;
|
||||
border-color: #303238;
|
||||
background-color: #232428;
|
||||
}
|
||||
|
||||
.toastui-editor-dark.toastui-editor-defaultUI .toastui-editor-close-button:hover {
|
||||
border-color: #494c56;
|
||||
}
|
||||
|
||||
.toastui-editor-dark.toastui-editor-defaultUI .toastui-editor-ok-button {
|
||||
color: #121212;
|
||||
background-color: #67ccff;
|
||||
}
|
||||
|
||||
.toastui-editor-dark.toastui-editor-defaultUI .toastui-editor-ok-button:hover {
|
||||
color: #121212;
|
||||
background-color: #32baff;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-popup-add-table .toastui-editor-table-cell {
|
||||
border-color: #303238;
|
||||
background-color: #121212;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-popup-add-table .toastui-editor-table-cell.header {
|
||||
border-color: #303238;
|
||||
background-color: #232428;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-popup-add-table .toastui-editor-table-selection-layer {
|
||||
border-color: rgba(103, 204, 255, 0.4);
|
||||
background-color: rgba(103, 204, 255, 0.1);
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-popup-add-table .toastui-editor-table-description {
|
||||
color: #eee
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-md-tab-container {
|
||||
background-color: #232428;
|
||||
border-bottom-color: #303238;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-md-tab-container .tab-item {
|
||||
border-color: #393b42;
|
||||
background-color: #2d2f34;
|
||||
color: #757a86;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-md-tab-container .tab-item.active {
|
||||
border-bottom-color: #121212;
|
||||
background-color: #121212;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
|
||||
.toastui-editor-dark .toastui-editor-context-menu .menu-group {
|
||||
border-bottom-color: #303238;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-context-menu .menu-item span::before {
|
||||
background-position-y: -126px;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-context-menu li:not(.disabled):hover {
|
||||
background-color: #36383f;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-context-menu li.disabled {
|
||||
color: #969aa5;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-dropdown-toolbar {
|
||||
border-color: #494c56;
|
||||
background-color: #232428;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .ProseMirror,
|
||||
.toastui-editor-dark .toastui-editor-contents p,
|
||||
.toastui-editor-dark .toastui-editor-contents h1,
|
||||
.toastui-editor-dark .toastui-editor-contents h2,
|
||||
.toastui-editor-dark .toastui-editor-contents h3,
|
||||
.toastui-editor-dark .toastui-editor-contents h4,
|
||||
.toastui-editor-dark .toastui-editor-contents h5,
|
||||
.toastui-editor-dark .toastui-editor-contents h6 {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-contents h1,
|
||||
.toastui-editor-dark .toastui-editor-contents h2 {
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-contents del {
|
||||
color: #777980;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-contents blockquote {
|
||||
border-color: #303135;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-contents blockquote p,
|
||||
.toastui-editor-dark .toastui-editor-contents blockquote ul,
|
||||
.toastui-editor-dark .toastui-editor-contents blockquote ol {
|
||||
color: #777980;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-contents pre {
|
||||
background-color: #232428;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-contents pre code {
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-contents code {
|
||||
color: #c1798b;
|
||||
background-color: #35262a;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-contents div {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-ww-code-block-language {
|
||||
border-color: #303238;
|
||||
background-color: #121212;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-ww-code-block-language input {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-contents .toastui-editor-ww-code-block:after {
|
||||
background-color: #232428;
|
||||
border: 1px solid #393b42;
|
||||
color: #eee;
|
||||
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjIuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuugiOydtOyWtF8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiCgkgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzAgMzAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMwIDMwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO2ZpbGw6I2ZmZjt9Cjwvc3R5bGU+CjxnPgoJPGc+CgkJPGc+CgkJCTxnPgoJCQkJPGc+CgkJCQkJPHBhdGggY2xhc3M9InN0MCIgZD0iTTE1LjUsMTIuNWwyLDJMMTIsMjBoLTJ2LTJMMTUuNSwxMi41eiBNMTgsMTBsMiwybC0xLjUsMS41bC0yLTJMMTgsMTB6Ii8+CgkJCQk8L2c+CgkJCTwvZz4KCQk8L2c+Cgk8L2c+CjwvZz4KPC9zdmc+Cg==');
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-contents .toastui-editor-custom-block-editor {
|
||||
background: #392d31;
|
||||
color: #fff;
|
||||
border-color: #327491;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-custom-block.ProseMirror-selectednode .toastui-editor-custom-block-view {
|
||||
color: #fff;
|
||||
border-color: #327491;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-custom-block-view button {
|
||||
background-color: #232428;
|
||||
border-color: #393b42;
|
||||
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjIuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuugiOydtOyWtF8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiCgkgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzAgMzAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMwIDMwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO2ZpbGw6I2ZmZjt9Cjwvc3R5bGU+CjxnPgoJPGc+CgkJPGc+CgkJCTxnPgoJCQkJPGc+CgkJCQkJPHBhdGggY2xhc3M9InN0MCIgZD0iTTE1LjUsMTIuNWwyLDJMMTIsMjBoLTJ2LTJMMTUuNSwxMi41eiBNMTgsMTBsMiwybC0xLjUsMS41bC0yLTJMMTgsMTB6Ii8+CgkJCQk8L2c+CgkJCTwvZz4KCQk8L2c+Cgk8L2c+CjwvZz4KPC9zdmc+Cg==');
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-custom-block-view button:hover {
|
||||
background-color: #232428;
|
||||
border-color: #595c68;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-custom-block-view .info {
|
||||
color: #65acca;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-contents table {
|
||||
border-color: #303238;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-contents table th,
|
||||
.toastui-editor-dark .toastui-editor-contents table td {
|
||||
border-color: #303238;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-contents table th {
|
||||
background-color: #3a3c42;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-contents table td,
|
||||
.toastui-editor-dark .toastui-editor-contents table td p {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-contents td.toastui-editor-cell-selected {
|
||||
background-color: rgba(103, 204, 255, 0.5);
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-contents th.toastui-editor-cell-selected {
|
||||
background-color: rgba(103, 204, 255, 0.3);
|
||||
}
|
||||
|
||||
.toastui-editor-dark table.ProseMirror-selectednode {
|
||||
outline-color: #67ccff;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .html-block.ProseMirror-selectednode {
|
||||
outline-color: #67ccff;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-contents ul,
|
||||
.toastui-editor-dark .toastui-editor-contents menu,
|
||||
.toastui-editor-dark .toastui-editor-contents ol,
|
||||
.toastui-editor-dark .toastui-editor-contents dir {
|
||||
color: #55575f;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-contents ul > li::before {
|
||||
background-color: #55575f;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-contents hr {
|
||||
border-color: #55575f;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-contents a {
|
||||
color: #4b96e6;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-contents a:hover {
|
||||
color: #1f70de;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-contents .image-link:hover::before {
|
||||
border-color: #393b42;
|
||||
background-color: #232428;
|
||||
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIj4KICAgICAgICA8ZyBzdHJva2U9IiNFRUUiIHN0cm9rZS13aWR0aD0iMS41Ij4KICAgICAgICAgICAgPGc+CiAgICAgICAgICAgICAgICA8Zz4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNy42NjUgMTUuMDdsLTEuODE5LS4wMDJjLTEuNDg2IDAtMi42OTItMS4yMjgtMi42OTItMi43NDR2LS4xOTJjMC0xLjUxNSAxLjIwNi0yLjc0NCAyLjY5Mi0yLjc0NGgzLjg0NmMxLjQ4NyAwIDIuNjkyIDEuMjI5IDIuNjkyIDIuNzQ0di4xOTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMDQ1IC0xNzQzKSB0cmFuc2xhdGUoMTA0MCAxNzM4KSB0cmFuc2xhdGUoNSA1KSBzY2FsZSgxIC0xKSByb3RhdGUoNDUgMzcuMjkzIDApIi8+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTEyLjMyNiA0LjkzNGwxLjgyMi4wMDJjMS40ODcgMCAyLjY5MyAxLjIyOCAyLjY5MyAyLjc0NHYuMTkyYzAgMS41MTUtMS4yMDYgMi43NDQtMi42OTMgMi43NDRoLTMuODQ1Yy0xLjQ4NyAwLTIuNjkyLTEuMjI5LTIuNjkyLTIuNzQ0VjcuNjgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMDQ1IC0xNzQzKSB0cmFuc2xhdGUoMTA0MCAxNzM4KSB0cmFuc2xhdGUoNSA1KSBzY2FsZSgxIC0xKSByb3RhdGUoNDUgMzAuOTk2IDApIi8+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo=');
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-contents .task-list-item::before {
|
||||
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4Ij4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgc3Ryb2tlPSIjNTU1NzVGIj4KICAgICAgICAgICAgPGc+CiAgICAgICAgICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTAzMCAtMzE2KSB0cmFuc2xhdGUoNzg4IDE5MikgdHJhbnNsYXRlKDI0MiAxMjQpIj4KICAgICAgICAgICAgICAgICAgICA8cmVjdCB3aWR0aD0iMTciIGhlaWdodD0iMTciIHg9Ii41IiB5PSIuNSIgcng9IjIiLz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==');
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-contents .task-list-item.checked::before {
|
||||
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4Ij4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgZmlsbD0iIzRCOTZFNiI+CiAgICAgICAgICAgIDxnPgogICAgICAgICAgICAgICAgPGc+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTE2IDBjMS4xMDUgMCAyIC44OTUgMiAydjE0YzAgMS4xMDUtLjg5NSAyLTIgMkgyYy0xLjEwNSAwLTItLjg5NS0yLTJWMkMwIC44OTUuODk1IDAgMiAwaDE0em0tMS43OTMgNS4yOTNjLS4zOS0uMzktMS4wMjQtLjM5LTEuNDE0IDBMNy41IDEwLjU4NSA1LjIwNyA4LjI5M2wtLjA5NC0uMDgzYy0uMzkyLS4zMDUtLjk2LS4yNzgtMS4zMi4wODMtLjM5LjM5LS4zOSAxLjAyNCAwIDEuNDE0bDMgMyAuMDk0LjA4M2MuMzkyLjMwNS45Ni4yNzggMS4zMi0uMDgzbDYtNiAuMDgzLS4wOTRjLjMwNS0uMzkyLjI3OC0uOTYtLjA4My0xLjMyeiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEwNTAgLTI5NikgdHJhbnNsYXRlKDc4OCAxOTIpIHRyYW5zbGF0ZSgyNjIgMTA0KSIvPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K');
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-md-delimiter,
|
||||
.toastui-editor-dark .toastui-editor-md-code.toastui-editor-md-delimiter,
|
||||
.toastui-editor-dark .toastui-editor-md-thematic-break,
|
||||
.toastui-editor-dark .toastui-editor-md-link,
|
||||
.toastui-editor-dark .toastui-editor-md-table,
|
||||
.toastui-editor-dark .toastui-editor-md-block-quote {
|
||||
color: #55575f;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-md-meta,
|
||||
.toastui-editor-dark .toastui-editor-md-html {
|
||||
color: #55575f;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-md-link.toastui-editor-md-link-url.toastui-editor-md-marked-text {
|
||||
color: #777980;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-md-block-quote .toastui-editor-md-marked-text,
|
||||
.toastui-editor-dark .toastui-editor-md-list-item .toastui-editor-md-meta {
|
||||
color: #b3b5bc;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-md-link.toastui-editor-md-link-desc.toastui-editor-md-marked-text,
|
||||
.toastui-editor-dark .toastui-editor-md-list-item-style.toastui-editor-md-list-item-odd {
|
||||
color: #4b96e6;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-md-list-item-style.toastui-editor-md-list-item-even {
|
||||
color: #ef6767;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-md-table .toastui-editor-md-table-cell {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-md-code.toastui-editor-md-marked-text {
|
||||
color: #c1798b;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-md-code {
|
||||
background-color: #35262a;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-md-code-block-line-background {
|
||||
background-color: #232428;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-md-code-block .toastui-editor-md-meta {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-md-custom-block {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-md-custom-block-line-background {
|
||||
background-color: #392d31;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-md-custom-block .toastui-editor-md-delimiter {
|
||||
color: #327491;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-md-custom-block .toastui-editor-md-meta {
|
||||
color: #65acca;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-contents .toastui-editor-md-preview-highlight::after {
|
||||
background-color: rgba(255, 250, 193, 0.5);
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-contents th.toastui-editor-md-preview-highlight,
|
||||
.toastui-editor-dark .toastui-editor-contents td.toastui-editor-md-preview-highlight {
|
||||
background-color: rgba(255, 250, 193, 0.5);
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-contents th.toastui-editor-md-preview-highlight {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-contents th.toastui-editor-md-preview-highlight,
|
||||
.toastui-editor-dark .toastui-editor-contents td.toastui-editor-md-preview-highlight {
|
||||
background-color: rgba(255, 250, 193, 0.25);
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-contents .toastui-editor-md-preview-highlight::after {
|
||||
background-color: rgba(255, 250, 193, 0.25);
|
||||
}
|
||||
@ -272,9 +272,7 @@ export default {
|
||||
this.handleSelectedRow(evt);
|
||||
},
|
||||
focusChangeEvt(e) {
|
||||
if(e.rowKey === 0) {
|
||||
this.handleSelectedRow(e);
|
||||
}
|
||||
this.handleSelectedRow(e);
|
||||
},
|
||||
handleSelectedRow(e) {
|
||||
// console.log('focusChangeEvt1...')
|
||||
|
||||
@ -32,15 +32,18 @@
|
||||
</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="12" lg="9">
|
||||
<v-col cols="12" lg="9" class="pl-0">
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
<span class="custom-title-4">역할 메뉴별 권한</span>
|
||||
</v-card-title>
|
||||
<v-row align="center" no-gutters :style="{ height: 'calc(100% - 62px)' }" class="px-5">
|
||||
<v-col class="h100" style="max-width: 400px;">
|
||||
<span class="body-1 font-weight-bold d-flex align-center"
|
||||
:style="{ minHeight: '36px' }">[미배정]메뉴리스트</span>
|
||||
<v-card-title class="pl-0 pb-3">
|
||||
<span class="custom-title-4">[미배정]메뉴리스트</span>
|
||||
</v-card-title>
|
||||
<!-- <span class="body-1 font-weight-bold d-flex align-center"
|
||||
:style="{ minHeight: '36px' }">[미배정]메뉴리스트</span> -->
|
||||
<div ref="treeGridParent" class="px-0 mt-2" style="height: 60vh;">
|
||||
<!-- <div
|
||||
ref="treeGridParent"
|
||||
@ -55,15 +58,18 @@
|
||||
<ActionButtons :parentPrgmId="myPrgmId" :leftGridName="gridName2" :rightGridName="gridName3"
|
||||
:btnActionsFnc="dualGridBtnActions" />
|
||||
</v-col> -->
|
||||
<div class="pr-2">
|
||||
<div class="pr-2 arrow-button">
|
||||
<ActionButtons :parentPrgmId="myPrgmId" :leftGridName="gridName2" :rightGridName="gridName3"
|
||||
:btnActionsFnc="dualGridBtnActions" />
|
||||
:btnActionsFnc="dualGridBtnActions"/>
|
||||
</div>
|
||||
<v-col :cols="7" class="h100">
|
||||
<v-row justify="space-between" align="center" no-gutters class="px-5">
|
||||
<v-row justify="space-between" align="center" no-gutters class="px-5 pl-0">
|
||||
<v-col :cols="11">
|
||||
<span class="body-1 font-weight-bold d-flex align-center"
|
||||
:style="{ minHeight: '36px' }">[배정]메뉴별권한 리스트</span>
|
||||
<v-card-title class="pl-0 pb-3">
|
||||
<span class="custom-title-4">[배정]메뉴별권한 리스트</span>
|
||||
</v-card-title>
|
||||
<!-- <span class="body-1 font-weight-bold d-flex align-center"
|
||||
:style="{ minHeight: '36px' }">[배정]메뉴별권한 리스트</span> -->
|
||||
<!-- <span class="body-1 font-weight-bold">[배정]메뉴별권한 리스트</span> -->
|
||||
</v-col>
|
||||
<v-col :cols="1" class="text-right">
|
||||
@ -344,8 +350,8 @@ export default {
|
||||
const _this = this;
|
||||
|
||||
const myColumns = [
|
||||
{ header: '역할ID', name: 'roleId', align: 'left', minWidth: 70,width:120 },
|
||||
{ header: '역할명', name: 'roleNm', minWidth: 70, align: 'left',width:120 },
|
||||
{ header: '역할ID', name: 'roleId', align: 'left', minWidth: 70, width: 120 },
|
||||
{ header: '역할명', name: 'roleNm', minWidth: 70, align: 'left', width: 120 },
|
||||
{
|
||||
header: '사용여부',
|
||||
name: 'useFg',
|
||||
@ -805,4 +811,23 @@ function numberFormatter({ value }) {
|
||||
return value;
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep {
|
||||
.arrow-button button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.arrow-button svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -46,19 +46,21 @@
|
||||
icon="delete">삭제</a-button>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col :cols="12" class="mt-5">
|
||||
<v-col :cols="12" class="mt-5 pb-4">
|
||||
<v-card-title class="custom-title-6 pa-0">{{ viewActionData.title }}</v-card-title>
|
||||
</v-col>
|
||||
<v-col :cols="12" style="min-height: 30vh;" class="pa-0">
|
||||
<viewer v-if="viewActionData.viewerFlag" ref="tuiViewer" height="inherit"
|
||||
:initialValue="viewActionData.content" theme="white"
|
||||
:class="[isDarkMode ? 'theme--white' : 'theme--black', 'custom-view pa-3']" />
|
||||
<v-col :cols="12" style="min-height: 30vh;" class="pa-0 custom-view">
|
||||
<v-card class="pa-3" style="overflow-y:auto;">
|
||||
<viewer v-if="viewActionData.viewerFlag" ref="tuiViewer" height="inherit"
|
||||
:initialValue="viewActionData.content" theme="white"
|
||||
:class="[isDarkMode ? 'theme--white' : 'theme--black']" />
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col :cols="6" class="mt-5">
|
||||
<v-card-title class="custom-title-7 pa-0">
|
||||
파일목록
|
||||
</v-card-title>
|
||||
<div v-for="fileData in viewActionData.fileData" :key="fileData.apndFileId" class="file-item">
|
||||
<div v-for="fileData in viewActionData.fileData" :key="fileData.apndFileId" class="file-item" style="background-color: unset;">
|
||||
<a @click.prevent="downloadFile(fileData)">
|
||||
<div class="d-flex justify-start search-box-label">
|
||||
<v-icon>mdi-paperclip</v-icon>
|
||||
@ -86,7 +88,8 @@
|
||||
</v-text-field>
|
||||
</v-col>
|
||||
<v-col :cols="12" style="min-height: calc(100vh - 450px);">
|
||||
<editor ref="tuiEditor" height="100%" initialEditType="wysiwyg" />
|
||||
<editor ref="tuiEditor" height="100%" initialEditType="wysiwyg"
|
||||
:class="[isDarkMode ? 'toastui-editor-dark' : 'toastui-editor-light']"/>
|
||||
</v-col>
|
||||
|
||||
<v-col :cols="6" class="mt-5">
|
||||
@ -132,7 +135,8 @@
|
||||
</v-text-field>
|
||||
</v-col>
|
||||
<v-col :cols="12" style="height: calc(100vh - 270px);" class="mt-2">
|
||||
<editor ref="tuiReplyEditor" height="100%" initialEditType="wysiwyg" />
|
||||
<editor ref="tuiReplyEditor" height="100%" initialEditType="wysiwyg"
|
||||
:class="[isDarkMode ? 'toastui-editor-dark' : 'toastui-editor-light']"/>
|
||||
</v-col>
|
||||
<v-col :cols="6" class="mt-5">
|
||||
<v-card-title class="custom-title-7 pa-0">파일첨부</v-card-title>
|
||||
@ -179,7 +183,8 @@
|
||||
</v-col>
|
||||
<v-col :cols="12" style="height: calc(90vh - 270px);" class="mt-4">
|
||||
<editor ref="tuiUpdateEditor" height="100%" initialEditType="wysiwyg"
|
||||
:initialValue="updateActionData.content" />
|
||||
:initialValue="updateActionData.content"
|
||||
:class="[isDarkMode ? 'toastui-editor-dark' : 'toastui-editor-light']"/>
|
||||
</v-col>
|
||||
<v-col :cols="6" class="mt-5">
|
||||
<v-card-title class="custom-title-7 pa-0">파일첨부</v-card-title>
|
||||
@ -187,13 +192,26 @@
|
||||
<div v-for="(fileData, index) in updateActionData.fileData" :key="fileData.apndFileId"
|
||||
class="file-item d-flex justify-space-between">
|
||||
<div class="file-item-detail">
|
||||
<v-icon>mdi-paperclip</v-icon>
|
||||
<v-icon style="font-size: 18px;">mdi-paperclip</v-icon>
|
||||
<span href="#" class="file-item-name">{{ fileData.name }}</span>
|
||||
</div>
|
||||
<a-icon type="delete" class="v-icon pointer"
|
||||
@click="updateActionData.fileData.splice(index, 1)" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="" v-if="updateActionData.currentFileList">
|
||||
<div v-for="(fileData, index) in updateActionData.currentFileList"
|
||||
:key="fileData.apndFileId" class="file-item d-flex justify-space-between">
|
||||
<div class="file-item-detail">
|
||||
<v-icon style="font-size: 18px;">mdi-paperclip</v-icon>
|
||||
<span @click.prevent="downloadFile(fileData)" href="#"
|
||||
class="file-item-name pointer">{{ fileData.apndFileNm + '.' +
|
||||
fileData.apndFileExt }}</span>
|
||||
</div>
|
||||
<a-icon type="delete" class="v-icon pointer"
|
||||
@click="addFileToDeleteFileList(fileData)" />
|
||||
</div>
|
||||
</div>
|
||||
<a-button class="mt-2" icon="upload" @click="$refs.updateInputFile.$refs.input.click()">
|
||||
업로드
|
||||
</a-button>
|
||||
@ -1044,7 +1062,7 @@ const defaultData = {
|
||||
.custom-view {
|
||||
border: 1px solid;
|
||||
border-radius: 6px;
|
||||
height: 100%;
|
||||
height: 0;
|
||||
|
||||
@each $theme in dark, light {
|
||||
@include theme($theme);
|
||||
@ -1062,8 +1080,13 @@ const defaultData = {
|
||||
color: #1677FF
|
||||
}
|
||||
|
||||
.toastui-editor-mode-switch .tab-item {
|
||||
.toastui-editor-light .toastui-editor-mode-switch .tab-item {
|
||||
color: #000000E0
|
||||
}
|
||||
|
||||
.v-icon.anticon-delete svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -103,21 +103,6 @@ export default {
|
||||
gridName: 'rowGrid',
|
||||
// rowGridOrigin: [],
|
||||
detailList: myDetail,
|
||||
|
||||
dataPathMock: {
|
||||
'rowGrid': {
|
||||
column: [
|
||||
{ header: '프로그램ID', name: 'field1', align: 'left' },
|
||||
{ header: '프로그램덤', name: 'field2', align: 'left' },
|
||||
{ header: '타임', name: 'field3', align: 'left' },
|
||||
{ header: '사용여부', name: 'field4', align: 'left' }
|
||||
],
|
||||
option: {
|
||||
scrollY: false,
|
||||
scrollX: false,
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -189,17 +174,17 @@ export default {
|
||||
const gridHeight = this.$refs.gridParent.offsetHeight - 36;
|
||||
|
||||
const myOptions = {
|
||||
scrollX: false,
|
||||
scrollY: true,
|
||||
};
|
||||
// console.log("this.pageData", this.pageData)
|
||||
const _this = this;
|
||||
const myColumns = [
|
||||
{ header: '프로그램ID', name: 'prgmId', align: 'center' },
|
||||
{ header: '프로그램명', name: 'prgmNm' },
|
||||
{ header: '프로그램ID', name: 'prgmId', align: 'left' },
|
||||
{ header: '프로그램명', name: 'prgmNm', align: 'left' },
|
||||
{
|
||||
header: '타입',
|
||||
name: 'prgmTpCd',
|
||||
align: 'center',
|
||||
align: 'left',
|
||||
formatter({ value }) {
|
||||
return value ? (value === '1' ? '프로그램' : '팝업') : null;
|
||||
},
|
||||
@ -207,7 +192,7 @@ export default {
|
||||
{
|
||||
header: '사용여부',
|
||||
name: 'useFg',
|
||||
align: 'center',
|
||||
align: 'left',
|
||||
formatter({ value }) {
|
||||
value = value === true ? '1' : '0';
|
||||
const newValue = _this.pageData.selectUseFgList.filter(
|
||||
|
||||
Reference in New Issue
Block a user