Add Create application icon, Panel header update (#504)

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

models/recruit/src/index.ts

@@ -214,8 +214,8 @@ export function createModel (builder: Builder): void {
   })
 
   builder.createDoc(view.class.Action, core.space.Model, {
-    label: 'Create Application' as IntlString,
-    icon: view.icon.Table,
+    label: 'Create application' as IntlString,
+    icon: recruit.icon.Create,
     action: recruit.actionImpl.CreateApplication
   }, recruit.action.CreateApplication)
 

packages/panel/src/components/Panel.svelte

@@ -16,11 +16,11 @@
 
 <script lang="ts">
   import activity from '@anticrm/activity'
-  import type { Doc } from '@anticrm/core';
-  import type { Asset } from '@anticrm/platform';
-  import type { AnyComponent, AnySvelteComponent } from '@anticrm/ui';
-  import { Icon,IconClose,IconExpand, Component } from '@anticrm/ui';
-  import { createEventDispatcher } from 'svelte';
+  import type { Doc } from '@anticrm/core'
+  import type { Asset } from '@anticrm/platform'
+  import type { AnyComponent, AnySvelteComponent } from '@anticrm/ui'
+  import { Icon,IconClose,IconExpand, Component } from '@anticrm/ui'
+  import { createEventDispatcher } from 'svelte'
 
   export let title: string
   export let icon: Asset | AnySvelteComponent
