diff --git a/framework/core/CHANGELOG.md b/framework/core/CHANGELOG.md index 77d286c6d..b2b86b731 100644 --- a/framework/core/CHANGELOG.md +++ b/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)) diff --git a/framework/core/js/admin/src/components/PermissionDropdown.js b/framework/core/js/admin/src/components/PermissionDropdown.js index 866a07a45..45b957acc 100644 --- a/framework/core/js/admin/src/components/PermissionDropdown.js +++ b/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()); } })) diff --git a/framework/core/js/admin/src/components/PermissionGrid.js b/framework/core/js/admin/src/components/PermissionGrid.js index 44d9625b2..d9d9f81ed 100644 --- a/framework/core/js/admin/src/components/PermissionGrid.js +++ b/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 { {section.children.map(child => ( - {child.label} + {child.icon ? icon(child.icon) : ''}{child.label} {permissionCells(child)} @@ -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; } diff --git a/framework/core/less/admin/PermissionsPage.less b/framework/core/less/admin/PermissionsPage.less index 2d89bb41c..a2bc37263 100644 --- a/framework/core/less/admin/PermissionsPage.less +++ b/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 {