From e5c930c9ff0aea4137d56aa176d0e747a500194d Mon Sep 17 00:00:00 2001 From: rizary Date: Tue, 8 Jul 2025 15:28:09 +0700 Subject: [PATCH] fixing the layout and separate the column widgets into new file --- .../ui/hunting-ground-page.slint | 92 +++++++++---------- .../ui/analysis-complete-column.slint | 11 ++- .../ui/cex-tokens-column.slint | 11 ++- .../ui/mod.slint | 2 +- .../ui/new-tokens-column.slint | 11 ++- 5 files changed, 62 insertions(+), 65 deletions(-) rename ui/widgets/{token-column => hunting-ground-column}/ui/analysis-complete-column.slint (95%) rename ui/widgets/{token-column => hunting-ground-column}/ui/cex-tokens-column.slint (95%) rename ui/widgets/{token-column => hunting-ground-column}/ui/mod.slint (85%) rename ui/widgets/{token-column => hunting-ground-column}/ui/new-tokens-column.slint (95%) diff --git a/ui/pages/hunting-ground/ui/hunting-ground-page.slint b/ui/pages/hunting-ground/ui/hunting-ground-page.slint index 4a71fdd..b474b0d 100644 --- a/ui/pages/hunting-ground/ui/hunting-ground-page.slint +++ b/ui/pages/hunting-ground/ui/hunting-ground-page.slint @@ -4,7 +4,7 @@ import { Palette, ScrollView } from "std-widgets.slint"; import { NewTokenUiData, CexUpdatedUiData, MaxDepthReachedUiData } from "../../../shared/types/token.slint"; // Import the new token column widgets -import { NewTokensColumn, CexTokensColumn, AnalysisCompleteColumn } from "../../../widgets/token-column/ui/mod.slint"; +import { NewTokensColumn, CexTokensColumn, AnalysisCompleteColumn } from "../../../widgets/hunting-ground-column/ui/mod.slint"; // Hunting Ground Page Component export component HuntingGroundPage { @@ -19,60 +19,54 @@ export component HuntingGroundPage { callback clear-cex-tokens(); callback clear-analysis-tokens(); - Rectangle { - background: Palette.background; + VerticalLayout { + alignment: start; // Explicitly align to top + padding: 16px; + spacing: 16px; - VerticalLayout { - alignment: start; // Explicitly align to top - padding: 16px; // Reduced from 24px - spacing: 16px; // Reduced from 24px + // Header with refresh button + HorizontalLayout { + alignment: space-between; - // Header with refresh button - HorizontalLayout { - alignment: space-between; - - Text { - text: "🎯 Token Hunting Ground"; - font-size: 28px; - font-weight: 700; - color: Palette.foreground; + Text { + text: "🎯 Token Hunting Ground"; + font-size: 28px; + font-weight: 700; + color: Palette.foreground; + } + } + + // Three columns layout using proper Slint responsive layout + HorizontalLayout { + spacing: 16px; + padding: 8px; + min-height: 500px; // Minimum height, but allows growing + alignment: stretch; // Stretch children to fill available space + + // Column 1: New Tokens (1/3 responsive width) + NewTokensColumn { + horizontal-stretch: 1; // Equal stretch factor for 1/3 width + tokens: root.new-tokens; + clear-tokens => { + root.clear-new-tokens(); } } - // Three columns layout with fixed widths to prevent binding loops - HorizontalLayout { - spacing: 16px; - padding: 8px; - height: 600px; // Fixed height to prevent overflow - - // Column 1: New Tokens (fixed width) - NewTokensColumn { - width: 350px; // Fixed width instead of calculated - height: 100%; - tokens: root.new-tokens; - clear-tokens => { - root.clear-new-tokens(); - } + // Column 2: CEX Analyst (1/3 responsive width) + CexTokensColumn { + horizontal-stretch: 1; // Equal stretch factor for 1/3 width + tokens: root.cex-tokens; + clear-tokens => { + root.clear-cex-tokens(); } - - // Column 2: CEX Analyst (fixed width) - CexTokensColumn { - width: 350px; // Fixed width instead of calculated - height: 100%; - tokens: root.cex-tokens; - clear-tokens => { - root.clear-cex-tokens(); - } - } - - // Column 3: Analysis Complete (fixed width) - AnalysisCompleteColumn { - width: 350px; // Fixed width instead of calculated - height: 100%; - tokens: root.analysis-tokens; - clear-tokens => { - root.clear-analysis-tokens(); - } + } + + // Column 3: Analysis Complete (1/3 responsive width) + AnalysisCompleteColumn { + horizontal-stretch: 1; // Equal stretch factor for 1/3 width + tokens: root.analysis-tokens; + clear-tokens => { + root.clear-analysis-tokens(); } } } diff --git a/ui/widgets/token-column/ui/analysis-complete-column.slint b/ui/widgets/hunting-ground-column/ui/analysis-complete-column.slint similarity index 95% rename from ui/widgets/token-column/ui/analysis-complete-column.slint rename to ui/widgets/hunting-ground-column/ui/analysis-complete-column.slint index 24ba6a8..aaa31ef 100644 --- a/ui/widgets/token-column/ui/analysis-complete-column.slint +++ b/ui/widgets/hunting-ground-column/ui/analysis-complete-column.slint @@ -2,8 +2,9 @@ import { Palette, ScrollView } from "std-widgets.slint"; import { MaxDepthReachedUiData } from "../../../shared/types/token.slint"; export component AnalysisCompleteColumn { - width: 100%; // Will be constrained by parent - height: 100%; + // Responsive properties - no fixed width/height + vertical-stretch: 1; // Allow vertical stretching + min-width: 200px; // Minimum width to maintain readability in property <[MaxDepthReachedUiData]> tokens: []; callback clear-tokens(); @@ -13,8 +14,6 @@ export component AnalysisCompleteColumn { border-radius: 12px; border-width: 1px; border-color: Palette.border; - width: 100%; - height: 100%; VerticalLayout { spacing: 0px; @@ -63,7 +62,7 @@ export component AnalysisCompleteColumn { // Scrollable content area ScrollView { - height: parent.height - 48px; + vertical-stretch: 1; // Take remaining space VerticalLayout { spacing: 8px; @@ -129,6 +128,7 @@ export component AnalysisCompleteColumn { VerticalLayout { spacing: 6px; alignment: start; + horizontal-stretch: 1; // Take remaining space // Name and completion status HorizontalLayout { @@ -141,6 +141,7 @@ export component AnalysisCompleteColumn { font-size: 14px; font-weight: 600; vertical-alignment: center; + horizontal-stretch: 1; // Allow text to wrap/expand } Rectangle { diff --git a/ui/widgets/token-column/ui/cex-tokens-column.slint b/ui/widgets/hunting-ground-column/ui/cex-tokens-column.slint similarity index 95% rename from ui/widgets/token-column/ui/cex-tokens-column.slint rename to ui/widgets/hunting-ground-column/ui/cex-tokens-column.slint index e757d16..ced59f6 100644 --- a/ui/widgets/token-column/ui/cex-tokens-column.slint +++ b/ui/widgets/hunting-ground-column/ui/cex-tokens-column.slint @@ -2,8 +2,9 @@ import { Palette, ScrollView } from "std-widgets.slint"; import { CexUpdatedUiData } from "../../../shared/types/token.slint"; export component CexTokensColumn { - width: 100%; // Will be constrained by parent - height: 100%; + // Responsive properties - no fixed width/height + vertical-stretch: 1; // Allow vertical stretching + min-width: 200px; // Minimum width to maintain readability in property <[CexUpdatedUiData]> tokens: []; callback clear-tokens(); @@ -13,8 +14,6 @@ export component CexTokensColumn { border-radius: 12px; border-width: 1px; border-color: Palette.border; - width: 100%; - height: 100%; VerticalLayout { spacing: 0px; @@ -63,7 +62,7 @@ export component CexTokensColumn { // Scrollable content area ScrollView { - height: parent.height - 48px; + vertical-stretch: 1; // Take remaining space VerticalLayout { spacing: 8px; @@ -129,6 +128,7 @@ export component CexTokensColumn { VerticalLayout { spacing: 6px; alignment: start; + horizontal-stretch: 1; // Take remaining space // Name and CEX info HorizontalLayout { @@ -141,6 +141,7 @@ export component CexTokensColumn { font-size: 14px; font-weight: 600; vertical-alignment: center; + horizontal-stretch: 1; // Allow text to wrap/expand } Rectangle { diff --git a/ui/widgets/token-column/ui/mod.slint b/ui/widgets/hunting-ground-column/ui/mod.slint similarity index 85% rename from ui/widgets/token-column/ui/mod.slint rename to ui/widgets/hunting-ground-column/ui/mod.slint index c7fd7d0..3cfed65 100644 --- a/ui/widgets/token-column/ui/mod.slint +++ b/ui/widgets/hunting-ground-column/ui/mod.slint @@ -1,4 +1,4 @@ -// Token Column Widgets Module +// Hunting Ground Column Widgets Module // Following Feature-Sliced Design - widgets layer export { NewTokensColumn } from "new-tokens-column.slint"; diff --git a/ui/widgets/token-column/ui/new-tokens-column.slint b/ui/widgets/hunting-ground-column/ui/new-tokens-column.slint similarity index 95% rename from ui/widgets/token-column/ui/new-tokens-column.slint rename to ui/widgets/hunting-ground-column/ui/new-tokens-column.slint index c862daa..033cd0f 100644 --- a/ui/widgets/token-column/ui/new-tokens-column.slint +++ b/ui/widgets/hunting-ground-column/ui/new-tokens-column.slint @@ -2,8 +2,9 @@ import { Palette, ScrollView } from "std-widgets.slint"; import { NewTokenUiData } from "../../../shared/types/token.slint"; export component NewTokensColumn { - width: 100%; // Will be constrained by parent - height: 100%; + // Responsive properties - no fixed width/height + vertical-stretch: 1; // Allow vertical stretching + min-width: 200px; // Minimum width to maintain readability in property <[NewTokenUiData]> tokens: []; callback clear-tokens(); @@ -13,8 +14,6 @@ export component NewTokensColumn { border-radius: 12px; border-width: 1px; border-color: Palette.border; - width: 100%; - height: 100%; VerticalLayout { spacing: 0px; @@ -63,7 +62,7 @@ export component NewTokensColumn { // Scrollable content area ScrollView { - height: parent.height - 48px; + vertical-stretch: 1; // Take remaining space VerticalLayout { spacing: 8px; @@ -129,6 +128,7 @@ export component NewTokensColumn { VerticalLayout { spacing: 6px; alignment: start; + horizontal-stretch: 1; // Take remaining space // Name and symbol HorizontalLayout { @@ -141,6 +141,7 @@ export component NewTokensColumn { font-size: 14px; font-weight: 600; vertical-alignment: center; + horizontal-stretch: 1; // Allow text to wrap/expand } if token.symbol != "": Rectangle {