Updated LoveWidget layout (#7103)

This commit is contained in:
Alexander Platov 2024-11-05 06:54:23 +03:00 committed by GitHub
parent 3ea2659d9e
commit 585b3f40e7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
19 changed files with 50 additions and 60 deletions

View File

@ -461,9 +461,9 @@
}
.hulyModal-container {
height: 100%;
border-top: 1px solid transparent;
visibility: visible;
&:not(.noTopIndent) { border-top: 1px solid transparent; }
&.hidden {
visibility: hidden;
}

View File

@ -220,6 +220,7 @@
height: 100%;
min-width: 0;
min-height: 0;
border-right: 1px solid var(--theme-divider-color);
border-radius: 0 var(--small-focus-BorderRadius) var(--small-focus-BorderRadius) 0;
}

View File

@ -15,9 +15,7 @@
<script lang="ts">
import { Floor, Room } from '@hcengineering/love'
import { Ref } from '@hcengineering/core'
import { getEmbeddedLabel } from '@hcengineering/platform'
import ui, { Button, IconChevronLeft, ModernButton, Scroller } from '@hcengineering/ui'
import ui, { IconChevronLeft, ModernButton, Scroller } from '@hcengineering/ui'
import FloorPreview from './FloorPreview.svelte'
import { floors, rooms } from '../stores'
import IconLayers from './icons/Layers.svelte'
@ -44,26 +42,24 @@
}
</script>
<div class="root">
{#if floorsSelector}
{#each $floors as floor, i}
<Button
kind={'ghost'}
size={'large'}
on:click={() => {
selectFloor(floor._id)
}}
justify={'left'}
label={getEmbeddedLabel(floor.name)}
/>
{#if i !== $floors.length - 1}<div class="divider" />{/if}
{/each}
<div class="flex-row-center flex-reverse mt-4 w-full">
<ModernButton on:click={changeMode} icon={IconChevronLeft} label={ui.string.Back} />
</div>
{:else}
{#if selectedFloor}
<Scroller>
<div class="hulyModal-container noTopIndent type-aside">
<div class="hulyModal-content">
<Scroller>
{#if floorsSelector}
{#each $floors as _floor}
<FloorPreview
showRoomName
floor={_floor}
rooms={getRooms($rooms, _floor._id)}
selected={selectedFloor?._id === _floor._id}
kind={'no-border'}
background={'var(--theme-panel-color)'}
on:select={() => {
selectFloor(_floor._id)
}}
/>
{/each}
{:else if selectedFloor}
<FloorPreview
floor={selectedFloor}
showRoomName
@ -72,26 +68,19 @@
isOpen
disabled
cropped
size={'small'}
kind={'no-border'}
background={'var(--theme-popup-color)'}
background={'var(--theme-panel-color)'}
/>
</Scroller>
{/if}
{#if $floors.length > 1}
<div class="flex-row-center flex-reverse flex-no-shrink w-full mt-4 mr-2">
<ModernButton on:click={changeMode} icon={IconLayers} label={love.string.ChangeFloor} />
</div>
{/if}
{/if}
</Scroller>
</div>
{#if floorsSelector || $floors.length > 1}
<div class="hulyModal-footer">
<ModernButton
on:click={changeMode}
icon={floorsSelector ? IconChevronLeft : IconLayers}
label={floorsSelector ? ui.string.Back : love.string.ChangeFloor}
/>
</div>
{/if}
</div>
<style lang="scss">
.root {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
padding-bottom: 1rem;
}
</style>

View File

@ -61,7 +61,7 @@
</script>
<div class="hulyComponent">
<Header>
<Header adaptive={'disabled'}>
<Breadcrumb icon={love.icon.Love} label={love.string.Settings} size={'large'} isCurrent />
</Header>
<div class="flex-row-stretch flex-grow p-10">

View File

@ -97,7 +97,7 @@
</script>
<div class="hulyComponent">
<Header>
<Header adaptive={'disabled'}>
<Breadcrumb
icon={notification.icon.Notifications}
label={notification.string.Notifications}

View File

@ -102,7 +102,7 @@
<div class="hulyComponent">
{#if !withoutHeader}
<Header>
<Header adaptive={'disabled'}>
<Breadcrumb icon={setting.icon.Clazz} label={setting.string.ClassSetting} size={'large'} isCurrent />
</Header>
{/if}

View File

@ -28,7 +28,7 @@
</script>
<div class="hulyComponent">
<Header>
<Header adaptive={'disabled'}>
<Breadcrumb icon={setting.icon.Setting} label={setting.string.Configuration} size={'large'} isCurrent />
</Header>
<div class="hulyComponent-content__column content">

View File

@ -55,7 +55,7 @@
</script>
<div class="hulyComponent">
<Header>
<Header adaptive={'disabled'}>
<Breadcrumb icon={setting.icon.Enums} label={setting.string.Enums} size={'large'} isCurrent />
<svelte:fragment slot="actions">
<ModernButton

View File

@ -117,7 +117,7 @@
</script>
<div class="hulyComponent">
<Header>
<Header adaptive={'disabled'}>
<Breadcrumb icon={setting.icon.Setting} label={setting.string.General} size={'large'} isCurrent />
</Header>
<div class="hulyComponent-content__column content">

View File

@ -40,7 +40,7 @@
</script>
<div class="hulyComponent">
<Header>
<Header adaptive={'disabled'}>
<Breadcrumb icon={setting.icon.Integrations} label={setting.string.Integrations} size={'large'} isCurrent />
</Header>

View File

@ -57,7 +57,7 @@
</script>
<div class="hulyComponent">
<Header>
<Header adaptive={'disabled'}>
<Breadcrumb icon={setting.icon.InviteSettings} label={setting.string.InviteSettings} size={'large'} isCurrent />
</Header>
<div class="form">

View File

@ -52,7 +52,7 @@
</script>
<div class="hulyComponent">
<Header>
<Header adaptive={'disabled'}>
<Breadcrumb icon={setting.icon.Owners} label={setting.string.Owners} size={'large'} isCurrent />
<svelte:fragment slot="search">
<SearchInput bind:value={search} collapsed />

View File

@ -57,7 +57,7 @@
</script>
<div class="hulyComponent">
<Header>
<Header adaptive={'disabled'}>
<Breadcrumb icon={setting.icon.Password} label={setting.string.ChangePassword} size={'large'} isCurrent />
</Header>
<div class="flex-row-stretch flex-grow p-10">

View File

@ -77,7 +77,7 @@
<FocusHandler {manager} />
<div class="hulyComponent">
<Header>
<Header adaptive={'disabled'}>
<Breadcrumb icon={setting.icon.AccountSettings} label={setting.string.AccountSettings} size={'large'} isCurrent />
</Header>
<div class="ac-body p-10">

View File

@ -77,7 +77,7 @@
</script>
<div class="hulyComponent">
<Header>
<Header adaptive={'disabled'}>
<Breadcrumb icon={setting.icon.Views} label={setting.string.Spaces} size="large" isCurrent />
</Header>
<div class="hulyComponent-content__column content">

View File

@ -149,7 +149,7 @@
}}
>
{#if type !== undefined && descriptor !== undefined}
<Header>
<Header adaptive={'disabled'}>
<Breadcrumbs
items={bcItems}
size="large"

View File

@ -151,7 +151,7 @@
</script>
<div class="hulyComponent">
<Header>
<Header adaptive={'disabled'}>
<Breadcrumb
icon={templatesPlugin.icon.Templates}
label={templatesPlugin.string.Templates}

View File

@ -8,7 +8,7 @@
</script>
<div class="hulyComponent">
<Header>
<Header adaptive={'disabled'}>
<Breadcrumb icon={tracker.icon.Relations} label={tracker.string.RelatedIssues} size={'large'} isCurrent />
</Header>
<EditRelatedTargets {value} />

View File

@ -83,7 +83,7 @@
</script>
<div class="hulyComponent">
<Header>
<Header adaptive={'disabled'}>
<Breadcrumb icon={training.icon.Training} label={training.string.Trainings} size="large" isCurrent />
</Header>
<div class="hulyComponent-content__column content">