From 0426d1d8d58c6bc9ccd43870062e3c09e505aa4a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Florian=20M=C3=BCllner?= <fmuellner@gnome.org>
Date: Fri, 10 Apr 2020 15:27:25 +0200
Subject: [PATCH] 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 879702a0..e5160662 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 fbe56409..bcf46b07 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;
+}