github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2026-03-17 11:13:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

no message

Browse Source
This commit is contained in:
kuaifan 2022-06-06 14:03:50 +08:00
parent 2f76e932b0
commit c5c9e19f76
9 changed files with 328 additions and 305 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
resources/assets/js/pages/manage/components/DialogModal.vue
View File

@ -1,14 +1,16 @@
<template> <template>
<Modal <Modal
:value="show" :value="visible"
:mask="false" :mask="false"
:mask-closable="false" :mask-closable="false"
:footer-hide="true" :footer-hide="true"
:transition-names="['mobile-dialog', '']" :transition-names="['', '']"
:beforeClose="onBeforeClose" :beforeClose="onBeforeClose"
class-name="dialog-modal" class-name="dialog-modal"
fullscreen> fullscreen>
<DialogWrapper v-if="windowSmall && dialogId > 0" :dialogId="dialogId" :beforeBack="onBeforeClose"/> <transition name="mobile-dialog">
<DialogWrapper v-if="windowSmall && dialogId > 0" :dialogId="dialogId" :beforeBack="onBeforeClose"/>
</transition>
</Modal> </Modal>
</template> </template>
@ -23,6 +25,7 @@ body {
padding: 0; padding: 0;
.ivu-modal-content { .ivu-modal-content {
background: transparent;
.ivu-modal-close { .ivu-modal-close {
display: none; display: none;
@ -49,6 +52,13 @@ export default {
name: "DialogModal", name: "DialogModal",
components: {DialogWrapper}, components: {DialogWrapper},
data() {
return {
timer: null,
visible: false,
}
},
computed: { computed: {
...mapState(['dialogId']), ...mapState(['dialogId']),
@ -57,6 +67,19 @@ export default {
} }
}, },
watch: {
show(v) {
this.timer && clearTimeout(this.timer);
if (v) {
this.visible = true;
} else {
this.timer = setTimeout(_ => {
this.visible = false;
}, 300);
}
}
},
methods: { methods: {
onBeforeClose() { onBeforeClose() {
return new Promise(_ => { return new Promise(_ => {

114
resources/assets/js/pages/manage/components/DialogWrapper.vue
View File

@ -3,69 +3,70 @@
v-if="isReady" v-if="isReady"
class="dialog-wrapper" class="dialog-wrapper"
:class="wrapperClass" :class="wrapperClass"
:style="wrapperStyle"
@drop.prevent="chatPasteDrag($event, 'drag')" @drop.prevent="chatPasteDrag($event, 'drag')"
@dragover.prevent="chatDragOver(true, $event)" @dragover.prevent="chatDragOver(true, $event)"
@dragleave.prevent="chatDragOver(false, $event)" @dragleave.prevent="chatDragOver(false, $event)"
@touchmove="onTouchmove"> @touchmove="onTouchmove">
<!--顶部导航--> <!--顶部导航-->
<slot name="head"> <div class="dialog-nav" :style="navStyle">
<div class="dialog-nav" :class="{completed:$A.dialogCompleted(dialogData)}"> <slot name="head">
<div class="dialog-back" @click="onBack"> <div class="nav-wrapper" :class="{completed:$A.dialogCompleted(dialogData)}">
<i class="taskfont">&#xe72d;</i> <div class="dialog-back" @click="onBack">
<div v-if="msgUnreadOnly" class="back-num">{{msgUnreadOnly}}</div> <i class="taskfont">&#xe72d;</i>
</div> <div v-if="msgUnreadOnly" class="back-num">{{msgUnreadOnly}}</div>
<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">&#xe6f9;</i>
<i v-else-if="dialogData.group_type=='task'" class="taskfont icon-avatar task">&#xe6f4;</i>
<Icon v-else class="icon-avatar" type="ios-people" />
</template>
<div v-else-if="dialogData.dialog_user" class="user-avatar">
<UserAvatar :online.sync="dialogData.online_state" :userid="dialogData.dialog_user.userid" :size="42"/>
</div>
<Icon v-else class="icon-avatar" type="md-person" />
</div> </div>
<div class="dialog-title">
<div class="main-title"> <div class="dialog-block">
<template v-for="tag in $A.dialogTags(dialogData)" v-if="tag.color != 'success'"> <div class="dialog-avatar">
<Tag :color="tag.color" :fade="false">{{$L(tag.text)}}</Tag> <template v-if="dialogData.type=='group'">
<i v-if="dialogData.group_type=='project'" class="taskfont icon-avatar project">&#xe6f9;</i>
<i v-else-if="dialogData.group_type=='task'" class="taskfont icon-avatar task">&#xe6f4;</i>
<Icon v-else class="icon-avatar" type="ios-people" />
</template> </template>
<h2>{{dialogData.name}}</h2> <div v-else-if="dialogData.dialog_user" class="user-avatar">
<em v-if="peopleNum > 0">({{peopleNum}})</em> <UserAvatar :online.sync="dialogData.online_state" :userid="dialogData.dialog_user.userid" :size="42"/>
<label v-if="dialogData.top_at" class="top-text">{{$L('置顶')}}</label> </div>
<Icon v-else class="icon-avatar" type="md-person" />
</div> </div>
<template v-if="dialogData.type === 'group'"> <div class="dialog-title">
<div v-if="dialogData.group_type === 'project'" class="sub-title pointer" @click="openProject"> <div class="main-title">
{{$L('项目聊天室')}} {{$L('打开项目管理')}} <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>
<div v-else-if="dialogData.group_type === 'task'" class="sub-title pointer" @click="openTask"> <template v-if="dialogData.type === 'group'">
{{$L('任务聊天室')}} {{$L('查看任务详情')}} <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 v-else-if="dialogData.type === 'user'" :class="['sub-title', dialogData.online_state === true ? 'online' : 'offline']">
{{$L(dialogData.online_state === true ? '在线' : dialogData.online_state)}}
</div> </div>
</template>
<div v-else-if="dialogData.type === 'user'" :class="['sub-title', dialogData.online_state === true ? 'online' : 'offline']">
{{$L(dialogData.online_state === true ? '在线' : dialogData.online_state)}}
</div> </div>
</div> </div>
</div>
<template v-if="dialogData.type === 'group'"> <template v-if="dialogData.type === 'group'">
<ETooltip <ETooltip
v-if="dialogData.group_type === 'user'" v-if="dialogData.group_type === 'user'"
placement="top" placement="top"
:disabled="windowSmall" :disabled="windowSmall"
:openDelay="600" :openDelay="600"
:content="$L('群设置')"> :content="$L('群设置')">
<i class="taskfont dialog-create" @click="groupInfoShow = true">&#xe6e9;</i> <i class="taskfont dialog-create" @click="groupInfoShow = true">&#xe6e9;</i>
</ETooltip>
</template>
<ETooltip v-else-if="dialogData.type === 'user' && !isMyDialog" placement="top" :disabled="windowSmall" :content="$L('创建群组')">
<i class="taskfont dialog-create" @click="openCreateGroup">&#xe646;</i>
</ETooltip> </ETooltip>
</template> </div>
<ETooltip v-else-if="dialogData.type === 'user' && !isMyDialog" placement="top" :disabled="windowSmall" :content="$L('创建群组')"> </slot>
<i class="taskfont dialog-create" @click="openCreateGroup">&#xe646;</i> </div>
</ETooltip>
</div>
</slot>
<!--消息列表--> <!--消息列表-->
<DynamicScroller <DynamicScroller
@ -327,7 +328,7 @@ export default {
dialogDrag: false, dialogDrag: false,
groupInfoShow: false, groupInfoShow: false,
wrapperStyle: {}, navStyle: {},
operateVisible: false, operateVisible: false,
operateHasText: false, operateHasText: false,
@ -364,7 +365,8 @@ export default {
'cacheDialogs', 'cacheDialogs',
'dialogMsgs', 'dialogMsgs',
'wsOpenNum', 'wsOpenNum',
'touchBackInProgress' 'touchBackInProgress',
'taskId',
]), ]),
isReady() { isReady() {
@ -510,8 +512,8 @@ export default {
windowScrollY(val) { windowScrollY(val) {
if ($A.isIos()) { if ($A.isIos()) {
const {scrollE} = this.scrollInfo(); const {scrollE} = this.scrollInfo();
this.wrapperStyle = { this.navStyle = {
top: val + 'px' marginTop: val + 'px'
} }
if (scrollE <= 10) { if (scrollE <= 10) {
this.$nextTick(_ => { this.$nextTick(_ => {
@ -751,6 +753,9 @@ export default {
if (!this.dialogData.group_info) { if (!this.dialogData.group_info) {
return; return;
} }
if (this.windowSmall) {
this.$store.dispatch("openDialog", 0);
}
this.goForward({name: 'manage-project', params: {projectId:this.dialogData.group_info.id}}); this.goForward({name: 'manage-project', params: {projectId:this.dialogData.group_info.id}});
}, },
@ -758,6 +763,9 @@ export default {
if (!this.dialogData.group_info) { if (!this.dialogData.group_info) {
return; return;
} }
if (this.taskId > 0) {
this.$store.dispatch("openDialog", 0);
}
this.$store.dispatch("openTask", this.dialogData.group_info.id); this.$store.dispatch("openTask", this.dialogData.group_info.id);
}, },

4
resources/assets/js/pages/manage/components/ProjectDialog.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<DialogWrapper v-if="projectData.cacheParameter.chat" :dialog-id="projectData.dialog_id" class="project-dialog"> <DialogWrapper v-if="windowLarge && projectData.cacheParameter.chat" :dialog-id="projectData.dialog_id" class="project-dialog">
<template slot="head"> <template slot="head">
<div class="dialog-user"> <div class="dialog-user">
<div class="member-head"> <div class="member-head">
@ -14,7 +14,7 @@
</li> </li>
</ul> </ul>
</div> </div>
<div class="dialog-nav"> <div class="nav-wrapper">
<div class="dialog-title"> <div class="dialog-title">
<h2>{{$L('群聊')}}</h2> <h2>{{$L('群聊')}}</h2>
</div> </div>

7
resources/assets/js/pages/manage/components/ProjectPanel.vue
View File

@ -44,7 +44,7 @@
</div> </div>
</Tooltip> </Tooltip>
</li> </li>
<li :class="['project-icon', projectData.cacheParameter.chat ? 'active' : '']" @click="toggleParameter('chat')"> <li :class="['project-icon', windowLarge && projectData.cacheParameter.chat ? 'active' : '']" @click="toggleParameter('chat')">
<Icon class="menu-icon" type="ios-chatbubbles" /> <Icon class="menu-icon" type="ios-chatbubbles" />
<Badge class="menu-badge" :count="msgUnread"></Badge> <Badge class="menu-badge" :count="msgUnread"></Badge>
</li> </li>
@ -1420,6 +1420,11 @@ export default {
toggleParameter(data) { toggleParameter(data) {
if (data === 'completedTask') { if (data === 'completedTask') {
this.$store.dispatch("forgetTaskCompleteTemp", true); this.$store.dispatch("forgetTaskCompleteTemp", true);
} else if (data === 'chat') {
if (this.windowSmall) {
this.$store.dispatch('openDialog', this.projectData.dialog_id)
return;
}
} }
this.$store.dispatch('toggleProjectParameter', data); this.$store.dispatch('toggleProjectParameter', data);
}, },

4
resources/assets/js/pages/manage/components/TaskDetail.vue
View File

@ -554,6 +554,7 @@ export default {
'taskContents', 'taskContents',
'taskFiles', 'taskFiles',
'taskPriority', 'taskPriority',
'dialogId',
]), ]),
projectName() { projectName() {
@ -1111,6 +1112,9 @@ export default {
this.msgRecord = {}; this.msgRecord = {};
this.msgFile = []; this.msgFile = [];
this.msgText = ""; this.msgText = "";
if (this.dialogId > 0) {
this.$store.dispatch("openTask", 0);
}
this.$store.dispatch('openDialog', data.dialog_id) this.$store.dispatch('openDialog', data.dialog_id)
} else { } else {
this.sendDialogMsg(); this.sendDialogMsg();

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

@ -157,19 +157,21 @@ body.dark-mode-reverse {
.dialog-wrapper { .dialog-wrapper {
.dialog-nav { .dialog-nav {
.dialog-block { .nav-wrapper {
.dialog-avatar { .dialog-block {
.icon-avatar { .dialog-avatar {
color: #1c1917; .icon-avatar {
} color: #1c1917;
}
.dialog-title {
.main-title {
> h2 {
color: #555;
} }
.top-text { }
color: #000000; .dialog-title {
.main-title {
> h2 {
color: #555;
}
.top-text {
color: #000000;
}
} }
} }
} }

419
resources/assets/sass/pages/components/dialog-wrapper.scss vendored
View File

@ -18,176 +18,180 @@
} }
.dialog-nav { .dialog-nav {
display: flex; width: 100%;
align-items: center;
padding: 0 22px;
height: 68px;
position: relative;
&:before { .nav-wrapper {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-color: #f4f5f5;
}
&.completed {
&:after {
content: "\f373";
font-family: Ionicons, serif;
pointer-events: none;
position: absolute;
top: 50%;
right: 22px;
transform: translateY(-50%);
font-size: 40px;
color: #19be6b;
opacity: .2;
z-index: 1;
}
.dialog-title {
padding-right: 52px;
}
}
.dialog-block {
flex: 1;
width: 0;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 22px;
height: 68px;
position: relative;
.dialog-avatar { &:before {
flex-shrink: 0; content: "";
margin-right: 12px; position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-color: #f4f5f5;
}
.user-avatar, &.completed {
.icon-avatar { &:after {
width: 42px; content: "\f373";
height: 42px; font-family: Ionicons, serif;
margin: 2px; pointer-events: none;
flex-grow: 0; position: absolute;
flex-shrink: 0; top: 50%;
right: 22px;
transform: translateY(-50%);
font-size: 40px;
color: #19be6b;
opacity: .2;
z-index: 1;
} }
.icon-avatar { .dialog-title {
display: flex; padding-right: 52px;
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; flex: 1;
width: 0; width: 0;
display: flex; display: flex;
flex-direction: column; align-items: center;
justify-content: center;
.main-title { .dialog-avatar {
display: flex; flex-shrink: 0;
align-items: center; margin-right: 12px;
line-height: 22px;
max-width: 100%;
.ivu-tag { .user-avatar,
.icon-avatar {
width: 42px;
height: 42px;
margin: 2px;
flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
margin: 0 6px 0 0; }
padding: 0 5px;
&.ivu-tag-success { .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 {
flex: 1;
width: 0;
display: flex;
flex-direction: column;
justify-content: center;
.main-title {
display: flex;
align-items: center;
line-height: 22px;
max-width: 100%;
.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; padding: 0 6px;
border-radius: 4px;
margin-left: 10px;
background-color: $primary-color;
color: #FFFFFF;
text-align: center;
white-space: nowrap;
} }
} }
.ivu-icon { .sub-title {
font-size: 18px; flex-shrink: 0;
margin-right: 6px; font-size: 12px;
line-height: 20px;
padding-top: 2px;
color: #aaaaaa;
white-space: normal;
&.completed { &.pointer {
cursor: pointer;
&:hover {
color: #888888;
}
}
&.online {
color: $primary-color; 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: $primary-color;
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;
}
}
&.online {
color: $primary-color;
}
} }
} }
}
.dialog-back, .dialog-back,
.dialog-create { .dialog-create {
cursor: pointer; cursor: pointer;
margin-left: 24px; margin-left: 24px;
font-size: 22px; font-size: 22px;
color: $primary-text-color; color: $primary-text-color;
} }
.dialog-back { .dialog-back {
display: none; display: none;
}
} }
} }
@ -1038,74 +1042,76 @@
@media (max-width: 768px) { @media (max-width: 768px) {
.dialog-wrapper { .dialog-wrapper {
background-color: #f8f8f8;
.dialog-nav { .dialog-nav {
height: 52px; .nav-wrapper {
padding: 0; height: 52px;
justify-content: center; padding: 0;
background-color: #f8f8f8;
&.completed {
&:after {
right: 14px;
}
.dialog-title {
padding-right: 0;
}
}
.dialog-back,
.dialog-create {
position: absolute;
top: 0;
bottom: 0;
right: 0;
margin: 0;
width: 52px;
display: flex;
align-items: center;
justify-content: center; justify-content: center;
}
.dialog-back { &.completed {
padding-right: 6px; &:after {
right: auto; right: 14px;
left: 0;
> i {
font-size: 26px;
}
.back-num {
font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
position: absolute;
top: 50%;
left: 32px;
background: #e6ebf1;
color: $primary-title-color;
transform: translate(0, -50%);
font-weight: 500;
font-size: 14px;
border-radius: 12px;
min-width: 24px;
height: 24px;
line-height: 24px;
text-align: center;
padding: 0 6px;
}
}
.dialog-block {
margin: 0 80px;
justify-content: center;
.dialog-avatar {
display: none;
}
.dialog-title {
flex: unset;
width: unset;
overflow: hidden;
text-align: center;
.main-title {
justify-content: center;
} }
.sub-title { .dialog-title {
line-height: 18px; padding-right: 0;
}
}
.dialog-back,
.dialog-create {
position: absolute;
top: 0;
bottom: 0;
right: 0;
margin: 0;
width: 52px;
display: flex;
align-items: center;
justify-content: center;
}
.dialog-back {
padding-right: 6px;
right: auto;
left: 0;
> i {
font-size: 26px;
}
.back-num {
font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
position: absolute;
top: 50%;
left: 32px;
background: #e6ebf1;
color: $primary-title-color;
transform: translate(0, -50%);
font-weight: 500;
font-size: 14px;
border-radius: 12px;
min-width: 24px;
height: 24px;
line-height: 24px;
text-align: center;
padding: 0 6px;
}
}
.dialog-block {
margin: 0 80px;
justify-content: center;
.dialog-avatar {
display: none;
}
.dialog-title {
flex: unset;
width: unset;
overflow: hidden;
text-align: center;
.main-title {
justify-content: center;
}
.sub-title {
line-height: 18px;
}
} }
} }
} }
@ -1115,6 +1121,7 @@
padding-left: 14px; padding-left: 14px;
overscroll-behavior: none; overscroll-behavior: none;
user-select: none; user-select: none;
background-color: #ffffff;
.dialog-item { .dialog-item {
.dialog-view { .dialog-view {

18
resources/assets/sass/pages/components/project-dialog.scss vendored
View File

@ -64,22 +64,8 @@
} }
} }
.dialog-nav { .dialog-nav {
padding: 0 20px; .nav-wrapper {
} padding: 0 20px;
}
@media (max-width: 768px) {
.project-dialog {
.dialog-user {
margin-top: 16px;
padding: 0 12px;
.member-list {
display: none;
}
}
.dialog-nav {
padding: 0 12px;
height: 64px;
} }
} }
} }

12
resources/assets/sass/pages/page-project.scss vendored
View File

@ -18,18 +18,6 @@
} }
} }
@media (max-width: 768px) {
.page-project {
.project-dialog {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
max-width: none;
}
}
}
@media (max-height: 700px) { @media (max-height: 700px) {
.page-project { .page-project {
.project-panel { .project-panel {