gui: new font, navigation bar, theme

This commit is contained in:
ardocrat 2023-04-21 23:59:59 +03:00
parent c572c3926e
commit 8ef5128ee8
10 changed files with 151 additions and 120 deletions

View file

@ -1,5 +1,6 @@
package mw.gri.android;
import android.content.Intent;
import android.os.Bundle;
import android.system.ErrnoException;
import android.system.Os;

View file

@ -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

Binary file not shown.

Binary file not shown.

View file

@ -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| {
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() {
//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
};
});
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(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
};
});
});
}
});
});
});
});
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);
}
});
}
}

View file

@ -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);

View file

@ -12,3 +12,6 @@
// See the License for the specific language governing permissions and
// limitations under the License.
struct Navigation {
}

View file

@ -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)),
(Small, FontId::new(12.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);

View file

@ -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);
}

View file

@ -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 {
}