Image fixes and select_image eye candy. ;)

dovy · dovy · commit cfab6da74f08 · 2013-12-22T23:01:13.000+01:00
diff --git a/ReduxCore/assets/css/admin.css b/ReduxCore/assets/css/admin.css
diff --git a/ReduxCore/assets/css/admin.less b/ReduxCore/assets/css/admin.less
@@ -317,7 +317,6 @@ a {
 	border-bottom: 1px solid #E7E7E7;
 }
 .redux-group-tab .redux-section-desc{
-	font-size:1.1em;
 	margin-bottom: 35px;
 	color:#666666;
 }
@@ -337,7 +336,6 @@ a {
 }
 .redux-group-tab .form-table tr th{
 	font-weight:bold;
-	font-size:1.1em;
 	width:30%;
 	padding:20px 5px 20px 0px;
 }
@@ -959,6 +957,7 @@ img {
 
 .redux-main .field-desc {
 	clear: both;
+	font-size: 13px;
 }
 
 .redux-main .data-full li{
diff --git a/ReduxCore/assets/css/redux.css b/ReduxCore/assets/css/redux.css
diff --git a/ReduxCore/assets/js/redux.min.js b/ReduxCore/assets/js/redux.min.js
diff --git a/ReduxCore/extensions/edd/edd_license/field_edd_license.min.js b/ReduxCore/extensions/edd/edd_license/field_edd_license.min.js
diff --git a/ReduxCore/inc/fields/image_select/field_image_select.css b/ReduxCore/inc/fields/image_select/field_image_select.css
@@ -4,12 +4,15 @@
 .redux-container-image_select .redux-image-select-presets img {
   width: 100%;
 }
-.redux-container-image_select .redux-image-select {
-  margin: 3px 10px;
+.redux-container-image_select ul.redux-image-select li {
+  margin: 0 10px 3px 10px;
   display: inline-block;
   padding: 10px;
   padding-left: 0;
 }
+.redux-container-image_select .redux-image-select li:last-child {
+  margin-bottom: 0;
+}
 .redux-container-image_select .redux-image-select-selected {
   background-color: #f9f9f9;
 }
diff --git a/ReduxCore/inc/fields/image_select/field_image_select.less b/ReduxCore/inc/fields/image_select/field_image_select.less
@@ -5,12 +5,15 @@
 	.redux-image-select-presets img {
 		width: 100%;
 	}
-	.redux-image-select {
-		margin:3px 10px;
+	ul.redux-image-select li {
+		margin: 0 10px 3px 10px;
 		display:inline-block;
 		padding:10px;
 		padding-left: 0;
 	}
+	.redux-image-select li:last-child {
+		margin-bottom: 0;
+	}
 	.redux-image-select-selected{
 		background-color:#f9f9f9;
 	}
diff --git a/ReduxCore/inc/fields/select_image/field_select_image.js b/ReduxCore/inc/fields/select_image/field_select_image.js
@@ -1,5 +1,17 @@
-function updateSelectImage(obj, imgID) {
-    tochange = obj.value;
-    document.getElementById(imgID).src = tochange;
-    document.getElementById(imgID).style = 'visibility:show;';
-}
+(function($){
+
+	$('.redux-select-image-item').on('change', function() {
+		var preview = $(this).parents('.redux-field:first').find('.redux-preview-image');
+		if ($(this).val() === "") {
+			preview.fadeOut('medium', function() {
+				preview.attr('src', '');
+			});
+		} else {
+			preview.attr('src', $(this).val());
+			preview.fadeIn();
+		}
+	});
+
+})(jQuery);
+
+
diff --git a/ReduxCore/inc/fields/select_image/field_select_image.php b/ReduxCore/inc/fields/select_image/field_select_image.php
@@ -59,7 +59,7 @@ function render() {
             $placeholder = (isset($this->field['placeholder'])) ? esc_attr($this->field['placeholder']) : __('Select an item', 'redux-framework');
 
             // Begin the <select> tag
-            echo '<select id="' . $this->field['id'] . '-select_image" data-placeholder="' . $placeholder . '" name="' . $this->args['opt_name'] . '[' . $this->field['id'] . ']" class="redux-select-item ' . $this->field['class'] . '"' . $width . ' rows="6"' . 'onchange="updateSelectImage(this, \'image_' . $this->field['id'] . '\');">';
+            echo '<select id="' . $this->field['id'] . '-select_image" data-placeholder="' . $placeholder . '" name="' . $this->args['opt_name'] . '[' . $this->field['id'] . ']" class="redux-select-item redux-select-image-item ' . $this->field['class'] . '"' . $width . ' rows="6"' . '>';
             echo '<option></option>';
             
 
diff --git a/ReduxCore/inc/fields/slides/field_slides.css b/ReduxCore/inc/fields/slides/field_slides.css
@@ -51,6 +51,7 @@
   float: right;
   margin-right: 10%;
   display: block;
+  margin-bottom: 10px;
 }
 .redux-container-slides .redux-slides-remove {
   color: #ef521d !important;
diff --git a/ReduxCore/inc/fields/slides/field_slides.less b/ReduxCore/inc/fields/slides/field_slides.less
@@ -53,6 +53,7 @@
 	    float: right;
 	    margin-right: 10%;
 	    display: block;
+	    margin-bottom: 10px;
 	}
 	.redux-slides-remove{
 	    color: #ef521d !important;
diff --git a/ReduxCore/inc/fields/sorter/field_sorter.css b/ReduxCore/inc/fields/sorter/field_sorter.css
@@ -17,7 +17,7 @@
   margin-bottom: 10px;
   padding: 0 10px;
   height: 40px;
-  line-height: 40px;
+  line-height: 40px !important;
   background-color: #F1F1F1;
   background-image: -ms-linear-gradient(top, #f9f9f9, #ececec);
   background-image: -moz-linear-gradient(top, #f9f9f9, #ececec);
diff --git a/ReduxCore/inc/fields/sorter/field_sorter.less b/ReduxCore/inc/fields/sorter/field_sorter.less
@@ -16,7 +16,7 @@
 			margin-bottom:10px;
 			padding:0 10px;
 			height: 40px;
-			line-height: 40px;
+			line-height: 40px !important;
 			background-color: #F1F1F1;
 			background-image: -ms-linear-gradient(top,#f9f9f9,#ececec);
 			background-image: -moz-linear-gradient(top,#f9f9f9,#ececec);

Original file line number	Diff line number	Diff line change
`@@ -317,7 +317,6 @@ a {`
`317`	`317`	`border-bottom: 1px solid #E7E7E7;`
`318`	`318`	`}`
`319`	`319`	`.redux-group-tab .redux-section-desc{`
`320`		`- font-size:1.1em;`
`321`	`320`	`margin-bottom: 35px;`
`322`	`321`	`color:#666666;`
`323`	`322`	`}`
`@@ -337,7 +336,6 @@ a {`
`337`	`336`	`}`
`338`	`337`	`.redux-group-tab .form-table tr th{`
`339`	`338`	`font-weight:bold;`
`340`		`- font-size:1.1em;`
`341`	`339`	`width:30%;`
`342`	`340`	`padding:20px 5px 20px 0px;`
`343`	`341`	`}`
`@@ -959,6 +957,7 @@ img {`
`959`	`957`
`960`	`958`	`.redux-main .field-desc {`
`961`	`959`	`clear: both;`
	`960`	`+ font-size: 13px;`
`962`	`961`	`}`
`963`	`962`
`964`	`963`	`.redux-main .data-full li{`
Original file line number	Diff line number	Diff line change
`@@ -4,12 +4,15 @@`
`4`	`4`	`.redux-container-image_select .redux-image-select-presets img {`
`5`	`5`	`width: 100%;`
`6`	`6`	`}`
`7`		`-.redux-container-image_select .redux-image-select {`
`8`		`- margin: 3px 10px;`
	`7`	`+.redux-container-image_select ul.redux-image-select li {`
	`8`	`+ margin: 0 10px 3px 10px;`
`9`	`9`	`display: inline-block;`
`10`	`10`	`padding: 10px;`
`11`	`11`	`padding-left: 0;`
`12`	`12`	`}`
	`13`	`+.redux-container-image_select .redux-image-select li:last-child {`
	`14`	`+ margin-bottom: 0;`
	`15`	`+}`
`13`	`16`	`.redux-container-image_select .redux-image-select-selected {`
`14`	`17`	`background-color: #f9f9f9;`
`15`	`18`	`}`
Original file line number	Diff line number	Diff line change
`@@ -5,12 +5,15 @@`
`5`	`5`	`.redux-image-select-presets img {`
`6`	`6`	`width: 100%;`
`7`	`7`	`}`
`8`		`- .redux-image-select {`
`9`		`- margin:3px 10px;`
	`8`	`+ ul.redux-image-select li {`
	`9`	`+ margin: 0 10px 3px 10px;`
`10`	`10`	`display:inline-block;`
`11`	`11`	`padding:10px;`
`12`	`12`	`padding-left: 0;`
`13`	`13`	`}`
	`14`	`+ .redux-image-select li:last-child {`
	`15`	`+ margin-bottom: 0;`
	`16`	`+ }`
`14`	`17`	`.redux-image-select-selected{`
`15`	`18`	`background-color:#f9f9f9;`
`16`	`19`	`}`
Original file line number	Diff line number	Diff line change
`@@ -51,6 +51,7 @@`
`51`	`51`	`float: right;`
`52`	`52`	`margin-right: 10%;`
`53`	`53`	`display: block;`
	`54`	`+ margin-bottom: 10px;`
`54`	`55`	`}`
`55`	`56`	`.redux-container-slides .redux-slides-remove {`
`56`	`57`	`color: #ef521d !important;`