endSessionDialog: Redesign according to new mockups

See https://gitlab.gnome.org/GNOME/gnome-shell/issues/1343

https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/935

data/theme/gnome-shell-sass/widgets/_dialogs.scss

@@ -15,8 +15,7 @@
   }
 }
 
-.mount-dialog-subject,
+.mount-dialog-subject {
-.end-session-dialog-subject { //this should be a generic header class
   @include fontsize($base_font_size + 3);
 }
 

data/theme/gnome-shell-sass/widgets/_end-session-dialog.scss

@@ -2,49 +2,9 @@
 
 $end_session_dialog_width: 28em;
 
-.end-session-dialog {
-  spacing: $base_spacing;
-  border: 1px solid $bubble_borders_color;
-}
-
-.end-session-dialog-list {
-  padding-top: 20px;
-}
-
-.end-session-dialog-layout {
-  padding-left: 17px;
-  &:rtl { padding-right: 17px; }
-}
-
-.end-session-dialog-description {
-  width: $end_session_dialog_width;
-  padding-bottom: 10px;
-  &:rtl {
-    text-align: right;
-  }
-}
-
 .end-session-dialog-battery-warning {
   width: $end_session_dialog_width;
   color: $warning_color;
-  padding-top: 6px;
-  &:rtl {
-    text-align: right;
-  }
-}
-
-// user profile picture
-.end-session-dialog-logout-icon {
-  border-radius: 99px;
-  width: $base_icon_size * 3;
-  height: $base_icon_size * 3;
-  background-size: contain;
-}
-
-.end-session-dialog-shutdown-icon {
-  color: $fg_color;
-  width: $base_icon_size * 3;
-  height: $base_icon_size * 3;
 }
 
 .end-session-dialog .dialog-list-title {

js/ui/endSessionDialog.js

@@ -21,6 +21,7 @@ const { AccountsService, Clutter, Gio,
         GLib, GObject, Pango, Polkit, Shell, St }  = imports.gi;
 
 const CheckBox = imports.ui.checkBox;
+const Dialog = imports.ui.dialog;
 const GnomeSession = imports.misc.gnomeSession;
 const LoginManager = imports.misc.loginManager;
 const ModalDialog = imports.ui.modalDialog;
@@ -28,8 +29,7 @@ const UserWidget = imports.ui.userWidget;
 
 const { loadInterfaceXML } = imports.misc.fileUtils;
 
-const _ITEM_ICON_SIZE = 48;
+const _ITEM_ICON_SIZE = 64;
-const _DIALOG_ICON_SIZE = 48;
 
 const EndSessionDialogIface = loadInterfaceXML('org.gnome.SessionManager.EndSessionDialog');
 
@@ -49,7 +49,6 @@ const logoutDialogContent = {
     showBatteryWarning: false,
     confirmButtons: [{ signal: 'ConfirmedLogout',
                        label: C_("button", "Log Out") }],
-    iconStyleClass: 'end-session-dialog-logout-icon',
     showOtherSessions: false,
 };
 
@@ -68,7 +67,6 @@ const shutdownDialogContent = {
                      { signal: 'ConfirmedShutdown',
                        label: C_("button", "Power Off") }],
     iconName: 'system-shutdown-symbolic',
-    iconStyleClass: 'end-session-dialog-shutdown-icon',
     showOtherSessions: true,
 };
 
@@ -83,7 +81,6 @@ const restartDialogContent = {
     confirmButtons: [{ signal: 'ConfirmedReboot',
                        label: C_("button", "Restart") }],
     iconName: 'view-refresh-symbolic',
-    iconStyleClass: 'end-session-dialog-shutdown-icon',
     showOtherSessions: true,
 };
 
@@ -101,7 +98,6 @@ const restartUpdateDialogContent = {
     unusedFutureButtonForTranslation: C_("button", "Install & Power Off"),
     unusedFutureCheckBoxForTranslation: C_("checkbox", "Power off after updates are installed"),
     iconName: 'view-refresh-symbolic',
-    iconStyleClass: 'end-session-dialog-shutdown-icon',
     showOtherSessions: true,
 };
 
@@ -119,7 +115,6 @@ const restartUpgradeDialogContent = {
     confirmButtons: [{ signal: 'ConfirmedReboot',
                        label: C_("button", "Restart & Install") }],
     iconName: 'view-refresh-symbolic',
-    iconStyleClass: 'end-session-dialog-shutdown-icon',
     showOtherSessions: true,
 };
 
@@ -192,16 +187,6 @@ function _roundSecondsToInterval(totalSeconds, secondsLeft, interval) {
     return time;
 }
 
-function _setLabelText(label, text) {
-    if (text) {
-        label.set_text(text);
-        label.show();
-    } else {
-        label.set_text('');
-        label.hide();
-    }
-}
-
 function _setCheckBoxLabel(checkBox, text) {
     let label = checkBox.getLabelActor();
 
@@ -263,45 +248,21 @@ class EndSessionDialog extends ModalDialog.ModalDialog {
         this._userLoadedId = this._user.connect('notify::is-loaded', this._sync.bind(this));
         this._userChangedId = this._user.connect('changed', this._sync.bind(this));
 
-        let mainContentLayout = new St.BoxLayout({
+        this._messageDialogContent = new Dialog.MessageDialogContent();
-            vertical: false,
-            x_expand: true,
-            y_expand: false,
-        });
-        this.contentLayout.add_child(mainContentLayout);
-
-        this._iconBin = new St.Bin({
-            x_expand: true,
-            x_align: Clutter.ActorAlign.END,
-        });
-        mainContentLayout.add_child(this._iconBin);
-
-        let messageLayout = new St.BoxLayout({ vertical: true,
-                                               style_class: 'end-session-dialog-layout' });
-        mainContentLayout.add_child(messageLayout);
-
-        this._subjectLabel = new St.Label({ style_class: 'end-session-dialog-subject' });
-
-        messageLayout.add_child(this._subjectLabel);
-
-        this._descriptionLabel = new St.Label({
-            style_class: 'end-session-dialog-description',
-            y_expand: true,
-        });
-        this._descriptionLabel.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
-        this._descriptionLabel.clutter_text.line_wrap = true;
-
-        messageLayout.add_child(this._descriptionLabel);
 
         this._checkBox = new CheckBox.CheckBox();
         this._checkBox.connect('clicked', this._sync.bind(this));
-        messageLayout.add(this._checkBox);
+        this._messageDialogContent.add_child(this._checkBox);
 
-        this._batteryWarning = new St.Label({ style_class: 'end-session-dialog-battery-warning',
+        this._batteryWarning = new St.Label({
-                                              text: _("Running on battery power: Please plug in before installing updates.") });
+            style_class: 'end-session-dialog-battery-warning',
+            text: _('Running on battery power: Please plug in before installing updates.'),
+        });
         this._batteryWarning.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
         this._batteryWarning.clutter_text.line_wrap = true;
-        messageLayout.add(this._batteryWarning);
+        this._messageDialogContent.add_child(this._batteryWarning);
+
+        this.contentLayout.add_child(this._messageDialogContent);
 
         this._applicationSection = new Dialog.ListSection({
             title: _('Some applications are busy or have unsaved work'),
@@ -362,11 +323,8 @@ class EndSessionDialog extends ModalDialog.ModalDialog {
             subject = dialogContent.subjectWithUpdates;
 
         if (dialogContent.showBatteryWarning) {
-            // Warn when running on battery power
+            this._batteryWarning.visible =
-            if (this._powerProxy.OnBattery && this._checkBox.checked)
+                this._powerProxy.OnBattery && this._checkBox.checked;
-                this._batteryWarning.opacity = 255;
-            else
-                this._batteryWarning.opacity = 0;
         }
 
         let description;
@@ -400,20 +358,8 @@ class EndSessionDialog extends ModalDialog.ModalDialog {
         if (!description)
             description = dialogContent.description(displayTime);
 
-        _setLabelText(this._descriptionLabel, description);
+        this._messageDialogContent.title = subject;
-        _setLabelText(this._subjectLabel, subject);
+        this._messageDialogContent.description = description;
-
-        if (dialogContent.iconName) {
-            this._iconBin.child = new St.Icon({ icon_name: dialogContent.iconName,
-                                                icon_size: _DIALOG_ICON_SIZE,
-                                                style_class: dialogContent.iconStyleClass });
-        } else {
-            let avatarWidget = new UserWidget.Avatar(this._user,
-                                                     { iconSize: _DIALOG_ICON_SIZE,
-                                                       styleClass: dialogContent.iconStyleClass });
-            this._iconBin.child = avatarWidget;
-            avatarWidget.update();
-        }
 
         let hasApplications = this._applications.length > 0;
         let hasSessions = this._sessions.length > 0;