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

使用element-ui Tooltip组件

Browse Source
This commit is contained in:
kuaifan 2021-06-08 16:11:51 +08:00
parent 399cc1fb8f
commit 6aff8eeb3f
17 changed files with 154 additions and 215 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -34,6 +34,7 @@
},
"dependencies": {
"echarts": "^5.1.1",
"element-ui": "^2.15.2",
"tinymce": "^5.8.1",
"view-design-hi": "^4.5.0-11",
"vue-clipboard2": "^0.3.1",

3
resources/assets/js/app.js vendored
View File

@ -29,6 +29,9 @@ Vue.component('TagInput', TagInput)
Vue.component('TableAction', TableAction);
Vue.component('UserAvatar', UserAvatar);
import { Tooltip } from 'element-ui';
Vue.component('ETooltip', Tooltip);
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)

13
resources/assets/js/components/AutoTip.vue
View File

@ -1,10 +1,17 @@
<template>
<Tooltip transfer :content="text" :placement="placement" :theme="tooltipTheme" :delay="delay" :disabled="!showTooltip" :max-width="tooltipMaxWidth" class="ivu-table-cell-tooltip">
<span ref="content" @mouseenter="handleTooltipIn" class="ivu-table-cell-tooltip-content">
<ETooltip
:content="text"
:placement="placement"
:theme="tooltipTheme"
:delay="delay"
:disabled="!showTooltip"
:max-width="tooltipMaxWidth"
transfer>
<span ref="content" @mouseenter="handleTooltipIn" class="auto-tip-content">
<template v-if="existSlot"><slot/></template>
<template v-else>{{text}}</template>
</span>
</Tooltip>
</ETooltip>
</template>
<script>

8
resources/assets/js/components/ScrollerY.vue
View File

@ -144,12 +144,10 @@ export default {
}
},
scrollToBottom(animate) {
this.scrollTo(this.$refs.scrollerView.scrollHeight, animate);
},
autoToBottom() {
this.autoBottom && this.$refs.bottom.scrollIntoView(false);
if (this.autoBottom && this.$refs.bottom) {
this.$refs.bottom.scrollIntoView(false);
}
},
scrollInfo() {

23
resources/assets/js/components/UserAvatar.vue
View File

@ -1,13 +1,13 @@
<template>
<Tooltip v-if="user"
<ETooltip v-if="user"
class="common-avatar"
:delay="600"
:disabled="tooltipDisabled"
:transfer="transfer">
:open-delay="600"
:disabled="tooltipDisabled">
<div slot="content" class="common-avatar-transfer">
<slot/>
<p>{{$L('昵称')}}: {{user.nickname}}</p>
<p>{{$L('职位/职称')}}: {{user.profession || '-'}}</p>
<div v-if="userId != userid" class="avatar-icons">
<div v-if="userId != userid && !hideIconMenu" class="avatar-icons">
<Icon type="ios-chatbubbles" @click="openDialog"/>
</div>
</div>
@ -18,7 +18,7 @@
</div>
<div v-if="showName" class="avatar-name">{{user.nickname}}</div>
</div>
</Tooltip>
</ETooltip>
</template>
<script>
@ -40,14 +40,14 @@
type: Boolean,
default: false
},
transfer: {
type: Boolean,
default: true
},
tooltipDisabled: {
type: Boolean,
default: false
},
hideIconMenu: {
type: Boolean,
default: false
},
},
data() {
return {
@ -105,9 +105,8 @@
},
openDialog() {
this.$store.state.method.setStorage('messengerDialogId', 0)
this.$store.commit("openDialogUser", this.userid);
this.goForward({path: '/manage/messenger'});
this.$store.commit("openDialogUser", this.userid);
}
}
};

56
resources/assets/js/pages/manage/components/ProjectList.vue
View File

