Skip to content

Commit 4187cab

Browse files
alanpoonalanpoon
committed
support android back pressed to close modal
1 parent 99e847c commit 4187cab

File tree

2 files changed

+102
-68
lines changed

2 files changed

+102
-68
lines changed

‎src/shared/image_viewer.rs‎

Lines changed: 101 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -118,11 +118,12 @@ live_design! {
118118

119119
magnifying_glass_button = <RobrixIconButton> {
120120
width: Fit, height: Fit,
121+
align: {x: 1.0, y: 0.0},
121122
spacing: 0,
122-
margin: 8,
123-
padding: 3
123+
margin: {top: 4.5} // vertically align with the title
124+
padding: 7, // Ensure the height is the same as the Close button. Height of Close button is 15 * 2 + 14 = 44.
124125
draw_bg: {
125-
color: (COLOR_PRIMARY)
126+
color: (COLOR_SECONDARY)
126127
}
127128
draw_icon: {
128129
svg_file: (ICON_ZOOM),
@@ -147,87 +148,39 @@ live_design! {
147148
}
148149
}
149150
pub RotationButton = <RobrixIconButton> {
150-
width: Fit, height: Fit,
151-
margin: 8,
152-
padding: 3
153-
align: {x: 0.5, y: 0.5}
151+
width: Fit,
152+
height: Fit,
153+
align: {x: 1.0, y: 0.0},
154+
spacing: 0,
155+
margin: {top: 4.5} // vertically align with the title
156+
padding: 7,
154157
draw_bg: {
155-
color: (COLOR_PRIMARY)
158+
color: (COLOR_SECONDARY)
156159
}
157160
draw_icon: {
158161
svg_file: (ICON_ROTATE_CW),
159162
fn get_color(self) -> vec4 {
160163
return #x0;
161164
}
162165
}
163-
icon_walk: {width: 30, height: 30, margin: {right: -10} }
166+
icon_walk: {width: 30, height: 30, }
164167
}
165168
pub ImageViewer = {{ImageViewer}} {
166169
width: Fill, height: Fill,
167170
flow: Overlay
168171
show_bg: true
169172
draw_bg: {
170-
color: (COLOR_PRIMARY)
173+
color: (COLOR_PRIMARY_50_TRANSPARENT)
171174
}
172175

173176
image_layer = <View> {
174177
width: Fill, height: Fill,
175178
align: {x: 0.5, y: 0.5}
176179
show_bg: true
177180
draw_bg: {
178-
color: (COLOR_PRIMARY)
181+
color: (COLOR_PRIMARY_50_TRANSPARENT)
179182
}
180183
flow: Down
181-
182-
header = <View> {
183-
width: Fill, height: 50
184-
flow: Right
185-
align: {x: 1.0, y: 0.5},
186-
187-
zoom_button_minus = <MagnifyingGlass> {
188-
sign_label = <View> {
189-
width: Fill, height: Fill,
190-
align: { x: 0.4, y: 0.35 }
191-
192-
magnifying_glass_sign = <Label> {
193-
text: "-",
194-
draw_text: {
195-
text_style: <THEME_FONT_BOLD>{font_size: 15},
196-
color: #000000
197-
}
198-
}
199-
}
200-
}
201-
202-
zoom_button_plus = <MagnifyingGlass> { }
203-
204-
rotation_button_anti_clockwise = <RotationButton> {
205-
draw_icon: {
206-
svg_file: (ICON_ROTATE_CCW),
207-
fn get_color(self) -> vec4 {
208-
return #x0;
209-
}
210-
}
211-
}
212-
213-
rotation_button_clockwise = <RotationButton> { }
214-
215-
close_button = <RobrixIconButton> {
216-
width: Fit, height: Fit,
217-
spacing: 0,
218-
padding: 5
219-
draw_bg: {
220-
color: (COLOR_PRIMARY)
221-
}
222-
draw_icon: {
223-
svg_file: (ICON_CLOSE),
224-
fn get_color(self) -> vec4 {
225-
return #x0;
226-
}
227-
}
228-
icon_walk: { width: 25, height: 25 }
229-
}
230-
}
231184

232185
rotated_image_container = <View> {
233186
width: Fill, height: Fill,
@@ -284,6 +237,80 @@ live_design! {
284237
}
285238
}
286239

240+
header = <View> {
241+
width: Fill, height: 50
242+
flow: Right
243+
margin: {right: 20, top: 40}
244+
align: {x: 1.0, y: 0.5},
245+
246+
zoom_button_minus = <MagnifyingGlass> {
247+
sign_label = <View> {
248+
width: Fill, height: Fill,
249+
align: { x: 0.4, y: 0.35 }
250+
251+
magnifying_glass_sign = <Label> {
252+
text: "-",
253+
draw_text: {
254+
text_style: <THEME_FONT_BOLD>{font_size: 15},
255+
color: #000000
256+
}
257+
}
258+
}
259+
}
260+
261+
zoom_button_plus = <MagnifyingGlass> { }
262+
263+
rotation_button_anti_clockwise = <RotationButton> {
264+
draw_icon: {
265+
svg_file: (ICON_ROTATE_CCW),
266+
fn get_color(self) -> vec4 {
267+
return #x0;
268+
}
269+
}
270+
}
271+
272+
rotation_button_clockwise = <RotationButton> { }
273+
274+
reset_button = <RobrixIconButton> {
275+
width: Fit,
276+
height: Fit,
277+
align: {x: 1.0, y: 0.0},
278+
spacing: 0,
279+
margin: {top: 4.5} // vertically align with the title
280+
padding: 10,
281+
draw_bg: {
282+
color: (COLOR_SECONDARY)
283+
}
284+
draw_icon: {
285+
svg_file: (ICON_JUMP),
286+
fn get_color(self) -> vec4 {
287+
return #x0;
288+
}
289+
}
290+
icon_walk: {width: 25, height: 25}
291+
}
292+
293+
// The "X" close button on the top right
294+
close_button = <RobrixIconButton> {
295+
width: Fit,
296+
height: Fit,
297+
align: {x: 1.0, y: 0.0},
298+
spacing: 0,
299+
margin: {top: 4.5} // vertically align with the title
300+
padding: 15,
301+
draw_bg: {
302+
color: (COLOR_SECONDARY)
303+
}
304+
draw_icon: {
305+
svg_file: (ICON_CLOSE),
306+
fn get_color(self) -> vec4 {
307+
return #x0;
308+
}
309+
}
310+
icon_walk: {width: 14, height: 14}
311+
}
312+
}
313+
287314
metadata_view = <View> {
288315
width: Fill, height: Fill
289316
flow: RightWrap
@@ -341,7 +368,7 @@ live_design! {
341368
default: upright,
342369
degree_neg90 = {
343370
redraw: false,
344-
from: {all: Forward {duration: 1.0}}
371+
from: {all: Forward {duration: 0.2}}
345372
apply: {
346373
image_layer = {
347374
rotated_image_container = {
@@ -354,7 +381,7 @@ live_design! {
354381
}
355382
upright = {
356383
redraw: false,
357-
from: {all: Forward {duration: 1.0}}
384+
from: {all: Forward {duration: 0.2}}
358385
apply: {
359386
image_layer = {
360387
rotated_image_container = {
@@ -367,7 +394,7 @@ live_design! {
367394
}
368395
degree_90 = {
369396
redraw: false,
370-
from: {all: Forward {duration: 1.0}}
397+
from: {all: Forward {duration: 0.2}}
371398
apply: {
372399
image_layer = {
373400
rotated_image_container = {
@@ -380,7 +407,7 @@ live_design! {
380407
}
381408
degree_180 = {
382409
redraw: false,
383-
from: {all: Forward {duration: 1.0}}
410+
from: {all: Forward {duration: 0.2}}
384411
apply: {
385412
image_layer = {
386413
rotated_image_container = {
@@ -393,7 +420,7 @@ live_design! {
393420
}
394421
degree_270 = {
395422
redraw: false,
396-
from: {all: Forward {duration: 1.0}}
423+
from: {all: Forward {duration: 0.2}}
397424
apply: {
398425
image_layer = {
399426
rotated_image_container = {
@@ -643,7 +670,10 @@ impl Widget for ImageViewer {
643670
self.is_animating_rotation = animator_action.is_animating();
644671
}
645672
}
646-
673+
if event.back_pressed() || matches!(event, Event::KeyDown(KeyEvent { key_code: KeyCode::Escape, .. })) {
674+
self.reset(cx);
675+
cx.action(ImageViewerAction::Hide);
676+
}
647677
self.view.handle_event(cx, event, scope);
648678
self.match_event(cx, event);
649679
}
@@ -662,7 +692,10 @@ impl MatchEvent for ImageViewer {
662692
fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions) {
663693
if self.view.button(ids!(close_button)).clicked(actions) {
664694
self.reset(cx);
665-
cx.action(ImageViewerAction::Hide)
695+
cx.action(ImageViewerAction::Hide);
696+
}
697+
if self.view.button(ids!(reset_button)).clicked(actions) {
698+
self.reset(cx);
666699
}
667700
if self
668701
.view

‎src/shared/styles.rs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,7 @@ live_design! {
108108
pub COLOR_SELECT_TEXT = #A6CDFE
109109

110110
pub COLOR_PRIMARY = #ffffff
111+
pub COLOR_PRIMARY_50_TRANSPARENT = #ffffff80
111112
pub COLOR_PRIMARY_DARKER = #fefefe
112113
pub COLOR_SECONDARY = #E3E3E3
113114

0 commit comments

Comments
 (0)