// Copyright 2023 The Grim Developers
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
use egui::{Button, PointerState, Response, RichText, Sense, Spinner, Widget};
use egui::epaint::{Color32, FontId, RectShape, Rounding, Stroke};
use egui::epaint::text::TextWrapping;
use egui::text::{LayoutJob, TextFormat};
use crate::gui::{Colors, Navigator};
use crate::gui::icons::{CHECK_SQUARE, SQUARE};
pub struct View;
impl View {
/// Default stroke around views.
pub const DEFAULT_STROKE: Stroke = Stroke { width: 1.0, color: Colors::STROKE };
/// Default width of side panel at application UI.
pub const SIDE_PANEL_MIN_WIDTH: i64 = 400;
/// Check if ui can show side panel and screen at same time.
pub fn is_dual_panel_mode(frame: &mut eframe::Frame) -> bool {
let w = frame.info().window_info.size.x;
let h = frame.info().window_info.size.y;
// Screen is wide if width is greater than height or just 20% smaller.
let is_wide_screen = w > h || w + (w * 0.2) >= h;
// Dual panel mode is available when window is wide and its width is at least 2 times
// greater than minimal width of the side panel.
is_wide_screen && w >= Self::SIDE_PANEL_MIN_WIDTH as f32 * 2.0
}
/// Show and cut long text with ﹍ character.
pub fn ellipsize_text(ui: &mut egui::Ui, text: String, size: f32, color: Color32) {
let mut job = LayoutJob::single_section(text, TextFormat {
font_id: FontId::proportional(size), color, ..Default::default()
});
job.wrap = TextWrapping {
max_rows: 1,
break_anywhere: false,
overflow_character: Option::from('﹍'),
..Default::default()
};
ui.label(job);
}
/// Draw horizontally centered sub-title with space below.
pub fn sub_title(ui: &mut egui::Ui, text: String) {
ui.vertical_centered_justified(|ui| {
ui.label(RichText::new(text.to_uppercase()).size(16.0).color(Colors::TEXT));
});
ui.add_space(4.0);
}
/// Temporary click optimization for touch screens, return `true` if it was clicked.
fn touched(ui: &mut egui::Ui, resp: Response) -> bool {
let drag_resp = resp.interact(Sense::click_and_drag());
// Clear pointer event if dragging is out of button area
if drag_resp.dragged() && !ui.rect_contains_pointer(drag_resp.rect) {
ui.input_mut().pointer = PointerState::default();
}
if drag_resp.drag_released() || drag_resp.clicked() {
return true
}
false
}
/// Title button with transparent background fill color, contains only icon.
pub fn title_button(ui: &mut egui::Ui, icon: &str, action: impl FnOnce()) {
ui.scope(|ui| {
// Disable stroke around title buttons on hover
ui.style_mut().visuals.widgets.active.bg_stroke = Stroke::NONE;
let wt = RichText::new(icon.to_string()).size(24.0).color(Colors::TITLE);
let br = Button::new(wt)
.fill(Colors::TRANSPARENT)
.ui(ui);
if Self::touched(ui, br) {
(action)();
}
});
}
/// Tab button with white background fill color, contains only icon.
pub fn tab_button(ui: &mut egui::Ui, icon: &str, active: bool, action: impl FnOnce()) {
let text_color = match active {
true => { Colors::TITLE }
false => { Colors::TEXT }
};
let stroke = match active {
true => { Stroke::NONE }
false => { Self::DEFAULT_STROKE }
};
let color = match active {
true => { Colors::FILL }
false => { Colors::WHITE }
};
let br = Button::new(RichText::new(icon.to_string()).size(24.0).color(text_color))
.stroke(stroke)
.fill(color)
.ui(ui);
if Self::touched(ui, br) {
(action)();
}
}
/// Draw [`Button`] with specified background fill color.
pub fn button(ui: &mut egui::Ui, text: String, fill_color: Color32, action: impl FnOnce()) {
let br = Button::new(RichText::new(text.to_uppercase()).size(18.0).color(Colors::TEXT_BUTTON))
.stroke(Self::DEFAULT_STROKE)
.fill(fill_color)
.ui(ui);
if Self::touched(ui, br) {
(action)();
}
}
/// Draw rounded box with some value and label in the middle,
/// where is r = (top_left, top_right, bottom_left, bottom_right).
/// | VALUE |
/// | label |
pub fn rounded_box(ui: &mut egui::Ui, value: String, label: String, r: [bool; 4]) {
let rect = ui.available_rect_before_wrap();
// Create background shape.
let mut bg_shape = RectShape {
rect,
rounding: Rounding {
nw: if r[0] { 8.0 } else { 0.0 },
ne: if r[1] { 8.0 } else { 0.0 },
sw: if r[2] { 8.0 } else { 0.0 },
se: if r[3] { 8.0 } else { 0.0 },
},
fill: Colors::WHITE,
stroke: Stroke { width: 1.0, color: Colors::ITEM_STROKE },
};
let bg_idx = ui.painter().add(bg_shape);
// Draw box content.
let content_resp = ui.allocate_ui_at_rect(rect, |ui| {
ui.vertical_centered_justified(|ui| {
ui.add_space(2.0);
ui.scope(|ui| {
// Correct vertical spacing between items.
ui.style_mut().spacing.item_spacing.y = -3.0;
// Draw box value.
let mut job = LayoutJob::single_section(value, TextFormat {
font_id: FontId::proportional(18.0),
color: Colors::BLACK,
..Default::default()
});
job.wrap = TextWrapping {
max_rows: 1,
break_anywhere: false,
overflow_character: Option::from('﹍'),
..Default::default()
};
ui.label(job);
// Draw box label.
ui.label(RichText::new(label).color(Colors::GRAY).size(15.0));
});
ui.add_space(2.0);
});
}).response;
// Setup background shape to be painted behind box content.
bg_shape.rect = content_resp.rect;
ui.painter().set(bg_idx, bg_shape);
}
/// Draw content in the center of current layout with specified width and height.
pub fn center_content(ui: &mut egui::Ui, height: f32, content: impl FnOnce(&mut egui::Ui)) {
ui.vertical_centered(|ui| {
let mut rect = ui.available_rect_before_wrap();
let side_margin = 24.0;
rect.min += egui::emath::vec2(side_margin, ui.available_height() / 2.0 - height / 2.0);
rect.max -= egui::emath::vec2(side_margin, 0.0);
ui.allocate_ui_at_rect(rect, |ui| {
(content)(ui);
});
});
}
/// Draw big gold loading spinner.
pub fn big_loading_spinner(ui: &mut egui::Ui) {
Spinner::new().size(104.0).color(Colors::GOLD).ui(ui);
}
/// Draw small gold loading spinner.
pub fn small_loading_spinner(ui: &mut egui::Ui) {
Spinner::new().size(42.0).color(Colors::GOLD).ui(ui);
}
/// Draw the button that looks like checkbox with callback on check.
pub fn checkbox(ui: &mut egui::Ui, checked: bool, text: String, callback: impl FnOnce()) {
let (text_value, color) = match checked {
true => { (format!("{} {}", CHECK_SQUARE, text), Colors::TEXT_BUTTON) }
false => { (format!("{} {}", SQUARE, text), Colors::TEXT) }
};
let br = Button::new(RichText::new(text_value).size(18.0).color(color))
.frame(false)
.stroke(Stroke::NONE)
.fill(Colors::TRANSPARENT)
.ui(ui);
if Self::touched(ui, br) {
(callback)();
}
}
/// Show a [`RadioButton`]. It is selected if `*current_value == selected_value`.
/// If clicked, `selected_value` is assigned to `*current_value`.
pub fn radio_value<T: PartialEq>(ui: &mut egui::Ui, current: &mut T, value: T, text: String) {
let mut response = ui.radio(*current == value, text);
if Self::touched(ui, response.clone()) && *current != value {
*current = value;
response.mark_changed();
}
}
/// Draw horizontal line
pub fn horizontal_line(ui: &mut egui::Ui, color: Color32) {
let line_size = egui::Vec2::new(ui.available_width(), 1.0);
let (line_rect, _) = ui.allocate_exact_size(line_size, Sense::hover());
let painter = ui.painter();
painter.hline(line_rect.x_range(),
painter.round_to_pixel(line_rect.center().y),
Stroke { width: 1.0, color });
}
}