SpriteInfo: Radio Buttons Toggles + Better Classnames (#250)
Fixes #156 + refactored classnames to style guide conventions
This commit is contained in:
Steven Dale authored and GitHub committed
1 parent
648aebaa45
commit
5350b7abe1
2 files changed
+79
-64
No files matched your search
@@ -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%; }
|
||||
@@ -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}
|
||||
|
||||
Reference in new issue
Block a user