ui: title panel dual content mode, title for wallet tabs

This commit is contained in:
ardocrat 2023-08-12 23:41:34 +03:00
parent 7e9f020e51
commit 81382ba841
5 changed files with 108 additions and 45 deletions

View file

@ -21,7 +21,7 @@ use crate::gui::icons::{CARDHOLDER, DATABASE, DOTS_THREE_OUTLINE_VERTICAL, FACTO
use crate::gui::platform::PlatformCallbacks;
use crate::gui::views::{ConnectionsContent, NetworkMetrics, NetworkMining, NetworkNode, NetworkSettings, Root, TitlePanel, View};
use crate::gui::views::network::types::{NetworkTab, NetworkTabType};
use crate::gui::views::types::TitleType;
use crate::gui::views::types::{TitleContentType, TitleType};
use crate::node::Node;
use crate::wallet::ExternalConnection;
@ -197,13 +197,13 @@ impl NetworkContent {
let subtitle_text = Node::get_sync_status_text();
let not_syncing = Node::not_syncing();
let title_content = if !show_connections {
TitleType::WithSubTitle(title_text, subtitle_text, !not_syncing)
TitleContentType::WithSubTitle(title_text, subtitle_text, !not_syncing)
} else {
TitleType::Single(t!("network.connections").to_uppercase(), false)
TitleContentType::Title(t!("network.connections").to_uppercase())
};
// Draw title panel.
TitlePanel::ui(title_content, |ui, _| {
TitlePanel::ui(TitleType::Single(title_content), |ui, _| {
if !show_connections {
View::title_button(ui, DOTS_THREE_OUTLINE_VERTICAL, || {
AppConfig::toggle_show_connections_network_panel();

View file

@ -14,10 +14,10 @@
use egui::{Color32, Id, lerp, Rgba};
use egui::style::Margin;
use egui_extras::{Size, StripBuilder};
use egui_extras::{Size, Strip, StripBuilder};
use crate::gui::Colors;
use crate::gui::views::types::TitleType;
use crate::gui::views::types::{TitleContentType, TitleType};
use crate::gui::views::{Root, View};
/// Title panel with left/right action buttons and text in the middle.
@ -32,10 +32,27 @@ impl TitlePanel {
mut right_content: impl FnMut(&mut egui::Ui, &mut eframe::Frame),
ui: &mut egui::Ui,
frame: &mut eframe::Frame) {
// Setup identifier and alignment.
let (id, align_left) = match &title {
TitleType::Single(text, align_left) => (Id::from(text.clone()), *align_left),
TitleType::WithSubTitle(text, _, _) => (Id::from(text.clone()), false)
// Setup identifier and title type.
let (id, dual_title) = match &title {
TitleType::Single(content) => {
let text = match content {
TitleContentType::Title(text) => text,
TitleContentType::WithSubTitle(text, _, _) => text
};
(Id::from(text.clone()), false)
},
TitleType::Dual(first, second) => {
let first_text = match first {
TitleContentType::Title(text) => text,
TitleContentType::WithSubTitle(text, _, _) => text
};
let second_text = match first {
TitleContentType::Title(text) => text,
TitleContentType::WithSubTitle(text, _, _) => text
};
let id = Id::from(format!("{}_{}", first_text, second_text));
(id, true)
},
};
// Draw title panel.
egui::TopBottomPanel::top(id)
@ -49,12 +66,17 @@ impl TitlePanel {
.show_inside(ui, |ui| {
StripBuilder::new(ui)
.size(Size::exact(Self::DEFAULT_HEIGHT))
.size(if align_left {
.size(if dual_title {
Size::exact(Root::SIDE_PANEL_WIDTH - 2.0 * Self::DEFAULT_HEIGHT)
} else {
Size::remainder()
})
.size(if align_left {
.size(if dual_title {
Size::exact(Self::DEFAULT_HEIGHT * 2.0)
} else {
Size::exact(0.0)
})
.size(if dual_title {
Size::remainder()
} else {
Size::exact(0.0)
@ -67,22 +89,19 @@ impl TitlePanel {
(left_content)(ui, frame);
});
});
// Draw title text content.
match title {
TitleType::Single(text, _) => {
strip.cell(|ui| {
ui.add_space(2.0);
ui.centered_and_justified(|ui| {
View::ellipsize_text(ui, text, 19.0, Colors::TITLE);
});
});
TitleType::Single(content) => {
Self::title_text_content(&mut strip, content);
strip.empty();
strip.empty();
}
TitleType::WithSubTitle(text, subtitle_text, animate_sub) => {
strip.strip(|builder| {
Self::with_sub_title(builder, text, subtitle_text, animate_sub);
});
TitleType::Dual(first, second) => {
Self::title_text_content(&mut strip, first);
strip.empty();
Self::title_text_content(&mut strip, second);
}
}
strip.empty();
strip.cell(|ui| {
// Draw right panel action content.
ui.centered_and_justified(|ui| {
@ -93,6 +112,25 @@ impl TitlePanel {
});
}
/// Setup title text content.
fn title_text_content(strip: &mut Strip, content: TitleContentType) {
match content {
TitleContentType::Title(text) => {
strip.cell(|ui| {
ui.add_space(2.0);
ui.centered_and_justified(|ui| {
View::ellipsize_text(ui, text, 19.0, Colors::TITLE);
});
});
}
TitleContentType::WithSubTitle(text, subtitle, animate) => {
strip.strip(|builder| {
Self::with_sub_title(builder, text, subtitle, animate);
});
}
}
}
/// Calculate inner margin based on display insets (cutouts).
fn inner_margin(ui: &mut egui::Ui, frame: &mut eframe::Frame) -> Margin {
Margin {

View file

@ -15,11 +15,19 @@
use crate::gui::platform::PlatformCallbacks;
use crate::gui::views::Modal;
/// Title content type, can be single title or with animated subtitle.
/// Title type, can be single or dual title in the row.
pub enum TitleType {
/// Single text with possibility to align text at left side for default panel size width.
Single(String, bool),
/// With animated subtitle text.
/// Single title content.
Single(TitleContentType),
/// Dual title content, will align first content for default panel size width.
Dual(TitleContentType, TitleContentType),
}
/// Title content type, can be single title or with animated subtitle.
pub enum TitleContentType {
/// Single text.
Title(String),
/// With optionally animated subtitle text.
WithSubTitle(String, String, bool)
}

View file

@ -21,8 +21,9 @@ use crate::gui::Colors;
use crate::gui::icons::{ARROW_LEFT, CARET_RIGHT, COMPUTER_TOWER, EYE, EYE_SLASH, FOLDER_LOCK, FOLDER_OPEN, GEAR, GLOBE, GLOBE_SIMPLE, LOCK_KEY, PLUS, SIDEBAR_SIMPLE, SPINNER, SUITCASE, WARNING_CIRCLE};
use crate::gui::platform::PlatformCallbacks;
use crate::gui::views::{Modal, Root, TitlePanel, View};
use crate::gui::views::types::{ModalContainer, ModalPosition, TitleType};
use crate::gui::views::types::{ModalContainer, ModalPosition, TitleContentType, TitleType};
use crate::gui::views::wallets::creation::WalletCreation;
use crate::gui::views::wallets::types::WalletTabType;
use crate::gui::views::wallets::WalletContent;
use crate::wallet::{ConnectionsConfig, ExternalConnection, Wallet, WalletList};
@ -231,19 +232,35 @@ impl WalletsContent {
let show_list = self.show_wallets_at_dual_panel;
// Setup title.
let title_text = if create_wallet {
t!("wallets.add")
} else {
t!("wallets.title")
};
let title_content = if self.wallets.is_selected_open() && (!dual_panel
|| (dual_panel && !show_list)) {
let title_text = t!("wallets.wallet").to_uppercase();
let subtitle_text = self.wallets.selected_name();
TitleType::WithSubTitle(title_text, subtitle_text, false)
let title_text = self.wallet_content.current_tab.get_type().name().to_uppercase();
if self.wallet_content.current_tab.get_type() == WalletTabType::Settings {
TitleType::Single(TitleContentType::Title(title_text))
} else {
let subtitle_text = self.wallets.selected_name();
TitleType::Single(TitleContentType::WithSubTitle(title_text, subtitle_text, false))
}
} else {
let left_title_align = !create_wallet && show_wallet && dual_panel;
TitleType::Single(title_text.to_uppercase(), left_title_align)
let title_text = if create_wallet {
t!("wallets.add")
} else {
t!("wallets.title")
}.to_uppercase();
let dual_title = !create_wallet && show_wallet && dual_panel;
if dual_title {
let wallet_tab_type = self.wallet_content.current_tab.get_type();
let wallet_tab_name = wallet_tab_type.name().to_uppercase();
let title_content = if wallet_tab_type == WalletTabType::Settings {
TitleContentType::Title(wallet_tab_name)
} else {
let subtitle_text = self.wallets.selected_name();
TitleContentType::WithSubTitle(wallet_tab_name, subtitle_text, false)
};
TitleType::Dual(TitleContentType::Title(title_text), title_content)
} else {
TitleType::Single(TitleContentType::Title(title_text))
}
};
// Draw title panel.

View file

@ -35,13 +35,13 @@ pub enum WalletTabType {
}
impl WalletTabType {
/// Identifier representing wallet tab type.
pub fn id(&self) -> String {
/// Name of wallet tab to show at ui.
pub fn name(&self) -> String {
match *self {
WalletTabType::Info => "info".to_owned(),
WalletTabType::Receive => "receive".to_owned(),
WalletTabType::Send => "send".to_owned(),
WalletTabType::Settings => "settings".to_owned()
WalletTabType::Info => t!("wallets.wallet"),
WalletTabType::Receive => t!("wallets.receive"),
WalletTabType::Send => t!("wallets.send"),
WalletTabType::Settings => t!("wallets.settings")
}
}
}