UX: better flagging options

This commit is contained in:
Arpit Jalan
2015-11-20 21:24:14 +05:30
parent 8104a07327
commit bb1d0dea8a
5 changed files with 44 additions and 13 deletions
@@ -24,6 +24,7 @@ export default Ember.Controller.extend({
showMessageInput: Em.computed.and('model.is_custom_flag', 'selected'),
showDescription: Em.computed.not('showMessageInput'),
isNotifyUser: Em.computed.equal('model.name_key', 'notify_user'),
customMessageLengthClasses: function() {
return (this.get('message.length') < Discourse.SiteSettings.min_private_message_post_length) ? "too-short" : "ok";
@@ -44,4 +45,3 @@ export default Ember.Controller.extend({
}.property('message.length')
});
@@ -14,8 +14,19 @@ export default Ember.Controller.extend(ModalFunctionality, {
flagsAvailable: function() {
if (!this.get('flagTopic')) {
return this.get('model.flagsAvailable');
// flagging post
let flagsAvailable = this.get('model.flagsAvailable');
// "message user" option should be at the top
const notifyUserIndex = flagsAvailable.indexOf(flagsAvailable.filterProperty('name_key', 'notify_user')[0]);
if (notifyUserIndex !== -1) {
const notifyUser = flagsAvailable[notifyUserIndex];
flagsAvailable.splice(notifyUserIndex, 1);
flagsAvailable.splice(0, 0, notifyUser);
}
return flagsAvailable;
} else {
// flagging topic
const self = this,
lookup = Em.Object.create();
@@ -35,6 +46,10 @@ export default Ember.Controller.extend(ModalFunctionality, {
}
}.property('post', 'flagTopic', 'model.actions_summary.@each.can_act'),
staffFlagsAvailable: function() {
return (this.get('model.flagsAvailable').length > 1);
}.property('post', 'flagTopic', 'model.actions_summary.@each.can_act'),
submitEnabled: function() {
const selected = this.get('selected');
if (!selected) return false;
@@ -2,18 +2,33 @@
<form>
{{#each f in flagsAvailable itemController="flag-action-type"}}
<div class='controls'>
<label class='radio'>
<input type='radio' id="radio_{{unbound f.model.name_key}}" {{action "changePostActionType" f}} name='post_action_type_index'> <strong>{{f.formattedName}}</strong>
{{#if f.showDescription}}
<div class='description'>{{{f.model.description}}}</div>
{{#if f.isNotifyUser}}
<h3>{{f.formattedName}}</h3>
<div class='controls'>
<label class='radio'><input type='radio' id="radio_{{unbound f.model.name_key}}" {{action "changePostActionType" f}} name='post_action_type_index'> <div class='description'>{{{f.model.description}}}</div></label>
{{#if f.showMessageInput}}
{{textarea name="message" class="flag-message" placeholder=f.customPlaceholder value=f.message}}
<div {{bind-attr class=":custom-message-length f.customMessageLengthClasses"}}>{{f.customMessageLength}}</div>
{{/if}}
</label>
{{#if f.showMessageInput}}
{{textarea name="message" class="flag-message" placeholder=f.customPlaceholder value=f.message}}
<div {{bind-attr class=":custom-message-length f.customMessageLengthClasses"}}>{{f.customMessageLength}}</div>
</div>
{{#if staffFlagsAvailable}}
<hr>
<h3>{{i18n 'flagging.notify_staff'}}</h3>
{{/if}}
</div>
{{else}}
<div class='controls'>
<label class='radio'>
<input type='radio' id="radio_{{unbound f.model.name_key}}" {{action "changePostActionType" f}} name='post_action_type_index'> <strong>{{f.formattedName}}</strong>
{{#if f.showDescription}}
<div class='description'>{{{f.model.description}}}</div>
{{/if}}
</label>
{{#if f.showMessageInput}}
{{textarea name="message" class="flag-message" placeholder=f.customPlaceholder value=f.message}}
<div {{bind-attr class=":custom-message-length f.customMessageLengthClasses"}}>{{f.customMessageLength}}</div>
{{/if}}
</div>
{{/if}}
{{else}}
{{i18n 'flagging.cant'}}
{{/each}}