TSK-1359, TSK-1357, TSK-1354, TSK-1355: Small fixes (#3084)

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

packages/theme/styles/_colors.scss

@@ -74,7 +74,7 @@
 
   --theme-bg-color: #1A1A28;
   --theme-back-color: #0f0f18;
-  --theme-overlay-color: #0000007f;
+  --theme-overlay-color: rgba(0, 0, 0, .3);
   --theme-statusbar-color: #2C2C35;
   --theme-navpanel-color: #14141F;
   --theme-navpanel-hovered: rgba(255, 255, 255, .04);
@@ -117,6 +117,8 @@
   --theme-progress-color: #FFFFFF;
   --theme-popup-color: #292938;
   --theme-popup-divider: rgba(255, 255, 255, .1);
+  --theme-popup-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1); // Light
+  --theme-panel-color: #1F1F2C;
 
   --body-color: #1f2023;
   --body-accent: #222326;
@@ -222,7 +224,7 @@
 
   --theme-bg-color: #F1F1F4;
   --theme-back-color: #D9D9DD;
-  --theme-overlay-color: #0000007f;
+  --theme-overlay-color: rgba(0, 0, 0, .2);
   --theme-statusbar-color: #bfbfc6;
   --theme-navpanel-color: #E8E8ED;
   --theme-navpanel-hovered: rgba(218, 218, 231, .5);
@@ -265,6 +267,8 @@
   --theme-progress-color: rgba(0, 0, 0, .5);
   --theme-popup-color: #F1F1F4;
   --theme-popup-divider: rgba(0, 0, 0, .1);
+  --theme-popup-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
+  --theme-panel-color: #FFFFFF;
 
   --body-color: #fff;
   --body-accent: #fafafa; // HZ

packages/theme/styles/_layouts.scss

@@ -406,6 +406,7 @@ input.search {
   &:not(.reverse) > *:not(:first-child) { margin-left: .5rem; }
   &.reverse > *:not(:last-child) { margin-right: .5rem; }
 }
+.gap-around-2 > * { margin: .25rem; }
 
 /* --------- */
 .sm-tool-icon {

packages/theme/styles/common.scss

@@ -37,6 +37,7 @@
     width: 100%;
     border-top: 1px solid var(--theme-navpanel-divider);
   }
