Merge pull request #8824 from nextcloud/settings-vue

Vue migration: settings

3 files changed, 339 insertions, 115 deletions

diff --git a/core/css/inputs.scss b/core/css/inputs.scss
index 7509575f9e5..665deca2285 100644
--- a/core/css/inputs.scss
+++ b/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;
diff --git a/core/css/multiselect.scss b/core/css/multiselect.scss
index da6cbde3722..6c8bd118060 100644
--- a/core/css/multiselect.scss
+++ b/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;
diff --git a/core/css/tooltip.scss b/core/css/tooltip.scss
index a974e05e1a6..fe9a96cf314 100644
--- a/core/css/tooltip.scss
+++ b/core/css/tooltip.scss
@@ -11,119 +11,128 @@
  */
 
 .tooltip {
-	position: absolute;
-	display: block;
-	font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif;
-	font-style: normal;
-	font-weight: 400;
-	letter-spacing: normal;
-	line-break: auto;
-	line-height: 1.6;
-	text-align: left;
-	text-align: start;
-	text-decoration: none;
-	text-shadow: none;
-	text-transform: none;
-	white-space: normal;
-	word-break: normal;
-	word-spacing: normal;
-	word-wrap: normal;
-	font-size: 12px;
-	opacity: 0;
-	z-index: 100000;
-	filter: drop-shadow(0 1px 10px $color-box-shadow);
-	&.in {
-		opacity: 1;
-	}
-
-	&.top {
-		margin-top: -3px;
-		padding: 10px 0;
-	}
-	&.bottom {
-		margin-top: 3px;
-		padding: 10px 0;
-	}
-
-	&.right {
-		margin-left: 3px;
-		padding: 0 10px;
-		.tooltip-arrow {
-			top: 50%;
-			left: 0;
-			margin-top: -10px;
-			border-width: 10px 10px 10px 0;
-			border-right-color: $color-main-background;
-		}
-	}
-	&.left {
-		margin-left: -3px;
-		padding: 0 5px;
-		.tooltip-arrow {
-			top: 50%;
-			right: 0;
-			margin-top: -10px;
-			border-width: 10px 0 10px 10px;
-			border-left-color: $color-main-background;
-		}
-	}
-
-	/* TOP */
-	&.top .tooltip-arrow,
-	&.top-left .tooltip-arrow,
-	&.top-right .tooltip-arrow  {
-		bottom: 0;
-		border-width: 10px 10px 0;
-		border-top-color: $color-main-background;
-	}
-	&.top .tooltip-arrow {
-		left: 50%;
-		margin-left: -10px;
-	}
-	&.top-left .tooltip-arrow {
-		right: 10px;
-		margin-bottom: -10px;
-	}
-	&.top-right .tooltip-arrow {
-		left: 10px;
-		margin-bottom: -10px;
-	}
-
-	/* BOTTOM */
-	&.bottom .tooltip-arrow,
-	&.bottom-left .tooltip-arrow,
-	&.bottom-right .tooltip-arrow  {
-		top: 0;
-		border-width: 0 10px 10px;
-		border-bottom-color: $color-main-background;
-	}
-	&.bottom .tooltip-arrow {
-		left: 50%;
-		margin-left: -10px;
-	}
-	&.bottom-left .tooltip-arrow {
-		right: 10px;
-		margin-top: -10px;
-	}
-	&.bottom-right .tooltip-arrow {
-		left: 10px;
-		margin-top: -10px;
-	}
+    position: absolute;
+    display: block;
+    font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif;
+    font-style: normal;
+    font-weight: 400;
+    letter-spacing: normal;
+    line-break: auto;
+    line-height: 1.6;
+    text-align: left;
+    text-align: start;
+    text-decoration: none;
+    text-shadow: none;
+    text-transform: none;
+    white-space: normal;
+    word-break: normal;
+    word-spacing: normal;
+    word-wrap: normal;
+    font-size: 12px;
+    opacity: 0;
+    z-index: 100000;
+    /* default to top */
+    margin-top: -3px;
+    padding: 10px 0;
+    filter: drop-shadow(0 1px 10px $color-box-shadow);
+    &.in,
+    &.tooltip[aria-hidden='false'] {
+        visibility: visible;
+        opacity: 1;
+        transition: opacity .15s;
+    }
+    &.top .tooltip-arrow,
+    &[x-placement^='top'] {
+        left: 50%;
+        margin-left: -10px;
+    }
+    &.bottom,
+    &[x-placement^='bottom'] {
+        margin-top: 3px;
+        padding: 10px 0;
+    }
+    &.right,
+    &[x-placement^='right'] {
+        margin-left: 3px;
+        padding: 0 10px;
+        .tooltip-arrow {
+            top: 50%;
+            left: 0;
+            margin-top: -10px;
+            border-width: 10px 10px 10px 0;
+            border-right-color: $color-main-background;
+        }
+    }
+    &.left,
+    &[x-placement^='left'] {
+        margin-left: -3px;
+        padding: 0 5px;
+        .tooltip-arrow {
+            top: 50%;
+            right: 0;
+            margin-top: -10px;
+            border-width: 10px 0 10px 10px;
+            border-left-color: $color-main-background;
+        }
+    }
+    /* TOP */
+    &.top,
+    &.top-left,
+    &[x-placement^='top'],
+    &.top-right {
+        .tooltip-arrow {
+            bottom: 0;
+            border-width: 10px 10px 0;
+            border-top-color: $color-main-background;
+        }
+    }
+    &.top-left .tooltip-arrow {
+        right: 10px;
+        margin-bottom: -10px;
+    }
+    &.top-right .tooltip-arrow {
+        left: 10px;
+        margin-bottom: -10px;
+    }
+    /* BOTTOM */
+    &.bottom,
+    &[x-placement^='bottom'],
+    &.bottom-left,
+    &.bottom-right {
+        .tooltip-arrow {
+            top: 0;
+            border-width: 0 10px 10px;
+            border-bottom-color: $color-main-background;
+        }
+    }
+    &[x-placement^='bottom'] .tooltip-arrow,
+    &.bottom .tooltip-arrow {
+        left: 50%;
+        margin-left: -10px;
+    }
+    &.bottom-left .tooltip-arrow {
+        right: 10px;
+        margin-top: -10px;
+    }
+    &.bottom-right .tooltip-arrow {
+        left: 10px;
+        margin-top: -10px;
+    }
 }
 
 .tooltip-inner {
-	max-width: 350px;
-	padding: 5px 8px;
-	background-color: $color-main-background;
-	color: $color-main-text;
-	text-align: center;
-	border-radius: $border-radius;
+    max-width: 350px;
+    padding: 5px 8px;
+    background-color: $color-main-background;
+    color: $color-main-text;
+    text-align: center;
+    border-radius: $border-radius;
 }
 
 .tooltip-arrow {
-	position: absolute;
-	width: 0;
-	height: 0;
-	border-color: transparent;
-	border-style: solid;
-}
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid;
+}
\ No newline at end of file