mirror of
https://github.com/hcengineering/platform.git
synced 2025-05-13 10:53:06 +00:00
Change the "Show more" button position in the ListView (#8541)
Signed-off-by: Alexander Platov <alexander.platov@hardcoreeng.com>
(cherry picked from commit f235321e53)
This commit is contained in:
Alexander Platov
GitHub
parent
6904af8028
commit
89f29b13d4
@ -2180,6 +2180,153 @@
|
||||
&:hover .ap-label { color: var(--theme-caption-color); }
|
||||
}
|
||||
|
||||
/* ListView */
|
||||
.listGrid {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 2.5rem 0 0.25rem;
|
||||
width: 100%;
|
||||
height: 2.75rem;
|
||||
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);
|
||||
}
|
||||
&.row:not(.lastCat, .last) {
|
||||
border-bottom: 1px solid var(--theme-divider-color);
|
||||
}
|
||||
&.row.last {
|
||||
border-bottom: 1px solid var(--theme-list-subheader-divider);
|
||||
}
|
||||
&.row.lastCat {
|
||||
border-radius: 0 0 0.25rem 0.25rem;
|
||||
border-bottom: 1px solid var(--theme-list-border-color);
|
||||
}
|
||||
|
||||
&.compactMode {
|
||||
padding: 0 1.125rem 0 0.25rem;
|
||||
}
|
||||
&.hoverable:hover,
|
||||
&.mListGridSelected {
|
||||
background-color: var(--highlight-hover);
|
||||
}
|
||||
&.showMore {
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.checking {
|
||||
background-color: var(--highlight-select);
|
||||
// border-bottom-color: var(--highlight-select);
|
||||
|
||||
&:hover,
|
||||
&.mListGridSelected {
|
||||
background-color: var(--highlight-select-hover);
|
||||
// border-bottom-color: var(--highlight-select-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.draggable-container {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 1rem;
|
||||
cursor: grabbing;
|
||||
|
||||
.draggable-mark {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 0.125rem;
|
||||
width: 0.375rem;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.draggable-mark {
|
||||
opacity: 0.1;
|
||||
}
|
||||
}
|
||||
|
||||
.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(--theme-comp-header-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;
|
||||
}
|
||||
.scroll-box {
|
||||
overflow-x: auto;
|
||||
overflow-y: visible;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0.125rem 0.25rem 0;
|
||||
padding: 0.25rem 0.25rem;
|
||||
min-width: 0;
|
||||
|
||||
&::-webkit-scrollbar:horizontal {
|
||||
height: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.panel-trigger {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 0 0.125rem;
|
||||
right: 0.125rem;
|
||||
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;
|
||||
}
|
||||
}
|
||||
.hidden-panel:focus-within,
|
||||
.hidden-panel:focus,
|
||||
.panel-trigger:focus + .hidden-panel {
|
||||
width: 100%;
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
}
|
||||
|
||||
/* ListView - global style */
|
||||
.list-container .category-container .categoryHeader.subLevel.closed {
|
||||
border-radius: 0 0 0.25rem 0.25rem;
|
||||
|
||||
@ -30,7 +30,14 @@
|
||||
import { IntlString } from '@hcengineering/platform'
|
||||
import { createQuery, getClient } from '@hcengineering/presentation'
|
||||
import { DocWithRank, makeRank } from '@hcengineering/task'
|
||||
import { AnyComponent, AnySvelteComponent, ExpandCollapse, mouseAttractor } from '@hcengineering/ui'
|
||||
import ui, {
|
||||
AnyComponent,
|
||||
AnySvelteComponent,
|
||||
ExpandCollapse,
|
||||
mouseAttractor,
|
||||
Loading,
|
||||
Label
|
||||
} from '@hcengineering/ui'
|
||||
import { AttributeModel, BuildModelKey, ViewOptionModel, ViewOptions, Viewlet } from '@hcengineering/view'
|
||||
import { createEventDispatcher } from 'svelte'
|
||||
import { fade } from 'svelte/transition'
|
||||
@ -463,9 +470,6 @@
|
||||
{lastCat}
|
||||
{viewOptions}
|
||||
{loading}
|
||||
on:more={() => {
|
||||
if (limit !== undefined) limit += 20
|
||||
}}
|
||||
on:collapse={() => {
|
||||
collapsed = !collapsed
|
||||
if (collapsed) {
|
||||
@ -508,6 +512,7 @@
|
||||
dragstart={dragStartHandler}
|
||||
/>
|
||||
{:else if itemModels != null && itemModels.size > 0 && (!collapsed || wasLoaded || dragItemIndex !== undefined)}
|
||||
{@const HLimited = lastLevel ? limited.length : itemProj.length}
|
||||
{#if limited}
|
||||
{#key configurationsVersion}
|
||||
{#each limited as docObject, i (docObject._id)}
|
||||
@ -518,8 +523,8 @@
|
||||
{groupByKey}
|
||||
selected={isSelected(docObject, $focusStore)}
|
||||
checked={selectedObjectIdsSet.has(docObject._id)}
|
||||
last={i === limited.length - 1}
|
||||
lastCat={i === limited.length - 1 && (oneCat || lastCat)}
|
||||
last={i === limited.length - 1 && HLimited >= itemProj.length}
|
||||
lastCat={i === limited.length - 1 && (oneCat || lastCat) && HLimited >= itemProj.length}
|
||||
on:dragstart={(e) => {
|
||||
dragStart(e, docObject, i)
|
||||
}}
|
||||
@ -554,6 +559,28 @@
|
||||
}}
|
||||
/>
|
||||
{/each}
|
||||
{#if HLimited < itemProj.length}
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<div
|
||||
class="listGrid antiList__row row gap-2 flex-grow hoverable showMore last"
|
||||
class:lastCat={oneCat || lastCat}
|
||||
on:mouseenter={() => {
|
||||
$focusStore.focus = undefined
|
||||
}}
|
||||
on:click={() => {
|
||||
if (limit !== undefined) limit += 50
|
||||
}}
|
||||
>
|
||||
<span class="caption-color"><Label label={ui.string.ShowMore} /></span>
|
||||
{#if loading}
|
||||
<div class="p-1">
|
||||
<Loading shrink size={'small'} />
|
||||
</div>
|
||||
{:else}
|
||||
<span class="content-halfcontent-color ml-0-5">({HLimited} / {itemProj.length})</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
{/key}
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
@ -15,8 +15,7 @@
|
||||
<script lang="ts">
|
||||
import { AggregateValue, Doc, PrimitiveType, Ref, Space } from '@hcengineering/core'
|
||||
import { IntlString } from '@hcengineering/platform'
|
||||
import ui, {
|
||||
ActionIcon,
|
||||
import {
|
||||
AnyComponent,
|
||||
AnySvelteComponent,
|
||||
Button,
|
||||
@ -26,7 +25,6 @@
|
||||
IconBack,
|
||||
IconCheck,
|
||||
IconCollapseArrow,
|
||||
IconMoreH,
|
||||
Label,
|
||||
Loading,
|
||||
defaultBackground,
|
||||
@ -153,7 +151,7 @@
|
||||
{/if}
|
||||
|
||||
{#if loading && items.length === 0}
|
||||
<div class="p-1">
|
||||
<div class="ml-2 p-1">
|
||||
<Loading shrink size={'small'} />
|
||||
</div>
|
||||
{:else}
|
||||
@ -165,24 +163,13 @@
|
||||
</span>
|
||||
{/if}
|
||||
{#if limited < itemsProj.length}
|
||||
<div class="antiSection-header__counter flex-row-center mx-2">
|
||||
<span class="caption-color">{limited}</span>
|
||||
<span class="text-xs mx-0-5">/</span>
|
||||
<div class="antiSection-header__counter flex-row-center mx-2 content-dark-color">
|
||||
{itemsProj.length}
|
||||
</div>
|
||||
{#if loading}
|
||||
<div class="p-1">
|
||||
<div class="ml-2 p-1">
|
||||
<Loading shrink size={'small'} />
|
||||
</div>
|
||||
{:else}
|
||||
<ActionIcon
|
||||
size={'small'}
|
||||
icon={IconMoreH}
|
||||
label={ui.string.ShowMore}
|
||||
action={() => {
|
||||
dispatch('more')
|
||||
}}
|
||||
/>
|
||||
{/if}
|
||||
{:else}
|
||||
<span class="antiSection-header__counter ml-2">{itemsProj.length}</span>
|
||||
|
||||
@ -257,146 +257,8 @@
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!--
|
||||
<style lang="scss">
|
||||
.row {
|
||||
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);
|
||||
}
|
||||
.row.lastCat {
|
||||
border-radius: 0 0 0.25rem 0.25rem;
|
||||
border-bottom: 1px solid var(--theme-list-border-color);
|
||||
}
|
||||
|
||||
/* Global styles in components.scss */
|
||||
.listGrid {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 2.5rem 0 0.25rem;
|
||||
width: 100%;
|
||||
height: 2.75rem;
|
||||
min-height: 2.75rem;
|
||||
color: var(--theme-caption-color);
|
||||
background-color: var(--theme-list-row-color);
|
||||
|
||||
&.compactMode {
|
||||
padding: 0 1.125rem 0 0.25rem;
|
||||
}
|
||||
&.mListGridSelected {
|
||||
background-color: var(--highlight-hover);
|
||||
}
|
||||
|
||||
&.checking {
|
||||
background-color: var(--highlight-select);
|
||||
// border-bottom-color: var(--highlight-select);
|
||||
|
||||
&:hover,
|
||||
&.mListGridSelected {
|
||||
background-color: var(--highlight-select-hover);
|
||||
// border-bottom-color: var(--highlight-select-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.draggable-container {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 1rem;
|
||||
cursor: grabbing;
|
||||
|
||||
.draggable-mark {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 0.125rem;
|
||||
width: 0.375rem;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.draggable-mark {
|
||||
opacity: 0.1;
|
||||
}
|
||||
}
|
||||
|
||||
.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(--theme-comp-header-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;
|
||||
}
|
||||
.scroll-box {
|
||||
overflow-x: auto;
|
||||
overflow-y: visible;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0.125rem 0.25rem 0;
|
||||
padding: 0.25rem 0.25rem;
|
||||
min-width: 0;
|
||||
|
||||
&::-webkit-scrollbar:horizontal {
|
||||
height: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.panel-trigger {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 0 0.125rem;
|
||||
right: 0.125rem;
|
||||
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;
|
||||
}
|
||||
}
|
||||
.hidden-panel:focus-within,
|
||||
.hidden-panel:focus,
|
||||
.panel-trigger:focus + .hidden-panel {
|
||||
width: 100%;
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
-->
|
||||
|
||||
Loading…
Reference in New Issue
Block a user