refactor(ui): remove component library

BREAKING CHANGE: remove ui/modules/surrealism-ui - replace SStar with RateStars - replace Icon and UseIcons with Image in about.slint - add share.svg to assets - remove useless import
NJUPT-SAST · Oct 23, 2024 · 1437b50 · 1437b50
1 parent df218c7
commit 1437b50
Show file tree

Hide file tree

Showing 13 changed files with 46 additions and 42 deletions.
diff --git a/.gitmodules b/.gitmodules
@@ -1,9 +1,6 @@
 [submodule "3rdpart/sast-link-cxx-sdk"]
 	path = 3rdpart/sast-link-cxx-sdk
 	url = https://github.com/Serein207/sast-link-cxx-sdk.git
-[submodule "ui/modules/surrealism-ui"]
-	path = ui/modules/surrealism-ui
-	url = https://github.com/Surrealism-All/SurrealismUI.git
 [submodule "3rdpart/keychain"]
 	path = 3rdpart/keychain
 	url = https://github.com/hrantzsch/keychain.git
diff --git a/ui/app.slint b/ui/app.slint
@@ -40,7 +40,6 @@ import {
     SettingPageBridge
 } from "./views/index.slint";
 import { StateLayer } from "./components/index.slint";
-import { GlobalProps } from "modules/surrealism-ui/themes/src/index.slint";
 import "assets/font/MiSans-Regular.ttf";
 
 // export for C++ interact
