IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

UX: Improve markup for flag modal

Browse Source
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'; import computed from 'ember-addons/ember-computed-decorators';
export default Ember.Component.extend({ export default Ember.Component.extend({
classNames: ['flag-action-type'],
@computed('flag.name_key') @computed('flag.name_key')
customPlaceholder(nameKey) { customPlaceholder(nameKey) {

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

@ -1,11 +1,17 @@
{{#if isNotifyUser}} {{#if isNotifyUser}}
<h3>{{formattedName}}</h3> <h3>{{formattedName}}</h3>
<div class='controls'> <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> <label class='radio'>
{{#if showMessageInput}} <input type='radio' id="radio_{{unbound flag.name_key}}" {{action "changePostActionType" flag}} name='post_action_type_index'>
{{textarea name="message" class="flag-message" placeholder=customPlaceholder value=message}}
<div class="custom-message-length {{customMessageLengthClasses}}">{{customMessageLength}}</div> <div class='flag-action-type-details'>
{{/if}} <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> </div>
{{#if staffFlagsAvailable}} {{#if staffFlagsAvailable}}
<hr> <hr>
@ -14,10 +20,13 @@
{{else}} {{else}}
<div class='controls'> <div class='controls'>
<label class='radio'> <label class='radio'>
<input type='radio' id="radio_{{unbound flag.name_key}}" {{action "changePostActionType" flag}} name='post_action_type_index'> <strong>{{formattedName}}</strong> <input type='radio' id="radio_{{unbound flag.name_key}}" {{action "changePostActionType" flag}} name='post_action_type_index'>
{{#if showDescription}} <div class='flag-action-type-details'>
<div class='description'>{{{description}}}</div> <strong>{{formattedName}}</strong>
{{/if}} {{#if showDescription}}
<div class='description'>{{{description}}}</div>
{{/if}}
</div>
</label> </label>
{{#if showMessageInput}} {{#if showMessageInput}}
{{textarea name="message" class="flag-message" placeholder=customPlaceholder value=message}} {{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 { .custom-message-length {
margin: -10px 0 10px 20px;
color: dark-light-choose($primary-low-mid, $secondary-high); color: dark-light-choose($primary-low-mid, $secondary-high);
font-size: 85%; font-size: 85%;
} }
.flag-message { .flag-message {
margin-left: 20px;
width: 95% !important; width: 95% !important;
margin: 0;
} }
.edit-category-modal { .edit-category-modal {