TableView popup (#213)

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

packages/theme/styles/_colors.scss

@@ -105,6 +105,11 @@
   --theme-table-bg-color: rgba(255, 255, 255, .02);
   --theme-table-bg-hover: rgba(255, 255, 255, .04);
 
+  --theme-popup-bg: rgba(222, 222, 240, .2);
+  --theme-popup-bg-hover: rgba(37, 37, 42, .4);
+  --theme-popup-border: transparent;
+  --theme-popup-shadow: 0px 10px 20px rgba(0, 0, 0, .2);
+
   --theme-caption-color: #fff;
   --theme-content-accent-color: rgba(255, 255, 255, 0.8);
   --theme-content-color: rgba(255, 255, 255, 0.6);
@@ -169,6 +174,11 @@
   --theme-table-bg-color: rgba(255, 255, 255, .02);
   --theme-table-bg-hover: rgba(255, 255, 255, .04);
 
+  --theme-popup-bg: rgba(222, 222, 240, .2);
+  --theme-popup-bg-hover: rgba(37, 37, 42, .4);
+  --theme-popup-border: transparent;
+  --theme-popup-shadow: 0px 10px 20px rgba(0, 0, 0, .2);
+
   --theme-caption-color: #fff;
   --theme-content-accent-color: rgba(255, 255, 255, 0.8);
   --theme-content-color: rgba(255, 255, 255, 0.6);
@@ -232,6 +242,11 @@
   --theme-table-bg-color: rgba(0, 0, 0, .02);
   --theme-table-bg-hover: rgba(0, 0, 0, .04);
 
+  --theme-popup-bg: #fff;
+  --theme-popup-bg-hover: #F2F2F2;
+  --theme-popup-border: 1px solid rgba(0, 0, 0, .06);
+  --theme-popup-shadow: 0px 10px 20px rgba(0, 0, 0, .2);
+
   --theme-caption-color: #272121;
   --theme-content-accent-color: rgba(39, 33, 33, 0.8);
   --theme-content-color: rgba(39, 33, 33, 0.6);

plugins/view-resources/src/components/Menu.svelte

@@ -0,0 +1,81 @@
+<!--
+// 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 } from '@anticrm/platform'
+  import type { AnySvelteComponent } from '@anticrm/ui'
+  import { createEventDispatcher } from 'svelte'
+  import { Icon, Label, IconMoreH, IconFile } from '@anticrm/ui'
+
+  export let title: IntlString
+  export let caption: IntlString
+
+  interface PopupItem {
+    icon: Asset | AnySvelteComponent
+    label: IntlString
+    action?: () => Promise<void>
+  }
+
+  const dispatch = createEventDispatcher()
+  const actions: Array<PopupItem> = [{ icon: IconFile, label: 'Application', action: async () => {} },
+                                     { icon: IconMoreH, label: 'Options', action: async () => {} }]
+</script>
+
+<div class="flex-col popup">
+  {#each actions as action}
+    <div class="flex-row-center menu-item" on:click={() => { dispatch('close') }}>
+      <div class="icon">
+        {#if typeof (action.icon) === 'string'}
+          <Icon icon={action.icon} size={'large'} />
+        {:else}
+          <svelte:component this={action.icon} size={'large'} />
+        {/if}
+      </div>
+      <div class="label"><Label label={action.label} /></div>
+    </div>
+  {/each}
+</div>
+
+<style lang="scss">
+  .popup {
+    padding: .5rem;
+    height: 100%;
+    background-color: var(--theme-popup-bg);
+    border: var(--theme-popup-border);
+    border-radius: 1.25rem;
+    box-shadow: var(--theme-popup-shadow);
+    backdrop-filter: blur(30px);
+  }
+
+  .menu-item {
+    display: flex;
+    align-items: center;
+    padding: .375rem 1rem .375rem .5rem;
+    border-radius: .5rem;
+    cursor: pointer;
+
+    .icon {
+      margin-right: .75rem;
+      transform-origin: center center;
+      transform: scale(.75);
+      opacity: .3;
+    }
+    .label {
+      flex-grow: 1;
+      color: var(--theme-content-accent-color);
+    }
+    &:hover { background-color: var(--theme-button-bg-focused); }
+  }
+</style>

plugins/view-resources/src/components/TableView.svelte

@@ -21,6 +21,7 @@
   import { getClient } from '@anticrm/presentation'
   import { Label, showPopup, Loading, ScrollBox, CheckBox } from '@anticrm/ui'
   import MoreV from './icons/MoreV.svelte'
+  import Menu from './Menu.svelte'
 
   import { createQuery } from '@anticrm/presentation'
 
@@ -49,6 +50,22 @@
 
   const client = getClient()
   let checking: boolean = false
+
+  const findNode = (el: HTMLElement, name: string): any => {
+    while (el.parentNode !== null) {
+      if (el.classList.contains(name)) return el
+      el = el.parentNode as HTMLElement
+    }
+    return false
+  }
+  const showMenu = (ev: MouseEvent): void => {
+    const elRow: HTMLElement = findNode(ev.target as HTMLElement, 'tr-body')
+    const elBtn: HTMLElement = findNode(ev.target as HTMLElement, 'menuRow')
+    elRow.classList.add('fixed')
+    showPopup(Menu, {}, elBtn, (() => {
+      elRow.classList.remove('fixed')
+    }))
+  }
 </script>
 
 {#await buildModel(client, _class, config, options)}
@@ -75,7 +92,7 @@
       </thead>
       {#if objects}
         <tbody>
-          {#each objects as object (object._id)}
+          {#each objects as object, row (object._id)}
             <tr class="tr-body" class:checking>
               {#each model as attribute, cell}
                 <td>
@@ -83,7 +100,7 @@
                     <div class="firstCell">
                       <div class="control">
                         <CheckBox bind:checked={checking} />
-                        <div class="moveRow"><MoreV /></div>
+                        <div class="menuRow" on:click={(ev) => showMenu(ev)}><MoreV size={'small'} /></div>
                       </div>
                       <svelte:component this={attribute.presenter} value={getValue(object, attribute.key)}/>
                     </div>
@@ -117,7 +134,7 @@
       display: flex;
       align-items: center;
       width: 0;
-      .moveRow {
+      .menuRow {
         visibility: hidden;
         width: 1rem;
         margin: 0 .5rem;
@@ -171,6 +188,19 @@
         }
       }
     }
-    &:hover td:first-child .control .moveRow { visibility: visible; }
+    &:hover td:first-child .control .menuRow { visibility: visible; }
+  }
+
+  :global(.fixed) {
+    background-color: var(--theme-table-bg-hover);
+    & td:first-child {
+      padding-left: 1rem;
+      padding-right: 1.5rem;
+      & .control {
+        visibility: visible;
+        width: auto;
+        .menuRow { visibility: visible; }
+      }
+    }
   }
 </style>