优化暗黑模式
This commit is contained in:
kuaifan
parent
0dc0e7226e
commit
22e718423e
@ -79,6 +79,7 @@
|
||||
</style>
|
||||
<script>
|
||||
import JSPDF from "jspdf";
|
||||
import {mapState} from "vuex";
|
||||
|
||||
export default {
|
||||
name: "Flow",
|
||||
@ -115,7 +116,7 @@
|
||||
break;
|
||||
}
|
||||
let route = this.readOnly ? 'viewer' : 'index';
|
||||
let theme = $A.dark.isDarkEnabled() ? 'dark' : 'light'
|
||||
let theme = this.themeIsDark ? 'dark' : 'light'
|
||||
this.url = $A.originUrl('js/grapheditor/' + route + '.html?lang=' + language + '&theme=' + theme);
|
||||
},
|
||||
mounted() {
|
||||
@ -144,6 +145,9 @@
|
||||
}, '*')
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['themeIsDark'])
|
||||
},
|
||||
methods: {
|
||||
formatZoom(val) {
|
||||
return val + '%';
|
||||
|
||||
@ -82,7 +82,7 @@ export default {
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['userToken', 'userInfo']),
|
||||
...mapState(['userToken', 'userInfo', 'themeIsDark']),
|
||||
|
||||
fileType() {
|
||||
return this.getType(this.value.type);
|
||||
@ -159,7 +159,7 @@ export default {
|
||||
"name": this.userInfo.nickname
|
||||
},
|
||||
"customization": {
|
||||
"uiTheme": $A.dark.isDarkEnabled() ? "theme-dark" : "theme-classic-light",
|
||||
"uiTheme": this.themeIsDark ? "theme-dark" : "theme-classic-light",
|
||||
},
|
||||
"callbackUrl": 'http://nginx/api/file/content/office?id=' + fileKey + '&token=' + this.userToken,
|
||||
}
|
||||
|
||||
@ -158,7 +158,7 @@
|
||||
$A(this.$refs.myTextarea).show();
|
||||
},
|
||||
computed: {
|
||||
...mapState(['userToken']),
|
||||
...mapState(['userToken', 'themeIsDark']),
|
||||
|
||||
headers() {
|
||||
return {
|
||||
@ -250,7 +250,7 @@
|
||||
resize: !isFull,
|
||||
convert_urls:false,
|
||||
toolbar_mode: 'sliding',
|
||||
content_css: $A.dark.isDarkEnabled() ? 'dark' : 'default',
|
||||
content_css: this.themeIsDark ? 'dark' : 'default',
|
||||
setup: (editor) => {
|
||||
editor.ui.registry.addMenuButton('uploadImages', {
|
||||
text: this.$L('图片'),
|
||||
|
||||
@ -218,6 +218,7 @@ import DrawerOverlay from "../components/DrawerOverlay";
|
||||
import DragBallComponent from "../components/DragBallComponent";
|
||||
import TaskAdd from "./manage/components/TaskAdd";
|
||||
import {Store} from "le5le-store";
|
||||
import state from "../store/state";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@ -481,6 +482,7 @@ export default {
|
||||
break;
|
||||
}
|
||||
this.$store.state.themeMode = mode;
|
||||
this.$store.state.themeIsDark = $A.dark.isDarkEnabled();
|
||||
$A.setStorage("cacheThemeMode", mode);
|
||||
},
|
||||
|
||||
|
||||
@ -3,6 +3,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from "vuex";
|
||||
|
||||
export default {
|
||||
name: "TaskPriority",
|
||||
props: {
|
||||
@ -22,10 +24,20 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['themeIsDark']),
|
||||
|
||||
myStyle() {
|
||||
const {color, background, backgroundColor} = this;
|
||||
const {color, background, backgroundColor, themeIsDark} = this;
|
||||
if (themeIsDark) {
|
||||
return {
|
||||
color: backgroundColor || background,
|
||||
borderColor: backgroundColor || background,
|
||||
backgroundColor: 'transparent',
|
||||
}
|
||||
}
|
||||
return {
|
||||
color: color,
|
||||
borderColor: backgroundColor || background,
|
||||
backgroundColor: backgroundColor || background,
|
||||
}
|
||||
}
|
||||
|
||||
1
resources/assets/js/store/state.js
vendored
1
resources/assets/js/store/state.js
vendored
@ -125,5 +125,6 @@ switch (state.themeMode) {
|
||||
$A.dark.autoDarkMode()
|
||||
break;
|
||||
}
|
||||
state.themeIsDark = $A.dark.isDarkEnabled();
|
||||
|
||||
export default state
|
||||
|
||||
55
resources/assets/sass/dark.scss
vendored
55
resources/assets/sass/dark.scss
vendored
@ -17,6 +17,11 @@ body.dark-mode-reverse {
|
||||
box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.ivu-message-notice-content {
|
||||
box-shadow: 0 1px 6px rgba(255, 255, 255, 0.2);
|
||||
border: 1px solid #e3e8ed;
|
||||
}
|
||||
|
||||
.ivu-tooltip-inner,
|
||||
.ivu-poptip-inner {
|
||||
border: 1px solid #e3e8ed;
|
||||
@ -83,6 +88,48 @@ body.dark-mode-reverse {
|
||||
}
|
||||
}
|
||||
}
|
||||
.project-column {
|
||||
> ul {
|
||||
> li {
|
||||
.column-task {
|
||||
.task-item {
|
||||
.task-progress {
|
||||
.task-time {
|
||||
&.overdue {
|
||||
color: #ed4014;
|
||||
background-color: transparent;
|
||||
}
|
||||
&.today {
|
||||
color: #ff9900;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.project-table {
|
||||
.project-table-body {
|
||||
.task-row {
|
||||
> div {
|
||||
&.row-time {
|
||||
.task-time {
|
||||
&.overdue {
|
||||
color: #ed4014;
|
||||
background-color: transparent;
|
||||
}
|
||||
&.today {
|
||||
color: #ff9900;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-wrapper {
|
||||
@ -109,6 +156,14 @@ body.dark-mode-reverse {
|
||||
}
|
||||
}
|
||||
|
||||
.page-login {
|
||||
.login-body {
|
||||
.login-box {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-manage {
|
||||
.manage-box-menu {
|
||||
.manage-box-dropdown {
|
||||
|
||||
@ -489,21 +489,26 @@
|
||||
flex-shrink: 0;
|
||||
color: #777777;
|
||||
background-color: #EAEDF2;
|
||||
padding: 1px 4px;
|
||||
border: 1px solid #EAEDF2;
|
||||
padding: 0 3px;
|
||||
margin-left: 18px;
|
||||
font-size: 12px;
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&.overdue,
|
||||
&.today {
|
||||
color: #ffffff;
|
||||
}
|
||||
&.overdue {
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
background-color: #ed4014;
|
||||
border-color: #ed4014;
|
||||
}
|
||||
&.today {
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
background-color: #ff9900;
|
||||
border-color: #ff9900;
|
||||
}
|
||||
.taskfont {
|
||||
margin-right: 3px;
|
||||
@ -813,17 +818,20 @@
|
||||
&.overdue,
|
||||
&.today {
|
||||
color: #ffffff;
|
||||
padding: 1px 5px;
|
||||
padding: 0 4px;
|
||||
border: 1px solid transparent;
|
||||
font-size: 13px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
&.overdue {
|
||||
font-weight: 600;
|
||||
background-color: #ed4014;
|
||||
border-color: #ed4014;
|
||||
}
|
||||
&.today {
|
||||
font-weight: 500;
|
||||
background-color: #ff9900;
|
||||
border-color: #ff9900;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,10 +1,12 @@
|
||||
.task-priority {
|
||||
font-size: 13px;
|
||||
display: inline-block;
|
||||
padding: 2px 6px;
|
||||
padding: 2px 5px;
|
||||
border-radius: 3px;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user