Improve admin permissions page with icons, visual tweaks

framework/core/CHANGELOG.md

@@ -4,7 +4,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased][unreleased]
 ### Added
-- Allow discussions to be hidden and restored.
+- Ability to hide and restore discussions.
 - External authentication (social login) API.
 - API to set asset compiler filename.
 - Migration generator, available via generate:migration console command.
@@ -14,6 +14,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 - Abstract SettingsModal component for quickly building admin config modals.
 - "Debug" button to inspect the response of a failed AJAX request.
 - `Model::afterSave()` API to run callback after a model instance is saved.
+- Improved admin Permissions page with icons and other tweaks.
 
 ### Changed
 - Migrations must be namespaced under `Flarum\Migrations\{Core|ExtensionName}`. ([#422](https://github.com/flarum/core/issues/422))

framework/core/js/admin/src/components/PermissionDropdown.js

@@ -61,7 +61,7 @@ export default class PermissionDropdown extends Dropdown {
         icon: !everyone && !members ? 'check' : true,
         disabled: !everyone && !members,
         onclick: e => {
-          e.stopPropagation();
+          if (e.shiftKey) e.stopPropagation();
           this.save([]);
         }
       })
@@ -75,7 +75,7 @@ export default class PermissionDropdown extends Dropdown {
           children: [GroupBadge.component({group, label: null}), ' ', group.namePlural()],
           icon: groupIds.indexOf(group.id()) !== -1 ? 'check' : true,
           onclick: (e) => {
-            e.stopPropagation();
+            if (e.shiftKey) e.stopPropagation();
             this.toggle(group.id());
           }
         }))

framework/core/js/admin/src/components/PermissionGrid.js

@@ -3,6 +3,7 @@ import PermissionDropdown from 'flarum/components/PermissionDropdown';
 import ConfigDropdown from 'flarum/components/ConfigDropdown';
 import Button from 'flarum/components/Button';
 import ItemList from 'flarum/utils/ItemList';
+import icon from 'flarum/helpers/icon';
 
 export default class PermissionGrid extends Component {
   constructor(...args) {
@@ -45,7 +46,7 @@ export default class PermissionGrid extends Component {
             </tr>
             {section.children.map(child => (
               <tr className="PermissionGrid-child">
-                <th>{child.label}</th>
+                <th>{child.icon ? icon(child.icon) : ''}{child.label}</th>
                 {permissionCells(child)}
                 <td/>
               </tr>
@@ -60,24 +61,24 @@ export default class PermissionGrid extends Component {
     const items = new ItemList();
 
     items.add('view', {
-      label: 'View the forum',
+      label: 'Read',
       children: this.viewItems().toArray()
-    });
+    }, 100);
 
     items.add('start', {
-      label: 'Start discussions',
+      label: 'Create',
       children: this.startItems().toArray()
-    });
+    }, 90);
 
     items.add('reply', {
-      label: 'Reply to discussions',
+      label: 'Participate',
       children: this.replyItems().toArray()
-    });
+    }, 80);
 
     items.add('moderate', {
       label: 'Moderate',
       children: this.moderateItems().toArray()
-    });
+    }, 70);
 
     return items;
   }
@@ -86,12 +87,14 @@ export default class PermissionGrid extends Component {
     const items = new ItemList();
 
     items.add('view', {
+      icon: 'eye',
       label: 'View discussions',
       permission: 'forum.view',
       allowGuest: true
-    });
+    }, 100);
 
     items.add('signUp', {
+      icon: 'user-plus',
       label: 'Sign up',
       setting: () => ConfigDropdown.component({
         key: 'allow_sign_up',
@@ -100,7 +103,7 @@ export default class PermissionGrid extends Component {
           {value: '0', label: 'Closed'}
         ]
       })
-    });
+    }, 90);
 
     return items;
   }
