From 9451aafa826c8e542045c35c7005836ce1662c10 Mon Sep 17 00:00:00 2001 From: Denis Bykhov Date: Tue, 8 Nov 2022 22:28:38 +0600 Subject: [PATCH] Mobile open panel & minor fixes (#2363) Signed-off-by: Denis Bykhov --- plugins/client-resources/src/connection.ts | 2 +- .../src/components/SkillsView.svelte | 1 + .../src/components/VacancyCard.svelte | 1 + .../src/components/Workbench.svelte | 47 +++-------- plugins/workbench-resources/src/mobile.ts | 81 +++++++++++++++++++ 5 files changed, 93 insertions(+), 39 deletions(-) create mode 100644 plugins/workbench-resources/src/mobile.ts diff --git a/plugins/client-resources/src/connection.ts b/plugins/client-resources/src/connection.ts index 04a718fb3b..ff0c1b8172 100644 --- a/plugins/client-resources/src/connection.ts +++ b/plugins/client-resources/src/connection.ts @@ -153,7 +153,7 @@ class Connection implements ClientConnection { ) } websocket.onerror = (event: any) => { - console.log('client websocket error', event) + console.log('client websocket error', JSON.stringify(event)) reject(new Error('websocket error')) } }) diff --git a/plugins/recruit-resources/src/components/SkillsView.svelte b/plugins/recruit-resources/src/components/SkillsView.svelte index 2c9c266ab0..d7eb394b1c 100644 --- a/plugins/recruit-resources/src/components/SkillsView.svelte +++ b/plugins/recruit-resources/src/components/SkillsView.svelte @@ -6,6 +6,7 @@ function onTag (tag: TagElement): void { selectedTagElements.set([tag._id]) const loc = getCurrentLocation() + loc.path[2] = 'recruit' loc.path[3] = 'candidates' loc.path.length = 4 navigate(loc) diff --git a/plugins/recruit-resources/src/components/VacancyCard.svelte b/plugins/recruit-resources/src/components/VacancyCard.svelte index 700b1c2a24..6b29e46f41 100644 --- a/plugins/recruit-resources/src/components/VacancyCard.svelte +++ b/plugins/recruit-resources/src/components/VacancyCard.svelte @@ -88,6 +88,7 @@ closePopup() closePanel() const loc = getCurrentLocation() + loc.path[2] = 'recruit' loc.path[3] = vacancy._id loc.path.length = 4 navigate(loc) diff --git a/plugins/workbench-resources/src/components/Workbench.svelte b/plugins/workbench-resources/src/components/Workbench.svelte index b74bf00782..ed0197da72 100644 --- a/plugins/workbench-resources/src/components/Workbench.svelte +++ b/plugins/workbench-resources/src/components/Workbench.svelte @@ -17,36 +17,36 @@ import contact, { Employee, EmployeeAccount } from '@hcengineering/contact' import core, { Class, Client, Doc, getCurrentAccount, Ref, setCurrentAccount, Space } from '@hcengineering/core' import notification, { NotificationStatus } from '@hcengineering/notification' - import { NotificationClientImpl, BrowserNotificatator } from '@hcengineering/notification-resources' + import { BrowserNotificatator, NotificationClientImpl } from '@hcengineering/notification-resources' import { getMetadata, getResource, IntlString } from '@hcengineering/platform' import { Avatar, createQuery, setClient } from '@hcengineering/presentation' import { AnyComponent, + areLocationsEqual, closePopup, closeTooltip, Component, DatePickerPopup, + deviceOptionsStore as deviceInfo, getCurrentLocation, Label, location, Location, - areLocationsEqual, navigate, PanelInstance, Popup, + PopupPosAlignment, resizeObserver, showPopup, - TooltipInstance, - PopupPosAlignment, - checkMobile, - deviceOptionsStore as deviceInfo + TooltipInstance } from '@hcengineering/ui' import view from '@hcengineering/view' import { ActionContext, ActionHandler } from '@hcengineering/view-resources' import type { Application, NavigatorModel, SpecialNavModel, ViewConfiguration } from '@hcengineering/workbench' import { getContext, onDestroy, onMount, tick } from 'svelte' - import { doNavigate } from '../utils' + import { subscribeMobile } from '../mobile' import workbench from '../plugin' + import { doNavigate } from '../utils' import AccountPopup from './AccountPopup.svelte' import AppItem from './AppItem.svelte' import Applications from './Applications.svelte' @@ -58,6 +58,7 @@ export let client: Client let contentPanel: HTMLElement + const { setTheme } = getContext('theme') as any setClient(client) NotificationClientImpl.createClient() @@ -138,9 +139,6 @@ onDestroy( location.subscribe(async (loc) => { - if (window.nsWebViewBridge !== undefined) { - window.nsWebViewBridge.emit('navigate', JSON.stringify(loc)) - } closeTooltip() closePopup() @@ -394,34 +392,7 @@ ? 'account-mobile' : 'account' - onMount(() => { - if (checkMobile()) { - onmessage = (event: MessageEvent) => { - try { - const data = JSON.parse(event.data) - if (data.action === 'navigate') { - const location = getCurrentLocation() - location.path.length = 3 - location.path[2] = data.value.path[0] - if (data.value.path[1] !== undefined) { - location.path[3] = data.value.path[1] - } - if (data.value.path[2] !== undefined) { - location.path[4] = data.value.path[2] - } - location.fragment = undefined - location.query = undefined - navigate(location) - } else if (data.action === 'theme') { - const { setTheme } = getContext('theme') as any - setTheme(`theme-${data.value}`) - } - } catch (err) { - console.log(`Couldn't recognize event ${JSON.stringify(event)}`) - } - } - } - }) + onMount(() => subscribeMobile(setTheme)) {#if employee?.active === true} diff --git a/plugins/workbench-resources/src/mobile.ts b/plugins/workbench-resources/src/mobile.ts new file mode 100644 index 0000000000..60984298d0 --- /dev/null +++ b/plugins/workbench-resources/src/mobile.ts @@ -0,0 +1,81 @@ +// +// Copyright © 2022 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. +// + +import { getCurrentLocation, location, navigate } from '@hcengineering/ui' +import { onDestroy } from 'svelte' + +interface Message { + action: 'navigate' | 'theme' + value: any +} + +interface ThemeMessage extends Message { + action: 'theme' + value: string +} + +interface NavigateMessage extends Message { + action: 'navigate' + value: NavigateMessageValue +} + +interface NavigateMessageValue { + path: string[] + fragment?: string +} + +interface Bridge { + on: (eventName: string, callback: (data: any) => void) => any + emit: (eventName: string, data: any) => void +} + +type MobileNSWindow = Window & + typeof globalThis & { + nsWebViewBridge: Bridge +} + +type SetTheme = (theme: string) => void + +export function subscribeMobile (setTheme: SetTheme): void { + const webView = window as MobileNSWindow + if (webView.nsWebViewBridge !== undefined) { + webView.nsWebViewBridge.on('message', (e) => handleMessage(e, setTheme)) + + onDestroy( + location.subscribe((loc) => { + webView.nsWebViewBridge.emit('navigate', JSON.stringify(loc)) + }) + ) + } +} + +function handleMessage (data: ThemeMessage | NavigateMessage, setTheme: SetTheme): void { + if (data.action === 'navigate') { + const location = getCurrentLocation() + location.path.length = 3 + location.path[2] = data.value.path[0] + if (data.value.path[1] !== undefined) { + location.path[3] = data.value.path[1] + } + if (data.value.path[2] !== undefined) { + location.path[4] = data.value.path[2] + } + location.fragment = data.value.fragment + location.query = undefined + navigate(location) + } else if (data.action === 'theme') { + setTheme(`theme-${data.value}`) + } +}