Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Main Menu UI Updates #344

Merged
merged 7 commits into from
Feb 11, 2021
Merged

Main Menu UI Updates #344

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
6bbbfc8
Main Menu UI Updates
Jack-Byrne Jan 6, 2021
036539b
Line break
Jack-Byrne Jan 6, 2021
012a3f8
Update Capabilities for secondaryImage
Jack-Byrne Jan 13, 2021
d310be1
Apply suggestions from code review
Jack-Byrne Jan 22, 2021
afe3c5e
Update text and image capabilities
Jack-Byrne Jan 22, 2021
c70c7d3
Make updates to menu Tiles layout
Jack-Byrne Jan 26, 2021
21b28ba
Fix secondary image sizing
Jack-Byrne Feb 2, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions src/css/components/_v-scroll-menu-item.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

img {
margin:auto;
Expand Down Expand Up @@ -56,6 +57,8 @@
&__name {
flex: 6;
margin-left: 2%;
display: flex;
flex-direction: column;
}

&__arrow {
Expand Down
11 changes: 10 additions & 1 deletion src/js/Controllers/DisplayCapabilities.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,7 @@ let textWithGraphicCapabilities = {
imageField("choiceImage", 40),
imageField("menuIcon", 40),
imageField("cmdIcon", 150),
imageField("secondaryImage", 40),
imageField("appIcon", 50),
imageField("graphic", 410),
imageField("alertIcon", 225),
Expand Down Expand Up @@ -118,6 +119,7 @@ let textbuttonsWithGraphicCapabilities = {
imageField("softButtonImage", 50),
imageField("menuIcon", 40),
imageField("cmdIcon", 150),
imageField("secondaryImage", 40),
imageField("appIcon", 50),
imageField("graphic", 410),
imageField("alertIcon", 225),
Expand Down Expand Up @@ -173,6 +175,7 @@ let capabilities = {
imageField("softButtonImage", 50),
imageField("menuIcon", 40),
imageField("cmdIcon", 150),
imageField("secondaryImage", 40),
imageField("appIcon", 50),
imageField("graphic", 360),
imageField("alertIcon", 225),
Expand Down Expand Up @@ -245,6 +248,7 @@ let capabilities = {
imageField("softButtonImage", 50),
imageField("menuIcon", 40),
imageField("cmdIcon", 150),
imageField("secondaryImage", 40),
imageField("appIcon", 50),
imageField("graphic", 410),
imageField("alertIcon", 225),
Expand Down Expand Up @@ -313,6 +317,7 @@ let capabilities = {
imageField("softButtonImage", 50),
imageField("menuIcon", 40),
imageField("cmdIcon", 150),
imageField("secondaryImage", 40),
imageField("appIcon", 50),
imageField("graphic", 915, 490),
imageField("alertIcon", 225),
Expand Down Expand Up @@ -360,6 +365,7 @@ let capabilities = {
imageField("softButtonImage", 50),
imageField("menuIcon", 40),
imageField("cmdIcon", 150),
imageField("secondaryImage", 40),
imageField("appIcon", 50),
imageField("graphic", 480),
imageField("secondaryGraphic", 480),
Expand Down Expand Up @@ -402,6 +408,7 @@ let capabilities = {
imageField("choiceImage", 40),
imageField("menuIcon", 40),
imageField("cmdIcon", 150),
imageField("secondaryImage", 40),
imageField("appIcon", 50),
imageField("graphic", 915, 490),
imageField("alertIcon", 225),
Expand Down Expand Up @@ -441,6 +448,7 @@ let capabilities = {
imageField("softButtonImage", 50),
imageField("menuIcon", 40),
imageField("cmdIcon", 150),
imageField("secondaryImage", 40),
imageField("appIcon", 50),
imageField("alertIcon", 225),
imageField("subtleAlertIcon", 225)
Expand Down Expand Up @@ -487,6 +495,7 @@ let capabilities = {
imageField("softButtonImage", 50),
imageField("menuIcon", 40),
imageField("cmdIcon", 150),
imageField("secondaryImage", 40),
imageField("appIcon", 50),
imageField("alertIcon", 225),
imageField("subtleAlertIcon", 225)
Expand Down Expand Up @@ -555,7 +564,7 @@ const mainWindowTypeCapability = {
}

const dynamicUpdateCapabilities = {
supportedDynamicImageFieldNames: ["subMenuIcon", "menuIcon"],
supportedDynamicImageFieldNames: ["subMenuIcon", "menuIcon", "secondaryImage"],
supportsDynamicSubMenus: true
}

Expand Down
6 changes: 4 additions & 2 deletions src/js/Controllers/UIController.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand All @@ -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(
Expand Down
16 changes: 15 additions & 1 deletion src/js/VScrollMenuItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,11 @@ 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 === false ?
"" : this.props.menuItem.tertiaryText;
Jack-Byrne marked this conversation as resolved.
Show resolved Hide resolved

return (
<Link
Expand All @@ -39,6 +43,16 @@ export default class VScrollMenuItem extends React.Component {
<p className="t-large t-light th-f-color">{this.props.menuItem.name}</p>
<p className="t-small t-light th-f-color-secondary">{secondaryText}</p>
</div>
<div class="vscrollmenu-item__image">
<SoftButtonImage
image={this.props.menuItem.secondaryImage ? this.props.menuItem.secondaryImage.value : null}
imageType={this.props.menuItem.secondaryImage ? this.props.menuItem.secondaryImage.imageType : null}
isTemplate={this.props.menuItem.secondaryImage ? this.props.menuItem.secondaryImage.isTemplate : null}
theme={this.props.theme}
/>
<p className="t-small t-light th-f-color-secondary">{tertiaryText}</p>
</div>

{subMenuIndicator}
</div>
</Link>
Expand Down
10 changes: 6 additions & 4 deletions src/js/actions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
}

Expand All @@ -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
}
}

Expand Down
13 changes: 12 additions & 1 deletion src/js/containers/Menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = undefined;
Jack-Byrne marked this conversation as resolved.
Show resolved Hide resolved
if (command.subMenu) {
link = '/inapplist'
if (ddState === true && menuDepth === 1) {
Expand All @@ -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,
Expand All @@ -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}
Expand Down
27 changes: 25 additions & 2 deletions src/js/containers/SubMenu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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 {
Expand All @@ -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;
}
Expand All @@ -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,
Expand All @@ -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}
Expand Down
9 changes: 8 additions & 1 deletion src/js/reducers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down Expand Up @@ -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
};
Expand Down