-
Notifications
You must be signed in to change notification settings - Fork 424
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #31 from nextcloud/multiselect
Added multiselect
- Loading branch information
Showing
4 changed files
with
231 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| /** | ||
| * @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com> | ||
| * | ||
| * @author John Molakvoæ <skjnldsv@protonmail.com> | ||
| * | ||
| * @license GNU AGPL version 3 or any later version | ||
| * | ||
| * This program is free software: you can redistribute it and/or modify | ||
| * it under the terms of the GNU Affero General Public License as | ||
| * published by the Free Software Foundation, either version 3 of the | ||
| * License, or (at your option) any later version. | ||
| * | ||
| * This program is distributed in the hope that it will be useful, | ||
| * but WITHOUT ANY WARRANTY; without even the implied warranty of | ||
| * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | ||
| * GNU Affero General Public License for more details. | ||
| * | ||
| * You should have received a copy of the GNU Affero General Public License | ||
| * along with this program. If not, see <http://www.gnu.org/licenses/>. | ||
| * | ||
| */ | ||
| import Multiselect from 'vue-multiselect' | ||
| import './index.scss' | ||
|
|
||
| export default Multiselect | ||
| export { Multiselect } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,201 @@ | ||
| .multiselect { | ||
| margin: 1px 2px; | ||
| padding: 0 !important; | ||
| display: inline-block; | ||
| width: 160px; | ||
| position: relative; | ||
| background-color: var(--color-main-background); | ||
| &.multiselect--active { | ||
| /* Opened: force display the input */ | ||
| input.multiselect__input { | ||
| opacity: 1 !important; | ||
| cursor: text !important; | ||
| } | ||
| } | ||
| &.multiselect--disabled, | ||
| &.multiselect--disabled .multiselect__single { | ||
| background-color: var(--color-background-dark) !important; | ||
| } | ||
| .multiselect__tags { | ||
| /* space between tags and limit tag */ | ||
| $space-between: 5px; | ||
| display: flex; | ||
| flex-wrap: nowrap; | ||
| overflow: hidden; | ||
| border: 1px solid var(--color-border-dark); | ||
| cursor: pointer; | ||
| position: relative; | ||
| border-radius: 3px; | ||
| height: 34px; | ||
| /* tag wrapper */ | ||
| .multiselect__tags-wrap { | ||
| align-items: center; | ||
| display: inline-flex; | ||
| overflow: hidden; | ||
| max-width: 100%; | ||
| position: relative; | ||
| padding: 3px $space-between; | ||
| flex-grow: 1; | ||
| /* no tags or simple select? Show input directly | ||
| input is used to display single value */ | ||
| &:empty ~ input.multiselect__input { | ||
| opacity: 1 !important; | ||
| /* hide default empty text, show input instead */ | ||
| + span:not(.multiselect__single) { | ||
| display: none; | ||
| } | ||
| } | ||
| /* selected tag */ | ||
| .multiselect__tag { | ||
| flex: 1 0 0; | ||
| line-height: 20px; | ||
| padding: 1px 5px; | ||
| background-image: none; | ||
| color: var(--color-text-lighter); | ||
| border: 1px solid var(--color-border-dark); | ||
| display: inline-flex; | ||
| align-items: center; | ||
| border-radius: 3px; | ||
| /* require to override the default width | ||
| and force the tag to shring properly */ | ||
| min-width: 0; | ||
| max-width: 50%; | ||
| max-width: fit-content; | ||
| max-width: -moz-fit-content; | ||
| /* css hack, detect if more than two tags | ||
| if so, flex-basis is set to half */ | ||
| &:only-child { | ||
| flex: 0 1 auto; | ||
| } | ||
| &:not(:last-child) { | ||
| margin-right: $space-between; | ||
| } | ||
| /* ellipsis the groups to be sure | ||
| we display at least two of them */ | ||
| > span { | ||
| white-space: nowrap; | ||
| text-overflow: ellipsis; | ||
| overflow: hidden; | ||
| } | ||
| } | ||
| } | ||
| /* Single select default value */ | ||
| .multiselect__single { | ||
| padding: 8px 10px; | ||
| flex: 0 0 100%; | ||
| z-index: 1; /* above input */ | ||
| background-color: var(--color-main-background); | ||
| cursor: pointer; | ||
| line-height: 17px; | ||
| } | ||
| /* displayed text if tag limit reached */ | ||
| .multiselect__strong, | ||
| .multiselect__limit { | ||
| flex: 0 0 auto; | ||
| line-height: 20px; | ||
| color: var(--color-text-lighter); | ||
| display: inline-flex; | ||
| align-items: center; | ||
| opacity: .7; | ||
| margin-right: $space-between; | ||
| /* above the input */ | ||
| z-index: 5; | ||
| } | ||
| /* default multiselect input for search and placeholder */ | ||
| input.multiselect__input { | ||
| width: 100% !important; | ||
| position: absolute !important; | ||
| margin: 0; | ||
| opacity: 0; | ||
| /* let's leave it on top of tags but hide it */ | ||
| height: 100%; | ||
| border: none; | ||
| /* override hide to force show the placeholder */ | ||
| display: block !important; | ||
| /* only when not active */ | ||
| cursor: pointer; | ||
| } | ||
| } | ||
| /* results wrapper */ | ||
| .multiselect__content-wrapper { | ||
| position: absolute; | ||
| width: 100%; | ||
| margin-top: -1px; | ||
| border: 1px solid var(--color-border-dark); | ||
| background: var(--color-main-background); | ||
| z-index: 50; | ||
| max-height: 250px; | ||
| overflow-y: auto; | ||
| .multiselect__content { | ||
| width: 100%; | ||
| padding: 5px 0; | ||
| } | ||
| li { | ||
| padding: 5px; | ||
| position: relative; | ||
| display: flex; | ||
| align-items: center; | ||
| background-color: transparent; | ||
| &, | ||
| span { | ||
| cursor: pointer; | ||
| } | ||
| > span { | ||
| white-space: nowrap; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| height: 20px; | ||
| margin: 0; | ||
| min-height: 1em; | ||
| -webkit-touch-callout: none; | ||
| -webkit-user-select: none; | ||
| -moz-user-select: none; | ||
| -ms-user-select: none; | ||
| user-select: none; | ||
| display: inline-flex; | ||
| align-items: center; | ||
| background-color: transparent !important; | ||
| color: var(--color-text-lighter); | ||
| width: 100%; | ||
| /* selected checkmark icon */ | ||
| &::before { | ||
| content: ' '; | ||
| background-image: var(--icon-checkmark-000); | ||
| background-repeat: no-repeat; | ||
| background-position: center; | ||
| min-width: 16px; | ||
| min-height: 16px; | ||
| display: block; | ||
| opacity: .5; | ||
| margin-right: 5px; | ||
| visibility: hidden; | ||
| } | ||
| &.multiselect__option--disabled { | ||
| background-color: var(--color-background-dark); | ||
| opacity: .5; | ||
| } | ||
| /* add the prop tag-placeholder="create" to add the + | ||
| * icon on top of an unknown-and-ready-to-be-created entry | ||
| */ | ||
| &[data-select='create'] { | ||
| &::before { | ||
| background-image: var(--icon-add-000); | ||
| visibility: visible; | ||
| } | ||
| } | ||
| &.multiselect__option--highlight { | ||
| color: var(--color-main-text); | ||
| } | ||
| &:not(.multiselect__option--disabled):hover::before { | ||
| opacity: .3; | ||
| } | ||
| &.multiselect__option--selected, | ||
| &:not(.multiselect__option--disabled):hover { | ||
| &::before { | ||
| visibility: visible; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters