From df84827300d2296f2536abf44ae0e2d4023c23e6 Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Thu, 10 Aug 2017 14:43:43 -0400
Subject: [PATCH] Change stage selected state to match sprite
---
src/components/close-button/close-button.css | 8 ++--
.../sprite-selector-item.css | 18 +++-----
.../stage-selector/stage-selector.css | 43 +++++++------------
.../stage-selector/stage-selector.jsx | 17 +++++---
src/css/colors.css | 1 +
5 files changed, 36 insertions(+), 51 deletions(-)
diff --git a/src/components/close-button/close-button.css b/src/components/close-button/close-button.css
index b679f8fb2..1864e7b2a 100644
--- a/src/components/close-button/close-button.css
+++ b/src/components/close-button/close-button.css
@@ -9,7 +9,6 @@
overflow: hidden; /* Mask the icon animation */
background-color: rgba(0, 0, 0, 0.1);
border-radius: 50%;
- box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
user-select: none;
cursor: pointer;
@@ -22,8 +21,8 @@
}
.small {
- width: 1rem;
- height: 1rem;
+ width: 0.825rem;
+ height: 0.825rem;
color: #FFF;
background-color: $motion-primary;
}
@@ -31,6 +30,7 @@
.large {
width: 1.75rem;
height: 1.75rem;
+ box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}
.close-icon {
@@ -42,7 +42,7 @@
}
.small .close-icon {
- width: 40%;
+ width: 50%;
}
.large .close-icon {
diff --git a/src/components/sprite-selector-item/sprite-selector-item.css b/src/components/sprite-selector-item/sprite-selector-item.css
index faf7c3612..5aae297c9 100644
--- a/src/components/sprite-selector-item/sprite-selector-item.css
+++ b/src/components/sprite-selector-item/sprite-selector-item.css
@@ -1,4 +1,5 @@
@import "../../css/units.css";
+@import "../../css/colors.css";
/* @todo: refactor this class name, and component: `sprite-selector` to `sprite` */
.sprite-selector-item {
@@ -17,22 +18,13 @@
border-radius: $space;
text-align: center;
cursor: pointer;
-}
-
-.sprite-selector-item:hover {
- border-width: 2px;
- border-color: #1dacf4;
transition: 0.25s ease-out;
}
-/* @todo: refactor out descendent selectors into regular classes */
-.sprite-selector-item.is-selected {
+.sprite-selector-item:hover, .sprite-selector-item.is-selected {
border-width: 2px;
- border-color: #1dacf4;
- transition: 0.25s ease-out;
-}
-.sprite-selector-item.is-selected .info-button {
- display: block;
+ border-color: $motion-primary;
+ box-shadow: 0px 0px 0px 3px $motion-transparent;
}
.sprite-image {
@@ -44,7 +36,7 @@
font-size: 0.625rem;
margin: 0.15rem;
user-select: none;
-
+
/*
For truncating overflowing text gracefully
Min-width is for a bug: https://css-tricks.com/flexbox-truncated-text
diff --git a/src/components/stage-selector/stage-selector.css b/src/components/stage-selector/stage-selector.css
index f3f01a5eb..cfe255a4f 100644
--- a/src/components/stage-selector/stage-selector.css
+++ b/src/components/stage-selector/stage-selector.css
@@ -1,6 +1,7 @@
@import "../../css/units.css";
+@import "../../css/colors.css";
-$header-height: 2.5rem; /* @todo: half the SpriteInfo area header? */
+$header-height: calc(2rem - 2px); /* @todo: half the SpriteInfo area header? */
.stage-selector {
position: relative; /* for the child element border */
@@ -14,6 +15,13 @@ $header-height: 2.5rem; /* @todo: half the SpriteInfo area header? */
border-width: 1px;
border-style: solid;
border-bottom: 0;
+ cursor: pointer;
+ transition: border-color 0.25s ease-out, box-shadow 0.25s ease-out;
+}
+
+.stage-selector:hover, .stage-selector.is-selected {
+ border-color: $motion-primary;
+ box-shadow: 0px 0px 0px 3px $motion-transparent;
}
.header {
@@ -22,7 +30,6 @@ $header-height: 2.5rem; /* @todo: half the SpriteInfo area header? */
align-items: center;
justify-content: center;
height: $header-height;
- padding: 0.5rem 0.5rem 0.5rem 0.25rem;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: white;
color: #575e75;
@@ -39,65 +46,45 @@ $header-height: 2.5rem; /* @todo: half the SpriteInfo area header? */
/* @todo: make this a mixin for all UI text labels */
user-select: none;
- cursor: default;
}
.body {
justify-content: space-around;
- padding: $space;
height: calc(100% - $header-height);
background-color: #f9f9f9;
}
.count {
- margin: 0 0 0.3rem 0;
- padding: 0.15rem 0.5rem;
+ padding: 0.3rem 0.75rem;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 0.625rem;
- font-weight: bold;
color: #575e75;
- background: #ededed;
+ background: white;
+ border: 1px solid #eaeaea;
border-radius: 0.25rem;
user-select: none;
}
.label {
- margin: 0.4rem 0 0.25rem;
+ margin: 0.75rem 0 0.25rem;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
- font-size: 0.5rem;
- font-weight: bold;
+ font-size: 0.6rem;
color: #575e75;
user-select: none;
}
-$border-width: 2px;
-
.flex-wrapper {
display: flex;
flex-direction: column; /* makes rows */
align-items: center;
overflow: hidden;
- background-color: white;
- border-radius: calc($space / 2);
- border-width: $border-width;
- border-style: solid;
- border-color: #e9eef2;
- cursor: pointer;
- transition: border-color 0.1s ease-out;
-}
-
-.flex-wrapper:hover {
- border-color: #1dacf4;
-}
-
-.flex-wrapper.is-selected {
- border-color: #1dacf4;
}
.costume-canvas {
display: block;
width: 100%;
user-select: none;
+ border-bottom: 1px solid #eaeaea;
}
.add-button {
diff --git a/src/components/stage-selector/stage-selector.jsx b/src/components/stage-selector/stage-selector.jsx
index ec5fbb36d..5739899f8 100644
--- a/src/components/stage-selector/stage-selector.jsx
+++ b/src/components/stage-selector/stage-selector.jsx
@@ -28,7 +28,9 @@ const StageSelector = props => {
} = props;
return (
<Box
- className={styles.stageSelector}
+ className={classNames(styles.stageSelector, {
+ [styles.isSelected]: selected
+ })}
onClick={onClick}
{...componentProps}
>
@@ -37,10 +39,7 @@ const StageSelector = props => {
</div>
<div className={styles.body}>
<div
- className={classNames({
- [styles.flexWrapper]: true,
- [styles.isSelected]: selected
- })}
+ className={styles.flexWrapper}
>
{url ? (
<CostumeCanvas
@@ -50,7 +49,13 @@ const StageSelector = props => {
width={56}
/>
) : null}
- <div className={styles.label}>Backdrops</div>
+ <div className={styles.label}>
+ <FormattedMessage
+ defaultMessage="Backdrops"
+ description="Label for the backdrops in the stage selector"
+ id="stageSelector.backdrops"
+ />
+ </div>
<div className={styles.count}>{backdropCount}</div>
</div>
<IconButton
diff --git a/src/css/colors.css b/src/css/colors.css
index 45258f13a..bde9f339f 100644
--- a/src/css/colors.css
+++ b/src/css/colors.css
@@ -4,6 +4,7 @@ $ui-background-blue: #e8edf1;
$motion-primary: #4C97FF;
$motion-tertiary: #3373CC;
+$motion-transparent: rgba(76, 151, 255, 0.25);
$red-primary: #FF661A;
$red-tertiary: #E64D00;
--
GitLab