Merge pull request #10065 from ctrlaltdavid/21242

Address tablet scrollbar issues

interface/src/ui/overlays/Web3DOverlay.cpp

@@ -350,11 +350,15 @@ void Web3DOverlay::handlePointerEventAsTouch(const PointerEvent& event) {
     glm::vec2 windowPos = event.getPos2D() * (METERS_TO_INCHES * _dpi);
     QPointF windowPoint(windowPos.x, windowPos.y);
 
-    if (event.getButtons() == PointerEvent::NoButtons && event.getType() == PointerEvent::Move) {
-        // Forward a mouse move event to the Web surface.
+    if (event.getType() == PointerEvent::Move) {
+        // Forward a mouse move event to the Web surface so that hover events are generated.
+        // Must send a mouse move event that matches up with touch move event in order for scroll bars to work.
+
+        // Scroll bar dragging is a bit unstable in the tablet (content can jump up and down at times). 
+        // This may be improved in Qt 5.8. Release notes: "Cleaned up touch and mouse event delivery".
+
         QMouseEvent* mouseEvent = new QMouseEvent(QEvent::MouseMove, windowPoint, windowPoint, windowPoint, Qt::NoButton, Qt::NoButton, Qt::NoModifier);
         QCoreApplication::postEvent(_webSurface->getWindow(), mouseEvent);
-        return;
     }
 
     if (event.getType() == PointerEvent::Press && event.getButton() == PointerEvent::PrimaryButton) {

scripts/system/html/css/edit-style.css

@@ -81,6 +81,19 @@ body {
     overflow-y: auto;
 }
 
+/* HACK
+    Makes entity properties dialog's scrollbar work on tablet such that don't need to keep pointer within scrollbar width when
+    using scroll handle.
+*/
+body {
+    padding-right: 0;
+    margin-right: -21px;
+}
+body > * {
+    margin-right: 42px;
+}
+/* END OF HACK */
+
 table {
     font-family: FiraSans-SemiBold;
     font-size: 15px;

scripts/system/html/css/marketplaces.css

@@ -5,6 +5,93 @@
 //  Distributed under the Apache License, Version 2.0.
 //  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
 */
+
+/*
+    CSS  rules copied from edit-style.css.
+    Edit-style.css is not used in its entirety because don't want custom scrollbars; default scrollbar styling is used in order
+    to match other marketplace pages.
+*/
+
+@font-face {
+    font-family: Raleway-Regular;
+    src: url(../../../../resources/fonts/Raleway-Regular.ttf),  /* Windows production */
+         url(../../../../fonts/Raleway-Regular.ttf),  /* OSX production */
+         url(../../../../interface/resources/fonts/Raleway-Regular.ttf);  /* Development, running script in /HiFi/examples */
+}
+
+@font-face {
+    font-family: Raleway-Bold;
+    src: url(../../../../resources/fonts/Raleway-Bold.ttf),
+         url(../../../../fonts/Raleway-Bold.ttf),
+         url(../../../../interface/resources/fonts/Raleway-Bold.ttf);
+}
+
+@font-face {
+    font-family: Raleway-SemiBold;
+    src: url(../../../../resources/fonts/Raleway-SemiBold.ttf),
+         url(../../../../fonts/Raleway-SemiBold.ttf),
+         url(../../../../interface/resources/fonts/Raleway-SemiBold.ttf);
+}
+
+@font-face {
+    font-family: FiraSans-SemiBold;
+    src: url(../../../../resources/fonts/FiraSans-SemiBold.ttf),
+         url(../../../../fonts/FiraSans-SemiBold.ttf),
+         url(../../../../interface/resources/fonts/FiraSans-SemiBold.ttf);
+}
+
+* {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    padding: 21px 21px 21px 21px;
+
+    color: #afafaf;
+    background-color: #404040;
+    font-family: Raleway-Regular;
+    font-size: 15px;
+
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+
+input[type=button] {
+    font-family: Raleway-Bold;
+    font-size: 13px;
+    text-transform: uppercase;
+    vertical-align: top;
+    height: 28px;
+    min-width: 120px;
+    padding: 0px 18px;
+    margin-right: 6px;
+    border-radius: 5px;
+    border: none;
+    color: #fff;
+    background-color: #000;
+    background: linear-gradient(#343434 20%, #000 100%);
+    cursor: pointer;
+}
+
+input[type=button].blue {
+    color: #fff;
+    background-color: #1080b8;
+    background: linear-gradient(#00b4ef 20%, #1080b8 100%);
+}
+
+
+/*
+    Marketplaces-specific CSS.
+*/
+
 body {
     background: white;
     padding: 0 0 0 0;

scripts/system/html/marketplaces.html

@@ -10,7 +10,6 @@
     <head>
         <title>Marketplaces</title>
         <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
-        <link rel="stylesheet" type="text/css" href="css/edit-style.css">
         <link rel="stylesheet" type="text/css" href="css/marketplaces.css">
         <script src="js/jquery-2.1.4.min.js"></script>
     </head>

scripts/system/marketplaces/marketplaces.js

@@ -72,7 +72,7 @@ function showMarketplace() {
     tablet.webEventReceived.connect(function (message) {
 
         if (message === GOTO_DIRECTORY) {
-            tablet.gotoWebScreen(MARKETPLACES_URL, MARKETPLACES_INJECT_SCRIPT_URL);
+            tablet.gotoWebScreen(MARKETPLACES_URL, injectURL);
         }
 
         if (message === QUERY_CAN_WRITE_ASSETS) {