Done statuses, replaced circles with a tick and a cross (#2227)

Signed-off-by: Alexander Platov <[email protected]>

Author: SasLord

packages/theme/styles/_colors.scss

@@ -78,7 +78,8 @@
   --caret-color: #6e5ed2;
   --warning-color: #f2994a;
   --error-color: #eb5757;
-  --done-color: #34DB80;
+  --lost-color: #eb5757;
+  --won-color: #34DB80;
 
   --divider-color: #303236;
   --menu-bg-select: #2d2f36;
@@ -229,7 +230,8 @@
   --caret-color: #6e5ed2;
   --warning-color: #f2994a;  // Dark
   --error-color: #eb5757;  // Dark
-  --done-color: #34DB80;  // Dark
+  --lost-color: #eb5757;  // Dark
+  --won-color: #34DB80;  // Dark
 
   --divider-color: #e0e0e0;
   --menu-bg-select: #f0f3f9;

packages/ui/src/components/TabList.svelte

@@ -62,7 +62,9 @@
         }}
       >
         {#if item.icon}
-          <div class="icon"><Icon icon={item.icon} size={size === 'small' ? 'x-small' : 'small'} /></div>
+          <div class="icon">
+            <Icon icon={item.icon} size={size === 'small' ? 'x-small' : 'small'} fill={item.color ?? 'currentColor'} />
+          </div>
         {:else if item.color}
           <div class="color" style:background-color={item.color} />
         {/if}

plugins/task-resources/src/components/StatusTableView.svelte

@@ -22,6 +22,8 @@
   import { TableBrowser } from '@anticrm/view-resources'
   import task from '../plugin'
   import StatesBar from './state/StatesBar.svelte'
+  import Won from './icons/Won.svelte'
+  import Lost from './icons/Lost.svelte'
 
   export let _class: Ref<Class<Task>>
   export let space: Ref<SpaceWithStates>
@@ -61,7 +63,8 @@
         return {
           id: s._id,
           label: s.title,
-          color: s._class === task.class.WonState ? 'var(--done-color)' : 'var(--error-color)'
+          icon: s._class === task.class.WonState ? Won : Lost,
+          color: s._class === task.class.WonState ? 'var(--won-color)' : 'var(--lost-color)'
         }
       })
       itemsDS.unshift({ id: 'NoDoneState', labelIntl: task.string.NoDoneState })

plugins/task-resources/src/components/icons/Lost.svelte

@@ -15,11 +15,18 @@
 -->
 <script lang="ts">
   export let size: 'small' | 'medium' | 'large'
-  const fill: string = 'currentColor'
+  export let style: 'normal' | 'circle' = 'normal'
+  export let fill: string = 'var(--lost-color)'
 </script>
 
