Merge pull request #7889 from shivapoudel/tweak-backbone-modal

Tweak backbone modal
This commit is contained in:
James Koster 2015-04-08 10:02:42 +01:00
commit f6346c705c
6 changed files with 62 additions and 65 deletions

File diff suppressed because one or more lines are too long

View File

@ -4036,7 +4036,7 @@ table.bar_chart {
*/
.wc-backbone-modal {
* {
box-sizing: content-box;
box-sizing: border-box;
}
.wc-backbone-modal-content {
@ -4045,7 +4045,7 @@ table.bar_chart {
left: 50%;
width: 500px;
background: #fff;
margin: -150px 0 0 -250px;
margin-left: -250px;
z-index: 160000;
}
}
@ -4063,69 +4063,60 @@ table.bar_chart {
}
.wc-backbone-modal-main {
padding-bottom: 50px;
padding-bottom: 51px;
header,
article {
display: block;
position: relative;
padding: 4px 16px;
}
.wc-backbone-modal-header {
height: 50px;
background: #fcfcfc;
padding: 0 50px 0 16px;
border-bottom: 1px solid #ddd;
h1 {
font-size: 22px;
font-weight: 700;
line-height: 42px;
margin: 0;
}
}
.modal-close-link {
cursor: pointer;
color: #777;
background-color: transparent;
height: 50px;
width: 50px;
padding: 0;
position: absolute;
text-align: center;
border: 0;
border-left: 1px solid #ddd;
-webkit-transition: color .1s ease-in-out,background .1s ease-in-out;
transition: color .1s ease-in-out,background .1s ease-in-out;
top: 0;
right: 0;
text-decoration: none;
&:hover {
background: #ddd;
border-color: #ccc;
color: #000;
outline: 0;
text-decoration: none;
font-size: 18px;
font-weight: 700;
line-height: 50px;
}
.close-icon {
display: block;
height: 15px;
background-image: none;
.modal-close-link {
cursor: pointer;
color: #777;
height: 50px;
width: 50px;
padding: 0;
position: absolute;
top: 0;
right: 0;
text-align: center;
margin: 14px;
width: 22px;
border: 0;
border-left: 1px solid #ddd;
background-color: transparent;
-webkit-transition: color .1s ease-in-out,background .1s ease-in-out;
transition: color .1s ease-in-out,background .1s ease-in-out;
&:before {
content: '\f335';
font-size: 22px;
font: 400 20px/1 dashicons;
speak: none;
vertical-align: middle;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font: normal 22px/50px 'dashicons' !important;
color: #666;
display: block;
content: '\f335';
font-weight: 300;
}
&:hover,
&:focus {
background: #ddd;
border-color: #ccc;
color: #000;
}
&:focus {
outline: none;
}
}
}
@ -4144,17 +4135,20 @@ table.bar_chart {
left: 0;
right: 0;
bottom: 0;
height: 30px;
z-index: 100;
padding: 10px 0px;
border: 0 solid #dfdfdf;
border-width: 1px 0 0 0;
padding: 10px 16px;
background: #fcfcfc;
border-top: 1px solid #dfdfdf;
box-shadow: 0 -4px 4px -4px rgba(0,0,0,0.1);
}
footer .inner {
padding: 0 10px;
text-align: right;
.inner {
float: right;
line-height: 23px;
.button {
margin-bottom: 0;
}
}
}
}

File diff suppressed because one or more lines are too long

View File

@ -66,7 +66,7 @@
}).append( this.$el );
var $content = $( '.wc-backbone-modal-content' ).find( 'article' );
var content_h = ( 0 === $content.height() ) ? 90 : $content.height();
var content_h = ( $content.height() < 90 ) ? 90 : $content.height();
var max_h = $( window ).height() - 200;
if ( max_h > 400 ) {
@ -81,7 +81,7 @@
} else {
$content.css({
'overflow': 'visible',
height: content_h
height: ( content_h > 90 ) ? 'auto' : content_h + 'px'
});
}
@ -113,8 +113,7 @@
if ( data.hasOwnProperty( item.name ) ) {
data[ item.name ] = $.makeArray( data[ item.name ] );
data[ item.name ].push( item.value );
}
else {
} else {
data[ item.name ] = item.value;
}
});

View File

