Revert "UX: replace cancel uploading link with icon + fix color"

This reverts commit 1689f436d9.
This commit is contained in:
Robin Ward 2015-09-16 15:15:07 -04:00
parent 23646494eb
commit 52f7ab3a06
5 changed files with 71 additions and 77 deletions

View File

@ -85,26 +85,19 @@
{{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">
{{#if site.mobileView}}
<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> <a href {{action "togglePreview"}} class='toggle-preview'>{{{model.toggleText}}}</a>
{{/if}} <div id="file-uploading" {{bind-attr class="view.isUploading::hidden"}}>
{{#if view.isUploading}} {{loading-spinner size="small"}} {{i18n 'upload_selector.uploading'}} {{view.uploadProgress}}% <a id="cancel-file-upload">{{i18n 'cancel'}}</a>
<div id="file-uploading">
{{loading-spinner size="small"}} {{i18n 'upload_selector.uploading'}} {{view.uploadProgress}}% <a id="cancel-file-upload">{{fa-icon "times"}}</a>
</div> </div>
{{#if site.mobileView}}
<a {{bind-attr class=":mobile-file-upload view.isUploading:hidden"}}>{{i18n 'upload'}}</a>
<input type="file" id="mobile-uploader" />
{{/if}} {{/if}}
<div id='draft-status' class="{{if view.isUploading 'hidden'}}"> <div id='draft-status' {{bind-attr class="view.isUploading:hidden"}}>
{{model.draftStatus}} {{model.draftStatus}}
</div> </div>
</div> </div>

View File

@ -148,20 +148,6 @@ 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
@ -171,5 +157,3 @@ div.ac-wrap {
.cooked > *:first-child { .cooked > *:first-child {
margin-top: 0; margin-top: 0;
} }

View File

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

View File

@ -110,6 +110,7 @@
} }
#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;

View File

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