+  &.lastDivider { border-color: var(--theme-navpanel-border); }
 }
 .antiPanel-navigator,
 .antiPanel-component {

packages/theme/styles/panel.scss

@@ -116,7 +116,7 @@
     min-height: 0;
     width: 100%;
     height: 100%;
-    background-color: var(--theme-bg-color);
+    background-color: var(--theme-panel-color);
     border: 1px solid var(--theme-divider-color);
     &:not(.embedded) {
       border-radius: 0 0 .5rem .5rem;
@@ -226,7 +226,7 @@
         min-width: 0;
         max-width: 320px;
         height: 100%;
-        background-color: var(--theme-list-row-color);
+        background-color: var(--theme-panel-color);
         border-left: 1px solid var(--theme-divider-color);
         border-bottom-right-radius: .45rem;
         box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);

plugins/tracker-assets/assets/icons.svg

@@ -88,7 +88,7 @@
     <rect opacity="0.6" x="2" y="7.5" width="12" height="1" rx="0.5" />
   </symbol>
   <symbol id="priority-urgent" viewBox="-1 -1 16 16">
-    <path fill="var(--warning-color)" d="M2 0a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V2a2 2 0 00-2-2H2zm3.914 3h1.738L7.5 8.602H6.07L5.914 3zm1.809 7.164a.95.95 0 01-.938.938.934.934 0 110-1.867c.5 0 .934.417.938.93z" />
+    <path fill="var(--primary-color-orange-02)" d="M2 0a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V2a2 2 0 00-2-2H2zm3.914 3h1.738L7.5 8.602H6.07L5.914 3zm1.809 7.164a.95.95 0 01-.938.938.934.934 0 110-1.867c.5 0 .934.417.938.93z" />
   </symbol>
   <symbol id="priority-high" viewBox="0 0 16 16">
     <rect x="1" y="8" width="3" height="6" rx="1" fill-opacity=".4" />

plugins/tracker-resources/src/components/issues/edit/CreateSubIssue.svelte

@@ -19,7 +19,7 @@
   import presentation, { DraftController, getClient, KeyedAttribute } from '@hcengineering/presentation'
   import tags, { TagElement, TagReference } from '@hcengineering/tags'
   import { calcRank, Issue, IssueDraft, IssuePriority, Project } from '@hcengineering/tracker'
-  import { addNotification, Button, Component, EditBox } from '@hcengineering/ui'
+  import { addNotification, Button, Component, EditBox, deviceOptionsStore, ButtonSize } from '@hcengineering/ui'
   import { createEventDispatcher, onDestroy } from 'svelte'
   import tracker from '../../../plugin'
   import AssigneeEditor from '../AssigneeEditor.svelte'
@@ -188,10 +188,12 @@
   $: if (!object.status && currentProject?.defaultIssueStatus) {
     object.status = currentProject.defaultIssueStatus
   }
+  let buttonSize: ButtonSize
+  $: buttonSize = $deviceOptionsStore.twoRows ? 'small' : 'large'
 </script>
 
-<div id="sub-issue-child-editor" bind:this={thisRef} class="flex-col root">
+<div id="sub-issue-child-editor" bind:this={thisRef} class="flex-col subissue-container">
-  <div class="flex-row-top">
+  <div class="flex-row-top subissue-content">
     <div id="status-editor" class="mr-1">
       <StatusEditor
         value={object}
@@ -231,15 +233,15 @@
       </div>
     </div>
   </div>
-  <div class="mt-4 flex-between">
+  <div class="subissue-footer flex-between">
-    <div class="buttons-group xsmall-gap">
+    <div class="flex-row-center gap-around-2 flex-wrap">
       <div id="sub-issue-priority">
         <PriorityEditor
           value={object}
           shouldShowLabel
           isEditable
-          kind="no-border"
+          kind={'secondary'}
-          size="small"
+          size={buttonSize}
           justify="center"
           on:change={({ detail }) => (object.priority = detail)}
         />
@@ -248,8 +250,8 @@
         {#key object.assignee}
           <AssigneeEditor
             value={object}
-            size="small"
+            kind={'secondary'}
-            kind="no-border"
+            size={buttonSize}
             on:change={({ detail }) => (object.assignee = detail)}
           />
         {/key}
@@ -260,7 +262,9 @@
           items: object.labels,
           key,
           targetClass: tracker.class.Issue,
-          countLabel: tracker.string.NumberLabels
+          countLabel: tracker.string.NumberLabels,
+          kind: 'secondary',
+          size: buttonSize
         }}
         on:open={(evt) => {
           addTagRef(evt.detail)
@@ -269,16 +273,16 @@
           object.labels = object.labels.filter((it) => it._id !== evt.detail)
         }}
       />
-      <EstimationEditor kind={'no-border'} size={'small'} value={object} />
+      <EstimationEditor kind={'secondary'} size={buttonSize} value={object} />
     </div>
-    <div class="buttons-group small-gap">
+    <div class="flex-row-center gap-around-2 self-end flex-no-shrink">
-      <Button label={presentation.string.Cancel} size="small" kind="transparent" on:click={close} />
+      <Button label={presentation.string.Cancel} kind={'secondary'} size={buttonSize} on:click={close} />
       <Button
         {loading}
         disabled={!canSave}
         label={presentation.string.Save}
-        size="small"
+        kind={'primary'}
-        kind="no-border"
+        size={buttonSize}
         on:click={createIssue}
       />
     </div>
@@ -286,15 +290,20 @@
 </div>
 
 <style lang="scss">
