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

View File

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

View File

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

View File

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

View File

@ -31,7 +31,7 @@
{{/if}}
{{#if category.topic_url}}
<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}}
</section>
{{/if}}

View File

@ -26,13 +26,13 @@
nameProperty="description"
content=category.availablePermissions
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'}}
</button>
{{/if}}
{{else}}
{{#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}}
{{/if}}
</section>

View File

@ -1,5 +1,5 @@
{{#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}}
{{d-icon "times-circle"}}
{{/d-button}}

View File

@ -1,6 +1,6 @@
<tr class="group-manage-logs-row">
<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}}
{{/d-button}}
</td>
@ -8,7 +8,7 @@
<td>
<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}}
{{/d-button}}
</td>
@ -17,7 +17,7 @@
{{#if log.target_user}}
<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}}
{{/d-button}}
{{/if}}
@ -25,7 +25,7 @@
<td>
{{#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}}
{{/d-button}}
{{/if}}

View File

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

View File

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

View File

@ -279,7 +279,13 @@
}
.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 {
width: 400px;
.btn-small {
border-radius: 10px;
position: relative;
top: -2px;
float: none;
padding: 0 10px;
margin-bottom: 5px;
.btn-primary {
margin-left: 0.5em;
padding: 3px 6px 2px;
font-size: $font-down-1;
min-height: unset;
}
}

View File

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

View File

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