From 590b76a8848b4788d00a12f7c841ff4676a35873 Mon Sep 17 00:00:00 2001 From: kuaifan Date: Wed, 23 Mar 2022 11:52:03 +0800 Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E5=B7=A5=E4=BD=9C?= =?UTF-8?q?=E9=87=8F=E9=85=8D=E8=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../sass/pages/components/project-list.scss | 91 +++++++-------- .../pages/components/project-workflow.scss | 108 +++++++++++++----- .../sass/pages/components/task-detail.scss | 54 +++++---- .../sass/pages/components/task-menu.scss | 27 ++--- .../assets/sass/pages/page-dashboard.scss | 24 ++-- resources/assets/sass/var.scss | 6 + 6 files changed, 180 insertions(+), 130 deletions(-) diff --git a/resources/assets/sass/pages/components/project-list.scss b/resources/assets/sass/pages/components/project-list.scss index 5de5b88a4..c9e07f1d8 100644 --- a/resources/assets/sass/pages/components/project-list.scss +++ b/resources/assets/sass/pages/components/project-list.scss @@ -165,24 +165,24 @@ justify-content: center; cursor: pointer; &.start { - background-color: rgba(38, 38, 38, 0.05); - border-color: rgba(38, 38, 38, 0.05); - color: #595959; + background-color: rgba($flow-status-start-color, 0.1); + border-color: rgba($flow-status-start-color, 0.1); + color: $flow-status-start-color; } &.progress { - background-color: rgba(27, 154, 238, 0.1); - border-color: rgba(27, 154, 238, 0.1); - color: #0171c2; + background-color: rgba($flow-status-progress-color, 0.1);; + border-color: rgba($flow-status-progress-color, 0.1);; + color: $flow-status-progress-color; } &.test { - background-color: rgba(27, 154, 238, 0.1); - border-color: rgba(27, 154, 238, 0.1); - color: #0171c2; + background-color: rgba($flow-status-test-color, 0.1);; + border-color: rgba($flow-status-test-color, 0.1);; + color: $flow-status-test-color; } &.end { - background-color: rgba(21, 173, 49, 0.1); - border-color: rgba(21, 173, 49, 0.1); - color: #038a24; + background-color: rgba($flow-status-end-color, 0.1);; + border-color: rgba($flow-status-end-color, 0.1);; + color: $flow-status-end-color; } } } @@ -407,24 +407,24 @@ margin-right: 4px; text-align: center; &.start { - background-color: rgba(38, 38, 38, 0.05); - border-color: rgba(38, 38, 38, 0.05); - color: #595959; + background-color: rgba($flow-status-start-color, 0.1); + border-color: rgba($flow-status-start-color, 0.1); + color: $flow-status-start-color; } &.progress { - background-color: rgba(27, 154, 238, 0.1); - border-color: rgba(27, 154, 238, 0.1); - color: #0171c2; + background-color: rgba($flow-status-progress-color, 0.1);; + border-color: rgba($flow-status-progress-color, 0.1);; + color: $flow-status-progress-color; } &.test { - background-color: rgba(27, 154, 238, 0.1); - border-color: rgba(27, 154, 238, 0.1); - color: #0171c2; + background-color: rgba($flow-status-test-color, 0.1);; + border-color: rgba($flow-status-test-color, 0.1);; + color: $flow-status-test-color; } &.end { - background-color: rgba(21, 173, 49, 0.1); - border-color: rgba(21, 173, 49, 0.1); - color: #038a24; + background-color: rgba($flow-status-end-color, 0.1);; + border-color: rgba($flow-status-end-color, 0.1);; + color: $flow-status-end-color; } } > pre { @@ -775,24 +775,24 @@ margin-right: 3px; text-align: center; &.start { - background-color: rgba(38, 38, 38, 0.05); - border-color: rgba(38, 38, 38, 0.05); - color: #595959; + background-color: rgba($flow-status-start-color, 0.1); + border-color: rgba($flow-status-start-color, 0.1); + color: $flow-status-start-color; } &.progress { - background-color: rgba(27, 154, 238, 0.1); - border-color: rgba(27, 154, 238, 0.1); - color: #0171c2; + background-color: rgba($flow-status-progress-color, 0.1);; + border-color: rgba($flow-status-progress-color, 0.1);; + color: $flow-status-progress-color; } &.test { - background-color: rgba(27, 154, 238, 0.1); - border-color: rgba(27, 154, 238, 0.1); - color: #0171c2; + background-color: rgba($flow-status-test-color, 0.1);; + border-color: rgba($flow-status-test-color, 0.1);; + color: $flow-status-test-color; } &.end { - background-color: rgba(21, 173, 49, 0.1); - border-color: rgba(21, 173, 49, 0.1); - color: #038a24; + background-color: rgba($flow-status-end-color, 0.1);; + border-color: rgba($flow-status-end-color, 0.1);; + color: $flow-status-end-color; } } } @@ -979,35 +979,32 @@ color: $primary-text-color !important; &.start { - color: #595959 !important; + color: $flow-status-start-color !important; } - &.progress { - color: #0171c2 !important; + color: $flow-status-progress-color !important; } &.test { - color: #0171c2 !important; + color: $flow-status-test-color !important; } &.end { - color: #038a24 !important; + color: $flow-status-end-color !important; } &:hover, &.ivu-cascader-menu-item-active { &.project-list-flow-cascader-item { - &.start { - background-color: rgba(38, 38, 38, 0.05); + background-color: rgba($flow-status-start-color, 0.1); } - &.progress { - background-color: rgba(27, 154, 238, 0.1); + background-color: rgba($flow-status-progress-color, 0.1);; } &.test { - background-color: rgba(27, 154, 238, 0.1); + background-color: rgba($flow-status-test-color, 0.1);; } &.end { - background-color: rgba(21, 173, 49, 0.1); + background-color: rgba($flow-status-end-color, 0.1);; } } } diff --git a/resources/assets/sass/pages/components/project-workflow.scss b/resources/assets/sass/pages/components/project-workflow.scss index 3e1696174..376fa75a1 100644 --- a/resources/assets/sass/pages/components/project-workflow.scss +++ b/resources/assets/sass/pages/components/project-workflow.scss @@ -61,24 +61,24 @@ vertical-align: middle; overflow: hidden; &.start { - background-color: rgba(38, 38, 38, 0.05); - border-color: rgba(38, 38, 38, 0.05); - color: #595959; + background-color: rgba($flow-status-start-color, 0.1); + border-color: rgba($flow-status-start-color, 0.1); + color: $flow-status-start-color; } &.progress { - background-color: rgba(27, 154, 238, 0.1); - border-color: rgba(27, 154, 238, 0.1); - color: #0171c2; + background-color: rgba($flow-status-progress-color, 0.1);; + border-color: rgba($flow-status-progress-color, 0.1);; + color: $flow-status-progress-color; } &.test { - background-color: rgba(27, 154, 238, 0.1); - border-color: rgba(27, 154, 238, 0.1); - color: #0171c2; + background-color: rgba($flow-status-test-color, 0.1);; + border-color: rgba($flow-status-test-color, 0.1);; + color: $flow-status-test-color; } &.end { - background-color: rgba(21, 173, 49, 0.1); - border-color: rgba(21, 173, 49, 0.1); - color: #038a24; + background-color: rgba($flow-status-end-color, 0.1);; + border-color: rgba($flow-status-end-color, 0.1);; + color: $flow-status-end-color; } } } @@ -321,32 +321,81 @@ } &.start { - border-color: #e5e5e5; + border-color:rgba($flow-status-start-color, 0.2); &:hover { - border-color: #bfbfbf + border-color: rgba($flow-status-start-color, 0.7); + } + .ivu-radio-checked .ivu-radio-inner { + border-color: $flow-status-start-color; + box-shadow: none; + } + .ivu-radio-inner::after { + background-color: $flow-status-start-color; + } + .ivu-checkbox-checked .ivu-checkbox-inner { + border-color: $flow-status-start-color; + background-color: $flow-status-start-color; } } &.progress { - border-color: #ccecff; + border-color: rgba($flow-status-progress-color, 0.2); &:hover { - border-color: #87d2ff + border-color: rgba($flow-status-progress-color, 0.7); + } + .ivu-radio-checked .ivu-radio-inner { + border-color: $flow-status-progress-color; + box-shadow: none; + } + .ivu-radio-inner::after { + background-color: $flow-status-progress-color; + } + .ivu-checkbox-checked .ivu-checkbox-inner { + border-color: $flow-status-progress-color; + background-color: $flow-status-progress-color; } } &.test { - border-color: #ccecff; + border-color: rgba($flow-status-test-color, 0.2); &:hover { - border-color: #87d2ff + border-color: rgba($flow-status-test-color, 0.7); + } + .ivu-radio-checked .ivu-radio-inner { + border-color: $flow-status-test-color; + box-shadow: none; + } + .ivu-radio-inner::after { + background-color: $flow-status-test-color; + } + .ivu-checkbox-checked .ivu-checkbox-inner { + border-color: $flow-status-test-color; + background-color: $flow-status-test-color; } } &.end { - border-color: #cafac8; + border-color: rgba($flow-status-end-color, 0.2); &:hover { - border-color: #64d16d + border-color: rgba($flow-status-end-color, 0.7); + } + .ivu-radio-checked .ivu-radio-inner { + border-color: $flow-status-end-color; + box-shadow: none; + } + .ivu-radio-inner::after { + background-color: $flow-status-end-color; + } + .ivu-checkbox-checked .ivu-checkbox-inner { + border-color: $flow-status-end-color; + background-color: $flow-status-end-color; } } + + .ivu-checkbox-disabled.ivu-checkbox-checked .ivu-checkbox-inner { + background-color: #f3f3f3 !important; + border-color: #dcdee2 !important; + } } .taskflow-config-table-status-item { @@ -380,23 +429,20 @@ } &.start { - background: rgba(38,38,38,0.05); - color: #595959 + background-color: rgba($flow-status-start-color, 0.1); + color: $flow-status-start-color; } - &.progress { - background: rgba(27,154,238,0.1); - color: #0171c2 + background-color: rgba($flow-status-progress-color, 0.1);; + color: $flow-status-progress-color; } - &.test { - background: rgba(27,154,238,0.1); - color: #0171c2 + background-color: rgba($flow-status-test-color, 0.1);; + color: $flow-status-test-color; } - &.end { - background: rgba(21,173,49,0.1); - color: #038a24 + background-color: rgba($flow-status-end-color, 0.1);; + color: $flow-status-end-color; } .name { diff --git a/resources/assets/sass/pages/components/task-detail.scss b/resources/assets/sass/pages/components/task-detail.scss index 497594494..b25b84fe9 100644 --- a/resources/assets/sass/pages/components/task-detail.scss +++ b/resources/assets/sass/pages/components/task-detail.scss @@ -65,26 +65,30 @@ text-overflow: ellipsis; white-space: nowrap; overflow: hidden; - &.start, &.archived { - background-color: rgba(38, 38, 38, 0.05); - border-color: rgba(38, 38, 38, 0.05); - color: #595959; + background-color: rgba($flow-status-archived-color, 0.1); + border-color: rgba($flow-status-archived-color, 0.1); + color: $flow-status-archived-color; + } + &.start { + background-color: rgba($flow-status-start-color, 0.1); + border-color: rgba($flow-status-start-color, 0.1); + color: $flow-status-start-color; } &.progress { - background-color: rgba(27, 154, 238, 0.1); - border-color: rgba(27, 154, 238, 0.1); - color: #0171c2; + background-color: rgba($flow-status-progress-color, 0.1);; + border-color: rgba($flow-status-progress-color, 0.1);; + color: $flow-status-progress-color; } &.test { - background-color: rgba(27, 154, 238, 0.1); - border-color: rgba(27, 154, 238, 0.1); - color: #0171c2; + background-color: rgba($flow-status-test-color, 0.1);; + border-color: rgba($flow-status-test-color, 0.1);; + color: $flow-status-test-color; } &.end { - background-color: rgba(21, 173, 49, 0.1); - border-color: rgba(21, 173, 49, 0.1); - color: #038a24; + background-color: rgba($flow-status-end-color, 0.1);; + border-color: rgba($flow-status-end-color, 0.1);; + color: $flow-status-end-color; } } } @@ -355,24 +359,24 @@ text-align: center; cursor: pointer; &.start { - background-color: rgba(38, 38, 38, 0.05); - border-color: rgba(38, 38, 38, 0.05); - color: #595959; + background-color: rgba($flow-status-start-color, 0.1); + border-color: rgba($flow-status-start-color, 0.1); + color: $flow-status-start-color; } &.progress { - background-color: rgba(27, 154, 238, 0.1); - border-color: rgba(27, 154, 238, 0.1); - color: #0171c2; + background-color: rgba($flow-status-progress-color, 0.1);; + border-color: rgba($flow-status-progress-color, 0.1);; + color: $flow-status-progress-color; } &.test { - background-color: rgba(27, 154, 238, 0.1); - border-color: rgba(27, 154, 238, 0.1); - color: #0171c2; + background-color: rgba($flow-status-test-color, 0.1);; + border-color: rgba($flow-status-test-color, 0.1);; + color: $flow-status-test-color; } &.end { - background-color: rgba(21, 173, 49, 0.1); - border-color: rgba(21, 173, 49, 0.1); - color: #038a24; + background-color: rgba($flow-status-end-color, 0.1);; + border-color: rgba($flow-status-end-color, 0.1);; + color: $flow-status-end-color; } } } diff --git a/resources/assets/sass/pages/components/task-menu.scss b/resources/assets/sass/pages/components/task-menu.scss index badf0197e..ae7187ed3 100644 --- a/resources/assets/sass/pages/components/task-menu.scss +++ b/resources/assets/sass/pages/components/task-menu.scss @@ -82,27 +82,24 @@ color: #595959; &.start { - background-color: rgba(38, 38, 38, 0.05); - border-color: rgba(38, 38, 38, 0.05); - color: #595959; + background-color: rgba($flow-status-start-color, 0.1); + border-color: rgba($flow-status-start-color, 0.1); + color: $flow-status-start-color; } - &.progress { - background-color: rgba(27, 154, 238, 0.1); - border-color: rgba(27, 154, 238, 0.1); - color: #0171c2; + background-color: rgba($flow-status-progress-color, 0.1);; + border-color: rgba($flow-status-progress-color, 0.1);; + color: $flow-status-progress-color; } - &.test { - background-color: rgba(27, 154, 238, 0.1); - border-color: rgba(27, 154, 238, 0.1); - color: #0171c2; + background-color: rgba($flow-status-test-color, 0.1);; + border-color: rgba($flow-status-test-color, 0.1);; + color: $flow-status-test-color; } - &.end { - background-color: rgba(21, 173, 49, 0.1); - border-color: rgba(21, 173, 49, 0.1); - color: #038a24; + background-color: rgba($flow-status-end-color, 0.1);; + border-color: rgba($flow-status-end-color, 0.1);; + color: $flow-status-end-color; } } } diff --git a/resources/assets/sass/pages/page-dashboard.scss b/resources/assets/sass/pages/page-dashboard.scss index f54d891f8..2d50fd1a8 100644 --- a/resources/assets/sass/pages/page-dashboard.scss +++ b/resources/assets/sass/pages/page-dashboard.scss @@ -178,24 +178,24 @@ margin-right: 3px; text-align: center; &.start { - background-color: rgba(38, 38, 38, 0.05); - border-color: rgba(38, 38, 38, 0.05); - color: #595959; + background-color: rgba($flow-status-start-color, 0.1); + border-color: rgba($flow-status-start-color, 0.1); + color: $flow-status-start-color; } &.progress { - background-color: rgba(27, 154, 238, 0.1); - border-color: rgba(27, 154, 238, 0.1); - color: #0171c2; + background-color: rgba($flow-status-progress-color, 0.1);; + border-color: rgba($flow-status-progress-color, 0.1);; + color: $flow-status-progress-color; } &.test { - background-color: rgba(27, 154, 238, 0.1); - border-color: rgba(27, 154, 238, 0.1); - color: #0171c2; + background-color: rgba($flow-status-test-color, 0.1);; + border-color: rgba($flow-status-test-color, 0.1);; + color: $flow-status-test-color; } &.end { - background-color: rgba(21, 173, 49, 0.1); - border-color: rgba(21, 173, 49, 0.1); - color: #038a24; + background-color: rgba($flow-status-end-color, 0.1);; + border-color: rgba($flow-status-end-color, 0.1);; + color: $flow-status-end-color; } } } diff --git a/resources/assets/sass/var.scss b/resources/assets/sass/var.scss index 13953fbbf..ec440e036 100644 --- a/resources/assets/sass/var.scss +++ b/resources/assets/sass/var.scss @@ -1,3 +1,9 @@ $primary-color: #8bcf70; $primary-title-color: #303133; $primary-text-color: #606266; + +$flow-status-archived-color: #7f7f7f; +$flow-status-start-color: #FF7070; +$flow-status-progress-color: #fc984b; +$flow-status-test-color: #2f99ec; +$flow-status-end-color: #0bc037;