@ -11,18 +11,20 @@
<div class="project-icobox">
<ul class="project-icons">
<li>
<UserAvatar :userid="projectDetail.owner_userid" :size="36"/>
<UserAvatar :userid="projectDetail.owner_userid" :size="36">
<p>{{$L('项目负责人')}}</p>
</UserAvatar>
</li>
<li class="project-icon" @click="addTaskOpen(0)">
<Icon type="md-add" />
</li>
<li class="project-icon">
<Tooltip theme="light" :always="searchText!=''" transfer>
<li :class="['project-icon', searchText!='' ? 'active' : '']">
<ETooltip :value="searchText!=''" :manual="searchText!=''" transfer>
<Icon type="ios-search" />
<div slot="content">
<Input v-model="searchText" :placeholder="$L('名称、描述...')" clearable autofocus/>
</div>
</Tooltip>
</ETooltip>
</li>
<li :class="['project-icon', projectChatShow ? 'active' : '']" @click="toggleBoolean('projectChatShow')">
<Icon type="ios-chatbubbles" />
@ -66,7 +68,7 @@
:class="['column-head', column.color ? 'custom-color' : '']"
:style="column.color ? {backgroundColor: column.color}:null">
<div class="column-head-title">
<span><AutoTip>{{column.name}}</AutoTip></span>
<span><AutoTip>{{column.name}}{{column.name}}{{column.name}}{{column.name}}{{column.name}}{{column.name}}</AutoTip></span>
<em>({{column.project_task.length}})</em>
</div>
<div class="column-head-icon">
@ -127,14 +129,13 @@
</div>
<div class="task-progress">
<Progress :percent="item.percent" :stroke-width="6" />
<Tooltip
<ETooltip
v-if="item.end_at"
:class="['task-time', item.today ? 'today' : '', item.overdue ? 'overdue' : '']"
:delay="600"
:content="item.end_at"
transfer>
<Icon type="ios-time-outline"/>{{ expiresFormat(item.end_at) }}
</Tooltip>
:open-delay="600"
:content="item.end_at">
<div><Icon type="ios-time-outline"/>{{ expiresFormat(item.end_at) }}</div>
</ETooltip>
</div>
<em v-if="item.p_name" class="priority-color" :style="{backgroundColor:item.p_color}"></em>
</div>
@ -209,14 +210,13 @@
</ul>
</Col>
<Col span="3">
<Tooltip
<ETooltip
v-if="item.end_at"
:class="['task-time', item.today ? 'today' : '', item.overdue ? 'overdue' : '']"
:delay="600"
:content="item.end_at"
transfer>
{{item.end_at ? expiresFormat(item.end_at) : ''}}
</Tooltip>
:open-delay="600"
:content="item.end_at">
<div>{{item.end_at ? expiresFormat(item.end_at) : ''}}</div>
</ETooltip>
</Col>
<em v-if="item.p_name" class="priority-color" :style="{backgroundColor:item.p_color}"></em>
</Row>
@ -267,14 +267,13 @@
</ul>
</Col>
<Col span="3">
<Tooltip
<ETooltip
v-if="item.end_at"
:class="['task-time', item.today ? 'today' : '', item.overdue ? 'overdue' : '']"
:delay="600"
:content="item.end_at"
transfer>
{{item.end_at ? expiresFormat(item.end_at) : ''}}
</Tooltip>
:open-delay="600"
:content="item.end_at">
<div>{{item.end_at ? expiresFormat(item.end_at) : ''}}</div>
</ETooltip>
</Col>
<em v-if="item.p_name" class="priority-color" :style="{backgroundColor:item.p_color}"></em>
</Row>
@ -314,14 +313,13 @@
</ul>
</Col>
<Col span="3">
<Tooltip
<ETooltip
v-if="item.end_at"
:class="['task-time', item.today ? 'today' : '', item.overdue ? 'overdue' : '']"
:delay="600"
:content="item.end_at"
transfer>
{{item.end_at ? expiresFormat(item.end_at) : ''}}
</Tooltip>
:open-delay="600"
:content="item.end_at">
<div>{{item.end_at ? expiresFormat(item.end_at) : ''}}</div>
</ETooltip>
</Col>
<em v-if="item.p_name" class="priority-color" :style="{backgroundColor:item.p_color}"></em>
</Row>

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

@ -22,13 +22,13 @@
<Button :class="{advanced: advanced}" @click="advanced=!advanced">{{$L('高级选项')}}</Button>
<ul class="advanced-priority">
<li v-for="(item, key) in taskPriority" :key="key">
<Tooltip :content="item.name + ' (' + item.days + $L('天') + ')'">
<ETooltip :content="item.name + ' (' + item.days + $L('天') + ')'">
<i
class="iconfont"
:style="{color:item.color}"
v-html="value.p_name == item.name ? '&#xe61d;' : '&#xe61c;'"
@click="choosePriority(item)"></i>
</Tooltip>
</ETooltip>
</li>
</ul>
</div>

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

@ -17,13 +17,13 @@
<div class="priority">
<ul>
<li v-for="(item, key) in taskPriority" :key="key">
<Tooltip v-if="active" :content="item.name + ' (' + item.days + $L('天') + ')'" transfer>
<ETooltip v-if="active" :content="item.name + ' (' + item.days + $L('天') + ')'">
<i
class="iconfont"
:style="{color:item.color}"
v-html="addData.p_name == item.name ? '&#xe61d;' : '&#xe61c;'"
@click="choosePriority(item)"></i>
</Tooltip>
</ETooltip>
</li>
</ul>
<Icon type="md-settings" @click="onPriority"/>

