0.1.5a - added toggle to hierarchical tree

src/BaseClass.ts

@@ -309,6 +309,14 @@ export default class BaseClass extends Vue {
 
   @Options.Action("setOptions") SSET_options!: (input: OptionsStateInteface) => void
 
+  toggleHierarchicalTree (): void {
+    const optionsSnapshot: OptionsStateInteface = extend(true, {}, this.SGET_options)
+
+    optionsSnapshot.hideHierarchyTree = !optionsSnapshot.hideHierarchyTree
+
+    this.SSET_options(optionsSnapshot)
+  }
+
   /****************************************************************/
   // OPEN DOCUMENTS MANAGEMENT
   /****************************************************************/

src/components/DocumentControl.vue

@@ -38,11 +38,20 @@
       @trigger-dialog-close="tipsTricksDialogClose"
     />
 
-    <q-page-sticky position="top-right" class="documentControl bg-dark" v-if="!disableDocumentControlBar">
+    <q-page-sticky position="top-right"
+      class="documentControl bg-dark"
+      :class="{'fullScreen': hideHierarchyTree}"
+      v-if="!disableDocumentControlBar"
+      >
 
-      <div class="documentControl__blocker"></div>
+      <div
+      class="documentControl__blocker"
+      ></div>
 
-      <div class="documentControl__wrapper">
+      <div
+      class="documentControl__wrapper"
+      :class="{'fullScreen': hideHierarchyTree}"
+      >
 
         <div class="documentControl__left">
 
@@ -113,6 +122,23 @@
 
           <q-separator vertical inset color="accent" />
 
+          <q-btn
+            icon="mdi-page-layout-sidebar-left"
+            color="primary"
+            outline
+            @click="toggleHierarchicalTree"
+          >
+            <q-tooltip
+              :delay="500"
+              anchor="bottom middle"
+              self="top middle"
+            >
+             Toggle hierarchical tree
+            </q-tooltip>
+          </q-btn>
+
+          <q-separator vertical inset color="accent" />
+
           <q-btn
             icon="mdi-database-search"
             color="primary"
@@ -301,8 +327,11 @@ export default class DocumentControl extends BaseClass {
     const options = this.SGET_options
     this.disableDocumentControlBar = options.disableDocumentControlBar
     this.disableDocumentControlBarGuides = options.disableDocumentControlBarGuides
+    this.hideHierarchyTree = options.hideHierarchyTree
   }
 
+  hideHierarchyTree = false
+
   async created () {
     this.projectName = await retrieveCurrentProjectName()
     this.projectExists = !!(await retrieveCurrentProjectName())
@@ -358,6 +387,12 @@ export default class DocumentControl extends BaseClass {
       await this.sleep(100)
       this.copyTargetDocument()
     }
+
+    // Toggle hierarchical tree - CTRL + ALT + SHIFT + T
+    if (this.determineKeyBind("toggleHierarchicalTree")) {
+      // @ts-ignore
+      this.toggleHierarchicalTree()
+    }
   }
 
   /****************************************************************/
@@ -605,6 +640,10 @@ export default class DocumentControl extends BaseClass {
   width: calc(100vw - 380px);
   margin-top: 2.5px;
 
+  &.fullScreen {
+    width: calc(100vw);
+  }
+
   &__blocker {
     position: absolute;
     top: -7.5px;
@@ -622,6 +661,10 @@ export default class DocumentControl extends BaseClass {
     justify-content: space-between;
     position: relative;
 
+    &.fullScreen {
+      width: calc(100vw);
+    }
+
     &::after {
       content: " ";
       bottom: 1px;

src/components/appHeader/AppControl.vue

@@ -156,6 +156,23 @@
               </q-item-section>
             </q-item>
 
+            <q-separator dark />
+
+              <q-item
+              v-close-popup
+              clickable
+              active
+              active-class="bg-gunmetal-light text-cultured"
+              class="noHigh"
+              @click="toggleHierarchicalTree"
+              :disable="!projectExists || isFrontpage"
+            >
+              <q-item-section>Toggle hierarchical tree</q-item-section>
+              <q-item-section avatar>
+                <q-icon name="mdi-page-layout-sidebar-left" />
+              </q-item-section>
+            </q-item>
+
             <q-separator dark />
 
              <q-item

src/components/dialogs/MergeProjectCheck.vue

@@ -11,7 +11,7 @@
 
         <q-card-section class="row justify-center q-mx-xl">
           <div>
-            Please note that merging another project will cause <span class="text-bold text-secondary">IRREVERSIBLE CHANGES</span> to currently opened project.
+            Please note that merging another project will cause <span class="text-bold text-secondary">IRREVERSIBLE CHANGES</span> to the currently opened project.
             <br>
             If you haven't done so already, please export your current project first to prevent <span class="text-bold text-secondary">POSSIBLE COMPLICATIONS</span> concerning your current project data!
           </div>

src/components/dialogs/ProgramSettings.vue

@@ -421,6 +421,27 @@
                     </div>
                   </div>
 
+                   <div class="col-12">
+                    <div class="text-bold q-mt-xl">
+                      Tree settings
+                    </div>
+                  </div>
+
+                  <div class="col-12 col-md-6 col-lg-4 optionWrapper">
+                    <div class="optionTitle">
+                      Hide hierarchical tree
+                    <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
+                      <q-tooltip :delay="500">
+                        Determines if the tree shows at all or not.
+                      </q-tooltip>
+                    </q-icon>
+                    </div>
+
+                    <q-toggle
+                      v-model="options.hideHierarchyTree"
+                    />
+                  </div>
+
                   <div class="col-12">
                     <div class="text-bold q-mt-xl">
                       Tag settings
@@ -902,6 +923,7 @@ export default class ProgramSettings extends DialogBase {
     doubleDashDocCount: false,
     hideDeadCrossThrough: false,
     hidePlushes: false,
+    hideHierarchyTree: false,
     tagsAtTop: false,
     noTags: false,
     compactTags: false,

src/documents/changeLog.md

@@ -13,9 +13,9 @@
 
 ### Bugfixes & Optimizations
 
-- Fixed a bug of edit mode "Open in new window" buttons being on higher level than the document control bar and rendering over it
+- Fixed a bug of edit mode "Open in new window" buttons being on a higher level than the document control bar and rendering over it
-- Fixed non-working edit button inthe hierarchical tree on already opened documents
+- Fixed non-working edit button in the hierarchical tree on already opened documents
-- Attempted to fixed ocasionally buggy functionality regarding known issues of the non-functional new project and importing/merging
+- Attempted to fixed occasionally buggy functionality regarding known issues of the non-functional new project and importing/merging
 
 ### New features
 
@@ -24,10 +24,15 @@
 - Added a new `Cost in different Currencies` one-way relationship field to `Items` document type
 - Added a new `Connected to Currencies` two-way relationship field to `Items` document type
 - Added a new `Connected to Items` two-way relationship field to `Currencies` document type
+- Added a few pre-filled location types to `Location type` field in `Locations/Geography` document type
+- Added support for toggling of hierarchical tree on and off
+- Added option: Hide hierarchical tree
+- Added keybind: Toggle hierarchical tree
+- Added menu icon and document control bar icon for toggling of hierarchical tree
 
 ### QoL adjustments
 
-- Multiple small field name changes to unify meanings across app
+- Multiple small field name changes to unify meanings across the app
 - Unified ordering of connected groups in all document types
 
 ## 0.1.5

src/layouts/DocumentLayout.vue

@@ -10,10 +10,12 @@
       emit-immediately
       :class="splitterClass"
       @input="onChange"
-      :limits="[374, Infinity]"
+      :limits="[limiterWidth, Infinity]"
       class="pageSplitter"
       >
-      <template #before>
+      <template
+        v-if="!hideHierarchyTree"
+       #before>
         <!-- Left drawer -->
         <q-drawer
           content-class="bg-dark text-cultured sideWrapper"
@@ -23,7 +25,9 @@
           :breakpoint="0"
           show-if-above
           >
-            <objectTree/>
+            <objectTree
+
+            />
         </q-drawer>
       </template>
       <template #after>
@@ -101,11 +105,22 @@ export default class DocumentLayout extends BaseClass {
   @Watch("SGET_options", { immediate: true, deep: true })
   onSettingsChange () {
     const options = this.SGET_options
-    if (options.treeWidth) {
+    this.hideHierarchyTree = options.hideHierarchyTree
+
+    if (options.treeWidth && !this.hideHierarchyTree) {
       this.splitterModel = options.treeWidth
     }
+    else {
+      this.splitterModel = 0
+    }
   }
 
+  get limiterWidth () {
+    return (!this.hideHierarchyTree) ? 374 : 0
+  }
+
+  hideHierarchyTree = false
+
   /****************************************************************/
   // OPTTION UPDATER
   /****************************************************************/

src/scripts/appSettings/defaultKeybinds.ts

@@ -22,6 +22,17 @@ export const defaultKeybinds = [
     tooltip: "Open Fantasia Archive options"
   },
 
+  // Toggle hierarchical tree - CTRL + ALT + SHIFT + T
+  {
+    altKey: true,
+    ctrlKey: true,
+    shiftKey: true,
+    which: 84,
+    editable: true,
+    id: "toggleHierarchicalTree",
+    tooltip: "Toggle hierarchical tree"
+  },
+
   // Quick new document - CTRL + N
   {
     altKey: false,

src/scripts/databaseManager/blueprints/locations.ts

@@ -176,12 +176,18 @@ export const locationsBlueprint: I_Blueprint = {
         "City",
         "Continent",
         "Forest",
+        "Galaxy",
         "Landmark",
         "Landmass",
+        "Moon",
         "Mountain",
         "Planet",
+        "Planetary System",
+        "Star System",
+        "Structure",
         "Terrain formation",
         "Town",
+        "Universe",
         "Village",
         "Other",
         "Unique"

src/store/module-options/state.ts

@@ -8,6 +8,7 @@ export interface OptionsStateInteface {
   hideDeadCrossThrough: boolean
   doubleDashDocCount: boolean
   hideWelcomeScreenSocials: boolean
+  hideHierarchyTree: boolean
   noTags: boolean
   tagsAtTop: boolean
   compactTags: boolean
@@ -48,6 +49,7 @@ function state (): OptionsStateInteface {
     doubleDashDocCount: false,
     hideWelcomeScreenSocials: false,
     hidePlushes: false,
+    hideHierarchyTree: false,
     noTags: false,
     tagsAtTop: false,
     compactTags: false,