Merge "Use func_num_args() in MapCacheLRU::clear() for sanity"

[lhc/web/wiklou.git] / resources / src / mediawiki.rcfilters / styles / mw.rcfilters.ui.FilterTagMultiselectWidget.less

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 148e37b..284d338 100644 (file)
--- 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;