ui: update egui, optimize title panel

This commit is contained in:
ardocrat
2024-07-07 19:21:57 +03:00
parent eaf462a1b2
commit 891ab0a9c4
5 changed files with 134 additions and 137 deletions
+2 -2
View File
@@ -13,7 +13,7 @@
// limitations under the License.
use std::time::Duration;
use egui::{Margin, RichText, ScrollArea};
use egui::{Id, Margin, RichText, ScrollArea};
use egui::scroll_area::ScrollBarVisibility;
use crate::AppConfig;
@@ -201,7 +201,7 @@ impl NetworkContent {
};
// Draw title panel.
TitlePanel::ui(TitleType::Single(title_content), |ui| {
TitlePanel::new(Id::from("network_title_panel")).ui(TitleType::Single(title_content), |ui| {
if !show_connections {
View::title_button_big(ui, DOTS_THREE_OUTLINE_VERTICAL, |_| {
AppConfig::toggle_show_connections_network_panel();
+74 -101
View File
@@ -12,44 +12,36 @@
// See the License for the specific language governing permissions and
// limitations under the License.
use egui::{Margin, Id};
use egui_extras::{Size, Strip, StripBuilder};
use egui::{Margin, Id, Layout, Align};
use crate::gui::Colors;
use crate::gui::views::{Content, View};
use crate::gui::views::types::{TitleContentType, TitleType};
/// Title panel with left/right action buttons and text in the middle.
pub struct TitlePanel;
pub struct TitlePanel {
/// Widget identifier.
id: Id
}
impl TitlePanel {
/// Default [`TitlePanel`] content height.
pub const DEFAULT_HEIGHT: f32 = 54.0;
pub fn ui(title: TitleType,
/// Create new title panel with provided identifier.
pub fn new(id: Id) -> Self {
Self {
id,
}
}
pub fn ui(&self,
title: TitleType,
mut left_content: impl FnMut(&mut egui::Ui),
mut right_content: impl FnMut(&mut egui::Ui),
ui: &mut egui::Ui) {
// 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, _) => {
let first_text = match first {
TitleContentType::Title(text) => text,
TitleContentType::WithSubTitle(text, _, _) => text
};
let id = Id::from(first_text.to_owned()).with("_dual");
(id, true)
},
};
// Draw title panel.
egui::TopBottomPanel::top(id)
egui::TopBottomPanel::top(self.id)
.resizable(false)
.exact_height(Self::DEFAULT_HEIGHT + View::get_top_inset())
.frame(egui::Frame {
@@ -63,90 +55,71 @@ impl TitlePanel {
..Default::default()
})
.show_inside(ui, |ui| {
StripBuilder::new(ui)
.size(Size::exact(Self::DEFAULT_HEIGHT))
.size(if dual_title {
Size::exact(Content::SIDE_PANEL_WIDTH - 2.0 * Self::DEFAULT_HEIGHT)
} else {
Size::remainder()
})
.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)
})
.size(Size::exact(Self::DEFAULT_HEIGHT))
.horizontal(|mut strip| {
strip.cell(|ui| {
// Draw left panel action content.
ui.centered_and_justified(|ui| {
(left_content)(ui);
});
});
// Draw title text content.
match title {
TitleType::Single(content) => {
Self::title_text_content(&mut strip, content);
strip.empty();
strip.empty();
}
TitleType::Dual(first, second) => {
Self::title_text_content(&mut strip, first);
strip.empty();
Self::title_text_content(&mut strip, second);
}
}
strip.cell(|ui| {
// Draw right panel action content.
ui.centered_and_justified(|ui| {
(right_content)(ui);
});
let rect = ui.available_rect_before_wrap();
ui.allocate_ui_with_layout(rect.size(), Layout::right_to_left(Align::Max), |ui| {
ui.horizontal_centered(|ui| {
(right_content)(ui);
});
ui.with_layout(Layout::left_to_right(Align::Min), |ui| {
ui.horizontal_centered(|ui| {
(left_content)(ui);
});
});
match title {
TitleType::Single(content) => {
let content_rect = {
let mut r = rect;
r.min.x += Self::DEFAULT_HEIGHT;
r.max.x -= Self::DEFAULT_HEIGHT;
r
};
ui.allocate_ui_at_rect(content_rect, |ui| {
Self::title_text_content(ui, content);
});
}
TitleType::Dual(first, second) => {
let first_rect = {
let mut r = rect;
r.max.x = r.min.x + Content::SIDE_PANEL_WIDTH - Self::DEFAULT_HEIGHT;
r.min.x += Self::DEFAULT_HEIGHT;
r
};
// Draw first title content.
ui.allocate_ui_at_rect(first_rect, |ui| {
Self::title_text_content(ui, first);
});
let second_rect = {
let mut r = rect;
r.min.x = first_rect.max.x + 2.0 * Self::DEFAULT_HEIGHT;
r.max.x -= Self::DEFAULT_HEIGHT;
r
};
// Draw second title content.
ui.allocate_ui_at_rect(second_rect, |ui| {
Self::title_text_content(ui, second);
});
}
}
});
});
}
/// 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(true));
});
});
fn title_text_content(ui: &mut egui::Ui, content: TitleContentType) {
ui.vertical_centered(|ui| {
match content {
TitleContentType::Title(text) => {
ui.add_space(13.0);
View::ellipsize_text(ui, text, 19.0, Colors::title(true));
}
TitleContentType::WithSubTitle(text, subtitle, animate) => {
ui.add_space(3.0);
View::ellipsize_text(ui, text, 18.0, Colors::title(true));
ui.add_space(-1.0);
View::animate_text(ui, subtitle, 15.0, Colors::text(true), animate)
}
}
TitleContentType::WithSubTitle(text, subtitle, animate) => {
strip.strip(|builder| {
Self::with_sub_title(builder, text, subtitle, animate);
});
}
}
}
/// Draw content for [`TitleType::WithSubTitle`] type.
fn with_sub_title(builder: StripBuilder, title: String, subtitle: String, animate_sub: bool) {
builder
.size(Size::remainder())
.size(Size::exact(30.0))
.vertical(|mut strip| {
strip.cell(|ui| {
ui.add_space(4.0);
ui.centered_and_justified(|ui| {
View::ellipsize_text(ui, title, 18.0, Colors::title(true));
});
});
strip.cell(|ui| {
ui.centered_and_justified(|ui| {
View::animate_text(ui, subtitle, 15.0, Colors::text(true), animate_sub);
});
});
});
});
}
}
+1 -1
View File
@@ -275,7 +275,7 @@ impl WalletsContent {
};
// Draw title panel.
TitlePanel::ui(title_content, |ui| {
TitlePanel::new(Id::new("wallets_title_panel")).ui(title_content, |ui| {
if show_wallet && !dual_panel {
View::title_button_big(ui, ARROW_LEFT, |_| {
self.wallets.select(None);