Merge pull request #151 from ttshivers/style

Code style fixes
ttshivers · Sep 11, 2020 · 3b782a0 · 3b782a0
2 parents a5bc750 + 1f5cdf3
commit 3b782a0
Show file tree

Hide file tree

Showing 44 changed files with 666 additions and 872 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/App.vue b/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <v-app>
-    <leftsidebar />
-    <rightsidebar v-if="IS_IN_ROOM" />
+    <TheSidebarLeft />
+    <TheSidebarRight v-if="IS_IN_ROOM" />
 
     <v-app-bar
       app
@@ -12,7 +12,7 @@
       <v-app-bar-nav-icon @click="SET_LEFT_SIDEBAR_OPEN" />
 
       <router-link
-        :to="{ name: 'CreateRoom'}"
+        :to="{ name: 'RoomCreation'}"
       >
         <picture>
           <source
@@ -27,7 +27,7 @@
         </picture>
       </router-link>
 
-      <nowplayingchip
+      <TheNowPlayingChip
         v-if="showNowPlaying"
         class="pl-4"
       />
@@ -65,7 +65,7 @@
           {{ item.title }}
         </v-btn>
 
-        <donate v-slot="{ on, attrs }">
+        <DonateDialog #default="{ on, attrs }">
           <v-btn
             small
             class="hidden-sm-and-down"
@@ -75,7 +75,7 @@
           >
             Donate ♥
           </v-btn>
-        </donate>
+        </DonateDialog>
 
         <v-btn
           v-if="IS_IN_ROOM"
@@ -93,9 +93,9 @@
 
       <template
         v-if="showCrumbs"
-        v-slot:extension
+        #extension
       >
-        <crumbs />
+        <TheAppBarCrumbs />
 
         <v-spacer />
 
@@ -149,14 +149,13 @@
               :color="GET_SNACKBAR_MESSAGE.color"
               bottom
               timeout="4000"
+              content-class="text-center"
               @input="SET_SNACKBAR_OPEN"
             >
-              <div style="text-align: center; width: 100%;">
-                {{ GET_SNACKBAR_MESSAGE.text }}
-              </div>
+              {{ GET_SNACKBAR_MESSAGE.text }}
             </v-snackbar>
 
-            <upnext v-if="GET_UP_NEXT_POST_PLAY_DATA" />
+            <TheUpnextDialog v-if="GET_UP_NEXT_POST_PLAY_DATA" />
           </v-sheet>
         </v-img>
       </v-container>
