improved button colors

Signed-off-by: Stephan Richter <s.richter@srsoftware.de>

frontend/src/routes/project/Kanban.svelte

@@ -185,6 +185,10 @@
         highlight.archive = true;
     }
 
+    function is_custom(state){
+        return [10,20,40,60,100].includes(state);
+    }
+
     function openTask(task_id){
         window.open(`/task/${task_id}/view`, '_blank').focus();
     }
@@ -244,7 +248,7 @@
     {#each users as u}
         <div class="user">{u.name}</div>
         {#each Object.entries(project.allowed_states) as [state,name]}
-            <div class={['state_'+state, highlight.user == u.id && highlight.state == state ? 'highlight':'']} ondragover={ev => hover(ev,u.id,state)} ondragleave={e => delete highlight.user} ondrop={ev => drop(u.id,state)} >
+            <div class={['state_'+state, is_custom(state) ? '':'state_custom' ,highlight.user == u.id && highlight.state == state ? 'highlight':'']} ondragover={ev => hover(ev,u.id,state)} ondragleave={e => delete highlight.user} ondrop={ev => drop(u.id,state)} >
                 {#each Object.values(tasks[u.id][state]).sort(byName) as task}
                     {#if !filter || task.name.toLowerCase().includes(filter) || (task.tags && task.tags.filter(tag => tag.toLowerCase().includes(filter)).length)}
                     <Card onclick={e => openTask(task.id)} ondragstart={ev => dragged=task} {task} tag_colors={project.tag_colors} />

frontend/src/routes/stock/Index.svelte

@@ -145,6 +145,7 @@
             error(res);
             return null;
         }
+
     }
 
     async function loadProperties(){

frontend/src/routes/stock/Locations.svelte

@@ -1,5 +1,5 @@
 <script>
-    import { api, get, post } from '../../urls.svelte';
+    import { api, get } from '../../urls.svelte';
     import { error, yikes } from '../../warn.svelte';
     import { t }   from '../../translations.svelte';
 

web/src/main/resources/web/css/bloodshed-color.css

@@ -139,6 +139,10 @@ tr:hover .taglist .tag button {
     color: red;
 }
 
+.states .active{
+    background: red;
+}
+
 .taglist .tag{
     border-color: red;
 }
@@ -186,8 +190,6 @@ tr:hover .taglist .tag button {
     border-color: 1px solid;
 }
 
-
-
 .warn {
     background-color: yellow;
     color: black;
@@ -201,6 +203,7 @@ tr:hover .taglist .tag button {
 .task.p10 .name{
     color: #ffa736;
 }
+.kanban .state_custom .box.p10,
 .kanban .state_20 .box.p10,
 .kanban .state_40 .box.p10{
     border: 5px solid #ffa736;
@@ -209,6 +212,7 @@ tr:hover .taglist .tag button {
 .task.p20 .name{
     color: #ff8f00;
 }
+.kanban .state_custom .box.p20,
 .kanban .state_20 .box.p20,
 .kanban .state_40 .box.p20{
     border: 5px solid #ff8f00;
@@ -217,6 +221,7 @@ tr:hover .taglist .tag button {
 .task.p30 .name{
     color: #ff7b06;
 }
+.kanban .state_custom .box.p30,
 .kanban .state_20 .box.p30,
 .kanban .state_40 .box.p30{
     border: 5px solid #ff7b06;
@@ -225,6 +230,7 @@ tr:hover .taglist .tag button {
 .task.p40 .name{
     color: #ff6306;
 }
+.kanban .state_custom .box.p40,
 .kanban .state_20 .box.p40,
 .kanban .state_40 .box.p40{
     border: 5px solid #ff6306;
@@ -233,6 +239,7 @@ tr:hover .taglist .tag button {
 .task.p50 .name{
     color: #ff4c06;
 }
+.kanban .state_custom .box.p50,
 .kanban .state_20 .box.p50,
 .kanban .state_40 .box.p50{
     border: 5px solid #ff4c06;
@@ -241,6 +248,7 @@ tr:hover .taglist .tag button {
 .task.p60 .name{
     color: #ff3506;
 }
+.kanban .state_custom .box.p60,
 .kanban .state_20 .box.p60,
 .kanban .state_40 .box.p60{
     border: 5px solid #ff3506;
@@ -249,6 +257,7 @@ tr:hover .taglist .tag button {
 .task.p70 .name{
     color: #ff0000;
 }
+.kanban .state_custom .box.p70,
 .kanban .state_20 .box.p70,
 .kanban .state_40 .box.p70{
     border: 5px solid #ff0000;
@@ -257,6 +266,7 @@ tr:hover .taglist .tag button {
 .task.p80 .name{
     color: #df153b;
 }
+.kanban .state_custom .box.p80,
 .kanban .state_20 .box.p80,
 .kanban .state_40 .box.p80{
     border: 5px solid #df153b;
@@ -266,6 +276,7 @@ tr:hover .taglist .tag button {
     background-color: #991c34;
     color: #ffff00;
 }
+.kanban .state_custom .box.p90,
 .kanban .state_20 .box.p90,
 .kanban .state_40 .box.p90{
     border: 5px solid #991c34;
@@ -275,6 +286,7 @@ tr:hover .taglist .tag button {
     background-color: #733440;
     color: #ffff00;
 }
+.kanban .state_custom .box.p100,
 .kanban .state_20 .box.p100,
 .kanban .state_40 .box.p100{
     border: 5px solid #733440;

web/src/main/resources/web/css/default-color.css

@@ -176,7 +176,6 @@ tr:hover .taglist .tag button {
   background: black;
 }
 
-
 .version a.selected{
      border-color: orange;
 }
@@ -194,6 +193,7 @@ tr:hover .taglist .tag button {
 .task.p10 .name{
     color: #fff066;
 }
+.kanban .state_custom .box.p10,
 .kanban .state_20 .box.p10,
 .kanban .state_40 .box.p10{
     border: 5px solid #fff066;
@@ -202,6 +202,7 @@ tr:hover .taglist .tag button {
 .task.p20 .name{
     color: #ffe706;
 }
+.kanban .state_custom .box.p20,
 .kanban .state_20 .box.p20,
 .kanban .state_40 .box.p20{
     border: 5px solid #ffe706;
@@ -210,6 +211,7 @@ tr:hover .taglist .tag button {
 .task.p30 .name{
     color: #ffa906;
 }
+.kanban .state_custom .box.p30,
 .kanban .state_20 .box.p30,
 .kanban .state_40 .box.p30{
     border: 5px solid #ffa906;
@@ -218,6 +220,7 @@ tr:hover .taglist .tag button {
 .task.p40 .name{
     color: #ff8606;
 }
+.kanban .state_custom .box.p40,
 .kanban .state_20 .box.p40,
 .kanban .state_40 .box.p40{
     border: 5px solid #ff8606;
@@ -226,6 +229,7 @@ tr:hover .taglist .tag button {
 .task.p50 .name{
     color: #ff4c06;
 }
+.kanban .state_custom .box.p50,
 .kanban .state_20 .box.p50,
 .kanban .state_40 .box.p50{
     border: 5px solid #ff4c06;
@@ -234,6 +238,7 @@ tr:hover .taglist .tag button {
 .task.p60 .name{
     color: #ff3506;
 }
+.kanban .state_custom .box.p60,
 .kanban .state_20 .box.p60,
 .kanban .state_40 .box.p60{
     border: 5px solid #ff3506;
@@ -242,6 +247,7 @@ tr:hover .taglist .tag button {
 .task.p70 .name{
     color: #ff0000;
 }
+.kanban .state_custom .box.p70,
 .kanban .state_20 .box.p70,
 .kanban .state_40 .box.p70{
     border: 5px solid #ff0000;
@@ -250,6 +256,7 @@ tr:hover .taglist .tag button {
 .task.p80 .name{
     color: #df153b;
 }
+.kanban .state_custom .box.p80,
 .kanban .state_20 .box.p80,
 .kanban .state_40 .box.p80{
     border: 5px solid #df153b;
@@ -259,6 +266,7 @@ tr:hover .taglist .tag button {
     background-color: #991c34;
     color: #ffff00;
 }
+.kanban .state_custom .box.p90,
 .kanban .state_20 .box.p90,
 .kanban .state_40 .box.p90{
     border: 5px solid #991c34;
@@ -268,6 +276,7 @@ tr:hover .taglist .tag button {
     background-color: #733440;
     color: #ffff00;
 }
+.kanban .state_custom .box.p100,
 .kanban .state_20 .box.p100,
 .kanban .state_40 .box.p100{
     border: 5px solid #733440;

web/src/main/resources/web/css/winter-color.css

@@ -124,6 +124,10 @@ tr:hover .taglist .tag button {
   border-color: blue;
 }
 
+.states .active{
+    background: #dfe4ff;
+}
+
 .taglist .tag{
     border-color: blue;
 }
@@ -179,6 +183,7 @@ tr:hover .taglist .tag button {
 .task.p10 .name{
     color: #c9fbb2;
 }
+.kanban .state_custom .box.p10,
 .kanban .state_20 .box.p10,
 .kanban .state_40 .box.p10{
     border: 5px solid #c9fbb2;
@@ -187,6 +192,7 @@ tr:hover .taglist .tag button {
 .task.p20 .name{
     color: #cbff57;
 }
+.kanban .state_custom .box.p20,
 .kanban .state_20 .box.p20,
 .kanban .state_40 .box.p20{
     border: 5px solid #cbff57;
@@ -195,6 +201,7 @@ tr:hover .taglist .tag button {
 .task.p30 .name{
     color: #dfff44;
 }
+.kanban .state_custom .box.p30,
 .kanban .state_20 .box.p30,
 .kanban .state_40 .box.p30{
     border: 5px solid #dfff44;
@@ -203,6 +210,7 @@ tr:hover .taglist .tag button {
 .task.p40 .name{
     color: #f8ff29;
 }
+.kanban .state_custom .box.p40,
 .kanban .state_20 .box.p40,
 .kanban .state_40 .box.p40{
     border: 5px solid #f8ff29;
@@ -211,6 +219,7 @@ tr:hover .taglist .tag button {
 .task.p50 .name{
     color: #ffdb1b;
 }
+.kanban .state_custom .box.p50,
 .kanban .state_20 .box.p50,
 .kanban .state_40 .box.p50{
     border: 5px solid #ffdb1b;
@@ -219,6 +228,7 @@ tr:hover .taglist .tag button {
 .task.p60 .name{
     color: #ff9309;
 }
+.kanban .state_custom .box.p60,
 .kanban .state_20 .box.p60,
 .kanban .state_40 .box.p60{
     border: 5px solid #ff9309;
@@ -227,6 +237,7 @@ tr:hover .taglist .tag button {
 .task.p70 .name{
     color: #ff6c00;
 }
+.kanban .state_custom .box.p70,
 .kanban .state_20 .box.p70,
 .kanban .state_40 .box.p70{
     border: 5px solid #ff6c00;
@@ -235,6 +246,7 @@ tr:hover .taglist .tag button {
 .task.p80 .name{
     color: #ff3c00;
 }
+.kanban .state_custom .box.p80,
 .kanban .state_20 .box.p80,
 .kanban .state_40 .box.p80{
     border: 5px solid #ff3c00;
@@ -243,6 +255,7 @@ tr:hover .taglist .tag button {
 .task.p90 .name{
     color: #ff0000;
 }
+.kanban .state_custom .box.p90,
 .kanban .state_20 .box.p90,
 .kanban .state_40 .box.p90{
     border: 5px solid #ff0000;
@@ -251,6 +264,7 @@ tr:hover .taglist .tag button {
 .task.p100 .name{
     color: #ff0048;
 }
+.kanban .state_custom .box.p100,
 .kanban .state_20 .box.p100,
 .kanban .state_40 .box.p100{
     border: 5px solid #ff0048;