github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2026-01-26 20:48:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

add:新增暗黑皮肤样式

Browse Source
This commit is contained in:
623585344@qq.com 2021-12-31 16:59:42 +08:00
parent c8f11578d6
commit 320f183b49
12 changed files with 263 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/js/language.all.js vendored
View File

@ -453,5 +453,6 @@
{"CN": "开启您的 Dootask 团队协作","EN": "Open your DOOTASK team collaboration","TC": "開啟您的 Dootask 團隊協作","KM": "បើកកិច្ចសហប្រតិបត្តិការក្រុមរបស់អ្នក","TH": "เปิดการทำงานร่วมกันของทีม DOOTASK ของคุณ","KO": "Dootask 팀 공동 작업을 엽니 다","JA": "あなたのdootaskチームコラボレーションを開く"},
{"CN": "联系我们","EN": "Contact us","TC": "聯繫我們","KM": "ទាក់ទង​មក​ពួក​យើង","TH": "ติดต่อเรา","KO": "문의하기","JA": "お問い合わせ"},
{"CN": "桂公网安备 31011002000058号 桂ICP备12020087号-3","EN": "Gui Gong Net Anni 31011002000058 Gui ICP No. 12020087 -3","TC": "桂公網安備 31011002000058號 桂ICP備12020087號-3","KM": "Gui Gong Net Net Ann 31011002000058 GUI ICP លេខ 12020087 -3","TH": "Gui Gong Net Anni 31011002000058 GUI ICP No. 12020087 -3","KO": "Gui Gong Net Anni 31011002000058 GUI ICP No. 12020087 -3","JA": "GUI GONG NET ANNI 31011002000058 GUI ICP No. 12020087 -3"},
{"CN": "主题皮肤","EN": "Topic skin","TC": "主題皮膚","KM": "ស្បែកប្រធានបទ","TH": "ผิวหนัง","KO": "주제 피부","JA": "トピックスキン"},
]
})(window)

15
resources/assets/js/pages/login.vue
View File

