[gnome-shell-extensions] drive-menu: Emphasize eject buttons as distinct controls

[Florian Müllner <fmuellner src gnome org>]

commit 0426d1d8d58c6bc9ccd43870062e3c09e505aa4a
Author: Florian Müllner <fmuellner gnome org>
Date:   Fri Apr 10 15:27:25 2020 +0200

    drive-menu: Emphasize eject buttons as distinct controls
    
    The buttons currently appear more as an attachment to the label
    than as distinct controls. Address that by:
    
     - applying .button styling
     - increasing spacing between label and button
     - aligning buttons at the end
    
    https://gitlab.gnome.org/GNOME/gnome-shell-extensions/-/issues/223

 extensions/drive-menu/extension.js   | 17 +++++++++++++----
 extensions/drive-menu/stylesheet.css |  8 +++++++-
 2 files changed, 20 insertions(+), 5 deletions(-)
---
diff --git a/extensions/drive-menu/extension.js b/extensions/drive-menu/extension.js
index 879702a..e516066 100644
--- a/extensions/drive-menu/extension.js
+++ b/extensions/drive-menu/extension.js
@@ -1,6 +1,6 @@
 /* exported init enable disable */
 // Drive menu extension
-const { Gio, GObject, Shell, St } = imports.gi;
+const { Clutter, Gio, GObject, Shell, St } = imports.gi;
 
 const Gettext = imports.gettext.domain('gnome-shell-extensions');
 const _ = Gettext.gettext;
@@ -14,9 +14,15 @@ const ShellMountOperation = imports.ui.shellMountOperation;
 var MountMenuItem = GObject.registerClass(
 class MountMenuItem extends PopupMenu.PopupBaseMenuItem {
     _init(mount) {
-        super._init();
+        super._init({
+            style_class: 'drive-menu-item',
+        });
 
-        this.label = new St.Label({ text: mount.get_name() });
+        this.label = new St.Label({
+            text: mount.get_name(),
+            x_expand: true,
+            y_align: Clutter.ActorAlign.CENTER,
+        });
         this.add_child(this.label);
         this.label_actor = this.label;
 
@@ -28,7 +34,10 @@ class MountMenuItem extends PopupMenu.PopupBaseMenuItem {
             icon_name: 'media-eject-symbolic',
             style_class: 'popup-menu-icon',
         });
-        let ejectButton = new St.Button({ child: ejectIcon });
+        let ejectButton = new St.Button({
+            child: ejectIcon,
+            style_class: 'button',
+        });
         ejectButton.connect('clicked', this._eject.bind(this));
         this.add(ejectButton);
 
diff --git a/extensions/drive-menu/stylesheet.css b/extensions/drive-menu/stylesheet.css
index fbe5640..bcf46b0 100644
--- a/extensions/drive-menu/stylesheet.css
+++ b/extensions/drive-menu/stylesheet.css
@@ -1 +1,7 @@
-/* This extensions requires no custom styling */
+.drive-menu-item { spacing: 12px; }
+
+.drive-menu-item .button {
+  border-radius: 99px;
+  padding: 3px;
+  min-height: auto;
+}