Moving the Back button (#3998)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
2025-04-12 19:30:52 +00:00 · 2023-11-15 20:03:05 +03:00 · 2023-11-15 20:03:05 +03:00 · 88aa19ea4d
commit 88aa19ea4d
parent b74971e29d
6 changed files with 43 additions and 87 deletions
--- a/packages/panel/src/components/Panel.svelte
+++ b/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>

--- a/packages/theme/styles/_layouts.scss
+++ b/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; }
--- a/packages/ui/src/components/Panel.svelte
+++ b/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}>
-    {#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}
+  <div class="popupPanel-title" class:indent={allowClose}>
    {#if allowClose}
      <Button
        id={'btnPClose'}
--- a/packages/ui/src/components/icons/ArrowLeft.svelte
+++ b/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>
--- a/packages/ui/src/components/icons/ArrowRight.svelte
+++ b/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>
--- a/packages/ui/src/components/internal/Root.svelte
+++ b/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 {
-    checkMobile,
-    deviceOptionsStore as deviceInfo
-    // networkStatus
-  } from '../../'
+  import { IconArrowLeft, IconArrowRight, checkMobile, deviceOptionsStore as deviceInfo } 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}
-              <div class="flex-grow flex-center flex-row-center" class:maintenanceScheduled={maintenanceTime > 0}>
-                <Label label={platform.status.MaintenanceWarning} params={{ time: maintenanceTime }} />
-              </div>
-            {/if}
+          {#if maintenanceTime > 0}
+            <div class="flex-grow flex-center flex-row-center" class:maintenanceScheduled={maintenanceTime > 0}>
+              <Label label={platform.status.MaintenanceWarning} params={{ time: maintenanceTime }} />
+            </div>
+          {:else if status.severity !== Severity.OK}
            <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;