mirror of
https://github.com/hcengineering/platform.git
synced 2024-12-23 11:31:57 +03:00
Updated office layout (#5051)
Signed-off-by: Alexander Platov <alexander.platov@hardcoreeng.com>
This commit is contained in:
parent
32d7c3bdae
commit
2387c52897
@ -810,6 +810,10 @@ input.search {
|
||||
&:active { color: var(--theme-caption-color); }
|
||||
}
|
||||
|
||||
.will-change-opacity {
|
||||
will-change: opacity;
|
||||
}
|
||||
|
||||
/* Link */
|
||||
a.no-line {
|
||||
text-decoration: none;
|
||||
|
@ -45,8 +45,10 @@
|
||||
}
|
||||
.hulyComponent-content {
|
||||
flex-shrink: 0;
|
||||
max-width: 64rem;
|
||||
|
||||
&:not(.withoutMaxWidth) {
|
||||
max-width: 64rem;
|
||||
}
|
||||
&.gap {
|
||||
gap: var(--spacing-4);
|
||||
}
|
||||
@ -315,6 +317,9 @@
|
||||
border: none;
|
||||
outline: none;
|
||||
|
||||
&.disabled {
|
||||
cursor: default;
|
||||
}
|
||||
&__label-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -372,6 +377,25 @@
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
&.categoryHeader {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
&.selectable.large {
|
||||
.hulyAccordionItem-header__label-wrapper {
|
||||
gap: var(--spacing-0_25);
|
||||
}
|
||||
.hulyAccordionItem-header__label {
|
||||
padding: var(--spacing-0_5) var(--spacing-1);
|
||||
border-radius: var(--extra-small-BorderRadius);
|
||||
}
|
||||
&.selected .hulyAccordionItem-header__label,
|
||||
.hulyAccordionItem-header__label:hover {
|
||||
background-color: var(--global-ui-hover-BackgroundColor);
|
||||
}
|
||||
}
|
||||
|
||||
&.small,
|
||||
&.medium {
|
||||
padding: var(--spacing-1) var(--spacing-2);
|
||||
|
@ -38,11 +38,21 @@
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
.hulyNavPanel-header {
|
||||
padding: 1rem 1.25rem 1.5rem;
|
||||
flex-shrink: 0;
|
||||
font-weight: 700;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.5rem;
|
||||
color: var(--global-primary-TextColor);
|
||||
|
||||
&:not(.withButton) { padding: 1rem 1.25rem 1.5rem; }
|
||||
&.withButton {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: .75rem .75rem 1.5rem 1.25rem;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
&.small { padding-bottom: .75rem; }
|
||||
}
|
||||
.hulySidePanel-container {
|
||||
display: flex;
|
||||
|
@ -14,6 +14,7 @@
|
||||
-->
|
||||
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from 'svelte'
|
||||
import type { Asset, IntlString } from '@hcengineering/platform'
|
||||
import type { ComponentType } from 'svelte'
|
||||
import type { AnySvelteComponent } from '../types'
|
||||
@ -30,17 +31,25 @@
|
||||
export let size: 'small' | 'medium' | 'large'
|
||||
export let kind: 'default' | 'second' = 'default'
|
||||
export let nested: boolean = false
|
||||
export let isOpen: boolean = false
|
||||
export let disabled: boolean = false
|
||||
export let selected: boolean = false
|
||||
export let selectable: boolean = false
|
||||
export let bottomSpace: boolean = true
|
||||
export let counter: number | boolean = false
|
||||
export let duration: number | boolean = false
|
||||
export let fixHeader: boolean = false
|
||||
export let categoryHeader: boolean = false
|
||||
export let background: string | undefined = undefined
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
let collapsed: boolean = getTreeCollapsed(id)
|
||||
if (isOpen) collapsed = false
|
||||
$: setTreeCollapsed(id, collapsed)
|
||||
|
||||
function handleClick (): void {
|
||||
if (disabled) return
|
||||
collapsed = !collapsed
|
||||
}
|
||||
</script>
|
||||
@ -50,11 +59,14 @@
|
||||
class="hulyAccordionItem-header {kind} {size}"
|
||||
class:bottomSpace
|
||||
class:nested
|
||||
class:disabled
|
||||
class:isOpen={!collapsed}
|
||||
class:selected
|
||||
class:selectable
|
||||
class:scroller-header={fixHeader}
|
||||
class:categoryHeader
|
||||
style:background-color={background ?? 'transparent'}
|
||||
on:click={handleClick}
|
||||
on:click|stopPropagation={handleClick}
|
||||
>
|
||||
<div
|
||||
class="hulyAccordionItem-header__label-wrapper {size === 'large' ? 'heading-medium-16' : 'font-medium-12'}"
|
||||
@ -70,11 +82,19 @@
|
||||
<Icon {icon} size={size === 'medium' ? 'small' : 'medium'} {iconProps} />
|
||||
</div>
|
||||
{/if}
|
||||
<span class="hulyAccordionItem-header__label">
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<div
|
||||
class="hulyAccordionItem-header__label"
|
||||
on:click|stopPropagation={() => {
|
||||
if (selectable) dispatch('select')
|
||||
else handleClick()
|
||||
}}
|
||||
>
|
||||
{#if label}<Label {label} />{/if}
|
||||
{#if title}{title}{/if}
|
||||
<slot name="title" />
|
||||
</span>
|
||||
</div>
|
||||
{#if counter !== false}
|
||||
<span class="hulyAccordionItem-header__separator">•</span>
|
||||
<span class="hulyAccordionItem-header__counter">
|
||||
|
@ -88,7 +88,7 @@
|
||||
class:menu={hasMenu}
|
||||
disabled={loading || disabled}
|
||||
use:tp={tooltip}
|
||||
on:click
|
||||
on:click|stopPropagation
|
||||
on:keydown
|
||||
>
|
||||
{#if loading}
|
||||
|
@ -17,7 +17,8 @@
|
||||
import type { AnyComponent } from '..'
|
||||
import { Label, Component } from '..'
|
||||
|
||||
export let label: IntlString
|
||||
export let label: IntlString | undefined = undefined
|
||||
export let title: string | undefined = undefined
|
||||
export let categoryName: string
|
||||
export let tools: AnyComponent | undefined = undefined
|
||||
export let isOpen: boolean = true
|
||||
@ -31,11 +32,13 @@
|
||||
<button class="hulyAccordionItem-header nav small" class:isOpen class:selected on:click={() => (isOpen = !isOpen)}>
|
||||
<div class="hulyAccordionItem-header__label-wrapper font-medium-12">
|
||||
<span class="hulyAccordionItem-header__label">
|
||||
<Label {label} />
|
||||
{#if label}<Label {label} />{/if}
|
||||
{#if title}{title}{/if}
|
||||
</span>
|
||||
</div>
|
||||
{#if tools}
|
||||
{#if tools || $$slots.tools}
|
||||
<div class="hulyAccordionItem-header__tools">
|
||||
{#if tools}
|
||||
<Component
|
||||
is={tools}
|
||||
props={{
|
||||
@ -43,6 +46,8 @@
|
||||
categoryName
|
||||
}}
|
||||
/>
|
||||
{/if}
|
||||
<slot name="tools" />
|
||||
</div>
|
||||
{/if}
|
||||
</button>
|
||||
|
@ -163,6 +163,7 @@ export const settingsSeparators: DefSeparators = [
|
||||
null,
|
||||
{ minSize: 19, size: 30, maxSize: 32, float: 'aside' }
|
||||
]
|
||||
export const loveSeparators: DefSeparators = [{ minSize: 26, size: 27, maxSize: 28, float: 'navigator' }, null]
|
||||
|
||||
export const secondNavSeparators: DefSeparators = [{ minSize: 7, size: 7.5, maxSize: 15, float: 'navigator' }, null]
|
||||
|
||||
|
@ -616,7 +616,7 @@
|
||||
defineSeparators('workbench', workbenchSeparators)
|
||||
|
||||
let modern: boolean
|
||||
$: modern = ['setting', 'time'].some((app) => currentApplication?.alias === app)
|
||||
$: modern = ['setting', 'time', 'love'].some((app) => currentApplication?.alias === app)
|
||||
</script>
|
||||
|
||||
{#if employee && !employee.active}
|
||||
|
Loading…
Reference in New Issue
Block a user