Moving the Back button (#3998)

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

packages/panel/src/components/Panel.svelte

@@ -35,7 +35,6 @@
   export let isUtils: boolean = true
   export let isCustomAttr: boolean = true
   export let floatAside: boolean = false
-  export let allowBack: boolean = true
   export let allowClose: boolean = true
   export let embedded: boolean = false
   export let useMaxWidth: boolean | undefined = undefined
@@ -102,7 +101,6 @@
   bind:withoutTitle
   on:open
   on:close
-  {allowBack}
   {allowClose}
   {embedded}
   {floatAside}
@@ -130,8 +128,8 @@
   </svelte:fragment>
   <svelte:fragment slot="utils">
     {#if isUtils && $$slots.utils}
-      <!-- <div class="buttons-divider" /> -->
       <slot name="utils" />
+      <div class="buttons-divider max-h-7 h-7 mx-2" />
     {/if}
   </svelte:fragment>
 

packages/theme/styles/_layouts.scss

@@ -718,6 +718,7 @@ input.search {
 .max-h-0 { max-height: 0; }
 .max-h-2 { max-height: .5rem; }
 .max-h-4 { max-height: 1rem; }
+.max-h-7 { max-height: 1.75rem; }
 .max-h-9 { max-height: 2.25rem; }
 .max-h-30 { max-height: 7.5rem; }
 .max-h-50 { max-height: 12.5rem; }

packages/ui/src/components/Panel.svelte

@@ -23,7 +23,6 @@
     ButtonGroup,
     Scroller,
     panelSeparators,
-    IconBack,
     ButtonItem
   } from '../../'
   import IconClose from './icons/Close.svelte'
@@ -40,7 +39,6 @@
   export let isFullSize: boolean = false
   export let withoutTitle: boolean = false
   export let floatAside: boolean = false
-  export let allowBack: boolean = true
   export let allowClose: boolean = true
   export let embedded: boolean = false
   export let useMaxWidth: boolean | undefined = undefined
@@ -133,20 +131,7 @@
     checkPanel()
   }}
 >
-  <div class="popupPanel-title" class:indent={allowClose || allowClose}>
+  <div class="popupPanel-title" class:indent={allowClose}>
-    {#if allowBack}
-      <Button
-        id={'btnPBack'}
-        focusIndex={10000}
-        icon={IconBack}
-        iconProps={{ size: 'medium' }}
-        kind={'icon'}
-        on:click={() => {
-          history.back()
-        }}
-      />
-      <div class="antiHSpacer" class:x2={!allowClose} />
-    {/if}
     {#if allowClose}
       <Button
         id={'btnPClose'}

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

@@ -18,8 +18,8 @@
   const fill: string = 'currentColor'
 </script>
 
-<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<svg class="svg-{size}" {fill} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
   <path
-    d="M13.1,7.5H4.3l3.1-3.1L6.7,3.6l-4,4L2.4,8l0.4,0.4l4,4l0.6-0.8L4.3,8.5h8.8c0.3,0,0.5-0.2,0.5-0.5S13.3,7.5,13.1,7.5z"
+    d="M14 26L15.41 24.59L7.83 17H27C27.5523 17 28 16.5523 28 16C28 15.4477 27.5523 15 27 15H7.83L15.41 7.41L14 6L4 16L14 26Z"
   />
 </svg>

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

@@ -18,8 +18,8 @@
   export let fill: string = 'currentColor'
 </script>
 
-<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<svg class="svg-{size}" {fill} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
   <path
-    d="M2.4,8c0,0.3,0.2,0.5,0.5,0.5h8.8l-3.1,3.1l0.6,0.8l4-4L13.6,8l-0.3-0.4l-4-4L8.6,4.4l3.1,3.1l-8.8,0C2.7,7.5,2.4,7.7,2.4,8z"
+    d="M18 6L16.57 7.393L24.15 15H5C4.44771 15 4 15.4477 4 16C4 16.5523 4.44772 17 5 17H24.15L16.57 24.573L18 26L28 16L18 6Z"
   />
 </svg>

packages/ui/src/components/internal/Root.svelte

@@ -1,28 +1,18 @@
 <script lang="ts">
-  import platform, { addEventListener, getMetadata, OK, PlatformEvent, Status } from '@hcengineering/platform'
+  import platform, { addEventListener, getMetadata, OK, PlatformEvent, Status, Severity } from '@hcengineering/platform'
   import { onDestroy } from 'svelte'
   import type { AnyComponent, WidthType } from '../../types'
   import { deviceSizes, deviceWidths } from '../../types'
   // import { applicationShortcutKey } from '../../utils'
   import { getCurrentLocation, location, navigate, locationStorageKeyId } from '../../location'
-
   import { Theme } from '@hcengineering/theme'
   import Component from '../Component.svelte'
-
   import StatusComponent from '../Status.svelte'
   import Clock from './Clock.svelte'
-  // import Mute from './icons/Mute.svelte'
+  import { IconArrowLeft, IconArrowRight, checkMobile, deviceOptionsStore as deviceInfo } from '../../'
-  import {
-    checkMobile,
-    deviceOptionsStore as deviceInfo
-    // networkStatus
-  } from '../../'
   import uiPlugin from '../../plugin'
   import Label from '../Label.svelte'
   import FontSizeSelector from './FontSizeSelector.svelte'
-  // import Computer from './icons/Computer.svelte'
-  // import Phone from './icons/Phone.svelte'
-  // import WiFi from './icons/WiFi.svelte'
   import LangSelector from './LangSelector.svelte'
   import ThemeSelector from './ThemeSelector.svelte'
 
@@ -146,18 +136,35 @@
   <div id="ui-root">
     <div class="antiStatusBar">
       <div class="flex-row-center h-full content-color">
+        <div class="history-box flex-row-center gap-3">
+          <button
+            class="antiButton ghost jf-center bs-none no-focus resetIconSize statusButton square"
+            style:color={'var(--theme-dark-color)'}
+            on:click={() => history.back()}
+          >
+            <IconArrowLeft size={'small'} />
+          </button>
+          <button
+            class="antiButton ghost jf-center bs-none no-focus resetIconSize statusButton square"
+            style:color={'var(--theme-dark-color)'}
+            on:click={() => history.forward()}
+          >
+            <IconArrowRight size={'small'} />
+          </button>
+        </div>
         <div
-          class="status-info"
+          class="flex-row-center justify-center status-info"
           style:margin-left={(isPortrait && docWidth <= 480) || (!isPortrait && docHeight <= 480) ? '1.5rem' : '0'}
         >
-          <div class="flex flex-row-center flex-center">
+          {#if maintenanceTime > 0}
-            {#if maintenanceTime > 0}
+            <div class="flex-grow flex-center flex-row-center" class:maintenanceScheduled={maintenanceTime > 0}>
-              <div class="flex-grow flex-center flex-row-center" class:maintenanceScheduled={maintenanceTime > 0}>
+              <Label label={platform.status.MaintenanceWarning} params={{ time: maintenanceTime }} />
-                <Label label={platform.status.MaintenanceWarning} params={{ time: maintenanceTime }} />
+            </div>
-              </div>
+          {:else if status.severity !== Severity.OK}
-            {/if}
             <StatusComponent {status} />
-          </div>
+          {:else}
+            <span class="logo-status">Zenflow</span>
+          {/if}
         </div>
         <div class="flex-row-reverse" style:-webkit-app-region={'no-drag'}>
           <div class="clock">
@@ -168,35 +175,6 @@
             <ThemeSelector />
             <LangSelector />
           </div>
-          <!-- <div
-            class="flex-center widget"
-            class:rotated={!isPortrait && isMobile}
-            on:click={() => {
-              alwaysMobile = !alwaysMobile
-              document.documentElement.style.setProperty('--app-height', `${window.innerHeight}px`)
-            }}
-          >
-            <svelte:component
-              this={isMobile ? Phone : Computer}
-              fill={alwaysMobile ? 'var(--theme-won-color)' : 'var(--content-color)'}
-              size={'small'}
-            />
-          </div>
-          <div
-            class="flex-center widget cursor-pointer"
-            on:click={(evt) => {
-              getMetadata(uiPlugin.metadata.ShowNetwork)?.(evt)
-            }}
-          >
-            <WiFi
-              size={'small'}
-              fill={$networkStatus === -1
-                ? 'var(--theme-error-color)'
-                : $networkStatus % 2 === 1
-                ? 'var(--theme-warning-color)'
-                : 'currentColor'}
-            />
-          </div> -->
         </div>
       </div>
     </div>
@@ -231,6 +209,10 @@
       background-color: var(--theme-statusbar-color);
       border-bottom: 1px solid var(--theme-navpanel-divider);
 
+      .history-box {
+        -webkit-app-region: no-drag;
+        margin-left: 5.625rem;
+      }
       .maintenanceScheduled {
         padding: 0 0.5rem;
         width: fit-content;
@@ -245,28 +227,18 @@
         flex-grow: 1;
         text-align: center;
       }
+      .logo-status {
+        font-weight: 500;
+        font-size: 14px;
+        color: var(--theme-content-color);
+      }
       .clock {
         margin: 0 12px 0 8px;
       }
-      // .widget {
-      //   font-size: 13px;
-      //   color: var(--theme-content-color);
-      //   transition: transform 0.15s ease-in-out;
-
-      //   &.rotated {
-      //     transform-origin: center center;
-      //     transform: rotate(90deg);
-      //   }
-      // }
-      // .widget + .widget {
-      //   margin-right: 12px;
-      // }
     }
 
     .app {
       height: calc(100% - var(--status-bar-height));
-      // min-width: 600px;
-      // min-height: 480px;
 
       .error {
         margin-top: 45vh;