Add Status Update Icon (#417)

* Add Status Update Icon * Review comments * Refactor + animations * Remove timeout * Margin right spacing * Refactor app store icon * Settings Page * Remove app header icon changes * Fix Settings Title * Line break * Refactor AppName * Update icons * Apply suggestions from code review Co-authored-by: Jacob Keeler <[email protected]> * Update cart icon * Update if/else priority for name props.value * Apply suggestions from code review Co-authored-by: Jacob Keeler <[email protected]> * Add svg-stroke class to icon * Apply suggestions from code review Co-authored-by: Jacob Keeler <[email protected]> Co-authored-by: Jacob Keeler <[email protected]>
smartdevicelink · Aug 27, 2021 · 960ba0c · 960ba0c
1 parent 257cd1e
commit 960ba0c
Show file tree

Hide file tree

Showing 20 changed files with 246 additions and 53 deletions.
diff --git a/public/Flags.js b/public/Flags.js
@@ -7,5 +7,6 @@ window.flags = {
     CoreHost: '127.0.0.1',
     CorePort: 8087,
     CoreWebEngineAppPort: 2020,
-    AppStoreDirectoryUrl: 'https://sdl-webengine-app-store-example.s3.amazonaws.com/app-directory.json'
+    AppStoreDirectoryUrl: 'https://sdl-webengine-app-store-example.s3.amazonaws.com/app-directory.json',
+    StatusUpdateIcon: true
 };
diff --git a/src/css/components/_app-header.scss b/src/css/components/_app-header.scss
@@ -12,10 +12,6 @@
 
     div {
         @include flex(1);
-        &:nth-of-type(2) {
-            text-align: center;
-        }
-
         &:nth-of-type(3) {
             text-align: right;
         }
@@ -37,6 +33,11 @@
         text-transform: uppercase;
     }
 
+    .settings-menu svg{
+        @include size(40px);
+        margin-left: 0px;
+    }
+
     .svg-wrap-secondary{
         width: 30px;
         svg{

diff --git a/src/css/components/_h-scroll-menu-item.scss b/src/css/components/_h-scroll-menu-item.scss
@@ -6,6 +6,7 @@
     color: color(white);
     border: 2px solid;
     position: relative;
+    cursor: pointer;
 
     &__image {
         display: flex;

diff --git a/src/img/icons/icon-cart.svg b/src/img/icons/icon-cart.svg
diff --git a/src/img/icons/up_to_date.svg b/src/img/icons/up_to_date.svg
diff --git a/src/img/icons/updating.svg b/src/img/icons/updating.svg
diff --git a/src/index.js b/src/index.js
@@ -29,6 +29,7 @@ import AppStoreMenu from './js/AppStoreMenu';
 import WebEngineAppContainer from './js/WebEngineAppContainer';
 import AppPermissions from './js/AppPermissions';
 import PermissionAppList from './js/PermissionAppList';
+import Settings from './js/Settings';
 import Keyboard from './js/Keyboard';
 import React from 'react';
 import ReactDOM from 'react-dom';
@@ -351,6 +352,7 @@ ReactDOM.render((
             <Route path="/keyboard" component={Keyboard} />
             <Route path="/permissionapplist" component={PermissionAppList} />
             <Route path="/apppermissions" component={AppPermissions} />
+            <Route path="/settings" component={Settings} />
         </HashRouter>
     </HMIApp>
     </Provider>

diff --git a/src/js/AppHeader.js b/src/js/AppHeader.js
@@ -16,29 +16,15 @@ import uiController from './Controllers/UIController'
 import ScrollableMessage from './ScrollableMessage';
 
 import {ReactComponent as IconMenu} from '../img/icons/icon-menu.svg'
-import {ReactComponent as IconCart} from '../img/icons/icon-cart.svg'
-import {ReactComponent as PermissionsIcon} from '../img/static/0x49.svg'
+import {ReactComponent as IconSettings} from '../img/static/0x49.svg'
 
-class AppStoreIcon extends React.Component {
+class MainMenuSettings extends React.Component {
     render() {
-        return (<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
-                <Link to="/permissionapplist" style={{ marginRight: 10, marginLeft: 'auto' }}>
-                    <div className="app-icon">
-                        <div className="static-icon">
-                            <div className="svg-wrap">
-                                <PermissionsIcon/>
-                            </div>
-                        </div>
-                    </div>
-                </Link>
-                <Link to="/appstore" style={{ marginRight: 0 }}>
-                    <div className="app-icon">
-                        <div className="static-icon">
-                            <div className="svg-wrap">
-                                <IconCart/>
-                            </div>
-                        </div>
-                    </div>
+        return (<div>
+                <Link to="/settings">
+                    <span className="settings-menu">
+                        <IconSettings/>
+                    </span>
                 </Link>
             </div>);
     }
@@ -118,12 +104,9 @@ class AppHeader extends React.Component {
                 activeSubMenu={this.props.activeSubMenu ? true : false} /> ;
 
         if (this.props.icon === 'store') {
-            if (this.props.isAppStoreConnected) {
-                icon = this.props.location.pathname === '/appstore' ? (<AppStoreMenuIcon />) : (<AppStoreIcon />);
-            }
-            else{
-                icon = (<div />)
-            }
+            icon = this.props.location.pathname === '/appstore' ? (<AppStoreMenuIcon />) : (
+                <MainMenuSettings/>
+            );
         } else if (this.props.icon === 'custom') {
             icon = this.props.jsxIcon;
         }
@@ -146,7 +129,7 @@ class AppHeader extends React.Component {
         return (
             <div className="app__header" style={colorScheme}>
                 <MenuLink menuName={this.props.menuName} backLink={backLink} parentID={this.props.parentID}/>
-                <Name />
+                <Name value={this.props.title}/>
                 { icon }
                 <Modal
                 isOpen={this.props.showAlert}

diff --git a/src/js/AppName.js b/src/js/AppName.js
@@ -12,8 +12,7 @@ export default class AppName extends React.Component {
         subTitle = (isShowingSubMenu) ? this.props.subMenuName : subTitle
         subTitle = (isPerformingInteraction) ? this.props.interactionText : subTitle
 
-        let name = this.props.location.pathname ==='/appstore' ? 'App Store' : this.props.location.pathname ==='/appstoremenu' ? 'Installed Apps' : this.props.name;
-        let appName_html = <span className="t-small t-medium th-f-color">{name}</span>
+        let appName_html = <span className="t-small t-medium th-f-color">{this.props.name}</span>
         let separator_html = (subTitle) ? <span className="svg-wrap-secondary"><TitleSeparator/></span> : null
         let subTitle_html = (subTitle) ? <span className="t-small t-light th-f-color-secondary">{subTitle}</span> : null
 

diff --git a/src/js/AppStore.js b/src/js/AppStore.js
@@ -158,7 +158,7 @@ class AppStore extends React.Component {
                         description={pendingInstallApp.description} iconUrl={pendingInstallApp.iconUrl}
                         leftText="Cancel" leftCallback={() => this.cancelInstall()} rightText="Download" rightCallback={() => this.confirmInstall()} />
                 </Modal>
-                <AppHeader icon='store' backLink="/" menuName="APPS"/>
+                <AppHeader icon='store' backLink="/settings" menuName="Back" title="App Store"/>
                 {<HScrollMenu data={menuData}
                         theme={this.props.theme}
                         onSelection={this.onSelection}

diff --git a/src/js/AppStoreMenu.js b/src/js/AppStoreMenu.js
@@ -109,7 +109,7 @@ class AppStoreMenu extends React.Component {
                         description={this.state.appDescription} iconUrl={this.state.appIcon}
                         leftText="Cancel" leftCallback={() => this.cancelUninstall()} rightText="Uninstall" rightCallback={() => this.confirmUninstall()} />
                 </Modal>
-                <AppHeader icon='false' backLink="/appstore" menuName="STORE"/>
+                <AppHeader icon='false' backLink="/appstore" menuName="STORE" title="Installed Apps"/>
                 <div className="appstore-menu">
                     {this.props.apps.map((app) => {
 

diff --git a/src/js/Controllers/RpcFactory.js b/src/js/Controllers/RpcFactory.js
@@ -1053,6 +1053,13 @@ class RpcFactory {
             "method": "TTS.Stopped",
         })
     }
+    static UpdateSDL() {
+        return ({
+            "jsonrpc": "2.0",
+            "id": rpcFactory_msgId++,
+            "method": "SDL.UpdateSDL"
+        })
+    }
 }
 
 export default RpcFactory
diff --git a/src/js/Controllers/SDLController.js b/src/js/Controllers/SDLController.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import RpcFactory from './RpcFactory'
 import store from '../store'
-import { activateApp, setURLS, setPTUWithModem, clearPendingAppLaunch, openPermissionsView } from '../actions'
+import { activateApp, setURLS, setPTUWithModem, clearPendingAppLaunch, openPermissionsView, onStatusUpdate } from '../actions'
 import bcController from './BCController'
 import externalPolicies from './ExternalPoliciesController'
 import FileSystemController from './FileSystemController'
@@ -62,7 +62,11 @@ class SDLController {
             });
         } else {
             if (this.statusMessages[status].ttsString) { ttsController.queueTTS(this.statusMessages[status].ttsString); }
-            toast((_toast) => (<PermissionsPopup _toast={_toast} header={this.statusMessages[status].line1}/>), { duration: 2000 });
+            if (window.flags.StatusUpdateIcon) {
+                store.dispatch(onStatusUpdate(status, this.statusMessages[status].line1));
+            } else {
+                toast((_toast) => (<PermissionsPopup _toast={_toast} header={this.statusMessages[status].line1}/>), { duration: 2000 });
+            }
         }
     }
     handleRPC(rpc) {
@@ -335,6 +339,9 @@ class SDLController {
         }
         this.listener.send(gufm);
     }
+    updateSDL() {
+        this.listener.send(RpcFactory.UpdateSDL());
+    }
 }
 
 let controller = new SDLController()

diff --git a/src/js/Controllers/UIController.js b/src/js/Controllers/UIController.js
@@ -954,7 +954,7 @@ class UIController {
         const state = store.getState()
         var activeApp = state.activeApp
         var app = state.ui[activeApp]
-        var interactionId = app.interactionId
+        var interactionId = app?.interactionId
         for (var msgID in this.timers) {
             clearTimeout(this.timers[msgID])
             delete this.timers[msgID]

diff --git a/src/js/PermissionAppList.js b/src/js/PermissionAppList.js
@@ -34,7 +34,7 @@ class Permissions extends React.Component {
 
         return (
             <div>
-                <AppHeader backLink={'/'} menuName="Exit" icon="false" />
+                <AppHeader backLink={'/settings'} menuName="Exit" icon="false" />
                 <div className="vscrollmenu">
                     { options }
                 </div>