add favicon, add close view button, make zoom button opacity .7, add …

…github and youtube links, add refresh button, improve drawer link icon
imvenx · Dec 8, 2023 · 769b7d0 · 769b7d0
1 parent ea5167a
commit 769b7d0
Show file tree

Hide file tree

Showing 13 changed files with 68 additions and 40 deletions.
diff --git a/index.html b/index.html
@@ -1,21 +1,26 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <title><%= productName %></title>
 
-    <meta charset="utf-8">
-    <meta name="description" content="<%= productDescription %>">
-    <meta name="format-detection" content="telephone=no">
-    <meta name="msapplication-tap-highlight" content="no">
-    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">
+<head>
+  <title>
+    <%= productName %>
+  </title>
 
-    <link rel="icon" type="image/png" sizes="128x128" href="icons/favicon-128x128.png">
-    <link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
-    <link rel="icon" type="image/ico" href="favicon.ico">
-  </head>
-  <body>
-    <!-- quasar:entry-point -->
-  </body>
-</html>
+  <meta charset="utf-8">
+  <meta name="description" content="<%= productDescription %>">
+  <meta name="format-detection" content="telephone=no">
+  <meta name="msapplication-tap-highlight" content="no">
+  <meta name="viewport"
+    content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">
+
+  <link rel="icon" type="image/png" sizes="128x128" href="favicon.png">
+  <link rel="icon" type="image/png" sizes="96x96" href="favicon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="favicon.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="favicon.png">
+</head>
+
+<body>
+  <!-- quasar:entry-point -->
+</body>
+
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,14 +11,15 @@
     "build": "quasar build"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.5.1",
     "@quasar/extras": "^1.16.4",
     "quasar": "^2.6.0",
     "vue": "^3.0.0",
     "vue-router": "^4.0.0"
   },
   "devDependencies": {
-    "@types/node": "^12.20.21",
     "@quasar/app-vite": "^1.3.0",
+    "@types/node": "^12.20.21",
     "autoprefixer": "^10.4.2",
     "typescript": "^4.5.4"
   },
@@ -27,4 +28,4 @@
     "npm": ">= 6.13.4",
     "yarn": ">= 1.21.1"
   }
