Merge branch 'feature/#12-software-info' into 'develop'

Feature/#12 software info

See merge request subugoe/emo/Qviewer!8

CHANGELOG.md

@@ -6,6 +6,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.0.4] - 2020-05-19
+### Added
+- Text can now be zoomed in and out to a max of 32px and min of 8px. The fontsize defaults to 14px. It is tracked during browsing.
+- Software info includes links to documentation, source code and bug reporting
+
 ## [0.0.3] - 2020-05-18
 ### Added
 - extended config object in index.html by a key named "standalone" (Possible values: true || false).

README.md

@@ -38,8 +38,8 @@ npm install
 ```bash
 quasar dev
 ```
-
-### Lint the Files
+ 
+### Lint the files
 
 ```bash
 npm run lint

src/components/quasar-bottom.vue

+<template>
+  <div class="bottom">
+    <q-separator />
+    <Language />
+    <Softwareinfo />
+  </div>
+</template>
+
+<script>
+import Language from '@/components/language.vue';
+import Softwareinfo from '@/components/softwareinfo.vue';
+
+export default {
+  name: 'Bottom',
+  components: {
+    Language,
+    Softwareinfo,
+  },
+};
+</script>
+
+<style>
+.bottom {
+  background: white;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  z-index: 999;
+}
+</style>

src/components/quasar-footer.vue

 <template>
   <q-footer bordered reveal class="bg-white">
     <Language v-if="standalone" />
+    <Softwareinfo />
   </q-footer>
 </template>
 
 <script>
 import Language from '@/components/language.vue';
+import Softwareinfo from '@/components/softwareinfo.vue';
 
 export default {
   name: 'Footer',
   components: {
     Language,
+    Softwareinfo,
   },
   props: {
     standalone: Boolean,

src/components/softwareinfo.vue

+<template>
+
+  <div class="softwareinfo">
+    <q-btn
+      flat
+      color="grey"
+      size="sm"
+      label=""
+      @click="infobox = true">
+      <q-icon size="sm" :name="fasInfoCircle" />
+    </q-btn>
+    <q-dialog v-model="infobox">
+      <q-card>
+        <q-card-section class="">
+          <div class="text-h5 q-pb-md">
+              EMo Viewer
+          </div>
+          <p class="text-weight-bold">
+            Slim, easy to use and mobile-friendly text and image viewer
+          </p>
+          <p>Author: State and University Library Göttingen (SUB Göttingen)</p>
+          <p class="q-mb-none">Version 0.0.1, License AGPL-3.0</p>
+        </q-card-section>
+
+        <q-card-section class="q-pt-none">
+          <q-btn
+            flat
+            href="https://gitlab.gwdg.de/subugoe/emo/Qviewer/-/blob/develop/README.md"
+            target="_blank"
+            type="a"
+            >
+            <q-icon :name="fasBook" size="md" class="q-pr-md" />
+            Documentation
+          </q-btn>
+          <q-btn
+            flat
+            href="https://gitlab.gwdg.de/subugoe/emo/Qviewer/"
+            target="_blank"
+            type="a"
+            >
+            <q-icon :name="fasCode" size="md" class="q-pr-md" />
+            Source Code
+          </q-btn>
+          <q-btn
+            flat
+            href="mailto:gitlab+subugoe-emo-qviewer-10921-issue-@gwdg.de"
+            type="a"
+            >
+            <q-icon :name="fasBug" size="md" class="q-pr-md" />
+            Report a Bug
+          </q-btn>
+        </q-card-section>
+
+        <q-card-actions align="right" class="text-primary">
+          <q-btn flat label="Close" v-close-popup />
+        </q-card-actions>
+
+      </q-card>
+    </q-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  fasInfoCircle,
+  fasBug,
+  fasCode,
+  fasBook,
+}
+  from '@quasar/extras/fontawesome-v5';
+
+export default {
+  name: 'Softwareinfo',
+  data() {
+    return {
+      infobox: false,
+    };
+  },
+  created() {
+    this.fasInfoCircle = fasInfoCircle;
+    this.fasBug = fasBug;
+    this.fasCode = fasCode;
+    this.fasBook = fasBook;
+  },
+};
+</script>