Skip to content

Commit 0ad5012

Browse files
akshayr-mechaakshayr-mecha
authored
Merge pull request #368 from swetar-mecha/pre/status-bar
add(settings-drawer): slider widget added; icon button widget updated with bg color
2 parents e34532d + f2c05b8 commit 0ad5012

File tree

5 files changed

+467
-37
lines changed

5 files changed

+467
-37
lines changed

‎shell/crates/settings_drawer/src/main.rs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ fn main() {
1313
window_bounds: Some(window_bounds),
1414
..Default::default()
1515
},
16-
|_window, cx| cx.new(|_cx| SettingsDrawer::new()),
16+
|_window, cx| cx.new(|cx| SettingsDrawer::new(cx)),
1717
)
1818
.unwrap();
1919
cx.activate(true);

‎shell/crates/settings_drawer/src/ui/mod.rs‎

Lines changed: 82 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
mod icon;
22
mod widgets;
3-
use crate::ui::icon::Icon;
3+
use crate::ui::{
4+
icon::Icon,
5+
widgets::{Slider, SliderEvent, SliderState},
6+
};
47
use gpui::*;
58
use icon::IconName;
69
use widgets::IconButton;
@@ -34,17 +37,45 @@ pub struct SettingsDrawer {
3437
pub power_mode: PowerMode,
3538
pub mincrophone_recoding: bool,
3639
pub screen_recording: bool,
37-
pub calc_active: bool,
38-
pub camera_active: bool,
3940

4041
pub wireless_details: WirelessDetails,
4142
pub bluetooth_details: BluetoothDetails,
4243
pub open_terminal: bool,
4344
pub cell_signal: bool,
45+
46+
pub brightness_slider_state: Entity<SliderState>,
47+
pub brightness_slider_value: f32,
48+
49+
pub volume_slider_state: Entity<SliderState>,
50+
pub volume_slider_value: f32,
51+
_subscriptions: Vec<Subscription>,
4452
}
4553

