Merge remote-tracking branch 'origin/develop' into staging

Signed-off-by: Andrey Sobolev <haiodo@gmail.com>
This commit is contained in:
Andrey Sobolev 2024-12-06 11:35:34 +07:00
commit 174302f83c
No known key found for this signature in database
GPG Key ID: BD80F68D68D8F7F2
6 changed files with 69 additions and 46 deletions

View File

@ -84,6 +84,14 @@ select:-webkit-autofill:focus {
background: transparent;
}
// Fix for iOS (disable zooming on input fields)
@media screen and (-webkit-min-device-pixel-ratio: 0) and (max-width: 480px) {
select,
textarea,
input,
div.ref-container div.select-text > div[contenteditable="true"] { font-size: 16px; }
}
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;

View File

@ -17,7 +17,7 @@
Breadcrumbs,
Header,
BreadcrumbItem,
IconScaleFull,
IconMaximize,
ButtonIcon,
showPopup,
PopupResult
@ -57,7 +57,7 @@
<Breadcrumbs items={breadcrumbs} currentOnly />
<svelte:fragment slot="actions">
{#if ($currentRoom !== undefined && $screenSharing) || $currentRoom?.type === RoomType.Video}
<ButtonIcon icon={IconScaleFull} kind="tertiary" size="small" noPrint on:click={maximize} />
<ButtonIcon icon={IconMaximize} kind="tertiary" size="small" noPrint on:click={maximize} />
{/if}
</svelte:fragment>
</Header>

View File

@ -16,7 +16,7 @@
import type { Asset, IntlString } from '@hcengineering/platform'
import type { AnySvelteComponent } from '@hcengineering/ui'
import { AppItem } from '@hcengineering/workbench-resources'
import { isConnected, screenSharing } from '../../utils'
import { isConnected, isSharingEnabled, isCameraEnabled, isMicEnabled } from '../../utils'
export let label: IntlString
export let icon: Asset | AnySvelteComponent
@ -29,6 +29,14 @@
{icon}
{selected}
{size}
kind={$screenSharing && !selected ? 'negative' : $isConnected && !selected ? 'positive' : 'default'}
kind={$isSharingEnabled
? 'negative'
: $isConnected && $isCameraEnabled
? 'positive'
: $isConnected && $isMicEnabled
? 'warning'
: $isConnected && !($isCameraEnabled && $isMicEnabled)
? 'accented'
: 'default'}
on:click
/>

View File

@ -139,5 +139,12 @@
min-width: 0;
min-height: 0;
z-index: 10001;
@media screen and (max-width: 480px) {
position: fixed;
left: var(--spacing-1);
width: calc(100vw - var(--spacing-1) * 2);
height: 10rem;
}
}
</style>

View File

@ -21,7 +21,7 @@
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 kind: 'default' | 'positive' | 'negative' | 'warning' | 'accented' = 'default'
export let loading: boolean = false
export let notify: boolean = false
export let navigator: boolean = false
@ -105,35 +105,27 @@
&.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);
}
&.positive,
&.positive.selected {
background-color: var(--global-online-color);
}
&.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);
}
&.negative,
&.negative.selected {
background-color: var(--button-negative-BackgroundColor);
}
&.warning,
&.warning.selected {
background-color: var(--theme-warning-color);
}
&.accented,
&.accented.selected {
background-color: var(--global-disabled-PriorityColor);
}
&.positive .icon-container,
&.negative .icon-container {
color: var(--theme-caption-color);
&.negative .icon-container,
&.warning .icon-container,
&.accented .icon-container {
color: var(--primary-button-color);
}
}

View File

