Add StatusesPopup (#288)

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

packages/theme/styles/_layouts.scss

@@ -216,6 +216,13 @@ table {
 }
 .svg-small, .svg-medium, .svg-large { flex-shrink: 0; }
 
+.hover-trans {
+  color: var(--theme-content-trans-color);
+  cursor: pointer;
+  &:hover { color: var(--theme-caption-color); }
+  &:active { color: var(--theme-content-accent-color); }
+}
+
 /* Link */
 a.no-line {
   text-decoration: none;
@@ -284,6 +291,8 @@ a.no-line {
 .content-dark-color { color: var(--theme-content-dark-color); }
 .caption-color { color: var(--theme-caption-color); }
 
+.red-color { color: var(--highlight-red); }
+
 .border-primary-button { border-color: var(--primary-button-border); }
 .border-button-enabled { border: 1px solid var(--theme-button-border-enabled); }
 .bottom-divider { border-bottom: 1px solid var(--theme-menu-divider); }

packages/ui/src/components/icons/MoreH.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   export let size: 'small' | 'medium' | 'large'
-  const fill: string = 'var(--theme-caption-color)'
+  const fill: string = 'currentColor'
 </script>
 
 <svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">

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

@@ -24,6 +24,7 @@
   import Circles from './icons/Circles.svelte'
   import Status from './icons/Status.svelte'
   import ColorsPopup from './ColorsPopup.svelte'
+  import StatusesPopup from './StatusesPopup.svelte'
 
   import core from '@anticrm/core'
   import view from '@anticrm/view'
@@ -144,7 +145,13 @@
               }}
             />
             <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 class="tool hover-trans"
+              on:click={(ev) => {
+                showPopup(StatusesPopup, {}, ev.target, (result) => { if (result) console.log('StatusesPopup:', result) })
+              }}
+            >
+              <IconMoreH size={'medium'} />
+            </div>
           </div>
         {/if}
       {/each}
@@ -216,10 +223,7 @@
       border-radius: .25rem;
       cursor: pointer;
     }
-    .tool {
-      margin-left: 1rem;
-      cursor: pointer;
-    }
+    .tool { margin-left: 1rem; }
   }
   .states + .states { margin-top: .5rem; }
 </style>

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

@@ -0,0 +1,58 @@
+<!--
+// Copyright © 2020 Anticrm Platform Contributors.
+// 
+// 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, Asset, Resource } from '@anticrm/platform'
+  import { createEventDispatcher } from 'svelte'
+  import { Label } from '@anticrm/ui'
+  import Delete from './icons/Delete.svelte'
+
+  const dispatch = createEventDispatcher()
+</script>
+
+<div class="flex-col popup">
+  <div class="flex-row-center red-color menu-item" on:click={() => { dispatch('close', 'delete') }}>
+    <div class="icon">
+      <Delete size={'medium'} />
+    </div>
+    <div class="flex-grow"><Label label={'Delete'} /></div>
+  </div>
+</div>
+
+<style lang="scss">
+  .popup {
+    padding: .5rem;
+    min-width: 12rem;
+    background-color: var(--theme-button-bg-focused);
+    border: 1px solid var(--theme-button-border-enabled);
+    border-radius: .75rem;
+    box-shadow: 0 .75rem 1.25rem rgba(0, 0, 0, .2);
+  }
+
+  .menu-item {
+    display: flex;
+    align-items: center;
+    padding: .5rem;
+    border-radius: .5rem;
+    cursor: pointer;
+
+    .icon {
+      margin-right: .75rem;
+      transform-origin: center center;
+      transform: scale(.75);
+    }
+    &:hover { background-color: var(--theme-button-bg-hovered); }
+  }
+</style>

plugins/workbench-resources/src/components/icons/Delete.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M14.3,2.8h-2.4c-0.3,0-0.6-0.3-0.7-0.6l-0.2-1C10.8,0.5,10.3,0,9.6,0H6.4C5.7,0,5.2,0.5,5,1.2l-0.2,1 C4.7,2.6,4.4,2.8,4.1,2.8H1.7c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5h0.5c0.1,1.2,0.4,7.7,0.6,9.9C3,15.1,3.8,15.9,5,16 c1,0,2,0,3,0c0.9,0,1.9,0,2.9,0c1.3,0,2.1-0.9,2.3-2.2c0.2-2.1,0.6-8.7,0.6-9.9h0.5c0.3,0,0.5-0.2,0.5-0.5S14.6,2.8,14.3,2.8z M5.8,2.4l0.2-1c0.1-0.2,0.2-0.4,0.4-0.4h3.2c0.2,0,0.4,0.2,0.4,0.3l0.2,1c0,0.2,0.1,0.3,0.2,0.4H5.7C5.7,2.7,5.8,2.5,5.8,2.4z M12.1,13.6c-0.1,0.8-0.5,1.3-1.2,1.3c-2,0-4,0-5.8,0c-0.9,0-1.1-0.7-1.2-1.3c-0.2-2.1-0.6-8.5-0.6-9.8h9.5 C12.7,5.2,12.3,11.6,12.1,13.6z"/>
+</svg>