Skip to content

Commit d40e6fe

Browse files
SasLordSasLord
authored
Change the "Show more" button position in the ListView (#8335)
Signed-off-by: Alexander Platov <[email protected]>
1 parent 6bf3ecd commit d40e6fe

File tree

4 files changed

+186
-163
lines changed

4 files changed

+186
-163
lines changed

‎packages/theme/styles/components.scss

+147
Original file line numberDiff line numberDiff line change
@@ -2181,6 +2181,153 @@
21812181
&:hover .ap-label { color: var(--theme-caption-color); }
21822182
}
21832183

2184+
/* ListView */
2185+
.listGrid {
2186+
position: relative;
2187+
display: flex;
2188+
align-items: center;
2189+
padding: 0 2.5rem 0 0.25rem;
2190+
width: 100%;
2191+
height: 2.75rem;
2192+
min-height: 2.75rem;
2193+
color: var(--theme-caption-color);
2194+
background-color: var(--theme-list-row-color);
2195+
2196+
&.row {
2197+
border-left: 1px solid var(--theme-list-border-color);
2198+
border-right: 1px solid var(--theme-list-border-color);
2199+
}
2200+
&.row:not(.lastCat, .last) {
2201+
border-bottom: 1px solid var(--theme-divider-color);
2202+
}
2203+
&.row.last {
2204+
border-bottom: 1px solid var(--theme-list-subheader-divider);
2205+
}
2206+
&.row.lastCat {
2207+
border-radius: 0 0 0.25rem 0.25rem;
2208+
border-bottom: 1px solid var(--theme-list-border-color);
2209+
}
2210+
2211+
&.compactMode {
2212+
padding: 0 1.125rem 0 0.25rem;
2213+
}
2214+
&.hoverable:hover,
2215+
&.mListGridSelected {
2216+
background-color: var(--highlight-hover);
2217+
}
2218+
&.showMore {
2219+
justify-content: center;
2220+
cursor: pointer;
2221+
}
2222+
2223+
&.checking {
2224+
background-color: var(--highlight-select);
2225+
// border-bottom-color: var(--highlight-select);
2226+
2227+
&:hover,
2228+
&.mListGridSelected {
2229+
background-color: var(--highlight-select-hover);
2230+
// border-bottom-color: var(--highlight-select-hover);
2231+
}
2232+
}
2233+
2234+
.draggable-container {
2235+
position: absolute;
2236+
left: 0;
2237+
display: flex;
2238+
align-items: center;
2239+
height: 100%;
2240+
width: 1rem;
2241+
cursor: grabbing;
2242+
2243+
.draggable-mark {
2244+
display: flex;
2245+
flex-direction: column;
2246+
justify-content: center;
2247+
align-items: center;
2248+
margin-left: 0.125rem;
2249+
width: 0.375rem;
2250+
height: 100%;
2251+
opacity: 0;
2252+
}
2253+
}
2254+
&:hover {
2255+
.draggable-mark {
2256+
opacity: 0.1;
2257+
}
2258+
}
2259+
2260+
.hidden-panel,
2261+
.panel-trigger {
2262+
position: absolute;
2263+
display: flex;
2264+
align-items: center;
2265+
top: 0;
2266+
bottom: 0;
2267+
height: 100%;
2268+
}
2269+
.hidden-panel {
2270+
overflow: hidden;
2271+
right: 0;
2272+
width: 80%;
2273+
background-color: var(--theme-comp-header-color);
2274+
opacity: 0;
2275+
pointer-events: none;
2276+
z-index: 2;
2277+
transition-property: opacity, width;
2278+
transition-duration: 0.15s;
2279+
transition-timing-function: var(--timing-main);
2280+
2281+
.header {
2282+
display: flex;
2283+
flex-direction: column;
2284+
justify-content: center;
2285+
margin: 0 0.25rem;
2286+
width: 0.375rem;
2287+
min-width: 0.375rem;
2288+
height: 100%;
2289+
opacity: 0.25;
2290+
}
2291+
.scroll-box {
2292+
overflow-x: auto;
2293+
overflow-y: visible;
2294+
display: flex;
2295+
align-items: center;
2296+
margin: 0.125rem 0.25rem 0;
2297+
padding: 0.25rem 0.25rem;
2298+
min-width: 0;
2299+
2300+
&::-webkit-scrollbar:horizontal {
2301+
height: 3px;
2302+
}
2303+
}
2304+
}
2305+
.panel-trigger {
2306+
flex-direction: column;
2307+
justify-content: center;
2308+
padding: 0 0.125rem;
2309+
right: 0.125rem;
2310+
width: 0.75rem;
2311+
border: 1px solid transparent;
2312+
border-radius: 0.25rem;
2313+
opacity: 0.1;
2314+
z-index: 1;
2315+
transition: opacity 0.15s var(--timing-main);
2316+
2317+
&:focus {
2318+
border-color: var(--primary-edit-border-color);
2319+
opacity: 0.25;
2320+
}
2321+
}
2322+
.hidden-panel:focus-within,
2323+
.hidden-panel:focus,
2324+
.panel-trigger:focus + .hidden-panel {
2325+
width: 100%;
2326+
opacity: 1;
2327+
pointer-events: all;
2328+
}
2329+
}
2330+
21842331
/* ListView - global style */
21852332
.list-container .category-container .categoryHeader.subLevel.closed {
21862333
border-radius: 0 0 0.25rem 0.25rem;

‎plugins/view-resources/src/components/list/ListCategory.svelte

+33-6
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,14 @@
3030
import { IntlString } from '@hcengineering/platform'
3131
import { createQuery, getClient } from '@hcengineering/presentation'
3232
import { DocWithRank, makeRank } from '@hcengineering/task'
33-
import { AnyComponent, AnySvelteComponent, ExpandCollapse, mouseAttractor } from '@hcengineering/ui'
33+
import ui, {
34+
AnyComponent,
35+
AnySvelteComponent,
36+
ExpandCollapse,
37+
mouseAttractor,
38+
Loading,
39+
Label
40+
} from '@hcengineering/ui'
3441
import { AttributeModel, BuildModelKey, ViewOptionModel, ViewOptions, Viewlet } from '@hcengineering/view'
3542
import { createEventDispatcher } from 'svelte'
3643
import { fade } from 'svelte/transition'
@@ -463,9 +470,6 @@
463470
{lastCat}
464471
{viewOptions}
465472
{loading}
466-
on:more={() => {
467-
if (limit !== undefined) limit += 20
468-
}}
469473
on:collapse={() => {
470474
collapsed = !collapsed
471475
if (collapsed) {
@@ -508,6 +512,7 @@
508512
dragstart={dragStartHandler}
509513
/>
510514
{:else if itemModels != null && itemModels.size > 0 && (!collapsed || wasLoaded || dragItemIndex !== undefined)}
515+
{@const HLimited = lastLevel ? limited.length : itemProj.length}
511516
{#if limited}
512517
{#key configurationsVersion}
513518
{#each limited as docObject, i (docObject._id)}
@@ -518,8 +523,8 @@
518523
{groupByKey}
519524
selected={isSelected(docObject, $focusStore)}
520525
checked={selectedObjectIdsSet.has(docObject._id)}
521-
last={i === limited.length - 1}
522-
lastCat={i === limited.length - 1 && (oneCat || lastCat)}
526+
last={i === limited.length - 1 && HLimited >= itemProj.length}
527+
lastCat={i === limited.length - 1 && (oneCat || lastCat) && HLimited >= itemProj.length}
523528
on:dragstart={(e) => {
524529
dragStart(e, docObject, i)
525530
}}
@@ -554,6 +559,28 @@
554559
}}
555560
/>
556561
{/each}
562+
{#if HLimited < itemProj.length}
563+
<!-- svelte-ignore a11y-click-events-have-key-events -->
564+
<div
565+
class="listGrid antiList__row row gap-2 flex-grow hoverable showMore last"
566+
class:lastCat={oneCat || lastCat}
567+
on:mouseenter={() => {
568+
$focusStore.focus = undefined
569+
}}
570+
on:click={() => {
571+
if (limit !== undefined) limit += 50
572+
}}
573+
>
574+
<span class="caption-color"><Label label={ui.string.ShowMore} /></span>
575+
{#if loading}
576+
<div class="p-1">
577+
<Loading shrink size={'small'} />
578+
</div>
579+
{:else}
580+
<span class="content-halfcontent-color ml-0-5">({HLimited} / {itemProj.length})</span>
581+
{/if}
582+
</div>
583+
{/if}
557584
{/key}
558585
{/if}
559586
{/if}

‎plugins/view-resources/src/components/list/ListHeader.svelte

+4-17
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,7 @@
1515
<script lang="ts">
1616
import { AggregateValue, Doc, PrimitiveType, Ref, Space } from '@hcengineering/core'
1717
import { IntlString } from '@hcengineering/platform'
18-
import ui, {
19-
ActionIcon,
18+
import {
2019
AnyComponent,
2120
AnySvelteComponent,
2221
Button,
@@ -26,7 +25,6 @@
2625
IconBack,
2726
IconCheck,
2827
IconCollapseArrow,
29-
IconMoreH,
3028
Label,
3129
Loading,
3230
defaultBackground,
@@ -153,7 +151,7 @@
153151
{/if}
154152

155153
{#if loading && items.length === 0}
156-
<div class="p-1">
154+
<div class="ml-2 p-1">
157155
<Loading shrink size={'small'} />
158156
</div>
159157
{:else}
@@ -165,24 +163,13 @@
165163
</span>
166164
{/if}
167165
{#if limited < itemsProj.length}
168-
<div class="antiSection-header__counter flex-row-center mx-2">
169-
<span class="caption-color">{limited}</span>
170-
<span class="text-xs mx-0-5">/</span>
166+
<div class="antiSection-header__counter flex-row-center mx-2 content-dark-color">
171167
{itemsProj.length}
172168
</div>
173169
{#if loading}
174-
<div class="p-1">
170+
<div class="ml-2 p-1">
175171
<Loading shrink size={'small'} />
176172
</div>
177-
{:else}
178-
<ActionIcon
179-
size={'small'}
180-
icon={IconMoreH}
181-
label={ui.string.ShowMore}
182-
action={() => {
183-
dispatch('more')
184-
}}
185-
/>
186173
{/if}
187174
{:else}
188175
<span class="antiSection-header__counter ml-2">{itemsProj.length}</span>

0 commit comments

Comments
 (0)