endSessionDialog: Restyle the dialog (#12533)

Move all cancel buttons to the left Ensure ESC closes the dialogs Restyle inhibited apps Make the default styling work in themes without support
linuxmint · Nov 29, 2024 · e601286 · e601286
1 parent c4bdb10
commit e601286
Show file tree

Hide file tree

Showing 5 changed files with 291 additions and 230 deletions.
diff --git a/data/theme/cinnamon-sass/widgets/_dialogs.scss b/data/theme/cinnamon-sass/widgets/_dialogs.scss
@@ -27,47 +27,50 @@
   }
 }
 
-// endSessionDialog.js
-.end-session-dialog {
-    width: 40em;
-    transition-duration: 100ms;
+// Lists in dialogs
 
-    .dialog-content-box {
-        spacing: $base_margin * 3;
-        width: 30em;
-    }
+.dialog-list {
+  spacing: $base_padding * 3;
 
-    .end-session-dialog-inhibitor-list-frame {
-        background-color: $light_bg_color;
-        border-radius: $base_border_radius;
-        border: 1px solid $borders_color;
-        padding-left: 5px;
-        padding-right: 5px;
-        padding-top: 2px;
-        padding-bottom: 2px;
-    }
+  .dialog-list-title {
+    @extend %heading;
+    text-align: center;
+  }
 
-    .end-session-dialog-inhibitor-list {
-        spacing-rows: 5px;
-        spacing-columns: 20px;
-        padding: 2px;
-    }
+  .dialog-list-scrollview { max-height: 200px; }
+  .dialog-list-box {
+    spacing: 1em;
 
-    .end-session-dialog-inhibitor-list-reason {
-        width: 25em;
+    .dialog-list-item {
+      spacing: 1em;
+
+      .dialog-list-item-title { font-weight: bold; }
+      .dialog-list-item-description {
+        @extend %caption;
+        color: darken($fg_color, 5%);
+      }
     }
+  }
+}
+
+// End session dialog
+
+.end-session-dialog {
+  width: 40em;
+
+  .dialog-content-box { spacing: 0; }
 
-    .end-session-dialog-progress-bar {
-        min-width: 160px;
-        -barlevel-height: 6px;
-        -barlevel-background-color: $base_color;
-        -barlevel-active-background-color: $fg_color;
-        -barlevel-amplify-color: $warning_color;
-        -barlevel-amplify-separator-width: $base_padding * 0.5;
+  .dialog-list {
+    spacing: 0;
 
-        &:ltr { margin-right: $base_padding; }
-        &:rtl { margin-left: $base_padding; }
+    .dialog-list-title {
+      color: $warning_color;
+      background-color: tranparentize($warning_color, 0.9);
+      padding: $base_padding * 1.5;
+      border-radius: $base_border_radius;
+      margin: $base_margin 0;
     }
+  }
 }
 
 // message dialog

diff --git a/js/ui/cinnamonDBus.js b/js/ui/cinnamonDBus.js
@@ -521,13 +521,13 @@ CinnamonDBus.prototype = {
 
     ShowEndSessionDialog(mode) {
         GLib.idle_add(GLib.PRIORITY_DEFAULT, () => {
-            Main.show_end_session_dialog(mode);
+            Main.showEndSessionDialog(mode);
             return GLib.SOURCE_REMOVE;
         });
     },
 
     CloseEndSessionDialog() {
-        Main.close_end_session_dialog();
+        Main.closeEndSessionDialog();
     },
 
     CinnamonVersion: Config.PACKAGE_VERSION

diff --git a/js/ui/dialog.js b/js/ui/dialog.js
@@ -205,6 +205,7 @@ var MessageDialogContent = GObject.registerClass({
             style_class: 'message-dialog-content',
             x_expand: true,
             vertical: true,
+            important: true,
         };
         super._init(Object.assign(defaultParams, params));
 
@@ -270,3 +271,125 @@ var MessageDialogContent = GObject.registerClass({
         this.notify('description');
     }
 });
+
+var ListSection = GObject.registerClass({
+    Properties: {
+        'title': GObject.ParamSpec.string(
+            'title', 'title', 'title',
+            GObject.ParamFlags.READWRITE |
+            GObject.ParamFlags.CONSTRUCT,
+            null),
+    },
+}, class ListSection extends St.BoxLayout {
+    _init(params) {
+        this._title = new St.Label({ style_class: 'dialog-list-title' });
+
+        this.list = new St.BoxLayout({
+            style_class: 'dialog-list-box',
+            vertical: true,
+        });
+
+        this._listScrollView = new St.ScrollView({
+            style_class: 'dialog-list-scrollview',
+            hscrollbar_policy: St.PolicyType.NEVER,
+        });
+        this._listScrollView.add_actor(this.list);
+
+        super._init({
+            style_class: 'dialog-list',
+            x_expand: true,
+            vertical: true,
+            important: true,
+            ...params,
+        });
+
+        this.label_actor = this._title;
+        this.add_child(this._title);
+        this.add_child(this._listScrollView);
+    }
+
+    get title() {
+        return this._title.text;
+    }
+
+    set title(title) {
+        _setLabel(this._title, title);
+        this.notify('title');
+    }
+});
+
+var ListSectionItem = GObject.registerClass({
+    Properties: {
+        'icon-actor': GObject.ParamSpec.object(
+            'icon-actor', 'icon-actor', 'Icon actor',
+            GObject.ParamFlags.READWRITE,
+            Clutter.Actor.$gtype),
+        'title': GObject.ParamSpec.string(
+            'title', 'title', 'title',
+            GObject.ParamFlags.READWRITE |
+            GObject.ParamFlags.CONSTRUCT,
+            null),
+        'description': GObject.ParamSpec.string(
+            'description', 'description', 'description',
+            GObject.ParamFlags.READWRITE |
+            GObject.ParamFlags.CONSTRUCT,
+            null),
+    },
+}, class ListSectionItem extends St.BoxLayout{
+    _init(params) {
+        this._iconActorBin = new St.Bin();
+
+        let textLayout = new St.BoxLayout({
+            vertical: true,
+            y_expand: true,
+            y_align: Clutter.ActorAlign.CENTER,
+        });
+
+        this._title = new St.Label({ style_class: 'dialog-list-item-title' });
+
+        this._description = new St.Label({
+            style_class: 'dialog-list-item-description',
+        });
+
+        textLayout.add_child(this._title);
+        textLayout.add_child(this._description);
+
+        super._init({
+            style_class: 'dialog-list-item',
+            important: true,
+            ...params,
+        });
+
+
+        this.label_actor = this._title;
+        this.add_child(this._iconActorBin);
+        this.add_child(textLayout);
+    }
+
+    get iconActor() {
+        return this._iconActorBin.get_child();
+    }
+
+    set iconActor(actor) {
+        this._iconActorBin.set_child(actor);
+        this.notify('icon-actor');
+    }
+
+    get title() {
+        return this._title.text;
+    }
+
+    set title(title) {
+        _setLabel(this._title, title);
+        this.notify('title');
+    }
+
+    get description() {
+        return this._description.text;
+    }
+
+    set description(description) {
+        _setLabel(this._description, description);
+        this.notify('description');
+    }
+});