@@ -226,7 +225,7 @@ export component App inherits Window {
     background: Token.color.surface;
     icon: Token.image.icon.evento;
     init => {
-        GlobalProps.theme = Token.surrealism-ui-default-theme;
+        // GlobalProps.theme = Token.surrealism-ui-default-theme;
     }
     VerticalLayout {
         heading := HorizontalLayout {

diff --git a/ui/assets/image/icon/share.svg b/ui/assets/image/icon/share.svg
diff --git a/ui/assets/image/image_token.slint b/ui/assets/image/image_token.slint
@@ -32,6 +32,7 @@ struct EventoIconCollection {
     account-box: image,
     pentagon: image,
     check-circle: image,
+    share: image,
 }
 
 struct EventoDisplayCollection {
@@ -90,6 +91,7 @@ export global EventoImageToken {
         account-box: @image-url("./icon/account-box-outline.svg"),
         pentagon: @image-url("./icon/pentagon.svg"),
         check-circle: @image-url("./icon/check-circle.svg"),
+        share: @image-url("./icon/share.svg"),
     };
     // display used as images bigger than icon
     // most display image won't change according to darkmode switch

diff --git a/ui/components/index.slint b/ui/components/index.slint
@@ -51,4 +51,8 @@ export {
 
 export { 
     StyledText
-} from "./styled_text.slint";
+} from "./styled_text.slint";
+
+export { 
+    RateStars
+} from "./rate_stars.slint";
diff --git a/ui/components/rate_stars.slint b/ui/components/rate_stars.slint
@@ -0,0 +1,29 @@
+import { Token } from "../global.slint";
+
+export component RateStars {
+    in property <int> count: 5;
+    in-out property <int> score: 0;
+    in property <bool> disabled: true;
+    in property <color> normal-color: Colors.gold;
+    in property <color> disabled-color: Token.color.on-surface.with-alpha(0.12);
+    in property <length> icon-size: 20px;
+    HorizontalLayout {
+        spacing: 5px;
+        padding: 5px;
+        for i in count: Image {
+            source: score - 1 >= i ? Token.image.icon.star-full : Token.image.icon.star-empty;
+            colorize: disabled ? disabled-color : normal-color;
+            width: icon-size;
+            height: icon-size;
+            TouchArea {
+                width: parent.width;
+                height: parent.height;
+                clicked => {
+                    if (!disabled) {
+                        score = i + 1;
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/ui/global.slint b/ui/global.slint
@@ -2,7 +2,6 @@ import { EventoImageToken } from "./assets/index.slint";
 import { MdStyleToken } from "./logic/md_style_token.slint";
 
 import { Palette } from "std-widgets.slint";
-import { Themes } from "./modules/surrealism-ui/use/index.slint";
 
 export { 
     MdFontData,
@@ -11,7 +10,6 @@ export {
 
 export global Token {
     out property is-darkmode <=> MdStyleToken.is-darkmode;
-    out property <Themes> surrealism-ui-default-theme: is-darkmode ? Dark : Light;
     out property image <=> EventoImageToken.image;
     out property font <=> MdStyleToken.font;
     out property color <=> MdStyleToken.color;

diff --git a/ui/modules/surrealism-ui b/ui/modules/surrealism-ui
diff --git a/ui/views/overlay/login.slint b/ui/views/overlay/login.slint
@@ -1,7 +1,6 @@
 import { Token } from "../../global.slint";
 import { Overlay, Empty, StyledText } from "../../components/index.slint";
 import { ViewManager, MessageManager, MessageType, AccountManagerBridge } from "../../logic/index.slint";
-import { SButton } from "../../modules/surrealism-ui/index.slint";
 import { Button, ButtonType, LoadingAnimation } from "../../components/index.slint";
 
 export global LoginOverlayBridge {

diff --git a/ui/views/page/about.slint b/ui/views/page/about.slint
@@ -3,8 +3,6 @@ import { Page, PageState } from "../../components/index.slint";
 import { AboutSlint, ScrollView } from "std-widgets.slint";
 import { MessageManager, MessageType } from "../../logic/index.slint";
 import { Button, ButtonType, LoadingAnimation, StyledText } from "../../components/index.slint";
-import { Icon } from "../../modules/surrealism-ui/src/icon/icon.slint";
-import { UseIcons } from "../../modules/surrealism-ui/use/src/icon.slint";
 
 export struct ContributorStruct {
     avatar: image,
@@ -78,8 +76,8 @@ component Link {
 
     HorizontalLayout {
         spacing: 5px;
-        Icon {
-            source: UseIcons.icons.Share;
+        Image {
+            source: Token.image.icon.share;
             height: 15px;
             width: 15px;
             colorize: area.has-hover ? Token.color.primary : Token.color.on-surface;

diff --git a/ui/views/page/detail.slint b/ui/views/page/detail.slint
@@ -1,7 +1,6 @@
 import { Token } from "../../global.slint";
-import { Page, Button, EventStruct, EventState, FeedbackStruct, ContentDialog, PageState, LoadingAnimation } from "../../components/index.slint";
+import { Page, Button, EventStruct, EventState, FeedbackStruct, ContentDialog, PageState, LoadingAnimation, RateStars } from "../../components/index.slint";
 import { VerticalBox, LineEdit, ScrollView } from "std-widgets.slint";
-import { SStar} from "../../modules/surrealism-ui/index.slint";
 import { MessageManager, MessageType } from "../../logic/index.slint";
 
 export global DetailPageBridge {
@@ -187,7 +186,8 @@ export component DetailPage inherits Page {
                             font-weight: Token.font.title.large.weight;
                         }
 
-                        star := SStar {
+                        star := RateStars {
+                            count: 5;
                             score: DetailPageBridge.feedback-model.rate;
                         }
 

diff --git a/ui/views/page/history.slint b/ui/views/page/history.slint
@@ -1,6 +1,5 @@
 import { Token } from "../../global.slint";
-import { Page, Button, EventStruct, ButtonType, PageState, LoadingAnimation, Card, FeedbackStruct } from "../../components/index.slint";
-import { SStar, SPagination } from "../../modules/surrealism-ui/index.slint";
+import { Page, Button, EventStruct, ButtonType, PageState, LoadingAnimation, Card, FeedbackStruct, RateStars } from "../../components/index.slint";
 import { ScrollView, LineEdit } from "std-widgets.slint";
 
 export struct EventFeedbackStruct {
@@ -24,9 +23,9 @@ component CommentItem {
     callback comment-clicked(int, string);
     if feedback.success: VerticalLayout {
         spacing: 8px;
-        star := SStar {
+        star := RateStars {
+            count: 5;
             score: feedback.rate;
-            theme: Dark;
             disabled: feedback.has-feedbacked;
         }
 

diff --git a/ui/views/page/search.slint b/ui/views/page/search.slint
@@ -1,7 +1,6 @@
 import { Token } from "../../global.slint";
 import { Page, EventCardGroup, EventStruct, StateLayer, PageState, LoadingAnimation } from "../../components/index.slint";
 import { Button, LineEdit, ScrollView, ListView, StandardListView } from "std-widgets.slint";
-import { SPagination } from "../../modules/surrealism-ui/index.slint";
 
 export global SearchPageBridge {
     in property <[StandardListViewItem]> department: [];
@@ -132,26 +131,6 @@ export component SearchPage inherits Page {
                 //     }
                 // }
             }
-
-            // if SearchPageBridge.total > SearchPageBridge.page-size: Rectangle {
-            //     height: 30px;
-            //     SPagination {
-            //         page-size: SearchPageBridge.page-size;
-            //         total: SearchPageBridge.total;
-            //         theme: Token.surrealism-ui-default-theme;
-            //         active <=> root.current-page-index;
-
-            //         pre => {
-            //             SearchPageBridge.load-department-events(root.current-page-index);
-            //         }
-            //         next => {
-            //             SearchPageBridge.load-department-events(root.current-page-index);
-            //         }
-            //         clicked => {
-            //             SearchPageBridge.load-department-events(root.current-page-index);
-            //         }
-            //     }
-            // }
         }
     }
 }