wieerwill/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2025-06-12 05:27:56 +00:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Updated List layout

Browse Source 
Signed-off-by: Alexander Platov <alexander.platov@hardcoreeng.com>
This commit is contained in:
Alexander Platov 2025-05-26 05:49:03 +07:00
parent 0c8c2cc84e
commit 3d6994d5cc
No known key found for this signature in database
GPG Key ID: 67AE092F5EB4180C
16 changed files with 227 additions and 193 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2248,26 +2248,31 @@
display: flex;
align-items: center;
padding: 0 2.5rem 0 0.25rem;
width: 100%;
width: max-content;
height: 2.75rem;
min-width: 100%;
min-height: 2.75rem;
color: var(--theme-caption-color);
background-color: var(--theme-list-row-color);
&.row {
border-left: 1px solid var(--theme-list-border-color);
border-right: 1px solid var(--theme-list-border-color);
border-left: 1px solid transparent;
border-right: 1px solid transparent;
// border-left: 1px solid var(--theme-list-border-color);
// border-right: 1px solid var(--theme-list-border-color);
}
&.row:not(.lastCat, .last) {
border-bottom: 1px solid var(--theme-divider-color);
}
&.row.last {
border-bottom: 1px solid var(--theme-list-subheader-divider);
border-bottom: 1px solid transparent;
// border-bottom: 1px solid var(--theme-list-subheader-divider);
}
&.row.lastCat {
border-bottom-left-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
border-bottom: 1px solid var(--theme-list-border-color);
border-bottom: 1px solid transparent;
// border-bottom: 1px solid var(--theme-list-border-color);
}
&.compactMode {
@ -2390,6 +2395,36 @@
}
}
.listGrid-container {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
height: fit-content;
min-width: 0;
border-radius: 0.25rem;
&:not(:first-child) {
margin-top: 0.5rem;
}
&::after {
content: '';
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 1px solid var(--theme-list-border-color);
border-radius: 0.25rem;
z-index: 1;
pointer-events: none;
}
.expandcollapse-content {
width: max-content !important;
min-width: 100% !important;
}
}
/* ListView - global style */
.category-container.disableHeader .listGrid.row:first-child {
border-top-left-radius: 0.25rem;

12
packages/ui/src/components/ExpandCollapse.svelte
View File

@ -21,14 +21,14 @@
afterUpdate(() => dispatch('changeContent'))
</script>
<div class="root" hidden={!isExpanded}>
<div class="flex-no-shrink clear-mins">
<div class="expandcollapse-container" hidden={!isExpanded}>
<div class="expandcollapse-content">
<slot />
</div>
</div>
<style lang="scss">
.root {
.expandcollapse-container {
min-height: 0;
flex-shrink: 0;
@ -38,5 +38,11 @@
&::-webkit-scrollbar:horizontal {
height: 0;
}
.expandcollapse-content {
flex-shrink: 0;
min-width: 0;
min-height: 0;
}
}
</style>

2
plugins/attachment-resources/src/components/Attachments.svelte
View File

@ -156,7 +156,7 @@
</div>
</AttachmentDroppable>
{:else if wSection < 640}
<Scroller horizontal>
<Scroller horizontal noFade={false}>
<Table
_class={attachmentClass}
config={[

16
plugins/card-resources/src/components/Childs.svelte
View File

@ -16,16 +16,7 @@
import { Card, CardEvents } from '@hcengineering/card'
import core, { Data, Doc, fillDefaults, MarkupBlobRef, SortingOrder, WithLookup } from '@hcengineering/core'
import { createQuery, getClient } from '@hcengineering/presentation'
import {
Label,
Scroller,
ModernButton,
getCurrentLocation,
IconAdd,
navigate,
resizeObserver,
Section
} from '@hcengineering/ui'
import { Label, ButtonIcon, getCurrentLocation, IconAdd, navigate, resizeObserver, Section } from '@hcengineering/ui'
import view, { Viewlet, ViewletPreference, ViewOptions } from '@hcengineering/view'
import {
List,
@ -147,10 +138,9 @@
<div class="buttons-group xsmall-gap">
<ViewletsSettingButton bind:viewOptions viewletQuery={{ _id: viewletId }} kind={'tertiary'} bind:viewlet />
{#if !$restrictionStore.readonly && !readonly}
<ModernButton
<ButtonIcon
id="add-child-card"
icon={IconAdd}
label={card.string.CreateChild}
size={'small'}
kind={'tertiary'}
tooltip={{ label: card.string.CreateChild, direction: 'bottom' }}
@ -163,7 +153,6 @@
</svelte:fragment>
<svelte:fragment slot="content">
{#if (object?.children ?? 0) > 0 && viewOptions !== undefined && viewlet}
<Scroller horizontal>
<div
class="list"
use:resizeObserver={(evt) => {
@ -195,7 +184,6 @@
}}
/>
</div>
</Scroller>
{:else if !readonly}
<div class="antiSection-empty" class:solid={emptyKind === 'create'} class:noBorder={emptyKind === 'placeholder'}>
<!-- svelte-ignore a11y-click-events-have-key-events -->

4
plugins/contact-resources/src/components/Members.svelte
View File

@ -16,7 +16,7 @@
import { Member } from '@hcengineering/contact'
import type { Class, Doc, Ref, Space } from '@hcengineering/core'
import { createQuery, getClient } from '@hcengineering/presentation'
import { Button, IconAdd, Label, Section, showPopup } from '@hcengineering/ui'
import { Button, IconAdd, Label, Section, showPopup, Scroller } from '@hcengineering/ui'
import { Viewlet, ViewletPreference } from '@hcengineering/view'
import { Table, ViewletSelector, ViewletSettingButton } from '@hcengineering/view-resources'
import contact from '../plugin'
@ -87,6 +87,7 @@
<svelte:fragment slot="content">
{#if members > 0 && viewlet}
<Scroller horizontal noFade={false}>
<Table
_class={contact.class.Member}
config={preference?.config ?? viewlet.config}
@ -95,6 +96,7 @@
loadingProps={{ length: members }}
{readonly}
/>
</Scroller>
{:else}
<div class="antiSection-empty solid flex-col mt-3">
<span class="content-dark-color">

8
plugins/process-resources/src/components/ProcessesExtension.svelte
View File

@ -149,7 +149,7 @@
}}
/>
{#if docsProvided && docs.length === 0}
<div class="flex-center content-color">
<div class="flex-center content-color empty-content">
<Label label={process.string.NoProcesses} />
</div>
{/if}
@ -157,3 +157,9 @@
</div>
</svelte:fragment>
</Section>
<style lang="scss">
.antiSection-empty:has(.empty-content) :global(.list-container) {
display: none;
}
</style>

2
plugins/recruit-resources/src/components/Applications.svelte
View File

@ -54,7 +54,7 @@
<svelte:fragment slot="content">
{#if applications > 0 && viewlet !== undefined && !loading}
<Scroller horizontal>
<Scroller horizontal noFade={false}>
<Table
_class={recruit.class.Applicant}
config={preference?.config ?? viewlet.config}

2
plugins/recruit-resources/src/components/VacancyApplications.svelte
View File

@ -73,7 +73,7 @@
</div>
{#if applications > 0}
{#if viewlet !== undefined && !loading}
<Scroller horizontal>
<Scroller horizontal noFade={false}>
<Table
_class={recruit.class.Applicant}
config={preference?.config ?? viewlet.config}

2
plugins/recruit-resources/src/components/VacancyList.svelte
View File

@ -61,7 +61,7 @@
{/if}
</div>
{#if (vacancies ?? 0) > 0}
<Scroller horizontal>
<Scroller horizontal noFade={false}>
<Table
_class={recruit.class.Vacancy}
{config}

2
plugins/recruit-resources/src/components/review/Reviews.svelte
View File

@ -63,7 +63,7 @@
{/if}
</div>
{#if reviews > 0}
<Scroller horizontal>
<Scroller horizontal noFade={false}>
<Table
_class={recruit.class.Review}
config={[

4
plugins/survey-resources/src/components/PollCollection.svelte
View File

@ -18,7 +18,7 @@
import type { Class, Doc, Ref, Space } from '@hcengineering/core'
import { getClient } from '@hcengineering/presentation'
import { Survey } from '@hcengineering/survey'
import { Button, IconAdd, Label, Section, navigate, showPopup } from '@hcengineering/ui'
import { Button, IconAdd, Label, Section, navigate, showPopup, Scroller } from '@hcengineering/ui'
import view, { Viewlet, ViewletPreference } from '@hcengineering/view'
import { Table, ViewletSelector, ViewletSettingButton, getObjectLinkFragment } from '@hcengineering/view-resources'
import SurveyPopup from './SurveyPopup.svelte'
@ -79,6 +79,7 @@
<svelte:fragment slot="content">
{#if polls > 0 && viewlet}
<Scroller horizontal noFade={false}>
<Table
_class={survey.class.Poll}
config={preference?.config ?? viewlet.config}
@ -87,6 +88,7 @@
loadingProps={{ length: polls }}
{readonly}
/>
</Scroller>
{:else}
<div class="antiSection-empty solid flex-col mt-3">
<span class="content-dark-color">

2
plugins/test-management-resources/src/components/test-plan/NewTestPlanPanel.svelte
View File

@ -115,7 +115,7 @@
isHeader={false}
isAside={true}
isSub={false}
adaptive={'default'}
adaptive={'disabled'}
withoutActivity={true}
on:open
on:close={() => dispatch('close')}

2
plugins/test-management-resources/src/components/test-run/NewTestRunPanel.svelte
View File

@ -152,7 +152,7 @@
isHeader={false}
isAside={true}
isSub={false}
adaptive={'default'}
adaptive={'disabled'}
withoutActivity={true}
on:open
on:close={() => dispatch('close')}

2
plugins/view-resources/src/components/list/List.svelte
View File

@ -251,7 +251,7 @@
display: flex;
flex-direction: column;
width: 100%;
height: max-content;
height: 100%;
min-width: auto;
min-height: auto;
}

17
plugins/view-resources/src/components/list/ListCategory.svelte
View File

@ -36,7 +36,8 @@
ExpandCollapse,
mouseAttractor,
Loading,
Label
Label,
Scroller
} from '@hcengineering/ui'
import { AttributeModel, BuildModelKey, ViewOptionModel, ViewOptions, Viewlet } from '@hcengineering/view'
import { createEventDispatcher } from 'svelte'
@ -441,10 +442,10 @@
in:fade|local={{ duration: 50 }}
bind:this={div}
class="category-container"
class:listGrid-container={level === 0}
class:collapsed
class:category-one={oneCat}
class:category-last={lastCat}
class:zero-container={level === 0}
class:disableHeader
on:drop|preventDefault={drop}
on:dragover={dragOverCat}
@ -489,6 +490,7 @@
}}
/>
{/if}
<Scroller horizontal shrink noFade={false}>
<ExpandCollapse isExpanded={!collapsed || dragItemIndex !== undefined}>
{#if !lastLevel}
<slot
@ -589,14 +591,5 @@
{/if}
{/if}
</ExpandCollapse>
</Scroller>
</div>
<style lang="scss">
.zero-container {
border-radius: 0.25rem;
&:not(:first-child) {
margin-top: 0.5rem;
}
}
</style>

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

@ -298,11 +298,13 @@
}
}
&.subLevel {
top: 2.75rem;
top: 0;
padding: 0 2.5rem;
background: var(--theme-list-subheader-color);
border-left: 1px solid var(--theme-list-subheader-divider);
border-right: 1px solid var(--theme-list-subheader-divider);
border-left: 1px solid transparent;
border-right: 1px solid transparent;
// border-left: 1px solid var(--theme-list-subheader-divider);
// border-right: 1px solid var(--theme-list-subheader-divider);
border-bottom: 1px solid var(--theme-list-subheader-divider);
// here should be top 3rem for sticky, but with ExpandCollapse it gives strange behavior