@@ -109,11 +112,13 @@ export default class PermissionGrid extends Component {
     const items = new ItemList();
 
     items.add('start', {
+      icon: 'edit',
       label: 'Start discussions',
       permission: 'forum.startDiscussion'
-    });
+    }, 100);
 
     items.add('allowRenaming', {
+      icon: 'i-cursor',
       label: 'Allow renaming',
       setting: () => {
         const minutes = parseInt(app.config.allow_renaming, 10);
@@ -128,7 +133,7 @@ export default class PermissionGrid extends Component {
           ]
         });
       }
-    });
+    }, 90);
 
     return items;
   }
@@ -137,11 +142,13 @@ export default class PermissionGrid extends Component {
     const items = new ItemList();
 
     items.add('reply', {
+      icon: 'reply',
       label: 'Reply to discussions',
       permission: 'discussion.reply'
-    });
+    }, 100);
 
     items.add('allowPostEditing', {
+      icon: 'pencil',
       label: 'Allow post editing',
       setting: () => {
         const minutes = parseInt(app.config.allow_post_editing, 10);
@@ -156,7 +163,7 @@ export default class PermissionGrid extends Component {
           ]
         });
       }
-    });
+    }, 90);
 
     return items;
   }
@@ -164,25 +171,35 @@ export default class PermissionGrid extends Component {
   moderateItems() {
     const items = new ItemList();
 
-    items.add('editPosts', {
-      label: 'Edit posts',
-      permission: 'discussion.editPosts'
-    });
-
-    items.add('deletePosts', {
-      label: 'Delete posts',
-      permission: 'discussion.deletePosts'
-    });
-
     items.add('renameDiscussions', {
+      icon: 'i-cursor',
       label: 'Rename discussions',
       permission: 'discussion.rename'
-    });
+    }, 100);
+
+    items.add('hideDiscussions', {
+      icon: 'trash-o',
+      label: 'Delete discussions',
+      permission: 'discussion.hide'
+    }, 90);
 
     items.add('deleteDiscussions', {
-      label: 'Delete discussions',
+      icon: 'times',
+      label: 'Delete discussions forever',
       permission: 'discussion.delete'
-    });
+    }, 80);
+
+    items.add('editPosts', {
+      icon: 'pencil',
+      label: 'Edit and delete posts',
+      permission: 'discussion.editPosts'
+    }, 70);
+
+    items.add('deletePosts', {
+      icon: 'times',
+      label: 'Delete posts forever',
+      permission: 'discussion.deletePosts'
+    }, 60);
 
     return items;
   }
@@ -196,12 +213,15 @@ export default class PermissionGrid extends Component {
         if (item.setting) {
           return item.setting();
         } else if (item.permission) {
-          return PermissionDropdown.component(Object.assign({}, item));
+          return PermissionDropdown.component({
+            permission: item.permission,
+            allowGuest: item.allowGuest
+          });
         }
 
         return '';
       }
-    });
+    }, 100);
 
     return items;
   }

framework/core/less/admin/PermissionsPage.less

@@ -59,18 +59,26 @@
   tbody {
     th {
       padding-right: 50px;
+
+      .icon {
+        margin-right: 5px;
+        font-size: 14px;
+      }
     }
     tr:last-child {
       td, th {
         padding-bottom: 15px !important;
       }
     }
-    select {
-      background: transparent;
-      padding: 0 30px 0 0;
-      height: auto;
-      border: 0;
-      width: 100%;
+    .Dropdown {
+      display: block;
+
+      .Dropdown-toggle {
+        width: 100%;
+        display: block;
+        text-align: left;
+        float: none;
+      }
     }
     .Button {
       text-decoration: none;
@@ -93,9 +101,14 @@
   margin: -1px 0;
 }
 .PermissionDropdown {
+  .Dropdown-toggle {
+    padding: 5px 0;
+    margin: -5px 0;
+  }
   .Badge {
     margin: -3px 3px -3px 0;
     vertical-align: 1px;
+    .box-shadow(none);
   }
 }
 .PermissionGrid-section {