RCFilters: Style saved links option menu

- Make the options smaller (less padding)
- Make the text blue
- Move the icon to the other side of the widget, and
  get rid of the placeholder-spacing for all other
  items without the icon

Bug: T164861
Change-Id: If8e0249f4322e1ab7cea09ca12e66492581f009e

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SavedLinksListItemWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SavedLinksListItemWidget.less
index 66ceb64..fb0b93b 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SavedLinksListItemWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SavedLinksListItemWidget.less
@@ -1,5 +1,5 @@
 .mw-rcfilters-ui-savedLinksListItemWidget {
-       padding: 0.5em;
+       padding: 0.2em 0.7em;
 
        &:hover {
                // Mimicking optionWidget styles
@@ -11,13 +11,13 @@
                vertical-align: middle;
        }
 
-       &:not( .oo-ui-iconElement ) .oo-ui-iconElement-icon {
-               // The iconElement-icon class still appears when we
-               // have an empty icon, and we need it to pretend to
-               // be there so the text has the same alignment as
-               // text next to a visible icon. #ThanksOOUI
-               width: 1.875em;
-               height: 1.875em;
+       .oo-ui-iconElement-icon {
+               // Since we made the rows narrower (height smaller than usual)
+               // then the icon needs to be slightly smaller as well, so that
+               // when we toggle 'default' the icon doesn't bounce the option
+               // height up a little
+               width: 1.7em;
+               height: 1.7em;
        }
 
        &-icon span {
@@ -38,6 +38,7 @@
                overflow: hidden;
                cursor: pointer;
                margin-left: 0.5px;
+               color: #36c; // Accent50;
        }
 
        &-icon,

diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.SavedLinksListItemWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.SavedLinksListItemWidget.js
index 44b48b8..acda29e 100644 (file)
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.SavedLinksListItemWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.SavedLinksListItemWidget.js
@@ -106,10 +106,6 @@
                                                $( '<div>' )
                                                        .addClass( 'mw-rcfilters-ui-row' )
                                                        .append(
-                                                               $( '<div>' )
-                                                                       .addClass( 'mw-rcfilters-ui-cell' )
-                                                                       .addClass( 'mw-rcfilters-ui-savedLinksListItemWidget-icon' )
-                                                                       .append( this.$icon ),
                                                                $( '<div>' )
                                                                        .addClass( 'mw-rcfilters-ui-cell' )
                                                                        .addClass( 'mw-rcfilters-ui-savedLinksListItemWidget-content' )
@@ -119,6 +115,10 @@
                                                                                this.editInput.$element,
                                                                                this.saveButton.$element
                                                                        ),
+                                                               $( '<div>' )
+                                                                       .addClass( 'mw-rcfilters-ui-cell' )
+                                                                       .addClass( 'mw-rcfilters-ui-savedLinksListItemWidget-icon' )
+                                                                       .append( this.$icon ),
                                                                this.popupButton.$element
                                                                        .addClass( 'mw-rcfilters-ui-cell' )
                                                        )
@@ -257,6 +257,7 @@
 
                        this.editInput.toggle( isEdit );
                        this.$label.toggleClass( 'oo-ui-element-hidden', isEdit );
+                       this.$icon.toggleClass( 'oo-ui-element-hidden', isEdit );
                        this.popupButton.toggle( !isEdit );
                        this.saveButton.toggle( isEdit );