0.1.4 Finalized build with last batch of fixes and added trivia support

src/App.vue

@@ -13,6 +13,7 @@ import appWindowButtons from "src/components/appHeader/AppWindowButtons.vue"
 import PouchDB from "pouchdb"
 import { OptionsStateInteface } from "./store/module-options/state"
 import { colors } from "quasar"
+import { tipsTricks } from "src/scripts/utilities/tipsTricks"
 
 @Component({
   components: {
@@ -32,6 +33,37 @@ export default class App extends BaseClass {
 
     this.loadSettings().catch(e => console.log(e))
     window.addEventListener("keydown", this.triggerKeyPush)
+    this.loadHintPopup()
+  }
+
+  popupCheck = 0
+
+  loadHintPopup () {
+    const options = this.SGET_options
+
+    // Considering there is a bit of a delay between the initial load of the store DB content, we give the program 3 attempts to load the data over 3 seconds. If no is loaded in that time, we assume that the settings are not set at all and display the hint as normal.
+    if ((!options._id || !options._rev) && this.popupCheck < 3) {
+      setTimeout(() => {
+        this.popupCheck++
+        this.loadHintPopup()
+      }, 1000)
+      return
+    }
+
+    if (options.hideTooltipsStart) {
+      return
+    }
+
+    const messageToShow = tipsTricks[Math.floor(Math.random() * tipsTricks.length)]
+
+    this.$q.notify({
+      timeout: 15000,
+      icon: "mdi-help",
+      type: "info",
+      message: "Did you know?",
+      caption: messageToShow,
+      actions: [{ icon: "mdi-close", color: "white" }]
+    })
   }
 
   triggerKeyPush (e:any) {
@@ -109,7 +141,7 @@ export default class App extends BaseClass {
     }
     else {
       colors.setBrand("dark", "#18303a")
-      colors.setBrand("primary", "#d7ac47")
+      colors.setBrand("primary", "#e8bb50")
     }
   }
 }

src/components/DocumentControl.vue

@@ -32,6 +32,12 @@
       @trigger-dialog-close="keybindsDialogClose"
     />
 
+    <!-- Tips, Tricks & Trivia dialog -->
+    <tipsTricksTriviaDialog
+      :dialog-trigger="tipsTricksDialogTrigger"
+      @trigger-dialog-close="tipsTricksDialogClose"
+    />
+
     <q-page-sticky position="top-right" class="documentControl bg-dark" v-if="!disableDocumentControlBar">
 
       <div class="documentControl__blocker"></div>
@@ -71,6 +77,21 @@
               </q-tooltip>
             </q-btn>
 
+            <q-btn
+              icon="mdi-fire-alert"
+              color="primary"
+              outline
+              @click="tipsTricksAssignUID"
+            >
+              <q-tooltip
+                :delay="500"
+                anchor="bottom middle"
+                self="top middle"
+              >
+              Open Tips, Tricks & Trivia
+              </q-tooltip>
+            </q-btn>
+
             <q-separator vertical inset color="accent" />
           </template>
 
@@ -214,6 +235,7 @@ import existingDocumentDialog from "src/components/dialogs/ExistingDocument.vue"
 import deleteDocumentCheckDialog from "src/components/dialogs/DeleteDocumentCheck.vue"
 import advancedSearchGuideDialog from "src/components/dialogs/AdvancedSearchGuide.vue"
 import keybindCheatsheetDialog from "src/components/dialogs/KeybindCheatsheet.vue"
+import tipsTricksTriviaDialog from "src/components/dialogs/TipsTricksTrivia.vue"
 
 import { I_OpenedDocument } from "src/interfaces/I_OpenedDocument"
 import { extend, Loading, QSpinnerGears } from "quasar"
@@ -227,7 +249,8 @@ import { retrieveCurrentProjectName, exportProject } from "src/scripts/projectMa
     existingDocumentDialog,
     deleteDocumentCheckDialog,
     advancedSearchGuideDialog,
-    keybindCheatsheetDialog
+    keybindCheatsheetDialog,
+    tipsTricksTriviaDialog
   }
 })
 export default class DocumentControl extends BaseClass {
@@ -355,6 +378,19 @@ export default class DocumentControl extends BaseClass {
     this.existingObjectDialogTrigger = this.generateUID()
   }
 
+  /****************************************************************/
+  // Tips, Tricka & Trivia dialog
+  /****************************************************************/
+
+  tipsTricksDialogTrigger: string | false = false
+  tipsTricksDialogClose () {
+    this.tipsTricksDialogTrigger = false
+  }
+
+  tipsTricksAssignUID () {
+    this.tipsTricksDialogTrigger = this.generateUID()
+  }
+
   /****************************************************************/
   // Export project
   /****************************************************************/

src/components/appHeader/AppControl.vue

@@ -65,6 +65,12 @@
       @trigger-dialog-close="advancedSearchGuideDialogClose"
     />
 
+    <!-- Tips, Tricks & Trivia dialog -->
+    <tipsTricksTriviaDialog
+      :dialog-trigger="tipsTricksDialogTrigger"
+      @trigger-dialog-close="tipsTricksDialogClose"
+    />
+
     <q-btn-group
       flat
       class="AppControl__buttons"
@@ -280,6 +286,20 @@
               </q-item-section>
             </q-item>
 
+            <q-item
+              @click="tipsTricksAssignUID"
+              v-close-popup
+              clickable
+              active
+              active-class="bg-gunmetal-light text-cultured"
+              class="noHigh"
+              >
+              <q-item-section>Tips, Tricks & Trivia</q-item-section>
+              <q-item-section avatar>
+                <q-icon name="mdi-fire-alert" />
+              </q-item-section>
+            </q-item>
+
             <q-separator dark />
 
             <q-item
@@ -351,6 +371,7 @@ import programSettingsDialog from "src/components/dialogs/ProgramSettings.vue"
 import advancedSearchGuideDialog from "src/components/dialogs/AdvancedSearchGuide.vue"
 import newDocumentDialog from "src/components/dialogs/NewDocument.vue"
 import existingDocumentDialog from "src/components/dialogs/ExistingDocument.vue"
+import tipsTricksTriviaDialog from "src/components/dialogs/TipsTricksTrivia.vue"
 
 import { Loading, QSpinnerGears } from "quasar"
 
@@ -371,7 +392,8 @@ import appLogo from "src/assets/appLogo.png"
     advancedSearchGuideDialog,
     programSettingsDialog,
     newDocumentDialog,
-    existingDocumentDialog
+    existingDocumentDialog,
+    tipsTricksTriviaDialog
   }
 })
 export default class AppControl extends BaseClass {
@@ -552,6 +574,19 @@ export default class AppControl extends BaseClass {
   existingObjectAssignUID () {
     this.existingObjectDialogTrigger = this.generateUID()
   }
+
+  /****************************************************************/
+  // Tips, Tricka & Trivia dialog
+  /****************************************************************/
+
+  tipsTricksDialogTrigger: string | false = false
+  tipsTricksDialogClose () {
+    this.tipsTricksDialogTrigger = false
+  }
+
+  tipsTricksAssignUID () {
+    this.tipsTricksDialogTrigger = this.generateUID()
+  }
 }
 </script>
 

src/components/dialogs/ProgramSettings.vue

@@ -116,6 +116,36 @@
                       />
                   </div>
 
+                  <div class="col-4 optionWrapper">
+                    <div class="optionTitle">
+                      Hide tips popup on start screen
+                    <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
+                      <q-tooltip :delay="500">
+                        Hides the start screen tips & tricks popup.
+                      </q-tooltip>
+                    </q-icon>
+                    </div>
+
+                      <q-toggle
+                        v-model="options.hideTooltipsStart"
+                      />
+                  </div>
+
+                  <div class="col-4 optionWrapper">
+                    <div class="optionTitle">
+                      Hide tips on project screen
+                    <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
+                      <q-tooltip :delay="500">
+                        Hides all the social links on the Project overview screen.
+                      </q-tooltip>
+                    </q-icon>
+                    </div>
+
+                      <q-toggle
+                        v-model="options.hideTooltipsProject"
+                      />
+                  </div>
+
                   <div class="col-12">
                     <div class="text-h6 q-mt-lg">
                       Document view settings
@@ -392,6 +422,7 @@
             <q-table
               class="keybindsTable"
               virtual-scroll
+              dark
               flat
               title="Keybinds"
               :filter="filter"
@@ -404,7 +435,7 @@
               :columns="keybindListCollums"
             >
             <template v-slot:top-right>
-              <q-input clearable dense debounce="300" v-model="filter" placeholder="Filter the keybinds">
+              <q-input clearable dark dense debounce="300" v-model="filter" placeholder="Filter the keybinds">
                 <template v-slot:prepend>
                   <q-icon name="search" />
                 </template>
@@ -604,6 +635,8 @@ export default class ProgramSettings extends DialogBase {
     compactDocumentCount: false,
     invertCategoryPosition: false,
     hideWelcomeScreenSocials: false,
+    hideTooltipsStart: false,
+    hideTooltipsProject: false,
     userKeybindList: []
   }
 
@@ -903,6 +936,10 @@ export default class ProgramSettings extends DialogBase {
   width: 550px;
   padding: 40px;
 
+  .q-field--filled .q-field__control {
+    background-color: transparent;
+  }
+
   .q-field__label {
     text-align: center;
     margin-top: 7px;
@@ -933,6 +970,10 @@ export default class ProgramSettings extends DialogBase {
   height: calc(100vh - 340px);
   margin-top: -25px;
 
+  .q-field__control {
+    background-color: transparent;
+  }
+
   .q-table__control,
   .q-table__control label {
     width: 200px;

src/components/dialogs/TipsTricksTrivia.vue

@@ -0,0 +1,89 @@
+<template>
+
+  <q-dialog
+    v-model="dialogModel"
+    @hide="triggerDialogClose"
+    >
+    <q-card
+      class="tipsTricksTriviaDialog"
+      dark
+    >
+      <q-card-section>
+        <div class="flex justify-center">
+          <q-scroll-area
+            class="q-mx-xl q-my-lg"
+            visible
+            dark
+            :thumb-style="thumbStyle"
+            style="max-height: calc(100vh - 235px); height: 800px; width: 100%;">
+
+          <h6>Tips, Tricks & Trivia</h6>
+
+          <ul>
+            <li
+              v-for="(tip,index) in tipsTricks"
+              :key="index"
+              >
+                {{tip}}
+            </li>
+          </ul>
+
+          </q-scroll-area>
+        </div>
+       </q-card-section>
+
+      <q-card-actions align="around" class="q-mb-lg">
+          <q-btn flat label="Close" color="accent" v-close-popup />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+
+</template>
+
+<script lang="ts">
+
+import { Component, Watch } from "vue-property-decorator"
+import { tipsTricks } from "src/scripts/utilities/tipsTricks"
+
+import DialogBase from "src/components/dialogs/_DialogBase"
+@Component({
+  components: { }
+})
+export default class ChangeLog extends DialogBase {
+  @Watch("dialogTrigger")
+  openDialog (val: string|false) {
+    if (val) {
+      if (this.SGET_getDialogsState) {
+        return
+      }
+      this.SSET_setDialogState(true)
+      this.dialogModel = true
+    }
+  }
+
+  tipsTricks = tipsTricks
+
+  thumbStyle ={
+    right: "-40px",
+    borderRadius: "5px",
+    backgroundColor: "#61a2bd",
+    width: "5px",
+    opacity: 1
+  }
+}
+</script>
+
+<style lang="scss">
+.tipsTricksTriviaDialog {
+  width: 1000px;
+  max-width: calc(100vw - 100px) !important;
+
+  li {
+    margin: 10px 0;
+  }
+
+  h6 {
+    display: block;
+  }
+}
+</style>

src/css/app.scss

@@ -33,7 +33,7 @@ html {
 }
 
 body {
-  background-color: rgba($primary, 0.025);
+  background-color: rgba($primary, 0.001);
   overflow-y: scroll;
   color: darken($dark, 12.5);
 
@@ -103,6 +103,18 @@ body {
   padding-bottom: 15px;
 }
 
+.q-notification__caption {
+  opacity: 1;
+}
+
+.q-notification.bg-info {
+  max-width: 500px;
+
+  .q-notification__message > div:not(.q-notification__caption) {
+    color: var(--q-color-primary);
+  }
+}
+
 .fieldWysiwyg,
 .q-editor__content,
 .fieldWysiwygTitle,

src/css/quasar.variables.scss

@@ -20,7 +20,7 @@ $dark      : #18303a;
 
 $positive  : #35a14e;
 $negative  : #c10015;
-$info      : #31ccec;
+$info      : #6f43b1;
 $warning   : #f2c037;
 
 $customColors: (
@@ -30,9 +30,9 @@ $customColors: (
   'gunmetal-bright': lighten(#18303a, 50),
   'gunmetal-shine': lighten(#18303a, 60),
   'ruby-red': #f75746,
-  'satin-sheen-gold': #d7ac47,
-  'satin-sheen-gold-dark': darken(#d7ac47, 12.5),
-  'satin-sheen-gold-light': lighten(#d7ac47, 7.5),
+  'satin-sheen-gold': #e8bb50,
+  'satin-sheen-gold-dark': darken(#e8bb50, 12.5),
+  'satin-sheen-gold-light': lighten(#e8bb50, 7.5),
   'gainsboro': #dde4e4,
   'cultured': #f5f5f5
 );

src/documents/changeLog.md

@@ -27,6 +27,7 @@
 ### New features
 
 - Added a custom keybind support to the app
+- Added Tips, Tricks & Trivia popup, a menu item, buttons and project screen box
 - Added a resizeable hierarchical tree for all your categorical needs
   - The app also remembers the tree-size on restart so your preferred width gets transferred between your world-building sessions
 - Added dark mode
@@ -42,6 +43,8 @@
   - Added option: Accessibility - Text shadow
   - Added option: Accessibility - Pronounced count divider
   - Added option: Hide Welcome screen social links
+  - Added option: Hide tips popup on start screen
+  - Added option: Hide tips on project screen
   - Added option: Disable document control bar
   - Added option: Disable document guides
   - Added option: Disable document tooltips

src/pages/ProjectScreen.vue

@@ -13,6 +13,14 @@
       <div class="col-12">
         <h2 class="mainProjectTitle"> {{projectName}}</h2>
       </div>
+      <div class="hintWrapper" v-if="graphDataShowing && !hideTooltipsProject">
+        <div class="text-subtitle1 text-primary text-weight-medium text-left">
+          Did you know?
+        </div>
+        <div class="text-weight-medium text-left text-accent">
+          {{tipTrickMessage}}
+          </div>
+      </div>
 
       <div>
         <q-card
@@ -95,13 +103,14 @@
 </template>
 
 <script lang="ts">
-import { Component } from "vue-property-decorator"
+import { Component, Watch } from "vue-property-decorator"
 
 import BaseClass from "src/BaseClass"
 import { Loading, colors } from "quasar"
 import PouchDB from "pouchdb"
 import newDocumentDialog from "src/components/dialogs/NewDocument.vue"
 import { retrieveCurrentProjectName } from "src/scripts/projectManagement/projectManagent"
+import { tipsTricks } from "src/scripts/utilities/tipsTricks"
 
 @Component({
   components: {
@@ -116,10 +125,22 @@ export default class ProjectScreen extends BaseClass {
 
   allDocuments = 0
 
+  tipTrickMessage = ""
+
   async created () {
     this.projectName = await retrieveCurrentProjectName()
     this.loadGraphData().catch(e => console.log(e))
     Loading.hide()
+
+    this.tipTrickMessage = tipsTricks[Math.floor(Math.random() * tipsTricks.length)]
+  }
+
+  hideTooltipsProject = false
+
+  @Watch("SGET_options", { immediate: true, deep: true })
+  onSettingsChange () {
+    const options = this.SGET_options
+    this.hideTooltipsProject = options.hideTooltipsProject
   }
 
   async loadGraphData () {
@@ -289,7 +310,16 @@ export default class ProjectScreen extends BaseClass {
 }
 </script>
 
-<style  lang="scss">
+<style lang="scss">
+
+.hintWrapper {
+  max-width: 950px;
+  padding: 15px 20px;
+  width: 100%;
+  background-color: $info;
+  border-radius: 5px;
+  margin-bottom: 30px;
+}
 
 .mainProjectTitle {
   color: var(--q-color-dark);

src/scripts/utilities/tipsTricks.ts

@@ -0,0 +1,22 @@
+
+/**
+ * Toggles dev tools in the current window
+ */
+export const tipsTricks: string[] = [
+  "There is a whole list of really helpful keybind that can make your use of FA a lot quicker and easier!",
+  "The settings menu contains a whole assortment of both big and small tweaks to tailor the app to your needs!",
+  "FA has a Dark Mode that is no mere afterthought and is fully serviceable!",
+  "Many parts of the app react to a middle-mouse click. For example, you can close document tabs or open hierarchical tree items with it directly!",
+  "Any field in the document editing mode with the small dropdown arrow that is not a Relationship field allows for custom values! Just close the menu of predefined values with ESC, type your desired value and confirm with ENTER.",
+  "Fantasia Archive is for free, no string attached! If you ever want to support the project, drop me a penny or two on Patreon!",
+  "This software is actually a local website pretend to be a desktop application! Technology is crazy!",
+  "If you ever need a good, offline map-making software, look at Wonderdraft and Dungeondraft by Megasploot!",
+  "If these tips annoy you, there is a switch to turn them off in the program settings.",
+  "The Relationship searching functionality is packed to the brim with extra features you can use to find what you need! Read all about it in the \"Advanced search guide\" in the Help menu!",
+  "Your project gets auto-saved on exit, but it is suggested to use the \"Export\" function once in a while to make sure the data stays safe.",
+  "The left hierarchical tree is expandable with a mouse-drag and the program remembers where you left it the next time you launch!",
+  "Don't hesitate to add as many sub-categories as you want. You can always move stuff around later and reorganize your project structure.",
+  "Tags are a very powerful feature that allows for adding of semi-categories to the hierarchical tree and additional search parameter for quick navigation of important bits of your story!",
+  "There is a roadmap of planned features on the Patreon! If you are curious what is eventually coming, feel free to read it.",
+  "DISCLAIMER: No magical creatures were harmed during the making of this software."
+]

src/store/module-options/state.ts

@@ -21,6 +21,8 @@ export interface OptionsStateInteface {
   disableDocumentCounts: boolean
   compactDocumentCount: boolean
   invertCategoryPosition: boolean
+  hideTooltipsStart: boolean
+  hideTooltipsProject: boolean
 
   userKeybindList: any[]
   treeWidth?: number
@@ -49,6 +51,8 @@ function state (): OptionsStateInteface {
     disableDocumentCounts: false,
     compactDocumentCount: false,
     invertCategoryPosition: false,
+    hideTooltipsStart: false,
+    hideTooltipsProject: false,
     treeWidth: 374,
     userKeybindList: []
   }

suggestionList.md

@@ -1,5 +1,3 @@
-### App options & Keybinds
-
 - Add "Document relevance" switch and integrate it into filters
 - Add "Show in search results" checkbox for relationship searches
 - Add "Related notes"
@@ -16,6 +14,7 @@
 - Add support for dates in "custom order"... reee
 - Add cogwheels (loading) for the relationship fields when opening/closing since it takes a while on some PCs
 - Add safeguard to escape closing of settings only after something actually got modified
+- Add hover/on-demand document preview to relationships
 
 - Considering multiple "belongs under" category listing
 - Add intelligent responsive design to the left tree and document body (maybe button to pull the left bar in and out?)
@@ -64,3 +63,4 @@
 - Timeline/Calendar support
 - AFMG support
 - Add printing support
+- Add % bar graphs in tree (pinned in #general, idea by popoto)