FIX: make it possible to close popup-input-tips on touch devices, and position them a bit better

This commit is contained in:
Neil Lalonde 2013-10-25 11:17:11 -04:00
parent 8dded197df
commit 90938df967
7 changed files with 16 additions and 43 deletions

View File

@ -1,2 +1,2 @@
<a href="#" class="close" {{action hide target="view"}}><i class="icon icon-remove-sign"></i></a> <span class="close"><i class="icon icon-remove-sign"></i></span>
{{view.validation.reason}} {{view.validation.reason}}

View File

@ -17,6 +17,10 @@ Discourse.PopupInputTipView = Discourse.View.extend({
bouncePixels: 6, bouncePixels: 6,
bounceDelay: 100, bounceDelay: 100,
click: function(e) {
this.set('shownAt', false);
},
good: function() { good: function() {
return !this.get('validation.failed'); return !this.get('validation.failed');
}.property('validation'), }.property('validation'),
@ -25,10 +29,6 @@ Discourse.PopupInputTipView = Discourse.View.extend({
return this.get('validation.failed'); return this.get('validation.failed');
}.property('validation'), }.property('validation'),
hide: function() {
this.set('shownAt', false);
},
bounce: function() { bounce: function() {
if( this.get('shownAt') ) { if( this.get('shownAt') ) {
var $elem = this.$(); var $elem = this.$();

View File

@ -1,5 +1,5 @@
@import "common/foundation/variables"; @import "foundation/variables";
@import "common/foundation/mixins"; @import "foundation/mixins";
.popup-tip { .popup-tip {
position: absolute; position: absolute;
@ -16,14 +16,15 @@
&.hide, &.good { &.hide, &.good {
display: none; display: none;
} }
a.close { .close {
float: right; float: right;
color: $black; color: $black;
opacity: 0.5; opacity: 0.5;
font-size: 15px; font-size: 15px;
margin-left: 4px; margin-left: 4px;
cursor: pointer;
} }
a.close:hover { .close:hover {
opacity: 1.0; opacity: 1.0;
} }
} }

View File

@ -279,14 +279,15 @@ display: none;
display: inline; display: inline;
} }
.title-input .popup-tip { .title-input .popup-tip {
width: 300px; width: 240px;
left: -8px; right: 5px;
margin-top: 8px;
} }
.category-input .popup-tip { .category-input .popup-tip {
width: 240px; width: 240px;
left: 432px; right: 5px;
top: -7px; }
.textarea-wrapper .popup-tip {
top: 28px;
} }
button.btn.no-text { button.btn.no-text {
margin: 7px 0 0 5px; margin: 7px 0 0 5px;

View File

@ -1,29 +0,0 @@
@import "../common/foundation/variables";
@import "../common/foundation/mixins";
.popup-tip {
position: absolute;
display: block;
padding: 5px 10px;
z-index: 101;
@include border-radius-all(2px);
border: solid 1px #955;
&.bad {
background-color: #b66;
color: white;
box-shadow: 1px 1px 5px #777, inset 0 0 9px #b55;
}
&.hide, &.good {
display: none;
}
a.close {
float: right;
color: $black;
opacity: 0.5;
font-size: 15px;
margin-left: 4px;
}
a.close:hover {
opacity: 1.0;
}
}