Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

REFACTOR: Convert buttons to flexbox #11785

Merged
merged 6 commits into from Jan 27, 2021
Merged

REFACTOR: Convert buttons to flexbox #11785

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
232294a
UX: Flexify buttons
awesomerobot Jan 20, 2021
147d302
General button fixes, alignment fixes
awesomerobot Jan 20, 2021
b408e8d
modal footer button alignment fix
awesomerobot Jan 20, 2021
1a4c9c5
switch to em based padding
awesomerobot Jan 21, 2021
958b434
don't hide the new topic button text now that it wraps better
awesomerobot Jan 21, 2021
a5384a9
footer button margin adjustment
awesomerobot Jan 21, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/assets/javascripts/discourse/app/templates/components/ignored-user-list.hbs
View file
Open in desktop
Expand Up @@ -6,4 +6,4 @@
{{/each}}
</div>
<div class="instructions">{{i18n "user.ignored_users_instructions"}}</div>
<div>{{#d-button action=(action "newIgnoredUser") class="btn-default" icon="plus"}}{{i18n "user.user_notifications.add_ignored_user"}}{{/d-button}}</div>
<div>{{d-button action=(action "newIgnoredUser") class="btn-default" icon="plus" label="user.user_notifications.add_ignored_user"}}</div>
24 changes: 13 additions & 11 deletions app/assets/javascripts/discourse/app/templates/components/tag-groups-form.hbs
View file
Open in desktop
Expand Up @@ -89,16 +89,18 @@
</div>
</section>

{{d-button
class="btn-default"
action=(action "save")
disabled=savingDisabled
label="tagging.groups.save"}}
<div class="tag-group-controls">
{{d-button
class="btn-default"
action=(action "save")
disabled=savingDisabled
label="tagging.groups.save"}}

{{d-button
class="btn-danger"
action=(action "destroy")
disabled=buffered.isNew
icon="far-trash-alt"
label="tagging.groups.delete"}}
{{d-button
class="btn-danger"
action=(action "destroy")
disabled=buffered.isNew
icon="far-trash-alt"
label="tagging.groups.delete"}}
</div>
</div>
2 changes: 1 addition & 1 deletion app/assets/javascripts/discourse/app/templates/user.hbs
View file
Open in desktop
Expand Up @@ -67,7 +67,7 @@
</li>
{{/if}}
{{#if currentUser.staff}}
<li><a href={{model.adminPath}} class="btn btn-default">{{d-icon "wrench"}}{{i18n "admin.user.show_admin_profile"}}</a></li>
<li><a href={{model.adminPath}} class="btn btn-default">{{d-icon "wrench"}}<span class="d-button-label">{{i18n "admin.user.show_admin_profile"}}</span></a></li>
{{/if}}
{{plugin-outlet name="user-profile-controls"
tagName=""
Expand Down
20 changes: 8 additions & 12 deletions app/assets/stylesheets/common/base/_topic-list.scss
View file
Open in desktop
Expand Up @@ -34,18 +34,6 @@
max-height: 40vh;
}
}

@include breakpoint(medium) {
// hide button labels to save space
.btn {
.d-button-label {
display: none;
}
.d-icon {
margin: 0;
}
}
}
}

.navigation-container {
Expand Down Expand Up @@ -81,6 +69,14 @@
> * {
white-space: nowrap;
}
.select-kit button {
height: 100%; // ensures nested select-kit button matches height of button siblings
}
.btn {
// need to reduce vertical padding for consistent height
padding-top: 0.3em;
padding-bottom: 0.3em;
}
}

.show-more {
Expand Down
1 change: 1 addition & 0 deletions app/assets/stylesheets/common/base/compose.scss
View file
Open in desktop
Expand Up @@ -122,6 +122,7 @@
}

.action-title {
line-height: normal;
@include ellipsis;
}

Expand Down
10 changes: 9 additions & 1 deletion app/assets/stylesheets/common/base/modal.scss
View file
Open in desktop
Expand Up @@ -162,14 +162,22 @@
}

.modal-footer {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 14px 15px 10px;
border-top: 1px solid var(--primary-low);
.btn {
margin: 0 5px 5px 0;
margin: 0 0.3em 0 0;
&[href] {
min-height: unset;
}
}

.btn,
a {
margin-bottom: 0.3em;
}
}

.modal {
Expand Down
4 changes: 2 additions & 2 deletions app/assets/stylesheets/common/base/popup-menu.scss
View file
Open in desktop
Expand Up @@ -19,12 +19,12 @@
}

.btn {
display: flex;
text-align: left;
justify-content: left;
background: none;
width: 100%;
padding: 0.75em;
border-radius: 0;
margin: 0;

.d-icon {
color: var(--primary-medium);
Expand Down
5 changes: 0 additions & 5 deletions app/assets/stylesheets/common/base/reviewables.scss
View file
Open in desktop
Expand Up @@ -188,11 +188,6 @@
width: auto;
}

.refresh {
height: 1em;
display: flex;
}

.score-filter {
width: 5em;
}
Expand Down
2 changes: 1 addition & 1 deletion app/assets/stylesheets/common/base/search.scss
View file
Open in desktop
Expand Up @@ -11,7 +11,7 @@
.search-bar {
display: flex;
justify-content: space-between;
align-items: center;
align-items: stretch;
margin-bottom: 1em;

.search-query {
Expand Down
3 changes: 3 additions & 0 deletions app/assets/stylesheets/common/base/tagging.scss
View file
Open in desktop
Expand Up @@ -258,6 +258,9 @@ header .discourse-tag {
margin-bottom: 10px;
}
}
.tag-group-controls {
display: flex;
}
.group-tags-list .tag-chooser {
width: 100%;
}
Expand Down
20 changes: 4 additions & 16 deletions app/assets/stylesheets/common/base/topic-post.scss
View file
Open in desktop
Expand Up @@ -1049,32 +1049,20 @@ a.mention-group {
}

#topic-footer-buttons {
padding: 0.5em 0;
padding: 0.75em 0;

.topic-footer-main-buttons {
margin: 0 0 -0.5em 0;
display: flex;
flex-wrap: wrap;

> .btn {
margin: 0 0.5em 0.5em 0;
display: inline-flex;
align-items: center;

.d-button-label {
display: flex;
flex: 1 0 auto;
align-items: center;
}
button {
margin-right: 0.54em;
height: 100%; // helps select-kit buttons match height
}

.topic-admin-menu-button-container {
display: inline-flex;
}

.topic-admin-menu-button-container > span:not(:empty) {
margin: 0 0.5em 0.5em 0;
}
}

.pinned-button:not(.is-hidden) + .topic-notifications-button {
Expand Down
1 change: 0 additions & 1 deletion app/assets/stylesheets/common/base/user.scss
View file
Open in desktop
Expand Up @@ -217,7 +217,6 @@

.btn {
margin-bottom: 10px;
line-height: $line-height-medium;
}
}

Expand Down
15 changes: 7 additions & 8 deletions app/assets/stylesheets/common/components/buttons.scss
View file
Open in desktop
Expand Up @@ -13,25 +13,24 @@
$hover-bg-color: var(--primary-medium),
$hover-icon-color: var(--primary-low)
) {
display: inline-block;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 6px 12px;
min-height: 30px;
padding: 0.53em 0.8em;
border: none;
box-sizing: border-box;
font-weight: normal;
font-size: $font-0;
line-height: normal;
color: $text-color;
background: $bg-color;
font-size: $font-0;
line-height: $line-height-small;
text-align: center;
cursor: pointer;
transition: all 0.25s;
.d-icon {
color: $icon-color;
margin-right: 0.45em;
transition: color 0.25s;
line-height: $line-height-medium; // Match button text line-height
}
&.no-text {
.d-icon {
Expand Down
1 change: 1 addition & 0 deletions app/assets/stylesheets/common/components/navs.scss
View file
Open in desktop
Expand Up @@ -22,6 +22,7 @@
@extend .clearfix;

> li {
display: flex;
float: left;
margin-right: 0.5em;

Expand Down
2 changes: 1 addition & 1 deletion app/assets/stylesheets/common/d-editor.scss
View file
Open in desktop
Expand Up @@ -263,7 +263,7 @@
// shared styles for all font sizes
.btn,
.btn-default {
padding: 0 0.5em;
padding: 0.5em;
}
.d-editor-spacer {
margin: 0 0.25em;
Expand Down
8 changes: 2 additions & 6 deletions app/assets/stylesheets/desktop/user.scss
View file
Open in desktop
Expand Up @@ -186,15 +186,11 @@
> ul {
display: inline-flex;
> li {
display: inline;
margin-left: 12px;
.d-button-label {
line-height: 1;
}
display: inline-flex;
margin-left: 0.75em;
}

a {
margin-bottom: 10px;
width: auto;
}
}
Expand Down
12 changes: 11 additions & 1 deletion app/assets/stylesheets/mobile/topic-post.scss
View file
Open in desktop
Expand Up @@ -237,9 +237,19 @@ a.reply-to-tab {
color: var(--tertiary);
}

.topic-footer-main-buttons {
display: flex;
align-items: stretch;
}

.topic-footer-mobile-dropdown {
margin: 0 0.5em 0.5em 0;
margin: 0 0.75em 0 0;
width: 160px;
display: flex;
}

.select-kit-header {
height: 100%;
}

.topic-notifications-button,
Expand Down
2 changes: 1 addition & 1 deletion plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss
View file
Open in desktop
Expand Up @@ -201,7 +201,7 @@
flex: 1;
@include ellipsis;
width: 100%;
text-align: left;
justify-content: flex-start;
}
}

Expand Down