mirror of
https://github.com/hcengineering/platform.git
synced 2024-12-22 19:11:33 +03:00
Breaking long words in comments. CSS optimize. (#1023)
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov
GitHub
parent
546877b004
commit
c3d5f4cf57
@ -52,10 +52,12 @@
|
||||
<div class="ap-scroll">
|
||||
<div class="ap-box">
|
||||
{#each objects as person}
|
||||
<button class="ap-menuItem" on:click={() => { dispatch('close', person) }}>
|
||||
<button class="ap-menuItem withCheck" on:click={() => { dispatch('close', person) }}>
|
||||
<UserInfo size={'medium'} value={person} />
|
||||
{#if allowDeselect && person._id === selected}
|
||||
<ActionIcon direction={'top'} label={titleDeselect ?? presentation.string.Deselect} icon={IconBlueCheck} action={() => { dispatch('close', null) }} size={'small'}/>
|
||||
<div class="ap-check">
|
||||
<ActionIcon direction={'top'} label={titleDeselect ?? presentation.string.Deselect} icon={IconBlueCheck} action={() => { dispatch('close', null) }} size={'small'} />
|
||||
</div>
|
||||
{/if}
|
||||
</button>
|
||||
{/each}
|
||||
|
||||
@ -90,7 +90,10 @@ table {
|
||||
p:first-child { margin-block-start: 0; } // First and last padding
|
||||
p:last-child { margin-block-end: 0; }
|
||||
|
||||
.p-inline { line-height: 150%; }
|
||||
.p-inline {
|
||||
word-break: break-all;
|
||||
line-height: 150%;
|
||||
}
|
||||
|
||||
/* Flex */
|
||||
.flex { display: flex; }
|
||||
|
||||
@ -151,6 +151,41 @@
|
||||
}
|
||||
}
|
||||
|
||||
.ac-tabs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
flex-wrap: nowrap;
|
||||
margin: 0 2.5rem;
|
||||
min-width: 0;
|
||||
height: 4.5rem;
|
||||
border-bottom: 1px solid var(--theme-menu-divider);
|
||||
|
||||
&__tab {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
height: 4.5rem;
|
||||
font-weight: 500;
|
||||
color: var(--theme-content-trans-color);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
&.selected {
|
||||
border-top: .125rem solid transparent;
|
||||
border-bottom: .125rem solid var(--theme-caption-color);
|
||||
color: var(--theme-caption-color);
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
.ac-tabs__tab + .ac-tabs__tab { margin-left: 2.5rem; }
|
||||
|
||||
&__empty {
|
||||
min-width: 2.5rem;
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.ac-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@ -69,6 +69,7 @@
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
&.withCheck { justify-content: space-between; }
|
||||
|
||||
&:hover {
|
||||
color: var(--theme-caption-color);
|
||||
|
||||
@ -71,14 +71,14 @@
|
||||
<AttributesBar {object} keys={['dueTo', 'location', 'company']} />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-stretch tab-container">
|
||||
<div class="ac-tabs">
|
||||
{#each tabs as tab, i}
|
||||
<div class="flex-row-center tab" class:selected={i === selected}
|
||||
<div class="ac-tabs__tab" class:selected={i === selected}
|
||||
on:click={() => { selected = i }}>
|
||||
<Label label={tab}/>
|
||||
<Label label={tab} />
|
||||
</div>
|
||||
{/each}
|
||||
<div class="grow"/>
|
||||
<div class="ac-tabs__empty" />
|
||||
</div>
|
||||
{#if selected === 0}
|
||||
<Scroller padding>
|
||||
@ -114,42 +114,13 @@
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.tab-container {
|
||||
flex-shrink: 0;
|
||||
flex-wrap: nowrap;
|
||||
margin: 0 2.5rem;
|
||||
height: 4.5rem;
|
||||
border-bottom: 1px solid var(--theme-menu-divider);
|
||||
|
||||
.tab {
|
||||
height: 4.5rem;
|
||||
font-weight: 500;
|
||||
color: var(--theme-content-trans-color);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
&.selected {
|
||||
border-top: .125rem solid transparent;
|
||||
border-bottom: .125rem solid var(--theme-caption-color);
|
||||
color: var(--theme-caption-color);
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
.tab + .tab {
|
||||
margin-left: 2.5rem;
|
||||
}
|
||||
.grow {
|
||||
min-width: 2.5rem;
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
.description-container {
|
||||
margin-top: 0.5rem;
|
||||
display: flex;
|
||||
margin-top: .5rem;
|
||||
padding: 1rem;
|
||||
height: 12rem;
|
||||
border-radius: .25rem;
|
||||
background-color: var(--theme-bg-accent-color);
|
||||
border: 1px solid var(--theme-bg-accent-color);
|
||||
border-radius: .25rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
import type { Kanban, SpaceWithStates, State } from '@anticrm/task'
|
||||
import task from '@anticrm/task'
|
||||
import KanbanEditor from '../kanban/KanbanEditor.svelte'
|
||||
import { Icon, IconClose, Label, showPopup } from '@anticrm/ui'
|
||||
import { Icon, IconClose, Label, showPopup, ActionIcon, ScrollBox } from '@anticrm/ui'
|
||||
import { createEventDispatcher } from 'svelte'
|
||||
import workbench from '@anticrm/workbench'
|
||||
|
||||
@ -74,56 +74,26 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="overlay" on:click={() => { dispatch('close') }}/>
|
||||
<div class="flex-col floatdialog-container">
|
||||
<div class="flex-between header">
|
||||
<div class="flex-grow flex-col">
|
||||
<div class="flex-row-center">
|
||||
<div class="mr-2"><Icon icon={task.icon.ManageStatuses} size={'small'} /></div>
|
||||
<span class="fs-title overflow-label">
|
||||
<div class="antiOverlay" on:click={() => { dispatch('close') }}/>
|
||||
<div class="antiDialogs antiComponent">
|
||||
<div class="ac-header short mirror divide">
|
||||
<div class="ac-header__wrap-description">
|
||||
<div class="ac-header__wrap-title">
|
||||
<div class="ac-header__icon"><Icon icon={task.icon.ManageStatuses} size={'small'} /></div>
|
||||
<span class="ac-header__title">
|
||||
Manage application statuses within
|
||||
{#if spaceClassInstance}<Label label={spaceClassInstance?.label}/>{:else}...{/if}
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-sm content-dark-color overflow-label">{spaceInstance?.name}</div>
|
||||
{#if spaceInstance?.name }<span class="ac-header__description">{spaceInstance?.name}</span>{/if}
|
||||
</div>
|
||||
<div class="ml-4 content-accent-color cursor-pointer" on:click={() => dispatch('close')}><IconClose size={'small'} /></div>
|
||||
<div class="tool"><ActionIcon icon={IconClose} size={'small'} action={() => { dispatch('close') }} /></div>
|
||||
</div>
|
||||
<div class="flex-grow flex-col content">
|
||||
{#if kanban !== undefined}
|
||||
<KanbanEditor {kanban} on:delete={(e) => deleteState(e.detail)} />
|
||||
{/if}
|
||||
<div class="p-10 flex-grow">
|
||||
<ScrollBox vertical stretch>
|
||||
{#if kanban !== undefined}
|
||||
<KanbanEditor {kanban} on:delete={(e) => deleteState(e.detail)} />
|
||||
{/if}
|
||||
</ScrollBox>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.floatdialog-container {
|
||||
position: fixed;
|
||||
top: 32px;
|
||||
bottom: 1.25rem;
|
||||
right: 1rem;
|
||||
height: calc(100% - 32px - 1.25rem);
|
||||
background-color: var(--theme-bg-color);
|
||||
border-radius: 1.25rem;
|
||||
|
||||
.header {
|
||||
padding: 0 2rem 0 2.5rem;
|
||||
height: 4.5rem;
|
||||
min-height: 4.5rem;
|
||||
}
|
||||
.content {
|
||||
overflow: auto;
|
||||
margin: 1rem 2.5rem 1rem 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #000;
|
||||
opacity: .5;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -103,7 +103,7 @@
|
||||
showPopup(ColorsPopup, {}, elements[i], onColorChange(state))
|
||||
}}
|
||||
/>
|
||||
<div class="flex-grow caption-color"><AttributeEditor maxWidth={'13rem'} _class={state._class} object={state} key="title"/></div>
|
||||
<div class="flex-grow caption-color"><AttributeEditor maxWidth={'20rem'} _class={state._class} object={state} key="title"/></div>
|
||||
<div class="tool hover-trans"
|
||||
on:click={(ev) => {
|
||||
showPopup(StatusesPopup, { onDelete: () => dispatch('delete', { state }) }, ev.target, () => {})
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
import core from '@anticrm/core'
|
||||
import type { IntlString } from '@anticrm/platform'
|
||||
import { createQuery, getClient } from '@anticrm/presentation'
|
||||
import { EditBox, Grid, Icon, IconClose, Label } from '@anticrm/ui'
|
||||
import { EditBox, Grid, Icon, IconClose, Label, ActionIcon, Scroller } from '@anticrm/ui'
|
||||
import { createEventDispatcher } from 'svelte'
|
||||
|
||||
export let _id: Ref<Space>
|
||||
@ -53,131 +53,35 @@
|
||||
|
||||
</script>
|
||||
|
||||
<div class="overlay" on:click={() => { dispatch('close') }}/>
|
||||
<div class="dialog-container">
|
||||
<div class="flex-row-center header">
|
||||
<Icon icon={clazz.icon} size={'medium'} />
|
||||
<div class="flex-grow fs-title ml-2"><Label label={clazz.label} /></div>
|
||||
<div class="tool" on:click={() => { dispatch('close') }}><IconClose size={'small'} /></div>
|
||||
<div class="antiOverlay" on:click={() => { dispatch('close') }}/>
|
||||
<div class="antiDialogs antiComponent">
|
||||
<div class="ac-header short mirror divide">
|
||||
<div class="ac-header__wrap-title">
|
||||
<div class="ac-header__icon"><Icon icon={clazz.icon} size={'medium'} /></div>
|
||||
<div class="ac-header__title"><Label label={clazz.label} /></div>
|
||||
</div>
|
||||
<div class="tool"><ActionIcon icon={IconClose} size={'small'} action={() => { dispatch('close') }} /></div>
|
||||
</div>
|
||||
<!-- <div class="flex-row-center subtitle">
|
||||
Subtitle
|
||||
</div> -->
|
||||
<div class="flex-stretch tab-container">
|
||||
<div class="ac-tabs">
|
||||
{#each tabs as tab, i}
|
||||
<div class="flex-row-center tab" class:selected={i === selected}
|
||||
<div class="ac-tabs__tab" class:selected={i === selected}
|
||||
on:click={() => { selected = i }}>
|
||||
<Label label={tab}/>
|
||||
<Label label={tab} />
|
||||
</div>
|
||||
{/each}
|
||||
<div class="grow"/>
|
||||
<div class="ac-tabs__empty" />
|
||||
</div>
|
||||
<div class="scroll">
|
||||
<div class="flex-col box">
|
||||
{#if selected === 0}
|
||||
{#if space}
|
||||
<Grid column={1} rowGap={1.5}>
|
||||
<EditBox label={clazz.label} icon={clazz.icon} bind:value={space.name} placeholder={clazz.label} maxWidth="39rem" focus on:change={onNameChange}/>
|
||||
<!-- <AttributeBarEditor maxWidth="39rem" object={space} key="name"/> -->
|
||||
<!-- <ToggleWithLabel label={workbench.string.MakePrivate} description={workbench.string.MakePrivateDescription}/> -->
|
||||
</Grid>
|
||||
{/if}
|
||||
{:else}
|
||||
Members and other
|
||||
<Scroller padding>
|
||||
{#if selected === 0}
|
||||
{#if space}
|
||||
<Grid column={1} rowGap={1.5}>
|
||||
<EditBox label={clazz.label} icon={clazz.icon} bind:value={space.name} placeholder={clazz.label} maxWidth="39rem" focus on:change={onNameChange}/>
|
||||
<!-- <AttributeBarEditor maxWidth="39rem" object={space} key="name"/> -->
|
||||
<!-- <ToggleWithLabel label={workbench.string.MakePrivate} description={workbench.string.MakePrivateDescription}/> -->
|
||||
</Grid>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
Members and other
|
||||
{/if}
|
||||
</Scroller>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.dialog-container {
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
top: 32px;
|
||||
bottom: 1.25rem;
|
||||
left: 50%;
|
||||
right: 1rem;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100% - 32px - 1.25rem);
|
||||
background: var(--theme-dialog-bg-spec);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: var(--theme-dialog-shadow);
|
||||
backdrop-filter: blur(15px);
|
||||
|
||||
.header {
|
||||
flex-shrink: 0;
|
||||
padding: 0 2rem 0 2.5rem;
|
||||
height: 4.5rem;
|
||||
border-bottom: 1px solid var(--theme-dialog-divider);
|
||||
|
||||
.tool {
|
||||
margin-left: .75rem;
|
||||
color: var(--theme-content-accent-color);
|
||||
cursor: pointer;
|
||||
&:hover { color: var(--theme-caption-color); }
|
||||
}
|
||||
}
|
||||
|
||||
// .subtitle {
|
||||
// flex-shrink: 0;
|
||||
// padding: 0 2.5rem;
|
||||
// height: 3.5rem;
|
||||
// border-bottom: 1px solid var(--theme-dialog-divider);
|
||||
// }
|
||||
}
|
||||
|
||||
.tab-container {
|
||||
flex-shrink: 0;
|
||||
flex-wrap: nowrap;
|
||||
margin: 0 2.5rem;
|
||||
height: 4.5rem;
|
||||
border-bottom: 1px solid var(--theme-menu-divider);
|
||||
|
||||
.tab {
|
||||
height: 4.5rem;
|
||||
font-weight: 500;
|
||||
color: var(--theme-content-trans-color);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
&.selected {
|
||||
border-top: .125rem solid transparent;
|
||||
border-bottom: .125rem solid var(--theme-caption-color);
|
||||
color: var(--theme-caption-color);
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
.tab + .tab {
|
||||
margin-left: 2.5rem;
|
||||
}
|
||||
.grow {
|
||||
min-width: 2.5rem;
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.scroll {
|
||||
flex-grow: 1;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
margin: 1rem 0;
|
||||
padding: 1.5rem 2.5rem;
|
||||
|
||||
.box {
|
||||
margin-right: 1px;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--theme-menu-color);
|
||||
opacity: .6;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user