From aa8a1e1dda801bba4f119bf9ae648fe77c0b492d Mon Sep 17 00:00:00 2001 From: David Rowe Date: Mon, 27 Mar 2017 15:04:33 +1300 Subject: [PATCH 1/8] Open snapshot dialog in tablet or window appropriately --- scripts/system/html/SnapshotReview.html | 1 - scripts/system/snapshot.js | 12 ++++++------ 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/scripts/system/html/SnapshotReview.html b/scripts/system/html/SnapshotReview.html index d37afb180c..68c91b8190 100644 --- a/scripts/system/html/SnapshotReview.html +++ b/scripts/system/html/SnapshotReview.html @@ -3,7 +3,6 @@ Share - diff --git a/scripts/system/snapshot.js b/scripts/system/snapshot.js index b9dfc43f9a..8a48aeb0ff 100644 --- a/scripts/system/snapshot.js +++ b/scripts/system/snapshot.js @@ -40,7 +40,7 @@ var SNAPSHOT_REVIEW_URL = Script.resolvePath("html/SnapshotReview.html"); var outstanding; function confirmShare(data) { - var dialog = new OverlayWebWindow('Snapshot Review', SNAPSHOT_REVIEW_URL, 800, 520); + tablet.gotoWebScreen(SNAPSHOT_REVIEW_URL); function onMessage(message) { // Receives message from the html dialog via the qwebchannel EventBridge. This is complicated by the following: // 1. Although we can send POJOs, we cannot receive a toplevel object. (Arrays of POJOs are fine, though.) @@ -51,7 +51,7 @@ function confirmShare(data) { var needsLogin = false; switch (message) { case 'ready': - dialog.emitScriptEvent(data); // Send it. + tablet.emitScriptEvent(data); // Send it. outstanding = 0; break; case 'openSettings': @@ -64,8 +64,8 @@ function confirmShare(data) { Settings.setValue('openFeedAfterShare', true); break; default: - dialog.webEventReceived.disconnect(onMessage); - dialog.close(); + tablet.webEventReceived.disconnect(onMessage); + HMD.closeTablet(); isLoggedIn = Account.isLoggedIn(); message.forEach(function (submessage) { if (submessage.share && !isLoggedIn) { @@ -88,8 +88,8 @@ function confirmShare(data) { } } } - dialog.webEventReceived.connect(onMessage); - dialog.raise(); + tablet.webEventReceived.connect(onMessage); + HMD.openTablet(); } function snapshotShared(errorMessage) { From d0fc352d3bd644cba6a563d068f482c5fa28b3d0 Mon Sep 17 00:00:00 2001 From: David Rowe Date: Mon, 27 Mar 2017 16:07:58 +1300 Subject: [PATCH 2/8] Address event bridge being shared with other scripts --- scripts/system/html/js/SnapshotReview.js | 45 ++++++++++++++++++------ scripts/system/snapshot.js | 16 ++++++--- 2 files changed, 46 insertions(+), 15 deletions(-) diff --git a/scripts/system/html/js/SnapshotReview.js b/scripts/system/html/js/SnapshotReview.js index a1bb350789..efe30196ee 100644 --- a/scripts/system/html/js/SnapshotReview.js +++ b/scripts/system/html/js/SnapshotReview.js @@ -43,7 +43,13 @@ function addImage(data) { function handleShareButtons(shareMsg) { var openFeed = document.getElementById('openFeed'); openFeed.checked = shareMsg.openFeedAfterShare; - openFeed.onchange = function () { EventBridge.emitWebEvent(openFeed.checked ? 'setOpenFeedTrue' : 'setOpenFeedFalse'); }; + openFeed.onchange = function () { + EventBridge.emitWebEvent(JSON.stringify({ + type: "snapshot", + action: (openFeed.checked ? "setOpenFeedTrue" : "setOpenFeedFalse") + })); + }; + if (!shareMsg.canShare) { // this means you may or may not be logged in, but can't share // because you are not in a public place. @@ -57,25 +63,42 @@ window.onload = function () { openEventBridge(function () { // Set up a handler for receiving the data, and tell the .js we are ready to receive it. EventBridge.scriptEventReceived.connect(function (message) { + message = JSON.parse(message); + if (message.type !== "snapshot") { + return; + } + // last element of list contains a bool for whether or not we can share stuff - var shareMsg = message.pop(); + var shareMsg = message.action.pop(); handleShareButtons(shareMsg); // rest are image paths which we add - useCheckboxes = message.length > 1; - message.forEach(addImage); + useCheckboxes = message.action.length > 1; + message.action.forEach(addImage); }); - EventBridge.emitWebEvent('ready'); + EventBridge.emitWebEvent(JSON.stringify({ + type: "snapshot", + action: "ready" + })); }); }; // beware of bug: Cannot send objects at top level. (Nested in arrays is fine.) function shareSelected() { - EventBridge.emitWebEvent(paths); -}; + EventBridge.emitWebEvent(JSON.stringify({ + type: "snapshot", + action: paths + })); +} function doNotShare() { - EventBridge.emitWebEvent([]); -}; + EventBridge.emitWebEvent(JSON.stringify({ + type: "snapshot", + action: [] + })); +} function snapshotSettings() { - EventBridge.emitWebEvent("openSettings"); -}; + EventBridge.emitWebEvent(JSON.stringify({ + type: "snapshot", + action: "openSettings" + })); +} diff --git a/scripts/system/snapshot.js b/scripts/system/snapshot.js index 8a48aeb0ff..d25a208417 100644 --- a/scripts/system/snapshot.js +++ b/scripts/system/snapshot.js @@ -47,11 +47,19 @@ function confirmShare(data) { // 2. Although we currently use a single image, we would like to take snapshot, a selfie, a 360 etc. all at the // same time, show the user all of them, and have the user deselect any that they do not want to share. // So we'll ultimately be receiving a set of objects, perhaps with different post processing for each. + message = JSON.parse(message); + if (message.type !== "snapshot") { + return; + } + var isLoggedIn; var needsLogin = false; - switch (message) { - case 'ready': - tablet.emitScriptEvent(data); // Send it. + switch (message.action) { + case 'ready': // Send it. + tablet.emitScriptEvent(JSON.stringify({ + type: "snapshot", + action: data + })); outstanding = 0; break; case 'openSettings': @@ -67,7 +75,7 @@ function confirmShare(data) { tablet.webEventReceived.disconnect(onMessage); HMD.closeTablet(); isLoggedIn = Account.isLoggedIn(); - message.forEach(function (submessage) { + message.action.forEach(function (submessage) { if (submessage.share && !isLoggedIn) { needsLogin = true; submessage.share = false; From dc3095bfcdee91c4f521bb62c6fb7a69e5370cf0 Mon Sep 17 00:00:00 2001 From: David Rowe Date: Mon, 27 Mar 2017 16:24:14 +1300 Subject: [PATCH 3/8] Fix "don't share" button not closing window --- scripts/system/snapshot.js | 1 + 1 file changed, 1 insertion(+) diff --git a/scripts/system/snapshot.js b/scripts/system/snapshot.js index d25a208417..fa92e77420 100644 --- a/scripts/system/snapshot.js +++ b/scripts/system/snapshot.js @@ -74,6 +74,7 @@ function confirmShare(data) { default: tablet.webEventReceived.disconnect(onMessage); HMD.closeTablet(); + tablet.gotoHomeScreen(); isLoggedIn = Account.isLoggedIn(); message.action.forEach(function (submessage) { if (submessage.share && !isLoggedIn) { From e58e3fbbf730220fff7dedde28798daa5b57ca67 Mon Sep 17 00:00:00 2001 From: David Rowe Date: Mon, 27 Mar 2017 17:32:04 +1300 Subject: [PATCH 4/8] Disconnect snapshot event handler when tablet "home" button pressed --- scripts/system/snapshot.js | 57 +++++++++++++++++++++++--------------- 1 file changed, 35 insertions(+), 22 deletions(-) diff --git a/scripts/system/snapshot.js b/scripts/system/snapshot.js index fa92e77420..4c454dbc7b 100644 --- a/scripts/system/snapshot.js +++ b/scripts/system/snapshot.js @@ -36,30 +36,27 @@ function showFeedWindow() { DialogsManager.showFeed(); } -var SNAPSHOT_REVIEW_URL = Script.resolvePath("html/SnapshotReview.html"); - var outstanding; -function confirmShare(data) { - tablet.gotoWebScreen(SNAPSHOT_REVIEW_URL); - function onMessage(message) { - // Receives message from the html dialog via the qwebchannel EventBridge. This is complicated by the following: - // 1. Although we can send POJOs, we cannot receive a toplevel object. (Arrays of POJOs are fine, though.) - // 2. Although we currently use a single image, we would like to take snapshot, a selfie, a 360 etc. all at the - // same time, show the user all of them, and have the user deselect any that they do not want to share. - // So we'll ultimately be receiving a set of objects, perhaps with different post processing for each. - message = JSON.parse(message); - if (message.type !== "snapshot") { - return; - } +var readyData; +function onMessage(message) { + // Receives message from the html dialog via the qwebchannel EventBridge. This is complicated by the following: + // 1. Although we can send POJOs, we cannot receive a toplevel object. (Arrays of POJOs are fine, though.) + // 2. Although we currently use a single image, we would like to take snapshot, a selfie, a 360 etc. all at the + // same time, show the user all of them, and have the user deselect any that they do not want to share. + // So we'll ultimately be receiving a set of objects, perhaps with different post processing for each. + message = JSON.parse(message); + if (message.type !== "snapshot") { + return; + } - var isLoggedIn; - var needsLogin = false; - switch (message.action) { + var isLoggedIn; + var needsLogin = false; + switch (message.action) { case 'ready': // Send it. tablet.emitScriptEvent(JSON.stringify({ type: "snapshot", - action: data - })); + action: readyData + })); outstanding = 0; break; case 'openSettings': @@ -72,7 +69,7 @@ function confirmShare(data) { Settings.setValue('openFeedAfterShare', true); break; default: - tablet.webEventReceived.disconnect(onMessage); + //tablet.webEventReceived.disconnect(onMessage); // <<< It's probably this that's missing?! HMD.closeTablet(); tablet.gotoHomeScreen(); isLoggedIn = Account.isLoggedIn(); @@ -90,15 +87,22 @@ function confirmShare(data) { } }); if (!outstanding && shouldOpenFeedAfterShare()) { - showFeedWindow(); + //showFeedWindow(); } if (needsLogin) { // after the possible feed, so that the login is on top Account.checkAndSignalForAccessToken(); } - } } +} + +var SNAPSHOT_REVIEW_URL = Script.resolvePath("html/SnapshotReview.html"); +var isInSnapshotReview = false; +function confirmShare(data) { + tablet.gotoWebScreen(SNAPSHOT_REVIEW_URL); + readyData = data; tablet.webEventReceived.connect(onMessage); HMD.openTablet(); + isInSnapshotReview = true; } function snapshotShared(errorMessage) { @@ -214,10 +218,18 @@ function processingGif() { } } +function onTabletScreenChanged(type, url) { + if (isInSnapshotReview) { + tablet.webEventReceived.disconnect(onMessage); + isInSnapshotReview = false; + } +} + button.clicked.connect(onClicked); buttonConnected = true; Window.snapshotShared.connect(snapshotShared); Window.processingGif.connect(processingGif); +tablet.screenChanged.connect(onTabletScreenChanged); Script.scriptEnding.connect(function () { if (buttonConnected) { @@ -229,6 +241,7 @@ Script.scriptEnding.connect(function () { } Window.snapshotShared.disconnect(snapshotShared); Window.processingGif.disconnect(processingGif); + tablet.screenChanged.disconnect(onTabletScreenChanged); }); }()); // END LOCAL_SCOPE From 35305b447660b260a394a2c379c7eaa1446496fe Mon Sep 17 00:00:00 2001 From: David Rowe Date: Tue, 28 Mar 2017 08:55:38 +1300 Subject: [PATCH 5/8] Make dialog single column with images above controls --- scripts/system/html/SnapshotReview.html | 52 +++++++++++----------- scripts/system/html/css/SnapshotReview.css | 43 +----------------- 2 files changed, 27 insertions(+), 68 deletions(-) diff --git a/scripts/system/html/SnapshotReview.html b/scripts/system/html/SnapshotReview.html index 68c91b8190..1ed9c0e223 100644 --- a/scripts/system/html/SnapshotReview.html +++ b/scripts/system/html/SnapshotReview.html @@ -9,38 +9,36 @@
-
-
- -
-
-
-
-
Would you like to share your pics in the Snapshots feed?
-
- - - - -
-
+
+ +
+
+
+
+
+
+
Would you like to share your pics in the Snapshots feed?
- + + + +
-
-
- - - - - - - - +
+
-
+
+
+ + + + + + + +
diff --git a/scripts/system/html/css/SnapshotReview.css b/scripts/system/html/css/SnapshotReview.css index c2965f92e1..cfc7dfc538 100644 --- a/scripts/system/html/css/SnapshotReview.css +++ b/scripts/system/html/css/SnapshotReview.css @@ -14,51 +14,12 @@ padding-top: 3px; } -.snapshot-column-left { - width: 320px; - position: absolute; - padding-top: 8px; -} - -.snapshot-column-right { - margin-left: 342px; -} - -.snapshot-column-right > div > img { +#snapshot-images > img { width: 100%; } -@media (max-width: 768px) { - .snapshot-column-left { - position: initial; - width: 100%; - } - .snapshot-column-right { - margin-left: 0; - width: 100%; - } - .snapshot-column-right > div > img { - margin-top: 18px !important; - } -} - -.snapshot-column-right > div { - position: relative; - padding: 2px; -} - -.snapshot-column-right > div > img { - border: 2px solid #575757; - margin: -2px; -} - -hr { - padding-left: 0; - padding-right: 0; - margin: 21px 0; -} - .snapsection { + padding-top: 21px; text-align: center; } From ead1f00bbf2c4d95e332238e6edeafa9122b60ed Mon Sep 17 00:00:00 2001 From: David Rowe Date: Tue, 28 Mar 2017 09:10:20 +1300 Subject: [PATCH 6/8] Title --- scripts/system/html/SnapshotReview.html | 2 +- scripts/system/html/css/SnapshotReview.css | 14 +++++++++++--- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/scripts/system/html/SnapshotReview.html b/scripts/system/html/SnapshotReview.html index 1ed9c0e223..089e223602 100644 --- a/scripts/system/html/SnapshotReview.html +++ b/scripts/system/html/SnapshotReview.html @@ -10,7 +10,7 @@
- +
diff --git a/scripts/system/html/css/SnapshotReview.css b/scripts/system/html/css/SnapshotReview.css index cfc7dfc538..13fb119992 100644 --- a/scripts/system/html/css/SnapshotReview.css +++ b/scripts/system/html/css/SnapshotReview.css @@ -8,10 +8,12 @@ // See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html */ +body { + padding-top: 0; +} .snapshot-container { width: 100%; - padding-top: 3px; } #snapshot-images > img { @@ -23,9 +25,15 @@ text-align: center; } +.snapsection:first-child { + padding-top: 0; + text-align: left; +} + .title { - text-transform: uppercase; - font-size: 12px; + font-size: 18px; + position: relative; + top: 12px; } .prompt { From a6ef592353ca416054a8bc0f66a06f93288e57ae Mon Sep 17 00:00:00 2001 From: David Rowe Date: Tue, 28 Mar 2017 14:43:26 +1300 Subject: [PATCH 7/8] Non-scrolling window with images scaled to fit --- scripts/system/html/SnapshotReview.html | 17 +++--- scripts/system/html/css/SnapshotReview.css | 71 ++++++++++++++++++---- scripts/system/html/js/SnapshotReview.js | 18 ++++-- 3 files changed, 81 insertions(+), 25 deletions(-) diff --git a/scripts/system/html/SnapshotReview.html b/scripts/system/html/SnapshotReview.html index 089e223602..3a2262e308 100644 --- a/scripts/system/html/SnapshotReview.html +++ b/scripts/system/html/SnapshotReview.html @@ -8,16 +8,17 @@ -
-
- -
-
+
+ +
+
+
-
+
+
+
-
Would you like to share your pics in the Snapshots feed?
@@ -30,7 +31,7 @@
-
+
diff --git a/scripts/system/html/css/SnapshotReview.css b/scripts/system/html/css/SnapshotReview.css index 13fb119992..34b690a021 100644 --- a/scripts/system/html/css/SnapshotReview.css +++ b/scripts/system/html/css/SnapshotReview.css @@ -10,32 +10,81 @@ body { padding-top: 0; -} - -.snapshot-container { - width: 100%; -} - -#snapshot-images > img { - width: 100%; + padding-bottom: 14px; } .snapsection { - padding-top: 21px; + padding-top: 14px; text-align: center; } -.snapsection:first-child { +.snapsection.title { padding-top: 0; text-align: left; } -.title { +.title label { font-size: 18px; position: relative; top: 12px; } +#snapshot-pane { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + box-sizing: border-box; + padding-top: 56px; + padding-bottom: 175px; +} + +#snapshot-images { + height: 100%; + width: 100%; + position: relative; +} + +#snapshot-images > div { + position: relative; + text-align: center; +} + +#snapshot-images img { + max-width: 100%; + max-height: 100%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + vertical-align: middle; +} + +#snapshot-images div.property { + margin-top: 0; + position: absolute; + top: 50%; + left: 7px; + transform: translate(0%, -50%); +} + +#snapshot-images img { + box-sizing: border-box; + padding: 0 7px 0 7px; +} + +#snapshot-images img.multiple { + padding-left: 28px; +} + +#snapshot-controls { + width: 100%; + position: absolute; + left: 0; + bottom: 14px; +} + .prompt { font-family: Raleway-SemiBold; font-size: 14px; diff --git a/scripts/system/html/js/SnapshotReview.js b/scripts/system/html/js/SnapshotReview.js index efe30196ee..d97207384a 100644 --- a/scripts/system/html/js/SnapshotReview.js +++ b/scripts/system/html/js/SnapshotReview.js @@ -10,7 +10,7 @@ // See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html // -var paths = [], idCounter = 0, useCheckboxes; +var paths = [], idCounter = 0, imageCount; function addImage(data) { if (!data.localPath) { return; @@ -19,11 +19,16 @@ function addImage(data) { input = document.createElement("INPUT"), label = document.createElement("LABEL"), img = document.createElement("IMG"), + div2 = document.createElement("DIV"), id = "p" + idCounter++; function toggle() { data.share = input.checked; } + div.style.height = "" + Math.floor(100 / imageCount) + "%"; + if (imageCount > 1) { + img.setAttribute("class", "multiple"); + } img.src = data.localPath; div.appendChild(img); - if (useCheckboxes) { // I'd rather use css, but the included stylesheet is quite particular. + if (imageCount > 1) { // I'd rather use css, but the included stylesheet is quite particular. // Our stylesheet(?) requires input.id to match label.for. Otherwise input doesn't display the check state. label.setAttribute('for', id); // cannot do label.for = input.id = id; @@ -31,9 +36,10 @@ function addImage(data) { input.checked = (id === "p0"); data.share = input.checked; input.addEventListener('change', toggle); - div.class = "property checkbox"; - div.appendChild(input); - div.appendChild(label); + div2.setAttribute("class", "property checkbox"); + div2.appendChild(input); + div2.appendChild(label); + div.appendChild(div2); } else { data.share = true; } @@ -73,7 +79,7 @@ window.onload = function () { handleShareButtons(shareMsg); // rest are image paths which we add - useCheckboxes = message.action.length > 1; + imageCount = message.action.length; message.action.forEach(addImage); }); EventBridge.emitWebEvent(JSON.stringify({ From 6a3dea030e0f7a2e6710e020aedd7126da6a1361 Mon Sep 17 00:00:00 2001 From: David Rowe Date: Tue, 28 Mar 2017 15:15:33 +1300 Subject: [PATCH 8/8] Settings link --- scripts/system/html/SnapshotReview.html | 2 +- scripts/system/snapshot.js | 7 ++++++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/scripts/system/html/SnapshotReview.html b/scripts/system/html/SnapshotReview.html index 3a2262e308..145cfb16a9 100644 --- a/scripts/system/html/SnapshotReview.html +++ b/scripts/system/html/SnapshotReview.html @@ -34,7 +34,7 @@
- + diff --git a/scripts/system/snapshot.js b/scripts/system/snapshot.js index 4c454dbc7b..010544a2c6 100644 --- a/scripts/system/snapshot.js +++ b/scripts/system/snapshot.js @@ -60,7 +60,12 @@ function onMessage(message) { outstanding = 0; break; case 'openSettings': - Desktop.show("hifi/dialogs/GeneralPreferencesDialog.qml", "GeneralPreferencesDialog"); + if ((HMD.active && Settings.getValue("hmdTabletBecomesToolbar")) + || (!HMD.active && Settings.getValue("desktopTabletBecomesToolbar"))) { + Desktop.show("hifi/dialogs/GeneralPreferencesDialog.qml", "General Preferences"); + } else { + tablet.loadQMLSource("TabletGeneralPreferences.qml"); + } break; case 'setOpenFeedFalse': Settings.setValue('openFeedAfterShare', false);