Initial electron build, dekstop frame controls, update comment render…

…er, show post author for shared accounts

package.json

@@ -32,8 +32,14 @@
   },
   "devDependencies": {
     "@quasar/app": "^1.9.6",
+    "@quasar/quasar-app-extension-icon-factory": "^1.0.0-rc.7",
     "@quasar/quasar-app-extension-icon-genie": "^1.1.3",
     "babel-eslint": "^10.0.1",
+    "devtron": "^1.4.0",
+    "electron": "^9.0.0",
+    "electron-debug": "^3.0.1",
+    "electron-devtools-installer": "^3.0.0",
+    "electron-packager": "^14.1.1",
     "eslint": "^6.8.0",
     "eslint-config-standard": "^14.1.0",
     "eslint-loader": "^3.0.3",

quasar.extensions.json

@@ -14,6 +14,9 @@
         },
         "spa": {
           "iconHash": "035902ab9f2f1762e931964f16f8e138"
+        },
+        "electron": {
+          "iconHash": "035902ab9f2f1762e931964f16f8e138"
         }
       },
       "build": {
@@ -22,6 +25,26 @@
         },
         "spa": {
           "iconHash": "035902ab9f2f1762e931964f16f8e138"
+        },
+        "electron": {
+          "iconHash": "f963f4a211e4c5c5533c261adb003eab"
+        }
+      }
+    }
+  },
+  "@quasar/icon-factory": {
+    "minify_dev": "pngquant",
+    "minify_build": "zopfli",
+    "cordova": {
+      "background_color": "#000074",
+      "splashscreen_type": "pure"
+    },
+    "build_always": false,
+    "__internal": {
+      "dev": {},
+      "build": {
+        "electron": {
+          "iconHash": "7939556f7dee5b7a4ce89c6646f2b52b"
         }
       }
     }

src-electron/electron-flag.d.ts

@@ -0,0 +1,9 @@
+// THIS FEATURE-FLAG FILE IS AUTOGENERATED,
+//  REMOVAL OR CHANGES WILL CAUSE RELATED TYPES TO STOP WORKING
+import "quasar/dist/types/feature-flag";
+
+declare module "quasar/dist/types/feature-flag" {
+  interface QuasarFeatureFlags {
+    electron: true;
+  }
+}

src-electron/main-process/electron-main.dev.js

@@ -0,0 +1,26 @@
+/**
+ * This file is used specifically and only for development. It installs
+ * `electron-debug` & `vue-devtools`. There shouldn't be any need to
+ *  modify this file, but it can be used to extend your development
+ *  environment.
+ */
+
+import electronDebug from 'electron-debug'
+import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
+import { app } from 'electron'
+
+// Install `electron-debug` with `devtron`
+electronDebug({ showDevTools: true })
+
+// Install vuejs devtools
+app.whenReady().then(() => {
+  installExtension(VUEJS_DEVTOOLS)
+    .then(ext => {
+      console.log(`Added Extension: ${ext.name}`)
+    })
+    .catch(err => {
+      console.log('An error occurred: ', err)
+    })
+})
+
+import './electron-main'

src-electron/main-process/electron-main.js

@@ -0,0 +1,58 @@
+import { app, BrowserWindow, nativeTheme } from 'electron'
+
+try {
+  if (process.platform === 'win32' && nativeTheme.shouldUseDarkColors === true) {
+    require('fs').unlinkSync(require('path').join(app.getPath('userData'), 'DevTools Extensions'))
+  }
+} catch (_) { }
+
+/**
+ * Set `__statics` path to static files in production;
+ * The reason we are setting it here is that the path needs to be evaluated at runtime
+ */
+if (process.env.PROD) {
+  global.__statics = require('path').join(__dirname, 'statics').replace(/\\/g, '\\\\')
+}
+
+let mainWindow
+
+function createWindow () {
+  /**
+   * Initial window options
+   */
+  mainWindow = new BrowserWindow({
+    width: 1200,
+    height: 600,
+    useContentSize: false,
+    frame: false,
+    webPreferences: {
+      // Change from /quasar.conf.js > electron > nodeIntegration;
+      // More info: https://quasar.dev/quasar-cli/developing-electron-apps/node-integration
+      nodeIntegration: QUASAR_NODE_INTEGRATION,
+      nodeIntegrationInWorker: QUASAR_NODE_INTEGRATION,
+
+      // More info: /quasar-cli/developing-electron-apps/electron-preload-script
+      // preload: path.resolve(__dirname, 'electron-preload.js')
+    }
+  })
+
+  mainWindow.loadURL(process.env.APP_URL)
+
+  mainWindow.on('closed', () => {
+    mainWindow = null
+  })
+}
+
+app.on('ready', createWindow)
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})
+
+app.on('activate', () => {
+  if (mainWindow === null) {
+    createWindow()
+  }
+})

