Update archive icon. Add margins. Update space menu. (#700)

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

models/task/src/index.ts

@@ -251,7 +251,7 @@ export function createModel (builder: Builder): void {
     core.space.Model,
     {
       label: 'Status' as IntlString,
-      icon: task.icon.Status,
+      icon: task.icon.ManageStatuses,
       component: task.component.StatusTableView
     },
     task.viewlet.StatusTable
@@ -382,7 +382,7 @@ export function createModel (builder: Builder): void {
     core.space.Model,
     {
       label: 'Edit Statuses' as IntlString,
-      icon: view.icon.MoreH,
+      icon: view.icon.Statuses,
       action: task.actionImpl.EditStatuses
     },
     task.action.EditStatuses

packages/ui/src/components/Menu.svelte

@@ -37,9 +37,7 @@
       action.action(ctx) 
     }}>
       {#if action.icon}
-        <div class="scale-75">
+        <Icon icon={action.icon} size={'small'} />
-          <Icon icon={action.icon} size={'medium'} />
-        </div>
       {/if}
       <div class="ml-3"><Label label={action.label} /></div>
     </div>

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

@@ -20,6 +20,6 @@
 </script>
 
 <svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-  <path d="M15.4,14.5h-6c-0.3,0-0.6,0.3-0.6,0.6s0.3,0.6,0.6,0.6h6c0.3,0,0.6-0.3,0.6-0.6S15.7,14.5,15.4,14.5z"/>
+  <path d="M14,13.1H9.2c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5H14c0.3,0,0.5-0.2,0.5-0.5S14.3,13.1,14,13.1z"/>
-  <path d="M12.2,7.1C12.2,7.1,12.2,7.1,12.2,7.1c1.5-1.9,1.6-2,1.6-2c0.3-0.5,0.5-1.2,0.3-1.8c-0.1-0.6-0.5-1.2-1-1.5 c0,0-1.4-1.1-1.4-1.1c-1-0.8-2.6-0.7-3.4,0.3c0,0,0,0,0,0l-7.7,9.7c-0.4,0.5-0.5,1.1-0.4,1.7l0.7,2.8c0.1,0.3,0.3,0.5,0.6,0.5 c0,0,0,0,0,0l3,0c0.6,0,1.2-0.3,1.5-0.8C9.1,10.9,11,8.5,12.2,7.1C12.1,7.1,12.2,7.1,12.2,7.1z M9.1,1.9c0.4-0.5,1.2-0.6,1.7-0.2 c0,0,1.4,1.1,1.5,1.1c0.3,0.2,0.5,0.4,0.5,0.7c0.1,0.3,0,0.6-0.1,0.8c0,0.1-0.5,0.6-1.2,1.5L8.1,3.2L9.1,1.9z M4.9,14.2 c-0.1,0.2-0.4,0.3-0.6,0.3l-2.5,0l-0.6-2.4c-0.1-0.2,0-0.4,0.1-0.6l5.9-7.4l3.5,2.7C9.1,9,6.5,12.2,4.9,14.2z"/>
+  <path d="M11.4,7.1C11.4,7.1,11.4,7.1,11.4,7.1c1.2-1.6,1.3-1.6,1.3-1.6C12.9,5,13,4.5,12.9,4c-0.1-0.5-0.4-0.9-0.8-1.2 c0,0-1.1-0.9-1.1-0.9c-0.8-0.7-2.1-0.6-2.8,0.3c0,0,0,0,0,0l-6.3,7.9c-0.3,0.4-0.4,0.9-0.3,1.4l0.5,2.3c0.1,0.2,0.3,0.4,0.5,0.4 c0,0,0,0,0,0l2.4,0c0.5,0,1-0.2,1.3-0.6C8.9,10.2,10.5,8.2,11.4,7.1C11.4,7.1,11.4,7.1,11.4,7.1z M8.9,2.8c0.3-0.4,1-0.5,1.4-0.1 c0,0,1.2,0.9,1.2,0.9c0.2,0.1,0.4,0.3,0.4,0.6c0.1,0.2,0,0.5-0.1,0.7c0,0-0.4,0.5-0.9,1.2L8.1,3.9L8.9,2.8z M5.5,12.9 C5.4,13,5.2,13.1,5,13.1l-2,0l-0.5-1.9c0-0.2,0-0.4,0.1-0.5l4.8-6l2.8,2.2C8.9,8.6,6.8,11.2,5.5,12.9z"/>
 </svg>

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

@@ -0,0 +1,10 @@
+<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="M8,6.6C7.3,6.6,6.7,7.2,6.7,8S7.3,9.4,8,9.4S9.4,8.8,9.4,8S8.8,6.6,8,6.6z"/>
+  <path d="M8,4.6c0.8,0,1.4-0.6,1.4-1.4S8.8,1.8,8,1.8S6.7,2.4,6.7,3.2S7.3,4.6,8,4.6z"/>
+  <path d="M8,11.4c-0.8,0-1.4,0.6-1.4,1.4c0,0.8,0.6,1.4,1.4,1.4s1.4-0.6,1.4-1.4C9.4,12,8.8,11.4,8,11.4z"/>
+</svg>

packages/ui/src/index.ts

@@ -69,6 +69,7 @@ export { default as IconSearch } from './components/icons/Search.svelte'
 export { default as IconToDo } from './components/icons/ToDo.svelte'
 export { default as IconFolder } from './components/icons/Folder.svelte'
 export { default as IconMoreH } from './components/icons/MoreH.svelte'
+export { default as IconMoreV } from './components/icons/MoreV.svelte'
 export { default as IconFile } from './components/icons/File.svelte'
 export { default as IconAttachment } from './components/icons/Attachment.svelte'
 export { default as IconThread } from './components/icons/Thread.svelte'

plugins/setting-resources/src/components/statuses/Templates.svelte

@@ -125,4 +125,5 @@
       cursor: auto;
     }
   }
