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

UX: Improve markup for flag modal

This commit is contained in:
Robin Ward 2017-10-17 10:44:52 -04:00
parent bdd3713ca4
commit 62b260b3f9
3 changed files with 20 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/assets/javascripts/discourse/components/flag-action-type.js.es6
View File

@ -2,6 +2,7 @@ import { MAX_MESSAGE_LENGTH } from 'discourse/models/post-action-type';
import computed from 'ember-addons/ember-computed-decorators';
export default Ember.Component.extend({
classNames: ['flag-action-type'],
@computed('flag.name_key')
customPlaceholder(nameKey) {

27
app/assets/javascripts/discourse/templates/components/flag-action-type.hbs
View File

@ -1,11 +1,17 @@
{{#if isNotifyUser}}
<h3>{{formattedName}}</h3>
<div class='controls'>
<label class='radio'><input type='radio' id="radio_{{unbound flag.name_key}}" {{action "changePostActionType" flag}} name='post_action_type_index'> <span class='description'>{{{flag.description}}}</span></label>
{{#if showMessageInput}}
{{textarea name="message" class="flag-message" placeholder=customPlaceholder value=message}}
<div class="custom-message-length {{customMessageLengthClasses}}">{{customMessageLength}}</div>
{{/if}}
<label class='radio'>
<input type='radio' id="radio_{{unbound flag.name_key}}" {{action "changePostActionType" flag}} name='post_action_type_index'>
<div class='flag-action-type-details'>
<span class='description'>{{{flag.description}}}</span>
{{#if showMessageInput}}
{{textarea name="message" class="flag-message" placeholder=customPlaceholder value=message}}
<div class="custom-message-length {{customMessageLengthClasses}}">{{customMessageLength}}</div>
{{/if}}
</div>
</label>
</div>
{{#if staffFlagsAvailable}}
<hr>
@ -14,10 +20,13 @@
{{else}}
<div class='controls'>
<label class='radio'>
<input type='radio' id="radio_{{unbound flag.name_key}}" {{action "changePostActionType" flag}} name='post_action_type_index'> <strong>{{formattedName}}</strong>
{{#if showDescription}}
<div class='description'>{{{description}}}</div>
{{/if}}
<input type='radio' id="radio_{{unbound flag.name_key}}" {{action "changePostActionType" flag}} name='post_action_type_index'>
<div class='flag-action-type-details'>
<strong>{{formattedName}}</strong>
{{#if showDescription}}
<div class='description'>{{{description}}}</div>
{{/if}}
</div>
</label>
{{#if showMessageInput}}
{{textarea name="message" class="flag-message" placeholder=customPlaceholder value=message}}

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

@ -92,14 +92,13 @@
}
.custom-message-length {
margin: -10px 0 10px 20px;
color: dark-light-choose($primary-low-mid, $secondary-high);
font-size: 85%;
}
.flag-message {
margin-left: 20px;
width: 95% !important;
margin: 0;
}
.edit-category-modal {