From 5568eeba3c4ef77268e024ff9f50e20448eefc30 Mon Sep 17 00:00:00 2001 From: Alexander Platov Date: Mon, 24 Oct 2022 13:26:56 +0300 Subject: [PATCH] Update IssuesList layout (#2317) Signed-off-by: Alexander Platov --- models/tracker/src/index.ts | 30 ++- packages/theme/styles/_colors.scss | 6 +- packages/theme/styles/_layouts.scss | 3 + packages/ui/src/components/Button.svelte | 2 +- packages/ui/src/components/Panel.svelte | 2 +- packages/ui/src/components/Status.svelte | 4 +- .../ui/src/components/internal/Root.svelte | 2 + packages/ui/src/index.ts | 4 +- packages/ui/src/types.ts | 2 + .../src/components/Events.svelte | 3 +- .../src/components/Contacts.svelte | 3 +- .../src/components/Structure.svelte | 3 +- .../src/components/Categories.svelte | 3 +- .../src/components/Vacancies.svelte | 3 +- .../src/components/TagsView.svelte | 3 +- .../src/components/ProjectSelector.svelte | 6 +- .../src/components/icons/Circles.svelte | 2 +- .../src/components/issues/IssuesHeader.svelte | 3 +- .../src/components/issues/IssuesList.svelte | 177 +++++++++++++++--- .../components/issues/TitlePresenter.svelte | 12 +- .../issues/edit/SubIssuesSelector.svelte | 2 +- .../components/projects/ProjectEditor.svelte | 9 +- .../components/sprints/SprintEditor.svelte | 146 +++++++++------ .../components/sprints/SprintSelector.svelte | 16 +- plugins/view/src/index.ts | 2 + .../src/components/SpaceHeader.svelte | 3 +- .../src/components/SpecialView.svelte | 3 +- .../src/components/Workbench.svelte | 4 +- 28 files changed, 321 insertions(+), 137 deletions(-) diff --git a/models/tracker/src/index.ts b/models/tracker/src/index.ts index 7ecfe7da61..58d5dea197 100644 --- a/models/tracker/src/index.ts +++ b/models/tracker/src/index.ts @@ -472,15 +472,37 @@ export function createModel (builder: Builder): void { { key: '', presenter: tracker.component.ProjectEditor, - props: { kind: 'list', size: 'small', shape: 'round', shouldShowPlaceholder: false } + props: { + kind: 'list', + size: 'small', + shape: 'round', + shouldShowPlaceholder: false, + excludeByKey: 'project', + optional: true + } }, { key: '', presenter: tracker.component.SprintEditor, - props: { kind: 'list', size: 'small', shape: 'round', shouldShowPlaceholder: false } + props: { + kind: 'list', + size: 'small', + shape: 'round', + shouldShowPlaceholder: false, + excludeByKey: 'sprint', + optional: true + } + }, + { + key: '', + presenter: tracker.component.EstimationEditor, + props: { kind: 'list', size: 'small', optional: true } + }, + { + key: 'modifiedOn', + presenter: tracker.component.ModificationDatePresenter, + props: { fixed: 'right', optional: true } }, - { key: '', presenter: tracker.component.EstimationEditor, props: { kind: 'list', size: 'small' } }, - { key: 'modifiedOn', presenter: tracker.component.ModificationDatePresenter, props: { fixed: 'right' } }, { key: '$lookup.assignee', presenter: tracker.component.AssigneePresenter, diff --git a/packages/theme/styles/_colors.scss b/packages/theme/styles/_colors.scss index 5cc71879e1..635bf5deff 100644 --- a/packages/theme/styles/_colors.scss +++ b/packages/theme/styles/_colors.scss @@ -84,6 +84,7 @@ --divider-color: #303236; --menu-bg-select: #2d2f36; --menu-icon-hover: #f3f3f8; + --header-bg-color: linear-gradient(0deg, var(--accent-bg-color), #2d2e31); --popup-bg-color: linear-gradient(136.61deg, var(--accent-bg-color) 13.72%, #2d2e31 74.3%); --popup-bg-hover: #37373c; --popup-divider: #313236; @@ -236,8 +237,9 @@ --divider-color: #e0e0e0; --menu-bg-select: #f0f3f9; --menu-icon-hover: #282a30; - --popup-bg-color: linear-gradient(136.61deg, rgb(255, 255, 255) 13.72%, rgb(255, 255, 255) 74.3%); - --popup-bg-hover: #f8f9fb; + --header-bg-color: linear-gradient(0deg, #eee, #f6f6f6); + --popup-bg-color: linear-gradient(136.61deg, #fff 13.72%, #fefefe 74.3%); + --popup-bg-hover: #f0f3f9; --popup-divider: #eff1f4; --popup-shadow: rgb(0 0 0 / 20%) 0px 4px 24px; // Dark --popup-panel-shadow: rgb(0 0 0 / 10%) 0px 4px 18px; diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss index 864f291e97..7053a2f2bb 100644 --- a/packages/theme/styles/_layouts.scss +++ b/packages/theme/styles/_layouts.scss @@ -358,6 +358,7 @@ input.search { .step-lr75 + .step-lr75 { margin-left: .75rem; } .step-tb75 + .step-tb75 { margin-top: .75rem; } +.ml-0-5 { margin-left: .125rem; } .ml-1 { margin-left: .25rem; } .ml-1-5 { margin-left: .375rem; } .ml-2 { margin-left: .5rem; } @@ -502,7 +503,9 @@ input.search { .w-85 { width: 21.25rem; } .w-165 { width: 41.25rem; } .min-w-0 { min-width: 0; } +.min-w-2 { min-width: .5rem; } .min-w-4 { min-width: 1rem; } +.min-w-8 { min-width: 2rem; } .min-w-9 { min-width: 2.25rem; } .min-w-80 { min-width: 20rem; } .min-w-min { min-width: min-content; } diff --git a/packages/ui/src/components/Button.svelte b/packages/ui/src/components/Button.svelte index ef8627ea20..51398a592e 100644 --- a/packages/ui/src/components/Button.svelte +++ b/packages/ui/src/components/Button.svelte @@ -127,7 +127,7 @@ {/if} {#if label} - + {:else if $$slots.content} diff --git a/packages/ui/src/components/Panel.svelte b/packages/ui/src/components/Panel.svelte index d51391dcfd..74aa70dedd 100644 --- a/packages/ui/src/components/Panel.svelte +++ b/packages/ui/src/components/Panel.svelte @@ -35,7 +35,7 @@ let asideShown: boolean = false let fullSize: boolean = false let twoRows: boolean = false - $: twoRows = $deviceInfo.docWidth <= 480 + $: twoRows = $deviceInfo.minWidth const checkPanel = (): void => { if (panelWidth <= 900 && !asideFloat) asideFloat = true diff --git a/packages/ui/src/components/Status.svelte b/packages/ui/src/components/Status.svelte index 7b5fc13bbc..1ee35ab273 100644 --- a/packages/ui/src/components/Status.svelte +++ b/packages/ui/src/components/Status.svelte @@ -12,7 +12,9 @@
{#if status.severity !== Severity.OK} -
+ {/if}
diff --git a/packages/ui/src/components/internal/Root.svelte b/packages/ui/src/components/internal/Root.svelte index 6a0fe0348e..c2b2d3b397 100644 --- a/packages/ui/src/components/internal/Root.svelte +++ b/packages/ui/src/components/internal/Root.svelte @@ -70,6 +70,8 @@ $: $deviceInfo.docHeight = docHeight $: $deviceInfo.isPortrait = isPortrait $: $deviceInfo.isMobile = isMobile + $: $deviceInfo.minWidth = docWidth <= 480 + $: $deviceInfo.twoRows = docWidth <= 680 $: document.documentElement.style.setProperty('--app-height', `${docHeight}px`) diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index 9bdabb9102..4c1e83286b 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -180,7 +180,9 @@ export const deviceOptionsStore = writable({ docWidth: 0, docHeight: 0, isPortrait: false, - isMobile: false + isMobile: false, + minWidth: false, + twoRows: false }) export default uis diff --git a/packages/ui/src/types.ts b/packages/ui/src/types.ts index 9c1045e466..8fe9d5f165 100644 --- a/packages/ui/src/types.ts +++ b/packages/ui/src/types.ts @@ -231,5 +231,7 @@ export interface DeviceOptions { docHeight: number isPortrait: boolean isMobile: boolean + minWidth: boolean + twoRows: boolean theme?: any } diff --git a/plugins/calendar-resources/src/components/Events.svelte b/plugins/calendar-resources/src/components/Events.svelte index 3a96d1625d..2eefc81284 100644 --- a/plugins/calendar-resources/src/components/Events.svelte +++ b/plugins/calendar-resources/src/components/Events.svelte @@ -100,8 +100,7 @@ } }) - let twoRows: boolean - $: twoRows = $deviceInfo.docWidth <= 680 + $: twoRows = $deviceInfo.twoRows
diff --git a/plugins/contact-resources/src/components/Contacts.svelte b/plugins/contact-resources/src/components/Contacts.svelte index d48f6a1801..ca9e74cc79 100644 --- a/plugins/contact-resources/src/components/Contacts.svelte +++ b/plugins/contact-resources/src/components/Contacts.svelte @@ -63,8 +63,7 @@ showPopup(CreateContact, { space: contact.space.Contacts, targetElement: ev.target }, ev.target as HTMLElement) } - let twoRows: boolean - $: twoRows = $deviceInfo.docWidth <= 680 + $: twoRows = $deviceInfo.twoRows
diff --git a/plugins/inventory-resources/src/components/Categories.svelte b/plugins/inventory-resources/src/components/Categories.svelte index 94174daa0d..23bc51ab65 100644 --- a/plugins/inventory-resources/src/components/Categories.svelte +++ b/plugins/inventory-resources/src/components/Categories.svelte @@ -33,8 +33,7 @@ showPopup(CreateCategory, { space: inventory.space.Category }, eventToHTMLElement(ev)) } - let twoRows: boolean - $: twoRows = $deviceInfo.docWidth <= 680 + $: twoRows = $deviceInfo.twoRows
diff --git a/plugins/recruit-resources/src/components/Vacancies.svelte b/plugins/recruit-resources/src/components/Vacancies.svelte index 37e18cfcdb..1d33f85338 100644 --- a/plugins/recruit-resources/src/components/Vacancies.svelte +++ b/plugins/recruit-resources/src/components/Vacancies.svelte @@ -131,8 +131,7 @@ return result } - let twoRows: boolean - $: twoRows = $deviceInfo.docWidth <= 680 + $: twoRows = $deviceInfo.twoRows
diff --git a/plugins/tags-resources/src/components/TagsView.svelte b/plugins/tags-resources/src/components/TagsView.svelte index 39cc6dc973..3952a2b17d 100644 --- a/plugins/tags-resources/src/components/TagsView.svelte +++ b/plugins/tags-resources/src/components/TagsView.svelte @@ -86,8 +86,7 @@ (tagElements?.get(b._id as Ref)?.count ?? 0) - (tagElements?.get(a._id as Ref)?.count ?? 0) ?? 0 - let twoRows: boolean - $: twoRows = $deviceInfo.docWidth <= 680 + $: twoRows = $deviceInfo.twoRows
diff --git a/plugins/tracker-resources/src/components/ProjectSelector.svelte b/plugins/tracker-resources/src/components/ProjectSelector.svelte index e289537ab6..89b05bdcc7 100644 --- a/plugins/tracker-resources/src/components/ProjectSelector.svelte +++ b/plugins/tracker-resources/src/components/ProjectSelector.svelte @@ -116,7 +116,11 @@ {loading} on:click={handleProjectEditorOpened} > - + - const fill: string = 'var(--theme-caption-color)' + const fill: string = 'var(--caption-color)' diff --git a/plugins/tracker-resources/src/components/issues/IssuesHeader.svelte b/plugins/tracker-resources/src/components/issues/IssuesHeader.svelte index b2ec139322..9656712276 100644 --- a/plugins/tracker-resources/src/components/issues/IssuesHeader.svelte +++ b/plugins/tracker-resources/src/components/issues/IssuesHeader.svelte @@ -20,8 +20,7 @@ } }) - let twoRows: boolean - $: twoRows = $deviceInfo.docWidth <= 680 + $: twoRows = $deviceInfo.twoRows
diff --git a/plugins/tracker-resources/src/components/issues/IssuesList.svelte b/plugins/tracker-resources/src/components/issues/IssuesList.svelte index 9c001ce23a..4b0317f19a 100644 --- a/plugins/tracker-resources/src/components/issues/IssuesList.svelte +++ b/plugins/tracker-resources/src/components/issues/IssuesList.svelte @@ -30,7 +30,8 @@ IconMoreH, showPopup, Spinner, - tooltip + tooltip, + deviceOptionsStore as deviceInfo } from '@hcengineering/ui' import { AttributeModel, BuildModelKey } from '@hcengineering/view' import { buildModel, FixedColumn, getObjectPresenter, LoadingProps, Menu } from '@hcengineering/view-resources' @@ -38,6 +39,7 @@ import tracker from '../../plugin' import { IssuesGroupByKeys, issuesGroupEditorMap, IssuesOrderByKeys, issuesSortOrderMap } from '../../utils' import CreateIssue from '../CreateIssue.svelte' + import Circles from '../icons/Circles.svelte' export let _class: Ref> export let currentSpace: Ref | undefined = undefined @@ -237,7 +239,7 @@ value: groupByKey ? { [groupByKey]: category } : {}, statuses: groupByKey === 'status' ? statuses : undefined, issues: groupedIssues[category], - size: 'medium', + width: 'min-content', kind: 'list-header', enlargedText: true, currentSpace @@ -245,7 +247,11 @@ /> {/if} {#if limited.length < items.length} - {limited.length} / {items.length} +
+ {limited.length} +
/
+ {items.length} +
{:else} - {items.length} + {items.length} {/if}
-
-
+
{/if} @@ -340,23 +349,25 @@ {...attributeModel.props} /> {:else if attributeModel.props?.fixed} - checkWidth(attributeModel.key, result)} - > - - - {:else} -
+ {#if !(attributeModel.props?.optional && $deviceInfo.minWidth)} + checkWidth(attributeModel.key, result)} + > + + + {/if} + {:else if attributeModel.props?.excludeByKey !== groupByKey} + {#if !(attributeModel.props?.optional && $deviceInfo.minWidth)} -
+ {/if} {/if} {/each} + {#if $deviceInfo.minWidth} +
+ +
+ +
+
+
+ +
+ +
+ {#each itemModels as attributeModel} + {#if attributeModel.props?.optional && attributeModel.props?.excludeByKey !== groupByKey} + + {/if} + {/each} +
+ {/if}
{/each} {:else if loadingProps !== undefined} @@ -403,11 +441,11 @@ .categoryHeader { position: sticky; top: 0; - padding: 0 1.5rem 0 2.25rem; + padding: 0 0.75rem 0 2.25rem; height: 3rem; min-height: 3rem; min-width: 0; - background-color: var(--accent-bg-color); + background: var(--header-bg-color); z-index: 5; } @@ -415,10 +453,29 @@ border-bottom: 1px solid var(--accent-bg-color); } - .listGrid { + .counter { display: flex; align-items: center; - padding: 0 1.5rem 0 0.875rem; + flex-wrap: nowrap; + flex-shrink: 0; + margin-left: 1rem; + padding: 0.25rem 0.5rem; + min-width: 1.325rem; + text-align: center; + font-weight: 500; + font-size: 1rem; + line-height: 1rem; + color: var(--accent-color); + background-color: var(--body-color); + border: 1px solid var(--divider-color); + border-radius: 1rem; + } + + .listGrid { + position: relative; + display: flex; + align-items: center; + padding: 0 0.75rem 0 0.875rem; width: 100%; height: 2.75rem; min-height: 2.75rem; @@ -437,6 +494,68 @@ &.mListGridSelected { background-color: var(--highlight-hover); } + + .hidden-panel, + .panel-trigger { + position: absolute; + display: flex; + align-items: center; + top: 0; + bottom: 0; + height: 100%; + } + .hidden-panel { + overflow: hidden; + right: 0; + width: 80%; + background-color: var(--accent-bg-color); + opacity: 0; + pointer-events: none; + z-index: 2; + transition-property: opacity, width; + transition-duration: 0.15s; + transition-timing-function: var(--timing-main); + + .header { + display: flex; + flex-direction: column; + justify-content: center; + margin: 0 0.25rem; + width: 0.375rem; + min-width: 0.375rem; + height: 100%; + opacity: 0.25; + } + } + .panel-trigger { + flex-direction: column; + justify-content: center; + padding: 0 0.125rem; + right: 2.5rem; + width: 0.75rem; + border: 1px solid transparent; + border-radius: 0.25rem; + opacity: 0.1; + z-index: 1; + transition: opacity 0.15s var(--timing-main); + + &:focus { + border-color: var(--primary-edit-border-color); + opacity: 0.25; + } + & > * { + pointer-events: none; + } + } + .hidden-panel:focus-within, + .panel-trigger:focus + .hidden-panel { + width: 100%; + opacity: 1; + pointer-events: all; + } + .space { + min-height: 0.1075rem; + } } .priorityPresenter, diff --git a/plugins/tracker-resources/src/components/issues/TitlePresenter.svelte b/plugins/tracker-resources/src/components/issues/TitlePresenter.svelte index 4066ce1e13..0d68ebfd75 100644 --- a/plugins/tracker-resources/src/components/issues/TitlePresenter.svelte +++ b/plugins/tracker-resources/src/components/issues/TitlePresenter.svelte @@ -27,20 +27,18 @@ {#if value} - - {value.title} + + {value.title} {/if} diff --git a/plugins/tracker-resources/src/components/sprints/SprintEditor.svelte b/plugins/tracker-resources/src/components/sprints/SprintEditor.svelte index d9acbac747..210fd30d51 100644 --- a/plugins/tracker-resources/src/components/sprints/SprintEditor.svelte +++ b/plugins/tracker-resources/src/components/sprints/SprintEditor.svelte @@ -17,7 +17,8 @@ import { IntlString } from '@hcengineering/platform' import { createQuery, getClient } from '@hcengineering/presentation' import { Issue, IssueStatus, IssueTemplate, Sprint } from '@hcengineering/tracker' - import { ButtonKind, ButtonShape, ButtonSize, Label, tooltip } from '@hcengineering/ui' + import type { ButtonKind, ButtonSize, ButtonShape } from '@hcengineering/ui' + import { Label, deviceOptionsStore as deviceInfo } from '@hcengineering/ui' import DatePresenter from '@hcengineering/ui/src/components/calendar/DatePresenter.svelte' import { activeSprint } from '../../issues' import tracker from '../../plugin' @@ -30,15 +31,15 @@ export let shouldShowLabel: boolean = true export let popupPlaceholder: IntlString = tracker.string.MoveToSprint export let shouldShowPlaceholder = true - export let kind: ButtonKind = 'link' export let size: ButtonSize = 'large' + export let kind: ButtonKind = 'link' export let shape: ButtonShape = undefined export let justify: 'left' | 'center' = 'left' export let width: string | undefined = '100%' export let onlyIcon: boolean = false export let issues: Issue[] | undefined = undefined export let groupBy: string | undefined = undefined - export let enlargedText = false + export let enlargedText: boolean = false const client = getClient() @@ -119,71 +120,92 @@ sprint = res.shift() }) } + + $: twoRows = $deviceInfo.twoRows -{#if (value.sprint && value.sprint !== $activeSprint && groupBy !== 'sprint') || shouldShowPlaceholder} -
- -
-{/if} - -{#if sprint} - {@const now = Date.now()} -
- - / -
-
- -
-{/if} -{#if issues} - -
(sprint?.capacity ?? 0)}> -
- +
+ {#if (value.sprint && value.sprint !== $activeSprint && groupBy !== 'sprint') || shouldShowPlaceholder} +
+
- {#if totalReported > 0} -
-{/if} + {/if} + + {#if sprint || issues} +
+ {#if sprint} + {@const now = Date.now()} + + / + +
+ +
diff --git a/plugins/tracker-resources/src/components/sprints/SprintSelector.svelte b/plugins/tracker-resources/src/components/sprints/SprintSelector.svelte index 8137272dae..71205e8e96 100644 --- a/plugins/tracker-resources/src/components/sprints/SprintSelector.svelte +++ b/plugins/tracker-resources/src/components/sprints/SprintSelector.svelte @@ -17,7 +17,7 @@ import { getEmbeddedLabel, IntlString, translate } from '@hcengineering/platform' import { createQuery } from '@hcengineering/presentation' import { Project, Sprint } from '@hcengineering/tracker' - import type { ButtonKind, ButtonSize } from '@hcengineering/ui' + import type { ButtonKind, ButtonSize, LabelAndProps } from '@hcengineering/ui' import { Button, ButtonShape, eventToHTMLElement, SelectPopup, showPopup, Label } from '@hcengineering/ui' import tracker from '../../plugin' import { sprintStatusAssets } from '../../types' @@ -36,6 +36,7 @@ export let enlargedText = false export let useProject: Ref | undefined = undefined + export let showTooltip: LabelAndProps | undefined = undefined let selectedSprint: Sprint | undefined let defaultSprintLabel = '' @@ -101,6 +102,7 @@ {shape} {width} {justify} + {showTooltip} icon={sprintIcon} disabled={!isEditable} on:click={handleSprintEditorOpened} @@ -112,13 +114,17 @@ {shape} {width} {justify} + {showTooltip} icon={sprintIcon} disabled={!isEditable} on:click={handleSprintEditorOpened} - > - + > + + - + + {/if} diff --git a/plugins/view/src/index.ts b/plugins/view/src/index.ts index 1e8b2b6082..ab1077b422 100644 --- a/plugins/view/src/index.ts +++ b/plugins/view/src/index.ts @@ -359,6 +359,8 @@ export interface AttributeModel { // Extra properties for component props?: Record sortingKey: string | string[] + optional?: boolean + excludeByKey?: string // Extra icon if applicable icon?: Asset diff --git a/plugins/workbench-resources/src/components/SpaceHeader.svelte b/plugins/workbench-resources/src/components/SpaceHeader.svelte index 228a845c8d..174a34c272 100644 --- a/plugins/workbench-resources/src/components/SpaceHeader.svelte +++ b/plugins/workbench-resources/src/components/SpaceHeader.svelte @@ -82,8 +82,7 @@ } }) - let twoRows: boolean - $: twoRows = $deviceInfo.docWidth <= 768 + $: twoRows = $deviceInfo.twoRows
diff --git a/plugins/workbench-resources/src/components/SpecialView.svelte b/plugins/workbench-resources/src/components/SpecialView.svelte index 7641d17480..04d61d253a 100644 --- a/plugins/workbench-resources/src/components/SpecialView.svelte +++ b/plugins/workbench-resources/src/components/SpecialView.svelte @@ -75,8 +75,7 @@ return search === '' ? baseQuery : { ...baseQuery, $search: search } } - let twoRows: boolean - $: twoRows = $deviceInfo.docWidth <= 680 + $: twoRows = $deviceInfo.twoRows
diff --git a/plugins/workbench-resources/src/components/Workbench.svelte b/plugins/workbench-resources/src/components/Workbench.svelte index 82341961a5..cae5863b4b 100644 --- a/plugins/workbench-resources/src/components/Workbench.svelte +++ b/plugins/workbench-resources/src/components/Workbench.svelte @@ -38,7 +38,8 @@ showPopup, TooltipInstance, PopupPosAlignment, - checkMobile + checkMobile, + deviceOptionsStore as deviceInfo } from '@hcengineering/ui' import view from '@hcengineering/view' import { ActionContext, ActionHandler } from '@hcengineering/view-resources' @@ -53,7 +54,6 @@ import NavHeader from './NavHeader.svelte' import Navigator from './Navigator.svelte' import SpaceView from './SpaceView.svelte' - import { deviceOptionsStore as deviceInfo } from '@hcengineering/ui' export let client: Client let contentPanel: HTMLElement