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

UX: general cleanup of inputs, buttons and select elements - part 1

This commit is contained in:
Joe 2018-09-19 20:37:04 +08:00 committed by GitHub
parent 667e68ec58
commit e844fa5370
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 91 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/discourse/templates/preferences/account.hbs
View File

@ -113,7 +113,7 @@
<td> <td>
{{#if authProvider.method.can_revoke}} {{#if authProvider.method.can_revoke}}
{{#conditional-loading-spinner condition=revoking size='small'}} {{#conditional-loading-spinner condition=revoking size='small'}}
{{d-button action="revokeAccount" actionParam=authProvider.account title="user.associated_accounts.revoke" icon="trash" }} {{d-button action="revokeAccount" actionParam=authProvider.account title="user.associated_accounts.revoke" class="btn-danger no-text" icon="trash" }}
{{/conditional-loading-spinner}} {{/conditional-loading-spinner}}
{{/if}} {{/if}}
</td> </td>

8
app/assets/javascripts/discourse/templates/preferences/tags.hbs
View File

@ -8,7 +8,7 @@
{{tag-chooser {{tag-chooser
tags=model.watched_tags tags=model.watched_tags
blacklist=selectedTags blacklist=selectedTags
filterPlaceholder=null filterPlaceholder="select_kit.filter_placeholder"
allowCreate=false allowCreate=false
everyTag=true everyTag=true
unlimitedTagCount=true}} unlimitedTagCount=true}}
@ -20,7 +20,7 @@
{{tag-chooser {{tag-chooser
tags=model.tracked_tags tags=model.tracked_tags
blacklist=selectedTags blacklist=selectedTags
filterPlaceholder=null filterPlaceholder="select_kit.filter_placeholder"
allowCreate=false allowCreate=false
everyTag=true everyTag=true
unlimitedTagCount=true}} unlimitedTagCount=true}}
@ -32,7 +32,7 @@
{{tag-chooser {{tag-chooser
tags=model.watching_first_post_tags tags=model.watching_first_post_tags
blacklist=selectedTags blacklist=selectedTags
filterPlaceholder=null filterPlaceholder="select_kit.filter_placeholder"
allowCreate=false allowCreate=false
everyTag=true everyTag=true
unlimitedTagCount=true}} unlimitedTagCount=true}}
@ -44,7 +44,7 @@
{{tag-chooser {{tag-chooser
tags=model.muted_tags tags=model.muted_tags
blacklist=selectedTags blacklist=selectedTags
filterPlaceholder=null filterPlaceholder="select_kit.filter_placeholder"
allowCreate=false allowCreate=false
everyTag=true everyTag=true
unlimitedTagCount=true}} unlimitedTagCount=true}}

12
app/assets/stylesheets/common/admin/admin_base.scss
View File

@ -550,8 +550,11 @@ $mobile-breakpoint: 700px;
@include breakpoint(mobile) { @include breakpoint(mobile) {
margin: 0 -10px; margin: 0 -10px;
} }
label {
margin-bottom: 0;
}
input { input {
margin: 0; margin-right: 5px;
@include breakpoint(tablet) { @include breakpoint(tablet) {
max-width: 150px; max-width: 150px;
} }
@ -614,8 +617,6 @@ $mobile-breakpoint: 700px;
} }
} }
.toggle { .toggle {
margin-top: 8px;
float: right;
span { span {
font-weight: bold; font-weight: bold;
} }
@ -627,11 +628,6 @@ $mobile-breakpoint: 700px;
#last-seen input[type="text"] { #last-seen input[type="text"] {
float: none; float: none;
} }
.ac-wrap {
display: inline-block;
vertical-align: middle;
padding: 0;
}
.pull-right { .pull-right {
padding-right: 10px; padding-right: 10px;
} }

10
app/assets/stylesheets/common/admin/customize.scss
View File

@ -570,8 +570,16 @@
} }
} }
.permalink-form .select-kit { .permalink-form {
display: flex;
align-items: center;
.select-kit {
width: 150px; width: 150px;
}
input {
margin: 0 5px;
}
} }
.permalink-title { .permalink-title {

8
app/assets/stylesheets/common/admin/emails.scss
View File

@ -1,13 +1,5 @@
// Styles for admin/emails // Styles for admin/emails
.email-preview {
.ac-wrap {
.item {
margin: 0.2em 0 0 0.4em;
}
}
}
// Emails // Emails
.email-list { .email-list {
.filters input { .filters input {

2
app/assets/stylesheets/common/admin/settings.scss
View File

@ -39,8 +39,6 @@
} }
.input-setting-string, .input-setting-string,
.input-setting-textarea { .input-setting-textarea {
box-sizing: border-box;
height: 30px;
width: 100%; width: 100%;
@media (max-width: $mobile-breakpoint) { @media (max-width: $mobile-breakpoint) {
width: 100%; width: 100%;

2
app/assets/stylesheets/common/admin/staff_logs.scss
View File

@ -246,7 +246,7 @@
margin: 0 -0.25em 1em; margin: 0 -0.25em 1em;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: baseline; align-items: center;
} }
@media screen and (min-width: 800px) { @media screen and (min-width: 800px) {
.screened-ip-address-form { .screened-ip-address-form {

9
app/assets/stylesheets/common/admin/users.scss
View File

@ -78,15 +78,20 @@
margin-left: 0; margin-left: 0;
} }
.btn { .btn {
margin: 2px 5px 2px 0; margin-right: 5px;
} }
} }
} }
.admin-users .users-list { .admin-users {
input {
margin-bottom: 0;
}
.users-list {
.username .fa { .username .fa {
color: dark-light-choose($primary-medium, $secondary-medium); color: dark-light-choose($primary-medium, $secondary-medium);
} }
}
} }
.admin-users-list { .admin-users-list {

6
app/assets/stylesheets/common/base/compose.scss
View File

@ -222,7 +222,8 @@
} }
.add-warning { .add-warning {
margin-left: 1em; margin-left: 0.75em;
margin-bottom: 0;
display: flex; display: flex;
input { input {
margin-right: 5px; margin-right: 5px;
@ -399,8 +400,11 @@ div.ac-wrap {
max-height: 150px; max-height: 150px;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center;
background-color: $secondary; background-color: $secondary;
border: 1px solid $primary-medium; border: 1px solid $primary-medium;
min-height: 30px;
box-sizing: border-box;
div.item { div.item {
float: left; float: left;
padding: 4px 10px; padding: 4px 10px;

11
app/assets/stylesheets/common/base/discourse.scss
View File

@ -111,15 +111,16 @@ span.relative-date {
} }
label { label {
display: block; display: flex;
margin-bottom: 5px; margin-bottom: 5px;
} }
input { input {
&[type="radio"], &[type="radio"],
&[type="checkbox"] { &[type="checkbox"] {
margin: 3px 0; margin-top: 3px;
line-height: $line-height-medium; margin-left: 3px;
line-height: $line-height-small;
cursor: pointer; cursor: pointer;
} }
&[type="submit"], &[type="submit"],
@ -192,11 +193,13 @@ input {
padding: $input-padding; padding: $input-padding;
margin-bottom: 9px; margin-bottom: 9px;
font-size: $font-0; font-size: $font-0;
line-height: $line-height-large; line-height: $line-height-small;
color: $primary; color: $primary;
background-color: $secondary; background-color: $secondary;
border: 1px solid $primary-medium; border: 1px solid $primary-medium;
border-radius: 0; border-radius: 0;
box-sizing: border-box;
min-height: 30px;
&:focus { &:focus {
border-color: $tertiary; border-color: $tertiary;
box-shadow: shadow("focus"); box-shadow: shadow("focus");

5
app/assets/stylesheets/common/base/modal.scss
View File

@ -370,7 +370,8 @@
.edit-category-modal { .edit-category-modal {
input[type="number"] { input[type="number"] {
width: 50px; min-width: 8em;
margin-bottom: 0;
} }
.subcategory-list-style-field { .subcategory-list-style-field {
@ -468,7 +469,7 @@
.change-timestamp, .change-timestamp,
.poll-ui-builder { .poll-ui-builder {
.date-picker { .date-picker {
width: 9em; min-width: 8em;
} }
#date-container { #date-container {

5
app/assets/stylesheets/common/components/buttons.scss
View File

@ -11,10 +11,12 @@
padding: 6px 12px; padding: 6px 12px;
font-weight: 500; font-weight: 500;
font-size: $font-0; font-size: $font-0;
line-height: $line-height-medium; line-height: $line-height-small;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
transition: all 0.25s; transition: all 0.25s;
box-sizing: border-box;
min-heigth: 30px;
&:active, &:active,
&.btn-active { &.btn-active {
@ -50,6 +52,7 @@
&[href] { &[href] {
color: $primary; color: $primary;
min-height: unset; // ovverides button defaults
} }
&:hover, &:hover,
&.btn-hover { &.btn-hover {

2
app/assets/stylesheets/common/components/date-picker.scss
View File

@ -14,7 +14,7 @@
.date-picker { .date-picker {
text-align: center; text-align: center;
width: 80px; width: 8em;
margin: 0; margin: 0;
} }

6
app/assets/stylesheets/common/components/navs.scss
View File

@ -30,7 +30,11 @@
padding: 6px 12px; padding: 6px 12px;
color: $primary; color: $primary;
font-size: $font-up-1; font-size: $font-up-1;
line-height: $line-height-medium; line-height: $line-height-small;
box-sizing: border-box;
min-height: 30px;
display: flex;
align-items: center;
transition: background 0.15s; transition: background 0.15s;
.d-icon { .d-icon {

2
app/assets/stylesheets/common/select-kit/combo-box.scss
View File

@ -45,8 +45,6 @@
padding: $input-padding; padding: $input-padding;
font-weight: 500; font-weight: 500;
font-size: $font-0; font-size: $font-0;
line-height: $line-height-large;
min-height: 2em; // when no content is available
&.is-focused { &.is-focused {
border: 1px solid $tertiary; border: 1px solid $tertiary;

1
app/assets/stylesheets/common/select-kit/mini-tag-chooser.scss
View File

@ -18,7 +18,6 @@
.select-kit-body { .select-kit-body {
max-width: 32em; max-width: 32em;
width: 32em;
} }
.select-kit-header { .select-kit-header {

35
app/assets/stylesheets/common/select-kit/multi-select.scss
View File

@ -18,6 +18,7 @@
.select-kit-filter { .select-kit-filter {
border: 0; border: 0;
flex: 1; flex: 1;
margin: 1px;
} }
.multi-select-header { .multi-select-header {
@ -64,7 +65,7 @@
} }
.choices { .choices {
margin: 1px; margin: 0 2px;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
@ -74,12 +75,11 @@
display: inline-flex; display: inline-flex;
box-sizing: border-box; box-sizing: border-box;
padding: 0 5px; padding: 0 5px;
border: 1px solid transparent;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
flex-direction: row; flex-direction: row;
margin: 1px; margin: 1px 0px 2px 2px;
} }
.filter { .filter {
@ -105,7 +105,7 @@
border: 0; border: 0;
box-shadow: none; box-shadow: none;
border-radius: 0; border-radius: 0;
height: 21px; min-height: unset; // overrides input defaults
} }
} }
@ -118,7 +118,7 @@
.color-preview { .color-preview {
height: 5px; height: 5px;
margin: 0 2px 2px 2px; margin: 0 2px 2px 0px;
display: flex; display: flex;
width: 100%; width: 100%;
} }
@ -148,36 +148,19 @@
} }
.selected-name { .selected-name {
color: $primary; flex: unset;
background-clip: padding-box;
-webkit-touch-callout: none;
user-select: none;
background-color: $primary-low;
cursor: pointer;
outline: none;
line-height: $line-height-medium;
overflow: hidden;
flex: 0 1 auto;
flex-wrap: nowrap;
padding: 0;
display: flex;
flex-direction: column;
.footer { .footer {
display: flex; display: flex;
width: 100%; width: 100%;
} }
.body { .body {
display: flex; background: $primary-low;
align-items: center; padding: 2px 4px;
flex: 1; margin-right: 2px;
} }
.name { .name {
padding: 2px 4px;
line-height: $line-height-medium;
&:after { &:after {
content: "\f00d"; content: "\f00d";
color: $primary-low-mid; color: $primary-low-mid;

3
app/assets/stylesheets/common/select-kit/select-kit.scss
View File

@ -66,10 +66,13 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
flex-direction: row; flex-direction: row;
min-height: 30px;
line-height: $line-height-small;
.selected-name { .selected-name {
text-align: left; text-align: left;
flex: 1 1 auto; flex: 1 1 auto;
padding: 1px 0;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;

14
app/assets/stylesheets/desktop/groups.scss
View File

@ -9,17 +9,3 @@ thead {
padding-left: 2px; padding-left: 2px;
} }
} }
$filter-line-height: 1.5;
.groups-header-filters {
.groups-header-filters-type {
.select-kit-header {
line-height: $filter-line-height;
}
}
input {
line-height: $filter-line-height;
}
}

34
app/assets/stylesheets/desktop/user.scss
View File

@ -265,28 +265,34 @@
padding-top: 10px; padding-top: 10px;
padding-left: 30px; padding-left: 30px;
.form-vertical {
width: 400px;
max-width: 100%;
}
h3 { h3 {
color: $primary; color: $primary;
margin: 20px 0 10px 0; margin: 20px 0 10px 0;
} }
textarea {
width: 530px;
}
.category-selector, .category-selector,
.tag-chooser { .tag-chooser,
width: 530px; textarea {
width: 100%;
} }
input { input {
&.user-selector { &.user-selector {
width: 530px; width: 100%;
}
} }
&[type="text"] { .tag-controls,
@include breakpoint(medium) { .category-controls {
width: 450px; label {
align-items: center;
.d-icon {
margin-right: 3px;
} }
} }
} }
@ -314,4 +320,12 @@
.user-main & .user-field.text { .user-main & .user-field.text {
padding-top: 0; padding-top: 0;
} }
.image-upload-controls {
display: flex;
align-items: center;
.btn {
margin-right: 5px;
}
}
} }

1
app/assets/stylesheets/mobile/topic-list.scss
View File

@ -19,6 +19,7 @@
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
align-self: stretch; align-self: stretch;
align-items: center;
margin: 0 3px 10px 3px; margin: 0 3px 10px 3px;
order: 10; // always last for consistent placement order: 10; // always last for consistent placement
} }