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

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

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">
-  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>
+<div class="antiLogo red">P</div>
 
 <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
-            bundle={'platform'}
+          <Logo />
+        </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" />
-  <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="9.4" width="16" height="1.2" />
+  <rect x="4" y="14.4" width="16" height="1.2" />
 </svg>