-}
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/favicon.png b/public/favicon.png
diff --git a/public/icons/favicon-128x128.png b/public/icons/favicon-128x128.png
diff --git a/public/icons/favicon-16x16.png b/public/icons/favicon-16x16.png
diff --git a/public/icons/favicon-32x32.png b/public/icons/favicon-32x32.png
diff --git a/public/icons/favicon-96x96.png b/public/icons/favicon-96x96.png
diff --git a/quasar.config.js b/quasar.config.js
@@ -34,6 +34,7 @@ module.exports = configure(function (/* ctx */) {
 
     // https://github.com/quasarframework/quasar/tree/dev/extras
     extras: [
+      'fontawesome-v5',
       // 'ionicons-v4',
       // 'mdi-v5',
       // 'fontawesome-v6',
@@ -89,6 +90,7 @@ module.exports = configure(function (/* ctx */) {
       config: { dark: true },
 
       // iconSet: 'material-icons', // Quasar icon set
+      iconSet: 'fontawesome-v5',
       // lang: 'en-US', // Quasar language pack
 
       // For special cases outside of where the auto-import strategy can have an impact

diff --git a/src/components/ViewsComponent.vue b/src/components/ViewsComponent.vue
@@ -24,16 +24,17 @@
 
   <template v-for="view in appState.views.filter(x => x.enabled == true)">
     <div style="text-align:center; display:inline-block; margin:1em">
-      <div style="display:flex">
-        <p>{{ view.name }} {{ view.width }}x{{ view.height }}</p>
+      <div style="display: flex;justify-content: space-between; align-items: center;">
+        <div style="padding: 0 1em; font-weight: 600;">{{ view.name }} {{ view.width }}x{{
+          view.height }}</div> <q-btn icon="close" @click="view.enabled = false" round outline flat></q-btn>
       </div>
       <svg :viewBox="`0 0 ${view.width} ${view.height}`" :width="view.width * appState.zoom * view.scale"
         :height="view.height * appState.zoom * view.scale" style="box-shadow: 0 0 10px black;">
         <foreignObject :width="view.width" :height="view.height">
           <iframe :src="appState.url" :width="view.width" :height="view.height" />
         </foreignObject>
       </svg>
-      <q-slider :min="0.1" :max="1" :step="0.1" v-model="view.scale" />
+      <q-slider :min="0.1" :max="2" :step="0.1" v-model="view.scale" />
     </div>
   </template>
 
@@ -50,6 +51,5 @@
 <script setup lang="ts">
 import { appState } from 'src/stores/appState';
 
-
 </script>
 
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
@@ -1,22 +1,27 @@
 <template>
   <q-layout view="hHh Lpr lFf">
-    <q-header style="background-color: black;">
+    <q-header style="background-color: rgb(0, 0, 0);">
       <div>
         <!-- <div class=" q-gutter-y-md column"> -->
         <div>
           <q-toolbar>
-            <q-btn @click="toggleLeftDrawer" round dense flat icon="menu" class="q-mr-xs" />
+            <q-btn @click="toggleLeftDrawer" round dense flat icon="add_to_queue" class="q-mr-xs" />
             <!-- <q-avatar>
               <q-icon name="visibility" />
             </q-avatar> -->
             <q-toolbar-title>MultiGlancer</q-toolbar-title>
 
             <q-space />
+            <q-btn icon="fab fa-youtube" @click="openLinkOnNewTab('https://www.youtube.com/watch?v=PNrvdtzaujA')" />
+            <q-btn icon="fab fa-github" @click="openLinkOnNewTab('https://github.com/imvenx/multiglancer')" />
 
-            <q-input label="Site URL" dark dense standout v-model="appState.url" style="width:40%;">
+            <q-input label="Site URL" dark dense standout v-model="appState.url" style="width:40%; min-width: 200px;">
               <template v-slot:append>
                 <q-icon v-if="appState.url === ''" name="http" />
-                <q-icon v-else name="clear" class="cursor-pointer" @click="appState.url = ''" />
+                <template v-else>
+                  <q-icon name="clear" class="cursor-pointer" @click="appState.url = ''" />
+                  <q-icon name="refresh" class="cursor-pointer" @click="refresh()" />
+                </template>
               </template>
             </q-input>
           </q-toolbar>
@@ -38,7 +43,7 @@
       <router-view />
     </q-page-container>
 
-    <q-card style="position:fixed; bottom: 1em; right:5em; width: 20em;" class="shadow-10">
+    <q-card style="position:fixed; bottom: 1em; right:5em; width: 20em; opacity: .7;" class="shadow-10">
       <q-item>
         <q-item-section>
           <q-slider v-model="appState.zoom" :step="0.01" :min="0.1" :max="1" :label="true" />
@@ -60,6 +65,12 @@ import { appState } from 'src/stores/appState';
 appState
 const leftDrawerOpen = ref(false)
 
+const openLinkOnNewTab = (url: string) => window.open(url, '_blank')
+
+function refresh() {
+  location.reload()
+}
+
 function toggleLeftDrawer() {
   leftDrawerOpen.value = !leftDrawerOpen.value
 }

diff --git a/src/stores/appState.ts b/src/stores/appState.ts
@@ -1,19 +1,18 @@
 import { ref } from "vue";
 
 export const appState = ref({
-  zoom: 0.3,
-  url: 'https://quasar.dev/',
-  // url: location.origin,
+  zoom: 0.6,
+  url: 'https://arcanepad.com',
   views: [
-    { scale: 1, enabled: true, name: 'Pxiel 5', width: 393, height: 851 },
-    { scale: 1, enabled: true, name: 'iPhone 12 Pro', width: 390, height: 844 },
-    { scale: 1, enabled: true, name: 'SXGA', width: 1280, height: 1024 },
-    { scale: 1, enabled: true, name: 'HD', width: 1366, height: 768 },
-    { scale: 1, enabled: true, name: 'HD+', width: 1600, height: 900 },
+    { scale: 1, enabled: true, name: 'Pixel 5', width: 393, height: 851 },
+    { scale: 1, enabled: false, name: 'iPhone 12 Pro', width: 390, height: 844 },
+    { scale: 1, enabled: false, name: 'SXGA', width: 1280, height: 1024 },
+    { scale: 1, enabled: false, name: 'HD', width: 1366, height: 768 },
+    { scale: 1, enabled: false, name: 'HD+', width: 1600, height: 900 },
     { scale: 1, enabled: true, name: 'FHD', width: 1920, height: 1080 },
-    { scale: 1, enabled: true, name: 'WUXGA', width: 1920, height: 1200 },
-    { scale: 1, enabled: true, name: 'QHD', width: 2560, height: 1440 },
-    { scale: 1, enabled: true, name: 'WQHD', width: 3440, height: 1440 },
-    { scale: 1, enabled: true, name: 'UHD', width: 3840, height: 2160 },
+    { scale: 1, enabled: false, name: 'WUXGA', width: 1920, height: 1200 },
+    { scale: 1, enabled: false, name: 'QHD', width: 2560, height: 1440 },
+    { scale: 1, enabled: false, name: 'WQHD', width: 3440, height: 1440 },
+    { scale: 1, enabled: false, name: 'UHD', width: 3840, height: 2160 },
   ]
 })