Fixed colors and icon in LOVE (#7270)

This commit is contained in:
Alexander Platov 2024-12-06 04:16:47 +03:00 committed by GitHub
parent 6256f8b02d
commit e9c6f408a8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 31 additions and 31 deletions

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

@ -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);
}
}