Add dock (#5416)

Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>

models/view/src/plugin.ts

@@ -101,9 +101,7 @@ export default mergeIds(viewId, view, {
     General: '' as IntlString,
     Navigation: '' as IntlString,
     Editor: '' as IntlString,
-    MarkdownFormatting: '' as IntlString,
-    Pin: '' as IntlString,
-    Unpin: '' as IntlString
+    MarkdownFormatting: '' as IntlString
   },
   function: {
     FilterArrayAllResult: '' as FilterFunction,

packages/theme/styles/popups.scss

@@ -317,6 +317,11 @@
   box-shadow: var(--theme-popup-shadow);
   user-select: none;
 
+  &.isDock {
+    border-radius: 0;
+    height: 100%;
+  }
+
   .ap-space {
     flex-shrink: 0;
     height: .25rem;

packages/ui/src/components/Dock.svelte

@@ -0,0 +1,52 @@
+<!--
+// Copyright © 2024 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  import { dockStore, unpin } from '../popups'
+
+  function _close (result: any): void {
+    if ($dockStore?.onClose !== undefined) $dockStore.onClose(result)
+    $dockStore?.close()
+  }
+</script>
+
+{#if $dockStore !== undefined}
+  <div class="dock">
+    <svelte:component
+      this={$dockStore.is}
+      {...$dockStore.props}
+      isDock
+      on:close={(ev) => {
+        _close(ev?.detail)
+      }}
+      on:dock={() => {
+        if ($dockStore !== undefined) {
+          unpin()
+        }
+      }}
+    />
+  </div>
+{/if}
+
+<style lang="scss">
+  .dock {
+    display: flex;
+    flex-shrink: 0;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
+    background-color: transparent;
+    transform-origin: center;
+  }
+</style>

packages/ui/src/components/Popup.svelte

@@ -24,13 +24,13 @@
     instances.forEach((p) => p.fitPopupInstance())
   }
 
-  $: instances.length = $modal.length
+  $: instances.length = $modal.filter((p) => p.dock !== true).length
 </script>
 
 {#if $modal.length > 0}
   <slot name="popup-header" />
 {/if}
-{#each $modal as popup, i (popup.id)}
+{#each $modal.filter((p) => p.dock !== true) as popup, i (popup.id)}
   <PopupInstance
     bind:this={instances[i]}
     is={popup.is}

packages/ui/src/components/PopupInstance.svelte

@@ -16,7 +16,7 @@
 <script lang="ts">
   import { onMount } from 'svelte'
   import { deviceOptionsStore as deviceInfo, resizeObserver, testing } from '..'
-  import { CompAndProps, fitPopupElement } from '../popups'
+  import { CompAndProps, fitPopupElement, pin } from '../popups'
   import type { AnySvelteComponent, DeviceOptions, PopupAlignment, PopupOptions, PopupPositionElement } from '../types'
 
   export let is: AnySvelteComponent
@@ -314,6 +314,9 @@
       fullSize = !fullSize
       fitPopup(modalHTML, element, contentPanel)
     }}
+    on:dock={() => {
+      pin(popup.id)
+    }}
     on:changeContent={(ev) => {
       fitPopup(modalHTML, element, contentPanel)
       if (ev.detail?.notFit !== undefined) notFit = ev.detail.notFit

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

@@ -250,6 +250,7 @@
     }
 
     .app {
+      display: flex;
       height: calc(100% - var(--status-bar-height));
 
       .error {

packages/ui/src/index.ts

@@ -252,6 +252,8 @@ export { default as NumberInput } from './components/NumberInput.svelte'
 export { default as Lazy } from './components/Lazy.svelte'
 export { default as TimeZonesPopup } from './components/TimeZonesPopup.svelte'
 
+export { default as Dock } from './components/Dock.svelte'
+
 export * from './types'
 export * from './location'
 export * from './utils'

packages/ui/src/popups.ts

@@ -1,6 +1,6 @@
 import { getResource } from '@hcengineering/platform'
 import { type ComponentType } from 'svelte'
-import { writable } from 'svelte/store'
+import { derived, writable } from 'svelte/store'
 import type {
   AnyComponent,
   AnySvelteComponent,
@@ -29,6 +29,7 @@ export interface CompAndProps {
     fixed?: boolean
     refId?: string
   }
+  dock?: boolean
 }
 
 export interface PopupResult {
@@ -39,6 +40,10 @@ export interface PopupResult {
 
 export const popupstore = writable<CompAndProps[]>([])
 
+export const dockStore = derived(popupstore, (popups) => {
+  return popups.find((popup) => popup.dock)
+})
+
 export function updatePopup (id: string, props: Partial<CompAndProps>): void {
   popupstore.update((popups) => {
     const popupIndex = popups.findIndex((p) => p.id === id)
@@ -409,3 +414,17 @@ export function getEventPositionElement (evt: MouseEvent): PopupAlignment | unde
     getBoundingClientRect: () => rect
   }
 }
+
+export function pin (id: string): void {
+  popupstore.update((popups) => {
+    popups.forEach((p) => (p.dock = p.id === id))
+    return popups
+  })
+}
+
+export function unpin (): void {
+  popupstore.update((popups) => {
+    popups.forEach((p) => (p.dock = false))
+    return popups
+  })
+}

plugins/notification-resources/src/components/NotificationSettings.svelte

@@ -34,7 +34,8 @@
     defineSeparators,
     settingsSeparators,
     Separator,
-    NavItem
+    NavItem,
+    Loading
   } from '@hcengineering/ui'
   import notification from '../plugin'
   import NotificationGroupSetting from './NotificationGroupSetting.svelte'
@@ -53,6 +54,8 @@
 
   const query = createQuery()
 
+  let loading = true
+
   query.query(notification.class.NotificationSetting, {}, (res) => {
     settings = new Map()
     for (const value of res) {
@@ -61,6 +64,7 @@
       settings.set(value.type, arr)
     }
     settings = settings
+    loading = false
   })
 
   let group: Ref<NotificationGroup> | undefined = undefined
@@ -136,6 +140,9 @@
     <div class="hulyComponent-content__column content">
       <Scroller align={'center'} padding={'var(--spacing-3)'} bottomPadding={'var(--spacing-3)'}>
         <div class="hulyComponent-content">
+          {#if loading}
+            <Loading />
+          {:else}
             {#if group}
               <NotificationGroupSetting {group} {settings} />
             {/if}
@@ -144,6 +151,7 @@
                 <svelte:component this={presenter} />
               {/await}
             {/if}
+          {/if}
         </div>
       </Scroller>
     </div>

plugins/view/src/index.ts

@@ -197,7 +197,9 @@ const view = plugin(viewId, {
     Save: '' as IntlString,
     PublicView: '' as IntlString,
     Archived: '' as IntlString,
-    MoreActions: '' as IntlString
+    MoreActions: '' as IntlString,
+    Pin: '' as IntlString,
+    Unpin: '' as IntlString
   },
   icon: {
     Table: '' as Asset,

plugins/workbench-resources/src/components/Workbench.svelte

@@ -35,6 +35,7 @@
     Button,
     CompAndProps,
     Component,
+    Dock,
     IconSettings,
     Label,
     Location,
@@ -852,6 +853,7 @@
   </Popup>
   <ComponentExtensions extension={workbench.extensions.WorkbenchExtensions} />
   <BrowserNotificatator />
+  <Dock />
 {/if}
 
 <style lang="scss">