feat: badge on setting icon and update tab when update is available

antares-sql · Aug 17, 2020 · e8141b6 · e8141b6
1 parent 0b6a188
commit e8141b6
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 7 deletions.
diff --git a/src/renderer/components/ModalSettings.vue b/src/renderer/components/ModalSettings.vue
@@ -34,7 +34,7 @@
                         :class="{'active': selectedTab === 'update'}"
                         @click="selectTab('update')"
                      >
-                        <a class="c-hand" :class="{'badge': isUpdate}">{{ $t('word.update') }}</a>
+                        <a class="c-hand" :class="{'badge badge-update': hasUpdates}">{{ $t('word.update') }}</a>
                      </li>
                      <li
                         class="tab-item"
@@ -135,7 +135,6 @@ export default {
    },
    data () {
       return {
-         isUpdate: false,
          localLocale: null,
          localTimeout: null,
          selectedTab: 'general'
@@ -147,14 +146,18 @@ export default {
          appVersion: 'application/appVersion',
          selectedSettingTab: 'application/selectedSettingTab',
          selectedLocale: 'settings/getLocale',
-         notificationsTimeout: 'settings/getNotificationsTimeout'
+         notificationsTimeout: 'settings/getNotificationsTimeout',
+         updateStatus: 'application/getUpdateStatus'
       }),
       locales () {
          const locales = [];
          for (const locale of this.$i18n.availableLocales)
             locales.push({ code: locale, name: localesNames[locale] });
 
          return locales;
+      },
+      hasUpdates () {
+         return ['available', 'downloading', 'downloaded'].includes(this.updateStatus);
       }
    },
    created () {
@@ -198,6 +201,11 @@ export default {
       background: #32b643;
     }
 
+    .badge-update::after {
+      bottom: initial;
+      background: $primary-color;
+    }
+
     .form-label {
       display: flex;
       align-items: center;

diff --git a/src/renderer/components/TheSettingBar.vue b/src/renderer/components/TheSettingBar.vue
@@ -37,7 +37,7 @@
       <div class="settingbar-bottom-elements">
          <ul class="settingbar-elements">
             <li class="settingbar-element btn btn-link ex-tooltip" @click="showSettingModal('general')">
-               <i class="settingbar-element-icon mdi mdi-24px mdi-cog text-light" />
+               <i class="settingbar-element-icon mdi mdi-24px mdi-cog text-light" :class="{' badge badge-update': hasUpdates}" />
                <span class="ex-tooltip-content">{{ $t('word.settings') }}</span>
             </li>
          </ul>
@@ -70,7 +70,8 @@ export default {
          getConnections: 'connections/getConnections',
          getConnectionName: 'connections/getConnectionName',
          connected: 'workspaces/getConnected',
-         selectedWorkspace: 'workspaces/getSelected'
+         selectedWorkspace: 'workspaces/getSelected',
+         updateStatus: 'application/getUpdateStatus'
       }),
       connections: {
          get () {
@@ -79,6 +80,9 @@ export default {
          set (value) {
             this.updateConnections(value);
          }
+      },
+      hasUpdates () {
+         return ['available', 'downloading', 'downloaded'].includes(this.updateStatus);
       }
    },
    methods: {
@@ -169,6 +173,11 @@ export default {
             position: absolute;
             background: $success-color;
           }
+
+          &.badge-update::after {
+            bottom: initial;
+            background: $primary-color;
+          }
         }
       }
     }

diff --git a/src/renderer/components/Workspace.vue b/src/renderer/components/Workspace.vue
@@ -3,15 +3,15 @@
       <WorkspaceExploreBar :connection="connection" :is-selected="isSelected" />
       <div v-if="workspace.connected" class="workspace-tabs column columns col-gapless">
          <ul class="tab tab-block column col-12">
-            <li
+            <!-- <li
                v-if="workspace.breadcrumbs.table"
                class="tab-item"
             >
                <a class="tab-link">
                   <i class="mdi mdi-18px mdi-tune mr-1" />
                   <span :title="workspace.breadcrumbs.table">{{ $t('word.properties').toUpperCase() }}: {{ workspace.breadcrumbs.table }}</span>
                </a>
-            </li>
+            </li> -->
             <li
                v-if="workspace.breadcrumbs.table"
                class="tab-item"