IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

UX: replace cancel uploading link with icon + fix color

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -85,19 +85,26 @@
{{popup-input-tip validation=view.replyValidation shownAt=view.showReplyTip}} {{popup-input-tip validation=view.replyValidation shownAt=view.showReplyTip}}
</div> </div>
<!-- keep the classes here in sync with post.hbs --> <!-- keep the classes here in sync with post.hbs -->
{{#unless site.mobileView}}
<div class='preview-wrapper regular'> <div class='preview-wrapper regular'>
<div class="wmd-preview cooked {{if model.hidePreview 'hidden'}}"></div> <div class="wmd-preview cooked {{if model.hidePreview 'hidden'}}"></div>
</div> </div>
{{/unless}}
<div class="composer-bottom-right"> <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>
</div>
{{#if site.mobileView}} {{#if site.mobileView}}
<a {{bind-attr class=":mobile-file-upload view.isUploading:hidden"}}>{{i18n 'upload'}}</a>
<input type="file" id="mobile-uploader" /> <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}} {{/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}} {{model.draftStatus}}
</div> </div>
</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 // 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 // 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 { .cooked > *:first-child {
margin-top: 0; margin-top: 0;
} }

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

@@ -118,6 +118,7 @@ body {
font-size: 1.429em; font-size: 1.429em;
} }
} }
#footer { #footer {
.container { .container {
height: 50px; height: 50px;
@@ -170,7 +171,6 @@ input[type].invalid {
} }
} }
.avatar-wrapper { .avatar-wrapper {
background-color: $secondary; background-color: $secondary;
display: inline-block; display: inline-block;
@@ -180,8 +180,6 @@ input[type].invalid {
.profiler-results.profiler-left { .profiler-results.profiler-left {
top: 60px !important; top: 60px !important;
} }
} }
.unread-private-messages { .unread-private-messages {

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

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

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

@@ -22,26 +22,12 @@ input {
#reply-control { #reply-control {
// used for upload link // used for upload link
.composer-bottom-right { .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; float: right;
margin-right: 8px; line-height: 3em;
} }
#file-uploading { #mobile-uploader { display: none; }
left: 51%; #draft-status, #file-uploading, .mobile-file-upload { display: inline-block; }
font-size: 0.857em; transition: height .4s ease;
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;
width: 100%; width: 100%;
z-index: 1039; z-index: 1039;
height: 0; height: 0;