2
resources/assets/js/pages/manage/messenger.vue
View File

@ -17,7 +17,7 @@
:class="{active: dialog.id == dialogId}"
@click="openDialog(dialog)">
<Icon v-if="dialog.type=='group'" class="icon-avatar" type="ios-people" />
<div v-else-if="dialog.dialog_user" class="user-avatar"><UserAvatar :userid="dialog.dialog_user.userid" :size="46"/></div>
<div v-else-if="dialog.dialog_user" class="user-avatar"><UserAvatar :userid="dialog.dialog_user.userid" :size="46" hide-icon-menu/></div>
<Icon v-else class="icon-avatar" type="md-person" />
<div class="dialog-box">
<div class="dialog-title">

12
resources/assets/js/pages/manage/setting/priority.vue
View File

@ -4,14 +4,14 @@
<Row class="setting-color">
<Col span="12">{{$L('名称')}}</Col>
<Col span="4">
<Tooltip :content="$L('数值越大级别越高')" max-width="auto" placement="top" transfer>
<Icon class="information" type="ios-information-circle-outline" /> {{$L('级别')}}
</Tooltip>
<ETooltip :content="$L('数值越大级别越高')" max-width="auto" placement="top" transfer>
<div><Icon class="information" type="ios-information-circle-outline" /> {{$L('级别')}}</div>
</ETooltip>
</Col>
<Col span="4">
<Tooltip :content="$L('任务完成时间')" max-width="auto" placement="top" transfer>
<Icon class="information" type="ios-information-circle-outline" /> {{$L('天数')}}
</Tooltip>
<ETooltip :content="$L('任务完成时间')" max-width="auto" placement="top" transfer>
<div><Icon class="information" type="ios-information-circle-outline" /> {{$L('天数')}}</div>
</ETooltip>
</Col>
<Col span="4">{{$L('颜色')}}</Col>
</Row>

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

