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 id = null
|
||||||
export let placeholder = "Choose an option or type"
|
export let placeholder = "Choose an option or type"
|
||||||
export let disabled = false
|
export let disabled = false
|
||||||
export let readonly = false
|
|
||||||
export let updateOnChange = true
|
export let updateOnChange = true
|
||||||
export let error = null
|
export let error = null
|
||||||
export let secondaryOptions = []
|
export let secondaryOptions = []
|
||||||
|
@ -50,17 +49,11 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
const updateValue = newValue => {
|
const updateValue = newValue => {
|
||||||
if (readonly) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
dispatch("change", newValue)
|
dispatch("change", newValue)
|
||||||
}
|
}
|
||||||
|
|
||||||
const onClickSecondary = () => {
|
const onClickSecondary = () => {
|
||||||
dispatch("click")
|
dispatch("click")
|
||||||
if (readonly) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
secondaryOpen = true
|
secondaryOpen = true
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -80,24 +73,15 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
const onBlur = event => {
|
const onBlur = event => {
|
||||||
if (readonly) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
focus = false
|
focus = false
|
||||||
updateValue(event.target.value)
|
updateValue(event.target.value)
|
||||||
}
|
}
|
||||||
|
|
||||||
const onInput = event => {
|
const onInput = event => {
|
||||||
if (readonly || !updateOnChange) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
updateValue(event.target.value)
|
updateValue(event.target.value)
|
||||||
}
|
}
|
||||||
|
|
||||||
const updateValueOnEnter = event => {
|
const updateValueOnEnter = event => {
|
||||||
if (readonly) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (event.key === "Enter") {
|
if (event.key === "Enter") {
|
||||||
updateValue(event.target.value)
|
updateValue(event.target.value)
|
||||||
}
|
}
|
||||||
|
@ -140,9 +124,10 @@
|
||||||
value={primaryLabel || ""}
|
value={primaryLabel || ""}
|
||||||
placeholder={placeholder || ""}
|
placeholder={placeholder || ""}
|
||||||
{disabled}
|
{disabled}
|
||||||
{readonly}
|
readonly
|
||||||
class="spectrum-Textfield-input spectrum-InputGroup-input"
|
class="spectrum-Textfield-input spectrum-InputGroup-input"
|
||||||
class:labelPadding={iconData}
|
class:labelPadding={iconData}
|
||||||
|
class:open={primaryOpen}
|
||||||
/>
|
/>
|
||||||
{#if primaryValue}
|
{#if primaryValue}
|
||||||
<button
|
<button
|
||||||
|
@ -198,7 +183,7 @@
|
||||||
</li>
|
</li>
|
||||||
{/if}
|
{/if}
|
||||||
{#each groupTitles as title}
|
{#each groupTitles as title}
|
||||||
<div class="spectrum-Menu-item">
|
<div class="spectrum-Menu-item title">
|
||||||
<Detail>{title}</Detail>
|
<Detail>{title}</Detail>
|
||||||
</div>
|
</div>
|
||||||
{#if primaryOptions}
|
{#if primaryOptions}
|
||||||
|
@ -433,4 +418,18 @@
|
||||||
.spectrum-Search-clearButton {
|
.spectrum-Search-clearButton {
|
||||||
position: absolute;
|
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>
|
</style>
|
||||||
|
|
|
@ -288,7 +288,7 @@
|
||||||
<!-- User groups -->
|
<!-- User groups -->
|
||||||
<Layout gap="S" noPadding>
|
<Layout gap="S" noPadding>
|
||||||
<div class="tableTitle">
|
<div class="tableTitle">
|
||||||
<Heading size="S">Groups</Heading>
|
<Heading size="S">User groups</Heading>
|
||||||
<div bind:this={popoverAnchor}>
|
<div bind:this={popoverAnchor}>
|
||||||
<Button
|
<Button
|
||||||
on:click={popover.show()}
|
on:click={popover.show()}
|
||||||
|
@ -296,13 +296,13 @@
|
||||||
secondary
|
secondary
|
||||||
newStyles
|
newStyles
|
||||||
>
|
>
|
||||||
Add to group
|
Add to user group
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
<Popover align="right" bind:this={popover} anchor={popoverAnchor}>
|
<Popover align="right" bind:this={popover} anchor={popoverAnchor}>
|
||||||
<UserGroupPicker
|
<UserGroupPicker
|
||||||
key={"name"}
|
key={"name"}
|
||||||
title={"Group"}
|
title={"User group"}
|
||||||
bind:searchTerm
|
bind:searchTerm
|
||||||
bind:selected={selectedGroups}
|
bind:selected={selectedGroups}
|
||||||
bind:filtered={filteredGroups}
|
bind:filtered={filteredGroups}
|
||||||
|
|
|
@ -32,7 +32,7 @@
|
||||||
$: optionSections = {
|
$: optionSections = {
|
||||||
...($auth.groupsEnabled &&
|
...($auth.groupsEnabled &&
|
||||||
filteredGroups.length && {
|
filteredGroups.length && {
|
||||||
groups: {
|
["User groups"]: {
|
||||||
data: filteredGroups,
|
data: filteredGroups,
|
||||||
getLabel: group => group.name,
|
getLabel: group => group.name,
|
||||||
getValue: group => group._id,
|
getValue: group => group._id,
|
||||||
|
@ -97,7 +97,6 @@
|
||||||
{#each appData as input, index}
|
{#each appData as input, index}
|
||||||
<PickerDropdown
|
<PickerDropdown
|
||||||
autocomplete
|
autocomplete
|
||||||
readonly
|
|
||||||
primaryOptions={optionSections}
|
primaryOptions={optionSections}
|
||||||
secondaryOptions={$roles}
|
secondaryOptions={$roles}
|
||||||
secondaryPlaceholder="Access"
|
secondaryPlaceholder="Access"
|
||||||
|
|
Loading…
Reference in a new issue