-  .root {
+  .subissue-container {
-    padding: 0.75rem;
+    background-color: var(--theme-button-enabled);
-    background-color: var(--body-accent);
+    border: 1px solid var(--theme-button-border);
-    border: 1px solid var(--button-border-color);
+    border-radius: 0.25rem;
-    border-radius: 0.5rem;
     overflow: hidden;
 
-    .content {
+    .subissue-content {
-      padding-top: 0.3rem;
+      padding: 0.75rem;
+      .content {
+        padding-top: 0.3rem;
+      }
+    }
+    .subissue-footer {
+      padding: 0.25rem 0.5rem 0.5rem;
     }
   }
 </style>

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

@@ -12,24 +12,10 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 -->
-<script lang="ts">
+<div class="antiLogo red">P</div>
-  import type { IntlString } from '@hcengineering/platform'
-  import { tooltip } from '@hcengineering/ui'
-  import Arrows from './icons/Arrows.svelte'
-
-  export let bundle: 'platform' | 'ezthera' = 'platform'
-  export let label: IntlString
-  export let selected: boolean
-</script>
-
-<button class="antiLogo {bundle}" class:selected tabindex="0" use:tooltip={{ label }} on:click>
-  <span class="logo">{bundle === 'ezthera' ? 'E' : 'P'}</span>
-  <div class="arrows"><Arrows size={'small'} /></div>
-</button>
 
 <style lang="scss">
   .antiLogo {
-    position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -40,50 +26,12 @@
     color: var(--primary-button-color);
     border-radius: 0.25rem;
     outline: none;
-    perspective: 16px;
-    transform-style: preserve-3d;
 
-    &.platform {
+    &.red {
       background-color: #c93030;
     }
-    &.ezthera {
+    &.blue {
       background-color: #2b5190;
     }
-
-    &:focus {
-      box-shadow: 0 0 0 2px var(--primary-button-focused-border);
-    }
-
-    .logo,
-    .arrows {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transition: all 0.15s ease-in-out;
-    }
-    .logo {
-      transform: translate(-50%, -50%);
-      opacity: 1;
-    }
-    .arrows {
-      transform: translate(0, -50%) rotateY(0deg);
-      opacity: 0;
-    }
-    &:hover {
-      .logo {
-        transform: translate(-100%, -50%);
-        opacity: 0;
-      }
-      .arrows {
-        transform: translate(-50%, -50%) rotateY(0deg);
-        opacity: 1;
-      }
-    }
-    &.selected:hover {
-      .arrows {
-        transform: translate(-50%, -50%) rotateY(180deg);
-        opacity: 1;
-      }
-    }
   }
 </style>

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

@@ -65,6 +65,7 @@
   import SpaceView from './SpaceView.svelte'
   import Settings from './icons/Settings.svelte'
   import Logo from './Logo.svelte'
+  import TopMenu from './icons/TopMenu.svelte'
 
   let contentPanel: HTMLElement
   let shownMenu: boolean = false
@@ -551,17 +552,21 @@
     </clipPath>
   </svg>
   <div class="workbench-container" style:flex-direction={appsDirection === 'horizontal' ? 'column-reverse' : 'row'}>
-    <div class="antiPanel-application {appsDirection}">
+    <div class="antiPanel-application {appsDirection}" class:lastDivider={!visibileNav}>
       <div
         class="hamburger-container clear-mins"
         class:portrait={appsDirection === 'horizontal'}
         class:landscape={appsDirection === 'vertical'}
       >
         <div class="logo-container clear-mins">
-          <Logo
+          <Logo />
-            bundle={'platform'}
+        </div>
+        <div class="topmenu-container clear-mins" class:mini={appsMini}>
+          <AppItem
+            icon={TopMenu}
             label={visibileNav ? workbench.string.HideMenu : workbench.string.ShowMenu}
             selected={!visibileNav}
+            mini={appsMini}
             on:click={toggleNav}
           />
         </div>
@@ -742,6 +747,9 @@
       .logo-container {
         margin-right: 0.5rem;
       }
+      .topmenu-container {
+        margin-right: 0.5rem;
+      }
       .divider {
         margin-left: 0.5rem;
         width: 1px;
@@ -753,7 +761,10 @@
       margin-top: 1.25rem;
 
       .logo-container {
-        margin-bottom: 1.75rem;
+        margin-bottom: 0.75rem;
+      }
+      .topmenu-container {
+        margin-bottom: 1.5rem;
       }
       .divider {
         margin-top: 1.5rem;
@@ -761,15 +772,17 @@
         height: 1px;
       }
     }
-    // &.mini {
-    //   position: fixed;
-    //   top: 4px;
-    //   left: 4px;
-    // }
 
-    .logo-container {
+    .logo-container,
+    .topmenu-container,
+    .divider {
       flex-shrink: 0;
     }
+    .topmenu-container.mini {
+      position: fixed;
+      top: 4px;
+      left: 4px;
+    }
     .divider {
       flex-shrink: 0;
       background-color: var(--theme-navpanel-icons-divider);

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

@@ -4,6 +4,6 @@
 </script>
 
 <svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <path d="M3,9.6h18c0.3,0,0.6-0.3,0.6-0.6S21.3,8.4,21,8.4H3C2.7,8.4,2.4,8.7,2.4,9S2.7,9.6,3,9.6z" />
+  <rect x="4" y="9.4" width="16" height="1.2" />
-  <path d="M21,14.4H3c-0.3,0-0.6,0.3-0.6,0.6s0.3,0.6,0.6,0.6h18c0.3,0,0.6-0.3,0.6-0.6S21.3,14.4,21,14.4z" />
+  <rect x="4" y="14.4" width="16" height="1.2" />
 </svg>