Add ColorsPopup (#247)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>

plugins/workbench-resources/src/components/ColorsPopup.svelte

@@ -0,0 +1,50 @@
+<!--
+// 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">
+  import { createEventDispatcher } from 'svelte'
+  import PopupDialog from './PopupDialog.svelte'
+
+  export let colors: string[] = ['#A5D179', '#77C07B', '#60B96E', '#45AEA3', '#46CBDE', '#47BDF6',
+                                 '#5AADF6', '#73A6CD', '#B977CB', '#7C6FCD', '#6F7BC5', '#F28469']
+  export let columns: number = 5
+
+  const dispatch = createEventDispatcher()
+</script>
+
+<PopupDialog label={'CHOOSE A COLOR'}>
+  <div class="color-grid" style="grid-template-columns: repeat({columns}, 1.5rem)">
+    {#each colors as color}
+      <div class="color" style="background-color: {color}" on:click={() => { dispatch('close', color) }} />
+    {/each}
+  </div>
+</PopupDialog>
+
+<style lang="scss">
+  .color-grid {
+    display: grid;
+    grid-auto-rows: 1.5rem;
+    gap: 1rem;
+
+    .color {
+      border: 1px solid transparent;
+      border-radius: 50%;
+      cursor: pointer;
+
+      &:hover { border-color: var(--theme-button-border-focused); }
+    }
+  }
+</style>

plugins/workbench-resources/src/components/EditStatuses.svelte

@@ -16,12 +16,13 @@
 
 <script lang="ts">
   import type { Ref, SpaceWithStates, State } from '@anticrm/core'
-  import { CircleButton, IconAdd, Label, IconMoreH, ActionIcon } from '@anticrm/ui'
+  import { CircleButton, IconAdd, Label, IconMoreH, ActionIcon, showPopup, ScrollBox } from '@anticrm/ui'
   import { createQuery, getClient, AttributeEditor } from '@anticrm/presentation'
   import { createEventDispatcher } from 'svelte'
   import Close from './icons/Close.svelte'
   import Circles from './icons/Circles.svelte'
   import Status from './icons/Status.svelte'
+  import ColorsPopup from './ColorsPopup.svelte'
 
   import core from '@anticrm/core'
 
@@ -118,6 +119,7 @@
     <div class="tool" on:click={() => dispatch('close')}><Close size={'small'} /></div>
   </div>
   <div class="content">
+    <ScrollBox vertical stretch>
       <div class="flex-between states-header">
         <Label label={'ACTIVE STATUSES'} />
         <div on:click={addStatus}><CircleButton icon={IconAdd} size={'medium'} /></div>
@@ -140,12 +142,17 @@
             }}
           >
             <div class="bar"><Circles /></div>
-          <div class="color" style="background-color: {state.color}" />
+            <div class="color" style="background-color: {state.color}"
+              on:click={() => {
+                showPopup(ColorsPopup, {}, elements[i], (result) => { if (result) state.color = result })
+              }}
+            />
             <div class="flex-grow caption-color"><AttributeEditor maxWidth="20rem" _class={core.class.State} object={state} key="title"/></div>
             <div class="tool"><ActionIcon icon={IconMoreH} label={'More...'} size={'medium'} /></div>
           </div>
         {/if}
       {/each}
+    </ScrollBox>
   </div>
 </div>
 
@@ -217,6 +224,7 @@
       width: 1rem;
       height: 1rem;
       border-radius: .25rem;
+      cursor: pointer;
     }
     .tool {
       margin-left: 1rem;

plugins/workbench-resources/src/components/PopupDialog.svelte

@@ -0,0 +1,66 @@
+<!--
+// 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">
+  import type { IntlString } from '@anticrm/platform'
+  import { Label } from '@anticrm/ui'
+
+  export let label: IntlString
+</script>
+
+<div class="card-container">
+  <div class="card-bg" />
+  <div class="overflow-label label"><Label {label} /></div>
+  <div class="content"><slot /></div>
+</div>
+
+<style lang="scss">
+  .card-container {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    padding: 1rem 1.5rem 1.25rem;
+    border-radius: .75rem;
+
+    .label {
+      flex-shrink: 0;
+      margin-bottom: 1.25rem;
+      text-transform: uppercase;
+      font-weight: 600;
+      font-size: .75rem;
+      color: var(--theme-content-trans-color);
+    }
+
+    .content {
+      flex-shrink: 0;
+      flex-grow: 1;
+      height: fit-content;
+    }
+
+    .card-bg {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      background-color: var(--theme-card-bg);
+      border-radius: .75rem;
+      backdrop-filter: blur(24px);
+      box-shadow: var(--theme-card-shadow);
+      z-index: -1;
+    }
+  }
+</style>