[*] refactor: video-editor

Author: heng30

wayshot/ui/desktop-window.slint

@@ -19,10 +19,10 @@ import {
 import { DesktopPanel } from "panel/desktop/desktop.slint";
 
 export component AppWindow inherits Window {
-    width: Theme.default-width;
-    height: Theme.default-height;
-    // preferred-width: Theme.default-width;
-    // preferred-height: Theme.default-height;
+    // width: Theme.default-width;
+    // height: Theme.default-height;
+    preferred-width: Theme.default-width;
+    preferred-height: Theme.default-height;
     default-font-size: Theme.default-font-size;
     default-font-weight: Theme.normal-font-weight;
     default-font-family: Theme.default-font-family;

wayshot/ui/panel/desktop/video-editor/left-panel/left-panel.slint

@@ -37,6 +37,7 @@ export component LeftPanel inherits Rectangle {
 
         hbox := HorizontalLayout {
             alignment: LayoutAlignment.center;
+            padding-right: Theme.padding;
 
             TabBtns {
                 items: [

wayshot/ui/panel/desktop/video-editor/preview.slint

@@ -147,6 +147,7 @@ export component PreviewWindow inherits Rectangle {
 
 component ProcessTime inherits VerticalLayout {
     alignment: center;
+    padding-left: Theme.padding * 2;
 
     HorizontalLayout {
         spacing: Theme.spacing * 2;
@@ -187,6 +188,7 @@ component Volume inherits HorizontalLayout {
 
             AudioLevel {
                 height: parent.height;
+                width: 250px;
                 db: Store.video-editor-preview-volume.left;
                 enable: Store.setting-control.enable-audio;
             }
@@ -204,6 +206,7 @@ component Volume inherits HorizontalLayout {
 
             AudioLevel {
                 height: root.height / 3;
+                width: 250px;
                 db: Store.video-editor-preview-volume.right;
                 enable: Store.setting-control.enable-audio;
             }
@@ -235,10 +238,9 @@ export component Preview inherits Rectangle {
             HorizontalLayout {
                 alignment: end;
                 height: hbox.preferred-height * 0.8;
+                padding-right: Theme.padding * 2;
 
-                Volume {
-                    width: min(250px, root.width * 0.25);
-                }
+                Volume { }
             }
         }
     }

wayshot/ui/panel/desktop/video-editor/right-panel/filter/filter.slint

@@ -119,7 +119,7 @@ component SegmentFilterList inherits Rectangle {
 
     border-radius: Theme.border-radius;
     border-width: Theme.default-border-width;
-    border-color: Theme.thirdly-background;
+    border-color: Theme.base-border-color;
     clip: true;
 
     VerticalLayout {

wayshot/ui/panel/desktop/video-editor/right-panel/subtitle.slint

@@ -61,6 +61,7 @@ component SubtitleBody inherits Flickable {
 
     VerticalLayout {
         spacing: Theme.spacing * 2;
+        alignment: start;
 
         VerticalLayout {
             alignment: start;
@@ -129,6 +130,7 @@ component SubtitleBody inherits Flickable {
         te := TxtEdit {
             placeholder: Logic.tr("Input subtitle");
             text: checked-index == 0 ? "" : edited-subtitle.subtitle;
+            height: Theme.default-font-size * 10;
         }
 
         HorizontalLayout {

wayshot/ui/panel/desktop/video-editor/tracks/tracks.slint

@@ -178,7 +178,7 @@ export component Tracks inherits Rectangle {
         }
     }
 
-    Divider {
+    divider := Divider {
         x: tlvbox.x + tl.track-header-width;
         y: tlvbox.y;
         width: Theme.default-border-width;

wayshot/ui/panel/desktop/video-editor/video-editor.slint

@@ -67,7 +67,7 @@ component Body inherits Rectangle {
 
 export component VideoEditor inherits Rectangle {
     fs-timer := Timer {
-        interval: 1s;
+        interval: 200ms;
         running: true;
 
         triggered() => {