+  .item + .item { margin-top: .75rem; }
 </style>

plugins/task-assets/assets/icons.svg

@@ -6,13 +6,9 @@
     </g>
   </symbol>
   <symbol id="kanban" viewBox="0 0 16 16">
-    <path d="M14,0h-2.8H9.6H6.4H4.8H2C0.9,0,0,0.9,0,2v12c0,1.1,0.9,2,2,2h2.8h1.6h3.2h1.6H14c1.1,0,2-0.9,2-2V2C16,0.9,15.1,0,14,0z M2,14.8c-0.4,0-0.8-0.4-0.8-0.8V2c0-0.4,0.4-0.8,0.8-0.8h2.8v13.6H2z M6.4,14.8V1.2h3.2v13.6H6.4z M14.8,14c0,0.4-0.4,0.8-0.8,0.8 h-2.8V1.2H14c0.4,0,0.8,0.4,0.8,0.8V14z"/>
+    <path d="M13,1h-2.2H9.4H6.6H5.2H3C1.9,1,1,1.9,1,3v10c0,1.1,0.9,2,2,2h2.2h1.4h2.8h1.4H13c1.1,0,2-0.9,2-2V3C15,1.9,14.1,1,13,1z M3,13.8c-0.4,0-0.8-0.4-0.8-0.8V3c0-0.4,0.4-0.8,0.8-0.8h2.2v11.6H3z M6.6,13.8V2.2h2.8v11.6H6.6z M13.8,13c0,0.4-0.4,0.8-0.8,0.8 h-2.2V2.2H13c0.4,0,0.8,0.4,0.8,0.8V13z"/>
   </symbol>
