Merge pull request #586 from mozilla/bug/unselectable

Disable user selection on some 2D elements.

src/assets/stylesheets/2d-hud.scss

 @import 'shared';
 
-:local(.unselectable) {
-  -moz-user-select: none;
-  -webkit-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
 :local(.container) {
   position: absolute;
   display: flex;

src/assets/stylesheets/create-object-dialog.scss

@@ -9,6 +9,7 @@
 }
 
 :local(.action-button) {
+  @extend %unselectable;
   @extend %bottom-action-button;
   margin-left: 6px;
   margin-right: 6px;
@@ -20,12 +21,14 @@
 }
 
 :local(.buttons) {
+  @extend %unselectable;
   display: flex;
   flex-direction: row;
   align-items: center;
 }
 
 :local(.small-button) {
+  @extend %unselectable;
   margin-left: 0.25em;
   font-size: 2em;
   align-self: center;

src/assets/stylesheets/hub.scss

@@ -7,6 +7,7 @@
 @import 'entry';
 @import 'audio';
 @import 'info-dialog';
+@import 'shared';
 
 .a-enter-vr, .a-orientation-modal {
   display: none;
@@ -18,5 +19,5 @@
 
 
 .webxr-realities, .webxr-sessions {
-  user-select: none;
+  @extend %unselectable
 }

src/assets/stylesheets/shared.scss

@@ -9,6 +9,13 @@ $dark-grey: rgba(128, 128, 128, 1.0);
 $darker-grey: rgba(64, 64, 64, 1.0);
 $darkest-grey: rgba(32, 32, 32, 1.0);
 
+%unselectable {
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
 %default-font {
   font-family: 'Zilla Slab', sans-serif;
 }

src/assets/stylesheets/ui-root.scss

@@ -42,7 +42,7 @@
   grid-template-rows: 1fr 20px minmax(200px, 600px) 20px 1fr;
   width: 100%;
   height: 100%;
-  user-select: none;
+  @extend %unselectable;
 
   &--darkened {
     background-color: $dark-transparent;
@@ -70,13 +70,11 @@
 
 .ui-interactive {
   pointer-events: auto;
-  -moz-user-select: none;
-  -webkit-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
+  @extend %unselectable;
 }
 
 :local(.nag-button) {
+  @extend %unselectable;
   position: absolute;
   top: 110px;
   left: 0;
@@ -86,7 +84,7 @@
   justify-content: center;
   height: 80px;
   pointer-events: none;
-  
+
   button {
     @extend %action-button;
     pointer-events: auto;
@@ -134,6 +132,7 @@
 }
 
 :local(.presence-info) {
+  @extend %unselectable;
   text-align: right;
   position: absolute;
   top: 0;

src/components/stats-plus.css

@@ -19,6 +19,9 @@
   padding: 8px 12px;
   color: #aaa;
   font-size: 10px;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
   user-select: none;
 }
 
@@ -26,5 +29,8 @@
   right: 10px;
   left: auto;
   top: 10px;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
   user-select: none;
 }

src/components/virtual-gamepad-controls.css

@@ -16,10 +16,10 @@
 
 :local(.mockJoystickContainer) {
   position: absolute;
-  height: 20vh;
+  height: 0;
   left: 0;
   right: 0;
-  bottom: 0;
+  bottom: 10vh;
   display: flex;
   align-items: center;
   justify-content: space-around;