rizary/Ziya
1
Fork 0
Code Pull requests Activity

fixing the layout and separate the column widgets into new file

Browse source
This commit is contained in:
rizary 2025-07-08 15:28:09 +07:00
parent 8c49495865
commit e5c930c9ff
Signed by untrusted user who does not match committer: rizary
GPG key ID: 2CE8D69D02F1CEB5
5 changed files with 62 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

92
ui/pages/hunting-ground/ui/hunting-ground-page.slint
View file

@ -4,7 +4,7 @@ import { Palette, ScrollView } from "std-widgets.slint";
import { NewTokenUiData, CexUpdatedUiData, MaxDepthReachedUiData } from "../../../shared/types/token.slint"; import { NewTokenUiData, CexUpdatedUiData, MaxDepthReachedUiData } from "../../../shared/types/token.slint";
// Import the new token column widgets // 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 // Hunting Ground Page Component
export component HuntingGroundPage { export component HuntingGroundPage {
@ -19,60 +19,54 @@ export component HuntingGroundPage {
callback clear-cex-tokens(); callback clear-cex-tokens();
callback clear-analysis-tokens(); callback clear-analysis-tokens();
Rectangle { VerticalLayout {
background: Palette.background; alignment: start; // Explicitly align to top
padding: 16px;
spacing: 16px;
VerticalLayout { // Header with refresh button
alignment: start; // Explicitly align to top HorizontalLayout {
padding: 16px; // Reduced from 24px alignment: space-between;
spacing: 16px; // Reduced from 24px
// Header with refresh button Text {
HorizontalLayout { text: "🎯 Token Hunting Ground";
alignment: space-between; font-size: 28px;
font-weight: 700;
Text { color: Palette.foreground;
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 // Column 2: CEX Analyst (1/3 responsive width)
HorizontalLayout { CexTokensColumn {
spacing: 16px; horizontal-stretch: 1; // Equal stretch factor for 1/3 width
padding: 8px; tokens: root.cex-tokens;
height: 600px; // Fixed height to prevent overflow clear-tokens => {
root.clear-cex-tokens();
// 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 (fixed width)
CexTokensColumn { // Column 3: Analysis Complete (1/3 responsive width)
width: 350px; // Fixed width instead of calculated AnalysisCompleteColumn {
height: 100%; horizontal-stretch: 1; // Equal stretch factor for 1/3 width
tokens: root.cex-tokens; tokens: root.analysis-tokens;
clear-tokens => { clear-tokens => {
root.clear-cex-tokens(); root.clear-analysis-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();
}
} }
} }
} }

11
ui/widgets/token-column/ui/analysis-complete-column.slint → ui/widgets/hunting-ground-column/ui/analysis-complete-column.slint
View file

@ -2,8 +2,9 @@ import { Palette, ScrollView } from "std-widgets.slint";
import { MaxDepthReachedUiData } from "../../../shared/types/token.slint"; import { MaxDepthReachedUiData } from "../../../shared/types/token.slint";
export component AnalysisCompleteColumn { export component AnalysisCompleteColumn {
width: 100%; // Will be constrained by parent // Responsive properties - no fixed width/height
height: 100%; vertical-stretch: 1; // Allow vertical stretching
min-width: 200px; // Minimum width to maintain readability
in property <[MaxDepthReachedUiData]> tokens: []; in property <[MaxDepthReachedUiData]> tokens: [];
callback clear-tokens(); callback clear-tokens();
@ -13,8 +14,6 @@ export component AnalysisCompleteColumn {
border-radius: 12px; border-radius: 12px;
border-width: 1px; border-width: 1px;
border-color: Palette.border; border-color: Palette.border;
width: 100%;
height: 100%;
VerticalLayout { VerticalLayout {
spacing: 0px; spacing: 0px;
@ -63,7 +62,7 @@ export component AnalysisCompleteColumn {
// Scrollable content area // Scrollable content area
ScrollView { ScrollView {
height: parent.height - 48px; vertical-stretch: 1; // Take remaining space
VerticalLayout { VerticalLayout {
spacing: 8px; spacing: 8px;
@ -129,6 +128,7 @@ export component AnalysisCompleteColumn {
VerticalLayout { VerticalLayout {
spacing: 6px; spacing: 6px;
alignment: start; alignment: start;
horizontal-stretch: 1; // Take remaining space
// Name and completion status // Name and completion status
HorizontalLayout { HorizontalLayout {
@ -141,6 +141,7 @@ export component AnalysisCompleteColumn {
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
vertical-alignment: center; vertical-alignment: center;
horizontal-stretch: 1; // Allow text to wrap/expand
} }
Rectangle { Rectangle {

11
ui/widgets/token-column/ui/cex-tokens-column.slint → ui/widgets/hunting-ground-column/ui/cex-tokens-column.slint
View file

@ -2,8 +2,9 @@ import { Palette, ScrollView } from "std-widgets.slint";
import { CexUpdatedUiData } from "../../../shared/types/token.slint"; import { CexUpdatedUiData } from "../../../shared/types/token.slint";
export component CexTokensColumn { export component CexTokensColumn {
width: 100%; // Will be constrained by parent // Responsive properties - no fixed width/height
height: 100%; vertical-stretch: 1; // Allow vertical stretching
min-width: 200px; // Minimum width to maintain readability
in property <[CexUpdatedUiData]> tokens: []; in property <[CexUpdatedUiData]> tokens: [];
callback clear-tokens(); callback clear-tokens();
@ -13,8 +14,6 @@ export component CexTokensColumn {
border-radius: 12px; border-radius: 12px;
border-width: 1px; border-width: 1px;
border-color: Palette.border; border-color: Palette.border;
width: 100%;
height: 100%;
VerticalLayout { VerticalLayout {
spacing: 0px; spacing: 0px;
@ -63,7 +62,7 @@ export component CexTokensColumn {
// Scrollable content area // Scrollable content area
ScrollView { ScrollView {
height: parent.height - 48px; vertical-stretch: 1; // Take remaining space
VerticalLayout { VerticalLayout {
spacing: 8px; spacing: 8px;
@ -129,6 +128,7 @@ export component CexTokensColumn {
VerticalLayout { VerticalLayout {
spacing: 6px; spacing: 6px;
alignment: start; alignment: start;
horizontal-stretch: 1; // Take remaining space
// Name and CEX info // Name and CEX info
HorizontalLayout { HorizontalLayout {
@ -141,6 +141,7 @@ export component CexTokensColumn {
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
vertical-alignment: center; vertical-alignment: center;
horizontal-stretch: 1; // Allow text to wrap/expand
} }
Rectangle { Rectangle {

2
ui/widgets/token-column/ui/mod.slint → ui/widgets/hunting-ground-column/ui/mod.slint
View file

@ -1,4 +1,4 @@
// Token Column Widgets Module // Hunting Ground Column Widgets Module
// Following Feature-Sliced Design - widgets layer // Following Feature-Sliced Design - widgets layer
export { NewTokensColumn } from "new-tokens-column.slint"; export { NewTokensColumn } from "new-tokens-column.slint";

11
ui/widgets/token-column/ui/new-tokens-column.slint → ui/widgets/hunting-ground-column/ui/new-tokens-column.slint
View file

@ -2,8 +2,9 @@ import { Palette, ScrollView } from "std-widgets.slint";
import { NewTokenUiData } from "../../../shared/types/token.slint"; import { NewTokenUiData } from "../../../shared/types/token.slint";
export component NewTokensColumn { export component NewTokensColumn {
width: 100%; // Will be constrained by parent // Responsive properties - no fixed width/height
height: 100%; vertical-stretch: 1; // Allow vertical stretching
min-width: 200px; // Minimum width to maintain readability
in property <[NewTokenUiData]> tokens: []; in property <[NewTokenUiData]> tokens: [];
callback clear-tokens(); callback clear-tokens();
@ -13,8 +14,6 @@ export component NewTokensColumn {
border-radius: 12px; border-radius: 12px;
border-width: 1px; border-width: 1px;
border-color: Palette.border; border-color: Palette.border;
width: 100%;
height: 100%;
VerticalLayout { VerticalLayout {
spacing: 0px; spacing: 0px;
@ -63,7 +62,7 @@ export component NewTokensColumn {
// Scrollable content area // Scrollable content area
ScrollView { ScrollView {
height: parent.height - 48px; vertical-stretch: 1; // Take remaining space
VerticalLayout { VerticalLayout {
spacing: 8px; spacing: 8px;
@ -129,6 +128,7 @@ export component NewTokensColumn {
VerticalLayout { VerticalLayout {
spacing: 6px; spacing: 6px;
alignment: start; alignment: start;
horizontal-stretch: 1; // Take remaining space
// Name and symbol // Name and symbol
HorizontalLayout { HorizontalLayout {
@ -141,6 +141,7 @@ export component NewTokensColumn {
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
vertical-alignment: center; vertical-alignment: center;
horizontal-stretch: 1; // Allow text to wrap/expand
} }
if token.symbol != "": Rectangle { if token.symbol != "": Rectangle {