Add stretch actions to the popup, styling

src/csui/PlayerUiComponent.vue

@@ -2,14 +2,23 @@
   <div class="uw-hover uv-hover-trigger-region">
     TEST CONTENT
   </div>
-  <div class="popup-panel">
-    <div class="tab-row flex flex-row">
+  <div class="popup-panel flex flex-row">
+    <div class="tab-row flex flex-column">
       <div class="tab">
         todo: icon<br/>
         Video options
       </div>
+      <div class="tab">
+        Autodetection options
+      </div>
+      <div class="tab">
+        Advanced options
+      </div>
+      <div class="tab">
+        Debugging
+      </div>
     </div>
-    <div>sudpo 
+    <div>
       <!-- Panel section -->
       <template v-if="settingsInitialized">
         <VideoSettings
@@ -115,6 +124,7 @@ export default {
 </script>
 
 <style lang="scss" src="../res/css/uwui-base.scss" scoped></style>
+<style lang="scss" src="../res/css/flex.scss" scoped></style>
 <style lang="scss" scoped>
 @import '../res/css/uwui-base.scss';
 @import '../res/css/colors.scss';
@@ -149,7 +159,7 @@ export default {
 
     top: 10%;
     left: 10%;
-    
+
     z-index: 999999999999999999;
 
     width: 2500px;
@@ -183,4 +193,4 @@ export default {
 }
 
 
-</style>
+</style>

src/csui/PlayerUiPanels/VideoSettings.vue

@@ -1,34 +1,38 @@
 <template>
-  <div class="" style="padding-bottom: 20px">
-    <div>
+  <div class="flex flex-row flex-wrap" style="padding-bottom: 20px">
+    <div class="sub-panel">
       <h1>Crop video:</h1>
-      <div class="flex flex-row flex-wrap">
+      <div class="sub-panel-content flex flex-row flex-wrap">
         <ShortcutButton v-for="(action, index) of aspectRatioActions"
                         class="flex b3 flex-grow button"
                         :key="index"
                         :label="(action.scopes.page && action.scopes.page.label) ? action.scopes.page.label : action.label"
                         :shortcut="parseShortcut(action)"
-                        @clic.native="execAction(action)"
+                        @click.native="execAction(action)"
         >
-
         </ShortcutButton>
       </div>
-
-
     </div>
-    <div>
-      <h1>Streth video:</h1>
+    <div class="sub-panel">
+      <h1>Stretch video:</h1>
       <div class="flex flex-row flex-wrap">
-        <div @click="testAction()">TEST CLICK ME</div>
+        <ShortcutButton v-for="(action, index) of stretchActions"
+                        class="flex b3 flex-grow button"
+                        :key="index"
+                        :label="(action.scopes.page && action.scopes.page.label) ? action.scopes.page.label : action.label"
+                        :shortcut="parseShortcut(action)"
+                        @click.native="execAction(action)"
+        >
+        </ShortcutButton>
       </div>
     </div>
-    <div>
+    <div class="sub-panel">
       <h1>Manual zoom:</h1>
       <div class="flex flex-row flex-wrap">
 
       </div>
     </div>
-    <div>
+    <div class="sub-panel">
       <h1>Video alignment:</h1>
       <div class="flex flex-row flex-wrap">
 
@@ -109,7 +113,9 @@ export default {
 }
 </script>
 
-<style>
+<style lang="scss" src="../../res/css/flex.scss" scoped></style>
+<style lang="scss" src="../res-common/panels.scss"></style>
+<style lang="scss" scoped>
 .b3 {
   width: 9rem;
   padding-left: 0.33rem;
@@ -124,4 +130,5 @@ export default {
   padding-top: 8px;
 }
 
+
 </style>

src/csui/res-common/panels.scss

@@ -0,0 +1,7 @@
+.sub-panel {
+  max-width: 52rem;
+  margin: 2rem;
+}
+.sub-panel-content {
+  margin-top: 1.5rem;
+}