hcengineering/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2024-12-22 11:01:54 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UBER-573,-574: updated button styles, fixed ListView (#3484)

Browse Source 
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2023-07-07 08:33:55 +03:00 committed by GitHub
parent e7b6522e80
commit a29a6b1416
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 133 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
models/lead/src/index.ts
View File

@ -342,7 +342,7 @@ export function createModel (builder: Builder): void {
size: 'small',
kind: 'list'
},
displayProps: { optional: true }
displayProps: { compression: true }
},
{ key: 'modifiedOn', displayProps: { key: 'modified', fixed: 'right', dividerBefore: true } },
{

2
models/recruit/src/index.ts
View File

@ -723,7 +723,7 @@ export function createModel (builder: Builder): void {
size: 'small',
kind: 'list'
},
displayProps: { optional: true }
displayProps: { compression: true }
},
{ key: 'modifiedOn', displayProps: { key: 'modified', fixed: 'right', dividerBefore: true } },
{

24
models/tracker/src/index.ts
View File

@ -486,7 +486,7 @@ export function createModel (builder: Builder): void {
{
key: 'labels',
presenter: tags.component.LabelsPresenter,
displayProps: { optional: true },
displayProps: { compression: true },
props: { kind: 'list', full: false }
},
{
@ -501,8 +501,7 @@ export function createModel (builder: Builder): void {
displayProps: {
key: 'milestone',
excludeByKey: 'milestone',
compression: true,
optional: true
compression: true
}
},
{
@ -517,15 +516,14 @@ export function createModel (builder: Builder): void {
displayProps: {
key: 'component',
excludeByKey: 'component',
compression: true,
optional: true
compression: true
}
},
{
key: '',
label: tracker.string.DueDate,
presenter: tracker.component.DueDatePresenter,
displayProps: { key: 'dueDate', optional: true },
displayProps: { key: 'dueDate', compression: true },
props: { kind: 'list' }
},
{
@ -533,7 +531,7 @@ export function createModel (builder: Builder): void {
label: tracker.string.Estimation,
presenter: tracker.component.EstimationEditor,
props: { kind: 'list', size: 'small' },
displayProps: { key: 'estimation', fixed: 'left', dividerBefore: true }
displayProps: { key: 'estimation', fixed: 'left', dividerBefore: true, optional: true }
},
{
key: 'modifiedOn',
@ -633,21 +631,21 @@ export function createModel (builder: Builder): void {
},
displayProps: {
excludeByKey: 'milestone',
compression: true,
optional: true
compression: true
}
},
{
key: '',
label: tracker.string.DueDate,
presenter: tracker.component.DueDatePresenter,
displayProps: { key: 'dueDate', optional: true },
displayProps: { key: 'dueDate', compression: true },
props: { kind: 'list', size: 'small' }
},
{
key: '',
label: tracker.string.Estimation,
presenter: tracker.component.EstimationEditor,
displayProps: { optional: true },
props: { kind: 'list', size: 'small' }
},
{
@ -703,7 +701,7 @@ export function createModel (builder: Builder): void {
size: 'small',
shouldShowPlaceholder: false
},
displayProps: { key: 'component', compression: true, optional: true }
displayProps: { key: 'component', compression: true }
},
{
key: '',
@ -714,7 +712,7 @@ export function createModel (builder: Builder): void {
size: 'small',
shouldShowPlaceholder: false
},
displayProps: { key: 'milestone', compression: true, optional: true }
displayProps: { key: 'milestone', compression: true }
},
{
key: '',
@ -724,7 +722,7 @@ export function createModel (builder: Builder): void {
kind: 'list',
size: 'small'
},
displayProps: { key: 'estimation', optional: true }
displayProps: { key: 'estimation', compression: true }
},
{ key: '', displayProps: { grow: true } },
{

2
packages/text-editor/src/components/StyleButton.svelte
View File

@ -50,7 +50,7 @@
}
&:focus {
color: var(--theme-caption-color);
box-shadow: 0 0 0 2px var(--accented-button-focused-border);
box-shadow: 0 0 0 2px var(--accented-button-outline);
}
&.selected {
background-color: var(--theme-button-pressed);

44
packages/theme/styles/_colors.scss
View File

@ -16,27 +16,27 @@
/* Common Colors */
* {
--accented-button-color: #fff;
--accented-button-content-color: rgba(255, 255, 255, .8);
--accented-button-border: rgba(255, 255, 255, .09);
--accented-button-focused-border: #fff;
--accented-button-outline: #5190EC;
--accented-button-transparent: rgba(43, 81, 144, 0.2);
--accented-button-default: #2B5190;
--accented-button-hovered: #325FA9;
--accented-button-pressed: #284B86;
--accented-button-focused: #284B86;
--accented-button-focused: #2B5190;
--brand-button-default: #4169E1;
--brand-button-hovered: #587BE5;
--brand-button-pressed: #2C58DE;
--brand-button-focused: #2C58DE;
--brand-button-focused: #4169E1;
--positive-button-default: #26A869;
--positive-button-hovered: #2BBB75;
--positive-button-pressed: #21915B;
--positive-button-focused: #21915B;
--positive-button-focused: #26A869;
--negative-button-default: #CA4242;
--negative-button-hovered: #D05858;
--negative-button-pressed: #BF3636;
--negative-button-focused: #BF3636;
--negative-button-focused: #CA4242;
--white-color: #fff;
--duotone-color: rgba(126, 134, 158, .25);
@ -66,21 +66,21 @@
/* Dark Theme */
.theme-dark {
--accented-button-disabled: #12213B;
--accented-button-disabled-color: #5E88CF;
--brand-button-disabled: #111F4B;
--brand-button-disabled-color: #6585E7;
--positive-button-disabled: #092518;
--positive-button-disabled-color: #25A265;
--negative-button-disabled: #330F0F;
--negative-button-disabled-color: #D06262;
--accented-button-disabled: rgba(255, 255, 255, .12);
--accented-button-disabled-color: rgba(255, 255, 255, .4);
--brand-button-disabled: rgba(255, 255, 255, .12);
--brand-button-disabled-color: rgba(255, 255, 255, .4);
--positive-button-disabled: rgba(38, 168, 105, .2);
--positive-button-disabled-color: rgba(38, 168, 105, .6);
--negative-button-disabled: rgba(202, 66, 66, .2);
--negative-button-disabled-color: rgba(202, 66, 66, .6);
--theme-button-default: rgba(255, 255, 255, .02);
--theme-button-hovered: rgba(255, 255, 255, .04);
--theme-button-pressed: rgba(255, 255, 255, .08);
--theme-button-focused: rgba(255, 255, 255, .04);
--theme-button-focused-border: rgba(255, 255, 255, .09);
--theme-button-disabled: rgba(255, 255, 255, .08);
--theme-button-disabled: transparent;
--theme-button-border: rgba(255, 255, 255, .09);
--theme-button-contrast-color: #000;
@ -260,14 +260,14 @@
/* Light Theme */
.theme-light {
--accented-button-disabled: #E0E8F6;
--accented-button-disabled-color: #284B86;
--brand-button-disabled: #DCE3F9;
--brand-button-disabled-color: #2C58DE;
--positive-button-disabled: #DEF7EB;
--positive-button-disabled-color: #1A7046;
--negative-button-disabled: #F6E0E0;
--negative-button-disabled-color: #962C2C;
--accented-button-disabled: rgba(0, 0, 0, .12);
--accented-button-disabled-color: rgba(0, 0, 0, .4);
--brand-button-disabled: rgba(0, 0, 0, .12);
--brand-button-disabled-color: rgba(0, 0, 0, .4);
--positive-button-disabled: rgba(38, 168, 105, .2);
--positive-button-disabled-color: rgba(33, 145, 91, .6);
--negative-button-disabled: rgba(202, 66, 66, .2);
--negative-button-disabled-color: rgba(202, 66, 66, .6);
--theme-button-default: rgba(0, 0, 0, .02);
--theme-button-hovered: rgba(0, 0, 0, .04);

16
packages/theme/styles/button.scss
View File

@ -185,16 +185,24 @@
}
&:not(.no-focus):focus { box-shadow: none; }
}
&.accented, &.brand, &.positive, &.negative {
&:hover, &:active, &:focus {
color: var(--accented-button-color);
.btn-icon { color: var(--accented-button-color); }
}
}
&.regular, &.ghost {
&:hover, &:active, &:focus { color: var(--theme-caption-color); }
}
&.accented,
&.brand,
&.positive,
&.negative {
padding: 0 1.5rem;
color: var(--accented-button-color);
color: var(--accented-button-content-color);
border-color: var(--accented-button-border);
.btn-icon { color: var(--accented-button-color); }
&:focus { border-color: var(--accented-button-focused-border); }
.btn-icon { color: var(--accented-button-content-color); }
}
&.accented {
background-color: var(--accented-button-default);
@ -272,7 +280,7 @@
}
&:disabled {
color: var(--theme-trans-color);
color: var(--theme-darker-color);
border-color: transparent;
cursor: not-allowed;

7
packages/theme/styles/components.scss
View File

@ -686,7 +686,6 @@
border-color: transparent;
}
&:focus {
border-color: var(--accented-button-focused-border);
box-shadow: 0 0 0 3px var(--accented-button-outline);
& > .icon { color: var(--caption-color); }
}
@ -894,7 +893,7 @@
.fix-margin { margin-left: .875rem; }
.name { margin-left: .375rem; }
.optional-bar {
.compression-bar {
overflow: hidden;
display: flex;
justify-content: flex-end;
@ -913,7 +912,7 @@
width: max-content;
}
& > *:not(:first-child) { margin-left: .25rem; }
& > * > * { min-width: fit-content; }
& > * > *:not(.only-icon) { min-width: fit-content; }
}
}
// Labels on the ListView
@ -956,7 +955,7 @@
.kanban-container .card-container .card-labels .label { font-size: .8125rem !important; }
/* ListView & Kanban */
.list-container .optional-bar .label-wrapper,
.list-container .compression-bar .label-wrapper,
.kanban-container .card-container .card-labels .label-wrapper {
display: flex;
align-items: center;

7
packages/ui/src/components/Button.svelte
View File

@ -60,6 +60,7 @@
label === undefined &&
$$slots.content === undefined &&
(icon !== undefined || iconRight !== undefined || $$slots.icon || $$slots.iconRight)
$: primary = ['accented', 'brand', 'positive', 'negative'].some((p) => p === kind)
onMount(() => {
if (focus && input) {
@ -129,7 +130,11 @@
</div>
{/if}
{#if loading}
<div class="btn-icon pointer-events-none caption-color spinner" class:resetIconSize>
<div
class="btn-icon pointer-events-none spinner"
class:resetIconSize
style:color={primary ? 'var(--accented-button-color)' : 'var(--theme-caption-color)'}
>
<Spinner size={iconSize === 'inline' ? 'inline' : 'small'} />
</div>
{/if}

17
plugins/attachment-resources/src/components/AttachmentsPresenter.svelte
View File

@ -35,18 +35,6 @@
<!-- svelte-ignore a11y-click-events-have-key-events -->
<DocNavLink {object} {disabled} inline noUnderline shrink={0}>
{#if kind === 'list'}
{#if compactMode}
<div
use:tooltip={{
component: AttachmentPopup,
props: popupProps
}}
class="sm-tool-icon"
>
<div class="icon halfcontent"><IconAttachment {size} /></div>
{#if showCounter}{value ?? 0}{/if}
</div>
{:else}
<Button
{kind}
{size}
@ -56,11 +44,10 @@
}}
>
<div slot="icon"><IconAttachment {size} /></div>
<div slot="content" style:margin-left={showCounter ? '.375rem' : '0'}>
{#if showCounter}{value ?? 0}{/if}
<div slot="content" style:margin-left={showCounter && !compactMode ? '.375rem' : '0'}>
{#if showCounter && !compactMode}{value ?? 0}{/if}
</div>
</Button>
{/if}
{:else}
<div
use:tooltip={{

17
plugins/chunter-resources/src/components/CommentsPresenter.svelte
View File

@ -32,18 +32,6 @@
<!-- svelte-ignore a11y-click-events-have-key-events -->
<DocNavLink {object} inline noUnderline={true} shrink={0}>
{#if kind === 'list'}
{#if compactMode}
<div
use:tooltip={{
component: CommentPopup,
props: { objectId: object._id, object, withInput }
}}
class="sm-tool-icon"
>
<div class="icon halfcontent"><IconThread {size} /></div>
{#if showCounter}{value ?? 0}{/if}
</div>
{:else}
<Button
{kind}
{size}
@ -53,11 +41,10 @@
}}
>
<div slot="icon"><IconThread {size} /></div>
<div slot="content" style:margin-left={showCounter ? '.375rem' : '0'}>
{#if showCounter}{value ?? 0}{/if}
<div slot="content" style:margin-left={showCounter && !compactMode ? '.375rem' : '0'}>
{#if showCounter && !compactMode}{value ?? 0}{/if}
</div>
</Button>
{/if}
{:else}
<div
use:tooltip={{

1
plugins/document-resources/src/components/EditDoc.svelte
View File

@ -574,7 +574,6 @@
transition: border-color 0.1s var(--timing-main), box-shadow 0.1s var(--timing-main);
&:focus-within {
border-color: var(--accented-button-focused-border);
box-shadow: 0 0 0 3px var(--accented-button-outline);
}
}

3
plugins/telegram-resources/src/components/PinPad.svelte
View File

@ -116,8 +116,7 @@
}
&:focus {
border: 1px solid var(--accented-button-focused-border);
box-shadow: 0 0 0 3px var(--accented-button-outline);
box-shadow: 0 0 0 2px var(--accented-button-outline);
}
}

5
plugins/tracker-resources/src/components/AppItem.svelte
View File

@ -60,8 +60,7 @@
color: var(--caption-color);
}
&:focus {
border: 1px solid var(--accented-button-focused-border);
box-shadow: 0 0 0 3px var(--accented-button-outline);
box-shadow: 0 0 0 2px var(--accented-button-outline);
.icon-container {
color: var(--caption-color);
}
@ -70,7 +69,7 @@
&.selected {
background-color: var(--menu-bg-select);
.icon-container {
color: var(--caption-color);
color: var(--theme-caption-color);
}
}
}

7
plugins/view-resources/src/components/ColorsPopup.svelte
View File

@ -54,16 +54,15 @@
cursor: pointer;
&:hover {
border-color: var(--accented-button-focused-border);
box-shadow: 0 0 0 3px var(--accented-button-outline);
box-shadow: 0 0 0 2px var(--accented-button-outline);
}
&.selected {
border-color: var(--caption-color);
box-shadow: 0 0 0 3px var(--trans-content-20);
box-shadow: 0 0 0 2px var(--trans-content-20);
&:hover {
border-color: var(--system-error-color);
box-shadow: 0 0 0 3px var(--trans-content-20);
box-shadow: 0 0 0 2px var(--trans-content-20);
}
}
}

4
plugins/view-resources/src/components/list/ListHeader.svelte
View File

@ -109,7 +109,7 @@
}}
on:click={() => dispatch('collapse')}
>
<div class="flex-row-center clear-mins flex-grow">
<div class="flex-row-center flex-grow" style:color={headerComponent ? headerTextColor : 'inherit'}>
{#if level === 0}
<div class="chevron"><IconCollapseArrow size={'small'} /></div>
{/if}
@ -118,7 +118,6 @@
<Label label={view.string.NoGrouping} />
</span>
{:else if headerComponent}
<span class="clear-mins" style:color={headerTextColor}>
<svelte:component
this={headerComponent.presenter}
value={category}
@ -131,7 +130,6 @@
accentColor = evt.detail
}}
/>
</span>
{/if}
{#if selected.length > 0}

34
plugins/view-resources/src/components/list/ListItem.svelte
View File

@ -112,25 +112,24 @@
/>
</div>
</div>
{#each model.filter((p) => !(p.displayProps?.optional === true || p.displayProps?.suffix === true)) as attributeModel, i}
{#each model.filter((p) => !(p.displayProps?.optional === true || p.displayProps?.compression === true || p.displayProps?.suffix === true)) as attributeModel, i}
{@const displayProps = attributeModel.displayProps}
{#if !groupByKey || displayProps?.excludeByKey !== groupByKey}
{#if displayProps?.grow}
{#if !compactMode}
{#each model.filter((p) => p.displayProps?.suffix === true) as attrModel}
<ListPresenter
{docObject}
attributeModel={attrModel}
{props}
{compactMode}
value={getObjectValue(attrModel.key, docObject)}
onChange={getOnChange(docObject, attrModel)}
/>
{/each}
{/if}
<GrowPresenter />
{#if !compactMode}
<div class="optional-bar">
{#each model.filter((p) => p.displayProps?.optional === true) as attrModel}
<div class="compression-bar">
{#each model.filter((p) => p.displayProps?.compression === true) as attrModel}
<ListPresenter
{docObject}
attributeModel={attrModel}
@ -140,16 +139,13 @@
/>
{/each}
</div>
{:else}
<GrowPresenter />
{#each model.filter((p) => p.displayProps?.suffix === true) as attrModel}
{#each model.filter((p) => p.displayProps?.optional === true) as attrModel}
<ListPresenter
{docObject}
attributeModel={attrModel}
{props}
value={getObjectValue(attrModel.key, docObject)}
onChange={getOnChange(docObject, attrModel)}
compactMode
/>
{/each}
{/if}
@ -180,7 +176,8 @@
<IconCircles />
</div>
<div class="scroll-box gap-2">
{#each model.filter((m) => m.displayProps?.optional) as attributeModel, j}
<div class="compression-bar">
{#each model.filter((m) => m.displayProps?.compression) as attributeModel, j}
{@const displayProps = attributeModel.displayProps}
{@const value = getObjectValue(attributeModel.key, docObject)}
{#if displayProps?.excludeByKey !== groupByKey && value !== undefined}
@ -195,6 +192,23 @@
{/if}
{/each}
</div>
{#each model.filter((m) => m.displayProps?.optional) as attributeModel, j}
{#if j === 0}
<GrowPresenter />
{/if}
{@const displayProps = attributeModel.displayProps}
{@const value = getObjectValue(attributeModel.key, docObject)}
{#if displayProps?.excludeByKey !== groupByKey && value !== undefined}
<ListPresenter
{docObject}
{attributeModel}
{props}
value={getObjectValue(attributeModel.key, docObject)}
onChange={getOnChange(docObject, attributeModel)}
/>
{/if}
{/each}
</div>
</div>
{/if}
</div>