Bug #448 alignment tweak tweak (#460)

* Limit the CSS rules so that they only affect "Now Playing"

Previous rules affected ALL sub-items, which included playlists!

* Remove class that seems to apply to whole menu

(Debugging CSS showed ".panel-media-indicator" styles applying
to Network Manager!)

* Put padding back on small play buttons

src/extension.js

@@ -60,7 +60,6 @@ function enable() {
   if (position == Settings.IndicatorPosition.VOLUMEMENU) {
     indicator = new Panel.AggregateMenuIndicator();
     menu = Main.panel.statusArea.aggregateMenu.menu;
-    menu.actor.add_style_class_name('panel-media-indicator');
     desiredMenuPosition = Main.panel.statusArea.aggregateMenu.menu._getMenuItems().indexOf(Main.panel.statusArea.aggregateMenu._rfkill.menu);
   }
   else {

src/stylesheet.css

@@ -1,30 +1,59 @@
-.panel-media-indicator .popup-sub-menu > * > * > :first-child,
-.panel-media-indicator .popup-sub-menu > * > * > :last-child > :first-child {
-    margin:  0;
-    padding: 0;
+/* Keep the vertical spacing on the Now Playing "row" containers but
+ * remove left/right spacing
+ */
+.album-details {
+  margin-left: 35px;
+  margin-right: 35px;
+  padding-left: 0;
+  padding-right: 0;
+  spacing: 0;
+}
+
+.album-details.slider-row {
+  spacing: 12px;
 }
 
 /*
- * This is ugly, but seems to work - narrow the "spacer"/alignment boxes
+ * Everything within a row defaults to no spacing.
  *
- * The other option would be negative margins, but that
- * breaks things.
+ * Some widgets get overridden later
+ */
+.album-details * {
+  margin: 0;
+  padding: 0;
+}
+
+/*
+ * Ideally we'd remove the spacer boxes by using a different widget type
+ * but it isn't clear that Gnome Shell supports it.
  */
-.panel-media-indicator .popup-sub-menu > * > * > :first-child {
-    width: 14px;
+.album-details > :first-child {
+    width: 0px;
 }
 
 .player-buttons {
     spacing: 2px;
 }
 
-.medium-player-button {
+.album-details .popup-menu-icon {
+    padding: 0 4px;
+}
+
+.album-details .medium-player-button {
     padding: 0 6px;
 }
-.large-player-button {
+.album-details .large-player-button {
     padding: 0 8px;
 }
 
+.album-details .system-menu-action {
+  padding: 13px;
+}
+
+.album-details .system-menu-action:hover {
+  padding: 14px;
+}
+
 .panel-media-indicator {
   min-width: 288px;
   max-width: 288px;
@@ -66,7 +95,7 @@
   font-size: x-small;
 }
 
-.star-icon {
+.album-details .star-icon {
     padding-top: 0px;
     padding-bottom: 0px;
     padding-left: 0.5px;

src/widget.js

@@ -234,9 +234,19 @@ var BaseContainer = new Lang.Class({
     }
 });
 
+var CenteredBaseContainer = new Lang.Class({
+    Name: "CenteredBaseContainer",
+    Extends: BaseContainer,
+
+    _init: function(parms) {
+      this.parent(parms);
+      this.actor.add_style_class_name('album-details');
+    },
+});
+
 var PlayerButtons = new Lang.Class({
     Name: 'PlayerButtons',
-    Extends: BaseContainer,
+    Extends: CenteredBaseContainer,
 
     _init: function() {
         this.parent({hover: false});
@@ -314,7 +324,7 @@ var ShuffleLoopStatus = new Lang.Class({
 
 var PlaylistTitle = new Lang.Class({
     Name: 'PlaylistTitle',
-    Extends: BaseContainer,
+    Extends: CenteredBaseContainer,
 
     _init: function () {
         this.parent({hover: false, style_class: 'no-padding-bottom'});
@@ -386,13 +396,13 @@ var PlayerButton = new Lang.Class({
 
 var SliderItem = new Lang.Class({
     Name: "SliderItem",
-    Extends: BaseContainer,
+    Extends: CenteredBaseContainer,
 
     _init: function(icon) {
         this.parent({hover: false});
         this._icon = new St.Icon({style_class: 'popup-menu-icon', icon_name: icon});
         this._slider = new Slider.Slider(0);
-
+        this.actor.add_style_class_name('slider-row');
         this.actor.add(this._icon);
         this.actor.add(this._slider.actor, {expand: true});
     },
@@ -416,7 +426,7 @@ var SliderItem = new Lang.Class({
 
 var TrackCover = new Lang.Class({
     Name: "TrackBox",
-    Extends: BaseContainer,
+    Extends: CenteredBaseContainer,
 
     _init: function(icon) {
       this.parent({hover: false, style_class: 'no-padding-bottom'});
@@ -427,7 +437,7 @@ var TrackCover = new Lang.Class({
 
 var Info = new Lang.Class({
     Name: "SecondaryInfo",
-    Extends: BaseContainer,
+    Extends: CenteredBaseContainer,
 
     _init: function() {
       this.parent({hover: false, style_class: 'no-padding-bottom'});
@@ -522,7 +532,7 @@ var Info = new Lang.Class({
 
 var TrackRating = new Lang.Class({
     Name: "TrackRating",
-    Extends: BaseContainer,
+    Extends: CenteredBaseContainer,
 
     _init: function(player, value) {
         this._hidden = false;