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, Breadcrumbs,
Header, Header,
BreadcrumbItem, BreadcrumbItem,
IconScaleFull, IconMaximize,
ButtonIcon, ButtonIcon,
showPopup, showPopup,
PopupResult PopupResult
@ -57,7 +57,7 @@
<Breadcrumbs items={breadcrumbs} currentOnly /> <Breadcrumbs items={breadcrumbs} currentOnly />
<svelte:fragment slot="actions"> <svelte:fragment slot="actions">
{#if ($currentRoom !== undefined && $screenSharing) || $currentRoom?.type === RoomType.Video} {#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} {/if}
</svelte:fragment> </svelte:fragment>
</Header> </Header>

View File

@ -16,7 +16,7 @@
import type { Asset, IntlString } from '@hcengineering/platform' import type { Asset, IntlString } from '@hcengineering/platform'
import type { AnySvelteComponent } from '@hcengineering/ui' import type { AnySvelteComponent } from '@hcengineering/ui'
import { AppItem } from '@hcengineering/workbench-resources' import { AppItem } from '@hcengineering/workbench-resources'
import { isConnected, screenSharing } from '../../utils' import { isConnected, isSharingEnabled, isCameraEnabled, isMicEnabled } from '../../utils'
export let label: IntlString export let label: IntlString
export let icon: Asset | AnySvelteComponent export let icon: Asset | AnySvelteComponent
@ -29,6 +29,14 @@
{icon} {icon}
{selected} {selected}
{size} {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 on:click
/> />

View File

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