diff --git a/packages/theme/styles/_colors.scss b/packages/theme/styles/_colors.scss index c2a85ce9ac..0cdb31cc05 100644 --- a/packages/theme/styles/_colors.scss +++ b/packages/theme/styles/_colors.scss @@ -210,7 +210,7 @@ --board-card-bg-color: #fff; --board-card-bg-hover: rgb(252, 252, 252); --board-card-shadow: rgb(0 0 0 / 6%) 0px 0px 1px; - --accent-bg-color: #f8f9fb; // HZ + --accent-bg-color: #eff0f2; // HZ --accent-shadow: rgb(0 0 0 / 10%) 0px 2px 4px; // Dark --highlight-hover: #f9f9f9; diff --git a/packages/theme/styles/common.scss b/packages/theme/styles/common.scss index 315ad0567e..8d48565718 100644 --- a/packages/theme/styles/common.scss +++ b/packages/theme/styles/common.scss @@ -207,8 +207,8 @@ .antiNav-bothFade { mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 2rem, rgba(0, 0, 0, 1) calc(100% - 2rem), rgba(0, 0, 0, 0) 100%); } .antiNav-noneFade { mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 1px, rgba(0, 0, 0, 1) calc(100% - 1px), rgba(0, 0, 0, 0) 100%); } .tableFade.antiNav-topFade { mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 2rem, rgba(0, 0, 0, 1) calc(100% - 1px), rgba(0, 0, 0, 0) 100%); } -.tableFade.antiNav-bottomFade { mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 1px, rgba(0, 0, 0, 1) calc(100% - 4.5rem - 1px), rgba(0, 0, 0, 0) calc(100% - 2.5rem), rgba(0, 0, 0, 1) calc(100% - 2.5rem + .5px)); } -.tableFade.antiNav-bothFade { mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 2rem, rgba(0, 0, 0, 1) calc(100% - 4.5rem - 1px), rgba(0, 0, 0, 0) calc(100% - 2.5rem), rgba(0, 0, 0, 1) calc(100% - 2.5rem + .5px)); } +.tableFade.antiNav-bottomFade { mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 1px, rgba(0, 0, 0, 1) calc(100% - var(--scroller-header-height, 2.5rem) - 2rem - 1px), rgba(0, 0, 0, 0) calc(100% - var(--scroller-header-height, 2.5rem)), rgba(0, 0, 0, 1) calc(100% - var(--scroller-header-height, 2.5rem) + .5px)); } +.tableFade.antiNav-bothFade { mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 2rem, rgba(0, 0, 0, 1) calc(100% - var(--scroller-header-height, 2.5rem) - 2rem - 1px), rgba(0, 0, 0, 0) calc(100% - var(--scroller-header-height, 2.5rem)), rgba(0, 0, 0, 1) calc(100% - var(--scroller-header-height, 2.5rem) + .5px)); } .tableFade.antiNav-noneFade { mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 1px, rgba(0, 0, 0, 1) calc(100% - 1px), rgba(0, 0, 0, 0) 100%); } /* Basic */ diff --git a/packages/ui/src/components/Scroller.svelte b/packages/ui/src/components/Scroller.svelte index 0ba56f24ab..9dd1a968c7 100644 --- a/packages/ui/src/components/Scroller.svelte +++ b/packages/ui/src/components/Scroller.svelte @@ -21,6 +21,7 @@ // export let correctPadding: number = 0 export let bottomStart: boolean = false export let tableFade: boolean = false + export let fadeTopOffset: number = 40 let mask: 'top' | 'bottom' | 'both' | 'none' = 'none' @@ -37,7 +38,7 @@ let timer: number - $: shift = tableFade ? 40 : 0 + $: shift = tableFade ? fadeTopOffset : 0 const checkBar = (): void => { if (divBar && divScroll) { @@ -148,7 +149,7 @@ -
+
{ diff --git a/packages/ui/src/types.ts b/packages/ui/src/types.ts index da6fa53b9c..3b8c5f3bbe 100644 --- a/packages/ui/src/types.ts +++ b/packages/ui/src/types.ts @@ -112,6 +112,7 @@ export type ButtonKind = | 'link-bordered' | 'dangerous' | 'list' + | 'list-header' export type ButtonSize = 'inline' | 'small' | 'medium' | 'large' | 'x-large' export type ButtonShape = 'rectangle' | 'rectangle-left' | 'rectangle-right' | 'circle' | 'round' | undefined export type EditStyle = 'editbox' | 'large-style' | 'small-style' | 'search-style' | 'underline' diff --git a/plugins/contact-resources/src/components/PersonContent.svelte b/plugins/contact-resources/src/components/PersonContent.svelte index 256f890017..a46c8255c1 100644 --- a/plugins/contact-resources/src/components/PersonContent.svelte +++ b/plugins/contact-resources/src/components/PersonContent.svelte @@ -30,6 +30,7 @@ export let avatarSize: 'inline' | 'tiny' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' = 'x-small' export let onEdit: ((event: MouseEvent) => void) | undefined = undefined export let showTooltip: LabelAndProps | undefined = undefined + export let enlargedText = false $: element = getElement(value, onEdit, shouldShowPlaceholder, isInteractive) @@ -61,13 +62,18 @@ class="contentPresenter" class:inline-presenter={inline} class:mContentPresenterNotInteractive={!isInteractive} + class:text-base={enlargedText} on:click={onEdit} href={!isInteractive || onEdit || !value ? undefined : `#${getPanelURI(view.component.EditDoc, value._id, Hierarchy.mixinOrClass(value), 'content')}`} > {#if shouldShowAvatar} -
+
{/if} diff --git a/plugins/contact-resources/src/components/PersonPresenter.svelte b/plugins/contact-resources/src/components/PersonPresenter.svelte index 8a5c9abfa3..df96d21d41 100644 --- a/plugins/contact-resources/src/components/PersonPresenter.svelte +++ b/plugins/contact-resources/src/components/PersonPresenter.svelte @@ -20,6 +20,7 @@ export let value: Person | null | undefined export let inline = false + export let enlargedText = false export let isInteractive = true export let shouldShowAvatar = true export let shouldShowName = true @@ -55,5 +56,6 @@ {shouldShowAvatar} {shouldShowName} {shouldShowPlaceholder} + {enlargedText} /> {/if} diff --git a/plugins/tracker-assets/assets/icons.svg b/plugins/tracker-assets/assets/icons.svg index bf56650768..796f2217d8 100644 --- a/plugins/tracker-assets/assets/icons.svg +++ b/plugins/tracker-assets/assets/icons.svg @@ -157,14 +157,14 @@ - - - - + + + + - - + + diff --git a/plugins/tracker-resources/src/components/ProjectSelector.svelte b/plugins/tracker-resources/src/components/ProjectSelector.svelte index cd1e467c0a..6b82f7fcb9 100644 --- a/plugins/tracker-resources/src/components/ProjectSelector.svelte +++ b/plugins/tracker-resources/src/components/ProjectSelector.svelte @@ -18,7 +18,7 @@ import { createQuery } from '@anticrm/presentation' import { Project } from '@anticrm/tracker' import type { ButtonKind, ButtonSize } from '@anticrm/ui' - import { Button, ButtonShape, eventToHTMLElement, SelectPopup, showPopup } from '@anticrm/ui' + import { Button, ButtonShape, eventToHTMLElement, SelectPopup, showPopup, Label } from '@anticrm/ui' import tracker from '../plugin' export let value: Ref | null | undefined @@ -32,6 +32,7 @@ export let justify: 'left' | 'center' = 'center' export let width: string | undefined = 'min-content' export let onlyIcon: boolean = false + export let enlargedText = false let selectedProject: Project | undefined let defaultProjectLabel = '' @@ -91,15 +92,33 @@ } - +{/if} diff --git a/plugins/tracker-resources/src/components/issues/IssuesList.svelte b/plugins/tracker-resources/src/components/issues/IssuesList.svelte index 334d7149a0..da2fbec998 100644 --- a/plugins/tracker-resources/src/components/issues/IssuesList.svelte +++ b/plugins/tracker-resources/src/components/issues/IssuesList.svelte @@ -196,7 +196,8 @@ defaultName={tracker.string.NoAssignee} shouldShowPlaceholder={true} isInteractive={false} - avatarSize={'x-small'} + avatarSize={'small'} + enlargedText {currentSpace} /> {:else if headerComponent} @@ -208,13 +209,14 @@ value: groupByKey ? { [groupByKey]: category } : {}, statuses: groupByKey === 'status' ? statuses : undefined, issues: groupedIssues[category], - size: 'inline', - kind: 'list', + size: 'medium', + kind: 'list-header', + enlargedText: true, currentSpace }} /> {/if} - {(groupedIssues[category] ?? []).length} + {(groupedIssues[category] ?? []).length}
+{/if}