快速添加任务
This commit is contained in:
kuaifan
parent
ab5a7544f2
commit
b0a5a73153
@ -374,7 +374,7 @@ class ProjectController extends AbstractController
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 【消息】消息列表
|
* 消息列表
|
||||||
*
|
*
|
||||||
* @apiParam {Number} project_id 项目ID
|
* @apiParam {Number} project_id 项目ID
|
||||||
* @apiParam {Number} [task_id] 任务ID
|
* @apiParam {Number} [task_id] 任务ID
|
||||||
@ -413,7 +413,7 @@ class ProjectController extends AbstractController
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 【消息】发送消息
|
* 发送消息
|
||||||
*
|
*
|
||||||
* @apiParam {Number} project_id 项目ID
|
* @apiParam {Number} project_id 项目ID
|
||||||
* @apiParam {Number} [task_id] 任务ID
|
* @apiParam {Number} [task_id] 任务ID
|
||||||
@ -455,7 +455,54 @@ class ProjectController extends AbstractController
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* {post}【任务】添加任务
|
* 添加、修改 任务列表
|
||||||
|
*
|
||||||
|
* @apiParam {Number} project_id 项目ID
|
||||||
|
* @apiParam {String} name 列表名称
|
||||||
|
*/
|
||||||
|
public function column__add()
|
||||||
|
{
|
||||||
|
$user = User::authE();
|
||||||
|
if (Base::isError($user)) {
|
||||||
|
return $user;
|
||||||
|
} else {
|
||||||
|
$user = User::IDE($user['data']);
|
||||||
|
}
|
||||||
|
//
|
||||||
|
$project_id = intval(Request::input('project_id'));
|
||||||
|
$column_id = intval(Request::input('column_id'));
|
||||||
|
$name = trim(Request::input('name'));
|
||||||
|
if (empty($name)) {
|
||||||
|
return Base::retError('列表名称不能为空');
|
||||||
|
}
|
||||||
|
// 项目
|
||||||
|
$project = Project::select($this->projectSelect)
|
||||||
|
->join('project_users', 'projects.id', '=', 'project_users.project_id')
|
||||||
|
->where('projects.id', $project_id)
|
||||||
|
->where('project_users.userid', $user->userid)
|
||||||
|
->first();
|
||||||
|
if (empty($project)) {
|
||||||
|
return Base::retError('项目不存在或不在成员列表内');
|
||||||
|
}
|
||||||
|
//
|
||||||
|
if ($column_id > 0) {
|
||||||
|
$column = ProjectColumn::find($column_id);
|
||||||
|
} else {
|
||||||
|
$column = ProjectColumn::createInstance([
|
||||||
|
'project_id' => $project->id,
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
if ($column) {
|
||||||
|
$column->name = $name;
|
||||||
|
$column->save();
|
||||||
|
return Base::retSuccess('添加成功', $column);
|
||||||
|
} else {
|
||||||
|
return Base::retError('列表不存在');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* {post}添加任务
|
||||||
*
|
*
|
||||||
* @apiParam {Number} project_id 项目ID
|
* @apiParam {Number} project_id 项目ID
|
||||||
* @apiParam {Number} [column_id] 列表ID，留空取第一个
|
* @apiParam {Number} [column_id] 列表ID，留空取第一个
|
||||||
|
|||||||
44
resources/assets/js/functions/web.js
vendored
44
resources/assets/js/functions/web.js
vendored
@ -178,6 +178,50 @@
|
|||||||
return config;
|
return config;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
modalInput(config, millisecond = 0) {
|
||||||
|
if (millisecond > 0) {
|
||||||
|
setTimeout(() => { $A.modalInput(config) }, millisecond);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (typeof config === "string") config = {title:config};
|
||||||
|
$A.Modal.confirm({
|
||||||
|
render: (h) => {
|
||||||
|
return h('div', [
|
||||||
|
h('div', {
|
||||||
|
style: {
|
||||||
|
fontSize: '16px',
|
||||||
|
fontWeight: '500',
|
||||||
|
marginBottom: '20px',
|
||||||
|
}
|
||||||
|
}, $A.L(config.title)),
|
||||||
|
h('Input', {
|
||||||
|
props: {
|
||||||
|
value: config.value,
|
||||||
|
placeholder: $A.L(config.placeholder)
|
||||||
|
},
|
||||||
|
on: {
|
||||||
|
input: (val) => {
|
||||||
|
config.value = val;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
])
|
||||||
|
},
|
||||||
|
loading: true,
|
||||||
|
onOk: () => {
|
||||||
|
if (typeof config.onOk === "function") {
|
||||||
|
if (config.onOk(config.value, () => {
|
||||||
|
$A.Modal.remove();
|
||||||
|
}) === true) {
|
||||||
|
$A.Modal.remove();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
$A.Modal.remove();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
modalConfirm(config, millisecond = 0) {
|
modalConfirm(config, millisecond = 0) {
|
||||||
if (millisecond > 0) {
|
if (millisecond > 0) {
|
||||||
setTimeout(() => { $A.modalConfirm(config) }, millisecond);
|
setTimeout(() => { $A.modalConfirm(config) }, millisecond);
|
||||||
|
|||||||
@ -56,10 +56,25 @@
|
|||||||
<ul>
|
<ul>
|
||||||
<li v-for="column in projectDetail.project_column">
|
<li v-for="column in projectDetail.project_column">
|
||||||
<div class="column-head">
|
<div class="column-head">
|
||||||
<div class="column-head-title">{{column.name}}</div>
|
<div class="column-head-title">
|
||||||
<div :class="['column-head-num', column.project_task.length > 0 ? 'have' : '']">{{column.project_task.length}}</div>
|
<span><AutoTip>{{column.name}}</AutoTip></span>
|
||||||
|
<em>({{column.project_task.length}})</em>
|
||||||
</div>
|
</div>
|
||||||
<ul class="overlay-y">
|
<div class="column-head-icon">
|
||||||
|
<Icon type="ios-more" />
|
||||||
|
<Icon type="md-add" @click="addBefore(column)" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ul class="overlay-y" :ref="'column_' + column.id">
|
||||||
|
<li v-if="column.addBefore===true" class="task-add">
|
||||||
|
<TaskAddSimple
|
||||||
|
:column-id="column.id"
|
||||||
|
:project-id="projectDetail.id"
|
||||||
|
:add-before="true"
|
||||||
|
@on-close="column.addBefore=false"
|
||||||
|
@on-priority="addOpen"
|
||||||
|
auto-active/>
|
||||||
|
</li>
|
||||||
<li v-for="item in panelTask(column.project_task)">
|
<li v-for="item in panelTask(column.project_task)">
|
||||||
<div :class="['task-head', item.desc ? 'has-desc' : '']">
|
<div :class="['task-head', item.desc ? 'has-desc' : '']">
|
||||||
<div class="task-title"><pre>{{item.name}}</pre></div>
|
<div class="task-title"><pre>{{item.name}}</pre></div>
|
||||||
@ -91,10 +106,16 @@
|
|||||||
</div>
|
</div>
|
||||||
<em v-if="item.p_name" class="priority-color" :style="{backgroundColor:item.p_color}"></em>
|
<em v-if="item.p_name" class="priority-color" :style="{backgroundColor:item.p_color}"></em>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
<li class="task-add">
|
||||||
<div class="column-add" @click="addOpen(column.id)"><Icon type="md-add" /></div>
|
<TaskAddSimple
|
||||||
|
:column-id="column.id"
|
||||||
|
:project-id="projectDetail.id"
|
||||||
|
@on-priority="addOpen"/>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="add-column" @click="addColumn"><Icon type="md-add" />{{$L('添加列表')}}</li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="project-table">
|
<div v-else class="project-table">
|
||||||
<div class="project-table-head">
|
<div class="project-table-head">
|
||||||
@ -333,508 +354,15 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
:global {
|
|
||||||
.project-list {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
.project-head {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
margin: 32px 32px 16px;
|
|
||||||
.project-titbox {
|
|
||||||
flex: 1;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
.project-title {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
> h1 {
|
|
||||||
color: #333333;
|
|
||||||
font-size: 28px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
.project-load {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-left: 18px;
|
|
||||||
.common-loading {
|
|
||||||
width: 22px;
|
|
||||||
height: 22px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.project-subtitle {
|
|
||||||
color: #999999;
|
|
||||||
margin-top: 18px;
|
|
||||||
line-height: 24px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.project-icobox {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
height: 100%;
|
|
||||||
margin-top: 2px;
|
|
||||||
margin-left: 80px;
|
|
||||||
.project-icons {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex-shrink: 0;
|
|
||||||
> li {
|
|
||||||
list-style: none;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 36px;
|
|
||||||
height: 36px;
|
|
||||||
border-radius: 50%;
|
|
||||||
position: relative;
|
|
||||||
margin-left: 16px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.3s;
|
|
||||||
&:hover {
|
|
||||||
box-shadow: 0 0 6px #cccccc;
|
|
||||||
}
|
|
||||||
&.project-icon {
|
|
||||||
border-radius: 50%;
|
|
||||||
background-color: #F2F3F5;
|
|
||||||
.ivu-icon {
|
|
||||||
font-size: 20px;
|
|
||||||
width: 36px;
|
|
||||||
height: 36px;
|
|
||||||
line-height: 36px;
|
|
||||||
}
|
|
||||||
.ivu-badge {
|
|
||||||
position: absolute;
|
|
||||||
top: -6px;
|
|
||||||
left: 20px;
|
|
||||||
transform: scale(0.8);
|
|
||||||
}
|
|
||||||
&.active {
|
|
||||||
color: #ffffff;
|
|
||||||
background-color: #2d8cf0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.project-switch {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
margin-top: 24px;
|
|
||||||
.project-switch-button {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
background-color: #ffffff;
|
|
||||||
border-radius: 6px;
|
|
||||||
position: relative;
|
|
||||||
&:before {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 50%;
|
|
||||||
height: 100%;
|
|
||||||
z-index: 0;
|
|
||||||
color: #2d8cf0;
|
|
||||||
border-radius: 6px;
|
|
||||||
border: 1px solid #2d8cf0;
|
|
||||||
background-color: #e6f7ff;
|
|
||||||
transition: left 0.2s;
|
|
||||||
}
|
|
||||||
> div {
|
|
||||||
z-index: 1;
|
|
||||||
width: 32px;
|
|
||||||
height: 30px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
border-radius: 6px;
|
|
||||||
cursor: pointer;
|
|
||||||
color: #515a6e;
|
|
||||||
> i {
|
|
||||||
font-size: 17px;
|
|
||||||
}
|
|
||||||
&:first-child {
|
|
||||||
color: #2d8cf0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.menu {
|
|
||||||
&:before {
|
|
||||||
left: 50%;
|
|
||||||
}
|
|
||||||
> div:first-child {
|
|
||||||
color: #515a6e;
|
|
||||||
}
|
|
||||||
> div:last-child {
|
|
||||||
color: #2d8cf0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.project-column {
|
|
||||||
display: flex;
|
|
||||||
height: 100%;
|
|
||||||
overflow-x: auto;
|
|
||||||
> ul {
|
|
||||||
display: inline-flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
> li {
|
|
||||||
flex-shrink: 0;
|
|
||||||
list-style: none;
|
|
||||||
width: 260px;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
&:first-child {
|
|
||||||
margin-left: 22px;
|
|
||||||
}
|
|
||||||
&:last-child {
|
|
||||||
margin-right: 22px;
|
|
||||||
}
|
|
||||||
.column-head {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 6px 10px;
|
|
||||||
margin: 0 10px;
|
|
||||||
background-color: #F2F3F5;
|
|
||||||
border-radius: 4px;
|
|
||||||
.column-head-title {
|
|
||||||
flex: 1;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
.column-head-num {
|
|
||||||
font-size: 12px;
|
|
||||||
padding: 2px 7px;
|
|
||||||
line-height: 16px;
|
|
||||||
border-radius: 3px;
|
|
||||||
color: #ffffff;
|
|
||||||
background-color: #cccccc;
|
|
||||||
&.have {
|
|
||||||
background-color: #1C1D1E;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> ul {
|
|
||||||
flex: 1;
|
|
||||||
height: 0;
|
|
||||||
overflow-x: hidden;
|
|
||||||
overflow-y: auto;
|
|
||||||
> li {
|
|
||||||
list-style: none;
|
|
||||||
margin: 0 10px 16px;
|
|
||||||
background-color: #ffffff;
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 12px;
|
|
||||||
transition: box-shadow 0.3s;
|
|
||||||
position: relative;
|
|
||||||
&:hover {
|
|
||||||
box-shadow: 0 0 10px #e6ecfa;
|
|
||||||
}
|
|
||||||
&:first-child {
|
|
||||||
margin-top: 16px;
|
|
||||||
}
|
|
||||||
.priority-color {
|
|
||||||
position: absolute;
|
|
||||||
top: 12px;
|
|
||||||
left: 0;
|
|
||||||
width: 3px;
|
|
||||||
height: 42px;
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
.task-head {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
.task-title {
|
|
||||||
flex: 1;
|
|
||||||
padding-top: 1px;
|
|
||||||
> pre {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
line-height: 1.5;
|
|
||||||
white-space: pre-wrap;
|
|
||||||
word-wrap: break-word;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.ivu-icon {
|
|
||||||
font-size: 22px;
|
|
||||||
color: #666666;
|
|
||||||
margin-left: 8px;
|
|
||||||
}
|
|
||||||
&.has-desc {
|
|
||||||
.task-title {
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.task-desc {
|
|
||||||
color: #999999;
|
|
||||||
margin-top: 10px;
|
|
||||||
line-height: 20px;
|
|
||||||
}
|
|
||||||
.task-tags {
|
|
||||||
margin-top: 10px;
|
|
||||||
.ivu-tag {
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.task-users {
|
|
||||||
margin-top: 10px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
> ul {
|
|
||||||
flex: 1;
|
|
||||||
width: 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
overflow: auto;
|
|
||||||
margin-right: 24px;
|
|
||||||
> li {
|
|
||||||
list-style: none;
|
|
||||||
margin-left: -6px;
|
|
||||||
&:first-child {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
.common-avatar {
|
|
||||||
border: 2px solid #ffffff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.task-icon {
|
|
||||||
margin-left: 6px;
|
|
||||||
font-size: 12px;
|
|
||||||
.ivu-icon {
|
|
||||||
margin-left: 1px;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.task-progress {
|
|
||||||
margin-top: 10px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-end;
|
|
||||||
.task-time {
|
|
||||||
flex-shrink: 0;
|
|
||||||
color: #777777;
|
|
||||||
background-color: #EAEDF2;
|
|
||||||
padding: 1px 4px;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 500;
|
|
||||||
border-radius: 3px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
&.overdue {
|
|
||||||
font-weight: 600;
|
|
||||||
color: #ffffff;
|
|
||||||
background-color: #ed4014;
|
|
||||||
}
|
|
||||||
&.today {
|
|
||||||
color: #ffffff;
|
|
||||||
background-color: #ff9900;
|
|
||||||
}
|
|
||||||
.ivu-icon {
|
|
||||||
margin-right: 3px;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.column-add {
|
|
||||||
cursor: pointer;
|
|
||||||
border-radius: 6px;
|
|
||||||
border: 2px dashed #F1f1f1;
|
|
||||||
padding: 5px 12px;
|
|
||||||
text-align: center;
|
|
||||||
margin: 0 10px 18px;
|
|
||||||
transition: all 0.2s;
|
|
||||||
.ivu-icon {
|
|
||||||
color: #cccccc;
|
|
||||||
font-size: 22px;
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
border-color: #e1e1e1;
|
|
||||||
.ivu-icon {
|
|
||||||
color: #aaaaaa;
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.project-table {
|
|
||||||
height: 100%;
|
|
||||||
overflow-y: auto;
|
|
||||||
.project-row {
|
|
||||||
background-color: #ffffff;
|
|
||||||
border-bottom: 1px solid #F4F4F5;
|
|
||||||
position: relative;
|
|
||||||
> div {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 8px 12px;
|
|
||||||
border-right: 1px solid #F4F4F5;
|
|
||||||
&:first-child {
|
|
||||||
padding-left: 32px;
|
|
||||||
}
|
|
||||||
&:last-child {
|
|
||||||
border-right: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.priority-color {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
bottom: -1px;
|
|
||||||
width: 3px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.project-table-head,
|
|
||||||
.project-table-body {
|
|
||||||
margin: 0 32px 12px;
|
|
||||||
border-radius: 5px;
|
|
||||||
border: 1px solid #F4F4F5;
|
|
||||||
border-bottom: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
&.project-table-hide {
|
|
||||||
.project-rows {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.row-title {
|
|
||||||
.iconfont {
|
|
||||||
transform: rotate(-90deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.project-table-head {
|
|
||||||
.project-row {
|
|
||||||
> div {
|
|
||||||
color: #888888;
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.project-table-body {
|
|
||||||
transition: box-shadow 0.3s;
|
|
||||||
&:hover {
|
|
||||||
box-shadow: 0 0 10px #e6ecfa;
|
|
||||||
}
|
|
||||||
.project-row {
|
|
||||||
> div {
|
|
||||||
padding: 10px 12px;
|
|
||||||
.task-time {
|
|
||||||
&.overdue,
|
|
||||||
&.today {
|
|
||||||
color: #ffffff;
|
|
||||||
padding: 1px 5px;
|
|
||||||
font-size: 13px;
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
&.overdue {
|
|
||||||
font-weight: 600;
|
|
||||||
background-color: #ed4014;
|
|
||||||
}
|
|
||||||
&.today {
|
|
||||||
font-weight: 500;
|
|
||||||
background-color: #ff9900;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.row-title {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #333333;
|
|
||||||
padding-left: 14px;
|
|
||||||
.iconfont {
|
|
||||||
cursor: pointer;
|
|
||||||
transition: transform 0.3s;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
.row-h1 {
|
|
||||||
padding-left: 18px;
|
|
||||||
}
|
|
||||||
.row-num {
|
|
||||||
color: #999999;
|
|
||||||
padding-left: 6px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.row-item {
|
|
||||||
padding-left: 24px;
|
|
||||||
.ivu-icon {
|
|
||||||
font-size: 16px;
|
|
||||||
color: #dddddd;
|
|
||||||
&.completed {
|
|
||||||
color: #87d068;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.item-title {
|
|
||||||
padding: 0 22px 0 10px;
|
|
||||||
}
|
|
||||||
.item-icon {
|
|
||||||
font-size: 12px;
|
|
||||||
margin-right: 8px;
|
|
||||||
color: #777777;
|
|
||||||
.ivu-icon,
|
|
||||||
.iconfont {
|
|
||||||
margin-left: 1px;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #666666;
|
|
||||||
}
|
|
||||||
.iconfont {
|
|
||||||
color: #999999;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.row-member {
|
|
||||||
> ul {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
overflow: auto;
|
|
||||||
margin-left: -4px;
|
|
||||||
> li {
|
|
||||||
list-style: none;
|
|
||||||
margin-left: -6px;
|
|
||||||
&:first-child {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.row-add {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
height: 48px;
|
|
||||||
cursor: pointer;
|
|
||||||
> i {
|
|
||||||
font-size: 24px;
|
|
||||||
color: #777777;
|
|
||||||
margin-left: 32px;
|
|
||||||
margin-right: 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import TaskPriority from "./TaskPriority";
|
import TaskPriority from "./TaskPriority";
|
||||||
import TaskAdd from "./TaskAdd";
|
import TaskAdd from "./TaskAdd";
|
||||||
import {mapState} from "vuex";
|
import {mapState} from "vuex";
|
||||||
import UserInput from "../../../components/UserInput";
|
import UserInput from "../../../components/UserInput";
|
||||||
|
import TaskAddSimple from "./TaskAddSimple";
|
||||||
export default {
|
export default {
|
||||||
name: "ProjectList",
|
name: "ProjectList",
|
||||||
components: {UserInput, TaskAdd, TaskPriority},
|
components: {TaskAddSimple, UserInput, TaskAdd, TaskPriority},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
nowTime: Math.round(new Date().getTime() / 1000),
|
nowTime: Math.round(new Date().getTime() / 1000),
|
||||||
@ -984,12 +512,52 @@ export default {
|
|||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
addOpen(column_id) {
|
addOpen(column_id) {
|
||||||
|
if ($A.isJson(column_id)) {
|
||||||
|
this.addData = Object.assign(this.addData, column_id);
|
||||||
|
} else {
|
||||||
this.$set(this.addData, 'owner', this.userId);
|
this.$set(this.addData, 'owner', this.userId);
|
||||||
this.$set(this.addData, 'column_id', column_id);
|
this.$set(this.addData, 'column_id', column_id);
|
||||||
this.$set(this.addData, 'project_id', this.projectDetail.id);
|
this.$set(this.addData, 'project_id', this.projectDetail.id);
|
||||||
|
}
|
||||||
this.addShow = true;
|
this.addShow = true;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
addBefore(column) {
|
||||||
|
this.$set(column, 'addBefore', true);
|
||||||
|
this.$refs['column_' + column.id][0].scrollTop = 0;
|
||||||
|
},
|
||||||
|
|
||||||
|
addColumn() {
|
||||||
|
$A.modalInput({
|
||||||
|
title: "添加列表",
|
||||||
|
placeholder: "输入列表名称",
|
||||||
|
onOk: (value, callback) => {
|
||||||
|
if (!value) return true;
|
||||||
|
$A.apiAjax({
|
||||||
|
url: 'project/column/add',
|
||||||
|
data: {
|
||||||
|
project_id: this.projectDetail.id,
|
||||||
|
name: value,
|
||||||
|
},
|
||||||
|
complete: () => {
|
||||||
|
callback();
|
||||||
|
},
|
||||||
|
error: () => {
|
||||||
|
$A.modalAlert('网络繁忙，请稍后再试！');
|
||||||
|
},
|
||||||
|
success: ({ret, data, msg}) => {
|
||||||
|
if (ret === 1) {
|
||||||
|
$A.messageSuccess(msg);
|
||||||
|
this.$store.commit('getProjectDetail', this.projectDetail.id);
|
||||||
|
} else {
|
||||||
|
$A.modalError(msg, 301);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
onAddTask() {
|
onAddTask() {
|
||||||
this.taskLoad++;
|
this.taskLoad++;
|
||||||
$A.apiAjax({
|
$A.apiAjax({
|
||||||
|
|||||||
186
resources/assets/js/pages/manage/components/TaskAddSimple.vue
Normal file
186
resources/assets/js/pages/manage/components/TaskAddSimple.vue
Normal file
@ -0,0 +1,186 @@
|
|||||||
|
<template>
|
||||||
|
<div :class="['task-add-simple', active ? 'active' : '']" @mouseenter="mouseEnter=true" @mouseleave="mouseEnter=false">
|
||||||
|
<Input
|
||||||
|
v-model="addData.name"
|
||||||
|
ref="input"
|
||||||
|
type="textarea"
|
||||||
|
:rows="2"
|
||||||
|
:autosize="{ minRows: 2, maxRows: 3 }"
|
||||||
|
:maxlength="255"
|
||||||
|
:placeholder="$L('任务描述，回车创建')"
|
||||||
|
@on-focus="onFocus=true"
|
||||||
|
@on-blur="onFocus=false"
|
||||||
|
@on-keydown="onKeydown"></Input>
|
||||||
|
<div class="add-placeholder" @click="openAdd">
|
||||||
|
<Icon type="md-add" />{{$L('添加任务')}}
|
||||||
|
</div>
|
||||||
|
<div class="priority">
|
||||||
|
<ul>
|
||||||
|
<li v-for="(item, key) in taskPriority" :key="key">
|
||||||
|
<Tooltip :content="item.name + ' (' + item.days + $L('天') + ')'" transfer>
|
||||||
|
<i
|
||||||
|
class="iconfont"
|
||||||
|
:style="{color:item.color}"
|
||||||
|
v-html="addData.p_name == item.name ? '' : ''"
|
||||||
|
@click="choosePriority(item)"></i>
|
||||||
|
</Tooltip>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<Icon type="md-settings" @click="onPriority"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {mapState} from "vuex";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "TaskAddSimple",
|
||||||
|
props: {
|
||||||
|
projectId: {
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
columnId: {
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
addBefore: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
autoActive: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
addData: {
|
||||||
|
owner: 0,
|
||||||
|
column_id: 0,
|
||||||
|
times: [],
|
||||||
|
subtasks: [],
|
||||||
|
p_level: 0,
|
||||||
|
p_name: '',
|
||||||
|
p_color: '',
|
||||||
|
},
|
||||||
|
active: false,
|
||||||
|
|
||||||
|
onFocus: false,
|
||||||
|
mouseEnter: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
if (this.autoActive) {
|
||||||
|
this.$nextTick(this.openAdd)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
...mapState(['userId', 'taskPriority']),
|
||||||
|
},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
active(val) {
|
||||||
|
if (!val) {
|
||||||
|
this.$emit("on-close")
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mouseEnter() {
|
||||||
|
this.chackClose()
|
||||||
|
},
|
||||||
|
onFocus() {
|
||||||
|
this.chackClose()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
getData() {
|
||||||
|
this.addData.project_id = this.projectId;
|
||||||
|
this.addData.column_id = this.columnId;
|
||||||
|
this.addData.owner = [this.userId];
|
||||||
|
if (this.addBefore) {
|
||||||
|
this.addData.add_before = true;
|
||||||
|
}
|
||||||
|
return $A.cloneJSON(this.addData);
|
||||||
|
},
|
||||||
|
|
||||||
|
openAdd() {
|
||||||
|
this.active = true;
|
||||||
|
this.$nextTick(() => {
|
||||||
|
if (this.taskPriority.length === 0) {
|
||||||
|
this.$store.commit('getTaskPriority', () => {
|
||||||
|
if (!this.addData.p_name && this.taskPriority.length > 0) {
|
||||||
|
this.choosePriority(this.taskPriority[0])
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
if (!this.addData.p_name && this.taskPriority.length > 0) {
|
||||||
|
this.choosePriority(this.taskPriority[0])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.$refs.input.focus();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
chackClose() {
|
||||||
|
if (this.mouseEnter || this.onFocus) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!this.addData.name) {
|
||||||
|
this.active = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onPriority() {
|
||||||
|
this.$emit("on-priority", this.getData())
|
||||||
|
this.active = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
onKeydown(e) {
|
||||||
|
if (e.keyCode === 13) {
|
||||||
|
if (e.shiftKey) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
e.preventDefault();
|
||||||
|
this.onAdd();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onAdd() {
|
||||||
|
if (!this.addData.name) {
|
||||||
|
$A.messageWarning("请输入任务描述");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.loadIng++;
|
||||||
|
$A.apiAjax({
|
||||||
|
url: 'project/task/add',
|
||||||
|
data: this.getData(),
|
||||||
|
method: 'post',
|
||||||
|
complete: () => {
|
||||||
|
this.loadIng--;
|
||||||
|
},
|
||||||
|
success: ({ret, data, msg}) => {
|
||||||
|
if (ret === 1) {
|
||||||
|
$A.messageSuccess(msg);
|
||||||
|
this.$store.commit('getProjectDetail', this.projectId);
|
||||||
|
this.active = false;
|
||||||
|
} else {
|
||||||
|
$A.modalError(msg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
choosePriority(item) {
|
||||||
|
let start = new Date();
|
||||||
|
let end = new Date(new Date().setDate(start.getDate() + $A.runNum(item.days)));
|
||||||
|
this.$set(this.addData, 'times', [start, end])
|
||||||
|
this.$set(this.addData, 'p_level', item.priority)
|
||||||
|
this.$set(this.addData, 'p_name', item.name)
|
||||||
|
this.$set(this.addData, 'p_color', item.color)
|
||||||
|
this.$refs.input.focus()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
4
resources/assets/js/store/mutations.js
vendored
4
resources/assets/js/store/mutations.js
vendored
@ -24,7 +24,6 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
return state.userInfo;
|
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -114,9 +113,6 @@ export default {
|
|||||||
if (state.method.runNum(project_id) === 0) {
|
if (state.method.runNum(project_id) === 0) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (state.projectDetail.id === project_id) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (state.method.isJson(state.cacheProject[project_id])) {
|
if (state.method.isJson(state.cacheProject[project_id])) {
|
||||||
state.projectDetail = state.cacheProject[project_id];
|
state.projectDetail = state.cacheProject[project_id];
|
||||||
}
|
}
|
||||||
|
|||||||
5
resources/assets/sass/app.scss
vendored
5
resources/assets/sass/app.scss
vendored
@ -2,3 +2,8 @@
|
|||||||
@import "iconfont";
|
@import "iconfont";
|
||||||
@import "loading";
|
@import "loading";
|
||||||
@import "main";
|
@import "main";
|
||||||
|
|
||||||
|
@import "dialog-wrapper";
|
||||||
|
@import "messenger-wrapper";
|
||||||
|
@import "project-list";
|
||||||
|
@import "task-add";
|
||||||
|
|||||||
100
resources/assets/sass/dialog-wrapper.scss
vendored
Normal file
100
resources/assets/sass/dialog-wrapper.scss
vendored
Normal file
@ -0,0 +1,100 @@
|
|||||||
|
.dialog-wrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background-color: #ffffff;
|
||||||
|
z-index: 1;
|
||||||
|
.dialog-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 32px;
|
||||||
|
margin-top: 20px;
|
||||||
|
> h2 {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
> em {
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: 500;
|
||||||
|
padding-left: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.dialog-chat {
|
||||||
|
flex: 1;
|
||||||
|
padding: 0 32px;
|
||||||
|
margin-top: 18px;
|
||||||
|
}
|
||||||
|
.dialog-footer {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-end;
|
||||||
|
padding: 0 28px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
.dialog-newmsg {
|
||||||
|
display: none;
|
||||||
|
height: 30px;
|
||||||
|
line-height: 30px;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 12px;
|
||||||
|
background-color: rgba(0, 0, 0, 0.6);
|
||||||
|
padding: 0 12px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
margin-right: 10px;
|
||||||
|
border-radius: 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
z-index: 2;;
|
||||||
|
}
|
||||||
|
.dialog-input {
|
||||||
|
background-color: #F4F5F7;
|
||||||
|
padding: 10px 12px;
|
||||||
|
border-radius: 10px;
|
||||||
|
.ivu-input {
|
||||||
|
border: 0;
|
||||||
|
resize: none;
|
||||||
|
background-color: transparent;
|
||||||
|
&:focus {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.chat-upload {
|
||||||
|
display: none;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
&.newmsg {
|
||||||
|
margin-top: -50px;
|
||||||
|
.dialog-newmsg {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.drag-over {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 3;
|
||||||
|
background-color: rgba(255, 255, 255, 0.78);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
&:before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 16px;
|
||||||
|
left: 16px;
|
||||||
|
right: 16px;
|
||||||
|
bottom: 16px;
|
||||||
|
border: 2px dashed #7b7b7b;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
.drag-text {
|
||||||
|
padding: 12px;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
398
resources/assets/sass/main.scss
vendored
398
resources/assets/sass/main.scss
vendored
@ -335,116 +335,6 @@ body {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.task-add {
|
|
||||||
.task-add-form,
|
|
||||||
.task-add-advanced {
|
|
||||||
margin: 0 0 -18px;
|
|
||||||
.ivu-form-item-label {
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
.teditor-box {
|
|
||||||
.tox-tinymce {
|
|
||||||
border-color: #e8e8e8;
|
|
||||||
}
|
|
||||||
.tox .tox-statusbar,
|
|
||||||
.tox .tox-menubar+.tox-toolbar,
|
|
||||||
.tox .tox-menubar+.tox-toolbar-overlord .tox-toolbar__primary,
|
|
||||||
.tox:not([dir=rtl]) .tox-toolbar__group:not(:last-of-type) {
|
|
||||||
border-color: #e8e8e8;
|
|
||||||
}
|
|
||||||
.tox .tox-toolbar,
|
|
||||||
.tox .tox-toolbar__overflow,
|
|
||||||
.tox .tox-toolbar__primary {
|
|
||||||
background-image: none;
|
|
||||||
border-bottom: 1px solid #e8e8e8;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.advanced-option {
|
|
||||||
margin-top: -6px;
|
|
||||||
z-index: 1;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
> button {
|
|
||||||
transition: margin 0.2s;
|
|
||||||
&.advanced {
|
|
||||||
margin-left: 22px;
|
|
||||||
}
|
|
||||||
&:focus {
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.advanced-priority {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-left: 24px;
|
|
||||||
> 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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.task-add-advanced {
|
|
||||||
margin: 1px 0 0;
|
|
||||||
padding: 34px 32px 6px;
|
|
||||||
border-radius: 8px;
|
|
||||||
border: 1px solid #e8e8e8;
|
|
||||||
.subtasks {
|
|
||||||
margin-bottom: 24px;
|
|
||||||
padding: 12px 16px;
|
|
||||||
border-radius: 6px;
|
|
||||||
background-color: #f8f8f8;
|
|
||||||
.enter-input {
|
|
||||||
.ivu-input {
|
|
||||||
background: transparent;
|
|
||||||
border-color: transparent;
|
|
||||||
&:hover,
|
|
||||||
&:focus {
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.sublist {
|
|
||||||
.ivu-row {
|
|
||||||
margin-bottom: 12px;
|
|
||||||
> div {
|
|
||||||
padding-right: 7px;
|
|
||||||
&:last-child {
|
|
||||||
padding-right: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.ivu-date-picker {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.task-add-advanced-transfer {
|
|
||||||
.task-drop-prepend {
|
|
||||||
text-align: center;
|
|
||||||
color: #c5c8ce;
|
|
||||||
line-height: 20px;
|
|
||||||
padding-bottom: 5px;
|
|
||||||
font-size: 12px;
|
|
||||||
border-bottom: 1px solid #f1f1f1;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.common-user {
|
.common-user {
|
||||||
position: relative;
|
position: relative;
|
||||||
.common-user-loading {
|
.common-user-loading {
|
||||||
@ -925,291 +815,3 @@ body {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.dialog-wrapper {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
background-color: #ffffff;
|
|
||||||
z-index: 1;
|
|
||||||
.dialog-title {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0 32px;
|
|
||||||
margin-top: 20px;
|
|
||||||
> h2 {
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
> em {
|
|
||||||
font-style: normal;
|
|
||||||
font-size: 17px;
|
|
||||||
font-weight: 500;
|
|
||||||
padding-left: 6px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.dialog-chat {
|
|
||||||
flex: 1;
|
|
||||||
padding: 0 32px;
|
|
||||||
margin-top: 18px;
|
|
||||||
}
|
|
||||||
.dialog-footer {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-end;
|
|
||||||
padding: 0 28px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
.dialog-newmsg {
|
|
||||||
display: none;
|
|
||||||
height: 30px;
|
|
||||||
line-height: 30px;
|
|
||||||
color: #ffffff;
|
|
||||||
font-size: 12px;
|
|
||||||
background-color: rgba(0, 0, 0, 0.6);
|
|
||||||
padding: 0 12px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
margin-right: 10px;
|
|
||||||
border-radius: 16px;
|
|
||||||
cursor: pointer;
|
|
||||||
z-index: 2;;
|
|
||||||
}
|
|
||||||
.dialog-input {
|
|
||||||
background-color: #F4F5F7;
|
|
||||||
padding: 10px 12px;
|
|
||||||
border-radius: 10px;
|
|
||||||
.ivu-input {
|
|
||||||
border: 0;
|
|
||||||
resize: none;
|
|
||||||
background-color: transparent;
|
|
||||||
&:focus {
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.chat-upload {
|
|
||||||
display: none;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
&.newmsg {
|
|
||||||
margin-top: -50px;
|
|
||||||
.dialog-newmsg {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.drag-over {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
z-index: 3;
|
|
||||||
background-color: rgba(255, 255, 255, 0.78);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
&:before {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
top: 16px;
|
|
||||||
left: 16px;
|
|
||||||
right: 16px;
|
|
||||||
bottom: 16px;
|
|
||||||
border: 2px dashed #7b7b7b;
|
|
||||||
border-radius: 12px;
|
|
||||||
}
|
|
||||||
.drag-text {
|
|
||||||
padding: 12px;
|
|
||||||
font-size: 18px;
|
|
||||||
color: #666666;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.messenger-wrapper {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
.messenger-select {
|
|
||||||
position: relative;
|
|
||||||
height: 100%;
|
|
||||||
width: 30%;
|
|
||||||
min-width: 240px;
|
|
||||||
max-width: 320px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
&:after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
height: 100%;
|
|
||||||
width: 1px;
|
|
||||||
background-color: #f2f2f2;
|
|
||||||
}
|
|
||||||
.messenger-search {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
height: 54px;
|
|
||||||
padding: 0 12px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
.search-wrapper {
|
|
||||||
flex: 1;
|
|
||||||
background-color: #F7F7F7;
|
|
||||||
padding: 0 8px;
|
|
||||||
margin: 0 4px;
|
|
||||||
border-radius: 12px;
|
|
||||||
overflow: hidden;
|
|
||||||
.ivu-input {
|
|
||||||
border-color: transparent;
|
|
||||||
background-color: transparent;
|
|
||||||
&:hover,
|
|
||||||
&:focus {
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.messenger-list {
|
|
||||||
flex: 1;
|
|
||||||
height: 0;
|
|
||||||
width: 100%;
|
|
||||||
overflow-x: hidden;
|
|
||||||
overflow-y: auto;
|
|
||||||
> ul {
|
|
||||||
> li {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
height: 80px;
|
|
||||||
padding: 0 12px;
|
|
||||||
position: relative;
|
|
||||||
cursor: pointer;
|
|
||||||
&.active {
|
|
||||||
background-color: #F4F5F7;
|
|
||||||
}
|
|
||||||
.user-avatar,
|
|
||||||
.icon-avatar {
|
|
||||||
width: 46px;
|
|
||||||
height: 46px;
|
|
||||||
flex-grow: 0;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
.icon-avatar {
|
|
||||||
line-height: 46px;
|
|
||||||
border-radius: 50%;
|
|
||||||
font-size: 26px;
|
|
||||||
background-color: #61B2F9;
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
.dialog-box {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
padding-left: 12px;
|
|
||||||
.dialog-title {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
line-height: 24px;
|
|
||||||
> span {
|
|
||||||
flex: 1;
|
|
||||||
max-width: 130px;
|
|
||||||
color: #333333;
|
|
||||||
font-size: 14px;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
> i {
|
|
||||||
margin-left: 8px;
|
|
||||||
transform: scale(0.9);
|
|
||||||
font-size: 12px;
|
|
||||||
color: #87d068;
|
|
||||||
}
|
|
||||||
> em {
|
|
||||||
margin-left: 8px;
|
|
||||||
font-style: normal;
|
|
||||||
color: #999999;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.dialog-text {
|
|
||||||
max-width: 170px;
|
|
||||||
color: #999999;
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 24px;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.dialog-num {
|
|
||||||
position: absolute;
|
|
||||||
top: 10px;
|
|
||||||
left: 42px;
|
|
||||||
font-size: 12px;
|
|
||||||
transform: scale(0.8);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.messenger-menu {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
height: 54px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
border-top: 1px solid #f2f2f2;
|
|
||||||
> i {
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 28px;
|
|
||||||
margin: 0 24px;
|
|
||||||
color: #aaaaaa;
|
|
||||||
opacity: 0.9;
|
|
||||||
&.active {
|
|
||||||
opacity: 1;
|
|
||||||
color: #2d8cf0;
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.messenger-msg {
|
|
||||||
flex: 1;
|
|
||||||
width: 0;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
.dialog-wrapper,
|
|
||||||
.dialog-no {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
.dialog-no {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
.dialog-no-icon {
|
|
||||||
background-color: #f4f5f7;
|
|
||||||
padding: 20px;
|
|
||||||
border-radius: 50%;
|
|
||||||
.ivu-icon {
|
|
||||||
color: #d1d8dd;
|
|
||||||
font-size: 46px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.dialog-no-text {
|
|
||||||
margin-top: 16px;
|
|
||||||
color: #bec6cc;
|
|
||||||
background-color: #f4f5f7;
|
|
||||||
padding: 4px 15px;
|
|
||||||
border-radius: 14px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
187
resources/assets/sass/messenger-wrapper.scss
vendored
Normal file
187
resources/assets/sass/messenger-wrapper.scss
vendored
Normal file
@ -0,0 +1,187 @@
|
|||||||
|
.messenger-wrapper {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
.messenger-select {
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
width: 30%;
|
||||||
|
min-width: 240px;
|
||||||
|
max-width: 320px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
&:after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 100%;
|
||||||
|
width: 1px;
|
||||||
|
background-color: #f2f2f2;
|
||||||
|
}
|
||||||
|
.messenger-search {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 54px;
|
||||||
|
padding: 0 12px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
.search-wrapper {
|
||||||
|
flex: 1;
|
||||||
|
background-color: #F7F7F7;
|
||||||
|
padding: 0 8px;
|
||||||
|
margin: 0 4px;
|
||||||
|
border-radius: 12px;
|
||||||
|
overflow: hidden;
|
||||||
|
.ivu-input {
|
||||||
|
border-color: transparent;
|
||||||
|
background-color: transparent;
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.messenger-list {
|
||||||
|
flex: 1;
|
||||||
|
height: 0;
|
||||||
|
width: 100%;
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
|
> ul {
|
||||||
|
> li {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
height: 80px;
|
||||||
|
padding: 0 12px;
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
&.active {
|
||||||
|
background-color: #F4F5F7;
|
||||||
|
}
|
||||||
|
.user-avatar,
|
||||||
|
.icon-avatar {
|
||||||
|
width: 46px;
|
||||||
|
height: 46px;
|
||||||
|
flex-grow: 0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.icon-avatar {
|
||||||
|
line-height: 46px;
|
||||||
|
border-radius: 50%;
|
||||||
|
font-size: 26px;
|
||||||
|
background-color: #61B2F9;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
.dialog-box {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding-left: 12px;
|
||||||
|
.dialog-title {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
line-height: 24px;
|
||||||
|
> span {
|
||||||
|
flex: 1;
|
||||||
|
max-width: 130px;
|
||||||
|
color: #333333;
|
||||||
|
font-size: 14px;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
> i {
|
||||||
|
margin-left: 8px;
|
||||||
|
transform: scale(0.9);
|
||||||
|
font-size: 12px;
|
||||||
|
color: #87d068;
|
||||||
|
}
|
||||||
|
> em {
|
||||||
|
margin-left: 8px;
|
||||||
|
font-style: normal;
|
||||||
|
color: #999999;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.dialog-text {
|
||||||
|
max-width: 170px;
|
||||||
|
color: #999999;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 24px;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.dialog-num {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
left: 42px;
|
||||||
|
font-size: 12px;
|
||||||
|
transform: scale(0.8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.messenger-menu {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 54px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
border-top: 1px solid #f2f2f2;
|
||||||
|
> i {
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 28px;
|
||||||
|
margin: 0 24px;
|
||||||
|
color: #aaaaaa;
|
||||||
|
opacity: 0.9;
|
||||||
|
&.active {
|
||||||
|
opacity: 1;
|
||||||
|
color: #2d8cf0;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.messenger-msg {
|
||||||
|
flex: 1;
|
||||||
|
width: 0;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
.dialog-wrapper,
|
||||||
|
.dialog-no {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.dialog-no {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
.dialog-no-icon {
|
||||||
|
background-color: #f4f5f7;
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 50%;
|
||||||
|
.ivu-icon {
|
||||||
|
color: #d1d8dd;
|
||||||
|
font-size: 46px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.dialog-no-text {
|
||||||
|
margin-top: 16px;
|
||||||
|
color: #bec6cc;
|
||||||
|
background-color: #f4f5f7;
|
||||||
|
padding: 4px 15px;
|
||||||
|
border-radius: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
504
resources/assets/sass/project-list.scss
vendored
Normal file
504
resources/assets/sass/project-list.scss
vendored
Normal file
@ -0,0 +1,504 @@
|
|||||||
|
.project-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.project-head {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin: 32px 32px 16px;
|
||||||
|
.project-titbox {
|
||||||
|
flex: 1;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
.project-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
> h1 {
|
||||||
|
color: #333333;
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.project-load {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-left: 18px;
|
||||||
|
.common-loading {
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.project-subtitle {
|
||||||
|
color: #999999;
|
||||||
|
margin-top: 18px;
|
||||||
|
line-height: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.project-icobox {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 100%;
|
||||||
|
margin-top: 2px;
|
||||||
|
margin-left: 80px;
|
||||||
|
.project-icons {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
> li {
|
||||||
|
list-style: none;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
border-radius: 50%;
|
||||||
|
position: relative;
|
||||||
|
margin-left: 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s;
|
||||||
|
&:hover {
|
||||||
|
box-shadow: 0 0 6px #cccccc;
|
||||||
|
}
|
||||||
|
&.project-icon {
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #F2F3F5;
|
||||||
|
.ivu-icon {
|
||||||
|
font-size: 20px;
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
line-height: 36px;
|
||||||
|
}
|
||||||
|
.ivu-badge {
|
||||||
|
position: absolute;
|
||||||
|
top: -6px;
|
||||||
|
left: 20px;
|
||||||
|
transform: scale(0.8);
|
||||||
|
}
|
||||||
|
&.active {
|
||||||
|
color: #ffffff;
|
||||||
|
background-color: #2d8cf0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.project-switch {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
margin-top: 24px;
|
||||||
|
.project-switch-button {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 6px;
|
||||||
|
position: relative;
|
||||||
|
&:before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 50%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 0;
|
||||||
|
color: #2d8cf0;
|
||||||
|
border-radius: 6px;
|
||||||
|
border: 1px solid #2d8cf0;
|
||||||
|
background-color: #e6f7ff;
|
||||||
|
transition: left 0.2s;
|
||||||
|
}
|
||||||
|
> div {
|
||||||
|
z-index: 1;
|
||||||
|
width: 32px;
|
||||||
|
height: 30px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
color: #515a6e;
|
||||||
|
> i {
|
||||||
|
font-size: 17px;
|
||||||
|
}
|
||||||
|
&:first-child {
|
||||||
|
color: #2d8cf0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.menu {
|
||||||
|
&:before {
|
||||||
|
left: 50%;
|
||||||
|
}
|
||||||
|
> div:first-child {
|
||||||
|
color: #515a6e;
|
||||||
|
}
|
||||||
|
> div:last-child {
|
||||||
|
color: #2d8cf0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.project-column {
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
overflow-x: auto;
|
||||||
|
> ul {
|
||||||
|
display: inline-flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
> li {
|
||||||
|
flex-shrink: 0;
|
||||||
|
list-style: none;
|
||||||
|
width: 260px;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
&:first-child {
|
||||||
|
margin-left: 22px;
|
||||||
|
}
|
||||||
|
&:last-child {
|
||||||
|
margin-right: 22px;
|
||||||
|
}
|
||||||
|
&.add-column {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
height: 36px;
|
||||||
|
padding: 0 12px;
|
||||||
|
color: #888888;
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: #F2F3F5;
|
||||||
|
&:hover {
|
||||||
|
color: #777777;
|
||||||
|
}
|
||||||
|
> i {
|
||||||
|
font-size: 16px;
|
||||||
|
padding-right: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.column-head {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 7px 10px;
|
||||||
|
margin: 0 10px;
|
||||||
|
background-color: #F2F3F5;
|
||||||
|
border-radius: 4px;
|
||||||
|
.column-head-title {
|
||||||
|
flex: 1;
|
||||||
|
width: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-weight: 500;
|
||||||
|
> span {
|
||||||
|
font-size: 15px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
> em {
|
||||||
|
color: #888888;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 14px;
|
||||||
|
padding-left: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.column-head-icon {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-left: 12px;
|
||||||
|
.ivu-icon {
|
||||||
|
padding-left: 8px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #aaaaaa;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: color 0.3s;
|
||||||
|
&:hover {
|
||||||
|
color: #888888;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
> ul {
|
||||||
|
flex: 1;
|
||||||
|
height: 0;
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
|
> li {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0 10px 16px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 12px;
|
||||||
|
transition: all 0.3s;
|
||||||
|
position: relative;
|
||||||
|
&:hover {
|
||||||
|
box-shadow: 0 0 10px #e6ecfa;
|
||||||
|
}
|
||||||
|
&:first-child {
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
.priority-color {
|
||||||
|
position: absolute;
|
||||||
|
top: 12px;
|
||||||
|
left: 0;
|
||||||
|
width: 3px;
|
||||||
|
height: 42px;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
.task-head {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
.task-title {
|
||||||
|
flex: 1;
|
||||||
|
padding-top: 1px;
|
||||||
|
> pre {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
line-height: 1.5;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
word-wrap: break-word;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ivu-icon {
|
||||||
|
font-size: 22px;
|
||||||
|
color: #666666;
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
&.has-desc {
|
||||||
|
.task-title {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.task-desc {
|
||||||
|
color: #999999;
|
||||||
|
margin-top: 10px;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
.task-tags {
|
||||||
|
margin-top: 10px;
|
||||||
|
.ivu-tag {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.task-users {
|
||||||
|
margin-top: 10px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
> ul {
|
||||||
|
flex: 1;
|
||||||
|
width: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
overflow: auto;
|
||||||
|
margin-right: 24px;
|
||||||
|
> li {
|
||||||
|
list-style: none;
|
||||||
|
margin-left: -6px;
|
||||||
|
&:first-child {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
.common-avatar {
|
||||||
|
border: 2px solid #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.task-icon {
|
||||||
|
margin-left: 6px;
|
||||||
|
font-size: 12px;
|
||||||
|
.ivu-icon {
|
||||||
|
margin-left: 1px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.task-progress {
|
||||||
|
margin-top: 10px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
.task-time {
|
||||||
|
flex-shrink: 0;
|
||||||
|
color: #777777;
|
||||||
|
background-color: #EAEDF2;
|
||||||
|
padding: 1px 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 500;
|
||||||
|
border-radius: 3px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
&.overdue {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #ffffff;
|
||||||
|
background-color: #ed4014;
|
||||||
|
}
|
||||||
|
&.today {
|
||||||
|
color: #ffffff;
|
||||||
|
background-color: #ff9900;
|
||||||
|
}
|
||||||
|
.ivu-icon {
|
||||||
|
margin-right: 3px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.project-table {
|
||||||
|
height: 100%;
|
||||||
|
overflow-y: auto;
|
||||||
|
.project-row {
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-bottom: 1px solid #F4F4F5;
|
||||||
|
position: relative;
|
||||||
|
> div {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 8px 12px;
|
||||||
|
border-right: 1px solid #F4F4F5;
|
||||||
|
&:first-child {
|
||||||
|
padding-left: 32px;
|
||||||
|
}
|
||||||
|
&:last-child {
|
||||||
|
border-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.priority-color {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: -1px;
|
||||||
|
width: 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.project-table-head,
|
||||||
|
.project-table-body {
|
||||||
|
margin: 0 32px 12px;
|
||||||
|
border-radius: 5px;
|
||||||
|
border: 1px solid #F4F4F5;
|
||||||
|
border-bottom: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
&.project-table-hide {
|
||||||
|
.project-rows {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.row-title {
|
||||||
|
.iconfont {
|
||||||
|
transform: rotate(-90deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.project-table-head {
|
||||||
|
.project-row {
|
||||||
|
> div {
|
||||||
|
color: #888888;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.project-table-body {
|
||||||
|
transition: box-shadow 0.3s;
|
||||||
|
&:hover {
|
||||||
|
box-shadow: 0 0 10px #e6ecfa;
|
||||||
|
}
|
||||||
|
.project-row {
|
||||||
|
> div {
|
||||||
|
padding: 10px 12px;
|
||||||
|
.task-time {
|
||||||
|
&.overdue,
|
||||||
|
&.today {
|
||||||
|
color: #ffffff;
|
||||||
|
padding: 1px 5px;
|
||||||
|
font-size: 13px;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
&.overdue {
|
||||||
|
font-weight: 600;
|
||||||
|
background-color: #ed4014;
|
||||||
|
}
|
||||||
|
&.today {
|
||||||
|
font-weight: 500;
|
||||||
|
background-color: #ff9900;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.row-title {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333333;
|
||||||
|
padding-left: 14px;
|
||||||
|
.iconfont {
|
||||||
|
cursor: pointer;
|
||||||
|
transition: transform 0.3s;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.row-h1 {
|
||||||
|
padding-left: 18px;
|
||||||
|
}
|
||||||
|
.row-num {
|
||||||
|
color: #999999;
|
||||||
|
padding-left: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.row-item {
|
||||||
|
padding-left: 24px;
|
||||||
|
.ivu-icon {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #dddddd;
|
||||||
|
&.completed {
|
||||||
|
color: #87d068;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item-title {
|
||||||
|
padding: 0 22px 0 10px;
|
||||||
|
}
|
||||||
|
.item-icon {
|
||||||
|
font-size: 12px;
|
||||||
|
margin-right: 8px;
|
||||||
|
color: #777777;
|
||||||
|
.ivu-icon,
|
||||||
|
.iconfont {
|
||||||
|
margin-left: 1px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
.iconfont {
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.row-member {
|
||||||
|
> ul {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
overflow: auto;
|
||||||
|
margin-left: -4px;
|
||||||
|
> li {
|
||||||
|
list-style: none;
|
||||||
|
margin-left: -6px;
|
||||||
|
&:first-child {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.row-add {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 48px;
|
||||||
|
cursor: pointer;
|
||||||
|
> i {
|
||||||
|
font-size: 24px;
|
||||||
|
color: #777777;
|
||||||
|
margin-left: 32px;
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
12
resources/assets/sass/scrollbar.scss
vendored
12
resources/assets/sass/scrollbar.scss
vendored
@ -1,7 +1,7 @@
|
|||||||
/* 滚动条美化 */
|
/* 滚动条美化 */
|
||||||
::-webkit-scrollbar {
|
::-webkit-scrollbar {
|
||||||
width: 6px;
|
width: 10px;
|
||||||
height: 0;
|
height: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*滚动条滑块隐藏*/
|
/*滚动条滑块隐藏*/
|
||||||
@ -18,7 +18,15 @@
|
|||||||
|
|
||||||
/*鼠标浮到容器上，让该容器的滚动条滑块显示*/
|
/*鼠标浮到容器上，让该容器的滚动条滑块显示*/
|
||||||
:hover::-webkit-scrollbar-thumb {
|
:hover::-webkit-scrollbar-thumb {
|
||||||
|
border: 2px solid transparent;
|
||||||
background: rgba(0, 0, 0, .2);
|
background: rgba(0, 0, 0, .2);
|
||||||
|
background-clip: content-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*鼠标浮到容器上，让该容器的滚动条滑块显示*/
|
||||||
|
:hover::-webkit-scrollbar-thumb:hover {
|
||||||
|
border-top-width: 0;
|
||||||
|
border-bottom-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*滚动条轨道*/
|
/*滚动条轨道*/
|
||||||
|
|||||||
167
resources/assets/sass/task-add.scss
vendored
Normal file
167
resources/assets/sass/task-add.scss
vendored
Normal file
@ -0,0 +1,167 @@
|
|||||||
|
.task-add {
|
||||||
|
.task-add-form,
|
||||||
|
.task-add-advanced {
|
||||||
|
margin: 0 0 -18px;
|
||||||
|
.ivu-form-item-label {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.teditor-box {
|
||||||
|
.tox-tinymce {
|
||||||
|
border-color: #e8e8e8;
|
||||||
|
}
|
||||||
|
.tox .tox-statusbar,
|
||||||
|
.tox .tox-menubar+.tox-toolbar,
|
||||||
|
.tox .tox-menubar+.tox-toolbar-overlord .tox-toolbar__primary,
|
||||||
|
.tox:not([dir=rtl]) .tox-toolbar__group:not(:last-of-type) {
|
||||||
|
border-color: #e8e8e8;
|
||||||
|
}
|
||||||
|
.tox .tox-toolbar,
|
||||||
|
.tox .tox-toolbar__overflow,
|
||||||
|
.tox .tox-toolbar__primary {
|
||||||
|
background-image: none;
|
||||||
|
border-bottom: 1px solid #e8e8e8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.advanced-option {
|
||||||
|
margin-top: -6px;
|
||||||
|
z-index: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
> button {
|
||||||
|
transition: margin 0.2s;
|
||||||
|
&.advanced {
|
||||||
|
margin-left: 22px;
|
||||||
|
}
|
||||||
|
&:focus {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.advanced-priority {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-left: 24px;
|
||||||
|
> 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.task-add-advanced {
|
||||||
|
margin: 1px 0 0;
|
||||||
|
padding: 34px 32px 6px;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid #e8e8e8;
|
||||||
|
.subtasks {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
padding: 12px 16px;
|
||||||
|
border-radius: 6px;
|
||||||
|
background-color: #f8f8f8;
|
||||||
|
.enter-input {
|
||||||
|
.ivu-input {
|
||||||
|
background: transparent;
|
||||||
|
border-color: transparent;
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.sublist {
|
||||||
|
.ivu-row {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
> div {
|
||||||
|
padding-right: 7px;
|
||||||
|
&:last-child {
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ivu-date-picker {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.task-add-advanced-transfer {
|
||||||
|
.task-drop-prepend {
|
||||||
|
text-align: center;
|
||||||
|
color: #c5c8ce;
|
||||||
|
line-height: 20px;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
font-size: 12px;
|
||||||
|
border-bottom: 1px solid #f1f1f1;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.task-add-simple {
|
||||||
|
.ivu-input-wrapper {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.add-placeholder {
|
||||||
|
cursor: pointer;
|
||||||
|
color: #888888;
|
||||||
|
.ivu-icon {
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.priority {
|
||||||
|
display: none;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 22px;
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-bottom: -3px;
|
||||||
|
> ul {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
> 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ivu-icon {
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.active {
|
||||||
|
.ivu-input-wrapper {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.add-placeholder {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.priority {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user