- fix Header and Drawer Right

- fix Drawer Menu Left - add icon on the Header - fix lang if is different language: set to English.
2019-03-14 21:09:41 +01:00
parent 41642853d1
commit 527da316da
25 changed files with 319 additions and 303 deletions
--- a/src/components/Header/Header.scss
+++ b/src/components/Header/Header.scss
@@ -284,4 +284,5 @@ canvas {

 .btnNewVersShow {
  display: inline-block;
+  padding: 4px 2px;
 }
--- a/src/components/Header/Header.ts
+++ b/src/components/Header/Header.ts
@@ -31,6 +31,8 @@ export default class Header extends Vue {
  public clCloudDownload: string = ''
  public clCloudUp_Indexeddb: string = ''
  public clCloudDown_Indexeddb: string = 'clIndexeddbsend'
+  public right: boolean = false
+  public photo = ''

  public selectOpLang = [
    { label: 'English', icon: 'fa-flag-us', value: 'enUs', image: '../statics/images/gb.png', short: 'EN' },
@@ -43,6 +45,10 @@ export default class Header extends Vue {
    return GlobalStore.state.stateConnection
  }

+  get isonline() {
+    return GlobalStore.state.stateConnection === 'online'
+  }
+
  get isAdmin() {
    return UserStore.state.isAdmin
  }
@@ -97,7 +103,7 @@ export default class Header extends Vue {
  }

  set lang(lang) {
-    console.log('set lang(' + this.$i18n.locale)
+    console.log('set lang', this.$i18n.locale)
    this.$i18n.locale = this.snakeToCamel(lang)
    // tools.showNotif(this.$q, 'IMPOSTA LANG= ' + this.$i18n.locale)
    // console.log('IMPOSTA LANG= ' + this.$i18n.locale)
@@ -106,16 +112,10 @@ export default class Header extends Vue {

    let mylangtopass = lang

+    mylangtopass = tools.checkLangPassed(mylangtopass)
+
    this.setshortlang(mylangtopass)

-    if (mylangtopass === 'enUs') {
-      mylangtopass = 'en-us'
-    }
-
-    if (mylangtopass === 'es') {
-      mylangtopass = 'es'
-    }
-
    this.setLangAtt(mylangtopass)
  }

@@ -148,7 +148,7 @@ export default class Header extends Vue {

  @Watch('conn_changed', { immediate: true, deep: true })
  public changeconn_changed(value: string, oldValue: string) {
-    if (value != oldValue) {
+    if (value !== oldValue) {

      // console.log('SSSSSSSS: ', value, oldValue)

@@ -167,7 +167,7 @@ export default class Header extends Vue {

  public RefreshApp() {
    // Unregister Service Worker
-    navigator.serviceWorker.getRegistrations().then(function(registrations) {
+    navigator.serviceWorker.getRegistrations().then((registrations) => {
      for (const registration of registrations) {
        registration.unregister()
      }
@@ -208,13 +208,13 @@ export default class Header extends Vue {

  public setLangAtt(mylang) {
    console.log('MYLL=', mylang)
-    console.log('PRIMA this.$q.lang.isoName', this.$q.lang.isoName)
+    // console.log('PRIMA this.$q.lang.isoName', this.$q.lang.isoName)

    // dynamic import, so loading on demand only
    import(`quasar/lang/${mylang}`).then((lang) => {
      Quasar.lang.set(lang.default)
      import(`../../statics/i18n`).then(() => {
-        console.log('MY LANG DOPO=', this.$q.lang.isoName)
+        // console.log('MY LANG DOPO=', this.$q.lang.isoName)
      })
    })

@@ -225,36 +225,23 @@ export default class Header extends Vue {
  public beforeMount() {
    // Estrai la Lang dal Localstorage

-    console.log('this.$q.i18n=', this.$q.i18n, 'this.$q.getLocale()=', this.$q.lang.isoName)
-    const my = this.getLangAtt()
+    // console.log('this.$q.i18n=', this.$q.i18n, 'this.$q.getLocale()=', this.$q.lang.isoName)
+    const mybrowserLang = this.getLangAtt()
    // tools.showNotif(this.$q, 'prima: ' + String(my))

    let mylang = tools.getItemLS(tools.localStorage.lang)
    if (mylang === '') {
      if (navigator) {
        mylang = navigator.language
-        console.log(`LANG2 NAVIGATOR ${mylang}`)
+        // console.log(`LANG2 NAVIGATOR ${mylang}`)
      } else {
        mylang = this.$q.lang.isoName
      }

-      console.log('IMPOSTA LANGMY', mylang)
-    }
-    if (mylang !== '') {
-      if (mylang.toLowerCase() === 'enus') {
-        mylang = 'enUs'
-      }
-      if ((mylang.toLowerCase() === 'es') || (mylang.toLowerCase() === 'es-es')) {
-        mylang = 'es'
-      }
-      if ((mylang.toLowerCase() === 'enus') || (mylang.toLowerCase() === 'en-us')) {
-        mylang = 'enUs'
-      }
+      // console.log('IMPOSTA LANGMY', mylang)
    }

-    if (!mylang) {
-      mylang = process.env.LANG_DEFAULT
-    }
+    mylang = tools.checkLangPassed(mylang)

    this.setLangAtt(mylang)
    this.setshortlang(mylang)
@@ -269,7 +256,7 @@ export default class Header extends Vue {
    const mythis = this
    // console.log('Event LOAD')
    if (window) {
-      window.addEventListener('load', function() {
+      window.addEventListener('load', () => {
        // console.log('2) ENTERING Event LOAD')

        function updateOnlineStatus(event) {
@@ -297,4 +284,38 @@ export default class Header extends Vue {
      return m[1].toUpperCase()
    })
  }
+
+  get imglogo() {
+    return '../../' + tools.getimglogo()
+  }
+
+  get MenuCollapse() {
+    return GlobalStore.state.menuCollapse
+    // return true
+  }
+
+  get Username() {
+    return UserStore.state.username
+  }
+
+  get Verificato() {
+    return UserStore.state.verified_email
+  }
+
+  get Email() {
+    return UserStore.state.email
+  }
+
+  public logoutHandler() {
+    UserStore.actions.logout()
+      .then(() => {
+        this.$router.replace('/logout')
+
+        setTimeout(() => {
+          this.$router.replace('/')
+        }, 1000)
+
+        tools.showNotif(this.$q, this.$t('logout.uscito'), {icon: 'exit_to_app'})
+      })
+  }
 }
--- a/src/components/Header/Header.vue
+++ b/src/components/Header/Header.vue
@@ -1,28 +1,18 @@
 <template>
    <div>
-
-        <!--
-                <router-link :to="'/'" v-if="$router.currentRoute.meta.backButton">
-                    <button>
-                        <i>arrow_back</i>
-                    </button>
-                </router-link>
-        -->
-        <q-header elevated>
+        <q-header reveal elevated class="bg-primary text-white">
            <q-toolbar
                    color="primary"
                    :glossy="$q.theme === 'mat'"
                    :inverted="$q.theme === 'ios'"
-                    class="toolbar"
-            >
+                    class="toolbar">

                <q-btn
                        flat
                        dense
                        round
                        @click="leftDrawerOpen = !leftDrawerOpen"
-                        aria-label="Menu"
-                >
+                        aria-label="Menu">
                    <q-icon name="menu"/>
                </q-btn>

@@ -39,15 +29,22 @@
                    <!--I'm only rendered on Electron!-->
                </div>

-                <q-btn id="newvers" v-if="isNewVersionAvailable" color="secondary" rounded icon="refresh"
+                <q-btn ripple
+                       size="md"
+                       id="newvers" v-if="isNewVersionAvailable" color="secondary" rounded icon="refresh"
                       class="btnNewVersShow" @click="RefreshApp" :label="$t('notification.newVersionAvailable')"/>


                <q-toolbar-title>
+                    <q-avatar>
+                        <img :src="imglogo" height="27">
+                    </q-avatar>
                    {{$t('msg.myAppName')}}
                    <div slot="subtitle">{{$t('msg.myDescriz')}} {{ getAppVersion() }}</div>
                </q-toolbar-title>

+
+<!--
                <div v-if="isAdmin">
                    <q-btn flat dense round aria-label="">
                        <q-icon :class="clCloudUpload" name="cloud_upload"></q-icon>
@@ -58,8 +55,10 @@
                    </q-btn>

                </div>
+-->

                <q-btn
+                        v-if="!isonline"
                        flat
                        dense
                        round
@@ -102,19 +101,45 @@
                    <label>{{ $t('msg.hello') }}</label> <span v-model="prova"></span> !
                </div>-->

+                <q-btn dense flat round icon="menu" @click="right = !right" />

            </q-toolbar>

        </q-header>

        <q-drawer side="left"
-                         v-model="leftDrawerOpen"
-                         :content-class="['bg-grey-1', 'q-pa-sm']"
-                         :content-style="{padding: '0px'}"
+                  bordered
+                  show-if-above
+                  :breakpoint="500"
+                  v-model="leftDrawerOpen"
+                  :content-class="['bg-grey-1', 'q-pa-sm']"
+                  :content-style="{padding: '0px'}"
        >
            <drawer></drawer>

        </q-drawer>
+
+        <q-drawer v-model="right" side="right" overlay bordered>
+            <div id="profile" v-if="Username">
+                <q-img class="absolute-top" src="https://cdn.quasar-framework.org/img/material.png" style="height: 150px">
+                    <div class="absolute-bottom bg-transparent">
+
+                        <q-avatar class="q-mb-sm">
+                            <img src="../../statics/images/avatar-1.svg">
+                        </q-avatar>
+                        <div class="text-weight-bold">{{ Username }}</div>
+                        <!--<span class="text-white" v-if="Verificato"> {{$t('reg.verificato')}} </span>-->
+                        <!--<span class="text-white background-red" v-else> {{$t('reg.non_verificato')}} </span>-->
+                        <div id="user-actions">
+                            <q-btn round color="primary" icon="person"></q-btn>
+                            <q-btn round color="warning" icon="lock"></q-btn>
+                            <q-btn round color="secondary" icon="exit_to_app" @click='logoutHandler'></q-btn>
+                        </div>
+                    </div>
+                </q-img>
+
+            </div>
+        </q-drawer>
    </div>
 </template>

--- a/src/components/logo/logo.ts
+++ b/src/components/logo/logo.ts
@@ -5,19 +5,20 @@ import { TimelineLite, Back } from 'gsap'

 import $ from 'jquery'
 import Timeout = NodeJS.Timeout
+import { tools } from "@src/store/Modules/tools"

@Component({

 })
 export default class Logo extends Vue {
-  logoimg: string = ''
+  public logoimg: string = ''

-  created() {
-    this.logoimg = 'statics/images/' + process.env.LOGO_REG
+  public created() {
+    this.logoimg = '../../' + tools.getimglogo()
    this.animate()
  }

-  animate () {
+  public animate() {
    const timeline = new TimelineLite()

    /*
@@ -31,7 +32,6 @@ export default class Logo extends Vue {
      mysmile.addClass('smile_hide')
    }, 1000)

-
    setTimeout(() => {
      mysmile.addClass('smilevisible')
      mysmile.removeClass('smile_hide')
@@ -39,7 +39,6 @@ export default class Logo extends Vue {

    */

-
    /*
    timeline.to('#smile', 5, {
      cy: 20,
--- a/src/components/todos/SingleTodo/SingleTodo.scss
+++ b/src/components/todos/SingleTodo/SingleTodo.scss
@@ -230,6 +230,11 @@ $heightdescr: 20px;
  line-height: $heightitem;
  padding-left: 2px;
  padding-right: 0px;
+
+  @media (max-width: 600px) {
+    display: none;
+  }
+
  //height: $heightBtn;
  //line-height: $heightBtn;
 }
@@ -265,6 +270,8 @@ $heightdescr: 20px;
  color: blue !important;
  overflow: hidden;

+  align-items: center;
+
  vertical-align: middle;
  line-height: 120%;

--- a/src/components/todos/SingleTodo/SingleTodo.vue
+++ b/src/components/todos/SingleTodo/SingleTodo.vue
@@ -1,12 +1,5 @@
 <template>
    <div :class="getClassRow()" @click="clickRow">
-        <!--<div v-if="isTodo()" class="flex-item counter-item dragula-container">{{itemtodo.pos}}</div>-->
-        <!--<div v-if="isFirst">-->
-        <!--<q-context-menu ref="contextMenu">-->
-        <!--<SubMenus :menuPopupTodo="menuPopupTodo" :itemtodo="itemtodo" @clickMenu="clickMenu" @setPriority="setPriority"></SubMenus>-->
-        <!--</q-context-menu>-->
-        <!--</div>-->
-
        <div v-if="isTodo()" class="flex-item completed-item donotdrag">
            <q-btn push flat
                   :class="classCompleted"
@@ -19,6 +12,7 @@
            <q-input v-if="sel && !itemtodo.completed" hide-underline type="textarea" ref="inputdescr"
                     v-model.trim="precDescr"
                     autogrow
+                     borderless
                     dense
                     :class="classDescrEdit" :max-height="100"
                     @keydown="keyDownArea" v-on:keydown.esc="exitEdit" @blur="exitEdit(true)" @click="editTodo()"/>
--- a/src/components/todos/SubMenus/SubMenus.vue
+++ b/src/components/todos/SubMenus/SubMenus.vue
@@ -2,7 +2,7 @@
    <div>
        <q-list separator no-border class="todo-menu">
            <div v-for="field in menuPopupTodo" :key="field.value">
-                <q-item clickable v-ripple v-if="(field.value !== 130) && (field.value !== 100)" :icon="field.icon"
+                <q-item clickable v-if="(field.value !== 130) && (field.value !== 100)" :icon="field.icon"
                        @click.native="clickMenu(field.value)">
                    <q-item-section avatar>
                        <q-icon :name="field.icon"/>
--- a/src/components/todos/todo/todo.vue
+++ b/src/components/todos/todo/todo.vue
@@ -10,22 +10,26 @@
                            <q-menu id="popconfig" self="top right">
                                <q-list link separator no-border class="todo-menu">
                                    <div v-for="field in menuPopupConfigTodo" :key="field.value">
-                                        <q-item :icon="field.icon"
-                                                @click.native="">
-                                            <q-item-section :icon="field.icon"/>
+                                        <q-item clickable>

-                                            <q-item-label v-if="showTask(field.value)">
+                                            <q-item-section avatar>
+                                                <q-icon :name="field.icon"/>
+                                            </q-item-section>

-                                                <q-select
-                                                        radio
-                                                        color="secondary"
-                                                        :float-label="field.label"
-                                                        v-model="showtype"
-                                                        :options="listOptionShowTask"/>
-                                            </q-item-label>
-                                            <q-item-label v-else>
-                                                <q-item-section label class="item-menu">{{field.label}}</q-item-section>
-                                            </q-item-label>
+                                            <q-item-section>
+                                                <q-item-label v-if="showTask(field.value)">
+
+                                                    <q-select
+                                                            color="secondary"
+                                                            :label="field.label"
+                                                            v-model="showtype"
+                                                            :options="listOptionShowTask"/>
+                                                </q-item-label>
+                                                <q-item-label v-else>
+                                                    <q-item-section label class="item-menu">{{field.label}}
+                                                    </q-item-section>
+                                                </q-item-label>
+                                            </q-item-section>
                                        </q-item>
                                    </div>
                                </q-list>
@@ -40,7 +44,7 @@
                     :after="[{icon: 'arrow_forward', content: true, handler () {}}]"
                     v-on:keyup.enter="insertTodo(true)">
                <template v-slot:prepend>
-                    <q-icon name="add" />
+                    <q-icon name="add"/>
                </template>
            </q-input>