-<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-  <path
-    d="M8,1.5C4.4,1.5,1.5,4.4,1.5,8s2.9,6.5,6.5,6.5s6.5-2.9,6.5-6.5S11.6,1.5,8,1.5z M2.5,8c0-1.3,0.5-2.6,1.3-3.5l7.7,7.7 c-1,0.8-2.2,1.3-3.5,1.3C5,13.5,2.5,11,2.5,8z M12.2,11.5L4.5,3.8C5.4,3,6.7,2.5,8,2.5c3,0,5.5,2.5,5.5,5.5 C13.5,9.3,13,10.6,12.2,11.5z"
-  />
+<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  {#if style === 'circle'}
+    <path
+      d="M15.7,8.3c-0.1-0.1-0.2-0.2-0.3-0.2C15.3,8,15.1,8,15,8s-0.3,0-0.4,0.1c-0.1,0.1-0.2,0.1-0.3,0.2L12,10.6L9.7,8.3C9.5,8.1,9.3,8,9,8S8.5,8.1,8.3,8.3C8.1,8.5,8,8.7,8,9c0,0.3,0.1,0.5,0.3,0.7l2.3,2.3l-2.3,2.3c-0.1,0.1-0.2,0.2-0.2,0.3C8,14.7,8,14.9,8,15s0,0.3,0.1,0.4c0.1,0.1,0.1,0.2,0.2,0.3c0.1,0.1,0.2,0.2,0.3,0.2C8.7,16,8.9,16,9,16c0.1,0,0.3,0,0.4-0.1c0.1-0.1,0.2-0.1,0.3-0.2l2.3-2.3l2.3,2.3c0.1,0.1,0.2,0.2,0.3,0.2C14.7,16,14.9,16,15,16s0.3,0,0.4-0.1c0.1-0.1,0.2-0.1,0.3-0.2c0.1-0.1,0.2-0.2,0.2-0.3C16,15.3,16,15.1,16,15s0-0.3-0.1-0.4c-0.1-0.1-0.1-0.2-0.2-0.3L13.4,12l2.3-2.3c0.1-0.1,0.2-0.2,0.2-0.3C16,9.3,16,9.1,16,9c0-0.1,0-0.3-0.1-0.4C15.9,8.5,15.8,8.4,15.7,8.3L15.7,8.3z M19.1,4.9c-0.9-1-2-1.7-3.2-2.2c-1.2-0.5-2.5-0.8-3.9-0.8c-1.3,0-2.6,0.2-3.9,0.7S5.7,3.9,4.8,4.8C3.9,5.7,3.1,6.9,2.6,8.1C2.1,9.3,1.9,10.6,1.9,12c0,1.3,0.3,2.6,0.8,3.9C3.2,17,4,18.1,4.9,19.1c0.9,1,2,1.7,3.2,2.2c1.2,0.5,2.5,0.8,3.9,0.8c1.3,0,2.6-0.2,3.9-0.7c1.2-0.5,2.3-1.2,3.3-2.2c0.9-0.9,1.7-2.1,2.2-3.3c0.5-1.2,0.8-2.5,0.7-3.9c0-1.3-0.3-2.6-0.8-3.9S20,5.9,19.1,4.9L19.1,4.9z M17.7,17.7c-1.3,1.3-3,2.1-4.9,2.3c-1.8,0.2-3.7-0.3-5.2-1.3c-1.5-1-2.7-2.6-3.2-4.3c-0.5-1.8-0.4-3.7,0.3-5.4c0.7-1.7,2-3.1,3.6-4c1.6-0.9,3.5-1.2,5.3-0.8c1.8,0.4,3.4,1.3,4.6,2.8S20,10.1,20,12c0,1.1-0.2,2.1-0.6,3.1C19,16,18.4,16.9,17.7,17.7L17.7,17.7z"
+    />
+  {:else}
+    <path
+      d="M17.9,16.6c-0.1-0.1-0.1-0.2-0.2-0.3L13.4,12l4.3-4.3C17.9,7.5,18,7.3,18,7s-0.1-0.5-0.3-0.7C17.5,6.1,17.3,6,17,6s-0.5,0.1-0.7,0.3L12,10.6L7.7,6.3C7.5,6.1,7.3,6,7,6S6.5,6.1,6.3,6.3C6.1,6.5,6,6.7,6,7s0.1,0.5,0.3,0.7l4.3,4.3l-4.3,4.3c-0.1,0.1-0.2,0.2-0.2,0.3S6,16.9,6,17c0,0.1,0,0.3,0.1,0.4c0.1,0.1,0.1,0.2,0.2,0.3c0.1,0.1,0.2,0.2,0.3,0.2C6.7,18,6.9,18,7,18s0.3,0,0.4-0.1c0.1-0.1,0.2-0.1,0.3-0.2l4.3-4.3l4.3,4.3c0.1,0.1,0.2,0.2,0.3,0.2C16.7,18,16.9,18,17,18c0.1,0,0.3,0,0.4-0.1c0.1-0.1,0.2-0.1,0.3-0.2c0.1-0.1,0.2-0.2,0.2-0.3C18,17.3,18,17.1,18,17C18,16.9,18,16.7,17.9,16.6z"
+    />
+  {/if}
 </svg>

plugins/task-resources/src/components/icons/Unknown.svelte

@@ -0,0 +1,32 @@
+<!--
+// Copyright © 2020, 2021 Anticrm Platform Contributors.
+// Copyright © 2021 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  export let style: 'normal' | 'circle' = 'normal'
+  export let fill: string = 'var(--dark-color)'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  {#if style === 'circle'}
+    <path
+      d="M12,2c-2,0-3.9,0.6-5.6,1.7C4.8,4.8,3.5,6.3,2.8,8.2C2,10,1.8,12,2.2,14s1.3,3.7,2.7,5.1c1.4,1.4,3.2,2.4,5.1,2.7c1.9,0.4,4,0.2,5.8-0.6c1.8-0.8,3.4-2,4.5-3.7C21.4,15.9,22,14,22,12c0-1.3-0.3-2.6-0.8-3.8C20.7,7,20,5.9,19.1,4.9c-0.9-0.9-2-1.7-3.2-2.2C14.6,2.3,13.3,2,12,2z M12,20c-1.6,0-3.1-0.5-4.4-1.3c-1.3-0.9-2.3-2.1-2.9-3.6S3.8,12,4.2,10.4c0.3-1.6,1.1-3,2.2-4.1s2.5-1.9,4.1-2.2C12,3.8,13.6,4,15.1,4.6c1.5,0.6,2.7,1.6,3.6,2.9C19.5,8.9,20,10.4,20,12c0,2.1-0.8,4.2-2.3,5.7C16.2,19.2,14.1,20,12,20z M16,11H8c-0.3,0-0.5,0.1-0.7,0.3C7.1,11.5,7,11.7,7,12s0.1,0.5,0.3,0.7C7.5,12.9,7.7,13,8,13h8c0.3,0,0.5-0.1,0.7-0.3S17,12.3,17,12s-0.1-0.5-0.3-0.7S16.3,11,16,11z"
+    />
+  {:else}
+    <path
+      d="M16,11H8c-0.3,0-0.5,0.1-0.7,0.3S7,11.7,7,12s0.1,0.5,0.3,0.7S7.7,13,8,13h8c0.3,0,0.5-0.1,0.7-0.3S17,12.3,17,12s-0.1-0.5-0.3-0.7S16.3,11,16,11z"
+    />
+  {/if}
+</svg>

plugins/task-resources/src/components/icons/Won.svelte

@@ -15,11 +15,18 @@
 -->
 <script lang="ts">
   export let size: 'small' | 'medium' | 'large'
-  const fill: string = 'currentColor'
+  export let style: 'normal' | 'circle' = 'normal'
+  export let fill: string = 'var(--won-color)'
 </script>
 
-<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-  <path
-    d="M4,13.2c-0.3,0-0.5-0.2-0.5-0.5V3.8c0-0.3,0-0.6,0.2-0.8s0.5-0.2,0.8-0.2h6.3c0.6,0,1.1,0,1.3,0.5c0.2,0.5-0.1,0.8-0.6,1.2 L9.4,6.7l2.1,2.1c0.5,0.5,0.8,0.8,0.6,1.2c-0.2,0.5-0.7,0.5-1.3,0.5H4.5v2.2C4.5,12.9,4.3,13.2,4,13.2z M4.5,9.5h6.3L8.6,7.3 C8.4,7.1,8.2,7,8.2,6.7c0-0.3,0.2-0.5,0.3-0.6l2.2-2.2H4.5V9.5z"
-  />
+<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  {#if style === 'circle'}
+    <path
+      d="M14.7,8.8l-4.3,4.3l-1.7-1.7c-0.1-0.1-0.2-0.2-0.3-0.2c-0.1-0.1-0.3-0.1-0.4-0.1c-0.1,0-0.3,0-0.4,0.1c-0.1,0.1-0.2,0.1-0.3,0.2c-0.1,0.1-0.2,0.2-0.2,0.3C7,11.9,7,12,7,12.1c0,0.1,0,0.3,0.1,0.4c0.1,0.1,0.1,0.2,0.2,0.3l2.4,2.4c0.1,0.1,0.2,0.2,0.3,0.2c0.1,0,0.3,0.1,0.4,0.1c0.3,0,0.5-0.1,0.7-0.3l5-5c0.1-0.1,0.2-0.2,0.2-0.3c0.1-0.1,0.1-0.3,0.1-0.4s0-0.3-0.1-0.4c-0.1-0.1-0.1-0.2-0.2-0.3c-0.2-0.2-0.4-0.3-0.7-0.3S14.9,8.6,14.7,8.8z M12,2c-2,0-3.9,0.6-5.6,1.7C4.8,4.8,3.5,6.3,2.8,8.2C2,10,1.8,12,2.2,14s1.3,3.7,2.7,5.1c1.4,1.4,3.2,2.4,5.1,2.7c1.9,0.4,4,0.2,5.8-0.6c1.8-0.8,3.4-2,4.5-3.7C21.4,15.9,22,14,22,12c0-1.3-0.3-2.6-0.8-3.8C20.7,7,20,5.9,19.1,4.9c-0.9-0.9-2-1.7-3.2-2.2C14.6,2.3,13.3,2,12,2z M12,20c-1.6,0-3.1-0.5-4.4-1.3c-1.3-0.9-2.3-2.1-2.9-3.6S3.8,12,4.2,10.4c0.3-1.6,1.1-3,2.2-4.1s2.5-1.9,4.1-2.2C12,3.8,13.6,4,15.1,4.6c1.5,0.6,2.7,1.6,3.6,2.9C19.5,8.9,20,10.4,20,12c0,2.1-0.8,4.2-2.3,5.7C16.2,19.2,14.1,20,12,20z"
+    />
+  {:else}
+    <path
+      d="M18.9,7.5c-0.1-0.1-0.1-0.2-0.2-0.3C18.6,7.1,18.5,7,18.4,7c-0.1-0.1-0.3-0.1-0.4-0.1c-0.1,0-0.3,0-0.4,0.1c-0.1,0.1-0.2,0.1-0.3,0.2l-7.5,7.5l-3.1-3.1c-0.1-0.1-0.2-0.2-0.3-0.2S6.1,11.2,6,11.2c-0.1,0-0.3,0-0.4,0.1c-0.1,0.1-0.2,0.1-0.3,0.2S5.1,11.8,5,11.9C5,12,5,12.1,5,12.3c0,0.1,0,0.3,0.1,0.4c0.1,0.1,0.1,0.2,0.2,0.3l3.8,3.8c0.1,0.1,0.2,0.2,0.3,0.2c0.1,0.1,0.3,0.1,0.4,0.1s0.3,0,0.4-0.1c0.1-0.1,0.2-0.1,0.3-0.2l8.2-8.2c0.1-0.1,0.2-0.2,0.2-0.3C19,8.2,19,8.1,19,7.9C19,7.8,19,7.7,18.9,7.5z"
+    />
+  {/if}
 </svg>

plugins/task-resources/src/components/kanban/KanbanDragDone.svelte

@@ -18,6 +18,8 @@
   import type { Kanban } from '@anticrm/task'
   import task, { DoneState, LostState, WonState } from '@anticrm/task'
   import { createEventDispatcher } from 'svelte'
+  import Won from '../icons/Won.svelte'
+  import Lost from '../icons/Lost.svelte'
 
   export let kanban: Kanban
   let wonStates: WonState[] = []
@@ -58,7 +60,7 @@
       on:dragover|preventDefault={() => {}}
       on:drop={onDone(wonState)}
     >
-      <div class="done-icon won mr-2" />
+      <div class="mr-2"><Won size={'small'} /></div>
       {wonState.title}
     </div>
   {/each}
@@ -77,7 +79,7 @@
       on:dragover|preventDefault={() => {}}
       on:drop={onDone(lostState)}
     >
-      <div class="done-icon lost mr-2" />
+      <div class="mr-2"><Lost size={'small'} /></div>
       {lostState.title}
     </div>
   {/each}
@@ -111,17 +113,4 @@
       border-color: var(--theme-dialog-divider);
     }
   }
-
-  .done-icon {
-    width: 0.5rem;
-    height: 0.5rem;
-    border-radius: 50%;
-
-    &.won {
-      background-color: #27b166;
-    }
-    &.lost {
-      background-color: #f96e50;
-    }
-  }
 </style>

plugins/task-resources/src/components/state/DoneStateEditor.svelte

@@ -22,6 +22,7 @@
   import DoneStatePresenter from './DoneStatePresenter.svelte'
   import DoneStatesPopup from './DoneStatesPopup.svelte'
   import task from '../../plugin'
+  import Unknown from '../icons/Unknown.svelte'
 
   export let value: Ref<DoneState> | null | undefined
   export let onChange: (value: any) => void
@@ -47,6 +48,7 @@
     )
   } else {
     query.unsubscribe()
+    state = undefined
   }
 </script>
 
