Skip to content

Commit f2c05b8

Browse files
swetar-mechaswetar-mecha
committed
fix(settings drawer): handle active state for icon button
1 parent 47d90f5 commit f2c05b8

File tree

2 files changed

+18
-24
lines changed

2 files changed

+18
-24
lines changed

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

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,6 @@ pub struct SettingsDrawer {
3737
pub power_mode: PowerMode,
3838
pub mincrophone_recoding: bool,
3939
pub screen_recording: bool,
40-
pub calc_active: bool,
41-
pub camera_active: bool,
4240

4341
pub wireless_details: WirelessDetails,
4442
pub bluetooth_details: BluetoothDetails,
@@ -88,8 +86,6 @@ impl SettingsDrawer {
8886
power_mode: PowerMode::Low,
8987
mincrophone_recoding: false,
9088
screen_recording: false,
91-
calc_active: true,
92-
camera_active: false,
9389
wireless_details: WirelessDetails {
9490
enalble: true,
9591
icon: IconName::WirelessHigh,
@@ -215,6 +211,8 @@ impl Render for SettingsDrawer {
215211
IconButton::new("id_rotation")
216212
.icon(rotation_icon)
217213
.active(self.rotation_on)
214+
.active_icon_color(rgb(0x4892F1))
215+
.active_bg_color(rgb(0x202020))
218216
.on_click(cx.listener(
219217
|this: &mut SettingsDrawer,
220218
_event: &ClickEvent,
@@ -247,6 +245,8 @@ impl Render for SettingsDrawer {
247245
IconButton::new("id_screen_mirroring")
248246
.icon(screen_mirroring_icon)
249247
.active(self.screen_mirrorring)
248+
.active_icon_color(rgb(0x4892F1))
249+
.active_bg_color(rgb(0x202020))
250250
.on_click(cx.listener(
251251
|this: &mut SettingsDrawer,
252252
_event: &ClickEvent,
@@ -269,6 +269,7 @@ impl Render for SettingsDrawer {
269269
IconButton::new("id_microphone")
270270
.icon(IconName::MicroPhoneOff)
271271
.active(self.mincrophone_recoding)
272+
.active_bg_color(rgb(0x202020))
272273
.active_icon_color(rgb(0xFF6560))
273274
.on_click(cx.listener(
274275
|this: &mut SettingsDrawer,
@@ -284,6 +285,7 @@ impl Render for SettingsDrawer {
284285
IconButton::new("id_screen_recording")
285286
.icon(IconName::ScreenRecordingOff)
286287
.active(self.screen_recording)
288+
.active_bg_color(rgb(0x202020))
287289
.active_icon_color(rgb(0xFF6560))
288290
.on_click(cx.listener(
289291
|this: &mut SettingsDrawer,
@@ -299,15 +301,12 @@ impl Render for SettingsDrawer {
299301
IconButton::new("id_calc")
300302
.icon(IconName::Calculator)
301303
.icon_color(rgb(0xF4F4F4))
302-
.active(self.calc_active)
303-
.active_icon_color(rgb(0xF4F4F4))
304304
.on_click(cx.listener(
305305
|this: &mut SettingsDrawer,
306306
_event: &ClickEvent,
307307
_window: &mut Window,
308308
cx: &mut Context<Self>| {
309309
println!("calc clicked");
310-
this.calc_active = !this.calc_active;
311310
cx.notify();
312311
},
313312
)),
@@ -316,15 +315,13 @@ impl Render for SettingsDrawer {
316315
IconButton::new("id_camera")
317316
.icon(IconName::Camera)
318317
.icon_color(rgb(0xF4F4F4))
319-
.active(self.camera_active)
320318
.active_icon_color(rgb(0xF4F4F4))
321319
.on_click(cx.listener(
322320
|this: &mut SettingsDrawer,
323321
_event: &ClickEvent,
324322
_window: &mut Window,
325323
cx: &mut Context<Self>| {
326324
println!("camera clicked");
327-
this.camera_active = !this.camera_active;
328325
cx.notify();
329326
},
330327
)),
@@ -444,6 +441,7 @@ impl Render for SettingsDrawer {
444441
.icon_color(rgb(0x4D4D4D)) // changes as per wireless state
445442
.size((px(104.), px(104.)))
446443
.active(self.wireless_details.enalble)
444+
.active_bg_color(rgb(0x202020))
447445
.label("Office wifi 1")
448446
.on_click(cx.listener(|_, _, _, _| {
449447
println!("wireless clicked");
@@ -455,6 +453,7 @@ impl Render for SettingsDrawer {
455453
.size((px(104.), px(104.)))
456454
.label("OFF")
457455
.active(self.bluetooth_details.enalble)
456+
.active_bg_color(rgb(0x202020))
458457
.on_click(cx.listener(|_, _, _, _| {
459458
println!("bluetooth clicked");
460459
})),
@@ -465,15 +464,13 @@ impl Render for SettingsDrawer {
465464
.size((px(104.), px(104.)))
466465
.label("Terminal")
467466
.icon_color(rgb(0xF4F4F4))
468-
.active(self.open_terminal)
469467
.active_icon_color(rgb(0xF4F4F4))
470468
.on_click(cx.listener(
471469
|this: &mut SettingsDrawer,
472470
_event: &ClickEvent,
473471
_window: &mut Window,
474472
cx: &mut Context<Self>| {
475473
println!("terminal clicked");
476-
this.open_terminal = !this.open_terminal;
477474
cx.notify();
478475
},
479476
)),
@@ -485,6 +482,7 @@ impl Render for SettingsDrawer {
485482
.label("No SIM")
486483
.active(self.cell_signal)
487484
.active_icon_color(rgb(0xF4F4F4))
485+
.active_bg_color(rgb(0x202020))
488486
.on_click(cx.listener(
489487
|this: &mut SettingsDrawer,
490488
_event: &ClickEvent,

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

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +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
108
const BG_COLOR: u32 = 0x181818;
11-
const BORDER_COLOR : u32 = 0x202020;
9+
const BORDER_COLOR: u32 = 0x202020;
1210

1311
#[derive(IntoElement)]
1412
pub struct IconButton {
@@ -111,23 +109,21 @@ impl RenderOnce for IconButton {
111109
.rounded(px(8.0))
112110
.border(px(1.))
113111
.border_color(rgb(BORDER_COLOR))
114-
.active(|this| this.opacity(0.85))
115-
// .opacity(0.2)
112+
.active(|this| this.bg(rgb(0x363636))) // GPUI's active state
116113
.items_center()
117114
.justify_center()
118-
.when(!self.pressed && !self.active, |this| this.bg(
119-
if let Some(bg_color) = self.bg_color {
115+
.when(!self.pressed && !self.active, |this| {
116+
this.bg(if let Some(bg_color) = self.bg_color {
120117
bg_color
121118
} else {
122119
rgb(BG_COLOR).into()
123-
},
124-
))
125-
.when(self.pressed, |this| this.bg(rgb(PRESSED_BG_COLOR)))
120+
})
121+
})
126122
.when(!self.pressed && self.active, |this| {
127123
if let Some(active_bg_color) = self.active_bg_color {
128124
this.bg(active_bg_color)
129125
} else {
130-
this.bg(rgb(ACTIVE_BG_COLOR))
126+
this
131127
}
132128
})
133129
.when_some(self.on_click, |this, on_click| {

0 commit comments

Comments
 (0)