@ -1 +1 @@
!function(a,b,c){"use strict";a.fn.WCBackboneModal=function(b){return this.each(function(){new a.WCBackboneModal(a(this),b)})},a.WCBackboneModal=function(b,c){var d=a.extend({},a.WCBackboneModal.defaultOptions,c);d.template&&new a.WCBackboneModal.View({target:d.template})},a.WCBackboneModal.defaultOptions={template:""},a.WCBackboneModal.View=b.View.extend({tagName:"div",id:"wc-backbone-modal-dialog",_target:void 0,events:{"click .modal-close":"closeButton","click #btn-ok":"addButton",keydown:"keyboardActions"},initialize:function(a){this._target=a.target,c.bindAll(this,"render"),this.render()},render:function(){this.$el.attr("tabindex","0").append(a(this._target).html()),a("body").css({overflow:"hidden"}).append(this.$el);var b=a(".wc-backbone-modal-content").find("article"),c=0===b.height()?90:b.height(),d=a(window).height()-200;d>400&&(d=400),b.css(c>d?{overflow:"auto",height:d+"px"}:{overflow:"visible",height:c}),a(".wc-backbone-modal-content").css({"margin-top":"-"+a(".wc-backbone-modal-content").height()/2+"px"}),a("body").trigger("wc_backbone_modal_loaded",this._target)},closeButton:function(b){b.preventDefault(),a("body").trigger("wc_backbone_modal_before_remove",this._target),this.undelegateEvents(),a(document).off("focusin"),a("body").css({overflow:"auto"}),this.remove(),a("body").trigger("wc_backbone_modal_removed",this._target)},addButton:function(b){a("body").trigger("wc_backbone_modal_response",[this._target,this.getFormData()]),this.closeButton(b)},getFormData:function(){var b={};return a.each(a("form",this.$el).serializeArray(),function(c,d){b.hasOwnProperty(d.name)?(b[d.name]=a.makeArray(b[d.name]),b[d.name].push(d.value)):b[d.name]=d.value}),b},keyboardActions:function(a){var b=a.keyCode||a.which;13!==b||a.target.tagName&&"input"===a.target.tagName.toLowerCase()||this.addButton(a),27===b&&this.closeButton(a)}})}(jQuery,Backbone,_);
!function(a,b,c){"use strict";a.fn.WCBackboneModal=function(b){return this.each(function(){new a.WCBackboneModal(a(this),b)})},a.WCBackboneModal=function(b,c){var d=a.extend({},a.WCBackboneModal.defaultOptions,c);d.template&&new a.WCBackboneModal.View({target:d.template})},a.WCBackboneModal.defaultOptions={template:""},a.WCBackboneModal.View=b.View.extend({tagName:"div",id:"wc-backbone-modal-dialog",_target:void 0,events:{"click .modal-close":"closeButton","click #btn-ok":"addButton",keydown:"keyboardActions"},initialize:function(a){this._target=a.target,c.bindAll(this,"render"),this.render()},render:function(){this.$el.attr("tabindex","0").append(a(this._target).html()),a("body").css({overflow:"hidden"}).append(this.$el);var b=a(".wc-backbone-modal-content").find("article"),c=b.height()<90?90:b.height(),d=a(window).height()-200;d>400&&(d=400),b.css(c>d?{overflow:"auto",height:d+"px"}:{overflow:"visible",height:c>90?"auto":c+"px"}),a(".wc-backbone-modal-content").css({"margin-top":"-"+a(".wc-backbone-modal-content").height()/2+"px"}),a("body").trigger("wc_backbone_modal_loaded",this._target)},closeButton:function(b){b.preventDefault(),a("body").trigger("wc_backbone_modal_before_remove",this._target),this.undelegateEvents(),a(document).off("focusin"),a("body").css({overflow:"auto"}),this.remove(),a("body").trigger("wc_backbone_modal_removed",this._target)},addButton:function(b){a("body").trigger("wc_backbone_modal_response",[this._target,this.getFormData()]),this.closeButton(b)},getFormData:function(){var b={};return a.each(a("form",this.$el).serializeArray(),function(c,d){b.hasOwnProperty(d.name)?(b[d.name]=a.makeArray(b[d.name]),b[d.name].push(d.value)):b[d.name]=d.value}),b},keyboardActions:function(a){var b=a.keyCode||a.which;13!==b||a.target.tagName&&"input"===a.target.tagName.toLowerCase()||this.addButton(a),27===b&&this.closeButton(a)}})}(jQuery,Backbone,_);

View File

@ -297,8 +297,10 @@ if ( wc_tax_enabled() ) {
<div class="wc-backbone-modal-content">
<section class="wc-backbone-modal-main" role="main">
<header class="wc-backbone-modal-header">
<a class="modal-close modal-close-link" href="#"><span class="close-icon"><span class="screen-reader-text">Close media panel</span></span></a>
<h1><?php _e( 'Add products', 'woocommerce' ); ?></h1>
<button class="modal-close modal-close-link dashicons dashicons-no-alt">
<span class="screen-reader-text">Close modal panel</span>
</button>
</header>
<article>
<form action="" method="post">
@ -313,7 +315,7 @@ if ( wc_tax_enabled() ) {
</section>
</div>
</div>
<div class="wc-backbone-modal-backdrop modal-close">&nbsp;</div>
<div class="wc-backbone-modal-backdrop modal-close"></div>
</script>
<script type="text/template" id="wc-modal-add-tax">
@ -321,8 +323,10 @@ if ( wc_tax_enabled() ) {
<div class="wc-backbone-modal-content">
<section class="wc-backbone-modal-main" role="main">
<header class="wc-backbone-modal-header">
<a class="modal-close modal-close-link" href="#"><span class="close-icon"><span class="screen-reader-text">Close media panel</span></span></a>
<h1><?php _e( 'Add tax', 'woocommerce' ); ?></h1>
<button class="modal-close modal-close-link dashicons dashicons-no-alt">
<span class="screen-reader-text">Close modal panel</span>
</button>
</header>
<article>
<form action="" method="post">
@ -368,5 +372,5 @@ if ( wc_tax_enabled() ) {
</section>
</div>
</div>
<div class="wc-backbone-modal-backdrop modal-close">&nbsp;</div>
<div class="wc-backbone-modal-backdrop modal-close"></div>
</script>