chore: spacing control reset position and conditional render

[#703]
Codeinwp · Aug 30, 2019 · 779c620 · 779c620
1 parent d7be266
commit 779c620
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 42 deletions.
diff --git a/inc/customizer/controls/react/bundle/controls.css b/inc/customizer/controls/react/bundle/controls.css
@@ -91,8 +91,8 @@
     height: 23px;
     line-height: 1;
     font-size: 11px;
-    color: #000;
-    border: 1px solid #333;
+    color: #555;
+    border: 1px solid #999;
     box-shadow: none;
     background: #fff; }
     .neve-units .components-button.is-button.is-active {
@@ -131,27 +131,27 @@
     align-items: center;
     margin: 0; }
     .neve-responsive-sizing .range-control .components-base-control__field input[type="number"] {
-      width: 25%; }
-  .neve-responsive-sizing .nv-sizing-item,
-  .neve-responsive-sizing .nv-sizing-link {
-    width: calc(20% + 1px); }
-  .neve-responsive-sizing .nv-sizing-link {
+      width: 27%; }
+  .neve-responsive-sizing .nv-sizing-item {
+    width: calc(19% + 1px); }
+  .neve-responsive-sizing .nv-sizing-link, .neve-responsive-sizing .nv-sizing-reset {
+    width: calc(12% + 1px);
     margin-left: -1px; }
-    .neve-responsive-sizing .nv-sizing-link button {
+    .neve-responsive-sizing .nv-sizing-link button, .neve-responsive-sizing .nv-sizing-reset button {
       width: 100%;
       padding: 3px;
       flex-direction: row;
       align-items: center;
       justify-content: center;
       justify-items: center;
-      border: 1px solid #333;
+      border: 1px solid #999;
       border-radius: 0 3px 3px 0;
       background: #fff; }
-      .neve-responsive-sizing .nv-sizing-link button.is-linked {
+      .neve-responsive-sizing .nv-sizing-link button.is-linked, .neve-responsive-sizing .nv-sizing-reset button.is-linked {
         background: #008dc2;
         color: #fff; }
   .neve-responsive-sizing .nv-sizing-item input[type="number"] {
-    border: 1px solid #333;
+    border: 1px solid #999;
     border-radius: 0; }
   .neve-responsive-sizing .nv-sizing-item:not(:first-child) {
     margin-left: -1px; }
@@ -164,4 +164,4 @@
     text-align: center;
     display: block;
     font-weight: 300;
-    color: #333; }
+    color: #555; }
diff --git a/inc/customizer/controls/react/bundle/controls.js b/inc/customizer/controls/react/bundle/controls.js
diff --git a/inc/customizer/controls/react/src/common/Sizing.js b/inc/customizer/controls/react/src/common/Sizing.js
@@ -22,7 +22,6 @@ class SizingControl extends Component {
 									<Dropdown
 											position="top center"
 											focusOnMount={false}
-											onBlur={() => {console.log('aaaa')}}
 											renderToggle={({ isOpen, onToggle }) => (
 													<input
 															type="number"
@@ -79,15 +78,29 @@ class SizingControl extends Component {
 								onClick={() => this.props.onLinked()}
 						/>
 					</div>
+					{ this.hasSetValues() && <div className="nv-sizing-reset">
+						<IconButton
+								onClick={this.props.onReset}
+								tooltip={__( 'Reset all Values', 'neve' )}
+								icon="image-rotate"
+								className="reset">
+						</IconButton>
+					</div> }
 				</div>
 		);
 	}
+
+	hasSetValues() {
+		return  this.props.options.filter( option => option.value ).length > 0;
+	}
 }
 
 SizingControl.propTypes = {
+	options: PropTypes.array.isRequired,
 	onLinked: PropTypes.func.isRequired,
 	onChange: PropTypes.func.isRequired,
-	linked: PropTypes.bool.isRequired
+	linked: PropTypes.bool.isRequired,
+	onReset: PropTypes.func,
 };
 
 export default SizingControl;
diff --git a/inc/customizer/controls/react/src/spacing/SpacingComponent.js b/inc/customizer/controls/react/src/spacing/SpacingComponent.js
@@ -11,7 +11,6 @@ const {
 const {
 	ButtonGroup,
 	Button,
-	Dashicon
 } = wp.components;
 const {
 	mapValues
@@ -84,27 +83,20 @@ class SpacingComponent extends Component {
 								onChange={(optionType, numericValue) => {
 									this.updateValues( optionType, numericValue );
 								}}
+								onReset={() => {
+									let devices = ['mobile', 'desktop', 'tablet'];
+									let value = { ...this.state.value };
+									devices.map( (device) => {
+										value[device] = mapValues( value[device], () => '' );
+									} );
+									this.setState( { value } );
+									this.props.control.setting.set( value );
+								}}
 						/>
 						<div className="neve-units">
 							<ButtonGroup className="units">
 								{this.getButtons()}
 							</ButtonGroup>
-							<Button
-									isLink
-									isDestructive
-									onClick={() => {
-										let devices = ['mobile', 'desktop', 'tablet'];
-										let value = { ...this.state.value };
-										devices.map( (device) => {
-											value[device] = mapValues( value[device], () => '' );
-										} );
-										this.setState( { value } );
-										this.props.control.setting.set( value );
-									}}
-									tooltip={__( 'Reset all Values', 'neve' )}
-									className="reset">
-								<Dashicon icon="image-rotate"/>
-							</Button>
 						</div>
 					</ResponsiveControl>
 				</Fragment>

diff --git a/inc/customizer/controls/react/src/style.scss b/inc/customizer/controls/react/src/style.scss
@@ -137,8 +137,8 @@
     height: 23px;
     line-height: 1;
     font-size: 11px;
-    color: #000;
-    border: 1px solid #333;
+    color: #555;
+    border: 1px solid #999;
     box-shadow: none;
     background: #fff;
     &.is-active {
@@ -188,15 +188,15 @@
       align-items: center;
       margin: 0;
       input[type="number"] {
-        width: 25%;
+        width: 27%;
       }
     }
   }
-  .nv-sizing-item,
-  .nv-sizing-link {
-    width: calc(20% + 1px);
+  .nv-sizing-item {
+    width: calc(19% + 1px);
   }
-  .nv-sizing-link {
+  .nv-sizing-link, .nv-sizing-reset {
+    width: calc(12% + 1px);
     margin-left: -1px;
     button {
       width: 100%;
@@ -205,7 +205,7 @@
       align-items: center;
       justify-content: center;
       justify-items: center;
-      border: 1px solid #333;
+      border: 1px solid #999;
       border-radius: 0 3px 3px 0;
       background: #fff;
       &.is-linked {
@@ -216,7 +216,7 @@
   }
   .nv-sizing-item {
   input[type="number"] {
-    border: 1px solid #333;
+    border: 1px solid #999;
     border-radius: 0;
   }
     &:not(:first-child) {
@@ -233,6 +233,6 @@
     text-align: center;
     display: block;
     font-weight: 300;
-    color: #333;
+    color: #555;
   }
 }