@@ -78,19 +80,9 @@
       <div class="pointer-events-none"><DoneStatePresenter value={state} showTitle /></div>
     {:else}
       <div class="flex-row-center pointer-events-none">
-        <div class="color background-card-divider" />
+        <div class="dark-color mr-2"><Unknown size={'small'} /></div>
         <span class="overflow-label"><Label label={task.string.NoDoneState} /></span>
       </div>
     {/if}
   </svelte:fragment>
 </Button>
-
-<style lang="scss">
-  .color {
-    margin-right: 0.75rem;
-    min-width: 0.5rem;
-    width: 0.5rem;
-    height: 0.5rem;
-    border-radius: 0.5rem;
-  }
-</style>

plugins/task-resources/src/components/state/DoneStatePresenter.svelte

@@ -17,6 +17,8 @@
   import type { DoneState } from '@anticrm/task'
   import task from '@anticrm/task'
   import { getPlatformColor } from '@anticrm/ui'
+  import Won from '../icons/Won.svelte'
+  import Lost from '../icons/Lost.svelte'
 
   export let value: DoneState
   export let showTitle: boolean = false
@@ -26,20 +28,11 @@
 
 {#if value}
   <div class="flex-center">
-    <div class="state-container" class:state-container-title={showTitle} style="background-color: {color};" />
+    <div class:mr-2={showTitle} style="color: {color};">
+      <svelte:component this={value._class === task.class.WonState ? Won : Lost} size={'small'} />
+    </div>
     {#if showTitle}
       {value.title}
     {/if}
   </div>
 {/if}
-
-<style lang="scss">
-  .state-container {
-    width: 0.5rem;
-    height: 0.5rem;
-    border-radius: 0.5rem;
-  }
-  .state-container-title {
-    margin-right: 0.75rem;
-  }
-</style>

plugins/task-resources/src/components/state/DoneStatesPopup.svelte

@@ -20,6 +20,9 @@
   import { getPlatformColor, Label } from '@anticrm/ui'
   import { createEventDispatcher } from 'svelte'
   import task from '../../plugin'
+  import Won from '../icons/Won.svelte'
+  import Lost from '../icons/Lost.svelte'
+  import Unknown from '../icons/Unknown.svelte'
 
   export let space: Ref<SpaceWithStates>
   let states: DoneState[] = []
@@ -53,7 +56,9 @@
             dispatch('close', state)
           }}
         >
-          <div class="color" style="background-color: {getColor(state._class)}" />
+          <div class="mr-2" style="color: {getColor(state._class)}">
+            <svelte:component this={state._class === task.class.WonState ? Won : Lost} size={'small'} />
+          </div>
           <span class="label">{state.title}</span>
         </button>
       {/each}
@@ -63,19 +68,9 @@
           dispatch('close', null)
         }}
       >
-        <div class="color background-card-divider" />
-        <Label label={task.string.NoDoneState} />
+        <div class="dark-color mr-2"><Unknown size={'small'} /></div>
+        <span class="overflow-label"><Label label={task.string.NoDoneState} /></span>
       </button>
     </div>
   </div>
 </div>
-
-<style lang="scss">
-  .color {
-    flex-shrink: 0;
-    margin-right: 0.75rem;
-    width: 0.5rem;
-    height: 0.5rem;
-    border-radius: 0.5rem;
-  }
-</style>