Move AppBar to a separate module

ui/src/widgets/app.rs

@@ -36,22 +36,11 @@ impl Widget for Model {
  // TODO: Check `dark` flag in app
  v_application.push("theme--light");
 
- let mut app_bar_style = String::new();
- app_bar_style.push_str("margin-top: 0px;");
- app_bar_style.push_str("transform: translateY(0px);");
- app_bar_style.push_str("left: 256px;");
- app_bar_style.push_str("right: 0px;");
-
  html! {
  <div class=v_application>
  <div class="v-application--wrap">
  <widgets::NavigationDrawer: navigation_drawer=self.app.navigation_drawer.clone() />
- <div class="v-app-bar v-app-bar--fixed v-toolbar" style=app_bar_style>
- <div class="v-toolbar__content">
- <div class="v-app-bar__nav-icon" />
- <div class="v-toolbar__title">{ &self.app.app_bar.title.caption }</div>
- </div>
- </div>
+ <widgets::AppBar: app_bar=self.app.app_bar.clone() />
  <div class="v-content">
  <widgets::Container: container=self.app.content.clone() />
  </div>

ui/src/widgets/app_bar.rs

@@ -0,0 +1,57 @@
+use crate::widgets::{self, Reqs, View, Widget, WidgetModel};
+use yew::{html, Properties};
+
+pub type AppBarWidget = WidgetModel<Model>;
+
+pub struct Model {
+ app_bar: protocol::Bar,
+}
+
+#[derive(Properties, PartialEq, Clone)]
+pub struct Props {
+ #[props(required)]
+ pub app_bar: protocol::Bar,
+}
+
+impl Widget for Model {
+ type Message = ();
+ type Properties = Props;
+
+ fn produce(props: &Self::Properties) -> Self {
+ Self {
+ app_bar: props.app_bar.clone(),
+ }
+ }
+
+ fn recompose(&mut self, props: &Self::Properties) -> Reqs {
+ self.app_bar = props.app_bar.to_owned();
+ None
+ }
+
+ fn main_view(&self) -> View<Self> {
+ let mut v_app_bar = vec!["v-app-bar"];
+ v_app_bar.push("v-app-bar--fixed");
+ v_app_bar.push("v-sheet");
+ v_app_bar.push("v-sheet--tile");
+ // TODO: Changeable
+ v_app_bar.push("theme--dark");
+ v_app_bar.push("v-toolbar");
+ // TODO: Changeable
+ v_app_bar.push("indigo");
+
+ let mut app_bar_style = String::new();
+ app_bar_style.push_str("margin-top: 0px;");
+ app_bar_style.push_str("transform: translateY(0px);");
+ app_bar_style.push_str("left: 256px;");
+ app_bar_style.push_str("right: 0px;");
+
+ html! {
+ <div class=v_app_bar style=app_bar_style>
+ <div class="v-toolbar__content" style="height: 64px;">
+ <div class="v-app-bar__nav-icon" />
+ <div class="v-toolbar__title">{ &self.app_bar.title.caption }</div>
+ </div>
+ </div>
+ }
+ }
+}

ui/src/widgets/list.rs

@@ -56,7 +56,9 @@ impl Model {
  { widgets::Icon::new(item.action.clone()).render() }
  </div>
  <div class="v-list-item__content">
- { &item.content.caption }
+ <div class="v-list-item__title">
+ { &item.content.caption }
+ </div>
  </div>
  </div>
  }

ui/src/widgets/mod.rs

@@ -35,6 +35,9 @@ pub use welcome::WelcomeWidget as Welcome;
 mod app;
 pub use app::AppWidget as App;
 
+mod app_bar;
+pub use app_bar::AppBarWidget as AppBar;
+
 mod container;
 pub use container::ContainerWidget as Container;
 

ui/styles/styles.sass

@@ -1,4 +1,5 @@
-@import url('https://fonts.googleapis.com/icon?family=Material+Icons')
+@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900%7CRoboto+Mono:500%7CMaterial+Icons')
+
 @import './vuetify/packages/vuetify/src/styles/main.sass'
 //@import './vuetify/packages/vuetify/src/components/VAlert/VAlert.sass'
 @import './vuetify/packages/vuetify/src/components/VApp/VApp.sass'