From d56819ddd58d586415c416613bb651c23c8dffc3 Mon Sep 17 00:00:00 2001 From: Elvanos Date: Thu, 28 Sep 2023 23:45:18 +0200 Subject: [PATCH] added top bar menus + multiple fixes/tweaks --- interfaces/I_appMenusDataList.ts | 55 ++++++++ quasar.config.js | 3 +- .../AppControlMenus/AppControlMenus.vue | 37 +++++ .../AppControlSingleMenu.vue | 130 ++++++++++++++++++ .../AppControlMenus/_data/helpInfo.ts | 81 +++++++++++ .../AppControlMenus/_data/project.ts | 116 ++++++++++++++++ src/components/AppControlMenus/_data/tools.ts | 75 ++++++++++ .../FantasiaMascotImage.vue | 3 + .../GlobalWindowButtons.vue | 21 ++- src/css/globals/htmlAdjustments.scss | 30 ++++ .../globals/quasarComponentsAdjustments.scss | 10 ++ src/css/quasar.variables.scss | 16 ++- .../components/AppControlMenus/T_helpInfo.ts | 12 ++ .../components/AppControlMenus/T_project.ts | 15 ++ .../components/AppControlMenus/T_tools.ts | 11 ++ src/i18n/en-US/index.ts | 12 ++ src/i18n/externalFileLoader.ts | 9 ++ src/layouts/MainLayout.vue | 26 +++- src/pages/IndexPage.vue | 10 +- src/scripts/appInfo/toggleDevTools.ts | 3 + 20 files changed, 666 insertions(+), 9 deletions(-) create mode 100644 interfaces/I_appMenusDataList.ts create mode 100644 src/components/AppControlMenus/AppControlMenus.vue create mode 100644 src/components/AppControlMenus/AppControlSingleMenu/AppControlSingleMenu.vue create mode 100644 src/components/AppControlMenus/_data/helpInfo.ts create mode 100644 src/components/AppControlMenus/_data/project.ts create mode 100644 src/components/AppControlMenus/_data/tools.ts create mode 100644 src/i18n/en-US/components/AppControlMenus/T_helpInfo.ts create mode 100644 src/i18n/en-US/components/AppControlMenus/T_project.ts create mode 100644 src/i18n/en-US/components/AppControlMenus/T_tools.ts create mode 100644 src/i18n/externalFileLoader.ts create mode 100644 src/scripts/appInfo/toggleDevTools.ts diff --git a/interfaces/I_appMenusDataList.ts b/interfaces/I_appMenusDataList.ts new file mode 100644 index 0000000..00db47e --- /dev/null +++ b/interfaces/I_appMenusDataList.ts @@ -0,0 +1,55 @@ +export interface I_appMenusDataList { + + /** + * Title of the main menu button + */ + title: string + + /** + * Data contents of the menu dropdown + */ + data:{ + /** + * Determines if the item shows as a separator or full-fledged menu item + */ + mode: 'separator' | 'item' + + /** + * Title of the menu item + */ + text?: string + + /** + * Icon/Avatar of the menu item + */ + icon?: string + + /** + * Trigger functionality of the item on click + */ + trigger?: (() => unknown) + + /** + * Conditions to show the menu item as active + */ + conditions?: boolean + + /** + *Special color class for the item + */ + specialColor?: string + + /** + * Determined if the item contains a submenu and its inner data + */ + submenu?: { + mode: 'separator' | 'item' + text?: string + icon?: string + trigger?: (() => unknown) + conditions?: boolean + specialColor?: string + }[] + + }[] +} diff --git a/quasar.config.js b/quasar.config.js index 48e386b..b6df600 100644 --- a/quasar.config.js +++ b/quasar.config.js @@ -101,6 +101,7 @@ module.exports = configure(function (/* ctx */) { framework: { config: { ripple: false, + dark: true, }, // iconSet: 'material-icons', // Quasar icon set @@ -114,7 +115,7 @@ module.exports = configure(function (/* ctx */) { // directives: [], // Quasar plugins - plugins: [], + plugins: ["Dialog"], }, // animations: 'all', // --- includes all animations diff --git a/src/components/AppControlMenus/AppControlMenus.vue b/src/components/AppControlMenus/AppControlMenus.vue new file mode 100644 index 0000000..842f2db --- /dev/null +++ b/src/components/AppControlMenus/AppControlMenus.vue @@ -0,0 +1,37 @@ + + + + + diff --git a/src/components/AppControlMenus/AppControlSingleMenu/AppControlSingleMenu.vue b/src/components/AppControlMenus/AppControlSingleMenu/AppControlSingleMenu.vue new file mode 100644 index 0000000..8dfbdcf --- /dev/null +++ b/src/components/AppControlMenus/AppControlSingleMenu/AppControlSingleMenu.vue @@ -0,0 +1,130 @@ + + + + + diff --git a/src/components/AppControlMenus/_data/helpInfo.ts b/src/components/AppControlMenus/_data/helpInfo.ts new file mode 100644 index 0000000..265db4d --- /dev/null +++ b/src/components/AppControlMenus/_data/helpInfo.ts @@ -0,0 +1,81 @@ +import { i18n } from 'app/src/i18n/externalFileLoader' + +import { I_appMenusDataList } from 'app/interfaces/I_appMenusDataList' + +// TODO - add functionality for all buttons and conditions +import { toggleDevTools } from 'app/src/scripts/appInfo/toggleDevTools' + +export const helpInfo: I_appMenusDataList = { + title: i18n.global.t('AppControlMenus.helpInfo.title'), + data: [ + { + mode: 'item', + text: i18n.global.t('AppControlMenus.helpInfo.items.showKeybindsCheatsheet'), + icon: 'mdi-keyboard-settings', + submenu: undefined, + trigger: undefined, + conditions: true, + specialColor: undefined + }, + { + mode: 'item', + text: i18n.global.t('AppControlMenus.helpInfo.items.advancedSearchGuide'), + icon: 'mdi-file-question', + submenu: undefined, + trigger: undefined, + conditions: true, + specialColor: undefined + }, + { + mode: 'item', + text: i18n.global.t('AppControlMenus.helpInfo.items.tipsTricksTrivia'), + icon: 'mdi-fire-alert', + submenu: undefined, + trigger: undefined, + conditions: true, + specialColor: undefined + }, + { + mode: 'separator' + }, + { + mode: 'item', + text: i18n.global.t('AppControlMenus.helpInfo.items.changelog'), + icon: 'mdi-clipboard-text', + submenu: undefined, + trigger: undefined, + conditions: true, + specialColor: undefined + }, + { + mode: 'item', + text: i18n.global.t('AppControlMenus.helpInfo.items.aboutFantsiaArchive'), + icon: 'mdi-information-variant', + submenu: undefined, + trigger: undefined, + conditions: true, + specialColor: undefined + }, + { + mode: 'item', + text: i18n.global.t('AppControlMenus.helpInfo.items.license'), + icon: 'mdi-script-text-outline', + submenu: undefined, + trigger: undefined, + conditions: true, + specialColor: undefined + }, + { + mode: 'separator' + }, + { + mode: 'item', + text: i18n.global.t('AppControlMenus.helpInfo.items.toggleDeveloperTools'), + icon: 'mdi-code-tags', + submenu: undefined, + trigger: toggleDevTools, + conditions: true, + specialColor: undefined + } + ] +} diff --git a/src/components/AppControlMenus/_data/project.ts b/src/components/AppControlMenus/_data/project.ts new file mode 100644 index 0000000..7702877 --- /dev/null +++ b/src/components/AppControlMenus/_data/project.ts @@ -0,0 +1,116 @@ +import { i18n } from 'app/src/i18n/externalFileLoader' + +import { I_appMenusDataList } from 'app/interfaces/I_appMenusDataList' + +// TODO - add functionality for all buttons and conditions + +export const project: I_appMenusDataList = { + title: i18n.global.t('AppControlMenus.project.title'), + data: [ + { + mode: 'item', + text: i18n.global.t('AppControlMenus.project.items.newProject'), + icon: 'mdi-plus', + submenu: undefined, + trigger: undefined, + conditions: true, + specialColor: undefined + }, + { + mode: 'separator' + }, + { + mode: 'item', + text: i18n.global.t('AppControlMenus.project.items.saveProject'), + icon: 'mdi-package-variant-closed', + submenu: undefined, + trigger: undefined, + conditions: true, + specialColor: undefined + }, + { + mode: 'item', + text: i18n.global.t('AppControlMenus.project.items.loadProject'), + icon: 'mdi-package-variant', + submenu: undefined, + trigger: undefined, + conditions: true, + specialColor: undefined + }, + { + mode: 'separator' + }, + { + mode: 'item', + text: i18n.global.t('AppControlMenus.project.items.exportProjectDocuments'), + icon: 'mdi-database-export-outline', + submenu: undefined, + trigger: undefined, + conditions: true, + specialColor: undefined + }, + { + mode: 'separator' + }, + { + mode: 'item', + text: i18n.global.t('AppControlMenus.project.items.showProjectDashboard'), + icon: 'mdi-chart-bar', + submenu: undefined, + trigger: undefined, + conditions: true, + specialColor: undefined + }, + { + mode: 'item', + text: i18n.global.t('AppControlMenus.project.items.projectSettings'), + icon: 'mdi-book-cog-outline', + submenu: undefined, + trigger: undefined, + conditions: true, + specialColor: undefined + }, + { + mode: 'item', + text: i18n.global.t('AppControlMenus.project.items.closeProject'), + icon: 'mdi-exit-to-app', + submenu: undefined, + trigger: undefined, + conditions: true, + specialColor: undefined + }, + { + mode: 'separator' + }, + { + mode: 'item', + text: i18n.global.t('AppControlMenus.project.items.advancedProjectTools'), + icon: 'keyboard_arrow_right', + trigger: undefined, + conditions: true, + specialColor: 'accent', + submenu: [ + { + mode: 'item', + text: i18n.global.t('AppControlMenus.project.items.aptMerge'), + icon: 'mdi-folder-plus-outline', + trigger: undefined, + conditions: true, + specialColor: undefined + }, + { + mode: 'separator' + }, + { + mode: 'item', + text: i18n.global.t('AppControlMenus.project.items.aptConvertOld'), + icon: 'mdi-wrench', + trigger: undefined, + conditions: true, + specialColor: undefined + } + ] + + } + ] +} diff --git a/src/components/AppControlMenus/_data/tools.ts b/src/components/AppControlMenus/_data/tools.ts new file mode 100644 index 0000000..6dba81c --- /dev/null +++ b/src/components/AppControlMenus/_data/tools.ts @@ -0,0 +1,75 @@ +import { i18n } from 'app/src/i18n/externalFileLoader' + +import { I_appMenusDataList } from 'app/interfaces/I_appMenusDataList' + +// TODO - add functionality for all buttons and conditions + +export const tools: I_appMenusDataList = { + title: i18n.global.t('AppControlMenus.tools.title'), + data: [ + { + mode: 'item', + text: i18n.global.t('AppControlMenus.tools.items.quickAddNewDocument'), + icon: 'mdi-text-box-plus-outline', + submenu: undefined, + trigger: undefined, + conditions: true, + specialColor: undefined + }, + { + mode: 'item', + text: i18n.global.t('AppControlMenus.tools.items.quickSearchDocument'), + icon: 'mdi-database-search', + submenu: undefined, + trigger: undefined, + conditions: true, + specialColor: undefined + }, + { + mode: 'separator' + }, + { + mode: 'item', + text: i18n.global.t('AppControlMenus.tools.items.massDeleteDocument'), + icon: 'mdi-text-box-remove-outline', + submenu: undefined, + trigger: undefined, + conditions: true, + specialColor: 'secondary' + }, + { + mode: 'separator' + }, + { + mode: 'item', + text: i18n.global.t('AppControlMenus.tools.items.toggleTree'), + icon: 'mdi-page-layout-sidebar-left', + submenu: undefined, + trigger: undefined, + conditions: true, + specialColor: undefined + }, + { + mode: 'item', + text: i18n.global.t('AppControlMenus.tools.items.showNoteBoard'), + icon: 'mdi-clipboard-text-outline', + submenu: undefined, + trigger: undefined, + conditions: true, + specialColor: undefined + }, + + { + mode: 'separator' + }, + { + mode: 'item', + text: i18n.global.t('AppControlMenus.tools.items.programSettings'), + icon: 'mdi-tune', + submenu: undefined, + trigger: undefined, + conditions: true, + specialColor: undefined + } + ] +} diff --git a/src/components/FantasiaMascotImage/FantasiaMascotImage.vue b/src/components/FantasiaMascotImage/FantasiaMascotImage.vue index bfdb112..c239a0c 100644 --- a/src/components/FantasiaMascotImage/FantasiaMascotImage.vue +++ b/src/components/FantasiaMascotImage/FantasiaMascotImage.vue @@ -47,6 +47,7 @@ const props = defineProps({ type: String, default: '' }, + /** * Custom CSS string for the "height" attribute. */ @@ -54,6 +55,7 @@ const props = defineProps({ type: String, default: 'initial' }, + /** * Custom CSS string for the "width" attribute. */ @@ -103,6 +105,7 @@ const currentMascotImage = determineCurrentImage(fantasiaImageList) &__inner{ height: v-bind(height); width: v-bind(width); + user-select: none; } } diff --git a/src/components/GlobalWindowButtons/GlobalWindowButtons.vue b/src/components/GlobalWindowButtons/GlobalWindowButtons.vue index 8bc046f..eeb73fe 100644 --- a/src/components/GlobalWindowButtons/GlobalWindowButtons.vue +++ b/src/components/GlobalWindowButtons/GlobalWindowButtons.vue @@ -61,7 +61,7 @@ diff --git a/src/css/globals/htmlAdjustments.scss b/src/css/globals/htmlAdjustments.scss index d0e57c9..d30ebd7 100644 --- a/src/css/globals/htmlAdjustments.scss +++ b/src/css/globals/htmlAdjustments.scss @@ -2,3 +2,33 @@ html, body{ overflow: hidden !important; } + +body{ + &.body--light{ + /* WebKit/Blink Browsers */ + ::selection { + color: $selectTextColor_lightMode; + background: $selectBackgroundColor_lightMode; + } + + /* Gecko Browsers */ + ::-moz-selection { + color: $selectTextColor_lightMode; + background: $selectBackgroundColor_lightMode; + } + } + + &.body--dark{ + /* WebKit/Blink Browsers */ + ::selection { + color: $selectTextColor_darkMode; + background: $selectBackgroundColor_darkMode; + } + + /* Gecko Browsers */ + ::-moz-selection { + color: $selectTextColor_darkMode; + background: $selectBackgroundColor_darkMode; + } + } +} diff --git a/src/css/globals/quasarComponentsAdjustments.scss b/src/css/globals/quasarComponentsAdjustments.scss index 59e2576..c1d9fbe 100644 --- a/src/css/globals/quasarComponentsAdjustments.scss +++ b/src/css/globals/quasarComponentsAdjustments.scss @@ -11,3 +11,13 @@ background-color: $qCard-background; color: $qCard-text; } + +.q-menu--dark{ + box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12) !important; +} + + +.q-transition--slide-right-enter-active, .q-transition--slide-right-leave-active, .q-transition--slide-left-enter-active, .q-transition--slide-left-leave-active, .q-transition--slide-up-enter-active, .q-transition--slide-up-leave-active, .q-transition--slide-down-enter-active, .q-transition--slide-down-leave-active, .q-transition--jump-right-enter-active, .q-transition--jump-right-leave-active, .q-transition--jump-left-enter-active, .q-transition--jump-left-leave-active, .q-transition--jump-up-enter-active, .q-transition--jump-up-leave-active, .q-transition--jump-down-enter-active, .q-transition--jump-down-leave-active, .q-transition--fade-enter-active, .q-transition--fade-leave-active, .q-transition--scale-enter-active, .q-transition--scale-leave-active, .q-transition--rotate-enter-active, .q-transition--rotate-leave-active, .q-transition--flip-enter-active, .q-transition--flip-leave-active{ + user-select: none; + pointer-events: none; +} diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss index 03a927b..887d634 100644 --- a/src/css/quasar.variables.scss +++ b/src/css/quasar.variables.scss @@ -4,16 +4,24 @@ $primary : #d7ac47; $secondary : #f75746; -$accent : #dde4e4; +$accent : #f5f5f5; $dark : #18303a; $dark-page : #303742; +$dark-lighter: #234655; + $positive : #35a14e; $negative : #c10015; $info : lighten(#d7ac47, 35); $warning : #f2c037; +// GLOBALS - GENERAL SELECT +$selectTextColor_darkMode: #eedbb0; +$selectBackgroundColor_darkMode: #bb3b32; +$selectTextColor_lightMode: #eedbb0; +$selectBackgroundColor_lightMode: #aa2a21; + // QUASAR COMPONENT - Q-CARD $qCard-background: #f7eeda; $qCard-text: $dark; @@ -24,3 +32,9 @@ $qCard-border-radius: 5px; // COMPONENT - GLOBAL WINDOW BUTTONS $globalWindowButtons_height: 35px; $globalWindowButtons_color: $accent; + +// COMPONENT - APP CONTROL MENUS +$appControlMenus_bgColor: $dark-lighter; +$appControlMenus_color: $accent; +$appControlMenus_separatorColor: $primary; +$appControlMenus_singleHover: $primary; diff --git a/src/i18n/en-US/components/AppControlMenus/T_helpInfo.ts b/src/i18n/en-US/components/AppControlMenus/T_helpInfo.ts new file mode 100644 index 0000000..c05e384 --- /dev/null +++ b/src/i18n/en-US/components/AppControlMenus/T_helpInfo.ts @@ -0,0 +1,12 @@ +export default { + title: 'Help & Info', + items: { + showKeybindsCheatsheet: 'Show keybind cheatsheet', + advancedSearchGuide: 'Advanced search guide', + tipsTricksTrivia: 'Tips, Tricks & Trivia', + changelog: 'Changelog', + aboutFantsiaArchive: 'About Fantasia Archive', + license: 'License', + toggleDeveloperTools: 'Toggle developer tools' + } +} diff --git a/src/i18n/en-US/components/AppControlMenus/T_project.ts b/src/i18n/en-US/components/AppControlMenus/T_project.ts new file mode 100644 index 0000000..e8119e4 --- /dev/null +++ b/src/i18n/en-US/components/AppControlMenus/T_project.ts @@ -0,0 +1,15 @@ +export default { + title: 'Project', + items: { + newProject: 'New project', + saveProject: 'Save current project', + loadProject: 'Load existing project', + exportProjectDocuments: 'Export project/documents', + showProjectDashboard: 'Show project dashboard', + closeProject: 'Close project', + projectSettings: 'Project settings', + advancedProjectTools: 'Advanced project tools', + aptMerge: 'Merge another project into the current one', + aptConvertOld: 'Convert legacy project to FA 2.0' + } +} diff --git a/src/i18n/en-US/components/AppControlMenus/T_tools.ts b/src/i18n/en-US/components/AppControlMenus/T_tools.ts new file mode 100644 index 0000000..18d83b0 --- /dev/null +++ b/src/i18n/en-US/components/AppControlMenus/T_tools.ts @@ -0,0 +1,11 @@ +export default { + title: 'Tools', + items: { + quickAddNewDocument: 'Quick-add new document', + quickSearchDocument: 'Quick-search existing document', + massDeleteDocument: 'Mass delete documents', + toggleTree: 'Toggle hierarchical tree', + showNoteBoard: 'Show note board', + programSettings: 'Program settings' + } +} diff --git a/src/i18n/en-US/index.ts b/src/i18n/en-US/index.ts index efb95fd..21a10f2 100644 --- a/src/i18n/en-US/index.ts +++ b/src/i18n/en-US/index.ts @@ -1,3 +1,7 @@ +import T_helpInfo from './components/AppControlMenus/T_helpInfo' +import T_project from './components/AppControlMenus/T_project' +import T_tools from './components/AppControlMenus/T_tools' + export default { // GLOBAL - APP TEXTS app: { @@ -18,5 +22,13 @@ export default { resizeButton: 'Resize Down', maximizeButton: 'Maximize', close: 'Close' + }, + + // COMPONENT - APP CONTROL MENUS + AppControlMenus: { + project: T_project, + tools: T_tools, + helpInfo: T_helpInfo } + } diff --git a/src/i18n/externalFileLoader.ts b/src/i18n/externalFileLoader.ts new file mode 100644 index 0000000..b90b35f --- /dev/null +++ b/src/i18n/externalFileLoader.ts @@ -0,0 +1,9 @@ +import { createI18n } from 'vue-i18n' +import messages from 'src/i18n' + +export const i18n = createI18n({ + locale: 'en-US', + fallbackLocale: 'en-US', + legacy: false, + messages +}) diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue index 6c780ce..24a6710 100644 --- a/src/layouts/MainLayout.vue +++ b/src/layouts/MainLayout.vue @@ -1,13 +1,15 @@