X-Git-Url: https://git.heureux-cyclage.org/?a=blobdiff_plain;f=resources%2Fsrc%2Fmediawiki.rcfilters%2Fstyles%2Fmw.rcfilters.ui.FilterTagMultiselectWidget.less;h=284d33863ee1a20345e78e5289568fe746e57f3b;hb=a075f50a86be14347100f662ccd683af4f437090;hp=148e37b2d85b19656f725d1202da22ef558c4e2f;hpb=2b7fbceb23a4737de36cfc48d542a21dd6f53a7a;p=lhc%2Fweb%2Fwiklou.git

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidget.less
index 148e37b2d8..284d33863e 100644
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidget.less
@@ -17,11 +17,37 @@
 		border-bottom: 0;
 		background-color: @colorGray15;
 		border-radius: 2px 2px 0 0;
-		padding: 0.6em;
+		padding: 0 0.6em 0.6em 0.6em;
 		margin-top: 1em;
 		line-height: normal;
 	}
 
+	.mw-rcfilters-collapsed & {
+		// Taking from the handle, since border-bottom is set on the
+		// filters view which is hidden when collapsed
+		border-bottom: 1px solid @colorGray10;
+
+		&.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle {
+			padding-bottom: 0;
+			padding-top: 0;
+		}
+
+		.mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-hideshow {
+			border-left: 1px solid @colorGray10;
+		}
+
+		&.oo-ui-tagMultiselectWidget-outlined {
+			width: unset;
+			max-width: 100%;
+		}
+
+		// Hide inner elements
+		.mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-filters,
+		.mw-rcfilters-ui-filterTagMultiselectWidget-views {
+			display: none;
+		}
+	}
+
 	.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled &-animate.oo-ui-tagMultiselectWidget-handle {
 		.transition( background-color 500ms ease-out );
 	}
@@ -30,26 +56,60 @@
 		background-color: @background-color-primary;
 	}
 
+	&-hideshowButton.oo-ui-buttonElement > .oo-ui-buttonElement-button {
+		// Override the OOUI default for buttons
+		font-weight: normal;
+	}
+
 	&-wrapper {
-		.mw-rcfilters-ui-table {
-			margin-top: 0.3em;
+		&-top {
+			display: flex;
+			flex-wrap: nowrap;
+			justify-content: space-between;
+
+			&-title {
+				padding: 0.6em 0; // Same top padding as the handle
+				flex: 0 0 auto;
+			}
+			&-queryName {
+				flex: 1 1 auto;
+				padding: 0.6em 0; // Same top padding as the handle
+				white-space: nowrap;
+				min-width: 0; // This has to be here to enable the text truncation
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+
+			&-hideshow {
+				flex: 0 0 auto;
+				margin-left: 0.5em;
+				padding-left: 0.5em;
+			}
 		}
 
 		&-content {
 			&-title {
 				font-weight: bold;
 				color: @colorGray5;
+				white-space: nowrap;
 			}
 
 			&-savedQueryTitle {
 				color: @colorGray2;
+				padding-left: 1em;
 				font-weight: bold;
 				vertical-align: top;
-				margin-left: 1em;
-				width: ~'calc( 100% - 10em )';
 				overflow: hidden;
 				text-overflow: ellipsis;
 				white-space: nowrap;
+				// This is necessary for Firefox to be able to
+				// truncate the text. Without this rule, the label
+				// is treated as if it's full-width, and while it is
+				// being truncated with the overflow:hidden,
+				// the ellipses isn't showing properly.
+				// This rule seems to convince Firefox to re-render,
+				// fix the label's width properly, and add the ellipses
+				max-width: 100%;
 			}
 		}
 	}
@@ -66,6 +126,10 @@
 				border: 1px solid @colorGray10;
 				border-left-width: 0;
 				border-radius: 0 0 @borderRadius 0;
+				// Using the 'left' value from
+				// .oo-ui-buttonElement-frameless.oo-ui-iconElement >
+				// .oo-ui-buttonElement-button > .oo-ui-iconElement-icon
+				padding-right: 0.35714286em;
 
 				display: block;
 				text-align: right;