[*] refactor

Author: heng30

todo.md

@@ -1,11 +1,12 @@
 ## 问题
 - subtitle需要重新设计
 
-- 选中的font没有显示在字体列表中
-- fly in filter参数面板暂停时会恢复默认值
+- preview相关界面中，没有filter的也会进入编辑模式
 
 ## 待验证
-- font 列表显示有问题，条目变少了。刷新时有275条，但是显示时却只有254条
+- 选中的font没有显示在字体列表中
+- 选中segment边框颜色不能写，可以增加边框宽度
+- font列表刷新成功应该显示toast
 
 - 视频轨道分离字幕
 

wayshot/src/logic/video_editor/font.rs

@@ -57,9 +57,12 @@ fn init_font_dialog(ui: &AppWindow) {
 
 fn refresh_font_entries(ui: &AppWindow) {
     let ui_weak = ui.as_weak();
+
     tokio::spawn(async move {
         refresh_font_entries_impl(ui_weak).await;
     });
+
+    crate::toast_success!(ui, "Refresh...");
 }
 
 async fn refresh_font_entries_impl(ui_weak: Weak<AppWindow>) {

wayshot/ui/base/line-input.slint

@@ -39,6 +39,8 @@ export component LineInput inherits Rectangle {
     out property has-focus <=> text-input.has-focus;
     out property <color> default-border-color: text-input.has-focus ? Theme.thirdly-brand-color : Theme.base-border-color;
     in-out property <bool> show-icon-hover-background: true;
+    in-out property <bool> is-show-color-block;
+    in-out property <color> color-block-color;
 
     in property <bool> is-show-icon;
     in property <image> icon;
@@ -93,15 +95,29 @@ export component LineInput inherits Rectangle {
                         accept
                     }
 
-                    text-input := TextInput {
-                        single-line: true;
-                        vertical-alignment: TextVerticalAlignment.center;
-                        color: root.enabled ? Theme.primary-text-color : root.disabled-color;
-                        font-size: Theme.default-font-size;
+                    HorizontalLayout {
+                        spacing: Theme.spacing * 2;
 
-                        accepted => {
-                            self.clear-focus();
-                            root.accepted();
+                        if is-show-color-block: VerticalLayout {
+                            alignment: center;
+
+                            Rectangle {
+                                width: text-input.font-size * 0.8;
+                                height: self.width;
+                                background: color-block-color;
+                            }
+                        }
+
+                        text-input := TextInput {
+                            single-line: true;
+                            vertical-alignment: TextVerticalAlignment.center;
+                            color: root.enabled ? Theme.primary-text-color : root.disabled-color;
+                            font-size: Theme.default-font-size;
+
+                            accepted => {
+                                self.clear-focus();
+                                root.accepted();
+                            }
                         }
                     }
                 }

wayshot/ui/panel/desktop/font-dialog.slint

@@ -175,52 +175,59 @@ export component FontDialog inherits MovingDialog {
         Logic.init-font-dialog();
     }
 
-    VerticalLayout {
-        padding: Theme.padding * 2;
-        spacing: Theme.spacing * 2;
-        alignment: start;
+    Rectangle {
+        TouchArea { }
 
-        HeadBar { }
+        VerticalLayout {
+            padding: Theme.padding * 2;
+            spacing: Theme.spacing * 2;
+            alignment: start;
 
-        if Store.font-entries.length == 0: CenterLayout {
-            NoDataImg {
-                width: root.header-width * Theme.golden-ratio;
-                text: Logic.tr("No found system fonts");
-                font-size: Theme.default-font-size;
+            HeadBar { }
+
+            if Store.font-entries.length == 0: CenterLayout {
+                NoDataImg {
+                    width: root.header-width * Theme.golden-ratio;
+                    text: Logic.tr("No found system fonts");
+                    font-size: Theme.default-font-size;
+                }
             }
-        }
 
-        if Store.font-entries.length > 0: Rectangle {
-            height: font-item-height * 10;
-            border-radius: Theme.border-radius;
-            border-color: Theme.base-border-color;
-            border-width: Theme.default-border-width;
-
-            private property <length> font-item-height: Theme.default-font-size + Theme.padding * 6;
-
-            ScrollView {
-                x: parent.border-width;
-                y: parent.border-width;
-                width: parent.width - parent.border-width * 2;
-                viewport-width: vbox.preferred-width;
-                viewport-height: vbox.preferred-height;
-
-                vbox := VerticalLayout {
-                    alignment: start;
-
-                    private property <length> font-item-max-family-width;
-                    private property <length> font-item-max-style-width;
-
-                    for entry[index] in Store.font-entries: FontItem {
-                        index: index;
-                        entry: entry;
-                        height: font-item-height;
-                        family-width: parent.font-item-max-family-width;
-                        style-width: parent.font-item-max-style-width;
-
-                        init => {
-                            parent.font-item-max-family-width = max(parent.font-item-max-family-width, self.family-preferred-width);
-                            parent.font-item-max-style-width = max(parent.font-item-max-style-width, self.style-preferred-width);
+            if Store.font-entries.length > 0: Rectangle {
+                height: font-item-height * 10;
+                width: parent.width - parent.padding * 2;
+                border-radius: Theme.border-radius;
+                border-color: Theme.base-border-color;
+                border-width: Theme.default-border-width;
+
+                private property <length> font-item-height: Theme.default-font-size + Theme.padding * 6;
+
+                ScrollView {
+                    x: parent.border-width;
+                    y: parent.border-width;
+                    width: parent.width - parent.border-width * 2;
+                    viewport-width: vbox.preferred-width;
+                    viewport-height: vbox.preferred-height;
+
+                    vbox := VerticalLayout {
+                        alignment: start;
+                        width: parent.width;
+
+                        private property <length> font-item-max-family-width;
+                        private property <length> font-item-max-style-width;
+
+                        for entry[index] in Store.font-entries: FontItem {
+                            index: index;
+                            entry: entry;
+                            height: font-item-height;
+                            width: parent.width;
+                            family-width: parent.font-item-max-family-width;
+                            style-width: parent.font-item-max-style-width;
+
+                            init => {
+                                parent.font-item-max-family-width = max(parent.font-item-max-family-width, self.family-preferred-width);
+                                parent.font-item-max-style-width = max(parent.font-item-max-style-width, self.style-preferred-width);
+                            }
                         }
                     }
                 }

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

@@ -588,10 +588,10 @@ component FilterSelector inherits VerticalLayout {
 export component Filter inherits Rectangle {
     private property <bool> is-show-selector;
     private property <FilterType> filter-tab-type;
-    private property <bool> is-subtitle-track: Logic.video-editor-is-subtitle-track(Store.video-editor-current-edited-track-index);
+    // private property <bool> is-subtitle-track: Logic.video-editor-is-subtitle-track(Store.video-editor-current-edited-track-index);
     private property <bool> is-show-segment-filter: Store.video-editor-current-edited-track-index >= 0 && Store.video-editor-selected-segments-index.length > 0 && !is-subtitle-track;
 
-    // private property <bool> is-subtitle-track: true; // todo
+    private property <bool> is-subtitle-track: true; // todo
     // private property <bool> is-show-segment-filter: true; // todo
 
     if !is-show-segment-filter && !is-subtitle-track: NoDataImg {

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

@@ -43,6 +43,8 @@ export component BackgroundColor inherits Rectangle {
             icon: Icons.color-picker-light;
             is-show-icon: true;
             text: Util.color-picker-str(config.r, config.g, config.b, config.a);
+            is-show-color-block: true;
+            color-block-color: Util.color-picker-hex-color(self.text);
 
             clicked => {
                 Store.video-editor-color-picker-color = Util.color-picker-hex-color(self.text);

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

@@ -23,7 +23,8 @@ export component FontPath inherits Rectangle {
     private property <FontEntry> selected-font <=> Store.selected-font-entry;
 
     changed selected-font => {
-        font-li.text = Util.file-name(config.font-path);
+        debug("xxxxxx");
+        font-li.text = selected-font.family;
         config.font-path = selected-font.path;
         self.apply(config);
     }

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

@@ -43,6 +43,8 @@ export component OutlineColor inherits Rectangle {
             icon: Icons.color-picker-light;
             is-show-icon: true;
             text: Util.color-picker-str(config.r, config.g, config.b, config.a);
+            is-show-color-block: true;
+            color-block-color: Util.color-picker-hex-color(self.text);
 
             clicked => {
                 Store.video-editor-color-picker-color = Util.color-picker-hex-color(self.text);

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

@@ -41,6 +41,8 @@ export component PrimaryColor inherits Rectangle {
             icon: Icons.color-picker-light;
             is-show-icon: true;
             text: Util.color-picker-str(config.r, config.g, config.b, config.a);
+            is-show-color-block: true;
+            color-block-color: Util.color-picker-hex-color(self.text);
 
             clicked => {
                 Store.video-editor-color-picker-color = Util.color-picker-hex-color(self.text);
@@ -49,4 +51,3 @@ export component PrimaryColor inherits Rectangle {
         }
     }
 }
-

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

@@ -87,6 +87,8 @@ export component Border inherits Rectangle {
                 is-show-icon: true;
                 enabled: selected-filter.enabled;
                 text: Util.color-picker-str(config.color-r, config.color-g, config.color-b, config.color-a);
+                is-show-color-block: true;
+                color-block-color: Util.color-picker-hex-color(self.text);
                 icon: Icons.color-picker-light;
                 border-color: Theme.is-dark ? Theme.base-border-color.brighter(20%) : Theme.base-border-color.darker(10%);
                 border-width: 1px;