diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index b532e5f1a..2d9323511 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -14,7 +14,7 @@
*= require ./medium.css
*= require ./fira-sans.css
*= require ./svg-dimensions.css
- *= require ./zammad.css.scss
+ *= require ./zammad.scss
*
*= require_tree ./custom/
*
diff --git a/app/assets/stylesheets/svg-dimensions.css b/app/assets/stylesheets/svg-dimensions.css
index db27d7f68..e698d73d9 100644
--- a/app/assets/stylesheets/svg-dimensions.css
+++ b/app/assets/stylesheets/svg-dimensions.css
@@ -2,8 +2,8 @@
.icon-arrow-left { width: 7px; height: 13px; }
.icon-arrow-right { width: 7px; height: 13px; }
.icon-arrow-up { width: 13px; height: 7px; }
-.icon-checkbox-checked { width: 10px; height: 10px; }
-.icon-checkbox { width: 10px; height: 10px; }
+.icon-checkbox-checked { width: 11px; height: 11px; }
+.icon-checkbox { width: 11px; height: 11px; }
.icon-checkmark { width: 16px; height: 14px; }
.icon-clipboard { width: 16px; height: 16px; }
.icon-clock { width: 16px; height: 16px; }
@@ -70,6 +70,9 @@
.icon-status { width: 16px; height: 16px; }
.icon-stopwatch { width: 77px; height: 83px; }
.icon-switchView { width: 19px; height: 18px; }
+.icon-task-state-modified-inner-circle { width: 16px; height: 16px; }
+.icon-task-state-modified-outer-circle { width: 16px; height: 16px; }
+.icon-task-state { width: 16px; height: 16px; }
.icon-team { width: 16px; height: 16px; }
.icon-templates { width: 24px; height: 24px; }
.icon-tools { width: 24px; height: 24px; }
diff --git a/app/assets/stylesheets/zammad.css.scss b/app/assets/stylesheets/zammad.scss
similarity index 98%
rename from app/assets/stylesheets/zammad.css.scss
rename to app/assets/stylesheets/zammad.scss
index f6264dd74..cb021b72e 100644
--- a/app/assets/stylesheets/zammad.css.scss
+++ b/app/assets/stylesheets/zammad.scss
@@ -4,6 +4,11 @@ $ok-color: hsl(41,100%,49%);
$bad-color: hsl(30,93%,50%);
$superbad-color: hsl(19,90%,51%);
+$task-state-closed-color: $supergood-color;
+$task-state-pending-color: hsl(206,7%,28%);
+$task-state-open-color: $ok-color;
+$task-state-escalating-color: $superbad-color;
+
$minWidth: 1024px;
$sidebarWidth: 280px;
$navigationWidth: 260px;
@@ -632,11 +637,6 @@ table {
fill: hsl(240,1%,77%);
}
-.table .icon-priority {
- vertical-align: middle;
- margin-top: -3px;
-}
-
.checkbox-replacement,
.radio-replacement {
padding: 0;
@@ -672,8 +672,11 @@ table {
height: 38px;
}
-.table .priority.icon:after {
- background: #f8f9fa;
+.table-overview tbody .icon-checkbox,
+.table-overview tbody .icon-radio,
+.table-overview tbody .icon-checkbox-checked,
+.table-overview tbody .icon-radio-checked {
+ fill: transparent;
}
.table .table-cell {
@@ -1932,6 +1935,11 @@ ol.tabs li {
}
}
+.icon-checkbox,
+.icon-checkbox-checked {
+ fill: white;
+}
+
/*
* removed margin of forms to not break the layout with submit buttons within area e. g. for modal dialogs
@@ -2176,13 +2184,12 @@ footer {
color: hsl(198,19%,72%);
}
- .tasks--standalone .icon-priority {
+ .tasks--standalone .icon-task-state {
margin-right: 4px;
- margin-top: 2px;
}
.nav-tab {
- padding: 10px 15px 7px 0;
+ padding: 11px 15px 8px 0;
position: relative;
color: #808080;
display: flex;
@@ -2191,7 +2198,7 @@ footer {
}
.tasks-navigation .nav-tab {
- height: 38px;
+ height: 40px;
border-bottom: 1px solid #33363e;
}
@@ -2229,6 +2236,7 @@ footer {
.nav-tab.nav-tab--search {
height: 30px;
+ padding-top: 9px;
}
.nav-tab-icon {
@@ -2323,33 +2331,60 @@ footer {
opacity: 1;
}
-.level-1.is-active {
- background-color: #38ae6a;
-}
-.level-1 .icon-priority,
-.level-1.icon-priority {
- fill: #38ae6a;
+.icon-task-state {
+ vertical-align: middle;
+ margin-top: -2px;
}
-.level-2.is-active {
- background-color: #f35910;
-}
-.level-2 .icon-priority,
-.level-2.icon-priority {
- fill: #f35910;
+.nav-tab-icon .icon-task-state {
+ margin: 0;
}
-.level-3.is-active {
- background-color: #faab00;
+.nav-tab.task-state-open.is-active {
+ background-color: $task-state-open-color;
}
-.level-3 .icon-priority,
-.level-3.icon-priority {
- fill: #faab00;
+.task-state-open-color {
+ color: $task-state-open-color;
+}
+.icon-task-state.open {
+ fill: $task-state-open-color;
+}
+
+.nav-tab.task-state-closed.is-active {
+ background-color: $task-state-closed-color;
+}
+.task-state-closed-color {
+ color: $task-state-closed-color;
+}
+.icon-task-state.closed {
+ fill: $task-state-closed-color;
+}
+
+.nav-tab.task-state-escalating.is-active {
+ background-color: $task-state-escalating-color;
+}
+.task-state-escalating-color {
+ color: $task-state-escalating-color;
+}
+.icon-task-state.escalating {
+ fill: $task-state-escalating-color;
+}
+
+// pending: stays blue
+// .nav-tab.task-state-pending.is-active {
+// background-color: $task-state-pending-color;
+// }
+
+.task-state-pending-color {
+ color: $task-state-pending-color;
+}
+.icon-task-state.pending {
+ fill: $task-state-pending-color;
}
.search {
padding: 11px 5px 4px 10px;
- border-bottom: 1px solid rgba(240, 250, 255, .05);
+ border-bottom: 1px solid rgba(240,250,255,.05);
flex-shrink: 0;
display: flex;
background-color: inherit;
@@ -4932,7 +4967,8 @@ footer {
margin-top: 0;
margin-bottom: 15px;
height: auto;
- padding-bottom: 2px;
+ padding-top: 3px;
+ padding-bottom: 3px;
background: hsl(210,17%,98%);
}
@@ -4953,7 +4989,7 @@ footer {
}
.checkbox.form-group input[type=checkbox] {
- margin-top: 3px;
+ margin-top: 7px;
vertical-align: bottom;
}
diff --git a/contrib/icon-sprite.sketch b/contrib/icon-sprite.sketch
index a3aab002b..55a87a83e 100644
Binary files a/contrib/icon-sprite.sketch and b/contrib/icon-sprite.sketch differ
diff --git a/public/assets/images/icons.svg b/public/assets/images/icons.svg
index d0c002ba2..8ab269d14 100644
--- a/public/assets/images/icons.svg
+++ b/public/assets/images/icons.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/public/assets/images/icons/checkbox-checked.svg b/public/assets/images/icons/checkbox-checked.svg
index 3c866348a..c7a1b67af 100644
--- a/public/assets/images/icons/checkbox-checked.svg
+++ b/public/assets/images/icons/checkbox-checked.svg
@@ -1,12 +1,14 @@
-
\ No newline at end of file
diff --git a/public/assets/images/icons/task-state-modified-inner-circle.svg b/public/assets/images/icons/task-state-modified-inner-circle.svg
new file mode 100644
index 000000000..6dc061a82
--- /dev/null
+++ b/public/assets/images/icons/task-state-modified-inner-circle.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/public/assets/images/icons/task-state-modified-outer-circle.svg b/public/assets/images/icons/task-state-modified-outer-circle.svg
new file mode 100644
index 000000000..ce86edb3b
--- /dev/null
+++ b/public/assets/images/icons/task-state-modified-outer-circle.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/public/assets/images/icons/task-state.svg b/public/assets/images/icons/task-state.svg
new file mode 100644
index 000000000..b921bcb38
--- /dev/null
+++ b/public/assets/images/icons/task-state.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file