Skip to content

Commit 9f1c504

Browse files
authored
Update ui.slint
1 parent 9f6c963 commit 9f1c504

File tree

1 file changed

+129
-110
lines changed

1 file changed

+129
-110
lines changed

desktop/ui/ui.slint

Lines changed: 129 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,50 @@
1-
import { TabWidget, LineEdit, Button, ListView, HorizontalLayout, VerticalLayout, StandardListView, ComboBox } from "std-widgets.slint";
1+
import { TabWidget, LineEdit, Button, ListView, ComboBox } from "std-widgets.slint";
22

3-
component AppWindow {
4-
property <[Device]> devices: [];
5-
property <[string]> messages: [];
6-
property <string> my_device_name: "My Device";
7-
property <string> my_ip: "0.0.0.0";
8-
property <string> status_message: "";
3+
struct Device {
4+
name: string,
5+
ip: string,
6+
port: string,
7+
status: string,
8+
paired: bool,
9+
}
10+
11+
component PairedDeviceFile {
12+
in property <string> device_name;
13+
in property <int> index;
14+
callback send_file(string);
15+
16+
HorizontalLayout {
17+
Text { text: device_name; color: #333; }
18+
file_path := LineEdit { placeholder-text: "File path"; }
19+
Button {
20+
text: "Send File";
21+
clicked => { send_file(file_path.text); }
22+
}
23+
}
24+
}
25+
26+
component PairedDeviceClipboard {
27+
in property <string> device_name;
28+
in property <int> index;
29+
callback send_clipboard(string);
30+
31+
HorizontalLayout {
32+
Text { text: device_name; color: #333; }
33+
content := LineEdit { placeholder-text: "Clipboard content"; }
34+
Button {
35+
text: "Send Clipboard";
36+
clicked => { send_clipboard(content.text); }
37+
}
38+
}
39+
}
40+
41+
export component AppWindow inherits Window {
42+
in-out property <[Device]> devices: [];
43+
in-out property <[string]> device_names: [];
44+
in-out property <[string]> messages: [];
45+
in-out property <string> my_device_name: "My Device";
46+
in-out property <string> my_ip: "0.0.0.0";
47+
in-out property <string> status_message: "";
948

1049
callback discover_devices();
1150
callback pair_device(int);
@@ -14,142 +53,122 @@ component AppWindow {
1453
callback send_clipboard(int, string);
1554
callback send_message(int, string);
1655

17-
Window {
18-
title: "Hackeros Connect";
19-
width: 800px;
20-
height: 600px;
21-
background: #f0f0f0;
56+
title: "Hackeros Connect";
57+
width: 800px;
58+
height: 600px;
59+
background: #f0f0f0;
2260

23-
VerticalLayout {
24-
spacing: 10px;
25-
padding: 10px;
61+
VerticalLayout {
62+
spacing: 10px;
63+
padding: 10px;
2664

27-
Text { text: "My Device: " + root.my_device_name + " (" + root.my_ip + ")"; font-size: 16px; color: #333; }
65+
Text { text: "My Device: " + root.my_device_name + " (" + root.my_ip + ")"; font-size: 16px; color: #333; }
2866

29-
TabWidget {
30-
Tab {
31-
title: "Devices";
32-
VerticalLayout {
33-
Button {
34-
text: "Discover Devices";
35-
clicked => { root.discover_devices(); }
36-
}
67+
TabWidget {
68+
Tab {
69+
title: "Devices";
70+
VerticalLayout {
71+
Button {
72+
text: "Discover Devices";
73+
clicked => { root.discover_devices(); }
74+
}
3775

38-
StandardListView {
39-
model: root.devices;
40-
delegate: Rectangle {
41-
background: model-data.paired ? #d4ffd4 : #ffffff;
42-
border-color: #ddd;
43-
border-width: 1px;
44-
HorizontalLayout {
45-
padding: 10px;
46-
Text { text: "📱 "; }
47-
Text { text: model-data.name + " (" + model-data.ip + ":" + model-data.port + ") - " + model-data.status; color: #333; }
48-
if !model-data.paired: Button {
49-
text: "Pair";
50-
clicked => { root.pair_device(model-row); }
51-
}
52-
if model-data.paired: Button {
53-
text: "Disconnect";
54-
clicked => { root.disconnect_device(model-row); }
55-
}
76+
ListView {
77+
for model-data [model-row] in root.devices : Rectangle {
78+
background: model-data.paired ? #d4ffd4 : #ffffff;
79+
border-color: #ddd;
80+
border-width: 1px;
81+
HorizontalLayout {
82+
padding: 10px;
83+
Text { text: "📱 "; }
84+
Text { text: model-data.name + " (" + model-data.ip + ":" + model-data.port + ") - " + model-data.status; color: #333; }
85+
if !model-data.paired: Button {
86+
text: "Pair";
87+
clicked => { root.pair_device(model-row); }
88+
}
89+
if model-data.paired: Button {
90+
text: "Disconnect";
91+
clicked => { root.disconnect_device(model-row); }
5692
}
5793
}
5894
}
5995
}
6096
}
97+
}
6198

62-
Tab {
63-
title: "File Transfer";
64-
VerticalLayout {
65-
Text { text: "Select Device and File to Send"; color: #333; }
66-
67-
StandardListView {
68-
model: root.devices;
69-
delegate: HorizontalLayout {
70-
if model-data.paired: {
71-
Text { text: model-data.name; color: #333; }
72-
LineEdit { placeholder-text: "File path"; id: file_path; }
73-
Button {
74-
text: "Send File";
75-
clicked => { root.send_file(model-row, file_path.text); }
76-
}
77-
}
99+
Tab {
100+
title: "File Transfer";
101+
VerticalLayout {
102+
Text { text: "Select Device and File to Send"; color: #333; }
103+
104+
ListView {
105+
for model-data [model-row] in root.devices : Rectangle {
106+
if model-data.paired: PairedDeviceFile {
107+
device_name: model-data.name;
108+
index: model-row;
109+
send_file(path) => { root.send_file(self.index, path); }
78110
}
79111
}
80112
}
81113
}
114+
}
82115

83-
Tab {
84-
title: "Clipboard Share";
85-
VerticalLayout {
86-
Text { text: "Select Device and Content to Send"; color: #333; }
87-
88-
StandardListView {
89-
model: root.devices;
90-
delegate: HorizontalLayout {
91-
if model-data.paired: {
92-
Text { text: model-data.name; color: #333; }
93-
LineEdit { placeholder-text: "Clipboard content"; id: clipboard_content; }
94-
Button {
95-
text: "Send Clipboard";
96-
clicked => { root.send_clipboard(model-row, clipboard_content.text); }
97-
}
98-
}
116+
Tab {
117+
title: "Clipboard Share";
118+
VerticalLayout {
119+
Text { text: "Select Device and Content to Send"; color: #333; }
120+
121+
ListView {
122+
for model-data [model-row] in root.devices : Rectangle {
123+
if model-data.paired: PairedDeviceClipboard {
124+
device_name: model-data.name;
125+
index: model-row;
126+
send_clipboard(content) => { root.send_clipboard(self.index, content); }
99127
}
100128
}
101129
}
102130
}
131+
}
103132

104-
Tab {
105-
title: "Chat";
106-
VerticalLayout {
107-
Text { text: "Select Device and Send Message"; color: #333; }
133+
Tab {
134+
title: "Chat";
135+
VerticalLayout {
136+
Text { text: "Select Device and Send Message"; color: #333; }
108137

109-
ComboBox {
110-
model: root.devices;
111-
text-role: "name";
112-
id: device_combo;
113-
}
138+
device_combo := ComboBox {
139+
model: root.device_names;
140+
}
114141

115-
HorizontalLayout {
116-
LineEdit { placeholder-text: "Type message"; id: chat_input; width: parent.width - 100px; }
117-
Button {
118-
text: "Send";
119-
clicked => { root.send_message(device_combo.current_index, chat_input.text); chat_input.text = ""; }
120-
}
142+
HorizontalLayout {
143+
chat_input := LineEdit { placeholder-text: "Type message"; width: parent.width - 100px; }
144+
Button {
145+
text: "Send";
146+
clicked => { root.send_message(device_combo.current-index, chat_input.text); chat_input.text = ""; }
121147
}
148+
}
122149

123-
ListView {
124-
model: root.messages;
125-
delegate: Rectangle {
126-
background: #ffffff;
127-
border-color: #ddd;
128-
border-width: 1px;
150+
ListView {
151+
for model-data in root.messages : Rectangle {
152+
background: #ffffff;
153+
border-color: #ddd;
154+
border-width: 1px;
155+
VerticalLayout {
129156
padding: 5px;
130157
Text { text: model-data; color: #333; }
131158
}
132159
}
133160
}
134161
}
162+
}
135163

136-
Tab {
137-
title: "Settings";
138-
VerticalLayout {
139-
Text { text: "Settings: Ports, etc. (Coming soon)"; color: #333; }
140-
}
164+
Tab {
165+
title: "Settings";
166+
VerticalLayout {
167+
Text { text: "Settings: Ports, etc. (Coming soon)"; color: #333; }
141168
}
142169
}
143-
144-
Text { text: root.status_message; color: #007bff; }
145170
}
146-
}
147-
}
148171

149-
struct Device {
150-
name: string,
151-
ip: string,
152-
port: string,
153-
status: string,
154-
paired: bool,
172+
Text { text: root.status_message; color: #007bff; }
173+
}
155174
}

0 commit comments

Comments
 (0)