Merge branch 'main' of https://github.com/ciderapp/Cider

src/renderer/views/components/fullscreen.ejs

@@ -79,15 +79,23 @@
                     <div>Name</div>
                     <div>Name</div>
                 </div> -->
-                <div class="lyrics-col">
-                    <lyrics-view :yoffset="10" :time="time" :lyrics="lyrics"
+                <div class="lyrics-col" v-if="tabMode == 'lyrics'">
+                    <lyrics-view :yoffset="120" :time="time" :lyrics="lyrics"
                     :richlyrics="richlyrics"></lyrics-view>
-                <div>
+                </div>
+                <div class="queue-col" v-if="tabMode == 'queue'">    
+                    <cider-queue v-if="tabMode == 'queue'" ref="queue" ></cider-queue>    
+                </div>
             </div>
         </div>
-
-
+        <div class="tab-toggles">
+            <div class="lyrics" :class="{active: tabMode == 'lyrics'}" @click="tabMode = 'lyrics'"></div>
+            <div class="queue"  :class="{active: tabMode == 'queue'}" @click="tabMode = 'queue'"></div>
+        </div> 
     </div>
+ 
+
+
 </script>
 
 <script>
@@ -99,21 +107,22 @@
                 required: false
             },
             lyrics: {
-                type:  Array,
+                type: Array,
                 required: false
             },
             richlyrics: {
-                type:  Array,
+                type: Array,
                 required: false
             },
             image: {
                 type: String,
                 required: false
-            }
+            },
         },
-        data: function(){
+        data: function () {
             return {
-                app : this.$root,
+                app: this.$root,
+                tabMode: "lyrics",
             }
         },
         methods: {

src/renderer/views/svg/list.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path fill="white" d="M80 368H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm0-320H16A16 16 0 0 0 0 64v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16V64a16 16 0 0 0-16-16zm0 160H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm416 176H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-320H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 160H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z"/></svg>

src/renderer/views/svg/quote-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path fill="white" d="M464 32H336c-26.5 0-48 21.5-48 48v128c0 26.5 21.5 48 48 48h80v64c0 35.3-28.7 64-64 64h-8c-13.3 0-24 10.7-24 24v48c0 13.3 10.7 24 24 24h8c88.4 0 160-71.6 160-160V80c0-26.5-21.5-48-48-48zm-288 0H48C21.5 32 0 53.5 0 80v128c0 26.5 21.5 48 48 48h80v64c0 35.3-28.7 64-64 64h-8c-13.3 0-24 10.7-24 24v48c0 13.3 10.7 24 24 24h8c88.4 0 160-71.6 160-160V80c0-26.5-21.5-48-48-48z"/></svg>