Fix picker dropdown UX issues. Rename some usages of groups to user groups.
This commit is contained in:
parent
ad65bcaedc
commit
9e90180c9d
3 changed files with 21 additions and 23 deletions
|
@ -15,7 +15,6 @@
|
|||
export let id = null
|
||||
export let placeholder = "Choose an option or type"
|
||||
export let disabled = false
|
||||
export let readonly = false
|
||||
export let updateOnChange = true
|
||||
export let error = null
|
||||
export let secondaryOptions = []
|
||||
|
@ -50,17 +49,11 @@
|
|||
}
|
||||
|
||||
const updateValue = newValue => {
|
||||
if (readonly) {
|
||||
return
|
||||
}
|
||||
dispatch("change", newValue)
|
||||
}
|
||||
|
||||
const onClickSecondary = () => {
|
||||
dispatch("click")
|
||||
if (readonly) {
|
||||
return
|
||||
}
|
||||
secondaryOpen = true
|
||||
}
|
||||
|
||||
|
@ -80,24 +73,15 @@
|
|||
}
|
||||
|
||||
const onBlur = event => {
|
||||
if (readonly) {
|
||||
return
|
||||
}
|
||||
focus = false
|
||||
updateValue(event.target.value)
|
||||
}
|
||||
|
||||
const onInput = event => {
|
||||
if (readonly || !updateOnChange) {
|
||||
return
|
||||
}
|
||||
updateValue(event.target.value)
|
||||
}
|
||||
|
||||
const updateValueOnEnter = event => {
|
||||
if (readonly) {
|
||||
return
|
||||
}
|
||||
if (event.key === "Enter") {
|
||||
updateValue(event.target.value)
|
||||
}
|
||||
|
@ -140,9 +124,10 @@
|
|||
value={primaryLabel || ""}
|
||||
placeholder={placeholder || ""}
|
||||
{disabled}
|
||||
{readonly}
|
||||
readonly
|
||||
class="spectrum-Textfield-input spectrum-InputGroup-input"
|
||||
class:labelPadding={iconData}
|
||||
class:open={primaryOpen}
|
||||
/>
|
||||
{#if primaryValue}
|
||||
<button
|
||||
|
@ -198,7 +183,7 @@
|
|||
</li>
|
||||
{/if}
|
||||
{#each groupTitles as title}
|
||||
<div class="spectrum-Menu-item">
|
||||
<div class="spectrum-Menu-item title">
|
||||
<Detail>{title}</Detail>
|
||||
</div>
|
||||
{#if primaryOptions}
|
||||
|
@ -433,4 +418,18 @@
|
|||
.spectrum-Search-clearButton {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* Fix focus borders to show only when opened */
|
||||
.spectrum-Textfield-input {
|
||||
border-color: var(--spectrum-global-color-gray-400) !important;
|
||||
border-right-width: 1px;
|
||||
}
|
||||
.spectrum-Textfield-input.open {
|
||||
border-color: var(--spectrum-global-color-blue-400) !important;
|
||||
}
|
||||
|
||||
/* Fix being able to hover and select titles */
|
||||
.spectrum-Menu-item.title {
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -288,7 +288,7 @@
|
|||
<!-- User groups -->
|
||||
<Layout gap="S" noPadding>
|
||||
<div class="tableTitle">
|
||||
<Heading size="S">Groups</Heading>
|
||||
<Heading size="S">User groups</Heading>
|
||||
<div bind:this={popoverAnchor}>
|
||||
<Button
|
||||
on:click={popover.show()}
|
||||
|
@ -296,13 +296,13 @@
|
|||
secondary
|
||||
newStyles
|
||||
>
|
||||
Add to group
|
||||
Add to user group
|
||||
</Button>
|
||||
</div>
|
||||
<Popover align="right" bind:this={popover} anchor={popoverAnchor}>
|
||||
<UserGroupPicker
|
||||
key={"name"}
|
||||
title={"Group"}
|
||||
title={"User group"}
|
||||
bind:searchTerm
|
||||
bind:selected={selectedGroups}
|
||||
bind:filtered={filteredGroups}
|
||||
|
|
|
@ -32,7 +32,7 @@
|
|||
$: optionSections = {
|
||||
...($auth.groupsEnabled &&
|
||||
filteredGroups.length && {
|
||||
groups: {
|
||||
["User groups"]: {
|
||||
data: filteredGroups,
|
||||
getLabel: group => group.name,
|
||||
getValue: group => group._id,
|
||||
|
@ -97,7 +97,6 @@
|
|||
{#each appData as input, index}
|
||||
<PickerDropdown
|
||||
autocomplete
|
||||
readonly
|
||||
primaryOptions={optionSections}
|
||||
secondaryOptions={$roles}
|
||||
secondaryPlaceholder="Access"
|
||||
|
|
Loading…
Reference in a new issue