PropertiesWindow: redesign permisssions (#2463)

Co-authored-by: Jeremy Wootten <jeremywootten@gmail.com>

data/files.gresource.xml

@@ -1,8 +1,17 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <gresources>
   <gresource prefix="/io/elementary/files/">
+    <file alias="Application.css" compressed="true">styles/Application.css</file>
     <file alias="ColorButton.css" compressed="true">styles/ColorButton.css</file>
     <file alias="DiskRenderer.css" compressed="true">styles/DiskRenderer.css</file>
     <file alias="SidebarExpander.css" compressed="true">styles/SidebarExpander.css</file>
   </gresource>
+  <gresource prefix="/io/elementary/files/icons">
+    <file alias="scalable/status/permission-execute-prevent-symbolic.svg" compressed="true" preprocess="xml-stripblanks">icons/permission-execute-prevent.svg</file>
+    <file alias="scalable/status/permission-execute-symbolic.svg" compressed="true" preprocess="xml-stripblanks">icons/permission-execute.svg</file>
+    <file alias="scalable/status/permission-read-prevent-symbolic.svg" compressed="true" preprocess="xml-stripblanks">icons/permission-read-prevent.svg</file>
+    <file alias="scalable/status/permission-read-symbolic.svg" compressed="true" preprocess="xml-stripblanks">icons/permission-read.svg</file>
+    <file alias="scalable/status/permission-write-prevent-symbolic.svg" compressed="true" preprocess="xml-stripblanks">icons/permission-write-prevent.svg</file>
+    <file alias="scalable/status/permission-write-symbolic.svg" compressed="true" preprocess="xml-stripblanks">icons/permission-write.svg</file>
+  </gresource>
 </gresources>

data/styles/Application.css

@@ -0,0 +1,34 @@
+/*FIXME: Remove list styles in Gtk4*/
+list.rich-list > row {
+    padding: 6px;
+    min-height: 32px;
+}
+
+list.rich-list label {
+    margin: 0 6px;
+}
+
+list.rich-list button.toggle {
+    margin: 3px 0;
+}
+
+list:not(.horizontal) row.separator,
+list.separators:not(.horizontal) > row:not(.separator) + row:not(.separator) {
+    border-top: 1px solid @menu_separator;
+}
+
+list.boxed-list {
+    border-radius: 6px;
+    box-shadow: 0 1px 3px alpha(black, 0.1);
+}
+
+list.boxed-list > row:first-child {
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+}
+
+list.boxed-list > row:last-child {
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+    border-bottom-width: 0;
+}

src/Application.vala

@@ -152,6 +152,11 @@ public class Files.Application : Gtk.Application {
         QuicklistHandler.get_singleton ();
 #endif
 
+        var app_provider = new Gtk.CssProvider ();
+        app_provider.load_from_resource ("/io/elementary/files/Application.css");
+
+        Gtk.StyleContext.add_provider_for_screen (Gdk.Screen.get_default (), app_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
+
         var granite_settings = Granite.Settings.get_default ();
         var gtk_settings = Gtk.Settings.get_default ();
 

src/Dialogs/PropertiesWindow.vala

@@ -964,13 +964,8 @@ public class Files.View.PropertiesWindow : AbstractPropertiesDialog {
             var group_combo = create_group_choice ();
             group_combo.margin_bottom = 12;
 
-            var owner_label = make_key_label (_("Owner:"));
             perm_button_user = create_perm_choice (Permissions.Type.USER);
-
-            var group_label = make_key_label (_("Group:"));
             perm_button_group = create_perm_choice (Permissions.Type.GROUP);
-
-            var other_label = make_key_label (_("Everyone:"));
             perm_button_other = create_perm_choice (Permissions.Type.OTHER);
 
             perm_code = new Gtk.Entry ();
@@ -981,23 +976,29 @@ public class Files.View.PropertiesWindow : AbstractPropertiesDialog {
             l_perm.halign = Gtk.Align.START;
             l_perm.use_markup = true;
 
+            var permission_box = new Gtk.ListBox () {
+                selection_mode = NONE
+            };
+            // FIXME: use constants in Gtk4
+            permission_box.get_style_context ().add_class ("frame");
+            permission_box.get_style_context ().add_class ("rich-list");
+            permission_box.get_style_context ().add_class ("boxed-list");
+            permission_box.get_style_context ().add_class ("separators");
+            permission_box.add (perm_button_user);
+            permission_box.add (perm_button_group);
+            permission_box.add (perm_button_other);
+
             perm_grid = new Gtk.Grid () {
                 column_spacing = 6,
-                row_spacing = 6,
-                halign = Gtk.Align.CENTER
+                row_spacing = 6
             };
-            perm_grid.attach (owner_user_label, 0, 1, 1, 1);
-            perm_grid.attach (owner_user_choice, 1, 1, 2, 1);
-            perm_grid.attach (group_combo_label, 0, 2, 1, 1);
-            perm_grid.attach (group_combo, 1, 2, 2, 1);
-            perm_grid.attach (owner_label, 0, 3, 1, 1);
-            perm_grid.attach (perm_button_user, 1, 3, 2, 1);
-            perm_grid.attach (group_label, 0, 4, 1, 1);
-            perm_grid.attach (perm_button_group, 1, 4, 2, 1);
-            perm_grid.attach (other_label, 0, 5, 1, 1);
-            perm_grid.attach (perm_button_other, 1, 5, 2, 1);
-            perm_grid.attach (l_perm, 1, 6, 1, 1);
-            perm_grid.attach (perm_code, 2, 6, 1, 1);
+            perm_grid.attach (owner_user_label, 0, 0);
+            perm_grid.attach (owner_user_choice, 1, 0);
+            perm_grid.attach (group_combo_label, 0, 1);
+            perm_grid.attach (group_combo, 1, 1);
+            perm_grid.attach (permission_box, 0, 2, 2);
+            perm_grid.attach (l_perm, 0, 3);
+            perm_grid.attach (perm_code, 1, 3);
 
             update_perm_grid_toggle_states (goffile.permissions);
 

src/Utils/Permissions.vala

@@ -21,7 +21,19 @@ namespace Permissions {
     public enum Type {
         USER,
         GROUP,
-        OTHER
+        OTHER;
+
+        public string to_string () {
+            switch (this) {
+                case USER:
+                    return _("Owner");
+                case GROUP:
+                    return _("Group");
+                default:
+                case OTHER:
+                    return _("Everyone");
+            }
+        }
     }
 
     public enum Value {