diff --git a/extensions/tags/js/admin/Gulpfile.js b/extensions/tags/js/admin/Gulpfile.js index 0a9f1ed7f..53a9f303b 100644 --- a/extensions/tags/js/admin/Gulpfile.js +++ b/extensions/tags/js/admin/Gulpfile.js @@ -1,6 +1,9 @@ var gulp = require('flarum-gulp'); gulp({ + files: [ + 'bower_components/html.sortable/dist/html.sortable.js' + ], modules: { 'tags': [ '../lib/**/*.js', diff --git a/extensions/tags/js/admin/src/addTagsPane.js b/extensions/tags/js/admin/src/addTagsPane.js new file mode 100644 index 000000000..f3674cc81 --- /dev/null +++ b/extensions/tags/js/admin/src/addTagsPane.js @@ -0,0 +1,18 @@ +import { extend } from 'flarum/extend'; +import AdminNav from 'flarum/components/AdminNav'; +import AdminLinkButton from 'flarum/components/AdminLinkButton'; + +import TagsPage from 'tags/components/TagsPage'; + +export default function() { + app.routes.tags = {path: '/tags', component: TagsPage.component()}; + + extend(AdminNav.prototype, 'items', items => { + items.add('tags', AdminLinkButton.component({ + href: app.route('tags'), + icon: 'tags', + children: 'Tags', + description: 'Manage the list of tags available to organise discussions with.' + })); + }); +} diff --git a/extensions/tags/js/admin/src/addTagsPermissionScope.js b/extensions/tags/js/admin/src/addTagsPermissionScope.js new file mode 100644 index 000000000..b79dfd506 --- /dev/null +++ b/extensions/tags/js/admin/src/addTagsPermissionScope.js @@ -0,0 +1,60 @@ +import { extend } from 'flarum/extend'; +import PermissionGrid from 'flarum/components/PermissionGrid'; +import PermissionDropdown from 'flarum/components/PermissionDropdown'; +import Dropdown from 'flarum/components/Dropdown'; +import Button from 'flarum/components/Button'; + +import tagLabel from 'tags/helpers/tagLabel'; +import tagIcon from 'tags/helpers/tagIcon'; +import sortTags from 'tags/utils/sortTags'; + +export default function() { + extend(PermissionGrid.prototype, 'scopeItems', items => { + sortTags(app.store.all('tags')) + .filter(tag => tag.isRestricted()) + .forEach(tag => items.add('tag' + tag.id(), { + label: tagLabel(tag), + onremove: () => tag.save({isRestricted: false}), + render: item => { + if (item.permission) { + let permission; + + if (item.permission === 'forum.view') { + permission = 'view'; + } else if (item.permission === 'forum.startDiscussion') { + permission = 'startDiscussion'; + } else if (item.permission.indexOf('discussion.') === 0) { + permission = item.permission; + } + + if (permission) { + const props = Object.assign({}, item); + props.permission = 'tag' + tag.id() + '.' + permission; + + return PermissionDropdown.component(props); + } + } + + return ''; + } + })); + }); + + extend(PermissionGrid.prototype, 'scopeControlItems', items => { + const tags = sortTags(app.store.all('tags').filter(tag => !tag.isRestricted())); + + if (tags.length) { + items.add('tag', Dropdown.component({ + buttonClassName: 'Button Button--text', + label: 'Restrict by Tag', + icon: 'plus', + caretIcon: null, + children: tags.map(tag => Button.component({ + icon: true, + children: [tagIcon(tag, {className: 'Button-icon'}), ' ', tag.name()], + onclick: () => tag.save({isRestricted: true}) + })) + })); + } + }); +} diff --git a/extensions/tags/js/admin/src/components/EditTagModal.js b/extensions/tags/js/admin/src/components/EditTagModal.js new file mode 100644 index 000000000..97d6fa3ad --- /dev/null +++ b/extensions/tags/js/admin/src/components/EditTagModal.js @@ -0,0 +1,106 @@ +import Modal from 'flarum/components/Modal'; +import Button from 'flarum/components/Button'; +import { slug } from 'flarum/utils/string'; + +import tagLabel from 'tags/helpers/tagLabel'; + +/** + * The `EditTagModal` component shows a modal dialog which allows the user + * to create or edit a tag. + */ +export default class EditTagModal extends Modal { + constructor(...args) { + super(...args); + + this.tag = this.props.tag || app.store.createRecord('tags'); + + this.name = m.prop(this.tag.name() || ''); + this.slug = m.prop(this.tag.slug() || ''); + this.description = m.prop(this.tag.description() || ''); + this.color = m.prop(this.tag.color() || ''); + } + + className() { + return 'EditTagModal Modal--small'; + } + + title() { + return this.name() + ? tagLabel({ + name: this.name, + color: this.color + }) + : 'Create Tag'; + } + + content() { + return ( +
+
+
+ + { + this.name(e.target.value); + this.slug(slug(e.target.value)); + }}/> +
+ +
+ + +
+ +
+ +