Skip to content
Snippets Groups Projects
Commit 5350b7ab authored by Steven Dale's avatar Steven Dale Committed by GitHub
Browse files

SpriteInfo: Radio Buttons Toggles + Better Classnames (#250) 

Fixes #156 + refactored classnames to style guide conventions
parent 648aebaa
Branches
Tags
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/components/sprite-info/sprite-info.css
+ 26
− 19
View file @ 5350b7ab
/* @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%; }
src/components/sprite-info/sprite-info.jsx
+ 53
− 45
View file @ 5350b7ab
......@@ -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}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment