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

UX: replace cancel uploading link with icon + fix color

This commit is contained in:
Régis Hanol 2015-09-16 17:54:09 +02:00
parent 9b543f65fb
commit 1689f436d9
5 changed files with 77 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -85,19 +85,26 @@
{{popup-input-tip validation=view.replyValidation shownAt=view.showReplyTip}}
</div>
<!-- keep the classes here in sync with post.hbs -->
<div class='preview-wrapper regular'>
<div class="wmd-preview cooked {{if model.hidePreview 'hidden'}}"></div>
</div>
<div class="composer-bottom-right">
<a href {{action "togglePreview"}} class='toggle-preview'>{{{model.toggleText}}}</a>
<div id="file-uploading" {{bind-attr class="view.isUploading::hidden"}}>
{{loading-spinner size="small"}} {{i18n 'upload_selector.uploading'}} {{view.uploadProgress}}% <a id="cancel-file-upload">{{i18n 'cancel'}}</a>
{{#unless site.mobileView}}
<div class='preview-wrapper regular'>
<div class="wmd-preview cooked {{if model.hidePreview 'hidden'}}"></div>
</div>
{{/unless}}
<div class="composer-bottom-right">
{{#if site.mobileView}}
<a {{bind-attr class=":mobile-file-upload view.isUploading:hidden"}}>{{i18n 'upload'}}</a>
<input type="file" id="mobile-uploader" />
{{#unless view.isUploading}}
<a class="mobile-file-upload">{{i18n 'upload'}}</a>
{{/unless}}
{{else}}
<a href {{action "togglePreview"}} class='toggle-preview'>{{{model.toggleText}}}</a>
{{/if}}
<div id='draft-status' {{bind-attr class="view.isUploading:hidden"}}>
{{#if view.isUploading}}
<div id="file-uploading">
{{loading-spinner size="small"}} {{i18n 'upload_selector.uploading'}} {{view.uploadProgress}}% <a id="cancel-file-upload">{{fa-icon "times"}}</a>
</div>
{{/if}}
<div id='draft-status' class="{{if view.isUploading 'hidden'}}">
{{model.draftStatus}}
</div>
</div>

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

@ -148,6 +148,20 @@ div.ac-wrap {
}
}
#cancel-file-upload {
font-size: 1.6em;
}
#draft-status, #file-uploading {
color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%));
}
.composer-bottom-right {
.spinner.small {
width: 6px;
height: 6px;
}
}
// this removes the topmost margin from the first element in the topic post
// if we don't do this, all posts would have extra space at the top
@ -157,3 +171,5 @@ div.ac-wrap {
.cooked > *:first-child {
margin-top: 0;
}

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

@ -106,7 +106,7 @@ body {
margin: 0 10px 0 10px;
}
.message {
.message {
@include border-radius-all(8px);
background-color: $secondary;
padding: 14px;
@ -118,7 +118,8 @@ body {
font-size: 1.429em;
}
}
#footer {
#footer {
.container {
height: 50px;
.contents {
@ -134,54 +135,51 @@ body {
transition:none !important;
}
.tip {
display: inline-block;
&.good {
color: $success;
}
&.bad {
color: $danger;
}
}
input[type].invalid {
background-color: dark-light-choose(scale-color($danger, $lightness: 80%), scale-color($danger, $lightness: -60%));
}
.wmd-input {
resize: none;
}
.pagedown-editor {
width: 540px;
background-color: $secondary;
padding: 0 10px 13px 10px;
border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
.preview {
margin-top: 8px;
border: 1px dashed dark-light-diff($primary, $secondary, 90%, -60%);
padding: 8px 8px 0 8px;
p {
margin: 0 0 10px 0;
.tip {
display: inline-block;
&.good {
color: $success;
}
&.bad {
color: $danger;
}
}
.preview.hidden {
display: none;
input[type].invalid {
background-color: dark-light-choose(scale-color($danger, $lightness: 80%), scale-color($danger, $lightness: -60%));
}
}
.wmd-input {
resize: none;
}
.avatar-wrapper {
background-color: $secondary;
display: inline-block;
border-radius: 50%;
}
.profiler-results.profiler-left {
top: 60px !important;
}
.pagedown-editor {
width: 540px;
background-color: $secondary;
padding: 0 10px 13px 10px;
border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
.preview {
margin-top: 8px;
border: 1px dashed dark-light-diff($primary, $secondary, 90%, -60%);
padding: 8px 8px 0 8px;
p {
margin: 0 0 10px 0;
}
}
.preview.hidden {
display: none;
}
}
.avatar-wrapper {
background-color: $secondary;
display: inline-block;
border-radius: 50%;
}
.profiler-results.profiler-left {
top: 60px !important;
}
}
.unread-private-messages {

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

@ -110,7 +110,6 @@
}
#draft-status, #file-uploading {
right: 51%;
color: $primary;
}
#file-uploading {
font-size: 0.857em;

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

@ -22,26 +22,12 @@ input {
#reply-control {
// used for upload link
.composer-bottom-right {
position: absolute;
bottom: -32px;
right: -5px;
}
.toggle-preview { display:none; }
.preview-wrapper { display:none; }
#mobile-uploader { display: none; }
#draft-status, #file-uploading, .mobile-file-upload {
float: right;
margin-right: 8px;
line-height: 3em;
}
#file-uploading {
left: 51%;
font-size: 0.857em;
color: scale-color($secondary, $lightness: 50%);
}
#draft-status {
color: dark-light-choose(scale-color($primary, $lightness: 75%), scale-color($secondary, $lightness: 25%));
}
transition: height 0.4s ease;
#mobile-uploader { display: none; }
#draft-status, #file-uploading, .mobile-file-upload { display: inline-block; }
transition: height .4s ease;
width: 100%;
z-index: 1039;
height: 0;