Add EditCandidates, EditVacancy and SpacePanel (#293)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
2026-09-23 10:05:01 +02:00 · 2021-11-03 14:01:21 +01:00
parent 4aa9ab877b
commit 18ca47a4e0
44 changed files with 1401 additions and 1117 deletions
@@ -51,32 +51,22 @@
      align-items: center;
      width: 3.25rem;
      height: 3.25rem;
-      opacity: .3;
+      color: var(--theme-content-trans-color);

-      .normal-font &.noty {
-        clip-path: url(#notify-normal);
-      }
-      .small-font &.noty {
-        clip-path: url(#notify-small);
-      }
+      .normal-font &.noty { clip-path: url(#notify-normal); }
+      .small-font &.noty { clip-path: url(#notify-small); }
    }

-    &:hover .icon-container {
-      opacity: 1;
-    }
+    &:hover .icon-container { color: var(--theme-caption-color); }
    &:focus {
      border: 1px solid var(--primary-button-focused-border);
      box-shadow: 0 0 0 3px var(--primary-button-outline);
-      .icon-container {
-        opacity: 1;
-      }
+      .icon-container { color: var(--theme-caption-color); }
    }

    &.selected {
      background-color: var(--theme-menu-selection);
-      .icon-container {
-        opacity: 1;
-      }
+      .icon-container { color: var(--theme-caption-color); }
    }
  }

@@ -14,8 +14,7 @@
 -->

 <script lang="ts">
-  import Close from './icons/Close.svelte'
-  import Add from './icons/Add.svelte'
+  import { IconAdd, IconClose } from '@anticrm/ui'

  export let title: string = 'Unknown'
 </script>
@@ -24,8 +23,8 @@
  <div class="title"><span>{title}</span></div>
  <div class="separator"/>
  <div class="buttons">
-    <div class="button"><Close/></div>
-    <div class="button"><Add/></div>
+    <div class="button"><IconClose size={'small'} /></div>
+    <div class="button"><IconAdd size={'small'} /></div>
  </div>
 </div>

@@ -32,7 +32,7 @@
    position: relative;
    display: flex;
    flex-direction: column;
-    padding: 1rem 1.5rem 1.25rem;
+    padding: 32px 1.5rem 1.25rem;
    border-radius: .75rem;

    .label {
@@ -63,4 +63,4 @@
      z-index: -1;
    }
  }
-</style>
+</style>
@@ -15,10 +15,9 @@

 <script lang="ts">
  import type { Ref, Space } from '@anticrm/core'
-  import { Icon, ActionIcon, Button, IconMoreH } from '@anticrm/ui'
+  import { Icon, ActionIcon, Button, IconMoreH, IconAdd } from '@anticrm/ui'
  import type { AnyComponent } from '@anticrm/ui'
  import Header from './Header.svelte'
-  import Add from './icons/Add.svelte'
  import Star from './icons/Star.svelte'

  import { getClient, createQuery } from '@anticrm/presentation'
@@ -48,7 +47,7 @@
      <Button label="Create" primary={true} size={'small'} on:click={(ev) => showCreateDialog(ev)}/>
    {/if}
    <ActionIcon label={'Favorite'} icon={Star} size={'small'}/>
-    <ActionIcon label={'Create'} icon={Add} size={'small'}/>
+    <ActionIcon label={'Create'} icon={IconAdd} size={'small'}/>
    <ActionIcon label={'More...'} icon={IconMoreH} size={'small'}/>
  {/if}
 </div>
@@ -1,8 +0,0 @@
-<script lang="ts">
-  export let size: 'small' | 'medium' | 'large'
-  const fill: string = 'var(--theme-caption-color)'
-</script>
-
-<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <path d="M20,11.2h-7.2V4c0-0.4-0.3-0.8-0.8-0.8S11.2,3.6,11.2,4v7.2H4c-0.4,0-0.8,0.3-0.8,0.8s0.3,0.8,0.8,0.8h7.2V20 c0,0.4,0.3,0.8,0.8,0.8s0.8-0.3,0.8-0.8v-7.2H20c0.4,0,0.8-0.3,0.8-0.8S20.4,11.2,20,11.2z"/>
-</svg>
@@ -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 16 16" xmlns="http://www.w3.org/2000/svg">
@@ -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 16 16" xmlns="http://www.w3.org/2000/svg">
@@ -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 16 16" xmlns="http://www.w3.org/2000/svg">
@@ -19,7 +19,7 @@
  import type { Asset, IntlString } from '@anticrm/platform'
  import type { Ref, Space, Doc } from '@anticrm/core'
  import type { SpacesNavModel } from '@anticrm/workbench'
-  import { Action, navigate, getCurrentLocation, location, IconAdd } from '@anticrm/ui'
+  import { Action, navigate, getCurrentLocation, location, IconAdd, IconMoreH, IconEdit } from '@anticrm/ui'

  import { getClient, createQuery } from '@anticrm/presentation'
  import { showPopup } from '@anticrm/ui'
@@ -50,12 +50,20 @@

  const editStatuses: Action = {
    label: 'Edit Statuses' as IntlString,
-    icon: IconAdd,
+    icon: IconMoreH,
    action: async (_id: Ref<Doc>): Promise<void> => {
      showPopup(EditStatuses, { _id, spaceClass: model.spaceClass }, 'right')
    }
  }

+  const editSpace: Action = {
+    label: 'Open' as IntlString,
+    icon: IconEdit,
+    action: async (_id: Ref<Doc>): Promise<void> => {
+      showPopup(model.editComponent!, { _id, spaceClass: model.spaceClass }, 'right')
+    }
+  }
+
  function selectSpace(id: Ref<Space>) {
    const loc = getCurrentLocation()
    loc.path[2] = id
@@ -71,7 +79,7 @@
 <div>
  <TreeNode label={model.label} actions={[addSpace]}>
    {#each spaces as space}
-      <TreeItem _id={space._id} title={space.name} icon={classIcon(client, space._class)} selected={selected === space._id} actions={[editStatuses]} on:click={() => { selectSpace(space._id) }}/>
+      <TreeItem _id={space._id} title={space.name} icon={classIcon(client, space._class)} selected={selected === space._id} actions={[editSpace, editStatuses]} on:click={() => { selectSpace(space._id) }}/>
    {/each}
  </TreeNode>
 </div>
@@ -77,7 +77,7 @@

    .icon {
      min-width: 1rem;
-      opacity: .3;
+      color: var(--theme-content-trans-color);
      margin: 0 1.125rem 0 .625rem;
      &.sub { margin: 0 .5rem 0 2.75rem }
    }