From 0cbd50b4ade34e28a10158f320298865de0ae939 Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Sat, 9 Oct 2021 14:17:53 +0300
Subject: [PATCH] Add ColorsPopup (#247)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 .../src/components/ColorsPopup.svelte         | 50 ++++++++++++++
 .../src/components/EditStatuses.svelte        | 66 +++++++++++--------
 .../src/components/PopupDialog.svelte         | 66 +++++++++++++++++++
 3 files changed, 153 insertions(+), 29 deletions(-)
 create mode 100644 plugins/workbench-resources/src/components/ColorsPopup.svelte
 create mode 100644 plugins/workbench-resources/src/components/PopupDialog.svelte

diff --git a/plugins/workbench-resources/src/components/ColorsPopup.svelte b/plugins/workbench-resources/src/components/ColorsPopup.svelte
new file mode 100644
index 0000000000..8b05d8d6a3
--- /dev/null
+++ b/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>
diff --git a/plugins/workbench-resources/src/components/EditStatuses.svelte b/plugins/workbench-resources/src/components/EditStatuses.svelte
index 033e175659..7b58f612f6 100644
--- a/plugins/workbench-resources/src/components/EditStatuses.svelte
+++ b/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,34 +119,40 @@
     <div class="tool" on:click={() => dispatch('close')}><Close size={'small'} /></div>
   </div>
   <div class="content">
-    <div class="flex-between states-header">
-      <Label label={'ACTIVE STATUSES'} />
-      <div on:click={addStatus}><CircleButton icon={IconAdd} size={'medium'} /></div>
-    </div>
-    {#each states as state, i}
-      {#if state}
-        <div bind:this={elements[i]} class="flex-between states" draggable={true}
-          on:dragover|preventDefault={(ev) => {
-            dragover(ev, i)
-          }}
-          on:drop|preventDefault={() => {
-            move(i)
-          }}
-          on:dragstart={() => {
-            dragStateInitialPosition = selected = i
-            dragState = states[i]._id
-          }}
-          on:dragend={() => {
-            selected = undefined
-          }}
-        >
-          <div class="bar"><Circles /></div>
-          <div class="color" style="background-color: {state.color}" />
-          <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 vertical stretch>
+      <div class="flex-between states-header">
+        <Label label={'ACTIVE STATUSES'} />
+        <div on:click={addStatus}><CircleButton icon={IconAdd} size={'medium'} /></div>
+      </div>
+      {#each states as state, i}
+        {#if state}
+          <div bind:this={elements[i]} class="flex-between states" draggable={true}
+            on:dragover|preventDefault={(ev) => {
+              dragover(ev, i)
+            }}
+            on:drop|preventDefault={() => {
+              move(i)
+            }}
+            on:dragstart={() => {
+              dragStateInitialPosition = selected = i
+              dragState = states[i]._id
+            }}
+            on:dragend={() => {
+              selected = undefined
+            }}
+          >
+            <div class="bar"><Circles /></div>
+            <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;
diff --git a/plugins/workbench-resources/src/components/PopupDialog.svelte b/plugins/workbench-resources/src/components/PopupDialog.svelte
new file mode 100644
index 0000000000..469218bfe1
--- /dev/null
+++ b/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>
\ No newline at end of file