diff --git a/packages/theme/styles/_colors.scss b/packages/theme/styles/_colors.scss index ae5674d9ff..1b3b330aee 100644 --- a/packages/theme/styles/_colors.scss +++ b/packages/theme/styles/_colors.scss @@ -82,6 +82,7 @@ --theme-navpanel-divider: rgba(255, 255, 255, .1); --theme-navpanel-border: transparent; --theme-navpanel-icons-color: #7F7F7F; + --theme-navpanel-icons-divider: rgba(255, 255, 255, .11); --theme-comp-header-color: #1F1F2C; --theme-divider-color: rgba(255, 255, 255, .06); @@ -229,6 +230,7 @@ --theme-navpanel-divider: rgba(0, 0, 0, .06); --theme-navpanel-border: rgba(0, 0, 0, .06); --theme-navpanel-icons-color: #7F7F7F; + --theme-navpanel-icons-divider: rgba(0, 0, 0, .1); --theme-comp-header-color: #FBFBFC; --theme-divider-color: rgba(0, 0, 0, .06); diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss index 5872cf1de3..5f1c93fb86 100644 --- a/packages/theme/styles/_layouts.scss +++ b/packages/theme/styles/_layouts.scss @@ -231,6 +231,8 @@ input.search { display: flex; flex-direction: column; align-items: center; + min-width: 0; + min-height: 0; } .flex-col-stretch { display: flex; @@ -646,6 +648,10 @@ input.search { .square-36 { width: 2.25rem; height: 2.25rem; } /* --------- */ +.svg-16px { + width: 16px; + height: 16px; +} .svg-inline { width: 1em; height: 1em; diff --git a/packages/theme/styles/common.scss b/packages/theme/styles/common.scss index 408b7727af..bf4cfe0d4e 100644 --- a/packages/theme/styles/common.scss +++ b/packages/theme/styles/common.scss @@ -23,18 +23,19 @@ justify-content: space-between; align-items: center; background-color: var(--theme-navpanel-color); - border-right: 1px solid var(--theme-navpanel-divider); &.vertical { flex-direction: column; min-width: var(--app-panel-width); width: var(--app-panel-width); height: 100%; + border-right: 1px solid var(--theme-navpanel-divider); } &.horizonatl { min-height: var(--app-panel-width); height: var(--app-panel-width); width: 100%; + border-top: 1px solid var(--theme-navpanel-divider); } } .antiPanel-navigator, diff --git a/packages/ui/src/components/Scroller.svelte b/packages/ui/src/components/Scroller.svelte index 73de1f29b2..e341a041e2 100644 --- a/packages/ui/src/components/Scroller.svelte +++ b/packages/ui/src/components/Scroller.svelte @@ -21,6 +21,7 @@ import { defaultSP } from '../types' import IconUpOutline from './icons/UpOutline.svelte' import IconDownOutline from './icons/DownOutline.svelte' + import HalfUpDown from './icons/HalfUpDown.svelte' export let padding: string | undefined = undefined export let autoscroll: boolean = false @@ -31,7 +32,7 @@ export let horizontal: boolean = false export let contentDirection: 'vertical' | 'vertical-reverse' | 'horizontal' = 'vertical' export let noStretch: boolean = autoscroll - export let buttons: boolean = false + export let buttons: 'normal' | 'union' | false = false export let shrink: boolean = false export let divScroll: HTMLElement | undefined = undefined export let checkForHeaders = false @@ -422,6 +423,17 @@ } } } + + $: topButton = + (orientir === 'vertical' && (mask === 'top' || mask === 'both')) || + (orientir === 'horizontal' && (maskH === 'right' || maskH === 'both')) + ? 'visible' + : 'hidden' + $: bottomButton = + (orientir === 'vertical' && (mask === 'bottom' || mask === 'both')) || + (orientir === 'horizontal' && (maskH === 'left' || maskH === 'both')) + ? 'visible' + : 'hidden' @@ -429,7 +441,8 @@
- {#if buttons} + {#if buttons === 'normal'} + {:else if buttons === 'union'} +
+ + +
{/if}
diff --git a/plugins/workbench-resources/src/components/Logo.svelte b/plugins/workbench-resources/src/components/Logo.svelte new file mode 100644 index 0000000000..0a6f51b9e1 --- /dev/null +++ b/plugins/workbench-resources/src/components/Logo.svelte @@ -0,0 +1,89 @@ + + + + + + diff --git a/plugins/workbench-resources/src/components/Workbench.svelte b/plugins/workbench-resources/src/components/Workbench.svelte index fc0822b6c5..1d65fad855 100644 --- a/plugins/workbench-resources/src/components/Workbench.svelte +++ b/plugins/workbench-resources/src/components/Workbench.svelte @@ -64,7 +64,7 @@ import Navigator from './Navigator.svelte' import SpaceView from './SpaceView.svelte' import Settings from './icons/Settings.svelte' - import TopMenu from './icons/TopMenu.svelte' + import Logo from './Logo.svelte' let contentPanel: HTMLElement let shownMenu: boolean = false @@ -484,6 +484,8 @@ : appsDirection === 'vertical' && $deviceInfo.isMobile ? 'account-mobile' : 'account' + let notifyPosition: PopupPosAlignment + $: notifyPosition = appsDirection === 'horizontal' ? 'notify-mobile' : 'notify' onMount(() => subscribeMobile(setTheme)) @@ -529,11 +531,13 @@ - +
- - - -
(shownMenu = !shownMenu)}> - +
+
-
- -
- {#if $configurationStore.has(requestId)} - showPopup(request.component.RequestsPopup, {}, popupPosition)} - notify={hasRequests} - /> - {/if} - {#if $configurationStore.has(calendarId)} - showPopup(calendar.component.RemindersPopup, {}, popupPosition)} - /> - {/if} + + {#if $configurationStore.has(calendarId)} + showPopup(calendar.component.RemindersPopup, {}, notifyPosition)} + /> + {/if} + {#if $configurationStore.has(requestId)} + showPopup(request.component.RequestsPopup, {}, notifyPosition)} + notify={hasRequests} + /> + {/if} +
+ +
+
+ + +
(shownMenu = !shownMenu)} tabindex="0"> + +
- +
@@ -729,71 +735,44 @@ .hamburger-container { display: flex; align-items: center; - flex-shrink: 0; &.portrait { - margin-left: 0.375rem; + margin-left: 1rem; - .thinButton { + .logo-container { + margin-right: 0.5rem; + } + .divider { margin-left: 0.5rem; - padding: 0.25rem; - height: 2.5rem; + width: 1px; + height: 2.25rem; } } &.landscape { flex-direction: column; - margin-top: 0.25rem; + margin-top: 1.25rem; - .thinButton { - margin-top: 0.5rem; - padding: 0.25rem; - width: 2.5rem; + .logo-container { + margin-bottom: 1.75rem; + } + .divider { + margin-top: 1.5rem; + width: 2.25rem; + height: 1px; } } - &.mini { - position: fixed; - top: 4px; - left: 4px; + // &.mini { + // position: fixed; + // top: 4px; + // left: 4px; + // } - .thinButton { - margin-left: 0.25rem; - padding: 0; - width: 1.5rem; - height: 1.5rem; - } - } - - .thinButton { - display: flex; - align-items: center; - justify-content: center; + .logo-container { flex-shrink: 0; - background-color: transparent; - border-radius: 0.25rem; - opacity: 0.2; - cursor: pointer; - - transition-property: opacity, color, background-color; - transition-timing-function: var(--timing-main); - transition-duration: 0.1s; - - &:hover { - color: var(--accent-color); - background-color: var(--accent-bg-color); - opacity: 0.9; - } - - &.shownMenu { - color: var(--accent-color); - background-color: var(--button-bg-color); - opacity: 0.8; - - &:hover { - color: var(--caption-color); - background-color: var(--button-bg-hover); - opacity: 1; - } - } + } + .divider { + flex-shrink: 0; + background-color: var(--theme-navpanel-icons-divider); } } @@ -801,16 +780,51 @@ display: flex; align-items: center; + .thinButton { + flex-shrink: 0; + padding: 0.25rem; + color: var(--theme-navpanel-icons-color); + border: 1px solid transparent; + border-radius: 0.25rem; + cursor: pointer; + + &.shownMenu { + color: var(--theme-caption-color); + border-color: var(--theme-button-border); + } + &.shownMenu { + background-color: var(--theme-button-enabled); + } + &:hover { + color: var(--theme-caption-color); + } + &:focus { + box-shadow: 0 0 0 2px var(--primary-button-focused-border); + } + } &.vertical { flex-direction: column; - margin-bottom: 2rem; + margin-bottom: 1.5rem; &-mobile { margin-bottom: 1rem; } + &:not(.mini) > *:not(:last-child) { + margin-bottom: 0.75rem; + } + &.mini > *:not(:last-child) { + margin-bottom: 0.25rem; + } } &.horizontal { margin-right: 1rem; + + &:not(.mini) > *:not(:last-child) { + margin-right: 0.75rem; + } + &.mini > *:not(:last-child) { + margin-right: 0.25rem; + } } } diff --git a/plugins/workbench-resources/src/components/icons/Arrows.svelte b/plugins/workbench-resources/src/components/icons/Arrows.svelte new file mode 100644 index 0000000000..dd0547d518 --- /dev/null +++ b/plugins/workbench-resources/src/components/icons/Arrows.svelte @@ -0,0 +1,9 @@ + + + + + + diff --git a/plugins/workbench-resources/src/components/icons/Settings.svelte b/plugins/workbench-resources/src/components/icons/Settings.svelte index 4bcbcbd5b0..d7850e70a6 100644 --- a/plugins/workbench-resources/src/components/icons/Settings.svelte +++ b/plugins/workbench-resources/src/components/icons/Settings.svelte @@ -5,15 +5,9 @@