From fd24d12bc188e058989c02b672f0a03d99f092fc Mon Sep 17 00:00:00 2001 From: David Rowe Date: Tue, 15 Nov 2016 14:38:03 +1300 Subject: [PATCH] Add navigation bar to marketplace pages --- scripts/system/html/css/edit-style.css | 14 +++++- scripts/system/html/css/marketplaces.css | 32 ++++++++++++- scripts/system/html/js/marketplacesClara.js | 46 ++++++++++++++++++- .../system/html/js/marketplacesDirectory.js | 2 +- scripts/system/html/js/marketplacesHiFi.js | 38 ++++++++++++++- scripts/system/html/marketplaces.html | 4 ++ scripts/system/marketplaces/marketplaces.js | 4 ++ 7 files changed, 135 insertions(+), 5 deletions(-) diff --git a/scripts/system/html/css/edit-style.css b/scripts/system/html/css/edit-style.css index a5807ff025..91138e41ec 100644 --- a/scripts/system/html/css/edit-style.css +++ b/scripts/system/html/css/edit-style.css @@ -334,9 +334,14 @@ input[type=button].red { } input[type=button].blue { color: #fff; - background-color: #94132e; + background-color: #1080b8; background: linear-gradient(#00b4ef 20%, #1080b8 100%); } +input[type=button].white { + color: #121212; + background-color: #afafaf; + background: linear-gradient(#fff 20%, #afafaf 100%); +} input[type=button]:enabled:hover { background: linear-gradient(#000, #000); @@ -350,6 +355,10 @@ input[type=button].blue:enabled:hover { background: linear-gradient(#00b4ef, #00b4ef); border: none; } +input[type=button].white:enabled:hover { + background: linear-gradient(#fff, #fff); + border: none; +} input[type=button]:active { background: linear-gradient(#343434, #343434); @@ -360,6 +369,9 @@ input[type=button].red:active { input[type=button].blue:active { background: linear-gradient(#1080b8, #1080b8); } +input[type=button].white:active { + background: linear-gradient(#afafaf, #afafaf); +} input[type=button]:disabled { color: #252525; diff --git a/scripts/system/html/css/marketplaces.css b/scripts/system/html/css/marketplaces.css index 734501f3fc..0ec177ef62 100644 --- a/scripts/system/html/css/marketplaces.css +++ b/scripts/system/html/css/marketplaces.css @@ -22,11 +22,12 @@ body { margin-bottom: 20px; } .marketplaces-intro-text { - margin-bottom: 60px; + margin-bottom: 30px; } .marketplace-tile { float:left; width: 100%; + margin-bottom: 25px; } .marketplace-tile-first-column { text-align: center; @@ -75,6 +76,35 @@ body { .marketplace-clara-steps > li { margin-top: 5px; } + +#marketplace-navigation { + width: 100%; + height: 50px; + background: #00b4ef; + position: fixed; + bottom: 0; +} +#marketplace-navigation .glyph { + margin-left: 20px; + font-family: HiFi-Glyphs; + color: #fff; + font-size: 40px; + line-height: 50px; +} +#marketplace-navigation .text { + color: #fff; + font-size: 18px; + line-height: 50px; + vertical-align: top; + position: relative; + top: 1px; +} +#marketplace-navigation input { + float: right; + margin-right: 50px; + margin-top: 12px; +} + @media (max-width:768px) { .marketplace-tile-first-column { float: left; diff --git a/scripts/system/html/js/marketplacesClara.js b/scripts/system/html/js/marketplacesClara.js index 9eed23100e..f9b75899a8 100644 --- a/scripts/system/html/js/marketplacesClara.js +++ b/scripts/system/html/js/marketplacesClara.js @@ -10,4 +10,48 @@ // See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html // -console.log("Hello from marketplacesClara.js"); +function onLoad() { + // Supporting styles from marketplaces.css. + $("head").append( + '' + ); + + // Supporting styles from edit-style.css. + $("head").append( + '' + ); + + // Make space for marketplaces footer. + $("head").append( + '' + ); + + // Marketplaces footer. + $("body").append( + '
' + + '[ Check out other marketplaces.' + + '' + + '
' + ); + + // Marketplace footer action. + $("#all-markets").on("click", function () { + $("#marketplace-content").attr("src", "marketplacesDirectory.html"); + EventBridge.emitWebEvent("RELOAD_DIRECTORY"); + }); +} + +window.addEventListener("load", onLoad); diff --git a/scripts/system/html/js/marketplacesDirectory.js b/scripts/system/html/js/marketplacesDirectory.js index b062735c99..dafd162c6e 100644 --- a/scripts/system/html/js/marketplacesDirectory.js +++ b/scripts/system/html/js/marketplacesDirectory.js @@ -10,4 +10,4 @@ // See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html // -console.log("Hello from marketplacesDirectory.js"); +// Nothing to do; just need empty script to replace individual marketplace ones. diff --git a/scripts/system/html/js/marketplacesHiFi.js b/scripts/system/html/js/marketplacesHiFi.js index a74b9ce971..a84dc0779c 100644 --- a/scripts/system/html/js/marketplacesHiFi.js +++ b/scripts/system/html/js/marketplacesHiFi.js @@ -10,4 +10,40 @@ // See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html // -console.log("Hello from marketplacesHiFi.js"); +function onLoad() { + // Supporting styles from marketplaces.css. + $("head").append( + '' + ); + + // Supporting styles from edit-style.css. + $("head").append( + '' + ); + + // Marketplaces footer. + $("body").append( + '
' + + '[ Check out other marketplaces.' + + '' + + '
' + ); + + // Marketplace footer action. + $("#all-markets").on("click", function () { + $("#marketplace-content").attr("src", "marketplacesDirectory.html"); + EventBridge.emitWebEvent("RELOAD_DIRECTORY"); + }); +} + +window.addEventListener("load", onLoad); diff --git a/scripts/system/html/marketplaces.html b/scripts/system/html/marketplaces.html index 970af1158f..b2cfb359d0 100644 --- a/scripts/system/html/marketplaces.html +++ b/scripts/system/html/marketplaces.html @@ -49,5 +49,9 @@ +
+ [ Select a marketplace to explore. + +
\ No newline at end of file diff --git a/scripts/system/marketplaces/marketplaces.js b/scripts/system/marketplaces/marketplaces.js index a817ff9673..5a78e32e6b 100644 --- a/scripts/system/marketplaces/marketplaces.js +++ b/scripts/system/marketplaces/marketplaces.js @@ -32,6 +32,10 @@ marketplaceWindow.webEventReceived.connect(function (data) { if (data === "INJECT_HIFI") { marketplaceWindow.setScriptURL(Script.resolvePath("../html/js/marketplacesHiFi.js")); } + if (data === "RELOAD_DIRECTORY") { + marketplaceWindow.setScriptURL(Script.resolvePath("../html/js/marketplacesDirectory.js")); + marketplaceWindow.setURL(MARKETPLACES_URL); + } }); var toolHeight = 50;