This commit is contained in:
2019-04-17 18:57:46 +00:00
parent 23f0c72d39
commit 05dc35b6d6
3 changed files with 84 additions and 87 deletions

View File

@@ -31,6 +31,7 @@ All platforms and browsers
- IMPLEMENTED / NOT TESTED: Login, doesn't have any ui if failed login, maybe a red frowny face icon? :)
- IMPLEMENTED / NOT TESTED: need clear buttons on pw and login
- IMPLEMENTED / NOT TESTED: Numeric input fields don't give numeric keyboard
- Navigation guard: navigate away with unsaved changes should warn and prevent but have option to continue anyway
- Save on broken rules in Widget edit form it's not clear that save does nothing if there are broken rules. Button should be deactivated or there should be a message if you click on it or something.
- Red outline and inactive seems ideal
- Save button placement, not sure I like having to scroll down the page to save on small format screens where there is potentially going to be a *lot* of scrolling needed which hides the info box etc
@@ -70,6 +71,22 @@ All platforms and browsers
- Move help menu item in shell into menu as bottom item instead
- TODO: CODE THIS FOR THIS MENU ISSUE
- Just added ability to send info to store that is picked up by nav menu
- REQUIREMENTS
- Global Help link on *every* page
- will change on each page
- Global Logout link on every page
- Unchanging
- Probably more global page items
- Menu supports dividers
- Menu has a context section and a global section
- One set of menu items only not two separate ones internally
- Context items are at the top, then a divider, then the global ones at the bottom
- Caller sets if it's contextual or not to adapt colour of app bar, but otherwise it's the same exact menu all the time
- Caller should be able to set items colour so (for example) Save can be redded out when not savable
- Caller should be able to set the ENABLED property so it can handle different states
- Maybe a change item event that takes a key and updates it rather than refreshing the whole menu basis on state change?
- I.E. so that can change save button enabled and colour when state of form broken rules changes?
iPad

View File

@@ -56,35 +56,23 @@
</v-list-tile>
</template>
</v-list>-->
<!-- MAIN MENU -->
<v-list v-if="appBar.isMain">
<v-list-tile
v-for="item in appBar.mainMenuItems"
:key="item.key"
@click="$gzevent.$emit('menu-click',item.key)"
>
<v-list-tile-action>
<v-icon v-if="item.icon">{{ "fa-" + item.icon }}</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
<!-- CONTEXT MENU -->
<v-list v-if="!appBar.isMain">
<v-list-tile
v-for="item in appBar.contextMenuItems"
:key="item.key"
@click="$gzevent.$emit('menu-click',item.key)"
>
<v-list-tile-action>
<v-icon v-if="item.icon">{{ "fa-" + item.icon }}</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<!-- MENU -->
<v-list>
<template v-for="(item,index) in appBar.menuItems">
<v-subheader v-if="item.header" :key="index">{{ item.header }}</v-subheader>
<v-divider v-else-if="item.divider" :key="index" :inset="item.inset"></v-divider>
<v-list-tile v-else :key="item.key" @click="$gzevent.$emit('menu-click',item.key)">
<v-list-tile-action>
<v-icon v-if="item.icon">{{ "fa-" + item.icon }}</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</template>
</v-list>
</v-menu>
</v-toolbar>
@@ -122,75 +110,67 @@ export default {
isMain: true,
icon: "",
title: "",
contextMenuItems: [],
mainMenuItems: []
},
items: [
{ header: "Today" },
{
avatar: "https://cdn.vuetifyjs.com/images/lists/1.jpg",
title: "Brunch this weekend?",
subtitle:
"<span class='text--primary'>Ali Connors</span> &mdash; I'll be in your neighborhood doing errands this weekend. Do you want to hang out?"
},
{ divider: true, inset: true },
{
avatar: "https://cdn.vuetifyjs.com/images/lists/2.jpg",
title: 'Summer BBQ <span class="grey--text text--lighten-1">4</span>',
subtitle:
"<span class='text--primary'>to Alex, Scott, Jennifer</span> &mdash; Wish I could come, but I'm out of town this weekend."
},
{ divider: true, inset: true },
{
avatar: "https://cdn.vuetifyjs.com/images/lists/3.jpg",
title: "Oui oui",
subtitle:
"<span class='text--primary'>Sandra Adams</span> &mdash; Do you have Paris recommendations? Have you ever been?"
}
]
menuItems: []
}
};
},
created() {
//////////////////////////////////
// MENU DISPLAY EVENT HANDLER
//subscribe to menu changes
//
var that = this;
this.$gzevent.$on("menu-change", function(ctx) {
that.appBar.isMain = ctx.isMain;
that.appBar.icon = ctx.icon;
that.appBar.title = ctx.title;
if (!ctx.isMain) {
//context menu so handle accordingly
that.appBar.contextMenuItems = ctx.contextMenuItems
? ctx.contextMenuItems
: [];
} else {
//main menu, put in the standard items that always show
that.appBar.mainMenuItems = [
{
title: this.$gzlocale.get("Logout"),
icon: "sign-out-alt",
key: "app:logout"
}
];
//If other items specified add them above the standard ones
var hasSpecialHelpLink = false;
if (ctx.mainMenuItems) {
that.appBar.mainMenuItems = ctx.mainMenuItems.concat(
that.appBar.mainMenuItems
);
}
that.appBar.menuItems = [];
//Now see if there is a help item already that is contextual or if not then add a generic link to the start of docs
TODO: check here if there is already an item that has a key that starts with "app:help:" instead of using the specialHelpLInk
if (!hasSpecialHelpLink) {
that.appBar.mainMenuItems.push({
title: this.$gzlocale.get("MenuHelp"),
icon: "question-circle",
key: "app:help:index.html"
});
}
//CONTEXT TOP PORTION
//populate the context portion of the menu so handle accordingly
if (ctx.menuItems) {
that.appBar.menuItems = ctx.menuItems;
//DIVIDER
//Insert the devider between context and global items
that.appBar.menuItems.push({ divider: true, inset: true });
}
});
//GLOBAL BOTTOM PORTION
//Global sub-heading
//Likely won't want this but here anyway to see
that.appBar.menuItems.push({ header: "GLOBAL" });
//global menu items
//Logout
that.appBar.menuItems.push({
title: this.$gzlocale.get("Logout"),
icon: "sign-out-alt",
key: "app:logout"
});
//Help
//There may already be a context help so double check that first if not then add a generic link to the start of docs
var helpItem = that.$_.find(that.appBar.menuItems, function(o) {
if (!o.key) {
return false;
}
return o.key.startsWith("app:help:");
});
if (!helpItem) {
that.appBar.menuItems.push({
title: this.$gzlocale.get("MenuHelp"),
icon: "question-circle",
key: "app:help:index.html"
});
}
}); //END OF EVENT
//////////////////////////////////
//CLICK EVENT HANDLER
//
this.$gzevent.$on("menu-click", function(key) {
if (key.startsWith("app:")) {
if (key.startsWith("app:help:")) {

View File

@@ -179,7 +179,7 @@ export default {
isMain: false,
icon: "fa-splotch",
title: this.$gzlocale.get("Widget"),
contextMenuItems: [
menuItems: [
{
title: this.$gzlocale.get("Duplicate"),
icon: "clone",