From 5350b7abe1952bc07357bfada0c614cb443ee50e Mon Sep 17 00:00:00 2001
From: Steven Dale <lifeinchords@users.noreply.github.com>
Date: Mon, 20 Mar 2017 17:37:50 -0400
Subject: [PATCH] SpriteInfo: Radio Buttons Toggles + Better Classnames (#250)
Fixes #156 + refactored classnames to style guide conventions
---
src/components/sprite-info/sprite-info.css | 45 +++++-----
src/components/sprite-info/sprite-info.jsx | 98 ++++++++++++----------
2 files changed, 79 insertions(+), 64 deletions(-)
diff --git a/src/components/sprite-info/sprite-info.css b/src/components/sprite-info/sprite-info.css
index b83e46ca8..2be5b5376 100644
--- a/src/components/sprite-info/sprite-info.css
+++ b/src/components/sprite-info/sprite-info.css
@@ -1,5 +1,3 @@
-/* @todo: Refactor: make better classnames */
-
@import "../../css/units.css";
$form-border: #E9EEF2;
@@ -33,7 +31,12 @@ $form-radius: calc($space / 2);
.icon-wrapper {
display: inline-block;
- box-sizing: content-box;
+
+ /*
+ content-box is normally the browser's default.
+ We're overriding the global, which we set to border-box
+ */
+ box-sizing: content-box;
width: 1.25rem;
height: 1.25rem;
padding: calc($space / 2);
@@ -46,29 +49,30 @@ $form-radius: calc($space / 2);
height: 100%;
}
-.icon.is-active { opacity: 1; }
+/* @todo: refactor radio divs to input */
+.radio { opacity: 0.4; cursor: pointer; }
+.radio.is-active { opacity: 1; }
+.radio.is-disabled { cursor: default; }
-.radio-icon {
- opacity: 0.4;
-}
-
-.left-radio {
+.radio-left {
border: 1px solid $form-border;
border-top-left-radius: $form-radius;
border-bottom-left-radius: $form-radius;
- cursor: pointer;
}
-.right-radio {
+.radio-right {
border-bottom: 1px solid $form-border;
border-top: 1px solid $form-border;
border-right: 1px solid $form-border;
border-top-right-radius: $form-radius;
border-bottom-right-radius: $form-radius;
- cursor: pointer;
}
-.radio-button.is-disabled { cursor: default; }
+.icon {
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+}
.input-label {
font-size: 0.625rem;
@@ -80,7 +84,7 @@ $form-radius: calc($space / 2);
cursor: default;
}
-.input-label-small {
+.input-label-secondary {
font-size: 0.625rem;
margin-right: calc($space / 2);
@@ -90,15 +94,18 @@ $form-radius: calc($space / 2);
}
.input-form {
- outline: none;
padding: $space 0.75rem;
+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 0.625rem;
font-weight: bold;
+
border-width: 1px;
border-style: solid;
border-color: $form-border;
border-radius: 2rem;
+
+ outline: none;
cursor: text;
transition: 0.25s ease-out; /* @todo: standardize with var */
box-shadow: none;
@@ -119,10 +126,10 @@ $form-radius: calc($space / 2);
box-shadow: inset 0 0 0 -2px rgba(0, 0, 0, 0.1);
}
-.input-form--x { width: 3.5rem; text-align: center; }
-.input-form--y { width: 3.5rem; text-align: center; }
+.x { width: 3.5rem; text-align: center; }
+.y { width: 3.5rem; text-align: center; }
-.input-form--rotation-select {
+.rotation-select {
width: 100%;
height: 1.85rem;
border: 1px solid $form-border;
@@ -130,4 +137,4 @@ $form-radius: calc($space / 2);
outline: none;
}
-.input-form--sprite-name { width: 100%; }
+.sprite-name { width: 100%; }
diff --git a/src/components/sprite-info/sprite-info.jsx b/src/components/sprite-info/sprite-info.jsx
index 7b9a08286..9c7d26f81 100644
--- a/src/components/sprite-info/sprite-info.jsx
+++ b/src/components/sprite-info/sprite-info.jsx
@@ -34,7 +34,7 @@ class SpriteInfo extends React.Component {
<div className={styles.group}>
<span className={styles.inputLabel}>Sprite</span>
<input
- className={classNames(styles.inputForm, styles.inputFormSpriteName)}
+ className={classNames(styles.inputForm, styles.spriteName)}
disabled={this.props.disabled}
placeholder="Name"
tabIndex="1"
@@ -55,7 +55,7 @@ class SpriteInfo extends React.Component {
</div>
<span className={styles.inputLabel}>x</span>
<input
- className={classNames(styles.inputForm, styles.inputFormX)}
+ className={classNames(styles.inputForm, styles.x)}
disabled={this.props.disabled}
placeholder="x"
tabIndex="2"
@@ -76,7 +76,7 @@ class SpriteInfo extends React.Component {
</div>
<span className={styles.inputLabel}>y</span>
<input
- className={classNames(styles.inputForm, styles.inputFormY)}
+ className={classNames(styles.inputForm, styles.y)}
disabled={this.props.disabled}
placeholder="y"
tabIndex="3"
@@ -91,91 +91,99 @@ class SpriteInfo extends React.Component {
<div className={classNames(styles.row, styles.rowSecondary)}>
<div className={styles.group}>
- <span className={styles.inputLabelSmall}>
+ <span className={styles.inputLabelSecondary}>
Show
</span>
- <div className={classNames(styles.radioButton, {[styles.isDisabled]: this.props.disabled})}>
+ <div>
<div
- className={classNames(styles.iconWrapper, styles.leftRadio)}
+ className={classNames(
+ styles.radio,
+ styles.radioLeft,
+ styles.iconWrapper,
+ {
+ [styles.isActive]: this.props.visible && !this.props.disabled,
+ [styles.isDisabled]: this.props.disabled
+ }
+ )}
tabIndex="4"
+ onClick={this.props.onClickVisible}
>
<img
- className={classNames(
- styles.icon,
- styles.radioIcon,
- {
- [styles.isActive]: this.props.visible && !this.props.disabled
- }
- )}
+ className={styles.icon}
src={showIcon}
- onClick={this.props.onClickVisible}
/>
</div>
<div
- className={classNames(styles.iconWrapper, styles.rightRadio)}
+ className={classNames(
+ styles.radio,
+ styles.radioRight,
+ styles.iconWrapper,
+ {
+ [styles.isActive]: !this.props.visible && !this.props.disabled,
+ [styles.isDisabled]: this.props.disabled
+ }
+ )}
tabIndex="4"
+ onClick={this.props.onClickNotVisible}
>
<img
- className={classNames(
- styles.icon,
- styles.radioIcon,
- {
- [styles.isActive]: !this.props.visible && !this.props.disabled
- }
- )}
+ className={styles.icon}
src={hideIcon}
- onClick={this.props.onClickNotVisible}
/>
</div>
</div>
</div>
<div className={styles.group}>
- <span className={styles.inputLabelSmall}>
+ <span className={styles.inputLabelSecondary}>
Draggable
</span>
- <div className={classNames(styles.radioButton, {[styles.isDisabled]: this.props.disabled})}>
+ <div>
<div
- className={classNames(styles.iconWrapper, styles.leftRadio)}
+ className={classNames(
+ styles.radio,
+ styles.radioLeft,
+ styles.iconWrapper,
+ {
+ [styles.isActive]: this.props.draggable && !this.props.disabled,
+ [styles.isDisabled]: this.props.disabled
+ }
+ )}
tabIndex="5"
+ onClick={this.props.onClickDraggable}
>
<img
- className={classNames(
- styles.icon,
- styles.radioIcon,
- {
- [styles.isActive]: this.props.draggable && !this.props.disabled
- }
- )}
+ className={styles.icon}
src={draggableIcon}
- onClick={this.props.onClickDraggable}
/>
</div>
<div
- className={classNames(styles.iconWrapper, styles.rightRadio)}
+ className={classNames(
+ styles.radio,
+ styles.radioRight,
+ styles.iconWrapper,
+ {
+ [styles.isActive]: !this.props.draggable && !this.props.disabled,
+ [styles.isDisabled]: this.props.disabled
+ }
+ )}
tabIndex="6"
+ onClick={this.props.onClickNotDraggable}
>
<img
- className={classNames(
- styles.icon,
- styles.radioIcon,
- {
- [styles.isActive]: !this.props.draggable && !this.props.disabled
- }
- )}
+ className={styles.icon}
src={notDraggableIcon}
- onClick={this.props.onClickNotDraggable}
/>
</div>
</div>
</div>
<div className={styles.group}>
- <span className={styles.inputLabelSmall}>
+ <span className={styles.inputLabelSecondary}>
Rotation
</span>
<select
- className={classNames(styles.selectForm, styles.inputFormRotationSelect)}
+ className={classNames(styles.selectForm, styles.rotationSelect)}
disabled={this.props.disabled}
value={this.props.rotationStyle}
onChange={this.props.onChangeRotationStyle}
--
GitLab