diff --git a/src/css/base/_typography.scss b/src/css/base/_typography.scss index 626d106bb..b97cb8034 100644 --- a/src/css/base/_typography.scss +++ b/src/css/base/_typography.scss @@ -11,7 +11,6 @@ @mixin t-small() { -webkit-font-smoothing: antialiased; font-size: 25px; - line-height: 2; } .t-small { diff --git a/src/css/components/_h-scroll-menu-item.scss b/src/css/components/_h-scroll-menu-item.scss index d63b84fe0..3f0a525b4 100644 --- a/src/css/components/_h-scroll-menu-item.scss +++ b/src/css/components/_h-scroll-menu-item.scss @@ -38,6 +38,10 @@ bottom: 0px; width: 100%; height: 23%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; } &__header { @@ -72,6 +76,13 @@ margin: auto; } } + + &__secondary-image { + position: absolute; + right: 7px; + top: 5px; + width: 50px; + } } .hscrollmenu-item-disabled { diff --git a/src/css/components/_v-scroll-menu-item.scss b/src/css/components/_v-scroll-menu-item.scss index e5d7adc52..8e0d5c2f6 100644 --- a/src/css/components/_v-scroll-menu-item.scss +++ b/src/css/components/_v-scroll-menu-item.scss @@ -28,6 +28,7 @@ display: flex; flex-direction: column; align-items: center; + justify-content: center; img { margin:auto; @@ -56,6 +57,8 @@ &__name { flex: 6; margin-left: 2%; + display: flex; + flex-direction: column; } &__arrow { @@ -75,3 +78,7 @@ .vscrollmenu-item-disabled { opacity: 0.7; } + +.mw-100px { + max-width: 100px; +} diff --git a/src/js/Controllers/DisplayCapabilities.js b/src/js/Controllers/DisplayCapabilities.js index 1efb91d29..78d85505b 100644 --- a/src/js/Controllers/DisplayCapabilities.js +++ b/src/js/Controllers/DisplayCapabilities.js @@ -72,12 +72,19 @@ let textWithGraphicCapabilities = { textField("subtleAlertSoftButtonText"), textField("menuName"), textField("secondaryText"), - textField("tertiaryText") + textField("tertiaryText"), + textField("menuCommandSecondaryText"), + textField("menuCommandTertiaryText"), + textField("menuSubMenuSecondaryText"), + textField("menuSubMenuTertiaryText") ], "imageFields": [ imageField("choiceImage", 40), imageField("menuIcon", 40), imageField("cmdIcon", 150), + imageField("secondaryImage", 40), + imageField("menuCommandSecondaryImage", 40), + imageField("menuSubMenuSecondaryImage", 40), imageField("appIcon", 50), imageField("graphic", 410), imageField("alertIcon", 225), @@ -106,7 +113,11 @@ let textbuttonsWithGraphicCapabilities = { textField("templateTitle", 50), textField("menuName"), textField("secondaryText"), - textField("tertiaryText") + textField("tertiaryText"), + textField("menuCommandSecondaryText"), + textField("menuCommandTertiaryText"), + textField("menuSubMenuSecondaryText"), + textField("menuSubMenuTertiaryText") ], "imageFields": [ imageField("choiceImage", 40), @@ -118,6 +129,9 @@ let textbuttonsWithGraphicCapabilities = { imageField("softButtonImage", 50), imageField("menuIcon", 40), imageField("cmdIcon", 150), + imageField("secondaryImage", 40), + imageField("menuCommandSecondaryImage", 40), + imageField("menuSubMenuSecondaryImage", 40), imageField("appIcon", 50), imageField("graphic", 410), imageField("alertIcon", 225), @@ -165,7 +179,11 @@ let capabilities = { textField("subtleAlertSoftButtonText"), textField("menuName"), textField("secondaryText"), - textField("tertiaryText") + textField("tertiaryText"), + textField("menuCommandSecondaryText"), + textField("menuCommandTertiaryText"), + textField("menuSubMenuSecondaryText"), + textField("menuSubMenuTertiaryText") ], "imageFields": [ imageField("choiceImage", 40), @@ -173,6 +191,9 @@ let capabilities = { imageField("softButtonImage", 50), imageField("menuIcon", 40), imageField("cmdIcon", 150), + imageField("secondaryImage", 40), + imageField("menuCommandSecondaryImage", 40), + imageField("menuSubMenuSecondaryImage", 40), imageField("appIcon", 50), imageField("graphic", 360), imageField("alertIcon", 225), @@ -233,7 +254,11 @@ let capabilities = { textField("subtleAlertSoftButtonText"), textField("menuName"), textField("secondaryText"), - textField("tertiaryText") + textField("tertiaryText"), + textField("menuCommandSecondaryText"), + textField("menuCommandTertiaryText"), + textField("menuSubMenuSecondaryText"), + textField("menuSubMenuTertiaryText") ], "imageFields": [ imageField("choiceImage", 40), @@ -245,6 +270,9 @@ let capabilities = { imageField("softButtonImage", 50), imageField("menuIcon", 40), imageField("cmdIcon", 150), + imageField("secondaryImage", 40), + imageField("menuCommandSecondaryImage", 40), + imageField("menuSubMenuSecondaryImage", 40), imageField("appIcon", 50), imageField("graphic", 410), imageField("alertIcon", 225), @@ -301,7 +329,11 @@ let capabilities = { textField("templateTitle", 50), textField("menuName"), textField("secondaryText"), - textField("tertiaryText") + textField("tertiaryText"), + textField("menuCommandSecondaryText"), + textField("menuCommandTertiaryText"), + textField("menuSubMenuSecondaryText"), + textField("menuSubMenuTertiaryText") ], "imageFields": [ imageField("choiceImage", 40), @@ -313,6 +345,9 @@ let capabilities = { imageField("softButtonImage", 50), imageField("menuIcon", 40), imageField("cmdIcon", 150), + imageField("secondaryImage", 40), + imageField("menuCommandSecondaryImage", 40), + imageField("menuSubMenuSecondaryImage", 40), imageField("appIcon", 50), imageField("graphic", 915, 490), imageField("alertIcon", 225), @@ -348,7 +383,11 @@ let capabilities = { textField("templateTitle", 50), textField("menuName"), textField("secondaryText"), - textField("tertiaryText") + textField("tertiaryText"), + textField("menuCommandSecondaryText"), + textField("menuCommandTertiaryText"), + textField("menuSubMenuSecondaryText"), + textField("menuSubMenuTertiaryText") ], "imageFields": [ imageField("choiceImage", 40), @@ -360,6 +399,9 @@ let capabilities = { imageField("softButtonImage", 50), imageField("menuIcon", 40), imageField("cmdIcon", 150), + imageField("secondaryImage", 40), + imageField("menuCommandSecondaryImage", 40), + imageField("menuSubMenuSecondaryImage", 40), imageField("appIcon", 50), imageField("graphic", 480), imageField("secondaryGraphic", 480), @@ -396,12 +438,19 @@ let capabilities = { textField("templateTitle", 50), textField("menuName"), textField("secondaryText"), - textField("tertiaryText") + textField("tertiaryText"), + textField("menuCommandSecondaryText"), + textField("menuCommandTertiaryText"), + textField("menuSubMenuSecondaryText"), + textField("menuSubMenuTertiaryText") ], "imageFields": [ imageField("choiceImage", 40), imageField("menuIcon", 40), imageField("cmdIcon", 150), + imageField("secondaryImage", 40), + imageField("menuCommandSecondaryImage", 40), + imageField("menuSubMenuSecondaryImage", 40), imageField("appIcon", 50), imageField("graphic", 915, 490), imageField("alertIcon", 225), @@ -429,7 +478,11 @@ let capabilities = { textField("templateTitle", 50), textField("menuName"), textField("secondaryText"), - textField("tertiaryText") + textField("tertiaryText"), + textField("menuCommandSecondaryText"), + textField("menuCommandTertiaryText"), + textField("menuSubMenuSecondaryText"), + textField("menuSubMenuTertiaryText") ], "imageFields": [ imageField("choiceImage", 40), @@ -441,6 +494,9 @@ let capabilities = { imageField("softButtonImage", 50), imageField("menuIcon", 40), imageField("cmdIcon", 150), + imageField("secondaryImage", 40), + imageField("menuCommandSecondaryImage", 40), + imageField("menuSubMenuSecondaryImage", 40), imageField("appIcon", 50), imageField("alertIcon", 225), imageField("subtleAlertIcon", 225) @@ -475,7 +531,11 @@ let capabilities = { textField("templateTitle", 50), textField("menuName"), textField("secondaryText"), - textField("tertiaryText") + textField("tertiaryText"), + textField("menuCommandSecondaryText"), + textField("menuCommandTertiaryText"), + textField("menuSubMenuSecondaryText"), + textField("menuSubMenuTertiaryText") ], "imageFields": [ imageField("choiceImage", 40), @@ -487,6 +547,9 @@ let capabilities = { imageField("softButtonImage", 50), imageField("menuIcon", 40), imageField("cmdIcon", 150), + imageField("secondaryImage", 40), + imageField("menuCommandSecondaryImage", 40), + imageField("menuSubMenuSecondaryImage", 40), imageField("appIcon", 50), imageField("alertIcon", 225), imageField("subtleAlertIcon", 225) @@ -555,7 +618,7 @@ const mainWindowTypeCapability = { } const dynamicUpdateCapabilities = { - supportedDynamicImageFieldNames: ["subMenuIcon", "menuIcon"], + supportedDynamicImageFieldNames: ["subMenuIcon", "menuIcon", "secondaryImage"], supportsDynamicSubMenus: true } diff --git a/src/js/Controllers/UIController.js b/src/js/Controllers/UIController.js index cc4cec1b5..187f2ef39 100644 --- a/src/js/Controllers/UIController.js +++ b/src/js/Controllers/UIController.js @@ -124,7 +124,8 @@ class UIController { rpc.params.appID, rpc.params.cmdID, rpc.params.menuParams, - rpc.params.cmdIcon + rpc.params.cmdIcon, + rpc.params.secondaryImage )) ValidateImages([rpc.params.cmdIcon]).then( @@ -148,7 +149,8 @@ class UIController { rpc.params.menuID, rpc.params.menuParams, rpc.params.menuIcon, - rpc.params.menuLayout + rpc.params.menuLayout, + rpc.params.secondaryImage )) ValidateImages([rpc.params.menuIcon]).then( diff --git a/src/js/HScrollMenuItem.js b/src/js/HScrollMenuItem.js index 9f2701055..400b6febb 100644 --- a/src/js/HScrollMenuItem.js +++ b/src/js/HScrollMenuItem.js @@ -8,11 +8,13 @@ export default class HScrollMenuItem extends React.Component { render() { const { menuItem } = this.props; var fill = this.props.theme ? "#FFFFFF" : "#000000"; - var deviceName = menuItem.devicename; var warningText = "Driver Distraction Disabled"; - var headerText = menuItem.enabled === false ? warningText : deviceName - var header = menuItem.enabled === false || deviceName; - var header_html = (header) ? + var deviceName = menuItem.devicename; + var tertiaryText = menuItem.tertiaryText; + var useHeader = menuItem.enabled === false || deviceName || tertiaryText; + var headerText = menuItem.enabled === false ? warningText + : tertiaryText ? tertiaryText : deviceName; + var header_html = (useHeader) ? (

{ headerText }

) @@ -38,6 +40,29 @@ export default class HScrollMenuItem extends React.Component { ) : null; + let secondaryImage = menuItem.secondaryImage ? ( + (menuItem.secondaryImage.imageType === "STATIC") + ? + : + ) : null; + + let secondaryText = menuItem.secondaryText ? ( +

{menuItem.secondaryText}

+ ) : null; + + let secondaryTextAndGraphic = (secondaryImage || secondaryText) ? ( +
+ { secondaryText } + { secondaryImage } +
+ ) : null; + return (

{menuItem.name}

+ { secondaryTextAndGraphic }
{subMenuIndicator} diff --git a/src/js/VScrollMenuItem.js b/src/js/VScrollMenuItem.js index 968bc6a1e..c8178f672 100644 --- a/src/js/VScrollMenuItem.js +++ b/src/js/VScrollMenuItem.js @@ -18,7 +18,10 @@ export default class VScrollMenuItem extends React.Component { } var secondaryText = this.props.enabled === false ? - "Driver Distraction Disabled" : this.props.menuItem.info; + "Driver Distraction Disabled" : this.props.menuItem.info ? + this.props.menuItem.info : this.props.menuItem.secondaryText; + + var tertiaryText = this.props.enabled ? this.props.menuItem.tertiaryText : "" ; return ( {this.props.menuItem.name}

{secondaryText}

+
+ +

{tertiaryText}

+
+ {subMenuIndicator} diff --git a/src/js/actions.js b/src/js/actions.js index d0a21e1fc..491e5f123 100644 --- a/src/js/actions.js +++ b/src/js/actions.js @@ -86,13 +86,14 @@ export const setAppIcon = (appID, icon) => { } } -export const addCommand = (appID, cmdID, menuParams, cmdIcon) => { +export const addCommand = (appID, cmdID, menuParams, cmdIcon, secondaryImage) => { return { type: Actions.ADD_COMMAND, appID: appID, cmdID: cmdID, menuParams: menuParams, - cmdIcon: cmdIcon + cmdIcon: cmdIcon, + secondaryImage: secondaryImage } } @@ -104,14 +105,15 @@ export const deleteCommand = (appID, cmdID) => { } } -export const addSubMenu = (appID, menuID, menuParams, icon, menuLayout) => { +export const addSubMenu = (appID, menuID, menuParams, icon, menuLayout, secondaryImage) => { return { type: Actions.ADD_SUB_MENU, appID: appID, menuID: menuID, menuParams: menuParams, subMenuIcon: icon, - menuLayout: menuLayout + menuLayout: menuLayout, + secondaryImage: secondaryImage } } diff --git a/src/js/containers/Menu.js b/src/js/containers/Menu.js index d562e4cb7..d293f498d 100644 --- a/src/js/containers/Menu.js +++ b/src/js/containers/Menu.js @@ -17,6 +17,7 @@ const mapStateToProps = (state) => { var hidden = (ddState === true && index >= menuLength) ? true : false; var link = state.ui[activeApp].displayLayout var enabled = true + var secondaryImage; if (command.subMenu) { link = '/inapplist' if (ddState === true && menuDepth === 1) { @@ -28,6 +29,13 @@ const mapStateToProps = (state) => { uiController.onUpdateSubMenu(activeApp, command.menuID); } } + if (command.secondaryImage && command.secondaryImage.value) { + secondaryImage = { + value: command.secondaryImage.value, + imageType: command.secondaryImage.imageType, + isTemplate: command.secondaryImage.isTemplate + } + } return { cmdID: command.cmdID, name: command.menuName, @@ -38,7 +46,10 @@ const mapStateToProps = (state) => { link: link, menuID: command.menuID, hidden: hidden, - enabled: enabled + enabled: enabled, + secondaryText: command.secondaryText, + tertiaryText: command.tertiaryText, + secondaryImage: secondaryImage } }) return {data: data, theme: theme} @@ -71,4 +82,4 @@ export const HMenu = connect( mapDispatchToProps )(HScrollMenu) -export default VMenu \ No newline at end of file +export default VMenu diff --git a/src/js/containers/SubMenu.js b/src/js/containers/SubMenu.js index e8f884e1d..54b73a5d4 100644 --- a/src/js/containers/SubMenu.js +++ b/src/js/containers/SubMenu.js @@ -22,9 +22,17 @@ const mapStateToProps = (state) => { if (app.isPerformingInteraction && app.choices) { var piData = app.choices.map((choice, index) => { var hidden = false; + var secondaryImage = undefined; if (ddState === true && index >= menuLength) { hidden = true; } + if (choice.secondaryImage && choice.secondaryImage.value) { + secondaryImage = { + value: choice.secondaryImage.value, + imageType: choice.secondaryImage.imageType, + isTemplate: choice.secondaryImage.isTemplate + } + } return { appID: activeApp, cmdID: choice.choiceID, @@ -33,7 +41,10 @@ const mapStateToProps = (state) => { imageType: choice.image ? choice.image.imageType : undefined, isTemplate: choice.image ? choice.image.isTemplate : undefined, link: link, - hidden: hidden + hidden: hidden, + secondaryText: choice.secondaryText, + tertiaryText: choice.tertiaryText, + secondaryImage: secondaryImage } }) return { @@ -54,6 +65,7 @@ const mapStateToProps = (state) => { // Check DD state and set hidden param var hidden = false; var enabled = true; + var secondaryImage = undefined; if (ddState === true && index >= menuLength) { hidden = true; } @@ -69,6 +81,14 @@ const mapStateToProps = (state) => { } else { link = state.ui[activeApp].displayLayout } + if (command.secondaryImage && command.secondaryImage.value) { + secondaryImage = { + value: command.secondaryImage.value, + imageType: command.secondaryImage.imageType, + isTemplate: command.secondaryImage.isTemplate + } + } + return { appID: activeApp, cmdID: command.cmdID, @@ -79,7 +99,10 @@ const mapStateToProps = (state) => { link: link, hidden: hidden, enabled: enabled, - menuID: command.menuID + menuID: command.menuID, + secondaryText: command.secondaryText, + tertiaryText: command.tertiaryText, + secondaryImage: secondaryImage } }) return {data: subMenuData, isPerformingInteraction: false, theme: theme} diff --git a/src/js/reducers.js b/src/js/reducers.js index 3464750c8..361ffd86c 100644 --- a/src/js/reducers.js +++ b/src/js/reducers.js @@ -336,12 +336,16 @@ function ui(state = {}, action) { var menuParams = action.menuParams var cmdID = action.cmdID var cmdIcon = action.cmdIcon + var secondaryImage = action.secondaryImage menuItem = { cmdID: cmdID, parentID: menuParams.parentID, position: menuParams.position, menuName: menuParams.menuName, - cmdIcon: cmdIcon + secondaryText: menuParams.secondaryText, + tertiaryText: menuParams.tertiaryText, + cmdIcon: cmdIcon, + secondaryImage: secondaryImage } if (menuParams.parentID) { /*var subMenu = menu.find((command) => { @@ -371,7 +375,10 @@ function ui(state = {}, action) { parentID: action.menuParams.parentID, position: action.menuParams.position, menuName: action.menuParams.menuName, + secondaryText: action.menuParams.secondaryText, + tertiaryText: action.menuParams.tertiaryText, cmdIcon: action.subMenuIcon, + secondaryImage: action.secondaryImage, subMenu: [], menuLayout: action.menuLayout ? action.menuLayout : app.menuLayout };