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

UX: Minor composer button alignment adjustments, simplification

This commit is contained in:
Kris 2019-05-29 14:37:32 -04:00
parent 23fdaf07f2
commit b24938b5ff
4 changed files with 12 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/discourse/templates/composer.hbs
View File

@ -176,7 +176,6 @@
</div> </div>
</div> </div>
<div class="composer-bottom-right">
{{#if site.mobileView}} {{#if site.mobileView}}
{{#if allowUpload}} {{#if allowUpload}}
<a class="btn btn-default no-text mobile-file-upload {{if isUploading 'hidden'}}"> <a class="btn btn-default no-text mobile-file-upload {{if isUploading 'hidden'}}">
@ -195,7 +194,6 @@
<a href {{action "togglePreview"}} class='toggle-preview'>{{{toggleText}}}</a> <a href {{action "togglePreview"}} class='toggle-preview'>{{{toggleText}}}</a>
{{/if}} {{/if}}
</div>
</div> </div>
</div> </div>

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

@ -280,6 +280,7 @@
flex-basis: 50%; flex-basis: 50%;
display: flex; display: flex;
align-items: center; align-items: center;
margin-right: auto;
button { button {
flex: 0 0 auto; flex: 0 0 auto;
} }
@ -314,15 +315,6 @@
} }
} }
.composer-bottom-right {
flex-basis: 50%;
display: flex;
flex-direction: row-reverse;
.toggle-preview {
order: 2;
}
}
#draft-status, #draft-status,
#file-uploading { #file-uploading {
color: $primary-high; color: $primary-high;

10
app/assets/stylesheets/desktop/compose.scss
View File

@ -202,12 +202,10 @@
width: calc(50% - 65px); width: calc(50% - 65px);
} }
.composer-bottom-right { a.toggle-preview {
a { color: $primary-high;
color: $primary-high; &:hover {
&:hover { color: $tertiary;
color: $tertiary;
}
} }
} }

15
app/assets/stylesheets/mobile/compose.scss
View File

@ -71,22 +71,21 @@
flex: 1 1 auto; flex: 1 1 auto;
#draft-status, #draft-status,
#file-uploading { #file-uploading {
margin-left: 15px; margin-left: 6px;
} }
.cancel { .cancel {
font-size: 1.6em; font-size: 1.4em;
color: $primary-low-mid; color: $primary-low-mid;
margin-left: 0.6em; margin-left: 0.6em;
padding: 0 5px; padding: 3px 6px;
} }
} }
.composer-bottom-right { .mobile-file-upload:not(.hidden),
margin-left: auto; .mobile-preview {
flex: 1 1 auto; // Alignment fix, remove if converted to buttons
display: inline-flex;
} }
.mobile-file-upload { .mobile-file-upload {
order: 2;
&.hidden + .mobile-preview { &.hidden + .mobile-preview {
// Hide preview button while file is uploading to make room for upload progress // Hide preview button while file is uploading to make room for upload progress
display: none; display: none;