mirror of
https://github.com/kuaifan/dootask.git
synced 2026-03-04 16:37:06 +00:00
优化移动端
This commit is contained in:
parent
05df135229
commit
4da73dd144
5
resources/assets/js/app.js
vendored
5
resources/assets/js/app.js
vendored
@ -1,4 +1,5 @@
|
||||
const isElectron = window && window.process && window.process.type;
|
||||
const isEEUiApp = window && window.navigator && /eeui/i.test(window.navigator.userAgent);
|
||||
|
||||
import './functions/common'
|
||||
import './functions/web'
|
||||
@ -63,12 +64,12 @@ VueRouter.prototype.push = function push(location) {
|
||||
}
|
||||
|
||||
const router = new VueRouter({
|
||||
mode: isElectron ? 'hash' : 'history',
|
||||
mode: isElectron || isEEUiApp ? 'hash' : 'history',
|
||||
routes
|
||||
});
|
||||
|
||||
// 进度条配置
|
||||
if (!isElectron) {
|
||||
if (!isElectron && !isEEUiApp) {
|
||||
ViewUI.LoadingBar.config({
|
||||
color: '#3fcc25',
|
||||
failedColor: '#ff0000'
|
||||
|
||||
73
resources/assets/js/components/Mobile/Back.vue
Normal file
73
resources/assets/js/components/Mobile/Back.vue
Normal file
@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<div class="mobile-back" :style="style"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "MobileBack",
|
||||
props: {
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
x: 0,
|
||||
y: 0
|
||||
};
|
||||
},
|
||||
|
||||
created() {
|
||||
|
||||
},
|
||||
|
||||
mounted() {
|
||||
window.addEventListener('touchstart', this.touchstart)
|
||||
window.addEventListener('touchmove', this.touchmove)
|
||||
window.addEventListener('touchend', this.touchend)
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('touchstart', this.touchstart)
|
||||
window.removeEventListener('touchmove', this.touchmove)
|
||||
window.removeEventListener('touchend', this.touchend)
|
||||
},
|
||||
|
||||
computed: {
|
||||
style() {
|
||||
return {
|
||||
top: this.y + 'px',
|
||||
left: !this.disabled && this.x > 30 && this.show ? 0 : '-50px',
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 获取坐标
|
||||
getXY(event) {
|
||||
let touch = event.touches[0]
|
||||
this.x = touch.clientX
|
||||
this.y = touch.clientY
|
||||
},
|
||||
touchstart(event) {
|
||||
this.getXY(event)
|
||||
// 判断是否是边缘滑动
|
||||
this.show = !this.disabled && this.x < 30;
|
||||
},
|
||||
touchmove(event) {
|
||||
this.getXY(event)
|
||||
},
|
||||
touchend() {
|
||||
// 判断停止时的位置偏移
|
||||
if (this.x > 90 && this.show) {
|
||||
this.goBack();
|
||||
}
|
||||
this.x = 0
|
||||
this.show = false
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -6,15 +6,13 @@
|
||||
<div class="tabbar-title">{{$L(item.label)}}</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="mobile-back"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "MobileTabbar",
|
||||
props: {
|
||||
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
@ -49,6 +47,7 @@ export default {
|
||||
if (this.routeName === 'manage-dashboard') {
|
||||
return 'dashboard';
|
||||
}
|
||||
|
||||
if (this.routeName === 'manage-project' && !/^\d+$/.test(this.$route.params.projectId)) {
|
||||
return 'project';
|
||||
}
|
||||
@ -59,8 +58,8 @@ export default {
|
||||
return 'dialog'
|
||||
}
|
||||
}
|
||||
if ($A.leftExists(this.routeName, 'manage-setting')) {
|
||||
return 'setting'
|
||||
if (this.routeName === 'manage-setting') {
|
||||
return 'setting';
|
||||
}
|
||||
return ''
|
||||
},
|
||||
|
||||
@ -12,14 +12,14 @@
|
||||
<div class="login-input">
|
||||
<Input v-if="$Electron && cacheServerUrl" :value="$A.getDomain(cacheServerUrl)" prefix="ios-globe-outline" size="large" readonly clearable @on-clear="clearServerUrl"/>
|
||||
|
||||
<Input v-model="email" prefix="ios-mail-outline" :placeholder="$L('输入您的电子邮件')" size="large" @on-enter="onLogin" @on-blur="onBlur" />
|
||||
<Input v-model="email" prefix="ios-mail-outline" :placeholder="$L('输入您的电子邮件')" type="email" size="large" @on-enter="onLogin" @on-blur="onBlur" />
|
||||
|
||||
<Input v-model="password" prefix="ios-lock-outline" :placeholder="$L('输入您的密码')" type="password" size="large" @on-enter="onLogin" />
|
||||
|
||||
<Input v-if="loginType=='reg'" v-model="password2" prefix="ios-lock-outline" :placeholder="$L('输入确认密码')" type="password" size="large" @on-enter="onLogin" />
|
||||
<Input v-if="loginType=='reg' && needInvite" v-model="invite" class="login-code" :placeholder="$L('请输入注册邀请码')" type="text" size="large" @on-enter="onLogin"><span slot="prepend"> {{$L('邀请码')}} </span></Input>
|
||||
|
||||
<Input v-if="loginType=='login' && codeNeed" v-model="code" class="login-code" :placeholder="$L('输入图形验证码')" size="large" @on-enter="onLogin">
|
||||
<Input v-if="loginType=='login' && codeNeed" v-model="code" class="login-code" :placeholder="$L('输入图形验证码')" type="text" size="large" @on-enter="onLogin">
|
||||
<Icon type="ios-checkmark-circle-outline" class="login-icon" slot="prepend"></Icon>
|
||||
<div slot="append" class="login-code-end" @click="reCode"><img :src="codeUrl"/></div>
|
||||
</Input>
|
||||
|
||||
@ -355,6 +355,7 @@
|
||||
|
||||
<!--移动端选项卡-->
|
||||
<MobileTabbar v-if="showMobileTabbar"/>
|
||||
<MobileBack :disabled="showMobileTabbar"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -372,9 +373,11 @@ import TaskAdd from "./manage/components/TaskAdd";
|
||||
import Report from "./manage/components/Report";
|
||||
import notificationKoro from "notification-koro1";
|
||||
import {Store} from "le5le-store";
|
||||
import MobileBack from "../components/Mobile/Back";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
MobileBack,
|
||||
MobileTabbar,
|
||||
UserInput,
|
||||
TaskAdd,
|
||||
@ -633,7 +636,7 @@ export default {
|
||||
if (this.routeName === 'manage-messenger' && !/^\d+$/.test(this.$route.params.dialogId)) {
|
||||
return true;
|
||||
}
|
||||
return $A.leftExists(this.routeName, 'manage-setting');
|
||||
return this.routeName === 'manage-setting';
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
@ -7,33 +7,40 @@
|
||||
@dragleave.prevent="chatDragOver(false, $event)">
|
||||
<slot name="head">
|
||||
<div class="dialog-nav" :class="{completed:$A.dialogCompleted(dialogData)}">
|
||||
<div class="dialog-avatar">
|
||||
<template v-if="dialogData.type=='group'">
|
||||
<i v-if="dialogData.group_type=='project'" class="taskfont icon-avatar project"></i>
|
||||
<i v-else-if="dialogData.group_type=='task'" class="taskfont icon-avatar task"></i>
|
||||
<Icon v-else class="icon-avatar" type="ios-people" />
|
||||
</template>
|
||||
<div v-else-if="dialogData.dialog_user" class="user-avatar"><UserAvatar :userid="dialogData.dialog_user.userid" :size="42"/></div>
|
||||
<Icon v-else class="icon-avatar" type="md-person" />
|
||||
<div class="dialog-back" @click="goBack">
|
||||
<i class="taskfont"></i>
|
||||
</div>
|
||||
<div class="dialog-title">
|
||||
<div class="main-title">
|
||||
<template v-for="tag in $A.dialogTags(dialogData)" v-if="tag.color != 'success'">
|
||||
<Tag :color="tag.color" :fade="false">{{$L(tag.text)}}</Tag>
|
||||
|
||||
<div class="dialog-block">
|
||||
<div class="dialog-avatar">
|
||||
<template v-if="dialogData.type=='group'">
|
||||
<i v-if="dialogData.group_type=='project'" class="taskfont icon-avatar project"></i>
|
||||
<i v-else-if="dialogData.group_type=='task'" class="taskfont icon-avatar task"></i>
|
||||
<Icon v-else class="icon-avatar" type="ios-people" />
|
||||
</template>
|
||||
<h2>{{dialogData.name}}</h2>
|
||||
<em v-if="peopleNum > 0">({{peopleNum}})</em>
|
||||
<label v-if="dialogData.top_at" class="top-text">{{$L('置顶')}}</label>
|
||||
<div v-else-if="dialogData.dialog_user" class="user-avatar"><UserAvatar :userid="dialogData.dialog_user.userid" :size="42"/></div>
|
||||
<Icon v-else class="icon-avatar" type="md-person" />
|
||||
</div>
|
||||
<template v-if="dialogData.type === 'group'">
|
||||
<div v-if="dialogData.group_type === 'project'" class="sub-title pointer" @click="openProject">
|
||||
{{$L('项目聊天室')}} {{$L('打开项目管理')}}
|
||||
<div class="dialog-title">
|
||||
<div class="main-title">
|
||||
<template v-for="tag in $A.dialogTags(dialogData)" v-if="tag.color != 'success'">
|
||||
<Tag :color="tag.color" :fade="false">{{$L(tag.text)}}</Tag>
|
||||
</template>
|
||||
<h2>{{dialogData.name}}</h2>
|
||||
<em v-if="peopleNum > 0">({{peopleNum}})</em>
|
||||
<label v-if="dialogData.top_at" class="top-text">{{$L('置顶')}}</label>
|
||||
</div>
|
||||
<div v-else-if="dialogData.group_type === 'task'" class="sub-title pointer" @click="openTask">
|
||||
{{$L('任务聊天室')}} {{$L('查看任务详情')}}
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="dialogData.type === 'group'">
|
||||
<div v-if="dialogData.group_type === 'project'" class="sub-title pointer" @click="openProject">
|
||||
{{$L('项目聊天室')}} {{$L('打开项目管理')}}
|
||||
</div>
|
||||
<div v-else-if="dialogData.group_type === 'task'" class="sub-title pointer" @click="openTask">
|
||||
{{$L('任务聊天室')}} {{$L('查看任务详情')}}
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template v-if="dialogData.type === 'group'">
|
||||
<ETooltip v-if="dialogData.group_type === 'user'" placement="top" :openDelay="600" :content="$L('群设置')">
|
||||
<i class="taskfont dialog-create" @click="groupInfoShow = true"></i>
|
||||
|
||||
@ -21,9 +21,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="inputBefore" class="dialog-back" @click="onInputBack">
|
||||
<Icon type="md-arrow-back" />
|
||||
</div>
|
||||
</DialogWrapper>
|
||||
</div>
|
||||
</template>
|
||||
@ -47,9 +44,6 @@ export default {
|
||||
},
|
||||
|
||||
methods: {
|
||||
onInputBack() {
|
||||
Store.set('onProjectDialogBack', null);
|
||||
},
|
||||
onClose() {
|
||||
this.$store.dispatch('toggleProjectParameter', 'chat');
|
||||
}
|
||||
|
||||
@ -42,7 +42,7 @@
|
||||
</div>
|
||||
</Tooltip>
|
||||
</li>
|
||||
<li :class="['project-icon', projectData.cacheParameter.chat ? 'active' : '']" @click="$store.dispatch('toggleProjectParameter', 'chat')">
|
||||
<li :class="['project-icon', projectData.cacheParameter.chat ? 'active' : '']" @click="toggleParameter('chat')">
|
||||
<Icon class="menu-icon" type="ios-chatbubbles" />
|
||||
<Badge class="menu-badge" :count="msgUnread"></Badge>
|
||||
</li>
|
||||
@ -258,7 +258,7 @@
|
||||
<div :class="['project-table-body', !projectData.cacheParameter.showMy ? 'project-table-hide' : '']">
|
||||
<Row class="task-row">
|
||||
<Col span="12" class="row-title">
|
||||
<i class="taskfont" @click="$store.dispatch('toggleProjectParameter', 'showMy')"></i>
|
||||
<i class="taskfont" @click="toggleParameter('showMy')"></i>
|
||||
<div class="row-h1">{{$L('我的任务')}}</div>
|
||||
<div class="row-num">({{myList.length}})</div>
|
||||
</Col>
|
||||
@ -273,7 +273,7 @@
|
||||
<div v-if="helpList.length" :class="['project-table-body', !projectData.cacheParameter.showHelp ? 'project-table-hide' : '']">
|
||||
<Row class="task-row">
|
||||
<Col span="12" class="row-title">
|
||||
<i class="taskfont" @click="$store.dispatch('toggleProjectParameter', 'showHelp')"></i>
|
||||
<i class="taskfont" @click="toggleParameter('showHelp')"></i>
|
||||
<div class="row-h1">{{$L('协助的任务')}}</div>
|
||||
<div class="row-num">({{helpList.length}})</div>
|
||||
</Col>
|
||||
@ -288,7 +288,7 @@
|
||||
<div v-if="projectData.task_num > 0" :class="['project-table-body', !projectData.cacheParameter.showUndone ? 'project-table-hide' : '']">
|
||||
<Row class="task-row">
|
||||
<Col span="12" class="row-title">
|
||||
<i class="taskfont" @click="$store.dispatch('toggleProjectParameter', 'showUndone')"></i>
|
||||
<i class="taskfont" @click="toggleParameter('showUndone')"></i>
|
||||
<div class="row-h1">{{$L('未完成任务')}}</div>
|
||||
<div class="row-num">({{unList.length}})</div>
|
||||
</Col>
|
||||
@ -303,7 +303,7 @@
|
||||
<div v-if="projectData.task_num > 0" :class="['project-table-body', !projectData.cacheParameter.showCompleted ? 'project-table-hide' : '']">
|
||||
<Row class="task-row">
|
||||
<Col span="12" class="row-title">
|
||||
<i class="taskfont" @click="$store.dispatch('toggleProjectParameter', 'showCompleted')"></i>
|
||||
<i class="taskfont" @click="toggleParameter('showCompleted')"></i>
|
||||
<div class="row-h1">{{$L('已完成任务')}}</div>
|
||||
<div class="row-num">({{completedList.length}})</div>
|
||||
</Col>
|
||||
@ -319,6 +319,7 @@
|
||||
<!--甘特图-->
|
||||
<ProjectGantt :projectColumn="columnList" :flowInfo="flowInfo"/>
|
||||
</div>
|
||||
|
||||
<!--项目设置-->
|
||||
<Modal
|
||||
v-model="settingShow"
|
||||
@ -517,8 +518,6 @@ export default {
|
||||
archivedTaskShow: false,
|
||||
deletedTaskShow: false,
|
||||
|
||||
projectDialogSubscribe: null,
|
||||
|
||||
flowInfo: {},
|
||||
flowList: [],
|
||||
}
|
||||
@ -528,19 +527,10 @@ export default {
|
||||
this.nowInterval = setInterval(() => {
|
||||
this.nowTime = $A.Time();
|
||||
}, 1000);
|
||||
//
|
||||
this.projectDialogSubscribe = Store.subscribe('onProjectDialogBack', () => {
|
||||
this.$store.dispatch('toggleProjectParameter', 'chat');
|
||||
});
|
||||
},
|
||||
|
||||
destroyed() {
|
||||
clearInterval(this.nowInterval);
|
||||
//
|
||||
if (this.projectDialogSubscribe) {
|
||||
this.projectDialogSubscribe.unsubscribe();
|
||||
this.projectDialogSubscribe = null;
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
@ -1341,8 +1331,7 @@ export default {
|
||||
},
|
||||
|
||||
toggleCompleted() {
|
||||
this.$store.dispatch("forgetTaskCompleteTemp", true);
|
||||
this.$store.dispatch('toggleProjectParameter', 'completedTask');
|
||||
this.toggleParameter('completedTask');
|
||||
},
|
||||
|
||||
workflowBeforeClose() {
|
||||
@ -1406,21 +1395,21 @@ export default {
|
||||
tabTypeChange(type) {
|
||||
switch (type) {
|
||||
case "column":
|
||||
this.$store.dispatch('toggleProjectParameter', {
|
||||
this.toggleParameter({
|
||||
project_id: this.projectId,
|
||||
key: 'menuType',
|
||||
value: 'column'
|
||||
});
|
||||
break;
|
||||
case "table":
|
||||
this.$store.dispatch('toggleProjectParameter', {
|
||||
this.toggleParameter({
|
||||
project_id: this.projectId,
|
||||
key: 'menuType',
|
||||
value: 'table'
|
||||
});
|
||||
break;
|
||||
case "gantt":
|
||||
this.$store.dispatch('toggleProjectParameter', {
|
||||
this.toggleParameter({
|
||||
project_id: this.projectId,
|
||||
key: 'menuType',
|
||||
value: 'gantt'
|
||||
@ -1428,6 +1417,18 @@ export default {
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
toggleParameter(data) {
|
||||
if (data === 'completedTask') {
|
||||
this.$store.dispatch("forgetTaskCompleteTemp", true);
|
||||
} else if (data === 'chat') {
|
||||
if (!this.isDesktop) {
|
||||
this.goForward({name: 'manage-messenger', params: {dialogId: this.projectData.dialog_id}});
|
||||
return;
|
||||
}
|
||||
}
|
||||
this.$store.dispatch('toggleProjectParameter', data);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -119,11 +119,7 @@
|
||||
<div class="msg-dialog-bg-icon"><Icon type="ios-chatbubbles" /></div>
|
||||
<div class="msg-dialog-bg-text">{{$L('选择一个会话开始聊天')}}</div>
|
||||
</div>
|
||||
<DialogWrapper v-if="dialogId > 0" :dialogId="dialogId" @on-active="scrollIntoActive">
|
||||
<div slot="inputBefore" class="dialog-back" @click="goBack">
|
||||
<Icon type="md-arrow-back" />
|
||||
</div>
|
||||
</DialogWrapper>
|
||||
<DialogWrapper v-if="dialogId > 0" :dialogId="dialogId" @on-active="scrollIntoActive"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -5,8 +5,8 @@
|
||||
<div class="setting-titbox">
|
||||
<div class="setting-title">
|
||||
<h1>{{$L('设置')}}</h1>
|
||||
<div v-if="!show768Menu" class="setting-more" @click="show768Menu=!show768Menu">
|
||||
<Icon type="md-more" />
|
||||
<div v-if="!show768Menu" class="setting-more" @click="toggleRoute('index')">
|
||||
<Icon type="md-close" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -46,8 +46,6 @@ import {Store} from "le5le-store";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show768Menu: true,
|
||||
|
||||
version: window.systemInfo.version
|
||||
}
|
||||
},
|
||||
@ -63,6 +61,10 @@ export default {
|
||||
return this.$route.name
|
||||
},
|
||||
|
||||
show768Menu() {
|
||||
return this.routeName === 'manage-setting'
|
||||
},
|
||||
|
||||
menu() {
|
||||
let menu = [
|
||||
{path: 'personal', name: '个人设置'},
|
||||
@ -71,6 +73,13 @@ export default {
|
||||
if (this.userIsAdmin) {
|
||||
menu.push(...[
|
||||
{path: 'system', name: '系统设置', divided: true},
|
||||
{path: 'clearCache', name: '清除缓存'},
|
||||
{path: 'logout', name: '退出登录'},
|
||||
])
|
||||
} else {
|
||||
menu.push(...[
|
||||
{path: 'clearCache', name: '清除缓存', divided: true},
|
||||
{path: 'logout', name: '退出登录'},
|
||||
])
|
||||
}
|
||||
return menu;
|
||||
@ -92,11 +101,8 @@ export default {
|
||||
watch: {
|
||||
routeName: {
|
||||
handler(name) {
|
||||
if (name === 'manage-setting') {
|
||||
this.show768Menu = true;
|
||||
if (this.isDesktop) {
|
||||
this.goForward({name: 'manage-setting-personal'}, true);
|
||||
}
|
||||
if (name === 'manage-setting' && this.isDesktop) {
|
||||
this.goForward({name: 'manage-setting-personal'}, true);
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
@ -105,12 +111,38 @@ export default {
|
||||
|
||||
methods: {
|
||||
toggleRoute(path) {
|
||||
if (path == 'version') {
|
||||
Store.set('updateNotification', null);
|
||||
return;
|
||||
switch (path) {
|
||||
case 'clearCache':
|
||||
this.$store.dispatch("handleClearCache", null).then(() => {
|
||||
$A.setStorage("clearCache", $A.randomString(6))
|
||||
window.location.reload()
|
||||
}).catch(() => {
|
||||
window.location.reload()
|
||||
});
|
||||
break;
|
||||
|
||||
case 'logout':
|
||||
$A.modalConfirm({
|
||||
title: '退出登录',
|
||||
content: '你确定要登出系统?',
|
||||
onOk: () => {
|
||||
this.$store.dispatch("logout", false)
|
||||
}
|
||||
});
|
||||
break;
|
||||
|
||||
case 'version':
|
||||
Store.set('updateNotification', null);
|
||||
break;
|
||||
|
||||
case 'index':
|
||||
this.goForward({name: 'manage-setting'});
|
||||
break;
|
||||
|
||||
default:
|
||||
this.goForward({name: 'manage-setting-' + path});
|
||||
break;
|
||||
}
|
||||
this.show768Menu = false;
|
||||
this.goForward({name: 'manage-setting-' + path});
|
||||
},
|
||||
|
||||
classNameRoute(path, divided) {
|
||||
|
||||
21
resources/assets/sass/components/mobile.scss
vendored
21
resources/assets/sass/components/mobile.scss
vendored
@ -6,7 +6,7 @@
|
||||
right: 0;
|
||||
background-color: #f3f6fe;
|
||||
box-shadow: 0 0 2px rgba(28, 34, 43, 0.15);
|
||||
z-index: 99;
|
||||
z-index: 98;
|
||||
> ul {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -39,9 +39,26 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.mobile-back {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 200px;
|
||||
left: -50px;
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
z-index: 99;
|
||||
border-radius: 50%;
|
||||
transform: translate(-460px, -50%);
|
||||
transition: left 0.2s;
|
||||
&.show-back {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.mobile-tabbar {
|
||||
.mobile-tabbar,
|
||||
.mobile-back {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
24
resources/assets/sass/dark.scss
vendored
24
resources/assets/sass/dark.scss
vendored
@ -160,18 +160,20 @@ body.dark-mode-reverse {
|
||||
|
||||
.dialog-wrapper {
|
||||
.dialog-nav {
|
||||
.dialog-avatar {
|
||||
.icon-avatar {
|
||||
color: #1c1917;
|
||||
}
|
||||
}
|
||||
.dialog-title {
|
||||
.main-title {
|
||||
> h2 {
|
||||
color: #555;
|
||||
.dialog-block {
|
||||
.dialog-avatar {
|
||||
.icon-avatar {
|
||||
color: #1c1917;
|
||||
}
|
||||
.top-text {
|
||||
color: #000000;
|
||||
}
|
||||
.dialog-title {
|
||||
.main-title {
|
||||
> h2 {
|
||||
color: #555;
|
||||
}
|
||||
.top-text {
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -46,125 +46,137 @@
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-avatar {
|
||||
flex-shrink: 0;
|
||||
margin-right: 12px;
|
||||
|
||||
.user-avatar,
|
||||
.icon-avatar {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
margin: 2px;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.icon-avatar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
font-size: 26px;
|
||||
background-color: #61B2F9;
|
||||
color: #ffffff;
|
||||
|
||||
&.project {
|
||||
background-color: #6E99EB;
|
||||
}
|
||||
|
||||
&.task {
|
||||
background-color: #9B96DF;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-title {
|
||||
.dialog-block {
|
||||
flex: 1;
|
||||
width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.main-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 22px;
|
||||
max-width: 100%;
|
||||
.dialog-avatar {
|
||||
flex-shrink: 0;
|
||||
margin-right: 12px;
|
||||
|
||||
.ivu-tag {
|
||||
.user-avatar,
|
||||
.icon-avatar {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
margin: 2px;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
margin: 0 6px 0 0;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
&.ivu-tag-success {
|
||||
padding: 0 6px;
|
||||
.icon-avatar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
font-size: 26px;
|
||||
background-color: #61B2F9;
|
||||
color: #ffffff;
|
||||
|
||||
&.project {
|
||||
background-color: #6E99EB;
|
||||
}
|
||||
}
|
||||
|
||||
.ivu-icon {
|
||||
font-size: 18px;
|
||||
margin-right: 6px;
|
||||
|
||||
&.completed {
|
||||
color: $primary-color;
|
||||
&.task {
|
||||
background-color: #9B96DF;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
> h2 {
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
> em {
|
||||
flex-shrink: 0;
|
||||
font-style: normal;
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
padding-left: 6px;
|
||||
}
|
||||
|
||||
.top-text {
|
||||
flex-shrink: 0;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
padding: 0 6px;
|
||||
border-radius: 4px;
|
||||
margin-left: 10px;
|
||||
background-color: #8BCF70;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
flex-shrink: 0;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
padding-top: 2px;
|
||||
color: #aaaaaa;
|
||||
white-space: normal;
|
||||
.dialog-title {
|
||||
flex: 1;
|
||||
width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
&.pointer {
|
||||
cursor: pointer;
|
||||
.main-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 22px;
|
||||
max-width: 100%;
|
||||
|
||||
&:hover {
|
||||
color: #888888;
|
||||
.ivu-tag {
|
||||
flex-shrink: 0;
|
||||
margin: 0 6px 0 0;
|
||||
padding: 0 5px;
|
||||
|
||||
&.ivu-tag-success {
|
||||
padding: 0 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.ivu-icon {
|
||||
font-size: 18px;
|
||||
margin-right: 6px;
|
||||
|
||||
&.completed {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
> h2 {
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
> em {
|
||||
flex-shrink: 0;
|
||||
font-style: normal;
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
padding-left: 6px;
|
||||
}
|
||||
|
||||
.top-text {
|
||||
flex-shrink: 0;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
padding: 0 6px;
|
||||
border-radius: 4px;
|
||||
margin-left: 10px;
|
||||
background-color: #8BCF70;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
flex-shrink: 0;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
padding-top: 2px;
|
||||
color: #aaaaaa;
|
||||
white-space: normal;
|
||||
|
||||
&.pointer {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: #888888;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-back,
|
||||
.dialog-create {
|
||||
cursor: pointer;
|
||||
margin-left: 24px;
|
||||
font-size: 20px;
|
||||
font-size: 22px;
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
||||
.dialog-back {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-scroller {
|
||||
@ -813,6 +825,59 @@
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.dialog-wrapper {
|
||||
.dialog-nav {
|
||||
height: 60px;
|
||||
padding: 0;
|
||||
justify-content: center;
|
||||
|
||||
&.completed {
|
||||
&:after {
|
||||
right: 14px;
|
||||
}
|
||||
.dialog-title {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-back,
|
||||
.dialog-create {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
width: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.dialog-back {
|
||||
right: auto;
|
||||
left: 0;
|
||||
> i {
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
.dialog-block {
|
||||
margin: 0 60px;
|
||||
justify-content: center;
|
||||
.dialog-avatar {
|
||||
display: none;
|
||||
}
|
||||
.dialog-title {
|
||||
flex: unset;
|
||||
width: unset;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
.sub-title {
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.dialog-scroller {
|
||||
padding: 0 14px;
|
||||
}
|
||||
.dialog-footer {
|
||||
padding: 0 20px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
@ -67,21 +67,6 @@
|
||||
.dialog-nav {
|
||||
padding: 0 20px;
|
||||
}
|
||||
.dialog-footer {
|
||||
.dialog-input {
|
||||
.dialog-back {
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 64px;
|
||||
height: 100%;
|
||||
max-height: 64px;
|
||||
font-size: 26px;
|
||||
margin-left: -20px;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -94,18 +79,10 @@
|
||||
}
|
||||
.dialog-nav {
|
||||
padding: 0 12px;
|
||||
height: 58px;
|
||||
height: 64px;
|
||||
}
|
||||
.dialog-scroller {
|
||||
padding: 0 20px;
|
||||
}
|
||||
.dialog-footer {
|
||||
.dialog-input {
|
||||
align-items: flex-end;
|
||||
.dialog-back {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
padding: 0 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1029,7 +1029,10 @@
|
||||
display: block;
|
||||
.project-title {
|
||||
float: left;
|
||||
padding-bottom: 4px;
|
||||
padding-bottom: 8px;
|
||||
> h1 {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
.project-icons {
|
||||
float: right;
|
||||
|
||||
34
resources/assets/sass/pages/page-messenger.scss
vendored
34
resources/assets/sass/pages/page-messenger.scss
vendored
@ -172,7 +172,6 @@
|
||||
}
|
||||
}
|
||||
.dialog-text {
|
||||
max-width: 170px;
|
||||
color: #999999;
|
||||
font-size: 12px;
|
||||
line-height: 24px;
|
||||
@ -352,23 +351,6 @@
|
||||
height: 100%;
|
||||
display: flex;
|
||||
position: relative;
|
||||
.dialog-wrapper {
|
||||
.dialog-footer {
|
||||
.dialog-input {
|
||||
.dialog-back {
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 64px;
|
||||
height: 100%;
|
||||
max-height: 64px;
|
||||
font-size: 26px;
|
||||
margin-left: -20px;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.msg-dialog-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -420,22 +402,6 @@
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
.messenger-msg {
|
||||
.dialog-wrapper {
|
||||
.dialog-nav {
|
||||
height: 54px;
|
||||
justify-content: center;
|
||||
}
|
||||
.dialog-footer {
|
||||
.dialog-input {
|
||||
align-items: flex-end;
|
||||
.dialog-back {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
10
resources/assets/sass/pages/page-setting.scss
vendored
10
resources/assets/sass/pages/page-setting.scss
vendored
@ -297,6 +297,12 @@
|
||||
}
|
||||
> ul {
|
||||
padding: 12px 32px;
|
||||
> li {
|
||||
padding: 0 8px;
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -312,8 +318,8 @@
|
||||
justify-content: center;
|
||||
> button {
|
||||
flex: 1;
|
||||
height: 42px;
|
||||
line-height: 40px;
|
||||
height: 38px;
|
||||
line-height: 36px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user