UX: Reducing usage of btn-small, simplifying styles

This commit is contained in:
Kris 2019-01-11 19:41:09 -05:00
parent e453539e1e
commit 8176d26dbd
14 changed files with 36 additions and 41 deletions

View File

@ -2,8 +2,8 @@
<div class="title"> <div class="title">
{{#if editingName}} {{#if editingName}}
{{text-field value=model.name autofocus="true"}} {{text-field value=model.name autofocus="true"}}
{{d-button action=(action "finishedEditingName") class="btn-primary btn-small submit-edit" icon="check"}} {{d-button action=(action "finishedEditingName") class="btn-primary submit-edit" icon="check"}}
{{d-button action=(action "cancelEditingName") class="btn-small cancel-edit" icon="times"}} {{d-button action=(action "cancelEditingName") class="btn-default cancel-edit" icon="times"}}
{{else}} {{else}}
{{model.name}} <a {{action "startEditingName"}}>{{d-icon "pencil"}}</a> {{model.name}} <a {{action "startEditingName"}}>{{d-icon "pencil"}}</a>
{{/if}} {{/if}}
@ -49,8 +49,8 @@
value=colorSchemeId value=colorSchemeId
icon="paint-brush"}} icon="paint-brush"}}
{{#if colorSchemeChanged}} {{#if colorSchemeChanged}}
{{d-button action=(action "changeScheme") class="btn-primary btn-small submit-edit" icon="check"}} {{d-button action=(action "changeScheme") class="btn-primary submit-edit" icon="check"}}
{{d-button action=(action "cancelChangeScheme") class="btn-default btn-small cancel-edit" icon="times"}} {{d-button action=(action "cancelChangeScheme") class="btn-default cancel-edit" icon="times"}}
{{/if}} {{/if}}
</div> </div>
{{#link-to 'adminCustomize.colors' class="btn btn-default edit"}}{{i18n 'admin.customize.colors.edit'}}{{/link-to}} {{#link-to 'adminCustomize.colors' class="btn btn-default edit"}}{{i18n 'admin.customize.colors.edit'}}{{/link-to}}
@ -119,7 +119,7 @@
<li> <li>
<span class='col'>${{upload.name}}: <a href={{upload.url}} target='_blank'>{{upload.filename}}</a></span> <span class='col'>${{upload.name}}: <a href={{upload.url}} target='_blank'>{{upload.filename}}</a></span>
<span class='col'> <span class='col'>
{{d-button action=(action "removeUpload") actionParam=upload class="second btn-default btn-small cancel-edit" icon="times"}} {{d-button action=(action "removeUpload") actionParam=upload class="second btn-default btn-default cancel-edit" icon="times"}}
</span> </span>
</li> </li>
{{/each}} {{/each}}
@ -147,7 +147,7 @@
{{#if model.childThemes.length}} {{#if model.childThemes.length}}
<ul class='removable-list'> <ul class='removable-list'>
{{#each model.childThemes as |child|}} {{#each model.childThemes as |child|}}
<li>{{#link-to 'adminCustomizeThemes.show' child replace=true class='col'}}{{child.name}}{{/link-to}} {{d-button action=(action "removeChildTheme") actionParam=child class="btn-default btn-small cancel-edit col" icon="times"}}</li> <li>{{#link-to 'adminCustomizeThemes.show' child replace=true class='col'}}{{child.name}}{{/link-to}} {{d-button action=(action "removeChildTheme") actionParam=child class="btn-default cancel-edit col" icon="times"}}</li>
{{/each}} {{/each}}
</ul> </ul>
{{/if}} {{/if}}

View File

@ -18,8 +18,8 @@
</div> </div>
<p class="actions"> <p class="actions">
<small>{{i18n 'admin.dashboard.last_checked'}}: {{problemsTimestamp}}</small> {{d-button action=(action "refreshProblems") class="btn-default" icon="refresh" label="admin.dashboard.refresh_problems"}}
{{d-button action=(action "refreshProblems") class="btn-default btn-small" icon="refresh" label="admin.dashboard.refresh_problems"}} {{i18n 'admin.dashboard.last_checked'}}: {{problemsTimestamp}}
</p> </p>
{{/conditional-loading-section}} {{/conditional-loading-section}}
</div> </div>

View File

@ -13,7 +13,7 @@
<div class='grant-info-item'> <div class='grant-info-item'>
{{i18n 'badges.allow_title'}} {{i18n 'badges.allow_title'}}
{{d-button {{d-button
class="btn btn-small pad-left no-text" class="btn btn-default pad-left no-text"
action=(action "toggleSetUserTitle") action=(action "toggleSetUserTitle")
icon="pencil"}} icon="pencil"}}
</div> </div>

View File

@ -11,6 +11,6 @@
{{else}} {{else}}
<div class='ac-wrap composer-user-selector-limited' {{action "toggleSelector"}}> <div class='ac-wrap composer-user-selector-limited' {{action "toggleSelector"}}>
<span>{{limitedUsernames}}</span> <span>{{limitedUsernames}}</span>
<span class='btn-small btn-primary'>{{hiddenUsersCount}}</span> <span class='btn btn-primary'>{{hiddenUsersCount}}</span>
</div> </div>
{{/if}} {{/if}}

View File

@ -31,7 +31,7 @@
{{/if}} {{/if}}
{{#if category.topic_url}} {{#if category.topic_url}}
<br> <br>
{{d-button class="btn-small" action=(action "showCategoryTopic") icon="pencil" label="category.change_in_category_topic"}} {{d-button class="btn-default" action=(action "showCategoryTopic") icon="pencil" label="category.change_in_category_topic"}}
{{/if}} {{/if}}
</section> </section>
{{/if}} {{/if}}

View File

@ -26,13 +26,13 @@
nameProperty="description" nameProperty="description"
content=category.availablePermissions content=category.availablePermissions
value=selectedPermission}} value=selectedPermission}}
<button {{action "addPermission" selectedGroup selectedPermission}} class="btn btn-small add-permission"> <button {{action "addPermission" selectedGroup selectedPermission}} class="btn btn-default add-permission">
{{i18n 'category.add_permission'}} {{i18n 'category.add_permission'}}
</button> </button>
{{/if}} {{/if}}
{{else}} {{else}}
{{#unless category.is_special}} {{#unless category.is_special}}
<button {{action "editPermissions"}} class="btn btn-default btn-small edit-permission">{{i18n 'category.edit_permissions'}}</button> <button {{action "editPermissions"}} class="btn btn-default btn-default edit-permission">{{i18n 'category.edit_permissions'}}</button>
{{/unless}} {{/unless}}
{{/if}} {{/if}}
</section> </section>

View File

@ -1,5 +1,5 @@
{{#if value}} {{#if value}}
{{#d-button class="btn-small group-manage-logs-filter" action=(action "clearFilter") actionParam=type}} {{#d-button class="btn-default group-manage-logs-filter" action=(action "clearFilter") actionParam=type}}
<span>{{label}}</span>: {{filterText}} <span>{{label}}</span>: {{filterText}}
{{d-icon "times-circle"}} {{d-icon "times-circle"}}
{{/d-button}} {{/d-button}}

View File

@ -1,6 +1,6 @@
<tr class="group-manage-logs-row"> <tr class="group-manage-logs-row">
<td> <td>
{{#d-button class="btn-small" action=(action "filter") actionParam=(hash value=log.action key="action")}} {{#d-button class="btn-default" action=(action "filter") actionParam=(hash value=log.action key="action")}}
{{log.actionTitle}} {{log.actionTitle}}
{{/d-button}} {{/d-button}}
</td> </td>
@ -8,7 +8,7 @@
<td> <td>
<span>{{avatar log.acting_user imageSize='tiny'}}</span> <span>{{avatar log.acting_user imageSize='tiny'}}</span>
{{#d-button class="btn-small" action=(action "filter") actionParam=(hash value=log.acting_user.username key="acting_user")}} {{#d-button class="btn-default" action=(action "filter") actionParam=(hash value=log.acting_user.username key="acting_user")}}
{{log.acting_user.username}} {{log.acting_user.username}}
{{/d-button}} {{/d-button}}
</td> </td>
@ -17,7 +17,7 @@
{{#if log.target_user}} {{#if log.target_user}}
<span>{{avatar log.target_user imageSize='tiny'}}</span> <span>{{avatar log.target_user imageSize='tiny'}}</span>
{{#d-button class="btn-small" action=(action "filter") actionParam=(hash value=log.target_user.username key="target_user")}} {{#d-button class="btn-default" action=(action "filter") actionParam=(hash value=log.target_user.username key="target_user")}}
{{log.target_user.username}} {{log.target_user.username}}
{{/d-button}} {{/d-button}}
{{/if}} {{/if}}
@ -25,7 +25,7 @@
<td> <td>
{{#if log.subject}} {{#if log.subject}}
{{#d-button class="btn-small" action=(action "filter") actionParam=(hash value=log.subject key="subject")}} {{#d-button class="btn-default" action=(action "filter") actionParam=(hash value=log.subject key="subject")}}
{{log.subject}} {{log.subject}}
{{/d-button}} {{/d-button}}
{{/if}} {{/if}}

View File

@ -31,8 +31,8 @@
{{plugin-outlet name="edit-topic" args=(hash model=model buffered=buffered)}} {{plugin-outlet name="edit-topic" args=(hash model=model buffered=buffered)}}
<div class="edit-controls"> <div class="edit-controls">
{{d-button action=(action "finishedEditingTopic") class="btn-primary btn-small submit-edit" icon="check"}} {{d-button action=(action "finishedEditingTopic") class="btn-primary submit-edit" icon="check"}}
{{d-button action=(action "cancelEditingTopic") class="btn-default btn-small cancel-edit" icon="times"}} {{d-button action=(action "cancelEditingTopic") class="btn-default cancel-edit" icon="times"}}
{{#if canRemoveTopicFeaturedLink}} {{#if canRemoveTopicFeaturedLink}}
<a href {{action "removeFeaturedLink"}} class="remove-featured-link" title="{{i18n "composer.remove_featured_link"}}"> <a href {{action "removeFeaturedLink"}} class="remove-featured-link" title="{{i18n "composer.remove_featured_link"}}">

View File

@ -99,9 +99,6 @@
margin-bottom: 0; margin-bottom: 0;
font-size: $font-down-2; font-size: $font-down-2;
} }
.btn-small {
font-size: $font-down-2;
}
} }
.field-error { .field-error {

View File

@ -279,7 +279,13 @@
} }
.actions { .actions {
margin: 0; margin: 1em 0 0 0;
display: flex;
align-items: center;
color: $primary-medium;
.btn {
margin-right: 1em;
}
} }
} }
} }

View File

@ -1,10 +1,11 @@
div.ac-wrap.composer-user-selector-limited { div.ac-wrap.composer-user-selector-limited {
width: 400px; width: 400px;
padding: 0 10px;
.btn-small { margin-bottom: 5px;
border-radius: 10px; .btn-primary {
position: relative; margin-left: 0.5em;
top: -2px; padding: 3px 6px 2px;
float: none; font-size: $font-down-1;
min-height: unset;
} }
} }

View File

@ -60,8 +60,8 @@
.title-wrapper { .title-wrapper {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
.btn-small { button {
margin: 0 6px 0 0; margin: 0 0.5em 0 0;
} }
a.topic-featured-link { a.topic-featured-link {
display: inline-block; display: inline-block;
@ -88,9 +88,6 @@ a.badge-category {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
width: 90%; width: 90%;
.btn-small {
margin: 0 6px 0 0;
}
a.topic-featured-link { a.topic-featured-link {
display: inline-block; display: inline-block;
} }

View File

@ -189,13 +189,7 @@ sub sub {
width: 100%; width: 100%;
input#edit-title { input#edit-title {
box-sizing: border-box;
width: 100%; width: 100%;
height: 32px;
}
.btn-small {
padding: 6px 12px;
margin: 6px 6px 0 0;
} }
.select-kit.combo-box.category-chooser { .select-kit.combo-box.category-chooser {