More consistent highlights/toggle for toolbar buttons

When the "app" for a button is visible the button should become active.
Also clicking on a highlighted/active button should close the associated "app".

This should be noticeable on the following tablet apps.

* audio
* menu
* people
* market
* users

scripts/system/audio.js

@@ -16,19 +16,51 @@
 var TABLET_BUTTON_NAME = "AUDIO";
 var HOME_BUTTON_TEXTURE = "http://hifi-content.s3.amazonaws.com/alan/dev/tablet-with-home-button.fbx/tablet-with-home-button.fbm/button-root.png";
 
+var MUTE_ICONS = {
+    icon: "icons/tablet-icons/mic-mute-i.svg",
+    activeIcon: "icons/tablet-icons/mic-mute-a.svg"
+};
+
+var UNMUTE_ICONS = {
+    icon: "icons/tablet-icons/mic-unmute-i.svg",
+    activeIcon: "icons/tablet-icons/mic-unmute-a.svg"
+};
+
 function onMuteToggled() {
-    button.editProperties({ isActive: AudioDevice.getMuted() });
+    if (AudioDevice.getMuted()) {
+        button.editProperties(MUTE_ICONS);
+    } else {
+        button.editProperties(UNMUTE_ICONS);
+    }
 }
-function onClicked(){
+
-    var entity = HMD.tabletID;
+var shouldActivateButton = false;
-    Entities.editEntity(entity, { textures: JSON.stringify({ "tex.close": HOME_BUTTON_TEXTURE }) });
+var onAudioScreen = false;
-    tablet.gotoMenuScreen("Audio");
+
+function onClicked() {
+    if (onAudioScreen) {
+        // for toolbar-mode: go back to home screen, this will close the window.
+        tablet.gotoHomeScreen();
+    } else {
+        var entity = HMD.tabletID;
+        Entities.editEntity(entity, { textures: JSON.stringify({ "tex.close": HOME_BUTTON_TEXTURE }) });
+        shouldActivateButton = true;
+        tablet.gotoMenuScreen("Audio");
+        onAudioScreen = true;
+    }
+}
+
+function onScreenChanged(type, url) {
+    // for toolbar mode: change button to active when window is first openend, false otherwise.
+    button.editProperties({isActive: shouldActivateButton});
+    shouldActivateButton = false;
+    onAudioScreen = false;
 }
 
 var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
 var button = tablet.addButton({
-    icon: "icons/tablet-icons/mic-unmute-i.svg",
+    icon: AudioDevice.getMuted() ? MUTE_ICONS.icon : UNMUTE_ICONS.icon,
-    activeIcon: "icons/tablet-icons/mic-mute-a.svg",
+    activeIcon: AudioDevice.getMuted() ? MUTE_ICONS.activeIcon : UNMUTE_ICONS.activeIcon,
     text: TABLET_BUTTON_NAME,
     sortOrder: 1
 });
@@ -36,10 +68,12 @@ var button = tablet.addButton({
 onMuteToggled();
 
 button.clicked.connect(onClicked);
+tablet.screenChanged.connect(onScreenChanged);
 AudioDevice.muteToggled.connect(onMuteToggled);
 
 Script.scriptEnding.connect(function () {
     button.clicked.disconnect(onClicked);
+    tablet.screenChanged.disconnect(onScreenChanged);
     AudioDevice.muteToggled.disconnect(onMuteToggled);
     tablet.removeButton(button);
 });

scripts/system/marketplaces/marketplaces.js

@@ -52,10 +52,16 @@ function onMessageBoxClosed(id, button) {
 
 Window.messageBoxClosed.connect(onMessageBoxClosed);
 
+var shouldActivateButton = false;
+var onMarketplaceScreen = false;
+
 function showMarketplace() {
     UserActivityLogger.openedMarketplace();
 
+    shouldActivateButton = true;
     tablet.gotoWebScreen(MARKETPLACE_URL_INITIAL, MARKETPLACES_INJECT_SCRIPT_URL);
+    onMarketplaceScreen = true;
+
     tablet.webEventReceived.connect(function (message) {
 
         if (message === GOTO_DIRECTORY) {
@@ -98,15 +104,10 @@ function showMarketplace() {
     });
 }
 
-function toggleMarketplace() {
-    var entity = HMD.tabletID;
-    Entities.editEntity(entity, {textures: JSON.stringify({"tex.close": HOME_BUTTON_TEXTURE})});
-    showMarketplace();
-}
-
 var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
 var marketplaceButton = tablet.addButton({
     icon: "icons/tablet-icons/market-i.svg",
+    activeIcon: "icons/tablet-icons/market-a.svg",
     text: "MARKET",
     sortOrder: 9
 });
@@ -117,16 +118,30 @@ function onCanWriteAssetsChanged() {
 }
 
 function onClick() {
-    toggleMarketplace();
+    if (onMarketplaceScreen) {
+        // for toolbar-mode: go back to home screen, this will close the window.
+        tablet.gotoHomeScreen();
+    } else {
+        var entity = HMD.tabletID;
+        Entities.editEntity(entity, {textures: JSON.stringify({"tex.close": HOME_BUTTON_TEXTURE})});
+        showMarketplace();
+    }
+}
+
+function onScreenChanged(type, url) {
+    // for toolbar mode: change button to active when window is first openend, false otherwise.
+    marketplaceButton.editProperties({isActive: shouldActivateButton});
+    shouldActivateButton = false;
+    onMarketplaceScreen = false;
 }
 
 marketplaceButton.clicked.connect(onClick);
+tablet.screenChanged.connect(onScreenChanged);
 Entities.canWriteAssetsChanged.connect(onCanWriteAssetsChanged);
 
 Script.scriptEnding.connect(function () {
-    if (tablet) {
+    tablet.removeButton(marketplaceButton);
-        tablet.removeButton(marketplaceButton);
+    tablet.screenChanged.disconnect(onScreenChanged);
-    }
     Entities.canWriteAssetsChanged.disconnect(onCanWriteAssetsChanged);
 });
 

scripts/system/menu.js

@@ -10,26 +10,46 @@
 //
 
 var HOME_BUTTON_TEXTURE = "http://hifi-content.s3.amazonaws.com/alan/dev/tablet-with-home-button.fbx/tablet-with-home-button.fbm/button-root.png";
-//var HOME_BUTTON_TEXTURE = Script.resourcesPath() + "meshes/tablet-with-home-button.fbx/tablet-with-home-button.fbm/button-root.png";
+// var HOME_BUTTON_TEXTURE = Script.resourcesPath() + "meshes/tablet-with-home-button.fbx/tablet-with-home-button.fbm/button-root.png";
 
 (function() {
     var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
     var button = tablet.addButton({
         icon: "icons/tablet-icons/menu-i.svg",
+        activeIcon: "icons/tablet-icons/menu-a.svg",
         text: "MENU",
         sortOrder: 3
     });
 
+    var shouldActivateButton = false;
+    var onMenuScreen = false;
+
     function onClicked() {
-        var entity = HMD.tabletID;
+        if (onMenuScreen) {
-        Entities.editEntity(entity, {textures: JSON.stringify({"tex.close": HOME_BUTTON_TEXTURE})});
+            // for toolbar-mode: go back to home screen, this will close the window.
-        tablet.gotoMenuScreen();
+            tablet.gotoHomeScreen();
+        } else {
+            var entity = HMD.tabletID;
+            Entities.editEntity(entity, {textures: JSON.stringify({"tex.close": HOME_BUTTON_TEXTURE})});
+            shouldActivateButton = true;
+            tablet.gotoMenuScreen();
+            onMenuScreen = true;
+        }
+    }
+
+    function onScreenChanged(type, url) {
+        // for toolbar mode: change button to active when window is first openend, false otherwise.
+        button.editProperties({isActive: shouldActivateButton});
+        shouldActivateButton = false;
+        onMenuScreen = false;
     }
 
     button.clicked.connect(onClicked);
+    tablet.screenChanged.connect(onScreenChanged);
 
     Script.scriptEnding.connect(function () {
         button.clicked.disconnect(onClicked);
         tablet.removeButton(button);
+        tablet.screenChanged.disconnect(onScreenChanged);
     });
 }());

scripts/system/pal.js

@@ -477,23 +477,17 @@ var button;
 var buttonName = "PEOPLE";
 var tablet = null;
 
-function onTabletScreenChanged(type, url) {
-    if (type !== "QML" || url !== "../Pal.qml") {
-        off();
-    }
-}
-
 function startup() {
     tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
     button = tablet.addButton({
         text: buttonName,
         icon: "icons/tablet-icons/people-i.svg",
+        activeIcon: "icons/tablet-icons/people-a.svg",
         sortOrder: 7
     });
     tablet.fromQml.connect(fromQml);
     button.clicked.connect(onTabletButtonClicked);
     tablet.screenChanged.connect(onTabletScreenChanged);
-
     Users.usernameFromIDReply.connect(usernameFromIDReply);
     Window.domainChanged.connect(clearLocalQMLDataAndClosePAL);
     Window.domainConnectionRefused.connect(clearLocalQMLDataAndClosePAL);
@@ -524,17 +518,39 @@ function off() {
     Users.requestsDomainListData = false;
 }
 
+var onPalScreen = false;
+var shouldActivateButton = false;
+
 function onTabletButtonClicked() {
-    tablet.loadQMLSource("../Pal.qml");
+    if (onPalScreen) {
-    Users.requestsDomainListData = true;
+        // for toolbar-mode: go back to home screen, this will close the window.
-    populateUserList();
+        tablet.gotoHomeScreen();
-    isWired = true;
+    } else {
-    Script.update.connect(updateOverlays);
+        shouldActivateButton = true;
-    Controller.mousePressEvent.connect(handleMouseEvent);
+        tablet.loadQMLSource("../Pal.qml");
-    Controller.mouseMoveEvent.connect(handleMouseMoveEvent);
+        onPalScreen = true;
-    triggerMapping.enable();
+        Users.requestsDomainListData = true;
-    triggerPressMapping.enable();
+        populateUserList();
-    audioTimer = createAudioInterval(conserveResources ? AUDIO_LEVEL_CONSERVED_UPDATE_INTERVAL_MS : AUDIO_LEVEL_UPDATE_INTERVAL_MS);
+        isWired = true;
+        Script.update.connect(updateOverlays);
+        Controller.mousePressEvent.connect(handleMouseEvent);
+        Controller.mouseMoveEvent.connect(handleMouseMoveEvent);
+        triggerMapping.enable();
+        triggerPressMapping.enable();
+        audioTimer = createAudioInterval(conserveResources ? AUDIO_LEVEL_CONSERVED_UPDATE_INTERVAL_MS : AUDIO_LEVEL_UPDATE_INTERVAL_MS);
+    }
+}
+
+function onTabletScreenChanged(type, url) {
+    // for toolbar mode: change button to active when window is first openend, false otherwise.
+    button.editProperties({isActive: shouldActivateButton});
+    shouldActivateButton = false;
+    onPalScreen = false;
+
+    // disable sphere overlays when not on pal screen.
+    if (type !== "QML" || url !== "../Pal.qml") {
+        off();
+    }
 }
 
 //
@@ -621,14 +637,12 @@ function shutdown() {
     button.clicked.disconnect(onTabletButtonClicked);
     tablet.removeButton(button);
     tablet.screenChanged.disconnect(onTabletScreenChanged);
-
     Users.usernameFromIDReply.disconnect(usernameFromIDReply);
     Window.domainChanged.disconnect(clearLocalQMLDataAndClosePAL);
     Window.domainConnectionRefused.disconnect(clearLocalQMLDataAndClosePAL);
     Messages.subscribe(CHANNEL);
     Messages.messageReceived.disconnect(receiveMessage);
     Users.avatarDisconnected.disconnect(avatarDisconnected);
-
     off();
 }
 

scripts/system/tablet-goto.js

@@ -14,10 +14,27 @@
 (function() { // BEGIN LOCAL_SCOPE
     var gotoQmlSource = "TabletAddressDialog.qml";
     var buttonName = "GOTO";
+    var onGotoScreen = false;
+    var shouldActivateButton = false;
 
-    function onClicked(){
+    function onClicked() {
-        tablet.loadQMLSource(gotoQmlSource);
+        if (onGotoScreen) {
+            // for toolbar-mode: go back to home screen, this will close the window.
+            tablet.gotoHomeScreen();
+        } else {
+            shouldActivateButton = true;
+            tablet.loadQMLSource(gotoQmlSource);
+            onGotoScreen = true;
+        }
     }
+
+    function onScreenChanged(type, url) {
+        // for toolbar mode: change button to active when window is first openend, false otherwise.
+        button.editProperties({isActive: shouldActivateButton});
+        shouldActivateButton = false;
+        onGotoScreen = false;
+    }
+
     var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
     var button = tablet.addButton({
         icon: "icons/tablet-icons/goto-i.svg",
@@ -27,12 +44,12 @@
     });
 
     button.clicked.connect(onClicked);
+    tablet.screenChanged.connect(onScreenChanged);
 
     Script.scriptEnding.connect(function () {
         button.clicked.disconnect(onClicked);
-        if (tablet) {
+        tablet.removeButton(button);
-            tablet.removeButton(button);
+        tablet.screenChanged.disconnect(onScreenChanged);
-        }
     });
 
 }()); // END LOCAL_SCOPE

scripts/system/tablet-users.js

@@ -1,7 +1,7 @@
 "use strict";
 
 //
-//  users.js
+//  tablet-users.js
 //
 //  Created by Faye Li on 18 Jan 2017.
 //  Copyright 2017 High Fidelity, Inc.
@@ -36,16 +36,34 @@
     var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
     var button = tablet.addButton({
         icon: "icons/tablet-icons/users-i.svg",
+        activeIcon: "icons/tablet-icons/users-a.svg",
         text: "USERS",
         sortOrder: 11
     });
 
+    var onUsersScreen = false;
+    var shouldActivateButton = false;
+
     function onClicked() {
-        var tabletEntity = HMD.tabletID;
+        if (onUsersScreen) {
-        if (tabletEntity) {
+            // for toolbar-mode: go back to home screen, this will close the window.
-            Entities.editEntity(tabletEntity, {textures: JSON.stringify({"tex.close" : HOME_BUTTON_TEXTURE})});
+            tablet.gotoHomeScreen();
+        } else {
+            var tabletEntity = HMD.tabletID;
+            if (tabletEntity) {
+                Entities.editEntity(tabletEntity, {textures: JSON.stringify({"tex.close" : HOME_BUTTON_TEXTURE})});
+            }
+            shouldActivateButton = true;
+            tablet.gotoWebScreen(USERS_URL);
+            onUsersScreen = true;
         }
-        tablet.gotoWebScreen(USERS_URL);
+    }
+
+    function onScreenChanged() {
+        // for toolbar mode: change button to active when window is first openend, false otherwise.
+        button.editProperties({isActive: shouldActivateButton});
+        shouldActivateButton = false;
+        onUsersScreen = false;
     }
 
     function onWebEventReceived(event) {
@@ -88,12 +106,13 @@
                 // update your visibility (all, friends, or none)
                 myVisibility = event.data.visibility;
                 GlobalServices.findableBy = myVisibility;
-            } 
+            }
         }
     }
 
     button.clicked.connect(onClicked);
     tablet.webEventReceived.connect(onWebEventReceived);
+    tablet.screenChanged.connect(onScreenChanged);
 
     function cleanup() {
         button.clicked.disconnect(onClicked);