The alarm button in the sidebar for the Meeting (#7260)

Signed-off-by: Alexander Platov <alexander.platov@hardcoreeng.com>

models/love/src/index.ts

@@ -288,7 +288,8 @@ export function createModel (builder: Builder): void {
       label: love.string.Meeting,
       type: WidgetType.Flexible,
       icon: love.icon.Cam,
-      component: love.component.MeetingWidget
+      component: love.component.MeetingWidget,
+      switcherComponent: love.component.WidgetSwitcher
     },
     love.ids.MeetingWidget
   )

models/love/src/plugin.ts

@@ -27,7 +27,8 @@ export default mergeIds(loveId, love, {
     WorkbenchExtension: '' as AnyComponent,
     Settings: '' as AnyComponent,
     LoveWidget: '' as AnyComponent,
-    MeetingWidget: '' as AnyComponent
+    MeetingWidget: '' as AnyComponent,
+    WidgetSwitcher: '' as AnyComponent
   },
   app: {
     Love: '' as Ref<Doc>

models/workbench/src/index.ts

@@ -81,6 +81,7 @@ export class TWidget extends TDoc implements Widget {
 
   component!: AnyComponent
   tabComponent?: AnyComponent
+  switcherComponent?: AnyComponent
   headerLabel?: IntlString
 
   closeIfNoTabs?: boolean

plugins/love-resources/src/components/widget/WidgetSwitcher.svelte

@@ -0,0 +1,34 @@
+<!--
+// 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 type { Asset, IntlString } from '@hcengineering/platform'
+  import type { AnySvelteComponent } from '@hcengineering/ui'
+  import { AppItem } from '@hcengineering/workbench-resources'
+  import { isConnected, screenSharing } from '../../utils'
+
+  export let label: IntlString
+  export let icon: Asset | AnySvelteComponent
+  export let selected: boolean = false
+  export let size: 'small' | 'medium' | 'large' = 'small'
+</script>
+
+<AppItem
+  {label}
+  {icon}
+  {selected}
+  {size}
+  kind={$screenSharing && !selected ? 'negative' : $isConnected && !selected ? 'positive' : 'default'}
+  on:click
+/>

plugins/love-resources/src/index.ts

@@ -11,6 +11,7 @@ import Settings from './components/Settings.svelte'
 import WorkbenchExtension from './components/WorkbenchExtension.svelte'
 import LoveWidget from './components/LoveWidget.svelte'
 import MeetingWidget from './components/widget/MeetingWidget.svelte'
+import WidgetSwitcher from './components/widget/WidgetSwitcher.svelte'
 import MeetingMinutesPresenter from './components/MeetingMinutesPresenter.svelte'
 import MeetingMinutesSection from './components/MeetingMinutesSection.svelte'
 import EditMeetingMinutes from './components/EditMeetingMinutes.svelte'
@@ -47,6 +48,7 @@ export default async (): Promise<Resources> => ({
     EditMeetingData,
     LoveWidget,
     MeetingWidget,
+    WidgetSwitcher,
     MeetingMinutesPresenter,
     MeetingMinutesSection,
     EditMeetingMinutes,

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

@@ -21,13 +21,14 @@
   export let icon: Asset | AnySvelteComponent
   export let selected: boolean = false
   export let size: 'small' | 'medium' | 'large' = 'large'
+  export let kind: 'default' | 'positive' | 'negative' = 'default'
   export let loading: boolean = false
   export let notify: boolean = false
   export let navigator: boolean = false
 </script>
 
 <button
-  class="app {size}"
+  class="app {size} {kind}"
   class:loading
   class:selected
   class:navigator
@@ -104,6 +105,36 @@
     &.navigator {
       border-color: var(--theme-button-border);
     }
+    &.positive {
+      background-color: var(--positive-button-default);
+      &:hover {
+        background-color: var(--positive-button-hovered);
+      }
+      &:active,
+      &.selected {
+        background-color: var(--positive-button-pressed);
+      }
+      &.selected:hover {
+        background-color: var(--positive-button-focused);
+      }
+    }
+    &.negative {
+      background-color: var(--negative-button-default);
+      &:hover {
+        background-color: var(--negative-button-hovered);
+      }
+      &:active,
+      &.selected {
+        background-color: var(--negative-button-pressed);
+      }
+      &.selected:hover {
+        background-color: var(--negative-button-focused);
+      }
+    }
+    &.positive .icon-container,
+    &.negative .icon-container {
+      color: var(--theme-caption-color);
+    }
   }
 
   .marker {

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

@@ -636,10 +636,10 @@
 
   $deviceInfo.navigator.float = !(workbenchWidth < 1024)
   const checkWorkbenchWidth = (): void => {
-    if (workbenchWidth <= 1024 && !$deviceInfo.navigator.float && $deviceInfo.navigator.visible) {
+    if (workbenchWidth <= 720 && !$deviceInfo.navigator.float && $deviceInfo.navigator.visible) {
       $deviceInfo.navigator.visible = false
       $deviceInfo.navigator.float = true
-    } else if (workbenchWidth > 1024 && $deviceInfo.navigator.float) {
+    } else if (workbenchWidth > 720 && $deviceInfo.navigator.float) {
       if (getMetadata(workbench.metadata.NavigationExpandedDefault) === undefined) {
         $deviceInfo.navigator.float = false
         $deviceInfo.navigator.visible = true

plugins/workbench-resources/src/components/sidebar/widgets/WidgetPresenter.svelte

@@ -14,7 +14,7 @@
 -->
 <script lang="ts">
   import { Widget } from '@hcengineering/workbench'
-  import { Label } from '@hcengineering/ui'
+  import { Label, Component } from '@hcengineering/ui'
 
   import AppItem from '../../AppItem.svelte'
 
@@ -24,7 +24,11 @@
 </script>
 
 <div class="root">
-  <AppItem label={widget.label} icon={widget.icon} selected={highlighted} size="small" on:click />
+  <Component
+    is={widget.switcherComponent ?? AppItem}
+    props={{ label: widget.label, icon: widget.icon, selected: highlighted, size: 'small' }}
+    on:click
+  />
   {#if withLabel}
     <Label label={widget.label} />
   {/if}

plugins/workbench-resources/src/index.ts

@@ -38,6 +38,7 @@ export { default as SpecialElement } from './components/navigator/SpecialElement
 export { default as SpaceView } from './components/SpaceView.svelte'
 export { default as TreeSeparator } from './components/navigator/TreeSeparator.svelte'
 export { default as WorkbenchTabs } from './components/WorkbenchTabs.svelte'
+export { default as AppItem } from './components/AppItem.svelte'
 export { SpecialView }
 
 export * from './utils'

plugins/workbench/src/index.ts

@@ -76,6 +76,7 @@ export interface Widget extends Doc {
 
   component: AnyComponent
   tabComponent?: AnyComponent
+  switcherComponent?: AnyComponent
   headerLabel?: IntlString
 
   closeIfNoTabs?: boolean

tests/sanity/tests/chat/chat.spec.ts

@@ -537,7 +537,7 @@ test.describe('Channel tests', () => {
     })
 
     await test.step('Open general in sidebar too', async () => {
-      await channelPage.makeActionWithChannelInMenu('general', 'Open in sidebar', true)
+      await channelPage.makeActionWithChannelInMenu('general', 'Open in sidebar')
       await sidebarPage.checkIfSidebarHasVerticalTab(true, data.channelName)
       await sidebarPage.checkIfSidebarHasVerticalTab(true, 'general')
       await sidebarPage.checkIfChatSidebarTabIsOpen(true, 'general')
@@ -593,7 +593,7 @@ test.describe('Channel tests', () => {
     })
 
     await test.step('User go to another chat and Sidebar with tread disappears', async () => {
-      await channelPage.appsMenuButton().click()
+      await channelPage.openNavigator()
       await channelPage.clickChannel('random')
       await sidebarPage.checkIfSidebarIsOpen(false)
     })

tests/sanity/tests/model/channel-page.ts

@@ -302,12 +302,8 @@ export class ChannelPage extends CommonPage {
     await expect(this.buttonBreadcrumb(channel)).toBeVisible()
   }
 
-  async makeActionWithChannelInMenu (
-    channelName: string,
-    action: string,
-    openNavigator: boolean = false
-  ): Promise<void> {
-    if (openNavigator) await this.appsMenuButton().click()
+  async makeActionWithChannelInMenu (channelName: string, action: string): Promise<void> {
+    await this.openNavigator()
     await this.channelContainers().filter({ hasText: channelName }).hover()
     await this.channelContainers().filter({ hasText: channelName }).locator('.hulyNavItem-actions').click()
     await this.selectFromDropdown(this.page, action)

tests/sanity/tests/model/common-page.ts

@@ -91,7 +91,12 @@ export class CommonPage {
 
   submitButton = (): Locator => this.page.locator('div.date-popup-container button[type="submit"]')
   buttonBreadcrumb = (hasText?: string): Locator => this.page.locator('button.hulyBreadcrumb-container', { hasText })
-  appsMenuButton = (): Locator => this.page.locator('[id="app-workbench\\:string\\:ShowMenu"]')
+  appsShowMenuButton = (): Locator => this.page.locator('[id="app-workbench\\:string\\:ShowMenu"]')
+
+  async openNavigator (): Promise<void> {
+    const needOpenNavigator = await this.appsShowMenuButton().isVisible()
+    if (needOpenNavigator) await this.appsShowMenuButton().click()
+  }
 
   async selectMenuItem (page: Page, name: string, fullWordFilter: boolean = false): Promise<void> {
     if (name !== 'first') {