193 lines
No EOL
7.8 KiB
Text
193 lines
No EOL
7.8 KiB
Text
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%;
|
||
|
||
in property <[MaxDepthReachedUiData]> tokens: [];
|
||
callback clear-tokens();
|
||
|
||
Rectangle {
|
||
background: Palette.alternate-background;
|
||
border-radius: 12px;
|
||
border-width: 1px;
|
||
border-color: Palette.border;
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
VerticalLayout {
|
||
spacing: 0px;
|
||
|
||
// Column Header
|
||
Rectangle {
|
||
height: 48px;
|
||
background: Palette.control-background;
|
||
border-radius: 12px;
|
||
border-width: 1px;
|
||
border-color: Palette.border;
|
||
|
||
HorizontalLayout {
|
||
alignment: space-between;
|
||
padding: 12px;
|
||
|
||
Text {
|
||
text: "✅ Analysis Complete (" + tokens.length + ")";
|
||
color: Palette.control-foreground;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
vertical-alignment: center;
|
||
}
|
||
|
||
Rectangle {
|
||
width: 20px;
|
||
height: 20px;
|
||
background: #f56565;
|
||
border-radius: 10px;
|
||
|
||
Text {
|
||
text: "×";
|
||
color: white;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
horizontal-alignment: center;
|
||
vertical-alignment: center;
|
||
}
|
||
|
||
TouchArea {
|
||
clicked => { root.clear-tokens(); }
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// Scrollable content area
|
||
ScrollView {
|
||
height: parent.height - 48px;
|
||
|
||
VerticalLayout {
|
||
spacing: 8px;
|
||
padding: 8px;
|
||
padding-bottom: 16px;
|
||
|
||
// Analysis token cards
|
||
for token[i] in tokens: Rectangle {
|
||
min-height: 80px;
|
||
background: Palette.background;
|
||
border-width: 1px;
|
||
border-color: Palette.border;
|
||
border-radius: 8px;
|
||
|
||
states [
|
||
pressed when touch-area.pressed: {
|
||
background: Palette.selection-background;
|
||
in {
|
||
animate background { duration: 100ms; }
|
||
}
|
||
}
|
||
hover when touch-area.has-hover: {
|
||
background: Palette.control-background;
|
||
border-color: #10b981;
|
||
in {
|
||
animate background { duration: 150ms; }
|
||
animate border-color { duration: 150ms; }
|
||
}
|
||
}
|
||
]
|
||
|
||
// Left border accent (green for complete)
|
||
Rectangle {
|
||
width: 3px;
|
||
height: 100%;
|
||
background: #10b981;
|
||
x: 0px;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
HorizontalLayout {
|
||
padding: 12px;
|
||
spacing: 12px;
|
||
|
||
// Token avatar
|
||
Rectangle {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 10px;
|
||
background: #10b981;
|
||
|
||
Text {
|
||
text: "✓";
|
||
color: white;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
horizontal-alignment: center;
|
||
vertical-alignment: center;
|
||
}
|
||
}
|
||
|
||
// Token info
|
||
VerticalLayout {
|
||
spacing: 6px;
|
||
alignment: start;
|
||
|
||
// Name and completion status
|
||
HorizontalLayout {
|
||
spacing: 8px;
|
||
alignment: start;
|
||
|
||
Text {
|
||
text: token.name;
|
||
color: Palette.foreground;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
vertical-alignment: center;
|
||
}
|
||
|
||
Rectangle {
|
||
height: 18px;
|
||
border-radius: 9px;
|
||
background: #10b981;
|
||
padding-left: 8px;
|
||
padding-right: 8px;
|
||
|
||
Text {
|
||
text: "Complete";
|
||
color: white;
|
||
font-size: 10px;
|
||
font-weight: 600;
|
||
horizontal-alignment: center;
|
||
vertical-alignment: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
// Mint address
|
||
Text {
|
||
text: token.mint;
|
||
color: Palette.foreground;
|
||
font-size: 11px;
|
||
wrap: word-wrap;
|
||
opacity: 0.7;
|
||
vertical-alignment: center;
|
||
}
|
||
|
||
// Icons and timestamp
|
||
Text {
|
||
text: "";
|
||
color: Palette.foreground;
|
||
font-size: 11px;
|
||
opacity: 0.7;
|
||
vertical-alignment: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
touch-area := TouchArea {
|
||
// Add click functionality here if needed
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
} |