@@ -42,22 +42,22 @@ pub mut:
42
42
users []User = [
43
43
User{
44
44
first_name: 'Sam'
45
- last_name: 'Johnson'
46
- age: 29
47
- country: 'United States'
45
+ last_name: 'Johnson'
46
+ age: 29
47
+ country: 'United States'
48
48
},
49
49
User{
50
50
first_name: 'Kate'
51
- last_name: 'Williams'
52
- age: 26
53
- country: 'Canada'
51
+ last_name: 'Williams'
52
+ age: 26
53
+ country: 'Canada'
54
54
},
55
55
]
56
56
}
57
57
58
58
pub fn new (p AppUIParams) & AppUI {
59
59
mut app := & AppUI{
60
- id: p.id
60
+ id: p.id
61
61
users: p.users
62
62
}
63
63
app.make_layout ()
@@ -75,96 +75,96 @@ pub fn (mut app AppUI) make_layout() {
75
75
logo = 'img/logo.png'
76
76
}
77
77
app.country = ui.radio (
78
- width: 200
78
+ width: 200
79
79
values: ['United States' , 'Canada' , 'United Kingdom' , 'Australia' ]
80
- title: 'Country'
80
+ title: 'Country'
81
81
)
82
82
app.pbar = ui.progressbar (
83
83
width: 170
84
- max: 10
85
- val: 2
84
+ max: 10
85
+ val: 2
86
86
// theme: "red"
87
87
)
88
88
app.label = ui.label (id: 'counter' , text: '2/10' , text_font_name: 'fixed_bold_italic' )
89
89
app.layout = ui.row (
90
- id: ui.id (app.id, 'layout' )
90
+ id: ui.id (app.id, 'layout' )
91
91
bg_color: gx.white
92
- margin_: .02
93
- spacing: .02
94
- widths: [ui.compact, ui.stretch] // 1.0 == .64 + .3 + .02 + 2 * .02
92
+ margin_: .02
93
+ spacing: .02
94
+ widths: [ui.compact, ui.stretch] // 1.0 == .64 + .3 + .02 + 2 * .02
95
95
children: [
96
96
ui.column (
97
- spacing: 10
98
- widths: ui.compact
99
- heights: ui.compact
97
+ spacing: 10
98
+ widths: ui.compact
99
+ heights: ui.compact
100
100
scrollview: true
101
- children: [
101
+ children: [
102
102
ui.textbox (
103
- max_len: 20
104
- width: 200
103
+ max_len: 20
104
+ width: 200
105
105
placeholder: 'First name'
106
- text: & app.first_name
106
+ text: & app.first_name
107
107
// is_focused: &app.started
108
- is_error: & app.is_error
108
+ is_error: & app.is_error
109
109
is_focused: true
110
110
),
111
111
ui.textbox (
112
- max_len: 50
113
- width: 200
112
+ max_len: 50
113
+ width: 200
114
114
placeholder: 'Last name'
115
- text: & app.last_name
116
- is_error: & app.is_error
115
+ text: & app.last_name
116
+ is_error: & app.is_error
117
117
),
118
118
ui.textbox (
119
- max_len: 3
120
- width: 200
119
+ max_len: 3
120
+ width: 200
121
121
placeholder: 'Age'
122
- is_numeric: true
123
- text: & app.age
124
- is_error: & app.is_error
122
+ is_numeric: true
123
+ text: & app.age
124
+ is_error: & app.is_error
125
125
),
126
126
ui.textbox (
127
- width: 200
127
+ width: 200
128
128
placeholder: 'Password'
129
129
is_password: true
130
- max_len: 20
131
- text: & app.password
130
+ max_len: 20
131
+ text: & app.password
132
132
),
133
133
ui.checkbox (
134
134
checked: true
135
- text: 'Online registration'
135
+ text: 'Online registration'
136
136
),
137
137
ui.checkbox (text: 'Subscribe to the newsletter' ),
138
138
app.country,
139
139
ui.row (
140
- id: 'btn_row'
141
- widths: ui.compact
142
- heights: 20.0
143
- spacing: 80
140
+ id: 'btn_row'
141
+ widths: ui.compact
142
+ heights: 20.0
143
+ spacing: 80
144
144
children: [
145
145
ui.button (
146
- width: 60
147
- text: 'Add user'
148
- tooltip: 'Required fields:\n * First name\n * Last name\n * Age'
146
+ width: 60
147
+ text: 'Add user'
148
+ tooltip: 'Required fields:\n * First name\n * Last name\n * Age'
149
149
on_click: app.btn_add_click
150
- radius: .0
150
+ radius: .0
151
151
),
152
152
ui.button (
153
- width: 40
154
- tooltip: 'about'
155
- text: '?'
153
+ width: 40
154
+ tooltip: 'about'
155
+ text: '?'
156
156
on_click: btn_help_click
157
- radius: .3
157
+ radius: .3
158
158
),
159
159
]
160
160
),
161
161
ui.row (
162
- spacing: 10
163
- widths: [
162
+ spacing: 10
163
+ widths: [
164
164
150.0 ,
165
165
40 ,
166
166
]
167
- heights: ui.compact
167
+ heights: ui.compact
168
168
children: [
169
169
app.pbar,
170
170
app.label,
@@ -178,32 +178,32 @@ pub fn (mut app AppUI) make_layout() {
178
178
center: [
179
179
0 ,
180
180
]
181
- right: [
181
+ right: [
182
182
1 ,
183
183
]
184
184
}
185
- widths: [
185
+ widths: [
186
186
ui.stretch,
187
187
ui.compact,
188
188
]
189
- heights: [
189
+ heights: [
190
190
ui.stretch,
191
191
ui.compact,
192
192
]
193
- children: [
193
+ children: [
194
194
ui.canvas_plus (
195
- width: 400
196
- height: 275
197
- on_draw: app.draw
198
- bg_color: gx.Color{255 , 220 , 220 , 150 }
195
+ width: 400
196
+ height: 275
197
+ on_draw: app.draw
198
+ bg_color: gx.Color{255 , 220 , 220 , 150 }
199
199
bg_radius: 10
200
200
// text_size: 20
201
201
),
202
202
ui.picture (
203
- id: 'logo'
204
- width: 50
203
+ id: 'logo'
204
+ width: 50
205
205
height: 50
206
- path: logo
206
+ path: logo
207
207
),
208
208
]
209
209
),
@@ -234,9 +234,9 @@ fn (mut app AppUI) btn_add_click(b &ui.Button) {
234
234
}
235
235
new_user := User{
236
236
first_name: app.first_name // first_name.text
237
- last_name: app.last_name // .text
238
- age: app.age.int ()
239
- country: app.country.selected_value ()
237
+ last_name: app.last_name // .text
238
+ age: app.age.int ()
239
+ country: app.country.selected_value ()
240
240
}
241
241
app.users << new_user
242
242
app.pbar.val++
@@ -252,21 +252,17 @@ fn (mut app AppUI) btn_add_click(b &ui.Button) {
252
252
fn (app &AppUI) draw (mut d ui.DrawDevice, c & ui.CanvasLayout) {
253
253
marginx , marginy := 20 , 20
254
254
for i, user in app.users {
255
- y := marginy + i * users. cell_height
255
+ y := marginy + i * cell_height
256
256
// Outer border
257
- c.draw_device_rect_empty (d, marginx, y, users.table_width, users.cell_height,
258
- gx.gray)
257
+ c.draw_device_rect_empty (d, marginx, y, table_width, cell_height, gx.gray)
259
258
// Vertical separators
260
- c.draw_device_line (d, users.cell_width, y, users.cell_width, y + users.cell_height,
261
- gx.gray)
262
- c.draw_device_line (d, users.cell_width * 2 , y, users.cell_width * 2 , y + users.cell_height,
263
- gx.gray)
264
- c.draw_device_line (d, users.cell_width * 3 , y, users.cell_width * 3 , y + users.cell_height,
265
- gx.gray)
259
+ c.draw_device_line (d, cell_width, y, cell_width, y + cell_height, gx.gray)
260
+ c.draw_device_line (d, cell_width * 2 , y, cell_width * 2 , y + cell_height, gx.gray)
261
+ c.draw_device_line (d, cell_width * 3 , y, cell_width * 3 , y + cell_height, gx.gray)
266
262
// Text values
267
263
c.draw_device_text (d, marginx + 5 , y + 5 , user.first_name)
268
- c.draw_device_text (d, marginx + 5 + users. cell_width, y + 5 , user.last_name)
269
- c.draw_device_text (d, marginx + 5 + users. cell_width * 2 , y + 5 , user.age.str ())
270
- c.draw_device_text (d, marginx + 5 + users. cell_width * 3 , y + 5 , user.country)
264
+ c.draw_device_text (d, marginx + 5 + cell_width, y + 5 , user.last_name)
265
+ c.draw_device_text (d, marginx + 5 + cell_width * 2 , y + 5 , user.age.str ())
266
+ c.draw_device_text (d, marginx + 5 + cell_width * 3 , y + 5 , user.country)
271
267
}
272
268
}
0 commit comments