From 88aa19ea4d8e8a37a8618163e57bef67104b88bd Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Wed, 15 Nov 2023 20:03:05 +0300
Subject: [PATCH] Moving the Back button (#3998)
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
packages/panel/src/components/Panel.svelte | 4 +-
packages/theme/styles/_layouts.scss | 1 +
packages/ui/src/components/Panel.svelte | 17 +--
.../ui/src/components/icons/ArrowLeft.svelte | 4 +-
.../ui/src/components/icons/ArrowRight.svelte | 4 +-
.../ui/src/components/internal/Root.svelte | 100 +++++++-----------
6 files changed, 43 insertions(+), 87 deletions(-)
diff --git a/packages/panel/src/components/Panel.svelte b/packages/panel/src/components/Panel.svelte
index 52b4b8516a..9e17abe968 100644
--- 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>
diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
index 86291e44b0..0ced03b22e 100644
--- 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; }
diff --git a/packages/ui/src/components/Panel.svelte b/packages/ui/src/components/Panel.svelte
index c9847fede3..3797bd7e4a 100644
--- 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'}
diff --git a/packages/ui/src/components/icons/ArrowLeft.svelte b/packages/ui/src/components/icons/ArrowLeft.svelte
index 358e0fd5cc..2d0b2c0af7 100644
--- 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>
diff --git a/packages/ui/src/components/icons/ArrowRight.svelte b/packages/ui/src/components/icons/ArrowRight.svelte
index 018bf9cf4f..5277f3bf20 100644
--- 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>
diff --git a/packages/ui/src/components/internal/Root.svelte b/packages/ui/src/components/internal/Root.svelte
index a2f92c82b4..6576edf83b 100644
--- 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;