Bump webpack, config, deps, fixes groups selects, improved design and…

… added tooltip to groups +x indicator

Signed-off-by: John Molakvoæ (skjnldsv) <[email protected]>

core/css/inputs.scss

@@ -626,8 +626,8 @@ input {
     margin: 1px 2px;
     padding: 0 !important;
     display: inline-block;
-    min-width: 160px;
-    width: 160px;
+    /* min-width: 160px; */
+    /* width: 160px; */
     position: relative;
     background-color: $color-main-background;
     &.multiselect--active {
@@ -642,6 +642,9 @@ input {
         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;
@@ -657,7 +660,8 @@ input {
             overflow: hidden;
             max-width: 100%;
             position: relative;
-            padding: 3px 5px;
+			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 {
@@ -669,16 +673,33 @@ input {
             }
             /* selected tag */
             .multiselect__tag {
-                flex: 0 0 auto;
+                flex: 1 0 calc(50% - 5px);;
                 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;
-                margin-right: 5px;
+				border-radius: 3px;
+				/* require to override the default width
+				   and force the tag to shring properly */
+				min-width: 0;
+				/* 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 */
@@ -690,13 +711,17 @@ input {
             cursor: pointer;
         }
         /* displayed text if tag limit reached */
-        .multiselect__strong {
+		.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;
+			opacity: .7;
+			margin-right: $space-between;
+			/* above the input */
+			z-index: 5;
         }
         /* default multiselect input for search and placeholder */
         input.multiselect__input {

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;

settings/css/settings.scss

@@ -1299,19 +1299,16 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
 			.password {
 				width: 150px;
 			}
-			.mailAddress{
+			.mailAddress,
+			.groups,
+			.subadmins {
 				width: 200px;
 			}
-			.groups,
-			.subadmins,
 			.quota {
-				width: 170px;
+				width: 150px;
 			}
 			.languages {
 				width: 200px;
-				.multiselect {
-					width: 100%;
-				}
 			}
 			.storageLocation {
 				width: 250px;
@@ -1379,7 +1376,7 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
                     }
 					progress {
 						position: absolute;
-						width: 160px;
+						width: calc(100% - 4px); /* minus left and right */
 						left: 2px;
 						bottom: 2px;
 						height: 3px;
@@ -1415,24 +1412,9 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
 						}
 					}
 				}
-				.v-select {
-					&.open .selected-tag-wrap {
-						display: none;
-					}
-					.dropdown-toggle .selected-tag {
-						padding-right: 5px;
-						.close {
-							/* no delete on tags*/
-							display: none;
-						}
-					}
-					.dropdown-menu li a .icon-add {
-						position: absolute;
-						width: 16px;
-						height: 16px;
-						opacity: .5;
-						left: 7px;
-					}
+				/* Fill the grid cell */
+				.multiselect.multiselect-vue {
+					width: 100%;
 				}
 			}
 		}