From 648aebaa450327758ccef5737dbe3107f42bba4a Mon Sep 17 00:00:00 2001
From: Steven Dale <lifeinchords@users.noreply.github.com>
Date: Mon, 20 Mar 2017 16:26:15 -0400
Subject: [PATCH] Made UI elements non-selectable (#234)
Affects SpriteSelector Pane, StageSelector Pane, Stage, MenuBar, Libraries Modal, Add/Import buttons, for Chrome, Ffx + Safari on Sierra.
Fixes #162
---
src/components/close-button/close-button.css | 3 ++-
src/components/gui/gui.css | 3 +++
src/components/menu-bar/menu-bar.css | 1 +
src/components/modal/modal.css | 1 +
src/components/sprite-info/sprite-info.css | 6 +-----
.../sprite-selector-item/sprite-selector-item.css | 3 +++
src/components/stage-selector/stage-selector.css | 5 ++++-
src/components/target-pane/target-pane.css | 1 +
8 files changed, 16 insertions(+), 7 deletions(-)
diff --git a/src/components/close-button/close-button.css b/src/components/close-button/close-button.css
index ef48624c4..ce9cc99ac 100644
--- a/src/components/close-button/close-button.css
+++ b/src/components/close-button/close-button.css
@@ -15,6 +15,7 @@
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
cursor: pointer;
+ user-select: none;
transition: all 0.15s ease-out; /* @todo: standardize with var */
}
@@ -35,7 +36,7 @@
}
/* Same icon as Sprite Selector Add button, but rotated.
- TODO: reuse?
+ @todo: reuse?
*/
.close-icon {
transform-origin: 50%;
diff --git a/src/components/gui/gui.css b/src/components/gui/gui.css
index 78b2dc40e..e587122a7 100644
--- a/src/components/gui/gui.css
+++ b/src/components/gui/gui.css
@@ -64,6 +64,9 @@
.stage-wrapper {
padding-left: $space;
padding-right: $space;
+
+ /* Hides negative space between edge of rounded corners + container, when selected */
+ user-select: none;
}
.target-wrapper {
diff --git a/src/components/menu-bar/menu-bar.css b/src/components/menu-bar/menu-bar.css
index 71e94f81a..a9d3b37fa 100644
--- a/src/components/menu-bar/menu-bar.css
+++ b/src/components/menu-bar/menu-bar.css
@@ -57,6 +57,7 @@
cursor: pointer;
text-decoration: none;
color: white;
+ user-select: none;
}
.menu-item:hover {
diff --git a/src/components/modal/modal.css b/src/components/modal/modal.css
index dea04e1f4..25a134f5e 100644
--- a/src/components/modal/modal.css
+++ b/src/components/modal/modal.css
@@ -23,6 +23,7 @@
bottom: 5%;
left: 5%;
border-radius: $space;
+ user-select: none;
}
.modal-children {
diff --git a/src/components/sprite-info/sprite-info.css b/src/components/sprite-info/sprite-info.css
index c1dc88349..b83e46ca8 100644
--- a/src/components/sprite-info/sprite-info.css
+++ b/src/components/sprite-info/sprite-info.css
@@ -31,19 +31,14 @@ $form-radius: calc($space / 2);
align-items: center;
}
-/* @todo: refactor from descendant selector, to a regular class */
.icon-wrapper {
display: inline-block;
box-sizing: content-box;
width: 1.25rem;
height: 1.25rem;
padding: calc($space / 2);
- cursor: pointer;
outline: none;
-
- /* @todo: make this a mixin for all UI text labels */
user-select: none;
- cursor: default;
}
.icon {
@@ -131,6 +126,7 @@ $form-radius: calc($space / 2);
width: 100%;
height: 1.85rem;
border: 1px solid $form-border;
+ user-select: none;
outline: none;
}
diff --git a/src/components/sprite-selector-item/sprite-selector-item.css b/src/components/sprite-selector-item/sprite-selector-item.css
index 787be776b..faf7c3612 100644
--- a/src/components/sprite-selector-item/sprite-selector-item.css
+++ b/src/components/sprite-selector-item/sprite-selector-item.css
@@ -37,11 +37,14 @@
.sprite-image {
margin: auto;
+ user-select: none;
}
.sprite-name {
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 66309ff9a..dcb77ffd7 100644
--- a/src/components/stage-selector/stage-selector.css
+++ b/src/components/stage-selector/stage-selector.css
@@ -58,6 +58,7 @@ $header-height: 2.5rem; /* @todo: half the SpriteInfo area header? */
color: #575e75;
background: #ededed;
border-radius: 0.25rem;
+ user-select: none;
}
.label {
@@ -66,13 +67,14 @@ $header-height: 2.5rem; /* @todo: half the SpriteInfo area header? */
font-size: 0.5rem;
font-weight: bold;
color: #575e75;
+ user-select: none;
}
$border-width: 2px;
.flex-wrapper {
display: flex;
- flex-direction: column; /* to make rows */
+ flex-direction: column; /* makes rows */
align-items: center;
background-color: white;
border-radius: calc($space / 2);
@@ -96,4 +98,5 @@ $border-width: 2px;
width: 100%;
border-top-left-radius: calc($space / 2);
border-top-right-radius: calc($space / 2);
+ user-select: none;
}
diff --git a/src/components/target-pane/target-pane.css b/src/components/target-pane/target-pane.css
index 8b11406d0..5f70c5878 100644
--- a/src/components/target-pane/target-pane.css
+++ b/src/components/target-pane/target-pane.css
@@ -29,6 +29,7 @@
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
transition: all 0.15s ease-out; /* @todo: standardize with var */
cursor: pointer;
+ user-select: none;
}
.add-button-wrapper:hover {
--
GitLab