4654
impl SettingsDrawer {
47-
pub fn new() -> Self {
55+
pub fn new(cx: &mut Context<Self>) -> Self {
56+
let brightness_slider = cx.new(|_| SliderState::new());
57+
let b_subscription =
58+
cx.subscribe(&brightness_slider, |this, _, event: &SliderEvent, cx| {
59+
let SliderEvent::Change(value) = event;
60+
this.brightness_slider_value = *value;
61+
println!("brightness value: {:?}", this.brightness_slider_value);
62+
cx.notify();
63+
});
64+
65+
let volume_slider = cx.new(|_| {
66+
SliderState::new()
67+
.default_value(20.)
68+
.pattern(widgets::SliderPattern::Bars)
69+
});
70+
let c_subscription = cx.subscribe(&volume_slider, |this, _, event: &SliderEvent, cx| {
71+
let SliderEvent::Change(value) = event;
72+
this.volume_slider_value = *value;
73+
println!("volume value: {:?}", this.volume_slider_value);
74+
cx.notify();
75+
});
76+
77+
let mut _subscriptions = vec![b_subscription, c_subscription];
78+
4879
Self {
4980
settings_active: false,
5081
battery_percent: 32,
@@ -55,8 +86,6 @@ impl SettingsDrawer {
5586
power_mode: PowerMode::Low,
5687
mincrophone_recoding: false,
5788
screen_recording: false,
58-
calc_active: true,
59-
camera_active: false,
6089
wireless_details: WirelessDetails {
6190
enalble: true,
6291
icon: IconName::WirelessHigh,
@@ -69,6 +98,11 @@ impl SettingsDrawer {
6998
},
7099
open_terminal: false,
71100
cell_signal: false,
101+
brightness_slider_state: brightness_slider,
102+
brightness_slider_value: 0.0,
103+
volume_slider_state: volume_slider,
104+
volume_slider_value: 0.0,
105+
_subscriptions,
72106
}
73107
}
74108
}
@@ -168,6 +202,7 @@ impl Render for SettingsDrawer {
168202
.grid_rows(2)
169203
.grid_cols(4)
170204
.h(px(236.))
205+
.w(px(476.))
171206
.bg(rgb(0x181818))
172207
.p_6()
173208
.gap_5()
@@ -176,6 +211,8 @@ impl Render for SettingsDrawer {
176211
IconButton::new("id_rotation")
177212
.icon(rotation_icon)
178213
.active(self.rotation_on)
214+
.active_icon_color(rgb(0x4892F1))
215+
.active_bg_color(rgb(0x202020))
179216
.on_click(cx.listener(
180217
|this: &mut SettingsDrawer,
181218
_event: &ClickEvent,
@@ -208,6 +245,8 @@ impl Render for SettingsDrawer {
208245
IconButton::new("id_screen_mirroring")
209246
.icon(screen_mirroring_icon)
210247
.active(self.screen_mirrorring)
248+
.active_icon_color(rgb(0x4892F1))
249+
.active_bg_color(rgb(0x202020))
211250
.on_click(cx.listener(
212251
|this: &mut SettingsDrawer,
213252
_event: &ClickEvent,
@@ -230,6 +269,7 @@ impl Render for SettingsDrawer {
230269
IconButton::new("id_microphone")
231270
.icon(IconName::MicroPhoneOff)
232271
.active(self.mincrophone_recoding)
272+
.active_bg_color(rgb(0x202020))
233273
.active_icon_color(rgb(0xFF6560))
234274
.on_click(cx.listener(
235275
|this: &mut SettingsDrawer,
@@ -245,6 +285,7 @@ impl Render for SettingsDrawer {
245285
IconButton::new("id_screen_recording")
246286
.icon(IconName::ScreenRecordingOff)
247287
.active(self.screen_recording)
288+
.active_bg_color(rgb(0x202020))
248289
.active_icon_color(rgb(0xFF6560))
249290
.on_click(cx.listener(
250291
|this: &mut SettingsDrawer,
@@ -260,15 +301,12 @@ impl Render for SettingsDrawer {
260301
IconButton::new("id_calc")
261302
.icon(IconName::Calculator)
262303
.icon_color(rgb(0xF4F4F4))
263-
.active(self.calc_active)
264-
.active_icon_color(rgb(0xF4F4F4))
265304
.on_click(cx.listener(
266305
|this: &mut SettingsDrawer,
267306
_event: &ClickEvent,
268307
_window: &mut Window,
269308
cx: &mut Context<Self>| {
270309
println!("calc clicked");
271-
this.calc_active = !this.calc_active;
272310
cx.notify();
273311
},
274312
)),
@@ -277,15 +315,13 @@ impl Render for SettingsDrawer {
277315
IconButton::new("id_camera")
278316
.icon(IconName::Camera)
279317
.icon_color(rgb(0xF4F4F4))
280-
.active(self.camera_active)
281318
.active_icon_color(rgb(0xF4F4F4))
282319
.on_click(cx.listener(
283320
|this: &mut SettingsDrawer,
284321
_event: &ClickEvent,
285322
_window: &mut Window,
286323
cx: &mut Context<Self>| {
287324
println!("camera clicked");
288-
this.camera_active = !this.camera_active;
289325
cx.notify();
290326
},
291327
)),
@@ -296,32 +332,32 @@ impl Render for SettingsDrawer {
296332
.grid()
297333
.grid_cols(4)
298334
.gap_4()
299-
.h(px(104.))
300-
.rounded(px(12.))
335+
.h(px(72.0))
301336
.child(
302337
div()
303338
.flex()
304339
.items_center()
305-
.justify_center()
306340
.w_full()
307341
.h_full()
308342
.text_color(rgb(0xF4F4F4))
309343
.text_lg()
310344
.col_span(2)
311345
.bg(rgb(0x202020))
312-
.rounded(px(12.))
346+
.rounded(px(8.))
313347
.child(
314348
div()
315349
.flex()
316350
.flex_row()
317351
.w_full()
318352
.items_center()
319-
.p_2()
353+
.justify_around()
354+
.px_2()
320355
.child(
321356
IconButton::new("id_brightness")
322357
.icon(IconName::BrightnessHigh)
323358
.icon_color(rgb(0xF4F4F4))
324359
.size((px(36.), px(36.)))
360+
.bg_color(rgb(0x202020))
325361
.border(px(0.))
326362
.on_click(cx.listener(|_, _, _, _| {
327363
println!("brightness clicked");
@@ -333,10 +369,14 @@ impl Render for SettingsDrawer {
333369
.justify_center()
334370
.items_center()
335371
.w(px(172.0))
336-
.h(px(72.0))
337-
.bg(rgb(0x202020))
338-
.rounded(px(12.))
339-
.child("sliderrrrr--------rrrrr"),
372+
.child(
373+
Slider::new(
374+
"brightness-slider",
375+
&self.brightness_slider_state,
376+
)
377+
.width(172.0)
378+
.height(56.0),
379+
),
340380
),
341381
),
342382
)
@@ -351,25 +391,40 @@ impl Render for SettingsDrawer {
351391
.text_lg()
352392
.col_span(2)
353393
.bg(rgb(0x202020))
354-
.rounded(px(12.))
394+
.rounded(px(8.))
355395
.child(
356396
div()
357397
.flex()
358398
.flex_row()
359399
.w_full()
360400
.items_center()
361-
.p_2()
401+
.justify_around()
402+
.pl_2()
362403
.child(
363404
IconButton::new("id_volume")
364405
.icon(IconName::VolumeMedium)
365406
.icon_color(rgb(0xF4F4F4))
366407
.size((px(36.), px(36.)))
408+
.bg_color(rgb(0x202020))
367409
.border(px(0.))
368410
.on_click(cx.listener(|_, _, _, _| {
369411
println!("volume clicked");
370412
})),
371413
)
372-
.child("sliderrrrr--------rrrrr"),
414+
.child(
415+
div()
416+
.flex()
417+
.justify_center()
418+
.items_end()
419+
.w(px(172.0))
420+
.child(
421+
Slider::new(
422+
"volume-slider",
423+
&self.volume_slider_state,
424+
)
425+
.width(172.0),
426+
),
427+
),
373428
),
374429
),
375430
)
@@ -380,13 +435,13 @@ impl Render for SettingsDrawer {
380435
.gap_5()
381436
.h(px(104.))
382437
.rounded(px(4.))
383-
.bg(rgb(0x181818))
384438
.child(
385439
IconButton::new("id_wireless")
386440
.icon(self.wireless_details.icon.clone())
387-
.icon_color(rgb(0x4D4D4D)) // changes as per wireless state
441+
.icon_color(rgb(0x4D4D4D)) // changes as per wireless state
388442
.size((px(104.), px(104.)))
389443
.active(self.wireless_details.enalble)
444+
.active_bg_color(rgb(0x202020))
390445
.label("Office wifi 1")
391446
.on_click(cx.listener(|_, _, _, _| {
392447
println!("wireless clicked");
@@ -398,6 +453,7 @@ impl Render for SettingsDrawer {
398453
.size((px(104.), px(104.)))
399454
.label("OFF")
400455
.active(self.bluetooth_details.enalble)
456+
.active_bg_color(rgb(0x202020))
401457
.on_click(cx.listener(|_, _, _, _| {
402458
println!("bluetooth clicked");
403459
})),
@@ -408,15 +464,13 @@ impl Render for SettingsDrawer {
408464
.size((px(104.), px(104.)))
409465
.label("Terminal")
410466
.icon_color(rgb(0xF4F4F4))
411-
.active(self.open_terminal)
412467
.active_icon_color(rgb(0xF4F4F4))
413468
.on_click(cx.listener(
414469
|this: &mut SettingsDrawer,
415470
_event: &ClickEvent,
416471
_window: &mut Window,
417472
cx: &mut Context<Self>| {
418473
println!("terminal clicked");
419-
this.open_terminal = !this.open_terminal;
420474
cx.notify();
421475
},
422476
)),
@@ -428,6 +482,7 @@ impl Render for SettingsDrawer {
428482
.label("No SIM")
429483
.active(self.cell_signal)
430484
.active_icon_color(rgb(0xF4F4F4))
485+
.active_bg_color(rgb(0x202020))
431486
.on_click(cx.listener(
432487
|this: &mut SettingsDrawer,
433488
_event: &ClickEvent,

‎shell/crates/settings_drawer/src/ui/widgets/icon_button.rs‎

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@ use std::rc::Rc;
33
use crate::ui::icon::Icon;
44
use gpui::{prelude::FluentBuilder, *};
55

6-
const ICON_COLOR: u32 = 0x4D4D4D; // default - gray | custom can be - white or active - blue
7-
const ACTIVE_ICON_COLOR: u32 = 0x4892F1;
8-
const ACTIVE_BG_COLOR: u32 = 0x202020;
9-
const PRESSED_BG_COLOR: u32 = 0x363636; // default - light gray | custom can be - yellow - xDB9200
6+
const ICON_COLOR: u32 = 0x4D4D4D; // default - gray | custom can be - white or active - blue
7+
const ACTIVE_ICON_COLOR: u32 = 0xF4F4F4; // default - white | custom can be - blue
8+
const BG_COLOR: u32 = 0x181818;
9+
const BORDER_COLOR: u32 = 0x202020;
1010

1111
#[derive(IntoElement)]
1212
pub struct IconButton {
@@ -18,6 +18,7 @@ pub struct IconButton {
1818
on_click: Option<Rc<dyn Fn(&ClickEvent, &mut Window, &mut App)>>,
1919
size: Option<(Pixels, Pixels)>,
2020
icon_color: Option<Hsla>,
21+
bg_color: Option<Hsla>,
2122
active_icon_color: Option<Hsla>,
2223
active_bg_color: Option<Hsla>,
2324
border: Option<Pixels>,
@@ -35,6 +36,7 @@ impl IconButton {
3536
on_click: None,
3637
size: None,
3738
icon_color: None,
39+
bg_color: None,
3840
active_icon_color: None,
3941
active_bg_color: None,
4042
border: None,
@@ -66,6 +68,11 @@ impl IconButton {
6668
self
6769
}
6870

71+
pub fn bg_color(mut self, bg_color: impl Into<Hsla>) -> Self {
72+
self.bg_color = Some(bg_color.into());
73+
self
74+
}
75+
6976
pub fn active_icon_color(mut self, active_icon_color: impl Into<Hsla>) -> Self {
7077
self.active_icon_color = Some(active_icon_color.into());
7178
self
@@ -101,17 +108,22 @@ impl RenderOnce for IconButton {
101108
.h(px(84.0))
102109
.rounded(px(8.0))
103110
.border(px(1.))
104-
.border_color(rgb(0x4D4D4D))
105-
.active(|this| this.opacity(0.85))
106-
// .opacity(0.2)
111+
.border_color(rgb(BORDER_COLOR))
112+
.active(|this| this.bg(rgb(0x363636))) // GPUI's active state
107113
.items_center()
108114
.justify_center()
109-
.when(self.pressed, |this| this.bg(rgb(PRESSED_BG_COLOR)))
115+
.when(!self.pressed && !self.active, |this| {
116+
this.bg(if let Some(bg_color) = self.bg_color {
117+
bg_color
118+
} else {
119+
rgb(BG_COLOR).into()
120+
})
121+
})
110122
.when(!self.pressed && self.active, |this| {
111123
if let Some(active_bg_color) = self.active_bg_color {
112124
this.bg(active_bg_color)
113125
} else {
114-
this.bg(rgb(ACTIVE_BG_COLOR))
126+
this
115127
}
116128
})
117129
.when_some(self.on_click, |this, on_click| {

‎shell/crates/settings_drawer/src/ui/widgets/mod.rs‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
mod icon_button;
2+
mod slider;
23

34
pub use icon_button::*;
5+
pub use slider::*;

0 commit comments

Comments
 (0)