ami/tl-vikunja
1
0
Fork 0
Code Activity

Replace vue-multiselect with a custom component (#366)

Browse Source 
Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/366
Co-authored-by: konrad <konrad@kola-entertainments.de>
Co-committed-by: konrad <konrad@kola-entertainments.de>
This commit is contained in:
konrad
2021-01-06 22:36:31 +00:00
parent 6178fe034b
commit fe6d975134
26 changed files with 986 additions and 1022 deletions
Download Patch File Download Diff File Expand all files Collapse all files

609
src/styles/components/base/multiselect.scss
View File

@ -1,482 +1,135 @@
fieldset[disabled] .multiselect {
pointer-events: none;
}
.multiselect__spinner {
position: absolute;
right: 1px;
top: 1px;
width: 48px;
height: 35px;
background: $white;
display: block;
&:before, &:after {
position: absolute;
content: "";
top: 50%;
left: 50%;
margin: -8px 0 0 -8px;
width: 16px;
height: 16px;
border-radius: 100%;
border-color: $multiselect_primary transparent transparent;
border-style: solid;
border-width: 2px;
box-shadow: 0 0 0 1px transparent;
}
&:before {
animation: spinning 2.4s cubic-bezier(0.41, 0.26, 0.2, 0.62);
animation-iteration-count: infinite;
}
&:after {
animation: spinning 2.4s cubic-bezier(0.51, 0.09, 0.21, 0.8);
animation-iteration-count: infinite;
}
}
.multiselect__loading-enter-active, .multiselect__loading-leave-active {
transition: opacity 0.4s ease-in-out;
opacity: 1;
}
.multiselect__loading-enter, .multiselect__loading-leave-active {
opacity: 0;
}
.multiselect, .multiselect__input, .multiselect__single {
font-family: inherit;
font-size: 16px;
touch-action: manipulation;
}
.multiselect {
box-sizing: content-box;
display: block;
position: relative;
width: 100%;
min-height: 40px;
text-align: left;
color: $text;
width: 100%;
position: relative;
* {
box-sizing: border-box;
}
&.has-search-results .input-wrapper {
border-radius: $radius $radius 0 0;
border-color: $primary !important;
background: $white !important;
&:focus {
outline: none;
}
}
.multiselect--disabled {
pointer-events: none;
opacity: 0.6;
}
.multiselect--active {
z-index: 50;
&:not(.multiselect--above) {
.multiselect__current, .multiselect__input, .multiselect__tags {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
}
.multiselect__select {
transform: rotateZ(180deg);
}
}
.multiselect--above.multiselect--active {
.multiselect__current, .multiselect__input, .multiselect__tags {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
}
.multiselect__input, .multiselect__single {
position: relative;
display: inline-block;
min-height: 20px;
line-height: 20px;
border: none;
border-radius: 5px;
background: $white;
padding: 0 0 0 5px;
width: calc(100%);
transition: border 0.1s ease;
box-sizing: border-box;
margin-bottom: 8px;
vertical-align: top;
}
.multiselect__input::placeholder {
color: $multiselect-dark;
}
.multiselect__tag ~ {
.multiselect__input, .multiselect__single {
width: auto;
}
}
.multiselect__input:hover, .multiselect__single:hover {
border-color: darken($white, 10);
}
.multiselect__input:focus {
border-color: $primary;
outline: none;
}
.multiselect__single {
&:focus {
border-color: $primary;
outline: none;
}
padding-left: 5px;
margin-bottom: 8px;
}
.multiselect__tags-wrap {
display: inline;
.user {
display: inline-block;
min-height: 30px;
margin: 0 0 .5em;
}
}
.multiselect__tags {
display: block;
padding: 8px 40px 0 8px;
border-radius: 5px;
border: 1px solid $multiselect-border;
background: $white;
font-size: 14px;
}
.multiselect__tag {
position: relative;
display: inline-block;
padding: 4px 26px 4px 10px;
border-radius: 5px;
margin-right: 10px;
color: $white;
line-height: 1;
background: $multiselect-highlight;
margin-bottom: 5px;
white-space: nowrap;
overflow: hidden;
max-width: 100%;
text-overflow: ellipsis;
}
.multiselect__tag-icon {
cursor: pointer;
margin-left: 7px;
position: absolute;
right: 0;
top: 0;
bottom: 0;
font-weight: 700;
font-style: initial;
width: 22px;
text-align: center;
line-height: 22px;
transition: all 0.2s ease;
border-radius: 5px;
&:after {
content: "×";
color: darken($multiselect-highlight, 20);
font-size: 14px;
}
&:focus, &:hover {
background: lighten($multiselect-highlight, 10);
}
&:focus:after, &:hover:after {
color: $white;
}
}
.multiselect__current {
line-height: 16px;
min-height: 40px;
box-sizing: border-box;
display: block;
overflow: hidden;
padding: 8px 30px 0 12px;
white-space: nowrap;
margin: 0;
text-decoration: none;
border-radius: 5px;
border: 1px solid $multiselect-border;
cursor: pointer;
}
.multiselect__select {
line-height: 16px;
display: block;
position: absolute;
box-sizing: border-box;
width: 40px;
height: 38px;
right: 1px;
top: 1px;
padding: 4px 8px;
margin: 0;
text-decoration: none;
text-align: center;
cursor: pointer;
transition: transform 0.2s ease;
&:before {
position: relative;
right: 0;
top: 65%;
color: darken($multiselect-border, 30);
margin-top: 4px;
border-style: solid;
border-width: 5px 5px 0 5px;
border-color: darken($multiselect-border, 30) transparent transparent transparent;
content: "";
}
}
.multiselect__placeholder {
color: darken($white, 15);
display: inline-block;
margin-bottom: 10px;
padding-top: 2px;
}
.multiselect--active .multiselect__placeholder {
display: none;
}
.multiselect__content-wrapper {
position: absolute;
display: block;
background: $white;
width: 100%;
max-height: 240px;
overflow: auto;
border: 1px solid $multiselect-border;
border-top: none;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
z-index: 50;
-webkit-overflow-scrolling: touch;
}
.multiselect__content, .content ul.multiselect__content {
list-style: none;
display: inline-block;
padding: 0;
margin: 0;
min-width: 100%;
vertical-align: top;
li + li {
margin: 0;
}
}
.multiselect--above .multiselect__content-wrapper {
bottom: 100%;
border-radius: 5px 5px 0 0;
border-bottom: none;
border-top: 1px solid $multiselect-border;
}
.multiselect__content::webkit-scrollbar {
display: none;
}
.multiselect__element {
display: block;
}
.multiselect__option {
display: block;
padding: 12px;
min-height: 40px;
line-height: 16px;
text-decoration: none;
text-transform: none;
vertical-align: middle;
position: relative;
cursor: pointer;
white-space: nowrap;
&:after {
top: 0;
right: 0;
position: absolute;
line-height: 40px;
padding-right: 12px;
padding-left: 20px;
font-size: 13px;
}
}
.multiselect__option--highlight {
background: $multiselect-highlight;
outline: none;
color: $white;
&:after {
content: attr(data-select);
background: $multiselect-highlight;
color: $white;
}
}
.multiselect__option--selected {
background: darken($white, 10);
color: $multiselect-dark;
font-weight: bold;
&:after {
content: attr(data-selected);
color: silver;
}
&.multiselect__option--highlight {
background: $multiselect-highlight-negative;
color: $white;
&:after {
background: $multiselect-highlight-negative;
content: attr(data-deselect);
color: $white;
}
}
}
.multiselect--disabled {
pointer-events: none;
.multiselect__current, .multiselect__select {
background: $multiselect-disabled;
color: darken($multiselect-disabled, 40);
}
}
.multiselect__option--disabled {
background: $multiselect-disabled !important;
color: darken($multiselect-disabled, 40) !important;
cursor: text;
pointer-events: none;
}
.multiselect__option--group {
background: $multiselect-disabled;
color: $multiselect-dark;
&.multiselect__option--highlight {
background: $multiselect-dark;
color: $white;
&:after {
background: $multiselect-dark;
}
}
}
.multiselect__option--disabled.multiselect__option--highlight {
background: $multiselect-disabled;
}
.multiselect__option--group-selected.multiselect__option--highlight {
background: $multiselect-highlight-negative;
color: $white;
&:after {
background: $multiselect-highlight-negative;
content: attr(data-deselect);
color: $white;
}
}
.multiselect-enter-active, .multiselect-leave-active {
transition: all 0.15s ease;
}
.multiselect-enter, .multiselect-leave-active {
opacity: 0;
}
.multiselect__strong {
margin-bottom: 8px;
line-height: 20px;
display: inline-block;
vertical-align: top;
}
*[dir="rtl"] {
.multiselect {
text-align: right;
}
.multiselect__select {
right: auto;
left: 1px;
}
.multiselect__tags {
padding: 8px 8px 0px 40px;
}
.multiselect__content {
text-align: right;
}
.multiselect__option:after {
right: auto;
left: 0;
}
.multiselect__clear {
right: auto;
left: 12px;
}
.multiselect__spinner {
right: auto;
left: 1px;
}
}
@keyframes spinning {
from {
transform: rotate(0);
}
to {
transform: rotate(2turn);
}
}
.multiselect__tags {
.remove-assignee {
vertical-align: bottom;
color: $red;
margin-left: -1.8em;
background: $white;
padding: 0 4px;
display: inline-block;
border-radius: 100%;
font-size: .8em;
width: 18px;
height: 18px;
}
&, &:focus-within {
border-bottom-color: $grey-lighter !important;
}
}
.input-wrapper {
padding: 0;
background: $white !important;
border-color: $grey-lighter !important;
flex-wrap: wrap;
height: auto;
&:hover {
border-color: $grey-light !important;
}
.input-loader-wrapper {
display: flex;
max-width: 100%;
width: 100%;
align-items: center;
.input {
border: none !important;
background: transparent;
height: auto;
&::placeholder {
font-style: normal !important;
}
}
}
&:focus-within {
border-color: $primary !important;
background: $white !important;
}
.loader {
margin: 0 .5rem;
}
}
.search-results {
background: $white;
border-radius: 0 0 $radius $radius;
border: 1px solid $primary;
border-top: none;
max-height: 50vh;
overflow-x: auto;
position: absolute;
z-index: 100;
max-width: 100%;
min-width: 100%;
button {
background: transparent;
display: block;
text-align: left;
box-shadow: none;
border-radius: 0;
text-transform: none;
font-family: $family-sans-serif;
font-weight: normal;
display: flex;
justify-content: space-between;
align-items: center;
overflow: hidden;
span:first-child {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.hint-text {
font-size: .75rem;
color: transparent;
transition: color $transition;
padding-left: .5rem;
}
&:focus, &:hover {
background: $grey-lightest;
box-shadow: none !important;
.hint-text {
color: $dark;
}
}
&:active {
background: $grey-lighter;
}
}
}
.assignee {
position: relative;
&:not(:first-child) {
margin-left: -1.75rem;
}
.user img {
border: 2px solid $white;
}
.remove-assignee {
position: absolute;
top: 4px;
left: 2px;
color: $red;
background: $white;
padding: 0 4px;
display: block;
border-radius: 100%;
font-size: .75rem;
width: 18px;
height: 18px;
z-index: 100;
}
}
}

4
src/styles/components/list.scss
View File

@ -28,10 +28,6 @@
}
}
.sharables-list, .sharables-namespace {
padding: 0 !important;
}
.task-add .button {
padding: 10px 1em;
height: 40px;

33
src/styles/components/task.scss
View File

@ -117,32 +117,13 @@
}
&.labels-list, .assignees {
.multiselect__tags {
padding: 3px 0 0 3px;
border: none;
background: transparent;
}
.multiselect__input, .multiselect__single {
width: auto !important;
margin: 0;
padding: .35em !important;
position: relative !important;
background: transparent;
max-width: 100%;
}
.multiselect__placeholder {
display: none;
}
.multiselect__select {
// We may need to enable this since it may also be responsable for showing the loading spinner
display: none;
}
.multiselect__content-wrapper {
border: none;
.multiselect {
.input-wrapper {
&:not(:focus-within):not(:hover) {
background: transparent !important;
border-color: transparent !important;
}
}
}
}

6
src/styles/theme/form.scss
View File

@ -128,10 +128,8 @@
}
}
.field.has-addons {
.control .select select {
height: 2.25em;
}
.field.has-addons .control .select select {
height: 100%;
}
.bigbuttons {

4
src/styles/theme/theme.scss
View File

@ -58,6 +58,10 @@ h1, h2, h3, h4, h5, h6 {
border-radius: $radius;
}
.has-overflow {
overflow: visible;
}
.image.is-avatar {
border-radius: 100%;
}