Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: Better looking bulk actions modal

This commit is contained in:
Robin Ward 2017-05-11 14:47:08 -04:00
parent 704101253d
commit 5bbc477baa
5 changed files with 51 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
app/assets/javascripts/discourse/controllers/topic-bulk-actions.js.es6
View File

@ -2,51 +2,47 @@ import ModalFunctionality from 'discourse/mixins/modal-functionality';
const _buttons = []; const _buttons = [];
function addBulkButton(action, key) { const alwaysTrue = () => true;
_buttons.push({ action: action, label: "topics.bulk." + key });
function addBulkButton(action, key, icon, buttonVisible) {
_buttons.push({
action,
label: `topics.bulk.${key}`,
icon,
buttonVisible: buttonVisible || alwaysTrue
});
} }
// Default buttons // Default buttons
addBulkButton('showChangeCategory', 'change_category'); addBulkButton('showChangeCategory', 'change_category', 'pencil');
addBulkButton('deleteTopics', 'delete'); addBulkButton('deleteTopics', 'delete', 'trash');
addBulkButton('closeTopics', 'close_topics'); addBulkButton('closeTopics', 'close_topics', 'lock');
addBulkButton('archiveTopics', 'archive_topics'); addBulkButton('archiveTopics', 'archive_topics', 'folder');
addBulkButton('showNotificationLevel', 'notification_level'); addBulkButton('showNotificationLevel', 'notification_level', 'circle-o');
addBulkButton('resetRead', 'reset_read'); addBulkButton('resetRead', 'reset_read', 'backward');
addBulkButton('unlistTopics', 'unlist_topics'); addBulkButton('unlistTopics', 'unlist_topics', 'eye-slash', topics => {
addBulkButton('showTagTopics', 'change_tags'); return topics.some(t => t.visible);
addBulkButton('showAppendTagTopics', 'append_tags'); });
addBulkButton('relistTopics', 'relist_topics', 'eye', topics => {
return topics.some(t => !t.visible);
});
addBulkButton('showTagTopics', 'change_tags', 'tag');
addBulkButton('showAppendTagTopics', 'append_tags', 'tag');
// Modal for performing bulk actions on topics // Modal for performing bulk actions on topics
export default Ember.Controller.extend(ModalFunctionality, { export default Ember.Controller.extend(ModalFunctionality, {
tags: null, tags: null,
buttonRows: null,
emptyTags: Ember.computed.empty('tags'), emptyTags: Ember.computed.empty('tags'),
categoryId: Ember.computed.alias('model.category.id'), categoryId: Ember.computed.alias('model.category.id'),
onShow() { onShow() {
const showRelistButton = this.get('model.topics').some(t => !t.visible); const topics = this.get('model.topics');
const relistButtonIndex = _buttons.findIndex(b => b.action === 'relistTopics'); // const relistButtonIndex = _buttons.findIndex(b => b.action === 'relistTopics');
if (showRelistButton && relistButtonIndex === -1) {
addBulkButton('relistTopics', 'relist_topics'); this.set('buttons', _buttons.filter(b => b.buttonVisible(topics)));
} else if (!showRelistButton && relistButtonIndex !== -1) {
_buttons.splice(relistButtonIndex, 1);
}
this.set('modal.modalClass', 'topic-bulk-actions-modal small'); this.set('modal.modalClass', 'topic-bulk-actions-modal small');
const buttonRows = [];
let row = [];
_buttons.forEach(function(b) {
row.push(b);
if (row.length === 4) {
buttonRows.push(row);
row = [];
}
});
if (row.length) { buttonRows.push(row); }
this.set('buttonRows', buttonRows);
this.send('changeBulkTemplate', 'modal/bulk-actions-buttons'); this.send('changeBulkTemplate', 'modal/bulk-actions-buttons');
}, },

12
app/assets/javascripts/discourse/templates/modal/bulk-actions-buttons.hbs
View File

@ -1,7 +1,5 @@
{{#each buttonRows as |row|}} <div class='bulk-buttons'>
<p> {{#each buttons as |button|}}
{{#each row as |button|}} {{d-button action=button.action label=button.label icon=button.icon}}
{{d-button action=button.action label=button.label}} {{/each}}
{{/each}} </div>
</p>
{{/each}}

4
app/assets/stylesheets/common/components/buttons.scss
View File

@ -60,6 +60,10 @@
&:hover { color: dark-light-choose(scale-color($primary, $lightness: 70%), scale-color($secondary, $lightness: 30%)); } &:hover { color: dark-light-choose(scale-color($primary, $lightness: 70%), scale-color($secondary, $lightness: 30%)); }
cursor: not-allowed; cursor: not-allowed;
} }
i.fa {
opacity: 0.7;
}
} }
// Primary button // Primary button

12
app/assets/stylesheets/desktop/modal.scss
View File

@ -146,6 +146,18 @@
height: 400px; height: 400px;
max-height: 400px; max-height: 400px;
} }
.bulk-buttons {
display: flex;
flex-wrap: wrap;
.btn {
width: 22%;
margin-bottom: 1em;
margin-right: 1em;
}
}
} }
.tabbed-modal { .tabbed-modal {
.modal-body { .modal-body {

4
config/locales/client.en.yml
View File

@ -1376,10 +1376,10 @@ en:
dismiss_new: "Dismiss New" dismiss_new: "Dismiss New"
toggle: "toggle bulk selection of topics" toggle: "toggle bulk selection of topics"
actions: "Bulk Actions" actions: "Bulk Actions"
change_category: "Change Category" change_category: "Set Category"
close_topics: "Close Topics" close_topics: "Close Topics"
archive_topics: "Archive Topics" archive_topics: "Archive Topics"
notification_level: "Change Notification Level" notification_level: "Notifications"
choose_new_category: "Choose the new category for the topics:" choose_new_category: "Choose the new category for the topics:"
selected: selected:
one: "You have selected <b>1</b> topic." one: "You have selected <b>1</b> topic."