@@ -101,8 +101,8 @@
 
     .header {
       flex-shrink: 0;
-      padding: 0 2.5rem;
-      height: 4.5rem;
+      padding: 0 2.5rem 0 2rem;
+      height: 4rem;
       border-bottom: 1px solid var(--theme-dialog-divider);
 
       .icon { opacity: .6; }
@@ -160,7 +160,7 @@
   .tools {
     position: absolute;
     display: flex;
-    top: 1.75rem;
+    top: 1.5rem;
     right: 2rem;
 
     .tool {

plugins/activity-resources/src/components/Activity.svelte

@@ -99,7 +99,7 @@
   .header {
     flex-shrink: 0;
     padding: 0 2.5rem;
-    height: 4.5rem;
+    height: 4rem;
     border-bottom: 1px solid var(--theme-card-divider);
 
     .icon {

plugins/recruit-assets/assets/icons.svg

@@ -39,4 +39,9 @@
   <symbol id="calendar" viewBox="0 0 24 24">
     <path d="M19.5,5h-2.1V4.5c0-0.3-0.2-0.5-0.5-0.5s-0.5,0.2-0.5,0.5V5H8.1V4.5C8.1,4.2,7.9,4,7.6,4S7.1,4.2,7.1,4.5V5H5 C4.2,5,3.5,5.7,3.5,6.5V19c0,0.8,0.7,1.5,1.5,1.5h14.5c0.8,0,1.5-0.7,1.5-1.5V6.5C21,5.7,20.3,5,19.5,5z M5,6h2.1v0.5 c0,0.3,0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5V6h8.3v0.5c0,0.3,0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5V6h2.1C19.7,6,20,6.3,20,6.5v3.1H4.5V6.5 C4.5,6.3,4.7,6,5,6z M19.5,19.5H5c-0.3,0-0.5-0.2-0.5-0.5v-8.3H20V19C20,19.2,19.7,19.5,19.5,19.5z" />
   </symbol>
+  <symbol id="create" viewBox="0 0 16 16">
+    <path d="M14.7,4.5l-4.1-4.3C10.5,0.1,10.3,0,10.2,0H10c0,0,0,0,0,0s0,0,0,0H4.8c0,0,0,0,0,0c-2,0-3.6,1.6-3.7,3.6v8.7 c0,2,1.6,3.7,3.7,3.7h6.5c2-0.1,3.6-1.7,3.6-3.7V4.8C14.9,4.7,14.8,4.6,14.7,4.5z M13.1,4.4h-1c-0.8,0-1.5-0.7-1.5-1.5V1.8 L13.1,4.4z M11.3,14.9H4.8c-1.4,0-2.5-1.2-2.5-2.6V3.6c0-1.4,1.2-2.5,2.5-2.5c0,0,0,0,0,0h4.6v1.8c0,1.5,1.2,2.7,2.6,2.7h1.7v6.7 C13.7,13.7,12.6,14.8,11.3,14.9z"/>
+    <path d="M9.8,10.2H5.5c-0.3,0-0.6,0.3-0.6,0.6s0.3,0.6,0.6,0.6h4.4c0.3,0,0.6-0.3,0.6-0.6S10.1,10.2,9.8,10.2z"/>
+    <path d="M5.5,8.3h2.7c0.3,0,0.6-0.3,0.6-0.6S8.5,7.2,8.2,7.2H5.5c-0.3,0-0.6,0.3-0.6,0.6S5.1,8.3,5.5,8.3z"/>
+  </symbol>
 </svg>

plugins/recruit-assets/src/index.ts

@@ -23,6 +23,7 @@ loadMetadata(recruit.icon, {
   Location: `${icons}#location`,
   Company: `${icons}#company`,
   Calendar: `${icons}#calendar`,
+  Create: `${icons}#create`
 })
 
 addStringsLoader(recruitId, async (lang: string) => await import(`../lang/${lang}.json`))

plugins/recruit/src/index.ts

@@ -73,6 +73,7 @@ export default plugin(recruitId, {
     Vacancy: '' as Asset,
     Company: '' as Asset,
     Location: '' as Asset,
-    Calendar: '' as Asset
+    Calendar: '' as Asset,
+    Create: '' as Asset
   }
 })

plugins/telegram-resources/src/components/Chat.svelte

@@ -232,7 +232,7 @@
   .header {
     flex-shrink: 0;
     padding: 0 5.5rem 0 2.5rem;
-    height: 4.5rem;
+    height: 4rem;
     border-bottom: 1px solid var(--theme-card-divider);
 
     .icon {

plugins/workbench-assets/lang/en.json

@@ -2,6 +2,8 @@
   "string": {
     "More": "More...",
     "Delete": "Delete",
-    "Create": "Create"
+    "Create": "Create",
+    "ShowMenu": "Show menu",
+    "HideMenu": "Hide menu"
   }
 }

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

@@ -23,13 +23,13 @@
   import type { Ref, Space, Client } from '@anticrm/core'
   import type { Application, NavigatorModel, ViewConfiguration } from '@anticrm/workbench'
   import { setClient, Avatar, createQuery } from '@anticrm/presentation'
-  import workbench from '@anticrm/workbench'
+  import workbench from '../plugin'
 
   import Navigator from './Navigator.svelte'
   import SpaceHeader from './SpaceHeader.svelte'
   import SpaceView from './SpaceView.svelte'
   
-  import { AnyComponent, Component, location, Popup, showPopup, TooltipInstance } from '@anticrm/ui'
+  import { AnyComponent, Component, location, Popup, showPopup, TooltipInstance, closeTooltip } from '@anticrm/ui'
   import core from '@anticrm/core'
   import AccountPopup from './AccountPopup.svelte'
   import AppItem from './AppItem.svelte'
@@ -94,7 +94,14 @@
     <div class="panel-app">
       <div class="flex-col">
         <ActivityStatus status="active"/>
-        <AppItem icon={TopMenu} label={'Navigator'} selected={!visibileNav} action={async () => { visibileNav = !visibileNav }}/>
+        <AppItem
+          icon={TopMenu}
+          label={visibileNav ? workbench.string.HideMenu : workbench.string.ShowMenu}
+          action={async () => {
+            visibileNav = !visibileNav
+            closeTooltip()
+          }}
+        />
       </div>
       <Applications {apps} active={currentApp}/>
       <div class="flex-center" style="min-height: 6.25rem;">

plugins/workbench-resources/src/plugin.ts

@@ -22,6 +22,8 @@ export default mergeIds(workbenchId, workbench, {
   string: {
     More: '' as IntlString,
     Delete: '' as IntlString,
-    Create: '' as IntlString
+    Create: '' as IntlString,
+    ShowMenu: '' as IntlString,
+    HideMenu: '' as IntlString
   }
 })