diff --git a/app/Http/Controllers/Api/ProjectController.php b/app/Http/Controllers/Api/ProjectController.php
index b6cfe8a7..30e24173 100755
--- a/app/Http/Controllers/Api/ProjectController.php
+++ b/app/Http/Controllers/Api/ProjectController.php
@@ -374,7 +374,7 @@ class ProjectController extends AbstractController
}
/**
- * 【消息】消息列表
+ * 消息列表
*
* @apiParam {Number} project_id 项目ID
* @apiParam {Number} [task_id] 任务ID
@@ -413,7 +413,7 @@ class ProjectController extends AbstractController
}
/**
- * 【消息】发送消息
+ * 发送消息
*
* @apiParam {Number} project_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} [column_id] 列表ID,留空取第一个
diff --git a/resources/assets/js/functions/web.js b/resources/assets/js/functions/web.js
index d374ea4b..94237f05 100755
--- a/resources/assets/js/functions/web.js
+++ b/resources/assets/js/functions/web.js
@@ -178,6 +178,50 @@
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) {
if (millisecond > 0) {
setTimeout(() => { $A.modalConfirm(config) }, millisecond);
diff --git a/resources/assets/js/pages/manage/components/ProjectList.vue b/resources/assets/js/pages/manage/components/ProjectList.vue
index 48a4b25b..df916008 100644
--- a/resources/assets/js/pages/manage/components/ProjectList.vue
+++ b/resources/assets/js/pages/manage/components/ProjectList.vue
@@ -56,10 +56,25 @@
-
-
{{column.name}}
-
{{column.project_task.length}}
+
+
{{column.name}}
+
({{column.project_task.length}})
+
+
+
+
+
-
+ - {{$L('添加列表')}}
@@ -333,508 +354,15 @@
-
-
diff --git a/resources/assets/js/store/mutations.js b/resources/assets/js/store/mutations.js
index 784ed961..3885de22 100644
--- a/resources/assets/js/store/mutations.js
+++ b/resources/assets/js/store/mutations.js
@@ -24,7 +24,6 @@ export default {
}
},
});
- return state.userInfo;
},
/**
@@ -114,9 +113,6 @@ export default {
if (state.method.runNum(project_id) === 0) {
return;
}
- if (state.projectDetail.id === project_id) {
- return;
- }
if (state.method.isJson(state.cacheProject[project_id])) {
state.projectDetail = state.cacheProject[project_id];
}
diff --git a/resources/assets/sass/app.scss b/resources/assets/sass/app.scss
index 267e8531..104f73eb 100644
--- a/resources/assets/sass/app.scss
+++ b/resources/assets/sass/app.scss
@@ -2,3 +2,8 @@
@import "iconfont";
@import "loading";
@import "main";
+
+@import "dialog-wrapper";
+@import "messenger-wrapper";
+@import "project-list";
+@import "task-add";
diff --git a/resources/assets/sass/dialog-wrapper.scss b/resources/assets/sass/dialog-wrapper.scss
new file mode 100644
index 00000000..99e2d5ad
--- /dev/null
+++ b/resources/assets/sass/dialog-wrapper.scss
@@ -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;
+ }
+ }
+}
diff --git a/resources/assets/sass/main.scss b/resources/assets/sass/main.scss
index c3012f0f..1f89ff8c 100755
--- a/resources/assets/sass/main.scss
+++ b/resources/assets/sass/main.scss
@@ -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 {
position: relative;
.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;
- }
- }
- }
-}
diff --git a/resources/assets/sass/messenger-wrapper.scss b/resources/assets/sass/messenger-wrapper.scss
new file mode 100644
index 00000000..cd5253a6
--- /dev/null
+++ b/resources/assets/sass/messenger-wrapper.scss
@@ -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;
+ }
+ }
+ }
+}
diff --git a/resources/assets/sass/project-list.scss b/resources/assets/sass/project-list.scss
new file mode 100644
index 00000000..340ccef1
--- /dev/null
+++ b/resources/assets/sass/project-list.scss
@@ -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;
+ }
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/resources/assets/sass/scrollbar.scss b/resources/assets/sass/scrollbar.scss
index f9b58ba7..72a26f32 100644
--- a/resources/assets/sass/scrollbar.scss
+++ b/resources/assets/sass/scrollbar.scss
@@ -1,7 +1,7 @@
/* 滚动条美化 */
::-webkit-scrollbar {
- width: 6px;
- height: 0;
+ width: 10px;
+ height: 10px;
}
/*滚动条滑块隐藏*/
@@ -18,7 +18,15 @@
/*鼠标浮到容器上,让该容器的滚动条滑块显示*/
:hover::-webkit-scrollbar-thumb {
+ border: 2px solid transparent;
background: rgba(0, 0, 0, .2);
+ background-clip: content-box;
+}
+
+/*鼠标浮到容器上,让该容器的滚动条滑块显示*/
+:hover::-webkit-scrollbar-thumb:hover {
+ border-top-width: 0;
+ border-bottom-width: 0;
}
/*滚动条轨道*/
diff --git a/resources/assets/sass/task-add.scss b/resources/assets/sass/task-add.scss
new file mode 100644
index 00000000..e850a7ad
--- /dev/null
+++ b/resources/assets/sass/task-add.scss
@@ -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;
+ }
+ }
+}