UI, navigator, aside fixes

Signed-off-by: Alexander Platov <[email protected]>
hcengineering · Dec 2, 2024 · 0267867 · 0267867
1 parent 1526ae2
commit 0267867
Show file tree

Hide file tree

Showing 9 changed files with 49 additions and 15 deletions.
diff --git a/plugins/activity-resources/src/components/activity-message/ActivityMessageTemplate.svelte b/plugins/activity-resources/src/components/activity-message/ActivityMessageTemplate.svelte
@@ -264,7 +264,7 @@
       </div>
 
       {#if withActions && !readonly}
-        <div class="actions" class:pending class:opened={isActionsOpened}>
+        <div class="actions" class:pending class:opened={isActionsOpened} class:isShort>
           <ActivityMessageActions
             message={isReactionMessage(message) ? parentMessage : message}
             {actions}
@@ -326,6 +326,9 @@
       &.opened:not(.pending) {
         visibility: visible;
       }
+      &.isShort {
+        top: -1.875rem;
+      }
     }
 
     &:hover > .actions {

diff --git a/plugins/calendar-resources/src/components/CalendarWidgetHeader.svelte b/plugins/calendar-resources/src/components/CalendarWidgetHeader.svelte
@@ -13,7 +13,7 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { Breadcrumbs, Header, deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
+  import { Breadcrumbs, Header } from '@hcengineering/ui'
   import { IntlString } from '@hcengineering/platform'
 
   import { CalendarMode } from '../index'
@@ -43,7 +43,6 @@
   adaptive="autoExtra"
   doubleRowWidth={350}
   closeOnEscape={false}
-  topIndent={$deviceInfo.navigator.float && !$deviceInfo.aside.float}
   on:close
 >
   <div class="title">

diff --git a/plugins/love-resources/src/components/RoomPopup.svelte b/plugins/love-resources/src/components/RoomPopup.svelte
@@ -239,7 +239,13 @@
         />
       {/if}
       {#if canGoBack(joined, $location, $currentMeetingMinutes)}
-        <ModernButton icon={IconArrowLeft} label={ui.string.Back} kind={'secondary'} size={'large'} on:click={back} />
+        <ModernButton
+          icon={IconArrowLeft}
+          label={love.string.MeetingMinutes}
+          kind={'primary'}
+          size={'large'}
+          on:click={back}
+        />
       {/if}
     </div>
   {/if}

diff --git a/plugins/workbench-resources/src/components/AppItem.svelte b/plugins/workbench-resources/src/components/AppItem.svelte
@@ -23,12 +23,14 @@
   export let size: 'small' | 'medium' | 'large' = 'large'
   export let loading: boolean = false
   export let notify: boolean = false
+  export let navigator: boolean = false
 </script>
 
 <button
   class="app {size}"
   class:loading
   class:selected
+  class:navigator
   id={'app-' + label}
   disabled={loading}
   use:tooltip={{ label }}
@@ -99,6 +101,9 @@
         color: var(--theme-caption-color);
       }
     }
+    &.navigator {
+      border-color: var(--theme-button-border);
+    }
   }
 
   .marker {

diff --git a/plugins/workbench-resources/src/components/Applications.svelte b/plugins/workbench-resources/src/components/Applications.svelte
@@ -15,7 +15,7 @@
 <script lang="ts">
   import core, { getCurrentAccount, type Ref } from '@hcengineering/core'
   import { createQuery } from '@hcengineering/presentation'
-  import { Scroller, resizeObserver } from '@hcengineering/ui'
+  import { Scroller, deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
   import { NavLink } from '@hcengineering/view-resources'
   import type { Application } from '@hcengineering/workbench'
   import workbench from '@hcengineering/workbench'
@@ -60,13 +60,33 @@
     >
       {#each topApps as app}
         <NavLink app={app.alias} shrink={0} disabled={app._id === active}>
-          <AppItem selected={app._id === active} icon={app.icon} label={app.label} />
+          <AppItem
+            selected={app._id === active}
+            icon={app.icon}
+            label={app.label}
+            navigator={app._id === active && $deviceInfo.navigator.visible}
+            on:click={() => {
+              if (app._id === active) {
+                $deviceInfo.navigator.visible = !$deviceInfo.navigator.visible
+              }
+            }}
+          />
         </NavLink>
       {/each}
       <div class="divider" />
       {#each bottomdApps as app}
         <NavLink app={app.alias} shrink={0} disabled={app._id === active}>
-          <AppItem selected={app._id === active} icon={app.icon} label={app.label} />
+          <AppItem
+            selected={app._id === active}
+            icon={app.icon}
+            label={app.label}
+            navigator={app._id === active && $deviceInfo.navigator.visible}
+            on:click={() => {
+              if (app._id === active) {
+                $deviceInfo.navigator.visible = !$deviceInfo.navigator.visible
+              }
+            }}
+          />
         </NavLink>
       {/each}
       <div class="apps-space-{direction}" />

diff --git a/plugins/workbench-resources/src/components/Workbench.svelte b/plugins/workbench-resources/src/components/Workbench.svelte
@@ -646,6 +646,7 @@
       }
     }
   }
+  checkWorkbenchWidth()
   $: if ($deviceInfo.docWidth <= 1024 && !$deviceInfo.aside.float) {
     $deviceInfo.aside.visible = false
     $deviceInfo.aside.float = true
@@ -822,6 +823,8 @@
             icon={notification.icon.Notifications}
             label={notification.string.Inbox}
             selected={currentAppAlias === notificationId || inboxPopup !== undefined}
+            navigator={(currentAppAlias === notificationId || inboxPopup !== undefined) &&
+              $deviceInfo.navigator.visible}
             on:click={(e) => {
               if (e.metaKey || e.ctrlKey) return
               if (currentAppAlias === notificationId && lastLoc !== undefined) {
@@ -1025,7 +1028,7 @@
   <Dock />
   {#if $deviceInfo.aside.float}
     <div
-      class="antiPanel-navigator right no-print {$deviceInfo.navigator.direction === 'horizontal'
+      class="antiPanel-navigator right fly no-print {$deviceInfo.navigator.direction === 'horizontal'
         ? 'portrait'
         : 'landscape'}"
       style:display={$deviceInfo.aside.visible ? 'flex' : 'none'}

diff --git a/plugins/workbench-resources/src/components/sidebar/Sidebar.svelte b/plugins/workbench-resources/src/components/sidebar/Sidebar.svelte
@@ -82,9 +82,9 @@
     border-radius: 0 var(--medium-BorderRadius) var(--medium-BorderRadius) 0;
 
     &.mini:not(.float) {
-      width: 3.5rem !important;
-      min-width: 3.5rem !important;
-      max-width: 3.5rem !important;
+      width: calc(3.5rem + 1px) !important;
+      min-width: calc(3.5rem + 1px) !important;
+      max-width: calc(3.5rem + 1px) !important;
     }
     &.mini.float {
       justify-content: flex-end;

diff --git a/plugins/workbench-resources/src/components/sidebar/SidebarExpanded.svelte b/plugins/workbench-resources/src/components/sidebar/SidebarExpanded.svelte
@@ -22,8 +22,7 @@
     Location,
     Header,
     Breadcrumbs,
-    getCurrentLocation,
-    deviceOptionsStore as deviceInfo
+    getCurrentLocation
   } from '@hcengineering/ui'
   import { onDestroy, onMount } from 'svelte'
 
@@ -109,7 +108,6 @@
           hideDescription={true}
           adaptive="disabled"
           closeOnEscape={false}
-          topIndent={$deviceInfo.navigator.float && !$deviceInfo.aside.float}
           on:close={() => {
             if (widget !== undefined) {
               closeWidget(widget._id)

diff --git a/plugins/workbench-resources/src/components/sidebar/widgets/WidgetsBar.svelte b/plugins/workbench-resources/src/components/sidebar/widgets/WidgetsBar.svelte
@@ -31,7 +31,7 @@
 
   function handleSelectWidget (widget: Widget): void {
     if (selected === widget._id) {
-      if ($deviceInfo.navigator.float) $deviceInfo.aside.visible = false
+      if ($deviceInfo.aside.float) $deviceInfo.aside.visible = false
       else minimizeSidebar(true)
     } else {
       openWidget(widget, $sidebarStore.widgetsState.get(widget._id)?.data, { active: true, openedByUser: true })