src/components/commentBody.vue

@@ -5,13 +5,13 @@
 <style>
 </style>
 <script>
-import { DefaultRenderer } from 'steem-content-renderer'
+import { renderPostBody } from '@ecency/render-helper'
 export default {
   name: 'commentBody',
   props: ['post'],
   data () {
     return {
-      renderer: new DefaultRenderer({
+      /* renderer: new DefaultRenderer({
         baseUrl: 'https://hive.ausbit.dev/',
         breaks: true,
         skipSanitization: false,
@@ -25,12 +25,13 @@ export default {
         usertagUrlFn: (account) => '/@' + account,
         hashtagUrlFn: (hashtag) => '/trending/' + hashtag,
         isLinkSafeFn: (url) => true
-      })
+      }) */
     }
   },
   computed: {
     postContent: function () {
-      return this.renderer.render(this.post.body)
+      return renderPostBody(this.post.body, false, false)
+      // return this.renderer.render(this.post.body)
     }
   },
   methods: {

src/components/comments.vue

@@ -33,8 +33,7 @@ export default {
   data () {
     return {
       comments: [],
-      api: 'https://rpc.ausbit.dev',
-      viewComments: false,
+      viewComments: true,
       loading: false,
       filter: {
         gray: true,

src/components/transferDialog.vue

@@ -11,7 +11,6 @@
           </q-card>
         </q-popup-proxy>
       </q-btn>
-      {{ toAccount }}
       <div><q-input label="Amount" v-model="amount" /></div>
       <div class="text-center text-caption" v-if="balance">Available: <span class="cursor-pointer text-bold" @click="amount = parseFloat(balance)">{{ balance }}</span> {{ tokenName }}</div>
       <div class="text-center text-caption" v-else-if="availableBalance">Available: <span class="cursor-pointer text-bold" @click="amount = parseFloat(availableBalance)">{{ availableBalance }}</span> {{ tokenName }}</div>

src/layouts/MainLayout.vue

@@ -1,14 +1,20 @@
 <template>
   <q-layout view="hHh lpR fFf">
     <q-header reveal elevated>
-      <q-toolbar reveal elevated class="bg-dark text-primary">
+      <q-toolbar reveal elevated class="bg-dark text-primary q-electron-drag">
         <q-btn flat dense round icon="menu" aria-label="Menu" @click="leftDrawerOpen = !leftDrawerOpen"/>
         <q-toolbar-title>
-          <router-link to="/"><q-icon name="img:statics/hextacular.svg" style="max-width:50%" /> hive.ausbit.dev </router-link>
+          <router-link to="/" class="q-electron-drag--exception"><q-icon name="img:statics/hextacular.svg" style="max-width:50%" /> hive.ausbit.dev </router-link>
         </q-toolbar-title>
         <searchbox />
         <notifications />
         <user-login />
+        <span v-if="$q.platform.is.electron">
+        <q-btn dense flat icon="cached" title="refresh" @click="refresh" />
+        <q-btn dense flat icon="minimize" title="minimize" @click="minimize" />
+        <q-btn dense flat icon="crop_square" title="maximize" @click="maximize" />
+        <q-btn dense flat icon="close" title="close" @click="closeApp" />
+        </span>
       </q-toolbar>
     </q-header>
     <q-drawer v-model="leftDrawerOpen" side="left" overlay elevated>
@@ -56,6 +62,29 @@ export default {
     searchbox
   },
   methods: {
+    minimize () {
+      if (process.env.MODE === 'electron') {
+        this.$q.electron.remote.BrowserWindow.getFocusedWindow().minimize()
+      }
+    },
+    maximize () {
+      if (process.env.MODE === 'electron') {
+        const win = this.$q.electron.remote.BrowserWindow.getFocusedWindow()
+        if (win.isMaximized()) {
+          win.unmaximize()
+        } else {
+          win.maximize()
+        }
+      }
+    },
+    closeApp () {
+      if (process.env.MODE === 'electron') {
+        this.$q.electron.remote.BrowserWindow.getFocusedWindow().close()
+      }
+    },
+    refresh () {
+      window.location.reload()
+    }
   },
   computed: {
     loggedInUser: {

src/pages/communities.vue

@@ -24,7 +24,7 @@
 </template>
 <script>
 import accountHeader from 'components/accountHeader.vue'
-import communityFeedCarousel from 'components/communityPostsCarousel.vue'
+import communityFeedCarousel from 'components/communityFeedCarousel.vue'
 export default {
   name: 'browsePage',
   components: {

src/pages/post.vue

@@ -15,10 +15,6 @@
             <div v-html="postBody" class="postview" />
             </transition>
           </q-card-section>
-          <div class="text-center">
-          <q-btn icon="comment" label="Reply" v-if="this.loggedInUser" push dense color="blue-grey-10"><q-popup-proxy persistent><commentBox :parent_author="post.author" :parent_permlink="post.permlink" /></q-popup-proxy></q-btn>
-          <comments :author="post.author" :permlink="post.permlink" v-if="post.children > 0" />
-          </div>
         </q-card>
       </div>
       <div class="col-sm-12 col-md-4 text-center justify-center" v-if="post">
@@ -31,9 +27,13 @@
                 <q-avatar>
                     <q-img :src="GetHiveAvatarUrl(author)" />
                 </q-avatar>
+                <q-avatar v-if="postMeta.author">
+                    <q-img :src="GetHiveAvatarUrl(postMeta.author)" />
+                </q-avatar>
                 </q-item-section>
                 <q-item-section>
-                  <router-link :to="linkAccount(author)">{{ author }}</router-link>
+                  <div>Posted by <router-link :to="linkAccount(author)">{{ author }}</router-link></div>
+                  <div v-if="postMeta.author">Authored by <router-link :to="linkAccount(postMeta.author)">{{ postMeta.author }}</router-link></div>
                 </q-item-section>
               </q-item>
               <q-item v-if="postDescription">
@@ -196,6 +196,9 @@
                   </q-dialog>
                 </q-item-section>
               </q-item>
+              <q-item>
+                <q-btn icon="comment" label="Reply" v-if="this.loggedInUser" push color="blue-grey-10" class="text-center" style="margin: auto"><q-popup-proxy persistent><commentBox :parent_author="post.author" :parent_permlink="post.permlink" /></q-popup-proxy></q-btn>
+              </q-item>
             </q-list>
           </q-card-section>
           <q-card-section>
@@ -207,10 +210,12 @@
           <recent-posts-carousel :account="author" :autoplay=false />
         </transition>
       </div>
+      <div class="q-md-md" style="margin: auto"><comments :author="post.author" :permlink="post.permlink" v-if="post.children > 0" /></div>
     </div>
   </q-page>
 </template>
 <style scoped>
+.postview img { display:block; margin-left:auto; margin-right: auto; width: 50% }
 a, a:link { color: #1d8ce0 }
 a:link { color: #1d8ce0; font-weight: bold; text-decoration: none; }
 a:visited { color: #884488; }