@@ -176,12 +175,12 @@ import { slPlayerClientId } from '@/player/constants';
 
 export default {
   components: {
-    rightsidebar: () => import('@/components/sidebars/rightsidebar.vue'),
-    upnext: () => import('@/components/upnext.vue'),
-    nowplayingchip: () => import('@/components/nowplayingchip.vue'),
-    leftsidebar: () => import('@/components/sidebars/leftsidebar.vue'),
-    donate: () => import('@/components/donate.vue'),
-    crumbs: () => import('@/components/crumbs.vue'),
+    TheSidebarLeft: () => import('@/components/TheSidebarLeft.vue'),
+    TheSidebarRight: () => import('@/components/TheSidebarRight.vue'),
+    TheUpnextDialog: () => import('@/components/TheUpnextDialog.vue'),
+    TheNowPlayingChip: () => import('@/components/TheNowPlayingChip.vue'),
+    DonateDialog: () => import('@/components/DonateDialog.vue'),
+    TheAppBarCrumbs: () => import('@/components/TheAppBarCrumbs.vue'),
   },
 
   mixins: [
@@ -249,13 +248,14 @@ export default {
     },
 
     showNowPlaying() {
-      return this.GET_ACTIVE_SERVER_ID && this.$route.name === 'browse';
+      return this.GET_ACTIVE_SERVER_ID && this.$route.name !== 'NowPlaying'
+       && this.$route.name !== 'WebPlayer';
     },
 
     showCrumbs() {
       // TODO: rewrite this logic but I'm lazy now
       return !(this.$route.path.indexOf('browse') === -1
-        && this.$route.path.indexOf('nowplaying') === -1);
+        && this.$route.name !== 'NowPlaying');
     },
 
     smallLogoMedia() {
@@ -280,7 +280,7 @@ export default {
         }
 
         const invitePart = this.$router.resolve({
-          name: 'join',
+          name: 'RoomJoin',
           params: {
             room: this.GET_ROOM,
             ...(this.GET_SERVER.length > 0 && { server: this.GET_SERVER }),
@@ -306,23 +306,23 @@ export default {
       if (this.IS_IN_ROOM && this.GET_CHOSEN_CLIENT_ID !== slPlayerClientId) {
         if (metadata) {
           this.redirectToMediaPage();
-        } else if (this.$route.fullPath.indexOf('/nowplaying') > -1) {
-          this.$router.push({ name: 'browse' });
+        } else if (this.$route.name === 'NowPlaying') {
+          this.$router.push({ name: 'PlexHome' });
         }
       }
     },
 
     GET_NAVIGATE_TO_PLAYER(navigate) {
       if (navigate) {
-        this.$router.push({ name: 'player' });
+        this.$router.push({ name: 'WebPlayer' });
         this.SET_NAVIGATE_TO_PLAYER(false);
       }
     },
 
     async GET_NAVIGATE_HOME(navigate) {
       if (navigate) {
         console.debug('NAVIGATE_HOME');
-        this.$router.push('/');
+        this.$router.push({ name: 'RoomCreation' });
         this.SET_NAVIGATE_HOME(false);
       }
     },
@@ -359,9 +359,6 @@ export default {
 
   methods: {
     ...mapActions([
-      'SET_LEFT_SIDEBAR_OPEN',
-      'SET_RIGHT_SIDEBAR_OPEN',
-      'TOGGLE_RIGHT_SIDEBAR_OPEN',
       'DISPLAY_NOTIFICATION',
     ]),
 
@@ -378,6 +375,9 @@ export default {
       'SET_SNACKBAR_OPEN',
       'SET_NAVIGATE_TO_PLAYER',
       'SET_NAVIGATE_HOME',
+      'TOGGLE_RIGHT_SIDEBAR_OPEN',
+      'SET_RIGHT_SIDEBAR_OPEN',
+      'SET_LEFT_SIDEBAR_OPEN',
     ]),
 
     ...mapMutations('plex', [

diff --git a/src/assets/css/style.css b/src/assets/css/style.css
@@ -1,22 +1,4 @@
-/* Helpers */
-
-.truncate {
-  display: block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.center-text {
-  text-align: center;
-}
-
-.soft-text {
-  opacity: 0.7;
-}
-
 /* Headers */
-
 h3 {
   color: white;
 }
@@ -29,81 +11,16 @@ h5 {
   color: #e5a00d;
 }
 
-h6 {
-  color: white;
-}
-
-/* Background/Text Colors */
-
-a:hover,
-a:visited,
-a:link,
-a:active {
-  text-decoration: none;
-}
-
-html {
-  overflow: auto;
-  overflow-x: hidden;
-}
-
-::-webkit-scrollbar {
-  /* remove scrollbar space */
-  background: transparent;
-
-  /* optional: just make scrollbar invisible */
-  width: 2px;
-  height: 2px;
-}
-
 .pt-orange {
   background-color: #e5a00d;
 }
 
-.pt-orange-text {
-  color: #e5a00d;
-}
-
-.highlightBorder {
-  border: solid 2px #f3b32b;
-}
-
 main {
   background: #2b5876;
   background: linear-gradient(to bottom, #1f1c2c, #182848);
 }
 
-.input-group--text-field.input-group--focused label {
-  color: #e5a00d;
-}
-
-.input-group--focused {
-  border-color: #e5a00d;
-}
-
-.card {
-  /* border-radius */
-  -webkit-border-radius: 5px !important;
-  -moz-border-radius: 5px !important;
-  border-radius: 5px !important;
-
-  /* box-shadow */
-  -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12) !important;
-  -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12) !important;
-  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12) !important;
-}
-
-/* FIX Chat text not wrapping */
-.list__tile__sub-title,
-.v-list__tile__title {
-  overflow-wrap: break-word;
-  overflow-x: visible;
-  white-space: initial;
-  text-overflow: initial;
-}
-
 /* PlexBrowser */
-
 .pt-content-unwatched {
   position: absolute;
   top: 0;
@@ -116,11 +33,16 @@ main {
   background: white;
 }
 
-.progress-linear .progress-linear__bar {
-  background: white;
+/* Scrollbar */
+::-webkit-scrollbar {
+  /* remove scrollbar space */
+  background: transparent;
+
+  /* optional: just make scrollbar invisible */
+  width: 2px;
+  height: 2px;
 }
 
-/* Scrollbar */
 ::-webkit-scrollbar-button {
   width: 2px;
   height: 2px;
@@ -153,7 +75,3 @@ main {
 ::-webkit-scrollbar-track:active {
   background: #333;
 }
-
-.thick--text {
-  font-weight: 600;
-}
diff --git a/src/components/donate.vue → src/components/DonateDialog.vue b/src/components/donate.vue → src/components/DonateDialog.vue
@@ -3,7 +3,7 @@
     v-model="donateDialog"
     max-width="650px"
   >
-    <template v-slot:activator="stuff">
+    <template #activator="stuff">
       <slot
         v-bind="stuff"
       />
@@ -90,7 +90,7 @@
 
         <v-divider />
 
-        <p class="pa-2 soft-text mb-0 pb-0">
+        <p class="pa-2 text--secondary mb-0 pb-0">
           If you make a donation, stop by the Discord and message samcm#2715
           to get your Donator role. Thankyou!
         </p>
@@ -114,6 +114,8 @@
 import clipboard from '@/mixins/clipboard';
 
 export default {
+  name: 'DonateDialog',
+
   mixins: [
     clipboard,
   ],

diff --git a/src/components/libraryviewbutton.vue → src/components/LibraryViewButton.vue b/src/components/libraryviewbutton.vue → src/components/LibraryViewButton.vue
@@ -11,6 +11,8 @@
 import { mapGetters, mapMutations } from 'vuex';
 
 export default {
+  name: 'LibraryViewButton',
+
   computed: {
     ...mapGetters([
       'IS_LIBRARY_LIST_VIEW',

diff --git a/src/components/messaging/MessageInput.vue → src/components/MessageInput.vue b/src/components/messaging/MessageInput.vue → src/components/MessageInput.vue
@@ -16,6 +16,8 @@
 import { mapActions } from 'vuex';
 
 export default {
+  name: 'MessageInput',
+
   data() {
     return {
       messageToBeSent: '',