Merge pull request #68 from eosdac/v0.4.4_rc1

V0.4.4 rc1

.gitignore

@@ -2,7 +2,7 @@
 .DS_Store
 .thumbs.db
 node_modules
-src/extensions
+src/extensions*/
 /dist
 /src-cordova/node_modules
 /src-cordova/platforms

README.md

@@ -20,35 +20,39 @@ $ cd eosdac-client
 $ yarn
 ```
 
-## Extend eosdac-client
-Add custom pages, routes and vuex stores. It's recommended to extend and customize the eosDAC client in the extensions folder so you can pull in future updates without losing your customizations. The eosDAC branded extension repo will already contain a mandatatory home screen (eosDAC) and a custom example page with dedicated vuex store. You'll also find a component to extend the main menu. In production you might want to manage the contents of the extention folder as a git submodule. The command below will simply clone the remote repo in the src/extensions folder.
+## Customize the eosdac-client
 
-eosDAC the DAC is branded and customized with the following repo https://github.com/eosdac/eosdac-client-extension. Feel free to fork this repo to get started. In fact it's recommended to fork the repo if you plan to customize the eosDAC client.
+Visit https://github.com/eosdac/boilerplate-client-extension for more info.
+
+Add custom colors, pages, routes and vuex stores. It's recommended to extend and customize the eosDAC client in the extensions folder so you can pull in future updates without losing your customizations. The boilerplate extension already contains a mandatatory home screen (eosDAC) and a custom example page with dedicated vuex store. You'll also find a component to extend the main menu. In production you might want to manage the contents of the extention folder as a git submodule. The command below will simply clone the remote repo in the src/extensions folder.
 
 ```bash
 cd eosdac-client
-yarn add_extensions https://github.com/eosdac/eosdac-client-extension.git extensions
+yarn add_extensions https://github.com/eosdac/boilerplate-client-extension.git extensions
 ```
 If you want a tighter coupling between the main repo and your extensions repo you can create a git submodule.
 ```bash
 cd eosdac-client
 git submodule add https://github.com/your_repo/your_dac-client-extension.git src/extensions
 ```
 
-## Add or change language strings
-Use the extensions/i18n folder to add your custom strings or overwrite existing keys
-
 
 ## Quickstart
 
 Opens browser window automatically [http://localhost:8080](http://localhost:8080)
 
 ```bash