@ -178,13 +178,12 @@ export default {
},
mounted() {
this.getDemoAccount();
this.getLoginType()
//
if (!this.isElectron && this.cacheServerUrl) {
this.onServerUrlClear();
}
this.$route.query.type == "reg"
? (this.loginType = "reg")
: (this.loginType = "login");
},
deactivated() {
this.loginJump = false;
@ -205,9 +204,7 @@ export default {
},
watch: {
$route(to, from) {
this.$route.query.type == "reg"
? (this.loginType = "reg")
: (this.loginType = "login");
this.getLoginType();
},
loginType(val) {
if (val == "reg") {
@ -245,7 +242,11 @@ export default {
this.needInvite = false;
});
},
getLoginType(){
this.$route.query.type == "reg"
? (this.loginType = "reg")
: (this.loginType = "login");
},
forgotPassword() {
$A.modalWarning("请联系管理员！");
},

36
resources/assets/js/pages/manage.vue
View File

@ -1,6 +1,6 @@
<template>
<div v-show="userId > 0" class="page-manage">
<div class="manage-box-menu" :class="{'show768-menu': show768Menu}">
<div v-show="userId > 0" class="page-manage" :class="skinType">
<div class="manage-box-menu" :class="{'show768-menu': show768Menu,}">
<Dropdown
class="manage-box-dropdown"
trigger="click"
@ -32,6 +32,17 @@
<DropdownMenu slot="list">
<Dropdown-item v-for="(item, key) in languageList" :key="key" :name="key" :selected="getLanguage() === key">{{item}}</Dropdown-item>
</DropdownMenu>
</Dropdown>
<Dropdown placement="right-start" @on-click="setSkin">
<DropdownItem divided>
<div class="mannage-menu-skin">
{{$L('主题皮肤')}}
<Icon type="ios-arrow-forward"></Icon>
</div>
</DropdownItem>
<DropdownMenu slot="list" >
<Dropdown-item v-for="(item,key) in skinOptionsList" :key="key" :name="key" :selected="skinType === item.key">{{item.lable}}</Dropdown-item>
</DropdownMenu>
</Dropdown>
<DropdownItem divided name="signout" style="color:#f40">{{$L('退出登录')}}</DropdownItem>
</DropdownMenu>
@ -93,10 +104,10 @@
<Button class="manage-box-new" type="primary" icon="md-add" @click="onAddShow">{{$L('新建项目')}}</Button>
</div>
<div class="manage-box-main">
<keep-alive>
<router-view class="manage-box-view overlay"></router-view>
</keep-alive>
<div class="manage-box-main" >
<keep-alive>
<router-view class="manage-box-view overlay"></router-view>
</keep-alive>
</div>
<!--新建项目-->
@ -187,7 +198,7 @@
</template>
<script>
import { mapState, mapGetters } from 'vuex'
import { mapState, mapGetters,mapMutations} from 'vuex'
import TaskDetail from "./manage/components/TaskDetail";
import ProjectArchived from "./manage/components/ProjectArchived";
import notificationKoro from "notification-koro1";
@ -196,8 +207,8 @@ import ProjectManagement from "./manage/components/ProjectManagement";
import DrawerOverlay from "../components/DrawerOverlay";
import DragBallComponent from "../components/DragBallComponent";
import TaskAdd from "./manage/components/TaskAdd";
import {skinOptionsList} from "../skin/index"
import {Store} from "le5le-store";
export default {
components: {
TaskAdd,
@ -236,6 +247,7 @@ export default {
natificationHidden: false,
natificationReady: false,
notificationClass: null,
skinOptionsList:skinOptionsList
}
},
@ -292,10 +304,10 @@ export default {
'projectTotal',
'taskId',
'dialogMsgPush',
'skinType',
]),
...mapGetters(['taskData', 'dashboardData']),
...mapMutations(['setSkinType']),
msgAllUnread() {
let num = 0;
this.dialogs.map(({unread}) => {
@ -443,6 +455,10 @@ export default {
},
methods: {
setSkin(e){
localStorage.setItem("skinType", this.skinOptionsList[e].key);
this.$store.commit('setSkinType', this.skinOptionsList[e].key)
},
initLanguage() {
this.columns = [{
label: this.$L('空白模板'),

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

@ -20,7 +20,7 @@
</ButtonGroup>
</div>
</div>
<div class="calendar-box">
<div class="calendar-box" v-if="visible">
<Calendar
ref="cal"
:view="calendarView"
@ -47,7 +47,7 @@ import 'tui-calendar-hi/dist/tui-calendar-hi.css'
import {mapState} from "vuex";
import Calendar from "./components/Calendar";
import moment from "moment";
import {calendarColorList} from "../../skin"
export default {
components: {Calendar},
data() {
@ -65,16 +65,18 @@ export default {
calendarList: [],
loadIng: 0,
visible:true
}
},
activated() {
this.$refs.cal.resetRender();
this.setRenderRange();
},
computed: {
...mapState(['userId', 'projects', 'tasks']),
...mapState(['userId', 'projects', 'tasks','skinType']),
list() {
let datas = $A.cloneJSON(this.tasks);
@ -142,6 +144,16 @@ export default {
},
immediate: true,
},
skinType(nval,oval){
if(nval!==oval){
this.calendarTheme = calendarColorList[this.skinType]
this.visible=false
this.$nextTick(() => {
this.visible=true
});
}
}
},
methods: {
@ -166,12 +178,7 @@ export default {
];
this.calendarWeek = {daynames};
this.calendarMonth = {daynames};
this.calendarTheme = {
'common.border': '1px solid #f4f5f5',
'month.dayname.fontSize': '14px',
'month.dayname.borderLeft': '1px solid #f4f5f5',
'month.dayname.height': '50px',
}
this.calendarTheme = calendarColorList[this.skinType]
this.calendarTemplate = {
titlePlaceholder: () => {
return this.$L("任务描述")

44
resources/assets/js/pages/manage/components/Calendar.vue
View File

@ -1,9 +1,8 @@
<template>
<div ref="tuiCalendar" class="calendar-wrapper"></div>
<div id="calendar" ref="tuiCalendar" class="calendar-wrapper"></div>
</template>
<script>
import Calendar from 'tui-calendar-hi';
export default {
name: 'Calendar',
props: {
@ -151,31 +150,34 @@ export default {
}
},
mounted() {
this.calendarInstance = new Calendar(this.$refs.tuiCalendar, {
defaultView: this.view,
taskView: this.taskView,
scheduleView: this.scheduleView,
theme: this.theme,
template: this.template,
week: this.week,
month: this.month,
calendars: this.calendars,
useCreationPopup: this.useCreationPopup,
useDetailPopup: this.useDetailPopup,
timezones: this.timezones,
disableDblClick: this.disableDblClick,
disableClick: this.disableClick,
isReadOnly: this.isReadOnly,
usageStatistics: this.usageStatistics
});
this.addEventListeners();
this.reflectSchedules();
this.init();
},
beforeDestroy() {
this.calendarInstance.off();
this.calendarInstance.destroy();
},
methods: {
init(){
this.calendarInstance = new Calendar(this.$refs.tuiCalendar, {
defaultView: this.view,
taskView: this.taskView,
scheduleView: this.scheduleView,
theme: this.theme,
template: this.template,
week: this.week,
month: this.month,
calendars: this.calendars,
useCreationPopup: this.useCreationPopup,
useDetailPopup: this.useDetailPopup,
timezones: this.timezones,
disableDblClick: this.disableDblClick,
disableClick: this.disableClick,
isReadOnly: this.isReadOnly,
usageStatistics: this.usageStatistics,
});
this.addEventListeners();
this.reflectSchedules();
},
cloneData(data) {
return JSON.parse(JSON.stringify(data));
},

37
resources/assets/js/skin/index.js vendored Normal file
View File

@ -0,0 +1,37 @@
const skinOptionsList = [
{
lable: "默认",
key: "white",
},
{
lable: "暗黑主题",
key: "black",
},
];
const calendarColorList={
white:
{
'common.border': '1px solid #f4f5f5',
'common.holiday.color': '#333',
'common.saturday.color': '#333',
'common.dayname.color': '#333',
'common.backgroundColor':'#ffffff',
},
black:
{
'common.border': '1px solid #ffffff',
'common.holiday.color': '#ffffff',
'common.saturday.color': '#ffffff',
'common.dayname.color': '#ffffff',
'common.backgroundColor':'#171717',
'common.creationGuide.color': '#ffffff',
'common.creationGuide.color': '#ffffff',
'common.today.color': '#ffffff',
},
}
export { skinOptionsList,calendarColorList };

8
resources/assets/js/store/mutations.js vendored
View File

@ -1,3 +1,9 @@
export default {
/**
* 修改当前皮肤类型
*/
setSkinType(state,val){
state.skinType=val
}
}

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

@ -344,5 +344,6 @@ state.taskColorList = [
{name: '紫色', color: '#f6ecff'},
{name: '灰色', color: '#f3f3f3'},
];
//当前主题背景色
state.skinType=window.localStorage.getItem("skinType")|| "white"
export default state

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

@ -4,7 +4,7 @@
@import "taskfont";
@import "loading";
@import "scrollbar";
@import "components/_";
@import "pages/_";
@import "skin";

8
resources/assets/sass/pages/page-manage.scss vendored
View File

@ -78,6 +78,14 @@
color: #666666;
}
}
.mannage-menu-skin {
display: flex;
align-items: center;
justify-content: space-between;
.ivu-icon {
color: #666666;
}
}
}
> ul {
flex: 1;

133
resources/assets/sass/skin.scss vendored Normal file
View File

@ -0,0 +1,133 @@
//暗黑皮肤
.black {
background-color: #171717;
> .manage-box-menu {
background-color: #202020;
> ul {
> li {
&.menu-project {
>ul{
>li{
&.active {
.project-h1 {
background-color: #b4b3b3;
}
}
}
}
}
color: #ffffff;
&.active {
background-color: #b4b3b3 !important;
}
}
}
.title {
color: #ffffff !important;
}
.manage-box-title {
background-color: #b4b3b3 !important;
color: #ffffff;
}
}
.manage-box-main {
.messenger-select:after {
background-color: #ffffff;
}
.dashboard-wrapper {
color: #ffffff;
}
.dashboard-hello {
color: #ffffff;
}
.dashboard-desc {
color: #ffffff;
}
.dashboard-list {
li {
background-color: #202020;
}
}
.calendar-title {
h1 {
color: #ffffff !important;
}
}
}
.messenger-wrapper {
color: #ffffff;
.dialog {
.active {
background-color: #979595 !important;
}
}
.dialog-box {
span {
color: #ffffff !important;
}
.dialog-text {
color: #ffffff !important;
}
}
.dialog-wrapper {
background-color: #171717;
}
.messenger-nav > p {
color: #ffffff !important;
}
}
.file-wrapper {
.file-nav {
h1 {
color: #ffffff !important;
}
}
.file-navigator {
> ul {
> li {
color: #ffffff !important;
}
}
}
.file-list {
> ul {
> li {
.file-name {
color: #ffffff;
}
}
}
}
}
.page-project {
.project-list {
background-color: #171717;
color: #ffffff;
.project-title {
h1 {
color: #ffffff;
}
}
.project-subtitle {
color: #ffffff;
}
.column-head {
background-color: #202020;
}
.add-column {
background-color: #202020;
color: #ffffff;
}
.task-item {
background-color: #202020 !important;
color: #ffffff !important;
}
.add-placeholder {
color: #ffffff;
}
}
}
}

1
resources/assets/statics/public/js/language.all.js vendored
View File

@ -453,5 +453,6 @@
{"CN": "开启您的 Dootask 团队协作","EN": "Open your DOOTASK team collaboration","TC": "開啟您的 Dootask 團隊協作","KM": "បើកកិច្ចសហប្រតិបត្តិការក្រុមរបស់អ្នក","TH": "เปิดการทำงานร่วมกันของทีม DOOTASK ของคุณ","KO": "Dootask 팀 공동 작업을 엽니 다","JA": "あなたのdootaskチームコラボレーションを開く"},
{"CN": "联系我们","EN": "Contact us","TC": "聯繫我們","KM": "ទាក់ទង​មក​ពួក​យើង","TH": "ติดต่อเรา","KO": "문의하기","JA": "お問い合わせ"},
{"CN": "桂公网安备 31011002000058号 桂ICP备12020087号-3","EN": "Gui Gong Net Anni 31011002000058 Gui ICP No. 12020087 -3","TC": "桂公網安備 31011002000058號 桂ICP備12020087號-3","KM": "Gui Gong Net Net Ann 31011002000058 GUI ICP លេខ 12020087 -3","TH": "Gui Gong Net Anni 31011002000058 GUI ICP No. 12020087 -3","KO": "Gui Gong Net Anni 31011002000058 GUI ICP No. 12020087 -3","JA": "GUI GONG NET ANNI 31011002000058 GUI ICP No. 12020087 -3"},
{"CN": "主题皮肤","EN": "Topic skin","TC": "主題皮膚","KM": "ស្បែកប្រធានបទ","TH": "ผิวหนัง","KO": "주제 피부","JA": "トピックスキン"},
]
})(window)