@ -125,6 +125,8 @@
} from '../workbench'
import { get } from 'svelte/store'
const HIDE_NAVIGATOR = 720
const HIDE_ASIDE = 1024
let contentPanel: HTMLElement
const { setTheme } = getContext<{ setTheme: (theme: string) => void }>('theme')
@ -164,7 +166,7 @@
async function toggleNav (): Promise<void> {
$deviceInfo.navigator.visible = !$deviceInfo.navigator.visible
closeTooltip()
if (currentApplication && navigatorModel && navigator) {
if (currentApplication && navigatorModel) {
await tick()
panelInstance.fitPopupInstance()
popupInstance.fitPopupInstance()
@ -634,12 +636,12 @@
let cover: HTMLElement
let workbenchWidth: number = $deviceInfo.docWidth
$deviceInfo.navigator.float = !(workbenchWidth < 1024)
$deviceInfo.navigator.float = workbenchWidth <= HIDE_NAVIGATOR
const checkWorkbenchWidth = (): void => {
if (workbenchWidth <= 720 && !$deviceInfo.navigator.float && $deviceInfo.navigator.visible) {
if (workbenchWidth <= HIDE_NAVIGATOR && !$deviceInfo.navigator.float && $deviceInfo.navigator.visible) {
$deviceInfo.navigator.visible = false
$deviceInfo.navigator.float = true
} else if (workbenchWidth > 720 && $deviceInfo.navigator.float) {
} else if (workbenchWidth > HIDE_NAVIGATOR && $deviceInfo.navigator.float) {
if (getMetadata(workbench.metadata.NavigationExpandedDefault) === undefined) {
$deviceInfo.navigator.float = false
$deviceInfo.navigator.visible = true
@ -647,17 +649,17 @@
}
}
checkWorkbenchWidth()
$: if ($deviceInfo.docWidth <= 1024 && !$deviceInfo.aside.float) {
$: if ($deviceInfo.docWidth <= HIDE_ASIDE && !$deviceInfo.aside.float) {
$deviceInfo.aside.visible = false
$deviceInfo.aside.float = true
} else if ($deviceInfo.docWidth > 1024 && $deviceInfo.aside.float) {
} else if ($deviceInfo.docWidth > HIDE_ASIDE && $deviceInfo.aside.float) {
if (getMetadata(workbench.metadata.NavigationExpandedDefault) === undefined) {
$deviceInfo.aside.float = false
$deviceInfo.aside.visible = true
}
}
const checkOnHide = (): void => {
if ($deviceInfo.navigator.visible && workbenchWidth <= 1024) $deviceInfo.navigator.visible = false
if ($deviceInfo.navigator.visible && $deviceInfo.navigator.float) $deviceInfo.navigator.visible = false
}
let oldNavVisible: boolean = $deviceInfo.navigator.visible
let oldASideVisible: boolean = $deviceInfo.aside.visible
@ -742,7 +744,7 @@
defineSeparators('workbench', workbenchSeparators)
defineSeparators('main', mainSeparators)
$: mainNavigator = currentApplication && navigatorModel && navigator && $deviceInfo.navigator.visible
$: mainNavigator = currentApplication && navigatorModel && $deviceInfo.navigator.visible
$: elementPanel = $deviceInfo.replacedPanel ?? contentPanel
$: deactivated =
@ -818,7 +820,11 @@
/>
</div>
<!-- <ActivityStatus status="active" /> -->
<NavLink app={notificationId} shrink={0}>
<NavLink
app={notificationId}
shrink={0}
disabled={!$deviceInfo.navigator.visible && $deviceInfo.navigator.float && currentAppAlias === notificationId}
>
<AppItem
icon={notification.icon.Notifications}
label={notification.string.Inbox}
@ -827,7 +833,9 @@
$deviceInfo.navigator.visible}
on:click={(e) => {
if (e.metaKey || e.ctrlKey) return
if (currentAppAlias === notificationId && lastLoc !== undefined) {
if (!$deviceInfo.navigator.visible && $deviceInfo.navigator.float && currentAppAlias === notificationId) {
toggleNav()
} else if (currentAppAlias === notificationId && lastLoc !== undefined) {
e.preventDefault()
e.stopPropagation()
navigate(lastLoc)
@ -911,12 +919,12 @@
checkWorkbenchWidth()
}}
>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
{#if $deviceInfo.navigator.float && $deviceInfo.navigator.visible}
<div class="cover shown" on:click={() => ($deviceInfo.navigator.visible = false)} />
{/if}
{#if mainNavigator}
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
{#if $deviceInfo.navigator.float}
<div class="cover shown" on:click={() => ($deviceInfo.navigator.visible = false)} />
{/if}
<div
class="antiPanel-navigator no-print {$deviceInfo.navigator.direction === 'horizontal'
? 'portrait'