-quasar dev
+yarn dev
 ```
 
 ## Deployment
 
+Build the project for deployment.
+
+```bash
+yarn build
+```
+
 You can run the deploy script to checkout the correct release tag and copy the dist/spa-mat files to a dist/deploy folder which you can then make the root folder of your nginx website.
 
 Example:
@@ -73,6 +77,10 @@ If you want to build and run specifically for the jungle tesnet, you can run `DE
 
 ![image](https://user-images.githubusercontent.com/44613132/55268811-c75ae500-528d-11e9-8332-fd71ff648dc0.png)
 
-![image](https://user-images.githubusercontent.com/44613132/55268494-4bab6900-528a-11e9-8ac6-9e5a27310fb3.png)
+![image](https://user-images.githubusercontent.com/44613132/59903601-ab389100-9401-11e9-942e-7bb437708416.png)
+
+![image](https://user-images.githubusercontent.com/44613132/59903659-db802f80-9401-11e9-874f-6ba7c44fb000.png)
+
+![image](https://user-images.githubusercontent.com/44613132/59903752-12564580-9402-11e9-8dd9-e225286b74c9.png)
+
 
-![image](https://user-images.githubusercontent.com/44613132/55268728-d2f9dc00-528c-11e9-890c-d5d7c2997678.png)

build_scripts/before.js

@@ -0,0 +1,26 @@
+
+const fs = require('fs');
+
+//check if extensions folder is present
+if (!fs.existsSync("./src/extensions/")) {
+    throw 'extension folder not found. Add an extensions folder to the member client to proceed.'
+}
+
+const source_file = require('../src/extensions/statics/config/theme.json');
+const target_file = './src/css/themes/custom_theme_colors.styl';
+
+let content = '//This file is generated in the pre build script. \n\n';
+
+if(source_file){
+    Object.keys(source_file.colors).forEach(c => {
+        content += `${c} = ${source_file.colors[c]}\n`;
+    })
+}
+
+fs.writeFile(target_file, content, function(err) {
+    if(err) {
+        return console.log(err);
+    }
+
+    console.log(`The color file ${target_file} is generated!`);
+}); 

deploy.sh

@@ -49,10 +49,10 @@ git pull
 
 if $LOCAL_DEV ;
 then
-  quasar dev
+  yarn dev
 else
   mkdir -p dist/deploy
-  quasar build
+  yarn build
   if [ -z "$(ls -A dist/spa-mat)" ]; then
      echo "======= ERROR: ======="
      echo "dist/spa-mat empty."
@@ -77,4 +77,4 @@ else
   fi
 
 
-fi
+fi

package.json

@@ -1,19 +1,22 @@
 {
   "name": "eosdacmemberclient",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "local_storage_version": "0.1",
   "description": "Toolkit GUI for eosDAC",
   "productName": "eosDAC Member Client",
   "cordovaId": "org.cordova.quasar.app",
   "author": "eosDAC <hello@eosdac.io>",
   "private": true,
   "scripts": {
-    "start": "quasar dev",
-    "build": "quasar build",
+    "build": "node ./build_scripts/before.js && quasar build",
+    "dev": "node ./build_scripts/before.js && quasar dev",
     "add_extensions": "git -C ./src clone"
   },
   "dependencies": {
     "@chenfengyuan/vue-countdown": "^1.1.2",
+    "@scatterjs/core": "^2.7.26",
+    "@scatterjs/eosjs2": "^1.5.8",
+    "@scatterjs/lynx": "^1.6.17",
     "axios": "^0.19.0",
     "chart.js": "^2.8.0",
     "connect": "^3.6.6",
@@ -26,9 +29,6 @@
     "marked": "^0.6.2",
     "nested-object-assign": "^1.0.3",
     "sanitize-html": "^1.20.0",
-    "scatterjs-core": "^2.7.17",
-    "scatterjs-plugin-eosjs2": "^1.5.0",
-    "scatterjs-plugin-lynx": "1.6.6",
     "turndown": "^5.0.3",
     "vconsole": "^3.3.0",
     "vue-chartjs": "^3.4.2",

quasar.conf.js

@@ -36,6 +36,11 @@ module.exports = function (ctx) {
     supportIE: false,
     build: {
 
+      beforeDev: async function(){
+        console.log('before dev......');
+        return new Promise(resolve => setTimeout(resolve, 2000))
+      },
+
       env: {
         DEFAULT_NETWORK: JSON.stringify(process.env.DEFAULT_NETWORK)
       },
@@ -145,7 +150,13 @@ module.exports = function (ctx) {
         'QStepperNavigation',
         'QDatetimePicker',
         'QTooltip',
-        'QAutocomplete'
+        'QAutocomplete',
+        'QTable',
+        // pick only what you are using from:
+        'QTh',
+        'QTr',
+        'QTd',
+        'QTableColumns'
       ],
       directives: [
         'Ripple',

src/components/controls/color-picker.vue

@@ -1,13 +1,26 @@
 <template>
   <div>
+    <div class="row justify-between q-mb-md">
+      <div
+        v-for="(color, i) in colornames.filter(cn => {
+          return cn.indexOf('text') === -1;
+        })"
+        :key="`c${i}`"
+        :class="`bg-${color}`"
+        class="q-pa-sm round-borders q-caption q-mb-xs cursor-pointer"
+        @click="colorvar = color"
+      >
+        {{ color }}
+      </div>
+    </div>
     <q-select
       class="q-mb-md"
       color="primary-light"
       :dark="getIsDark"
       v-model="colorvar"
       float-label="Select a color variable"
       :options="
-        colorvars.map(cv => {
+        colornames.map(cv => {
           return { label: cv, value: cv };
         })
       "
@@ -30,7 +43,17 @@ import { mapGetters } from "vuex";
 export default {
   data() {
     return {
-      colorvars: ["primary", "bg1", "bg2", "text1", "text2"],
+      colornames: [
+        "primary",
+        "bg1",
+        "bg2",
+        "text1",
+        "text2",
+        "info",
+        "positive",
+        "negative",
+        "dark"
+      ],
       colorvar: "primary",
       color: "#C7044B"
     };

src/components/controls/menus/toolbar-menu.vue

@@ -83,9 +83,10 @@
       text-color="text1"
       class="animate-fade"
       :label="getAccountName"
-      content-style="margin-top:4px"
+      content-style="margin-top:15px;"
+      content-class="round-borders"
     >
-      <q-list link class="bg-bg2 text-text1">
+      <q-list link class="bg-dark text-text1 round-borders">
         <q-list-header class="text-text2" style="min-width:300px">
           {{ getActiveNetworkName }}
           <span class="q-caption">{{ getAuthString }}</span>

src/components/controls/network-switcher.vue

@@ -1,18 +1,12 @@
 <template>
   <div>
-    <q-btn
-      :disable="disable"
-      v-if="getActiveNetworkName != 'jungle'"
-      label="switch to jungle"
-      @click="switchNetwork('jungle')"
-      color="primary"
-    />
-    <q-btn
-      :disable="disable"
-      v-if="getActiveNetworkName != 'mainnet'"
-      label="switch to mainnet"
-      @click="switchNetwork('mainnet')"
+    <q-select
+      v-model="selected_network"
+      :dark="getIsDark"
+      stack-label="Select network"
       color="primary"
+      :options="network_options"
+      @input="switchNetwork($event)"
     />
   </div>
 </template>
@@ -31,15 +25,24 @@ export default {
   },
   data() {
     return {
-      disable: false
+      disable: false,
+      selected_network: this.$store.state.global.active_network
     };
   },
   computed: {
     ...mapGetters({
       getActiveNetwork: "global/getActiveNetwork",
-      getActiveNetworkName: "global/getActiveNetworkName"
+      getActiveNetworkName: "global/getActiveNetworkName",
+      getNetworks: "global/getNetworks",
+      getIsDark: "ui/getIsDark"
       // getCustodians: 'dac/getCustodians',
-    })
+    }),
+    network_options() {
+      if (!this.getNetworks) return [];
+      return this.getNetworks.map(netw => {
+        return { value: netw.name, label: netw.name };
+      });
+    }
   },
   methods: {
     async switchNetwork(networkname) {