gui: new font, navigation bar, theme
This commit is contained in:
parent
c572c3926e
commit
8ef5128ee8
10 changed files with 151 additions and 120 deletions
|
@ -1,5 +1,6 @@
|
|||
package mw.gri.android;
|
||||
|
||||
import android.content.Intent;
|
||||
import android.os.Bundle;
|
||||
import android.system.ErrnoException;
|
||||
import android.system.Os;
|
||||
|
|
|
@ -1,5 +1,7 @@
|
|||
<resources xmlns:tools="http://schemas.android.com/tools">
|
||||
<style name="Theme.Main" parent="Theme.AppCompat.NoActionBar">
|
||||
<style name="Theme.Main" parent="Theme.AppCompat.Light.NoActionBar">
|
||||
<item name="android:statusBarColor">@color/yellow</item>
|
||||
<item name="android:windowLightStatusBar">true</item>
|
||||
<item name="android:windowLayoutInDisplayCutoutMode" tools:targetApi="o_mr1">shortEdges</item>
|
||||
</style>
|
||||
</resources>
|
BIN
fonts/noto_light.ttf
Normal file
BIN
fonts/noto_light.ttf
Normal file
Binary file not shown.
BIN
fonts/roboto.ttf
BIN
fonts/roboto.ttf
Binary file not shown.
157
src/gui/app.rs
157
src/gui/app.rs
|
@ -15,13 +15,16 @@
|
|||
use std::any::Any;
|
||||
use std::collections::BTreeSet;
|
||||
use eframe::emath::Align;
|
||||
use eframe::epaint::FontFamily;
|
||||
use eframe::Frame;
|
||||
use egui::{Color32, Context, Id, Layout, RichText, Sense, Separator, Stroke, Ui, Widget};
|
||||
use egui::{Color32, Context, Direction, Id, Layout, RichText, Rounding, Sense, Separator, Stroke, TextStyle, Ui, Widget};
|
||||
use egui::epaint::Shadow;
|
||||
use egui::panel::PanelState;
|
||||
use egui::style::Margin;
|
||||
use egui_extras::Size;
|
||||
use egui_extras::StripBuilder;
|
||||
use wgpu::Color;
|
||||
use crate::gui::PlatformCallbacks;
|
||||
use crate::gui::{COLOR_YELLOW, PlatformCallbacks, SYM_ADD, SYM_ARROW_BACK, SYM_ARROW_FORWARD, SYM_MENU};
|
||||
use crate::gui::screens::{Screen};
|
||||
|
||||
pub struct PlatformApp<Platform> {
|
||||
|
@ -78,61 +81,112 @@ impl Screens {
|
|||
}
|
||||
|
||||
fn menu_is_open(&mut self, frame: &mut Frame) -> bool {
|
||||
return self.menu_open || is_landscape(frame);
|
||||
return self.menu_open;
|
||||
}
|
||||
|
||||
pub fn ui(&mut self, ui: &mut Ui, frame: &mut Frame, cb: &dyn PlatformCallbacks) {
|
||||
let menu_open = self.menu_is_open(frame);
|
||||
|
||||
let bg_stroke_default = ui.style().visuals.widgets.noninteractive.bg_stroke;
|
||||
ui.style_mut().visuals.widgets.noninteractive.bg_stroke = Stroke::NONE;
|
||||
ui.style_mut().visuals.widgets.active.bg_stroke = Stroke::NONE;
|
||||
|
||||
egui::SidePanel::left("menu_panel")
|
||||
.resizable(false)
|
||||
.exact_width(if !is_landscape(frame) {
|
||||
frame.info().window_info.size.x - 58.0
|
||||
} else {
|
||||
frame.info().window_info.size.y - 58.0
|
||||
})
|
||||
.frame(egui::Frame {
|
||||
inner_margin: Margin::same(0.0),
|
||||
outer_margin: Margin::same(0.0),
|
||||
rounding: Default::default(),
|
||||
shadow: Shadow::NONE,
|
||||
fill: COLOR_YELLOW,
|
||||
stroke: Stroke::NONE,
|
||||
})
|
||||
.show_animated_inside(ui, menu_open, |ui| {
|
||||
//TODO: Menu content
|
||||
ui.vertical_centered(|ui| {
|
||||
ui.heading("💻 Backend");
|
||||
});
|
||||
|
||||
ui.separator();
|
||||
});
|
||||
|
||||
|
||||
egui::TopBottomPanel::top("title_panel")
|
||||
.resizable(false)
|
||||
// .default_height(120.0)
|
||||
.frame(egui::Frame {
|
||||
fill: COLOR_YELLOW,
|
||||
inner_margin: Margin::same(0.0),
|
||||
outer_margin: Margin::same(0.0),
|
||||
rounding: Default::default(),
|
||||
..Default::default()
|
||||
})
|
||||
.show_inside(ui, |ui| {
|
||||
ui.with_layout(Layout::right_to_left(Align::Min), |ui| {
|
||||
StripBuilder::new(ui)
|
||||
.size(Size::exact(58.0))
|
||||
.vertical(|mut strip| {
|
||||
strip.strip(|builder| {
|
||||
builder
|
||||
.size(Size::exact(58.0))
|
||||
.size(Size::remainder())
|
||||
.size(Size::exact(58.0))
|
||||
.horizontal(|mut strip| {
|
||||
strip.cell(|ui| {
|
||||
ui.centered_and_justified(|ui| {
|
||||
let b = egui::widgets::Button::new(
|
||||
RichText::new(" + ").size(38.0)
|
||||
RichText::new(if !menu_open || is_landscape(frame) {
|
||||
SYM_MENU
|
||||
} else {
|
||||
SYM_ARROW_FORWARD
|
||||
}).size(24.0)
|
||||
).fill(Color32::TRANSPARENT)
|
||||
.ui(ui)
|
||||
.interact(Sense::click_and_drag());
|
||||
if b.drag_released() || b.clicked() {
|
||||
self.menu_open = !menu_open
|
||||
};
|
||||
});
|
||||
});
|
||||
if !menu_open || is_landscape(frame) {
|
||||
strip.strip(|builder| {
|
||||
builder
|
||||
.size(Size::remainder())
|
||||
.vertical(|mut strip| {
|
||||
strip.cell(|ui| {
|
||||
ui.centered_and_justified(|ui| {
|
||||
ui.label(RichText::new(self.current_screen_title()
|
||||
.to_uppercase())
|
||||
.size(20.0)
|
||||
.color(Color32::BLACK)
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
strip.cell(|ui| {
|
||||
ui.centered_and_justified(|ui| {
|
||||
let b = egui::widgets::Button::new(
|
||||
RichText::new(SYM_ADD).size(24.0)
|
||||
).fill(Color32::TRANSPARENT).ui(ui).interact(Sense::click_and_drag());
|
||||
if b.drag_released() || b.clicked() {
|
||||
//TODO: Add wallet
|
||||
//self.menu_open = !menu_open
|
||||
};
|
||||
});
|
||||
ui.with_layout(Layout::top_down(Align::Center), |ui| {
|
||||
ui.heading(self.current_screen_title())
|
||||
});
|
||||
ui.with_layout(Layout::left_to_right(Align::Min), |ui| {
|
||||
let b = egui::widgets::Button::new(
|
||||
RichText::new(" = ").size(38.0)
|
||||
).fill(Color32::TRANSPARENT).ui(ui).interact(Sense::click_and_drag());
|
||||
if b.drag_released() || b.clicked() {
|
||||
self.menu_open = !menu_open
|
||||
};
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
egui::CentralPanel::default().frame(egui::containers::Frame{
|
||||
outer_margin: Margin {
|
||||
left: 0.0,
|
||||
right: 0.0,
|
||||
// top: 120.0,
|
||||
top: 0.0,
|
||||
bottom: 0.0,
|
||||
},
|
||||
inner_margin: Margin::same(3.0),
|
||||
fill: ui.ctx().style().visuals.panel_fill,
|
||||
..Default::default()
|
||||
})
|
||||
.show_inside(ui, |ui| {
|
||||
self.show_screens(ui, frame, cb);
|
||||
});
|
||||
// ui.style_mut().visuals.widgets.noninteractive.bg_stroke = bg_stroke_default;
|
||||
|
||||
ui.style_mut().visuals.widgets.noninteractive.bg_stroke = Stroke::NONE;
|
||||
|
||||
// egui::SidePanel::right("screens_content")
|
||||
// .resizable(false)
|
||||
|
@ -149,23 +203,34 @@ impl Screens {
|
|||
// self.show_screens(ui, frame, cb);
|
||||
// });
|
||||
|
||||
egui::SidePanel::left("menu_panel")
|
||||
.resizable(false)
|
||||
.frame(egui::Frame {
|
||||
inner_margin: Margin::same(0.0),
|
||||
outer_margin: Margin::same(0.0),
|
||||
rounding: Default::default(),
|
||||
shadow: Shadow::NONE,
|
||||
fill: Color32::YELLOW,
|
||||
stroke: Stroke::NONE,
|
||||
})
|
||||
.show_animated_inside(ui, menu_open, |ui| {
|
||||
//TODO: Menu content
|
||||
ui.vertical_centered(|ui| {
|
||||
ui.heading("💻 Backend");
|
||||
});
|
||||
|
||||
ui.separator();
|
||||
egui::CentralPanel::default().frame(egui::containers::Frame {
|
||||
outer_margin: Margin {
|
||||
left: 0.0,
|
||||
right: 0.0,
|
||||
// top: 120.0,
|
||||
top: 0.0,
|
||||
bottom: 0.0,
|
||||
},
|
||||
rounding: if menu_open {
|
||||
Rounding {
|
||||
nw: 5.0,
|
||||
ne: 0.0,
|
||||
sw: 0.0,
|
||||
se: 0.0,
|
||||
}
|
||||
} else {
|
||||
Rounding::none()
|
||||
},
|
||||
inner_margin: Margin::same(3.0),
|
||||
fill: ui.ctx().style().visuals.panel_fill,
|
||||
stroke: bg_stroke_default,
|
||||
..Default::default()
|
||||
})
|
||||
.show_inside(ui, |ui| {
|
||||
if !menu_open || is_landscape(frame) {
|
||||
self.show_screens(ui, frame, cb);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
@ -18,7 +18,18 @@ pub use app::is_landscape;
|
|||
|
||||
pub mod platform;
|
||||
pub mod screens;
|
||||
pub mod views;
|
||||
pub mod nav;
|
||||
|
||||
pub const COLOR_YELLOW: egui::Color32 = egui::Color32::from_rgb(254, 241, 2);
|
||||
|
||||
pub const SYM_ARROW_BACK: &str = "⇦";
|
||||
pub const SYM_ARROW_FORWARD: &str = "⇨";
|
||||
pub const SYM_ADD: &str = "+";
|
||||
pub const SYM_MENU: &str = "∷";//≡
|
||||
|
||||
pub trait Ui {
|
||||
|
||||
}
|
||||
|
||||
pub trait PlatformCallbacks {
|
||||
fn show_keyboard(&mut self);
|
||||
|
|
|
@ -12,3 +12,6 @@
|
|||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
|
||||
struct Navigation {
|
||||
|
||||
}
|
|
@ -12,6 +12,7 @@
|
|||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
|
||||
use egui::FontFamily;
|
||||
use winit::platform::android::activity::AndroidApp;
|
||||
|
||||
use crate::gui::{PlatformApp, PlatformCallbacks};
|
||||
|
@ -71,33 +72,35 @@ impl PlatformApp<Android> {
|
|||
|
||||
let mut fonts = egui::FontDefinitions::default();
|
||||
fonts.font_data.insert(
|
||||
"roboto".to_owned(),
|
||||
"noto".to_owned(),
|
||||
egui::FontData::from_static(include_bytes!(
|
||||
"../../../../fonts/roboto.ttf"
|
||||
"../../../../fonts/noto_light.ttf"
|
||||
)).tweak(egui::FontTweak {
|
||||
scale: 1.0,
|
||||
y_offset_factor: -0.20,
|
||||
y_offset: 0.0
|
||||
}),
|
||||
);
|
||||
|
||||
fonts
|
||||
.families
|
||||
.entry(Proportional)
|
||||
.or_default()
|
||||
.insert(0, "roboto".to_owned());
|
||||
.insert(0, "noto".to_owned());
|
||||
|
||||
ctx.set_fonts(fonts);
|
||||
|
||||
use egui::FontId;
|
||||
use egui::TextStyle::*;
|
||||
|
||||
let mut style = (*ctx.style()).clone();
|
||||
|
||||
style.text_styles = [
|
||||
(Heading, FontId::new(24.0, Proportional)),
|
||||
(Body, FontId::new(18.0, Proportional)),
|
||||
(Monospace, FontId::new(18.0, Proportional)),
|
||||
(Button, FontId::new(18.0, Proportional)),
|
||||
(Heading, FontId::new(20.0, Proportional)),
|
||||
(Name("icon".into()), FontId::new(24.0, Proportional)),
|
||||
(Body, FontId::new(16.0, Proportional)),
|
||||
(Button, FontId::new(20.0, Proportional)),
|
||||
(Small, FontId::new(12.0, Proportional)),
|
||||
(Monospace, FontId::new(16.0, Proportional)),
|
||||
].into();
|
||||
|
||||
ctx.set_style(style);
|
||||
|
|
|
@ -1,22 +0,0 @@
|
|||
// 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 crate::gui::PlatformCallbacks;
|
||||
|
||||
mod navigation;
|
||||
mod menu;
|
||||
|
||||
pub trait View {
|
||||
fn ui(&mut self, ui: &mut egui::Ui, frame: &mut eframe::Frame, cb: &dyn PlatformCallbacks);
|
||||
}
|
|
@ -1,32 +0,0 @@
|
|||
// 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 eframe::Frame;
|
||||
use egui::Ui;
|
||||
use crate::gui::PlatformCallbacks;
|
||||
use crate::gui::views::View;
|
||||
|
||||
struct NavigationPanel {
|
||||
title: str
|
||||
}
|
||||
|
||||
impl View for NavigationPanel {
|
||||
fn ui(&mut self, ui: &mut Ui, frame: &mut Frame, cb: &dyn PlatformCallbacks) {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
impl NavigationPanel {
|
||||
|
||||
}
|
Loading…
Reference in a new issue