UX: Normalize sizing for inputs, buttons, dropdowns (#14226)

See PR for details
This commit is contained in:
Penar Musaraj
2021-09-09 11:01:56 -04:00
committed by GitHub
parent 76f0cf10e6
commit 24e71acf3f
69 changed files with 490 additions and 690 deletions
@@ -17,7 +17,7 @@ import { schedule } from "@ember/runloop";
**/
export default Component.extend({
classNames: ["screened-ip-address-form"],
classNames: ["screened-ip-address-form", "inline-form"],
formSubmitted: false,
actionName: "block",
@@ -1,30 +1,35 @@
<b>{{i18n "admin.permalink.form.label"}}</b>
<div class="inline-form">
<label>{{i18n "admin.permalink.form.label"}}</label>
{{text-field
value=url
disabled=formSubmitted
class="permalink-url"
placeholderKey="admin.permalink.url"
autocorrect="off"
autocapitalize="off"}}
{{text-field
value=url
disabled=formSubmitted
class="permalink-url"
placeholderKey="admin.permalink.url"
autocorrect="off"
autocapitalize="off"
}}
{{combo-box
content=permalinkTypes
value=permalinkType
onChange=(action (mut permalinkType))
class="permalink-type"
}}
{{combo-box
content=permalinkTypes
value=permalinkType
onChange=(action (mut permalinkType))
class="permalink-type"
}}
{{text-field
value=permalink_type_value
disabled=formSubmitted
class="external-url"
placeholderKey=permalinkTypePlaceholder
autocorrect="off"
autocapitalize="off"}}
{{text-field
value=permalink_type_value
disabled=formSubmitted
class="external-url"
placeholderKey=permalinkTypePlaceholder
autocorrect="off"
autocapitalize="off"
}}
{{d-button
class="btn-default"
action=(action "submit")
disabled=formSubmitted
label="admin.permalink.form.add"}}
{{d-button
class="btn-default"
action=(action "submit")
disabled=formSubmitted
label="admin.permalink.form.add"
}}
</div>
@@ -1,4 +1,4 @@
<b>{{i18n "admin.logs.screened_ips.form.label"}}</b>
<label>{{i18n "admin.logs.screened_ips.form.label"}}</label>
{{text-field value=ip_address disabled=formSubmitted class="ip-address-input" placeholderKey="admin.logs.screened_ips.form.ip_address" autocorrect="off" autocapitalize="off"}}
{{combo-box
@@ -16,21 +16,24 @@
<form>
<div class="admin-controls">
{{#if sendingEmail}}
<div class="controls">{{i18n "admin.email.sending_test"}}</div>
{{else}}
<div class="controls">
{{text-field value=testEmailAddress placeholderKey="admin.email.test_email_address"}}
<div class="controls">
<div class="inline-form">
{{#if sendingEmail}}
{{i18n "admin.email.sending_test"}}
{{else}}
{{text-field value=testEmailAddress placeholderKey="admin.email.test_email_address"}}
{{d-button
class="btn-primary"
action=(action "sendTestEmail")
disabled=sendTestEmailDisabled
label="admin.email.send_test"
type="submit"
}}
{{#if sentTestEmailMessage}}
<span class="result-message">{{sentTestEmailMessage}}</span>
{{/if}}
{{/if}}
</div>
<div class="controls">
{{d-button
class="btn-primary"
action=(action "sendTestEmail")
disabled=sendTestEmailDisabled
label="admin.email.send_test"
type="submit"}}
{{#if sentTestEmailMessage}}<span class="result-message">{{sentTestEmailMessage}}</span>{{/if}}
</div>
{{/if}}
</div>
</div>
</form>
@@ -2,32 +2,35 @@
<div class="admin-controls email-preview">
<div class="controls">
<label for="last-seen">{{i18n "admin.email.last_seen_user"}}</label>
{{date-picker-past value=lastSeen id="last-seen"}}
<label>{{i18n "admin.email.user"}}:</label>
{{email-group-user-chooser
value=username
onChange=(action "updateUsername")
options=(hash
maximum=1
)
}}
{{d-button
class="btn-primary digest-refresh-button"
action=(action "refresh")
label="admin.email.refresh"}}
<div class="toggle">
<label>{{i18n "admin.email.format"}}</label>
{{#if showHtml}}
<span>{{i18n "admin.email.html"}}</span>
|
<a href {{action "toggleShowHtml"}}>
{{i18n "admin.email.text"}}
</a>
{{else}}
<a href {{action "toggleShowHtml"}}>{{i18n "admin.email.html"}}</a> |
<span>{{i18n "admin.email.text"}}</span>
{{/if}}
<div class="inline-form">
<label for="last-seen">{{i18n "admin.email.last_seen_user"}}</label>
{{date-picker-past value=lastSeen id="last-seen"}}
<label>{{i18n "admin.email.user"}}:</label>
{{email-group-user-chooser
value=username
onChange=(action "updateUsername")
options=(hash
maximum=1
)
}}
{{d-button
class="btn-primary digest-refresh-button"
action=(action "refresh")
label="admin.email.refresh"
}}
<div class="toggle">
<label>{{i18n "admin.email.format"}}</label>
{{#if showHtml}}
<span>{{i18n "admin.email.html"}}</span>
|
<a href {{action "toggleShowHtml"}}>
{{i18n "admin.email.text"}}
</a>
{{else}}
<a href {{action "toggleShowHtml"}}>{{i18n "admin.email.html"}}</a> |
<span>{{i18n "admin.email.text"}}</span>
{{/if}}
</div>
</div>
</div>
</div>
@@ -37,20 +40,22 @@
<div class="email-preview-digest">
{{#if showSendEmailForm}}
<div class="controls">
{{#if sendingEmail}}
{{i18n "admin.email.sending_test"}}
{{else}}
<label>{{i18n "admin.email.send_digest_label"}}</label>
{{text-field value=email placeholderKey="admin.email.test_email_address"}}
{{d-button
class="btn-default"
action=(action "sendEmail")
disabled=sendEmailDisabled
label="admin.email.send_digest"}}
{{#if sentEmail}}
<span class="result-message">{{i18n "admin.email.sent_test"}}</span>
<div class="inline-form">
{{#if sendingEmail}}
{{i18n "admin.email.sending_test"}}
{{else}}
<label>{{i18n "admin.email.send_digest_label"}}</label>
{{text-field value=email placeholderKey="admin.email.test_email_address"}}
{{d-button
class="btn-default"
action=(action "sendEmail")
disabled=sendEmailDisabled
label="admin.email.send_digest"}}
{{#if sentEmail}}
<span class="result-message">{{i18n "admin.email.sent_test"}}</span>
{{/if}}
{{/if}}
{{/if}}
</div>
</div>
{{/if}}
@@ -16,7 +16,7 @@
<tr>
<th>{{i18n "admin.emoji.image"}}</th>
<th>{{i18n "admin.emoji.name"}}</th>
<th>
<th colspan="2">
{{combo-box
value=filter
content=sortingGroups
@@ -25,22 +25,21 @@
onChange=(action "filterGroups")
}}
</th>
<th></th>
</tr>
</thead>
<tbody>
{{#each sortedEmojis as |e|}}
<tr>
<th><img class="emoji emoji-custom" src={{e.url}} title={{e.name}} alt={{i18n "admin.emoji.alt"}}></th>
<th>:{{e.name}}:</th>
<th>{{e.group}}</th>
<th>
<td><img class="emoji emoji-custom" src={{e.url}} title={{e.name}} alt={{i18n "admin.emoji.alt"}}></td>
<td>:{{e.name}}:</td>
<td>{{e.group}}</td>
<td class="action">
{{d-button
action=(action "destroyEmoji" e)
class="btn-danger"
icon="far-trash-alt"
}}
</th>
</td>
</tr>
{{/each}}
</tbody>
@@ -1,7 +1,7 @@
<p>{{i18n "admin.logs.screened_ips.description"}}</p>
<div class="screened-ip-controls">
<div class="filter-screened-ip-address">
<div class="filter-screened-ip-address inline-form">
{{text-field
value=filter
class="ip-address-input"
@@ -82,7 +82,9 @@
action=(action "save")
actionParam=item
label="admin.logs.save"}}
<a href {{action "cancel" item}}>{{i18n "cancel"}}</a>
<a href {{action "cancel" item}} class="cancel-action">
{{i18n "cancel"}}
</a>
{{else}}
{{d-button
class="btn-default btn-danger"
@@ -1,29 +1,29 @@
<div class="staff-action-logs-controls">
{{#if filtersExists}}
<div class="staff-action-logs-filters">
<a href {{action "clearAllFilters"}} class="clear-filters filter">
<a href {{action "clearAllFilters"}} class="clear-filters filter btn">
<span class="label">{{i18n "admin.logs.staff_actions.clear_filters"}}</span>
</a>
{{#if actionFilter}}
<a href {{action "clearFilter" "actionFilter"}} class="filter">
<a href {{action "clearFilter" "actionFilter"}} class="filter btn">
<span class="label">{{i18n "admin.logs.action"}}</span>: {{actionFilter}}
{{d-icon "times-circle"}}
</a>
{{/if}}
{{#if filters.acting_user}}
<a href {{action "clearFilter" "acting_user"}} class="filter">
<a href {{action "clearFilter" "acting_user"}} class="filter btn">
<span class="label">{{i18n "admin.logs.staff_actions.staff_user"}}</span>: {{filters.acting_user}}
{{d-icon "times-circle"}}
</a>
{{/if}}
{{#if filters.target_user}}
<a href {{action "clearFilter" "target_user"}} class="filter">
<a href {{action "clearFilter" "target_user"}} class="filter btn">
<span class="label">{{i18n "admin.logs.staff_actions.target_user"}}</span>: {{filters.target_user}}
{{d-icon "times-circle"}}
</a>
{{/if}}
{{#if filters.subject}}
<a href {{action "clearFilter" "subject"}} class="filter">
<a href {{action "clearFilter" "subject"}} class="filter btn">
<span class="label">{{i18n "admin.logs.staff_actions.subject"}}</span>: {{filters.subject}}
{{d-icon "times-circle"}}
</a>