update pages menu

mohssineAboutaj · Sep 14, 2021 · 33ff69b · 33ff69b
1 parent 2947b81
commit 33ff69b
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 56 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "telefaza",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "A Cross-platform streaming/IPTV app",
   "productName": "Telefaza",
   "author": "Mohssine Aboutaj",

diff --git a/src/components/navbar.component.vue b/src/components/navbar.component.vue
@@ -8,12 +8,7 @@
         aria-label="Menu"
         @click="$root.$emit('toggle-channels-drawer-event')"
       />
-      <q-btn
-        v-else
-        v-bind="iconsSharedProps"
-        icon="mdi-television-classic"
-        to="/"
-      />
+      <q-btn v-else v-bind="iconsSharedProps" icon="mdi-home" to="/" />
 
       <q-btn
         v-if="startWatching"
@@ -25,18 +20,26 @@
 
       <q-toolbar-title class="text-capitalize">{{ title }}</q-toolbar-title>
 
-      <q-tabs>
-        <q-route-tab
-          v-for="tab in items"
-          :key="tab.label"
-          :label="isSmall ? '' : tab.label"
-          :icon="setIconStyleByRoute(tab.to, tab.icon)"
-          :to="tab.to"
-          @click="$root.$emit('update-appbar-title-event', tab.label)"
-        >
-          <q-tooltip>{{ titleCase(tab.label) }}</q-tooltip>
-        </q-route-tab>
-      </q-tabs>
+      <q-btn icon="mdi-dots-vertical" aria-label="Setting">
+        <q-menu>
+          <q-list>
+            <q-item
+              v-for="item in items"
+              :key="item.label"
+              :to="item.to"
+              active-class="text-white bg-primary"
+              router
+              exact
+              @click="$root.$emit('update-appbar-title-event', item.label)"
+            >
+              <q-item-section avatar>
+                <q-icon :name="item.icon" />
+              </q-item-section>
+              <q-item-section>{{ item.label }}</q-item-section>
+            </q-item>
+          </q-list>
+        </q-menu>
+      </q-btn>
     </q-toolbar>
   </q-header>
 </template>

diff --git a/src/pages/Home.vue b/src/pages/Home.vue
@@ -84,8 +84,10 @@
 
     <q-page class="flex flex-center">
       <div v-if="fresh" class="text-center text-capitalize q-pa-md">
-        <h1 class="text-h1">{{ originalTitle }}</h1>
-        <h3 class="text-h3">choose a channel/category</h3>
+        <h1 class="text-h3">{{ originalTitle }}</h1>
+        <h3 class="text-h6">
+          watch your favourite TV channel online
+        </h3>
       </div>
       <vue-player
         v-else

diff --git a/src/pages/Settings.vue b/src/pages/Settings.vue
@@ -1,40 +1,42 @@
 <template>
   <q-page-container>
-    <q-card class="text-capitalize" padding>
-      <q-card-section>
-        <h2 class="text-h2 text-center">Settings</h2>
-      </q-card-section>
-      <q-card-section>
-        <q-list>
-          <q-item v-ripple>
-            <q-item-section avatar>
-              <q-icon name="mdi-bookmark" />
-            </q-item-section>
-            <q-item-section>remove all favourites channels</q-item-section>
-            <q-item-section avatar>
-              <q-btn
-                color="negative"
-                icon="mdi-delete"
-                @click="confirmDelete = !confirmDelete"
-              >
-                <q-tooltip>Delete</q-tooltip>
-              </q-btn>
-            </q-item-section>
-          </q-item>
-          <q-item v-ripple>
-            <q-item-section avatar>
-              <q-icon name="mdi-volume-off" />
-            </q-item-section>
-            <q-item-section>muted channedl when playing</q-item-section>
-            <q-item-section avatar>
-              <q-toggle color="primary" v-model="muted">
-                <q-tooltip>Toggle Mute</q-tooltip>
-              </q-toggle>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card-section>
-    </q-card>
+    <q-page padding>
+      <q-card class="text-capitalize" padding>
+        <q-card-section>
+          <h2 class="text-h2 text-center">Settings</h2>
+        </q-card-section>
+        <q-card-section>
+          <q-list>
+            <q-item v-ripple>
+              <q-item-section avatar>
+                <q-icon name="mdi-bookmark" />
+              </q-item-section>
+              <q-item-section>remove all favourites channels</q-item-section>
+              <q-item-section avatar>
+                <q-btn
+                  color="negative"
+                  icon="mdi-delete"
+                  @click="confirmDelete = !confirmDelete"
+                >
+                  <q-tooltip>Delete</q-tooltip>
+                </q-btn>
+              </q-item-section>
+            </q-item>
+            <q-item v-ripple>
+              <q-item-section avatar>
+                <q-icon name="mdi-volume-off" />
+              </q-item-section>
+              <q-item-section>muted channedl when playing</q-item-section>
+              <q-item-section avatar>
+                <q-toggle color="primary" v-model="muted">
+                  <q-tooltip>Toggle Mute</q-tooltip>
+                </q-toggle>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-card-section>
+      </q-card>
+    </q-page>
 
     <q-dialog v-model="confirmDelete" persistent>
       <q-card>