-  <symbol id='status' viewBox="0 0 16 16">
+  <symbol id='todo-check' viewBox="0 0 16 16">
-    <path d="M14.4,8c0,3.5-2.9,6.4-6.4,6.4c-3.5,0-6.4-2.9-6.4-6.4c0-3.5,2.9-6.4,6.4-6.4c0.1-0.4,0.3-0.8,0.5-1.2c-0.2,0-0.3,0-0.5,0 C3.8,0.4,0.4,3.8,0.4,8c0,4.2,3.4,7.6,7.6,7.6s7.6-3.4,7.6-7.6c0-0.2,0-0.3,0-0.5C15.2,7.7,14.8,7.9,14.4,8z"/>
-    <circle cx="13" cy="3" r="3"/>
-  </symbol>
-   <symbol id='todo-check' viewBox="0 0 16 16">
     <circle cx="8" cy="8" r="6" stroke="white" fill="none"/>
     <path d="M5.33268 8L7.33268 10L10.666 6" stroke="white"/>
   </symbol>

plugins/task-assets/src/index.ts

@@ -20,7 +20,6 @@ const icons = require('../assets/icons.svg')
 loadMetadata(task.icon, {
   Task: `${icons}#task`,
   Kanban: `${icons}#kanban`,
-  Status: `${icons}#status`,
   TodoCheck: `${icons}#todo-check`,
   TodoUnCheck: `${icons}#todo-uncheck`,
   ManageStatuses: `${icons}#manage-statuses`

plugins/task-resources/src/components/StatusTableView.svelte

@@ -89,121 +89,109 @@
   $: updateQuery()
 </script>
 
-<div class="container">
+<div class="flex-between mb-4 header">
-  <div class="flex-between mb-4 mt-4 header">
+  <div class="flex-row-center buttons">
-    <div class="flex-row-center">
+    <div
-      <div
+      class="button flex-center"
-        class="button flex-center"
+      class:active={!doneStatusesView}
-        class:active={!doneStatusesView}
+      on:click={() => {
-        on:click={() => {
+        doneStatusesView = false
-          doneStatusesView = false
+        state = undefined
-          state = undefined
+        selectedDoneStates.clear()
-          selectedDoneStates.clear()
+        updateQuery()
-          updateQuery()
+      }}
-        }}
+    >
-      >
+      <Label label={'All statuses'} />
-        <Label label={'All statuses'} />
-      </div>
-      <div
-        class="button flex-center ml-4"
-        class:active={doneStatusesView}
-        on:click={() => {
-          doneStatusesView = true
-          state = undefined
-          selectedDoneStates.clear()
-          updateQuery()
-        }}
-      >
-        <Label label={'Done statuses'} />
-      </div>
     </div>
-    <div class="flex-row-center caption-color states">
+    <div
-      {#if doneStatusesView}
+      class="button flex-center ml-3"
-        {#each doneStates as state}
+      class:active={doneStatusesView}
-          <div
+      on:click={() => {
-            class="doneState flex-row-center"
+        doneStatusesView = true
-            class:won={state._class === task.class.WonState}
+        state = undefined
-            class:lost={state._class === task.class.LostState}
+        selectedDoneStates.clear()
-            class:disable={!selectedDoneStates.has(state._id)}
+        updateQuery()
-            on:click={() => {
+      }}
-              doneStateClick(state._id)
+    >
-            }}
+      <Label label={'Done statuses'} />
-          >
-            {#if state._class === task.class.WonState}
-              <Won size="medium" />
-            {:else}
-              <Lost size="medium" />
-            {/if}
-            <span class="ml-2">
-              {state.title}
-            </span>
-          </div>
-        {/each}
-      {:else}
-        <StatesBar bind:state {space} on:change={updateQuery} />
-      {/if}
     </div>
   </div>
-  <div class="container">
+  <div class="flex-row-center caption-color states">
-    <ScrollBox vertical stretch noShift>
+    {#if doneStatusesView}
-      <Table {_class} {query} config={resConfig} {options} enableChecking />
+      {#each doneStates as state}
-    </ScrollBox>
+        <div
+          class="doneState flex-row-center"
+          class:won={state._class === task.class.WonState}
+          class:lost={state._class === task.class.LostState}
+          class:disable={!selectedDoneStates.has(state._id)}
+          on:click={() => {
+            doneStateClick(state._id)
+          }}
+        >
+          {#if state._class === task.class.WonState}
+            <Won size="medium" />
+          {:else}
+            <Lost size="medium" />
+          {/if}
+          <span class="ml-2">
+            {state.title}
+          </span>
+        </div>
+      {/each}
+    {:else}
+      <StatesBar bind:state {space} on:change={updateQuery} />
+    {/if}
   </div>
 </div>
+<div class="statustableview-container">
+  <ScrollBox vertical stretch noShift>
+    <Table {_class} {query} config={resConfig} {options} enableChecking />
+  </ScrollBox>
+</div>
 
 <style lang="scss">
-  .container {
+  .statustableview-container {
     flex-grow: 1;
-    position: relative;
+    margin-bottom: .75rem;
-    padding-bottom: 2.5rem;
+    min-height: 0;
     height: 100%;
   }
 
   .header {
     margin-left: 2.5rem;
     margin-right: 1.75rem;
-
+    .buttons { padding: 0.125rem 0; }
-    .states {
+    .states { max-width: 75%; }
-      max-width: 75%;
-    }
   }
 
   .button {
-    cursor: pointer;
     height: 2.5rem;
-    padding: 0.5rem 0.75rem;
+    padding: .5rem .75rem;
-    border-radius: 0.5rem;
+    border: 1px solid transparent;
+    border-radius: .5rem;
+    cursor: pointer;
+
     &:hover {
       background-color: var(--theme-button-bg-enabled);
-      border: 1px solid var(--theme-button-border-enabled);
+      border-color: var(--theme-button-border-enabled);
     }
     &.active {
       background-color: var(--theme-button-bg-enabled);
       color: var(--theme-caption-color);
-      border: 1px solid var(--theme-button-border-enabled);
+      border-color: var(--theme-button-border-enabled);
     }
   }
+
   .doneState {
-    cursor: pointer;
+    padding: .5rem .75rem;
     height: 2.5rem;
-    border-radius: 0.5rem;
-    padding: 0.5rem 0.75rem;
     border: 1px solid var(--theme-button-border-enabled);
+    border-radius: .5rem;
+    cursor: pointer;
 
-    &.won {
+    &.won { background-color: #60b96e; }
-      background-color: #60b96e;
+    &.lost { background-color: #f06c63; }
-    }
+    &.disable { background-color: var(--theme-button-bg-enabled); }
-
-    &.lost {
-      background-color: #f06c63;
-    }
-
-    &.disable {
-      background-color: var(--theme-button-bg-enabled);
-    }
-  }
-
-  .doneState + .doneState {
-    margin-left: 0.5rem;
   }
+  .doneState + .doneState { margin-left: .75rem; }
 </style>

plugins/task-resources/src/components/icons/Lost.svelte

@@ -13,12 +13,12 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 -->
+
 <script lang="ts">
   export let size: 'small' | 'medium' | 'large'
   const fill: string = 'currentColor'
 </script>
 
-<svg class="svg-{size}" {fill} fill-opacity="0.0" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-  <circle cx="8" cy="8" r="6" stroke="white" />
+  <path d="M8,1.5C4.4,1.5,1.5,4.4,1.5,8s2.9,6.5,6.5,6.5s6.5-2.9,6.5-6.5S11.6,1.5,8,1.5z M2.5,8c0-1.3,0.5-2.6,1.3-3.5l7.7,7.7 c-1,0.8-2.2,1.3-3.5,1.3C5,13.5,2.5,11,2.5,8z M12.2,11.5L4.5,3.8C5.4,3,6.7,2.5,8,2.5c3,0,5.5,2.5,5.5,5.5 C13.5,9.3,13,10.6,12.2,11.5z"/>
-  <path d="M12 12L4 4" stroke="white" />
 </svg>

plugins/task-resources/src/components/icons/Won.svelte

@@ -13,15 +13,12 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 -->
+
 <script lang="ts">
   export let size: 'small' | 'medium' | 'large'
   const fill: string = 'currentColor'
 </script>
 
-<svg class="svg-{size}" {fill} fill-opacity="0.0" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-  <path
+  <path d="M4,13.2c-0.3,0-0.5-0.2-0.5-0.5V3.8c0-0.3,0-0.6,0.2-0.8s0.5-0.2,0.8-0.2h6.3c0.6,0,1.1,0,1.3,0.5c0.2,0.5-0.1,0.8-0.6,1.2 L9.4,6.7l2.1,2.1c0.5,0.5,0.8,0.8,0.6,1.2c-0.2,0.5-0.7,0.5-1.3,0.5H4.5v2.2C4.5,12.9,4.3,13.2,4,13.2z M4.5,9.5h6.3L8.6,7.3 C8.4,7.1,8.2,7,8.2,6.7c0-0.3,0.2-0.5,0.3-0.6l2.2-2.2H4.5V9.5z"/>
-    d="M4 10V3.83337C4 3.59767 4 3.47982 4.07322 3.4066C4.14645 3.33337 4.2643 3.33337 4.5 3.33337H10.7929C11.3066 3.33337 11.5635 3.33337 11.6274 3.4877C11.6913 3.64203 11.5097 3.82366 11.1464 4.18693L8.94951 6.38386C8.81618 6.5172 8.74951 6.58386 8.74951 6.66671C8.74951 6.74955 8.81618 6.81622 8.94951 6.94955L11.1464 9.14649C11.5097 9.50975 11.6913 9.69138 11.6274 9.84571C11.5635 10 11.3066 10 10.7929 10H4ZM4 10V12.6667"
-    stroke="white"
-    stroke-linecap="round"
-  />
 </svg>

plugins/task-resources/src/components/state/EditStatuses.svelte

@@ -78,7 +78,7 @@
   <div class="flex-between header">
     <div class="flex-grow flex-col">
       <div class="flex-row-center">
-        <div class="icon"><Icon icon={task.icon.Status} size={'small'} /></div>
+        <div class="icon"><Icon icon={task.icon.ManageStatuses} size={'small'} /></div>
         <span class="overflow-label title">Manage application statuses within <Label label={spaceClassInstance?.label}/></span>
       </div>
       <div class="overflow-label subtitle">{spaceInstance?.name}</div>

plugins/task/src/index.ts

@@ -212,7 +212,6 @@ const task = plugin(taskId, {
   icon: {
     Task: '' as Asset,
     Kanban: '' as Asset,
-    Status: '' as Asset,
     TodoCheck: '' as Asset,
     TodoUnCheck: '' as Asset,
     ManageStatuses: '' as Asset

plugins/view-assets/assets/icons.svg

@@ -1,9 +1,9 @@
 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
   <symbol id="table" viewBox="0 0 16 16">
     <g>
-      <rect width="16" height="1.7" />
+      <rect x="1" y="1" width="14" height="1.5"/>
-      <rect y="7.2" width="16" height="1.7" />
+      <rect x="1" y="7.3" width="14" height="1.5"/>
-      <rect y="14.3" width="16" height="1.7" />
+      <rect x="1" y="13.5" width="14" height="1.5"/>
     </g>
   </symbol>
   <symbol id="card" viewBox="0 0 16 16">
@@ -36,7 +36,11 @@
   </symbol>
 
   <symbol id="archive" viewBox="0 0 16 16" >
-    <path d="M3.33333 5.33366V9.33366C3.33333 11.2193 3.33333 12.1621 3.91912 12.7479C4.50491 13.3337 5.44772 13.3337 7.33333 13.3337H8.66667C10.5523 13.3337 11.4951 13.3337 12.0809 12.7479C12.6667 12.1621 12.6667 11.2193 12.6667 9.33366V5.33366M3.33333 5.33366H12.6667M3.33333 5.33366H2.24242C2.20301 5.33366 2.1833 5.33366 2.16683 5.33089C2.08277 5.31675 2.01691 5.25089 2.00277 5.16682C2 5.15036 2 5.13065 2 5.09123V5.09123C2 4.69708 2 4.50001 2.02769 4.33533C2.16905 3.49469 2.8277 2.83604 3.66834 2.69468C3.83301 2.66699 4.03009 2.66699 4.42424 2.66699H11.5758C11.9699 2.66699 12.167 2.66699 12.3317 2.69468C13.1723 2.83604 13.8309 3.49469 13.9723 4.33533C14 4.50001 14 4.69708 14 5.09123V5.09123C14 5.13065 14 5.15036 13.9972 5.16682C13.9831 5.25089 13.9172 5.31675 13.8332 5.33089C13.8167 5.33366 13.797 5.33366 13.7576 5.33366H12.6667" />
+    <path d="M14.5,4.3c-0.2-1.1-1-1.9-2.1-2.1c-0.2,0-0.4,0-0.8,0H4.4c-0.4,0-0.6,0-0.8,0c-1.1,0.2-1.9,1-2.1,2.1 c0,0.2,0,0.4,0,0.8l0,0.2c0,0.3,0.3,0.5,0.6,0.6l0.7,0v3.5c0,2,0,3,0.7,3.8c0.7,0.7,1.8,0.7,3.8,0.7h1.3c2,0,3,0,3.8-0.7 s0.7-1.8,0.7-3.8V5.8h0.6l0.2,0c0.3,0,0.5-0.3,0.6-0.6l0-0.2C14.5,4.7,14.5,4.5,14.5,4.3z M12.2,9.3c0,1.7,0,2.6-0.4,3.1 s-1.3,0.4-3.1,0.4H7.3c-1.7,0-2.6,0-3.1-0.4C3.8,12,3.8,11.1,3.8,9.3V5.8h8.3V9.3z M3.3,4.8l-0.8,0c0-0.2,0-0.3,0-0.4 c0.1-0.6,0.6-1.1,1.2-1.2c0.1,0,0.3,0,0.7,0h7.2c0.4,0,0.5,0,0.7,0c0.6,0.1,1.1,0.6,1.2,1.2c0,0.1,0,0.2,0,0.4H3.3z"/>
-    <path d="M6.66663 10.667H9.33329" stroke-linecap="round"/>
+    <path d="M6.7,11.2h2.7c0.3,0,0.5-0.2,0.5-0.5s-0.2-0.5-0.5-0.5H6.7c-0.3,0-0.5,0.2-0.5,0.5S6.4,11.2,6.7,11.2z"/>
+  </symbol>
+  <symbol id="statuses" viewBox="0 0 16 16" >
+    <path d="M13.3,8.3c-0.1,2.8-2.5,5.1-5.4,5.1C5,13.4,2.6,11,2.6,8c0-2.9,2.3-5.2,5.1-5.4c0.1-0.4,0.2-0.7,0.4-1c0,0-0.1,0-0.1,0 C4.4,1.7,1.6,4.5,1.6,8c0,3.5,2.9,6.4,6.4,6.4s6.4-2.9,6.4-6.4c0,0,0-0.1,0-0.1C14,8.1,13.7,8.2,13.3,8.3z"/>
+    <ellipse cx="12.1" cy="3.9" rx="2.5" ry="2.5"/>
   </symbol>
 </svg>

plugins/view-assets/src/index.ts

@@ -22,7 +22,8 @@ loadMetadata(view.icon, {
   Delete: `${icons}#delete`,
   Move: `${icons}#move`,
   MoreH: `${icons}#more-h`,
-  Archive: `${icons}#archive`
+  Archive: `${icons}#archive`,
+  Statuses: `${icons}#statuses`
 })
 
 addStringsLoader(viewId, async (lang: string) => await import(`../lang/${lang}.json`))

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

@@ -29,17 +29,17 @@
   $: query = search === '' ? { space } : { $search: search, space }
 </script>
 
-<div class="container">
+<div class="tableview-container">
   <ScrollBox vertical stretch noShift>
     <Table {_class} {config} {options} {query} {baseMenuClass} enableChecking />
   </ScrollBox>
 </div>
 
 <style lang="scss">
-  .container {
+  .tableview-container {
     flex-grow: 1;
-    position: relative;
+    margin-bottom: .75rem;
-    padding-bottom: 2.5rem;
+    min-height: 0;
     height: 100%;
   }
 </style>

plugins/view/src/index.ts

@@ -145,7 +145,8 @@ const view = plugin(viewId, {
     Delete: '' as Asset,
     MoreH: '' as Asset,
     Move: '' as Asset,
-    Archive: '' as Asset
+    Archive: '' as Asset,
+    Statuses: '' as Asset
   }
 })
 export default view

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

@@ -66,13 +66,11 @@ function onSearch(ev: Event) {
       {#if viewlets.length > 1}
         <div class="flex">
           {#each viewlets as viewlet, i}
-            <div class="flex-center btn" class:selected={selected === i} on:click={()=>{ selected = i }}>
+            <Tooltip label={viewlet.$lookup?.descriptor?.label} direction={'top'}>
-              <div class="icon">
+              <div class="flex-center btn" class:selected={selected === i} on:click={()=>{ selected = i }}>
-                <Tooltip label={viewlet.$lookup?.descriptor?.label} direction={'top'}>
+                <Icon icon={viewlet.$lookup?.descriptor?.icon} size={'small'}/>
-                  <Icon icon={viewlet.$lookup?.descriptor?.icon} size={'small'}/>
-                </Tooltip>
               </div>
-            </div>
+            </Tooltip>
           {/each}
         </div>
       {/if}      
@@ -103,18 +101,20 @@ function onSearch(ev: Event) {
       border-radius: .5rem;
       cursor: pointer;
 
-      .icon { color: var(--theme-content-trans-color); }
+      color: var(--theme-content-trans-color);
-      &:hover .icon { color: var(--theme-caption-color); }
+      &:hover { color: var(--theme-caption-color); }
       &.selected {
+        color: var(--theme-content-accent-color);
         background-color: var(--theme-button-bg-enabled);
         cursor: default;
-        &:hover .icon { color: var(--theme-content-accent-color); }
+        &:hover { color: var(--theme-caption-color); }
       }
     }
   }
   .container {
     display: flex;
     flex-direction: column;
-    height: calc(100% - 9.5rem);
+    min-height: 0;
+    height: 100%;
   }
 </style>

plugins/workbench-resources/src/components/navigator/TreeElement.svelte

@@ -20,7 +20,7 @@
   import type { Asset, IntlString } from '@anticrm/platform'
   import type { Action } from '@anticrm/ui'
   import type { Ref, Space } from '@anticrm/core'
-  import { Icon, Label, ActionIcon, Menu, showPopup, IconMoreH } from '@anticrm/ui'
+  import { Icon, Label, ActionIcon, Menu, showPopup, IconMoreV } from '@anticrm/ui'
   import { createEventDispatcher } from 'svelte'
 
   export let _id: Ref<Space> | undefined = undefined
@@ -64,7 +64,7 @@
     </div>
   {:else if actions.length > 1}
     <div class="tool" on:click|stopPropagation={onMenuClick}>
-      <IconMoreH size={'small'} />
+      <IconMoreV size={'small'} />
     </div>
   {/if}
   {#if notifications > 0 && collapsed}