GUI/grim
1
1
Fork 0
Code Issues 6 Pull requests Projects Releases 8 Packages Wiki Activity Actions

ui: fix wallet creation button, optimize circle button, make black color lighter

Browse source
This commit is contained in:
ardocrat 2023-07-30 21:08:16 +03:00
parent 18b05fffe9
commit 499c9c453e
3 changed files with 82 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/gui/colors.rs
View file

@ -18,8 +18,7 @@ pub struct Colors;
impl Colors { impl Colors {
pub const WHITE: Color32 = Color32::from_gray(253); pub const WHITE: Color32 = Color32::from_gray(253);
pub const BLACK: Color32 = Color32::from_gray(2); pub const BLACK: Color32 = Color32::from_gray(12);
pub const DARK_TEXT: Color32 = Color32::from_gray(30);
pub const TRANSPARENT: Color32 = Color32::from_rgba_premultiplied(0, 0, 0, 0); pub const TRANSPARENT: Color32 = Color32::from_rgba_premultiplied(0, 0, 0, 0);
pub const SEMI_TRANSPARENT: Color32 = Color32::from_black_alpha(100); pub const SEMI_TRANSPARENT: Color32 = Color32::from_black_alpha(100);
pub const YELLOW: Color32 = Color32::from_rgb(254, 241, 2); pub const YELLOW: Color32 = Color32::from_rgb(254, 241, 2);

14
src/gui/views/views.rs
View file

@ -200,23 +200,21 @@ impl View {
pub fn circle_button(ui: &mut egui::Ui, icon: &'static str, action: impl FnOnce()) { pub fn circle_button(ui: &mut egui::Ui, icon: &'static str, action: impl FnOnce()) {
ui.scope(|ui| { ui.scope(|ui| {
// Setup colors. // Setup colors.
ui.visuals_mut().widgets.inactive.bg_fill = Colors::BUTTON; ui.visuals_mut().widgets.inactive.bg_fill = Colors::GOLD;
ui.visuals_mut().widgets.hovered.bg_fill = Colors::FILL; ui.visuals_mut().widgets.hovered.bg_fill = Colors::GOLD;
ui.visuals_mut().widgets.active.bg_fill = Colors::FILL_DARK; ui.visuals_mut().widgets.active.bg_fill = Colors::YELLOW;
// Setup radius. // Setup radius.
let mut r = 44.0 * 0.5; let mut r = 44.0 * 0.5;
let size = egui::Vec2::splat(2.0 * r + 5.0); let size = egui::Vec2::splat(2.0 * r + 5.0);
let (rect, br) = ui.allocate_at_least(size, Sense::click_and_drag()); let (rect, br) = ui.allocate_at_least(size, Sense::click_and_drag());
let mut icon_color = Colors::GRAY; let mut icon_color = Colors::TEXT;
let mut stroke = Self::DEFAULT_STROKE;
// Increase radius and change icon size and color on-hover. // Increase radius and change icon size and color on-hover.
if br.hovered() { if br.hovered() {
r = r * 1.04; r = r * 1.04;
icon_color = Colors::TEXT_BUTTON; icon_color = Colors::TITLE;
stroke = Self::ITEM_HOVER_STROKE;
} }
let visuals = ui.style().interact(&br); let visuals = ui.style().interact(&br);
@ -224,7 +222,7 @@ impl View {
center: rect.center(), center: rect.center(),
radius: r, radius: r,
fill: visuals.bg_fill, fill: visuals.bg_fill,
stroke, stroke: Self::DEFAULT_STROKE
}); });
ui.allocate_ui_at_rect(rect, |ui| { ui.allocate_ui_at_rect(rect, |ui| {
ui.centered_and_justified(|ui| { ui.centered_and_justified(|ui| {

126
src/gui/views/wallets/wallets.rs
View file

@ -14,7 +14,7 @@
use std::cmp::{max, min}; use std::cmp::{max, min};
use egui::{Align, Align2, Layout, Margin, RichText, Rounding, TextStyle, Widget}; use egui::{Align, Align2, Layout, Margin, RichText, Rounding, ScrollArea, TextStyle, Widget};
use egui_extras::{Size, StripBuilder}; use egui_extras::{Size, StripBuilder};
use crate::gui::Colors; use crate::gui::Colors;
@ -142,33 +142,39 @@ impl WalletsContent {
} }
}); });
// Show non-empty list if wallet is not creating and not open at single panel mode. // Show non-empty list if network panel is closed at non-dual root mode
if !empty_list && !create_wallet && (!open_wallet_panel || dual_panel) { // and if wallet is not creating and not open at single panel mode.
let root_dual_panel = Root::is_dual_panel_mode(frame);
let wallets_panel_closed = !root_dual_panel && Root::is_network_panel_open();
if !wallets_panel_closed && !empty_list && !create_wallet && (!open_wallet_panel || dual_panel) {
// Setup flag to show wallet creation button if wallets panel is showing at root
// and wallet creation is not showing at dual panel mode.
let show_creation_btn = !wallets_panel_closed && (!open_wallet_panel || show_wallet);
egui::CentralPanel::default() egui::CentralPanel::default()
.frame(egui::Frame { .frame(egui::Frame {
stroke: View::DEFAULT_STROKE, stroke: View::DEFAULT_STROKE,
fill: Colors::FILL_DARK, fill: Colors::FILL_DARK,
inner_margin: Margin { inner_margin: Margin {
left: View::far_left_inset_margin(ui) + 6.0, left: View::far_left_inset_margin(ui) + 4.0,
right: View::far_right_inset_margin(ui, frame) + 6.0, right: View::far_right_inset_margin(ui, frame) + 4.0,
top: 5.0, top: 4.0,
bottom: View::get_bottom_inset(), bottom: View::get_bottom_inset() + 4.0,
}, },
..Default::default() ..Default::default()
}) })
.show_inside(ui, |ui| { .show_inside(ui, |ui| {
self.wallet_list_ui(ui, dual_panel, &wallets, cb); // Show list of wallets.
}); let scroll = self.list_ui(ui, dual_panel, show_creation_btn, &wallets, cb);
// Do not show creation button if wallets panel is not showing at root if show_creation_btn {
// or if wallet creation is showing at dual panel mode. // Setup right margin for button.
let root_dual_panel = Root::is_dual_panel_mode(frame); let mut right_margin = if dual_panel { wallet_panel_width } else { 0.0 };
let wallets_panel_not_open = !root_dual_panel && Root::is_network_panel_open(); if scroll { right_margin += 6.0 }
if wallets_panel_not_open || (open_wallet_panel && !show_wallet) { // Show wallet creation button.
return; self.create_wallet_btn_ui(ui, right_margin);
} else { }
self.create_wallet_btn_ui(ui, if dual_panel { wallet_panel_width } else { 0.0 }); });
}
} }
} }
@ -204,36 +210,56 @@ impl WalletsContent {
}, ui, frame); }, ui, frame);
} }
/// Draw list of wallets. /// Draw list of wallets. Returns `true` if scroller is showing.
fn wallet_list_ui(&mut self, fn list_ui(&mut self,
ui: &mut egui::Ui, ui: &mut egui::Ui,
dual_panel: bool, dual_panel: bool,
wallets: &Vec<Wallet>, show_creation_btn: bool,
cb: &dyn PlatformCallbacks) { wallets: &Vec<Wallet>,
let available_width = ui.available_width(); cb: &dyn PlatformCallbacks) -> bool {
// Calculate list width. let mut scroller_showing = false;
let width = if dual_panel { ui.scope(|ui| {
available_width // Setup scroll bar color.
} else { ui.style_mut().visuals.widgets.inactive.bg_fill = Colors::ITEM_HOVER;
min(available_width as i64, (Root::SIDE_PANEL_MIN_WIDTH * 1.3) as i64) as f32 ui.style_mut().visuals.widgets.hovered.bg_fill = Colors::STROKE;
};
// Draw list of wallets. // Draw list of wallets.
ui.vertical_centered(|ui| { let scroll = ScrollArea::vertical()
let mut rect = ui.available_rect_before_wrap(); .id_source("wallet_list")
rect.set_width(width); .auto_shrink([false; 2])
ui.allocate_ui(rect.size(), |ui| { .show(ui, |ui| {
for (index, w) in wallets.iter().enumerate() { ui.vertical_centered(|ui| {
// Draw wallet list item. // Calculate wallet list width.
self.wallet_item_ui(ui, w, cb); let available_width = ui.available_width();
// Add space after last item. let width = if dual_panel {
if index == wallets.len() - 1 { available_width
ui.add_space(36.0); } else {
} min(available_width as i64, (Root::SIDE_PANEL_MIN_WIDTH * 1.3) as i64) as f32
} };
}); let mut rect = ui.available_rect_before_wrap();
rect.set_width(width);
ui.allocate_ui(rect.size(), |ui| {
for (index, w) in wallets.iter().enumerate() {
// Draw wallet list item.
self.wallet_item_ui(ui, w, cb);
// Add space after last item.
let last_item = index == wallets.len() - 1;
if !last_item {
ui.add_space(5.0);
}
// Add space for wallet creation button.
if show_creation_btn && last_item {
ui.add_space(57.0);
}
}
});
});
});
// Scroller is showing if content size is larger than content on the screen.
scroller_showing = scroll.content_size.y > scroll.inner_rect.size().y;
}); });
scroller_showing
} }
/// Draw wallet list item. /// Draw wallet list item.
@ -248,7 +274,7 @@ impl WalletsContent {
// Draw round background. // Draw round background.
let mut rect = ui.available_rect_before_wrap(); let mut rect = ui.available_rect_before_wrap();
rect.set_height(76.0); rect.set_height(77.0);
let rounding = View::item_rounding(0, 1); let rounding = View::item_rounding(0, 1);
let bg_color = if is_current { Colors::ITEM_CURRENT } else { Colors::FILL }; let bg_color = if is_current { Colors::ITEM_CURRENT } else { Colors::FILL };
let stroke = if is_current { View::ITEM_HOVER_STROKE } else { View::ITEM_HOVER_STROKE }; let stroke = if is_current { View::ITEM_HOVER_STROKE } else { View::ITEM_HOVER_STROKE };
@ -286,8 +312,8 @@ impl WalletsContent {
ui.vertical(|ui| { ui.vertical(|ui| {
// Setup wallet name text. // Setup wallet name text.
let name_text = format!("{} {}", FOLDER, wallet.config.name); let name_text = format!("{} {}", FOLDER, wallet.config.name);
let name_color = if is_selected { Colors::DARK_TEXT } else { Colors::TITLE }; let name_color = if is_selected { Colors::BLACK } else { Colors::TITLE };
ui.add_space(3.0); ui.add_space(4.0);
View::ellipsize_text(ui, name_text, 18.0, name_color); View::ellipsize_text(ui, name_text, 18.0, name_color);
ui.add_space(-1.0); ui.add_space(-1.0);
@ -299,7 +325,6 @@ impl WalletsContent {
format!("{} {}", COMPUTER_TOWER, t!("network.node")) format!("{} {}", COMPUTER_TOWER, t!("network.node"))
}; };
View::ellipsize_text(ui, conn_text, 15.0, Colors::TEXT); View::ellipsize_text(ui, conn_text, 15.0, Colors::TEXT);
ui.add_space(1.0);
// Setup wallet status text. // Setup wallet status text.
let status_text = if Wallets::is_open(id) { let status_text = if Wallets::is_open(id) {
@ -308,11 +333,10 @@ impl WalletsContent {
format!("{} {}", FOLDER_LOCK, t!("wallets.locked")) format!("{} {}", FOLDER_LOCK, t!("wallets.locked"))
}; };
ui.label(RichText::new(status_text).size(15.0).color(Colors::GRAY)); ui.label(RichText::new(status_text).size(15.0).color(Colors::GRAY));
ui.add_space(3.0); ui.add_space(4.0);
}) })
}); });
}); });
ui.add_space(6.0);
} }
/// Draw floating button to show wallet creation [`Modal`]. /// Draw floating button to show wallet creation [`Modal`].