gitee/dootask
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

优化暗黑皮肤

Browse Source
This commit is contained in:
kuaifan 2022-01-21 11:44:13 +08:00
parent 18bc75242b
commit 164f3275f4
11 changed files with 285 additions and 335 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
resources/assets/js/functions/web.js vendored
View File

@ -596,6 +596,7 @@
twitterwidget,
.sr-reader,
.no-dark-mode,
.no-dark-mode-before:before,
.sr-backdrop {
${this.utils.reverseFilter}
}

10
resources/assets/js/pages/manage/calendar.vue
View File

@ -88,7 +88,7 @@ export default {
},
computed: {
...mapState(['userId', 'cacheTasks', 'taskCompleteTemps', 'wsOpenNum']),
...mapState(['userId', 'cacheTasks', 'taskCompleteTemps', 'wsOpenNum', 'themeIsDark']),
...mapGetters(['transforTasks']),
@ -134,7 +134,11 @@ export default {
_time: data._time,
};
if (data.p_name) {
task.priority = '<span class="priority" style="background-color:' + data.p_color + '">' + data.p_name + '</span>';
let priorityStyle = `background-color:${data.p_color}`;
if (this.themeIsDark) {
priorityStyle = `color:${data.p_color};border:1px solid ${data.p_color};padding:1px 3px;`;
}
task.priority = `<span class="priority" style="${priorityStyle}">${data.p_name}</span>`;
}
if (data.sub_my && data.sub_my.length > 0) {
task.title = `[+${data.sub_my.length}] ${task.title}`
@ -153,7 +157,7 @@ export default {
task.title = `[${this.$L('超期')}] ${task.title}`
task.color = "#f56c6c"
task.bgColor = data.color || "#fef0f0"
task.priority+= '<span class="overdue">' + this.$L('超期未完成') + '</span>';
task.priority+= `<span class="overdue">${this.$L('超期未完成')}</span>`;
}
if (!task.borderColor) {
task.borderColor = task.bgColor;

14
resources/assets/js/pages/manage/file.vue
View File

@ -65,18 +65,18 @@
<ul class="clearfix">
<li
v-for="item in fileList"
:class="[item.type, item.id && shearId == item.id ? 'shear' : '', !!item._highlight ? 'highlight' : '']"
:class="[item.id && shearId == item.id ? 'shear' : '', !!item._highlight ? 'highlight' : '']"
@contextmenu.prevent.stop="handleRightClick($event, item)"
@click="openFile(item)">
<div class="file-menu" @click.stop="handleRightClick($event, item)">
<Icon type="ios-more" />
</div>
<div class="file-icon">
<div :class="`no-dark-mode-before file-icon ${item.type}`">
<template v-if="item.share">
<UserAvatar v-if="item.userid != userId" :userid="item.userid" class="share-avatar" :size="20">
<p>{{$L('共享权限')}}: {{$L(item.permission == 1 ? '读/写' : '只读')}}</p>
</UserAvatar>
<div v-else class="share-icon">
<div v-else class="share-icon no-dark-mode">
<i class="taskfont">&#xe757;</i>
</div>
</template>
@ -119,7 +119,7 @@
:key="key"
:divided="!!type.divided"
@click.native="addFile(type.value)">
<div :class="['file-item ' + type.value]">{{$L(type.label)}}</div>
<div :class="`no-dark-mode-before file-item file-icon ${type.value}`">{{$L(type.label)}}</div>
</DropdownItem>
</DropdownMenu>
</Dropdown>
@ -142,7 +142,7 @@
:key="key"
:divided="!!type.divided"
@click.native="addFile(type.value)">
<div :class="['file-item ' + type.value]">{{$L(type.label)}}</div>
<div :class="`no-dark-mode-before file-item file-icon ${type.value}`">{{$L(type.label)}}</div>
</DropdownItem>
</template>
</DropdownMenu>
@ -577,7 +577,7 @@ export default {
class: 'file-nbox'
}, [
h('div', {
class: 'file-name ' + row.type,
class: `no-dark-mode-before file-name file-icon ${row.type}`,
}, array),
]);
} else {
@ -645,7 +645,7 @@ export default {
class: 'file-nbox'
}, [
h('div', {
class: 'file-name ' + row.type,
class: `no-dark-mode-before file-name file-icon ${row.type}`,
}, array),
iconArray
]);

219
resources/assets/js/store/state.js vendored
View File

@ -1,120 +1,125 @@
const state = {};
const stateData = {
// 浏览器宽度
windowWidth: window.innerWidth,
// 浏览器宽度
state.windowWidth = window.innerWidth;
// 浏览器宽度≤768返回true
windowMax768: window.innerWidth <= 768,
// 浏览器宽度≤768返回true
state.windowMax768 = window.innerWidth <= 768;
// 数据缓存
cacheLoading: {},
// 数据缓存
state.cacheLoading = {};
// DrawerOverlay
cacheDrawerIndex: 0,
cacheDrawerOverlay: [],
// DrawerOverlay
state.cacheDrawerIndex = 0;
state.cacheDrawerOverlay = [];
// User
cacheUserActive: {},
cacheUserWait: [],
cacheUserBasic: $A.getStorageArray("cacheUserBasic"),
// User
state.cacheUserActive = {};
state.cacheUserWait = [];
state.cacheUserBasic = $A.getStorageArray("cacheUserBasic");
// Dialog
cacheDialogs: $A.getStorageArray("cacheDialogs"),
// Dialog
state.cacheDialogs = $A.getStorageArray("cacheDialogs");
// Project
cacheProjects: $A.getStorageArray("cacheProjects"),
cacheColumns: $A.getStorageArray("cacheColumns"),
cacheTasks: $A.getStorageArray("cacheTasks"),
cacheProjectParameter: $A.getStorageArray("cacheProjectParameter"),
// Project
state.cacheProjects = $A.getStorageArray("cacheProjects");
state.cacheColumns = $A.getStorageArray("cacheColumns");
state.cacheTasks = $A.getStorageArray("cacheTasks");
state.cacheProjectParameter = $A.getStorageArray("cacheProjectParameter");
// ServerUrl
cacheServerUrl: $A.getStorageString("cacheServerUrl"),
// Ajax
ajaxWsReady: false,
ajaxWsListener: [],
// Websocket
ws: null,
wsMsg: {},
wsCall: {},
wsTimeout: null,
wsOpenNum: 0,
wsListener: {},
wsReadTimeout: null,
wsReadWaitList: [],
// 会员信息
userInfo: $A.getStorageJson("userInfo"),
userId: state.userInfo.userid = $A.runNum(state.userInfo.userid),
userToken: state.userInfo.token,
userIsAdmin: $A.inArray("admin", state.userInfo.identity),
userOnline: {},
// 会话聊天
dialogMsgs: [],
dialogOpenId: 0,
// 文件
files: [],
fileContent: {},
// 项目任务
projectId: 0,
projectTotal: 0,
projectLoad: 0,
taskId: 0,
taskCompleteTemps: [],
taskContents: [],
taskFiles: [],
taskLogs: [],
// 任务等待状态
taskLoading: [],
// 任务流程信息
taskFlows: [],
taskFlowItems: [],
// 任务优先级
taskPriority: [],
// 列表背景色
columnColorList: [
{name: '默认', color: ''},
{name: '灰色', color: '#444444'},
{name: '棕色', color: '#947364'},
{name: '橘色', color: '#faaa6c'},
{name: '黄色', color: '#f2d86d'},
{name: '绿色', color: '#73b45c'},
{name: '蓝色', color: '#51abea'},
{name: '紫色', color: '#b583e3'},
{name: '粉色', color: '#ff819c'},
{name: '红色', color: '#ff7070'},
],
// 任务背景色
taskColorList: [
{name: '默认', color: ''},
{name: '黄色', color: '#fffae6'},
{name: '蓝色', color: '#e5f5ff'},
{name: '绿色', color: '#ecffe5'},
{name: '粉色', color: '#ffeaee'},
{name: '紫色', color: '#f6ecff'},
{name: '灰色', color: '#f3f3f3'},
],
// 主题皮肤
themeMode: $A.getStorageString("cacheThemeMode", "auto"),
themeList: [
{name: '跟随系统', value: 'auto'},
{name: '明亮', value: 'light'},
{name: '暗黑', value: 'dark'},
],
themeIsDark: false,
};
// ServerUrl
state.cacheServerUrl = $A.getStorageString("cacheServerUrl")
if (state.cacheServerUrl) {
window.systemInfo.apiUrl = state.cacheServerUrl;
if (stateData.cacheServerUrl) {
window.systemInfo.apiUrl = stateData.cacheServerUrl;
}
// Ajax
state.ajaxWsReady = false;
state.ajaxWsListener = [];
// Websocket
state.ws = null;
state.wsMsg = {};
state.wsCall = {};
state.wsTimeout = null;
state.wsOpenNum = 0;
state.wsListener = {};
state.wsReadTimeout = null;
state.wsReadWaitList = [];
// 会员信息
state.userInfo = $A.getStorageJson("userInfo");
state.userId = state.userInfo.userid = $A.runNum(state.userInfo.userid);
state.userToken = state.userInfo.token;
state.userIsAdmin = $A.inArray("admin", state.userInfo.identity);
state.userOnline = {};
// 会话聊天
state.dialogMsgs = [];
state.dialogOpenId = 0;
// 文件
state.files = [];
state.fileContent = {};
// 项目任务
state.projectId = 0;
state.projectTotal = 0;
state.projectLoad = 0;
state.taskId = 0;
state.taskCompleteTemps = [];
state.taskContents = [];
state.taskFiles = [];
state.taskLogs = [];
// 任务等待状态
state.taskLoading = [];
// 任务流程信息
state.taskFlows = [];
state.taskFlowItems = [];
// 任务优先级
state.taskPriority = [];
// 列表背景色
state.columnColorList = [
{name: '默认', color: ''},
{name: '灰色', color: '#444444'},
{name: '棕色', color: '#947364'},
{name: '橘色', color: '#faaa6c'},
{name: '黄色', color: '#f2d86d'},
{name: '绿色', color: '#73b45c'},
{name: '蓝色', color: '#51abea'},
{name: '紫色', color: '#b583e3'},
{name: '粉色', color: '#ff819c'},
{name: '红色', color: '#ff7070'},
];
// 任务背景色
state.taskColorList = [
{name: '默认', color: ''},
{name: '黄色', color: '#fffae6'},
{name: '蓝色', color: '#e5f5ff'},
{name: '绿色', color: '#ecffe5'},
{name: '粉色', color: '#ffeaee'},
{name: '紫色', color: '#f6ecff'},
{name: '灰色', color: '#f3f3f3'},
];
// 主题皮肤
state.themeMode = $A.getStorageString("cacheThemeMode", "auto");
state.themeList = [
{name: '跟随系统', value: 'auto'},
{name: '明亮', value: 'light'},
{name: '暗黑', value: 'dark'},
];
switch (state.themeMode) {
switch (stateData.themeMode) {
case 'dark':
$A.dark.enableDarkMode()
break;
@ -125,6 +130,6 @@ switch (state.themeMode) {
$A.dark.autoDarkMode()
break;
}
state.themeIsDark = $A.dark.isDarkEnabled();
stateData.themeIsDark = $A.dark.isDarkEnabled();
export default state
export default stateData

1
resources/assets/sass/app.scss vendored
View File

@ -1,4 +1,5 @@
@import "var";
@import "fileicon";
@import "element";
@import "fonts-ft";
@import "taskfont";

12
resources/assets/sass/components/drawer-overlay.scss vendored
View File

@ -44,13 +44,19 @@
width: 40px;
height: 40px;
color: #dbdbde;
&:hover {
color: #fff
}
.icon {
width: 24px;
height: 24px
}
> svg {
transition: all 0.3s;
}
&:hover {
color: #fff;
> svg {
transform: rotate(-90deg);
}
}
}
}

95
resources/assets/sass/dark.scss vendored
View File

@ -5,10 +5,6 @@ body.dark-mode-reverse {
color: #000;
}
.ivu-select-dropdown {
box-shadow: rgba(255, 255, 255, 0.2) 0 1px 6px;
}
.ivu-modal-mask {
background-color: rgba(230, 230, 230, 0.6);
}
@ -22,6 +18,7 @@ body.dark-mode-reverse {
border: 1px solid #e3e8ed;
}
.ivu-select-dropdown,
.ivu-tooltip-inner,
.ivu-poptip-inner {
border: 1px solid #e3e8ed;
@ -41,11 +38,14 @@ body.dark-mode-reverse {
}
.drawer-overlay {
background: rgba(240, 240, 240, 0.76);
background: rgba(230, 230, 230, 0.6);
.overlay-body {
.overlay-close {
> a {
color: #323232;
&:hover {
color: #000;
}
}
}
}
@ -156,6 +156,72 @@ body.dark-mode-reverse {
}
}
.file-icon {
&:before {
background-image: url("../images/file/dark/other.svg");
}
&.archive:before {
background-image: url("../images/file/dark/archive.svg");
}
&.cad:before {
background-image: url("../images/file/dark/cad.svg");
}
&.code:before {
background-image: url("../images/file/dark/code.svg");
}
&.document:before {
background-image: url("../images/file/dark/document.svg");
}
&.excel:before {
background-image: url("../images/file/dark/excel.svg");
}
&.flow:before {
background-image: url("../images/file/dark/flow.svg");
}
&.folder:before {
background-image: url("../images/file/dark/folder.svg");
}
&.media:before {
background-image: url("../images/file/dark/media.svg");
}
&.mind:before {
background-image: url("../images/file/dark/mind.svg");
}
&.ofd:before {
background-image: url("../images/file/dark/ofd.svg");
}
&.pdf:before {
background-image: url("../images/file/dark/pdf.svg");
}
&.picture:before {
background-image: url("../images/file/dark/picture.svg");
}
&.ppt:before {
background-image: url("../images/file/dark/ppt.svg");
}
&.sheet:before {
background-image: url("../images/file/dark/sheet.svg");
}
&.tif:before {
background-image: url("../images/file/dark/tif.svg");
}
&.txt:before {
background-image: url("../images/file/dark/txt.svg");
}
&.updir:before {
background-image: url("../images/file/dark/updir.svg");
}
&.upload:before {
background-image: url("../images/file/dark/upload.svg");
}
&.word:before {
background-image: url("../images/file/dark/word.svg");
}
&.wps:before {
background-image: url("../images/file/dark/wps.svg");
}
}
.page-login {
.login-body {
.login-box {
@ -219,23 +285,4 @@ body.dark-mode-reverse {
}
}
}
.page-file {
.file-wrapper {
.file-list {
> ul {
> li {
.file-icon {
.share-icon,
.share-avatar {
.taskfont {
color: #3a3a3a;
}
}
}
}
}
}
}
}
}

68
resources/assets/sass/fileicon.scss vendored Normal file
View File

@ -0,0 +1,68 @@
.file-icon {
&:before {
content: "";
background-repeat: no-repeat;
background-size: contain;
background-image: url("../images/file/other.svg");
}
&.archive:before {
background-image: url("../images/file/archive.svg");
}
&.cad:before {
background-image: url("../images/file/cad.svg");
}
&.code:before {
background-image: url("../images/file/code.svg");
}
&.document:before {
background-image: url("../images/file/document.svg");
}
&.excel:before {
background-image: url("../images/file/excel.svg");
}
&.flow:before {
background-image: url("../images/file/flow.svg");
}
&.folder:before {
background-image: url("../images/file/folder.svg");
}
&.media:before {
background-image: url("../images/file/media.svg");
}
&.mind:before {
background-image: url("../images/file/mind.svg");
}
&.ofd:before {
background-image: url("../images/file/ofd.svg");
}
&.pdf:before {
background-image: url("../images/file/pdf.svg");
}
&.picture:before {
background-image: url("../images/file/picture.svg");
}
&.ppt:before {
background-image: url("../images/file/ppt.svg");
}
&.sheet:before {
background-image: url("../images/file/sheet.svg");
}
&.tif:before {
background-image: url("../images/file/tif.svg");
}
&.txt:before {
background-image: url("../images/file/txt.svg");
}
&.updir:before {
background-image: url("../images/file/updir.svg");
}
&.upload:before {
background-image: url("../images/file/upload.svg");
}
&.word:before {
background-image: url("../images/file/word.svg");
}
&.wps:before {
background-image: url("../images/file/wps.svg");
}
}

2
resources/assets/sass/pages/components/project-list.scss vendored
View File

@ -859,7 +859,7 @@
&.row-name {
padding-left: 56px;
.item-title {
color: #6C7D8C;
color: #6b6e72;
}
}
&.row-column,

196
resources/assets/sass/pages/page-file.scss vendored
View File

@ -296,70 +296,7 @@
content: "";
width: 22px;
height: 22px;
background-repeat: no-repeat;
background-size: contain;
margin-right: 8px;
background-image: url("../images/file/other.svg");
}
&.archive:before {
background-image: url("../images/file/archive.svg");
}
&.cad:before {
background-image: url("../images/file/cad.svg");
}
&.code:before {
background-image: url("../images/file/code.svg");
}
&.document:before {
background-image: url("../images/file/document.svg");
}
&.excel:before {
background-image: url("../images/file/excel.svg");
}
&.flow:before {
background-image: url("../images/file/flow.svg");
}
&.folder:before {
background-image: url("../images/file/folder.svg");
}
&.media:before {
background-image: url("../images/file/media.svg");
}
&.mind:before {
background-image: url("../images/file/mind.svg");
}
&.ofd:before {
background-image: url("../images/file/ofd.svg");
}
&.pdf:before {
background-image: url("../images/file/pdf.svg");
}
&.picture:before {
background-image: url("../images/file/picture.svg");
}
&.ppt:before {
background-image: url("../images/file/ppt.svg");
}
&.sheet:before {
background-image: url("../images/file/sheet.svg");
}
&.tif:before {
background-image: url("../images/file/tif.svg");
}
&.txt:before {
background-image: url("../images/file/txt.svg");
}
&.updir:before {
background-image: url("../images/file/updir.svg");
}
&.upload:before {
background-image: url("../images/file/upload.svg");
}
&.word:before {
background-image: url("../images/file/word.svg");
}
&.wps:before {
background-image: url("../images/file/wps.svg");
}
}
.permission {
@ -448,11 +385,15 @@
display: inline-block;
width: 64px;
height: 64px;
background-repeat: no-repeat;
background-size: contain;
margin-top: 12px;
position: relative;
background-image: url("../images/file/other.svg");
&:before {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.share-icon,
.share-avatar {
position: absolute;
@ -476,66 +417,6 @@
&.shear {
opacity: 0.38;
}
&.archive .file-icon {
background-image: url("../images/file/archive.svg");
}
&.cad .file-icon {
background-image: url("../images/file/cad.svg");
}
&.code .file-icon {
background-image: url("../images/file/code.svg");
}
&.document .file-icon {
background-image: url("../images/file/document.svg");
}
&.excel .file-icon {
background-image: url("../images/file/excel.svg");
}
&.flow .file-icon {
background-image: url("../images/file/flow.svg");
}
&.folder .file-icon {
background-image: url("../images/file/folder.svg");
}
&.media .file-icon {
background-image: url("../images/file/media.svg");
}
&.mind .file-icon {
background-image: url("../images/file/mind.svg");
}
&.ofd .file-icon {
background-image: url("../images/file/ofd.svg");
}
&.pdf .file-icon {
background-image: url("../images/file/pdf.svg");
}
&.picture .file-icon {
background-image: url("../images/file/picture.svg");
}
&.ppt .file-icon {
background-image: url("../images/file/ppt.svg");
}
&.sheet .file-icon {
background-image: url("../images/file/sheet.svg");
}
&.tif .file-icon {
background-image: url("../images/file/tif.svg");
}
&.txt .file-icon {
background-image: url("../images/file/txt.svg");
}
&.updir .file-icon {
background-image: url("../images/file/updir.svg");
}
&.upload .file-icon {
background-image: url("../images/file/upload.svg");
}
&.word .file-icon {
background-image: url("../images/file/word.svg");
}
&.wps .file-icon {
background-image: url("../images/file/wps.svg");
}
&.highlight {
background-color: #f4f5f7;
}
@ -650,70 +531,7 @@
content: "";
width: 20px;
height: 20px;
background-repeat: no-repeat;
background-size: contain;
margin-right: 8px;
background-image: url("../images/file/other.svg");
}
&.archive:before {
background-image: url("../images/file/archive.svg");
}
&.cad:before {
background-image: url("../images/file/cad.svg");
}
&.code:before {
background-image: url("../images/file/code.svg");
}
&.document:before {
background-image: url("../images/file/document.svg");
}
&.excel:before {
background-image: url("../images/file/excel.svg");
}
&.flow:before {
background-image: url("../images/file/flow.svg");
}
&.folder:before {
background-image: url("../images/file/folder.svg");
}
&.media:before {
background-image: url("../images/file/media.svg");
}
&.mind:before {
background-image: url("../images/file/mind.svg");
}
&.ofd:before {
background-image: url("../images/file/ofd.svg");
}
&.pdf:before {
background-image: url("../images/file/pdf.svg");
}
&.picture:before {
background-image: url("../images/file/picture.svg");
}
&.ppt:before {
background-image: url("../images/file/ppt.svg");
}
&.sheet:before {
background-image: url("../images/file/sheet.svg");
}
&.tif:before {
background-image: url("../images/file/tif.svg");
}
&.txt:before {
background-image: url("../images/file/txt.svg");
}
&.updir:before {
background-image: url("../images/file/updir.svg");
}
&.upload:before {
background-image: url("../images/file/upload.svg");
}
&.word:before {
background-image: url("../images/file/word.svg");
}
&.wps:before {
background-image: url("../images/file/wps.svg");
}
}
}

2
resources/assets/sass/pages/page-setting.scss vendored
View File

@ -38,7 +38,7 @@
padding: 12px 0 0 32px;
> li {
cursor: pointer;
color: #6C7D8C;
color: #6b6e72;
list-style: none;
line-height: 42px;
padding: 0 20px;