Vue migration: settings

.drone.yml

@@ -594,6 +594,13 @@ pipeline:
       when:
         matrix:
           TESTS-ACCEPTANCE: login
+  acceptance-users:
+      image: nextcloudci/acceptance-php7.1:acceptance-php7.1-2
+      commands:
+        - tests/acceptance/run-local.sh --timeout-multiplier 10 --nextcloud-server-domain acceptance-users --selenium-server selenium:4444 allow-git-repository-modifications features/users.feature
+      when:
+        matrix:
+          TESTS-ACCEPTANCE: users
   nodb-codecov:
     image: nextcloudci/php7.0:php7.0-19
     commands:
@@ -761,6 +768,8 @@ matrix:
       TESTS-ACCEPTANCE: header
     - TESTS: acceptance
       TESTS-ACCEPTANCE: login
+    - TESTS: acceptance
+      TESTS-ACCEPTANCE: users
     - TESTS: jsunit
     - TESTS: syntax-php7.0
     - TESTS: syntax-php7.1

core/css/inputs.scss

@@ -67,6 +67,13 @@ div[contenteditable=true],
 		cursor: default;
 		opacity: 0.5;
 	}
+    &:required {
+        box-shadow: none;
+    }
+    &:invalid {
+        box-shadow: none !important;
+        border-color: $color-error;
+    }
 	/* Primary action button, use sparingly */
 	&.primary {
 		background-color: $color-primary-element;
@@ -216,7 +223,8 @@ input {
 			margin-left: -8px !important;
 			border-left-color: transparent !important;
 			border-radius: 0 $border-radius $border-radius 0 !important;
-			background-clip: padding-box; /* Avoid background under border */
+			background-clip: padding-box;
+			/* Avoid background under border */
 			background-color: $color-main-background !important;
 			opacity: 1;
 			width: 34px;
@@ -227,6 +235,7 @@ input {
 				background-image: url('../img/actions/confirm-fade.svg?v=2') !important;
 			}
 		}
+
 		/* only show confirm borders if input is not focused */
 		&:not(:active):not(:hover):not(:focus){
 			+ .icon-confirm {
@@ -244,14 +253,19 @@ input {
 		&:active,
 		&:hover,
 		&:focus {
+            &:invalid {
+                + .icon-confirm {
+                    border-color: $color-error;
+                }
+            }
 			+ .icon-confirm {
 				border-color: $color-primary-element !important;
 				border-left-color: transparent !important;
-				z-index: 2; /* above previous input */
+                /* above previous input */
+				z-index: 2;
 			}
 		}
 	}
-
 }
 
 
@@ -606,6 +620,206 @@ input {
 	}
 }
 
+
+/* Vue multiselect */
+.multiselect.multiselect-vue {
+    margin: 1px 2px;
+    padding: 0 !important;
+    display: inline-block;
+    /* min-width: 160px; */
+    /* width: 160px; */
+    position: relative;
+    background-color: $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: nc-darken($color-main-background, 8%) !important;
+    }
+    .multiselect__tags {
+		/* space between tags and limit tag */
+		$space-between: 5px;
+
+        display: flex;
+        flex-wrap: nowrap;
+        overflow: hidden;
+        border: 1px solid nc-darken($color-main-background, 14%);
+        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: nc-lighten($color-main-text, 33%);
+                border: 1px solid nc-darken($color-main-background, 14%);
+                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: $color-main-background;
+            cursor: pointer;
+        }
+        /* displayed text if tag limit reached */
+		.multiselect__strong,
+		.multiselect__limit {
+            flex: 0 0 auto;
+            line-height: 20px;
+            color: nc-lighten($color-main-text, 33%);
+            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 nc-darken($color-main-background, 14%);
+        background: $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: nc-lighten($color-main-text, 33%);
+                width: 100%;
+                /* selected checkmark icon */
+                &:not(.multiselect__option--disabled)::before {
+                    content: ' ';
+                    background-image: url('../img/actions/checkmark.svg?v=1');
+                    background-repeat: no-repeat;
+                    background-position: center;
+                    min-width: 16px;
+                    min-height: 16px;
+                    display: block;
+                    opacity: 0.5;
+                    margin-right: 5px;
+                    visibility: hidden;
+                }
+                &.multiselect__option--disabled {
+                    background-color: nc-darken($color-main-background, 8%);
+                }
+                /* 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: url('../img/actions/add.svg?v=1');
+                        visibility: visible;
+                    }
+                }
+                &.multiselect__option--highlight {
+                    color: $color-main-text;
+                }
+                &.multiselect__option--selected {
+                    &::before {
+                        visibility: visible;
+                    }
+                }
+            }
+        }
+    }
+}
+
 /* Progressbar */
 progress {
 	display: block;

core/css/multiselect.scss

@@ -75,8 +75,9 @@ ul.multiselectoptions {
 	}
 }
 
-div.multiselect,
-select.multiselect {
+/* TODO drop old legacy multiselect! */
+div.multiselect:not(.multiselect-vue),
+select.multiselect:not(.multiselect-vue) {
 	display: inline-block;
 	max-width: 200px;
 	min-width: 150px !important;