@ -281,8 +281,9 @@ export default {
},
success: ({ret, data, msg}) => {
if (ret === 1) {
this.commit('getDialogUpdate', data);
state.method.setStorage('messengerDialogId', data.id)
this.commit('getDialogMsgList', data.id);
this.commit('getDialogUpdate', data);
} else {
$A.modalError(msg);
}

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

@ -1,10 +1,14 @@
@import "scrollbar";
@import "iconfont";
@import "loading";
@import "main";
@import "loading";
@import "iconfont";
@import "scrollbar";
@import "element";
@import "auto-tip";
@import "common-avatar";
@import "manage-wrapper";
@import "dialog-wrapper";
@import "messenger-wrapper";
@import "project-list";
@import "task-add";

6
resources/assets/sass/auto-tip.scss vendored Normal file
View File

@ -0,0 +1,6 @@
.auto-tip-content {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}

62
resources/assets/sass/common-avatar.scss vendored Executable file
View File

@ -0,0 +1,62 @@
.common-avatar {
position: relative;
&.avatar-wrapper {
display: flex;
align-items: center;
.avatar-box {
position: relative;
.avatar-text {
background-color: #87d068;
}
&:before {
content: "";
position: absolute;
right: 0;
bottom: 0;
width: 9px;
height: 9px;
border-radius: 50%;
background-color: #ff0000;
border: 1px solid #ffffff;
z-index: 1;
}
&.online {
&:before {
background-color: #87d068;
}
}
}
.avatar-name {
padding-left: 8px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
.common-avatar-transfer {
padding: 4px 2px;
line-height: 1.5;
> p {
padding: 1px 2px;
}
.avatar-icons {
margin-top: 12px;
border-top: 1px solid rgba(244, 244, 245, 0.5);
padding: 8px 0 2px;
display: flex;
align-items: center;
> i {
cursor: pointer;
font-size: 22px;
margin-right: 12px;
color: #F4F4F5;
&:last-child {
margin-right: 0;
}
&:hover {
color: #ffffff;
}
}
}
}

5
resources/assets/sass/element.scss vendored Normal file
View File

@ -0,0 +1,5 @@
$--tooltip-fill: #585E6A;
$--tooltip-border-color: #585E6A;
$--tooltip-font-size: 14px;
@import "~element-ui/packages/theme-chalk/src/tooltip";

129
resources/assets/sass/main.scss vendored
View File

@ -267,73 +267,6 @@ body {
background-color: #efefef;
}
}
.auto-height-top {
.ivu-table {
.ivu-table-body {
table {
td {
height: auto;
vertical-align: top;
.ivu-table-cell {
display: flex;
align-items: center;
min-height: 48px;
padding: 8px 12px;
.node-line {
max-width: 100%;
.td-ellipsis {
.remark-line {
margin: 2px 6px 2px 0;
&:hover {
border-color: #888;
}
}
.remark-tag {
margin: 0;
transform: scale(0.8);
}
.remark-icon {
cursor: pointer;
&:hover {
color: #2d8cf0;
}
.ivu-icon {
vertical-align: unset;
transform: scale(1.2);
&.ivu-icon-md-remove-circle {
background-image: url("data:image/svg+xml;base64,PHN2ZyB0PSIxNjIxMDAxMDg0MzAxIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjE4NjUiIHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2Ij48cGF0aCBkPSJNNTEyIDUxMm0tNTEyIDBhNTEyIDUxMiAwIDEgMCAxMDI0IDAgNTEyIDUxMiAwIDEgMC0xMDI0IDBaIiBmaWxsPSIjRkZGRkZGIiBwLWlkPSIxODY2Ij48L3BhdGg+PHBhdGggZD0iTTUxMiAwYTUxMiA1MTIgMCAxIDAgMCAxMDI0QTUxMiA1MTIgMCAwIDAgNTEyIDB6IG0zODQgNTEyYzAgODIuNzM5Mi0yNi40MTkyIDE1OS4zMzQ0LTcxLjA2NTYgMjIyLjEwNTZMMjg5Ljg5NDQgMTk5LjA2NTZBMzgxLjc0NzIgMzgxLjc0NzIgMCAwIDEgNTEyIDEyOCAzODQuNDA5NiAzODQuNDA5NiAwIDAgMSA4OTYgNTEyeiBtLTc2OCAwYzAtODMuMzUzNiAyNi43MjY0LTE2MC40NjA4IDcxLjk4NzItMjIzLjQzNjhsNTM1LjU1MiA1MzUuMzQ3MkEzODEuNzQ3MiAzODEuNzQ3MiAwIDAgMSA1MTIgODk2IDM4NC40MDk2IDM4NC40MDk2IDAgMCAxIDEyOCA1MTJ6IiBmaWxsPSIjZmYwMDAwIiBwLWlkPSIxODY3IiBkYXRhLXNwbS1hbmNob3ItaWQ9ImEzMTN4Ljc3ODEwNjkuMC5pMCIgY2xhc3M9InNlbGVjdGVkIj48L3BhdGg+PC9zdmc+");
background-repeat: no-repeat;
width: 12px;
height: 12px;
background-size: 94%;
background-position: center;
vertical-align: text-top;
&:before {
display: none;
}
}
}
}
.node-signal-box {
margin-left: 1px;
.node-ping-value {
margin-left: 2px;
}
}
.ivu-table-cell-tooltip {
width: auto;
.ivu-tooltip-rel {
max-width: 100%;
}
}
}
}
}
}
}
}
}
}
.common-user {
position: relative;
@ -359,68 +292,6 @@ body {
}
}
.common-avatar {
position: relative;
.avatar-wrapper {
display: flex;
align-items: center;
.avatar-box {
position: relative;
.avatar-text {
background-color: #87d068;
}
&:before {
content: "";
position: absolute;
right: 0;
bottom: 0;
width: 9px;
height: 9px;
border-radius: 50%;
background-color: #ff0000;
border: 1px solid #ffffff;
z-index: 1;
}
&.online {
&:before {
background-color: #87d068;
}
}
}
.avatar-name {
padding-left: 8px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
.common-avatar-transfer {
padding: 4px 2px;
> p {
padding: 1px 2px;
}
.avatar-icons {
margin-top: 12px;
border-top: 1px solid #F4F4F5;
padding: 8px 0 2px;
display: flex;
align-items: center;
> i {
cursor: pointer;
font-size: 22px;
margin-right: 12px;
color: #F4F4F5;
&:last-child {
margin-right: 0;
}
&:hover {
color: #ffffff;
}
}
}
}
.common-user-transfer {
.user-input-option {
display: flex;

28
resources/assets/sass/task-add.scss vendored
View File

@ -43,17 +43,9 @@
> li {
list-style: none;
margin-left: 3px;
.ivu-tooltip {
display: flex;
align-items: center;
.ivu-tooltip-rel {
height: 34px;
line-height: 1;
.iconfont {
font-size: 34px;
cursor: pointer;
}
}
.iconfont {
font-size: 34px;
cursor: pointer;
}
}
}
@ -134,17 +126,9 @@
> li {
list-style: none;
margin-right: 3px;
.ivu-tooltip {
display: flex;
align-items: center;
.ivu-tooltip-rel {
height: 22px;
line-height: 1;
.iconfont {
font-size: 22px;
cursor: pointer;
}
}
.iconfont {
font-size: 22px;
cursor: pointer;
}
}
}