GNOME.org
 

[gnome-shell/wip/sass: 27/58] theme: a button is a button is a button

commit d4349a97b7fe721e3cabc5a1c31d708563084dc4
Author: Jakub Steiner <jimmac gmail com>
Date:   Fri Jan 16 15:33:56 2015 +0100

    theme: a button is a button is a button
    
    https://bugzilla.gnome.org/show_bug.cgi?id=737785

 data/theme/_common.scss                  |   10 +------
 data/theme/gnome-shell-high-contrast.css |   40 +++--------------------------
 data/theme/gnome-shell.css               |   40 +++--------------------------
 js/gdm/authPrompt.js                     |    4 +-
 js/ui/appDisplay.js                      |    4 +-
 js/ui/components/autorunManager.js       |    6 ++--
 js/ui/ibusCandidatePopup.js              |    4 +-
 js/ui/modalDialog.js                     |    2 +-
 js/ui/notificationDaemon.js              |    4 +-
 js/ui/status/network.js                  |    2 +-
 10 files changed, 24 insertions(+), 92 deletions(-)
---
diff --git a/data/theme/_common.scss b/data/theme/_common.scss
index d2c3b56..6b179ff 100644
--- a/data/theme/_common.scss
+++ b/data/theme/_common.scss
@@ -39,15 +39,7 @@ stage {
 /* WIDGETS */
 
 /* Buttons */
-// one would think we may want a generic button class:
-// bug #737785
-.candidate-page-button,
-.notification-button,
-.notification-icon-button,
-.hotplug-notification-item,
-.hotplug-resident-eject-button,
-.modal-dialog-button,
-.app-view-control {
+.button {
   border-radius: 3px;
   border-width: 1px;
   padding: 4px 32px;
diff --git a/data/theme/gnome-shell-high-contrast.css b/data/theme/gnome-shell-high-contrast.css
index 608be3c..3b754c4 100644
--- a/data/theme/gnome-shell-high-contrast.css
+++ b/data/theme/gnome-shell-high-contrast.css
@@ -395,13 +395,7 @@ stage {
 
 /* WIDGETS */
 /* Buttons */
-.candidate-page-button,
-.notification-button,
-.notification-icon-button,
-.hotplug-notification-item,
-.hotplug-resident-eject-button,
-.modal-dialog-button,
-.app-view-control {
+.button {
   border-radius: 3px;
   border-width: 1px;
   padding: 4px 32px;
@@ -411,51 +405,27 @@ stage {
   box-shadow: inset 0 1px #454f52;
   text-shadow: 0 1px black;
   icon-shadow: 0 1px black; }
-  .candidate-page-button:hover,
-  .notification-button:hover,
-  .notification-icon-button:hover,
-  .hotplug-notification-item:hover,
-  .hotplug-resident-eject-button:hover,
-  .modal-dialog-button:hover,
-  .app-view-control:hover {
+  .button:hover {
     color: white;
     border-color: rgba(0, 0, 0, 0.7);
     background-color: #454f52;
     box-shadow: inset 0 1px #5d696d;
     text-shadow: 0 1px black;
     icon-shadow: 0 1px black; }
-  .candidate-page-button:focus,
-  .notification-button:focus,
-  .notification-icon-button:focus,
-  .hotplug-notification-item:focus,
-  .hotplug-resident-eject-button:focus,
-  .modal-dialog-button:focus,
-  .app-view-control:focus {
+  .button:focus {
     color: #eeeeec;
     border-color: #215d9c;
     box-shadow: inset 0 1px #454f52;
     text-shadow: 0 1px black;
     icon-shadow: 0 1px black; }
-  .candidate-page-button:insensitive,
-  .notification-button:insensitive,
-  .notification-icon-button:insensitive,
-  .hotplug-notification-item:insensitive,
-  .hotplug-resident-eject-button:insensitive,
-  .modal-dialog-button:insensitive,
-  .app-view-control:insensitive {
+  .button:insensitive {
     color: #7f7f7f;
     border-color: rgba(0, 0, 0, 0.7);
     background-color: rgba(62, 67, 68, 0.7);
     box-shadow: none;
     text-shadow: none;
     icon-shadow: none; }
-  .candidate-page-button:active,
-  .notification-button:active,
-  .notification-icon-button:active,
-  .hotplug-notification-item:active,
-  .hotplug-resident-eject-button:active,
-  .modal-dialog-button:active,
-  .app-view-control:active {
+  .button:active {
     color: white;
     border-color: rgba(0, 0, 0, 0.7);
     background-color: #222728;
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index ebc2fc7..48539a8 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -395,13 +395,7 @@ stage {
 
 /* WIDGETS */
 /* Buttons */
-.candidate-page-button,
-.notification-button,
-.notification-icon-button,
-.hotplug-notification-item,
-.hotplug-resident-eject-button,
-.modal-dialog-button,
-.app-view-control {
+.button {
   border-radius: 3px;
   border-width: 1px;
   padding: 4px 32px;
@@ -411,51 +405,27 @@ stage {
   box-shadow: inset 0 1px #454f52;
   text-shadow: 0 1px black;
   icon-shadow: 0 1px black; }
-  .candidate-page-button:hover,
-  .notification-button:hover,
-  .notification-icon-button:hover,
-  .hotplug-notification-item:hover,
-  .hotplug-resident-eject-button:hover,
-  .modal-dialog-button:hover,
-  .app-view-control:hover {
+  .button:hover {
     color: white;
     border-color: rgba(0, 0, 0, 0.7);
     background-color: #454f52;
     box-shadow: inset 0 1px #5d696d;
     text-shadow: 0 1px black;
     icon-shadow: 0 1px black; }
-  .candidate-page-button:focus,
-  .notification-button:focus,
-  .notification-icon-button:focus,
-  .hotplug-notification-item:focus,
-  .hotplug-resident-eject-button:focus,
-  .modal-dialog-button:focus,
-  .app-view-control:focus {
+  .button:focus {
     color: #eeeeec;
     border-color: #215d9c;
     box-shadow: inset 0 1px #454f52;
     text-shadow: 0 1px black;
     icon-shadow: 0 1px black; }
-  .candidate-page-button:insensitive,
-  .notification-button:insensitive,
-  .notification-icon-button:insensitive,
-  .hotplug-notification-item:insensitive,
-  .hotplug-resident-eject-button:insensitive,
-  .modal-dialog-button:insensitive,
-  .app-view-control:insensitive {
+  .button:insensitive {
     color: #939695;
     border-color: rgba(0, 0, 0, 0.7);
     background-color: rgba(66, 71, 73, 0.7);
     box-shadow: none;
     text-shadow: none;
     icon-shadow: none; }
-  .candidate-page-button:active,
-  .notification-button:active,
-  .notification-icon-button:active,
-  .hotplug-notification-item:active,
-  .hotplug-resident-eject-button:active,
-  .modal-dialog-button:active,
-  .app-view-control:active {
+  .button:active {
     color: white;
     border-color: rgba(0, 0, 0, 0.7);
     background-color: #222728;
diff --git a/js/gdm/authPrompt.js b/js/gdm/authPrompt.js
index 26a4e2c..b123319 100644
--- a/js/gdm/authPrompt.js
+++ b/js/gdm/authPrompt.js
@@ -140,7 +140,7 @@ const AuthPrompt = new Lang.Class({
     },
 
     _initButtons: function() {
-        this.cancelButton = new St.Button({ style_class: 'modal-dialog-button',
+        this.cancelButton = new St.Button({ style_class: 'modal-dialog-button button',
                                             button_mask: St.ButtonMask.ONE | St.ButtonMask.THREE,
                                             reactive: true,
                                             can_focus: true,
@@ -162,7 +162,7 @@ const AuthPrompt = new Lang.Class({
                               y_fill: false,
                               x_align: St.Align.END,
                               y_align: St.Align.MIDDLE });
-        this.nextButton = new St.Button({ style_class: 'modal-dialog-button',
+        this.nextButton = new St.Button({ style_class: 'modal-dialog-button button',
                                           button_mask: St.ButtonMask.ONE | St.ButtonMask.THREE,
                                           reactive: true,
                                           can_focus: true,
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index bce5bcf..9967308 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -903,14 +903,14 @@ const AppDisplay = new Lang.Class({
         let view, button;
         view = new FrequentView();
         button = new St.Button({ label: _("Frequent"),
-                                 style_class: 'app-view-control',
+                                 style_class: 'app-view-control button',
                                  can_focus: true,
                                  x_expand: true });
         this._views[Views.FREQUENT] = { 'view': view, 'control': button };
 
         view = new AllView();
         button = new St.Button({ label: _("All"),
-                                 style_class: 'app-view-control',
+                                 style_class: 'app-view-control button',
                                  can_focus: true,
                                  x_expand: true });
         this._views[Views.ALL] = { 'view': view, 'control': button };
diff --git a/js/ui/components/autorunManager.js b/js/ui/components/autorunManager.js
index 8f716cc..9c911cd 100644
--- a/js/ui/components/autorunManager.js
+++ b/js/ui/components/autorunManager.js
@@ -417,7 +417,7 @@ const AutorunResidentNotification = new Lang.Class({
                           style_class: 'hotplug-resident-eject-icon' });
 
         let ejectButton =
-            new St.Button({ style_class: 'hotplug-resident-eject-button',
+            new St.Button({ style_class: 'hotplug-resident-eject-button button',
                             button_mask: St.ButtonMask.ONE,
                             child: ejectIcon });
         item.add(ejectButton, { x_align: St.Align.END });
@@ -601,7 +601,7 @@ const AutorunTransientNotification = new Lang.Class({
                                      x_fill: true,
                                      x_align: St.Align.START,
                                      button_mask: St.ButtonMask.ONE,
-                                     style_class: 'hotplug-notification-item' });
+                                     style_class: 'hotplug-notification-item button' });
 
         button.connect('clicked', Lang.bind(this, function() {
             startAppForMount(app, this._mount);
@@ -627,7 +627,7 @@ const AutorunTransientNotification = new Lang.Class({
                                      x_fill: true,
                                      x_align: St.Align.START,
                                      button_mask: St.ButtonMask.ONE,
-                                     style_class: 'hotplug-notification-item' });
+                                     style_class: 'hotplug-notification-item button' });
 
         button.connect('clicked', Lang.bind(this, function() {
             this._manager.ejectMount(this._mount);
diff --git a/js/ui/ibusCandidatePopup.js b/js/ui/ibusCandidatePopup.js
index 0f7c3b2..7ce66a0 100644
--- a/js/ui/ibusCandidatePopup.js
+++ b/js/ui/ibusCandidatePopup.js
@@ -41,11 +41,11 @@ const CandidateArea = new Lang.Class({
 
         this._buttonBox = new St.BoxLayout({ style_class: 'candidate-page-button-box' });
 
-        this._previousButton = new St.Button({ style_class: 'candidate-page-button 
candidate-page-button-previous' });
+        this._previousButton = new St.Button({ style_class: 'candidate-page-button 
candidate-page-button-previous button' });
         this._previousButton.child = new St.Icon({ style_class: 'candidate-page-button-icon' });
         this._buttonBox.add(this._previousButton, { expand: true });
 
-        this._nextButton = new St.Button({ style_class: 'candidate-page-button candidate-page-button-next' 
});
+        this._nextButton = new St.Button({ style_class: 'candidate-page-button candidate-page-button-next 
button' });
         this._nextButton.child = new St.Icon({ style_class: 'candidate-page-button-icon' });
         this._buttonBox.add(this._nextButton, { expand: true });
 
diff --git a/js/ui/modalDialog.js b/js/ui/modalDialog.js
index b188e39..d36bc91 100644
--- a/js/ui/modalDialog.js
+++ b/js/ui/modalDialog.js
@@ -170,7 +170,7 @@ const ModalDialog = new Lang.Class({
         else
             keys = [];
 
-        let button = new St.Button({ style_class: 'modal-dialog-button',
+        let button = new St.Button({ style_class: 'modal-dialog-button button',
                                      button_mask: St.ButtonMask.ONE | St.ButtonMask.THREE,
                                      reactive:    true,
                                      can_focus:   true,
diff --git a/js/ui/notificationDaemon.js b/js/ui/notificationDaemon.js
index c2aeb15..920252d 100644
--- a/js/ui/notificationDaemon.js
+++ b/js/ui/notificationDaemon.js
@@ -334,10 +334,10 @@ const FdoNotificationDaemon = new Lang.Class({
         let button = new St.Button({ can_focus: true });
         let iconName = id.endsWith('-symbolic') ? id : id + '-symbolic';
         if (useActionIcons && Gtk.IconTheme.get_default().has_icon(iconName)) {
-            button.add_style_class_name('notification-icon-button');
+            button.add_style_class_name('notification-icon-button button');
             button.child = new St.Icon({ icon_name: iconName });
         } else {
-            button.add_style_class_name('notification-button');
+            button.add_style_class_name('notification-button button');
             button.label = label;
         }
         return button;
diff --git a/js/ui/status/network.js b/js/ui/status/network.js
index dffd69d..35b459b 100644
--- a/js/ui/status/network.js
+++ b/js/ui/status/network.js
@@ -892,7 +892,7 @@ const NMWirelessDialog = new Lang.Class({
         this._airplaneText = new St.Label({ style_class: 'nm-dialog-airplane-text' });
 
         let airplaneSubStack = new St.Widget({ layout_manager: new Clutter.BinLayout });
-        this._airplaneButton = new St.Button({ style_class: 'modal-dialog-button' });
+        this._airplaneButton = new St.Button({ style_class: 'modal-dialog-button button' });
         this._airplaneButton.connect('clicked', Lang.bind(this, function() {
             if (this._rfkill.airplaneMode)
                 this._rfkill.airplaneMode = false;
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]