wieerwill/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2025-04-15 04:49:00 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Fixed drop-down lists (#2483)

Browse Source
This commit is contained in:
Alexander Platov 2022-12-29 05:57:46 +03:00 committed by GitHub
parent 68439fd6f3
commit 415e545d00
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 81 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/presentation/src/components/UserBox.svelte
View File

@ -124,17 +124,18 @@
<div
class="w-full h-full flex-streatch"
on:click={_click}
class:content-color={selected === undefined}
use:tooltip={selected !== undefined ? { label: getEmbeddedLabel(getName(selected)) } : undefined}
>
<slot name="content" />
</div>
{:else}
<Button {focusIndex} width={width ?? 'min-content'} {size} {kind} {justify} {showTooltip} on:click={_click}>
<span
<div
slot="content"
class="overflow-label flex-grow"
class="overflow-label flex-row-center"
class:flex-between={showNavigate && selected}
class:dark-color={value == null}
class:content-color={value == null}
>
<div
class="disabled"
@ -150,7 +151,7 @@
{getName(selected)}
{/if}
{:else}
<div class="flex-presenter">
<div class="flex-presenter not-selected">
{#if icon}
<div class="icon" class:small-gap={size === 'inline' || size === 'small'}>
<Icon {icon} size={kind === 'link' ? 'small' : size} />
@ -163,6 +164,7 @@
{/if}
</div>
{#if selected && showNavigate}
<div class="min-w-2" />
<ActionIcon
icon={IconOpen}
size={'small'}
@ -173,7 +175,7 @@
}}
/>
{/if}
</span>
</div>
</Button>
{/if}
</div>

1
packages/presentation/src/components/UserBoxList.svelte
View File

@ -73,6 +73,7 @@
<Button
icon={persons.length === 0 ? Members : undefined}
label={persons.length === 0 ? emptyLabel : undefined}
notSelected={persons.length === 0}
width={width ?? 'min-content'}
{kind}
{size}

7
packages/theme/styles/_layouts.scss
View File

@ -286,6 +286,13 @@ input.search {
}
.action { visibility: visible; }
}
&.not-selected {
.label { color: var(--content-color); }
&:hover .label,
&:hover .icon {
color: var(--accent-color);
}
}
}
.flex-presenter {
display: flex;

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

@ -22,7 +22,7 @@
.ac-header {
padding: 0.5rem 1.5rem 0.5rem 2.25rem;
// height: 3.5rem;
min-height: 2.5rem;
// min-height: 2.5rem;
&.short {
display: flex;

11
packages/ui/src/components/Button.svelte
View File

@ -35,6 +35,7 @@
export let resetIconSize: boolean = false
export let highlight: boolean = false
export let selected: boolean = false
export let notSelected: boolean = false
export let focus: boolean = false
export let click: boolean = false
export let title: string | undefined = undefined
@ -90,6 +91,7 @@
class:only-icon={iconOnly}
class:highlight
class:selected
class:notSelected
disabled={disabled || loading}
style:width
{title}
@ -364,6 +366,15 @@
}
}
&.notSelected {
color: var(--content-color);
&:hover,
&:hover .btn-icon {
color: var(--accent-color);
}
}
&.dangerous {
color: var(--white-color);
background-color: var(--dangerous-bg-color);

2
packages/ui/src/components/DropdownLabels.svelte
View File

@ -77,7 +77,7 @@
}
}}
>
<span slot="content" class="overflow-label disabled" class:content-accent-color={selectedItem === undefined}>
<span slot="content" class="overflow-label disabled" class:content-color={selectedItem === undefined}>
{#if selectedItem}{selectedItem.label}{:else}<Label label={label ?? ui.string.NotSelected} />{/if}
</span>
</Button>

9
packages/ui/src/components/calendar/DatePresenter.svelte
View File

@ -106,7 +106,7 @@
{/if}
{/if}
{:else if shouldShowLabel}
<Label label={labelNull} />
<span class="not-selected"><Label label={labelNull} /></span>
{/if}
</button>
@ -161,10 +161,17 @@
color: var(--error-color);
}
}
.not-selected {
color: var(--content-color);
}
&:hover {
color: var(--caption-color);
transition-duration: 0;
.not-selected {
color: var(--accent-color);
}
}
&.editable {
cursor: pointer;

2
packages/ui/src/components/calendar/DateRangePresenter.svelte
View File

@ -390,7 +390,7 @@
{/if}
{/if}
{:else}
<div class="dark-color">
<div class="content-color">
<Label label={labelNull} />
</div>
{/if}

1
plugins/contact-resources/src/components/ChannelsDropdown.svelte
View File

@ -271,6 +271,7 @@
bind:input={addBtn}
icon={contact.icon.SocialEdit}
label={presentation.string.AddSocialLinks}
notSelected
{kind}
{size}
{shape}

36
plugins/recruit-resources/src/components/CreateApplication.svelte
View File

@ -18,14 +18,20 @@
import ExpandRightDouble from '@hcengineering/contact-resources/src/components/icons/ExpandRightDouble.svelte'
import { Account, Class, Client, Doc, FindOptions, generateId, Ref, SortingOrder, Space } from '@hcengineering/core'
import { getResource, OK, Resource, Severity, Status } from '@hcengineering/platform'
import { Card, createQuery, EmployeeBox, getClient, SpaceSelect, UserBox } from '@hcengineering/presentation'
import presentation, {
Card,
createQuery,
EmployeeBox,
getClient,
SpaceSelect,
UserBox
} from '@hcengineering/presentation'
import type { Applicant, Candidate, Vacancy } from '@hcengineering/recruit'
import task, { calcRank, SpaceWithStates, State } from '@hcengineering/task'
import ui, {
Button,
ColorPopup,
createFocusManager,
eventToHTMLElement,
FocusHandler,
getPlatformColor,
Label,
@ -249,6 +255,7 @@
}
let verticalContent: boolean = false
$: verticalContent = $deviceInfo.isMobile && $deviceInfo.isPortrait
let btn: HTMLButtonElement
</script>
<FocusHandler {manager} />
@ -333,11 +340,12 @@
width="min-content"
size="small"
kind="no-border"
on:click={(ev) => {
bind:input={btn}
on:click={() => {
showPopup(
ColorPopup,
{ value: states, searchable: true, placeholder: ui.string.SearchDots },
eventToHTMLElement(ev),
btn,
(result) => {
if (result && result.id) {
selectedState = { ...result, _id: result.id, title: result.label }
@ -347,10 +355,13 @@
)
}}
>
<div slot="content" class="flex-row-center pointer-events-none">
<div slot="content" class="flex-row-center" class:empty={!selectedState}>
{#if selectedState}
<div class="color" style="background-color: {getPlatformColor(selectedState.color)}" />
<span class="label overflow-label">{selectedState.title}</span>
{:else}
<div class="color" />
<span class="label overflow-label"><Label label={presentation.string.NotSelected} /></span>
{/if}
</div>
</Button>
@ -382,4 +393,19 @@
text-overflow: ellipsis;
overflow: hidden;
}
.empty {
.color {
border-color: var(--content-color);
}
.label {
color: var(--content-color);
}
&:hover .color {
border-color: var(--accent-color);
}
&:hover .label {
color: var(--accent-color);
}
}
</style>

7
plugins/tags-resources/src/components/TagsDropdownEditor.svelte
View File

@ -73,12 +73,15 @@
async function removeTag (id: Ref<TagReference>): Promise<void> {
dispatch('delete', id)
}
$: console.log('[!!!] items: ', items)
$: console.log('[!!!] items - count: ', items.length)
</script>
<Button
{disabled}
icon={key.attr.icon ?? tags.icon.Tags}
label={items.length > 0 ? undefined : key.attr.label}
notSelected={items.length === 0}
width={width ?? 'min-content'}
{kind}
{size}
@ -88,11 +91,11 @@
>
<svelte:fragment slot="content">
{#if items.length > 0}
<div class="flex-row-center flex-nowrap overflow-label disabled">
<span class="flex-row-center flex-nowrap overflow-label disabled">
{#await translate(countLabel, { count: items.length }) then text}
{text}
{/await}
</div>
</span>
{/if}
</svelte:fragment>
</Button>

6
plugins/tracker-resources/src/components/ProjectSelector.svelte
View File

@ -117,9 +117,9 @@
on:click={handleProjectEditorOpened}
><svelte:fragment slot="content">
<span
class="{enlargedText
? 'ml-1 text-base fs-bold'
: 'text-md'} overflow-label content-accent-color pointer-events-none"
class="{enlargedText ? 'ml-1 text-base fs-bold' : 'text-md'} overflow-label {!value
? 'content-color'
: 'content-accent-color'} pointer-events-none"
>
<Label label={getEmbeddedLabel(projectText)} />
</span>

1
plugins/tracker-resources/src/components/issues/timereport/EstimationEditor.svelte
View File

@ -79,6 +79,7 @@
<Button
showTooltip={isEditable ? { label: tracker.string.Estimation } : undefined}
label={tracker.string.TimeSpendValue}
notSelected={value.estimation === 0}
labelParams={{ value: value.estimation }}
icon={tracker.icon.Estimation}
{justify}

4
plugins/tracker-resources/src/components/sprints/SprintSelector.svelte
View File

@ -121,7 +121,9 @@
>
<svelte:fragment slot="content">
<span
class="{enlargedText ? 'text-base' : 'text-md'} fs-bold overflow-label content-accent-color pointer-events-none"
class="{enlargedText ? 'text-base' : 'text-md'} fs-bold overflow-label {!value
? 'content-color'
: 'content-accent-color'} pointer-events-none"
>
<Label label={getEmbeddedLabel(sprintText)} />
</span>