Address inital design review

data/resources.gresource.xml

@@ -7,5 +7,6 @@
       <file compressed="true" alias="search.svg">resources/assets/search.svg</file>
       <file compressed="true" alias="software.svg">resources/assets/software.svg</file>
       <file compressed="true" alias="status-menu.svg">resources/assets/status-menu.svg</file>
+      <file compressed="true" alias="help.svg">resources/assets/help.svg</file>
   </gresource>
 </gresources>

data/resources/style.css

-
 .large-title {
    font-weight: 300;
    font-size: 24pt;
    letter-spacing: 0.2rem;
 }
-.page-head {
-  font-weight: 300;
-  font-size: 20pt;
-}
-
-.title-1 {
-   font-weight: 800;
+.page-title {
+   font-weight: 600;
    font-size: 20pt;
 }
-.title-2 {
-   font-weight: 800;
-   font-size: 15pt;
-}
-.title-3 {
-   font-weight: 700;
-   font-size: 15pt;
-}
-.title-4 {
-   font-weight: 700;
-   font-size: 13pt;
-}
-.heading {
-   font-weight: 700;
-   font-size: 11pt;
-}
-.body {
-   font-weight: 400;
-   font-size: 11pt;
-}
-.caption-heading {
-   font-weight: 700;
-   font-size: 9pt;
-}
-.caption {
+.page-body {
    font-weight: 400;
-   font-size: 9pt;
+   font-size: 12pt;
 }
-
-

src/widgets/headerbar.rs

 use gtk::prelude::*;
 
 pub struct HeaderBar {
-    pub widget: gtk::HeaderBar,
-    container: gtk::Stack,
+    pub widget: gtk::Stack,
+    headerbar: gtk::HeaderBar,
     next_btn: gtk::Button,
 }
 
 impl HeaderBar {
     pub fn new() -> Self {
-        let widget = gtk::HeaderBar::new();
-        let container = gtk::Stack::new();
+        let widget = gtk::Stack::new();
+        let headerbar = gtk::HeaderBar::new();
         let next_btn = gtk::Button::new();
 
-        widget.set_show_title_buttons(true);
-
-        let headerbar = Self { widget, container, next_btn };
+        let headerbar = Self { widget, headerbar, next_btn };
         headerbar.init();
         headerbar
     }
 
     pub fn start_tour(&self) {
-        self.container.set_visible_child_name("pages");
-        self.widget.set_show_title_buttons(false);
+        self.widget.set_visible_child_name("pages");
+        self.headerbar.set_show_title_buttons(false);
     }
 
     pub fn set_page_nr(&self, page_nr: i32, total_pages: i32) {
@@ -32,18 +30,26 @@ impl HeaderBar {
         }
     }
 
+    pub fn set_page_title(&self, title: &str) {
+        self.headerbar.set_title(Some(title));
+    }
+
     pub fn end_tour(&self) {
-        self.container.set_visible_child_name("welcome");
-        self.widget.set_show_title_buttons(true);
+        self.widget.set_visible_child_name("welcome");
+        self.headerbar.set_show_title_buttons(true);
     }
 
     fn init(&self) {
-        self.container.set_hexpand(true);
-        self.container.set_transition_type(gtk::StackTransitionType::SlideLeftRight);
-        self.container.set_transition_duration(300);
-        self.container.add_named(&gtk::Label::new(None), "welcome");
+        self.headerbar.set_show_title_buttons(true);
+        self.widget.set_hexpand(true);
+        self.widget.set_transition_type(gtk::StackTransitionType::SlideLeftRight);
+        self.widget.set_transition_duration(300);
+        self.widget.get_style_context().add_class("titlebar");
 
-        let pages_container = gtk::Box::new(gtk::Orientation::Horizontal, 0);
+        let container = gtk::HeaderBar::new();
+        container.set_show_title_buttons(true);
+        container.set_title(Some("Welcome Tour"));
+        self.widget.add_named(&container, "welcome");
 
         let previous_btn = gtk::Button::new();
         previous_btn.add(&gtk::Label::new(Some("Previous")));
@@ -59,10 +65,8 @@ impl HeaderBar {
         self.next_btn.set_hexpand(true);
         self.next_btn.set_property_width_request(60);
 
-        pages_container.add(&previous_btn);
-        pages_container.add(&self.next_btn);
-        self.container.add_named(&pages_container, "pages");
-
-        self.widget.set_custom_title(Some(&self.container));
+        self.headerbar.pack_start(&previous_btn);
+        self.headerbar.pack_end(&self.next_btn);
+        self.widget.add_named(&self.headerbar, "pages");
     }
 }

src/widgets/pages/image.rs

+use super::page::Pageable;
 use gtk::prelude::*;
 
 pub struct ImagePageWidget {
     pub widget: gtk::Box,
+    resource_uri: String,
+    pub title: String,
+    pub head: String,
+    pub body: String,
+}
+
+impl Pageable for ImagePageWidget {
+    fn get_widget(&self) -> gtk::Widget {
+        self.widget.clone().upcast::<gtk::Widget>()
+    }
+
+    fn get_title(&self) -> String {
+        self.title.clone()
+    }
+
+    fn get_head(&self) -> String {
+        self.head.clone()
+    }
+
+    fn get_body(&self) -> String {
+        self.body.clone()
+    }
 }
 
 impl ImagePageWidget {
-    pub fn new(resource_uri: &str, text: &str) -> Self {
-        let widget = gtk::Box::new(gtk::Orientation::Vertical, 48);
+    pub fn new(resource_uri: &str, title: &str, head: &str, body: &str) -> Self {
+        let widget = gtk::Box::new(gtk::Orientation::Vertical, 12);
 
-        let image_page = Self { widget };
+        let image_page = Self {
+            widget,
+            resource_uri: resource_uri.to_string(),
+            title: title.to_string(),
+            head: head.to_string(),
+            body: body.to_string(),
+        };
 
-        image_page.init(resource_uri, text);
+        image_page.init();
         image_page
     }
 
-    fn init(&self, resource_uri: &str, text: &str) {
+    fn init(&self) {
         self.widget.set_halign(gtk::Align::Center);
         self.widget.set_valign(gtk::Align::Center);
         self.widget.set_property_margin(48);
 
-        let image = gtk::Picture::new_for_resource(Some(resource_uri));
+        let image = gtk::Picture::new_for_resource(Some(&self.resource_uri));
         image.set_valign(gtk::Align::Start);
         self.widget.add(&image);
 
-        let label = gtk::Label::new(Some(text));
-        label.set_lines(2);
-        label.set_property_wrap(true);
-        label.set_justify(gtk::Justification::Center);
-        label.set_valign(gtk::Align::Center);
-        label.get_style_context().add_class("page-head");
-        self.widget.add(&label);
+        let head_label = gtk::Label::new(Some(&self.get_head()));
+        head_label.set_justify(gtk::Justification::Center);
+        head_label.set_valign(gtk::Align::Center);
+        head_label.set_margin_top(36);
+        head_label.get_style_context().add_class("page-title");
+
+        self.widget.add(&head_label);
+
+        let body_label = gtk::Label::new(Some(&self.get_body()));
+        body_label.set_lines(2);
+        body_label.set_property_wrap(true);
+        body_label.set_justify(gtk::Justification::Center);
+        body_label.set_valign(gtk::Align::Center);
+        body_label.get_style_context().add_class("page-body");
+        body_label.set_margin_top(12);
+        self.widget.add(&body_label);
     }
 }

src/widgets/pages/mod.rs

 mod image;
+mod page;
 mod welcome;
 
 pub use image::ImagePageWidget;
+pub use page::Pageable;
 pub use welcome::WelcomePageWidget;

src/widgets/pages/page.rs

+pub trait Pageable {
+    fn get_widget(&self) -> gtk::Widget;
+    fn get_title(&self) -> String;
+    fn get_head(&self) -> String;
+    fn get_body(&self) -> String;
+}

src/widgets/paginator.rs

@@ -2,11 +2,11 @@ use gtk::prelude::*;
 use std::cell::RefCell;
 use std::convert::TryInto;
 
-use super::pages::ImagePageWidget;
+use super::pages::Pageable;
 
 pub struct PaginatorWidget {
     pub widget: gtk::Stack,
-    pages: Vec<ImagePageWidget>,
+    pages: Vec<Box<dyn Pageable>>,
     current_page: RefCell<i32>,
 }
 
@@ -27,10 +27,15 @@ impl PaginatorWidget {
         self.pages.len().try_into().unwrap_or(1)
     }
 
-    pub fn get_current_page(&self) -> i32 {
+    pub fn get_current_page_nr(&self) -> i32 {
         self.current_page.borrow().clone()
     }
 
+    pub fn get_current_page(&self) -> Option<&Box<dyn Pageable>> {
+        let current_page_idx: usize = (self.get_current_page_nr() - 1).try_into().unwrap_or(0);
+        self.pages.get(current_page_idx)
+    }
+
     pub fn next(&self) {
         let next_page = self.current_page.borrow().clone() + 1;
         self.go_to(next_page);
@@ -41,11 +46,11 @@ impl PaginatorWidget {
         self.go_to(previous_page);
     }
 
-    pub fn add_page(&mut self, page: ImagePageWidget) {
+    pub fn add_page(&mut self, page: Box<dyn Pageable>) {
         let page_nr = self.pages.len() + 1;
         let page_name = format!("page-{}", page_nr);
 
-        self.widget.add_named(&page.widget, &page_name);
+        self.widget.add_named(&page.get_widget(), &page_name);
         self.pages.push(page);
     }
 

src/widgets/window.rs

@@ -31,6 +31,9 @@ impl Window {
     }
 
     pub fn start_tour(&self) {
+        if let Some(page) = self.paginator.get_current_page() {
+            self.headerbar.set_page_title(&page.get_title());
+        }
         self.container.set_visible_child_name("pages");
         self.headerbar.start_tour();
     }
@@ -42,7 +45,7 @@ impl Window {
 
     pub fn next_page(&self) {
         let total_pages = self.paginator.get_total_pages();
-        let current_page = self.paginator.get_current_page();
+        let current_page = self.paginator.get_current_page_nr();
         self.headerbar.set_page_nr(current_page + 1, total_pages);
 
         if current_page == total_pages {
@@ -50,17 +53,24 @@ impl Window {
         } else {
             self.paginator.next();
         }
+        if let Some(page) = self.paginator.get_current_page() {
+            self.headerbar.set_page_title(&page.get_title());
+        }
     }
 
     pub fn previous_page(&self) {
         let total_pages = self.paginator.get_total_pages();
-        let current_page = self.paginator.get_current_page();
+        let current_page = self.paginator.get_current_page_nr();
         self.headerbar.set_page_nr(current_page - 1, total_pages);
 
         match current_page {
             1 => self.end_tour(),
             _ => self.paginator.previous(),
         }
+
+        if let Some(page) = self.paginator.get_current_page() {
+            self.headerbar.set_page_title(&page.get_title());
+        }
     }
 
     fn init(&mut self) {
@@ -78,20 +88,48 @@ impl Window {
         let welcome_page = WelcomePageWidget::new();
         self.container.add_named(&welcome_page.widget, "welcome");
 
-        self.paginator
-            .add_page(ImagePageWidget::new("/org/gnome/Tour/activities.svg", "Click Activities to view windows, launch apps and search"));
-        self.paginator
-            .add_page(ImagePageWidget::new("/org/gnome/Tour/search.svg", "In the Activities Overview, just start typing to search"));
-        self.paginator
-            .add_page(ImagePageWidget::new("/org/gnome/Tour/calendar.svg", "Click the time to view the calendar, notifications and weather"));
-        self.paginator.add_page(ImagePageWidget::new(
+        self.paginator.add_page(Box::new(ImagePageWidget::new(
+            "/org/gnome/Tour/activities.svg",
+            "Activities Overview",
+            "Open Activities to start apps",
+            "You can also view open windows, search and use workspaces.",
+        )));
+
+        self.paginator.add_page(Box::new(ImagePageWidget::new(
+            "/org/gnome/Tour/search.svg",
+            "Search",
+            "In the Activities Overview, just start typing to search",
+            "Search can be used to launch apps, find settings, do calculations and much more.",
+        )));
+
+        self.paginator.add_page(Box::new(ImagePageWidget::new(
+            "/org/gnome/Tour/calendar.svg",
+            "Date & Time",
+            "Click the time to see your now and next",
+            "This includes notifications, media controls, calendar events, the weather and world clocks.",
+        )));
+
+        self.paginator.add_page(Box::new(ImagePageWidget::new(
             "/org/gnome/Tour/status-menu.svg",
-            "Use the status menu to view system information and access settings",
-        ));
-        self.paginator
-            .add_page(ImagePageWidget::new("/org/gnome/Tour/software.svg", "Use the Software app to find and install apps"));
-        self.container.add_named(&self.paginator.widget, "pages");
+            "System Menu",
+            "View system information and settings",
+            "Get an overview of the system status and quickly change settings.",
+        )));
+        self.paginator.add_page(Box::new(ImagePageWidget::new(
+            "/org/gnome/Tour/software.svg",
+            "Software",
+            "Find and install apps",
+            "The Software app makese it easy to find and install all the apps you need.",
+        )));
+
+        self.paginator.add_page(Box::new(ImagePageWidget::new(
+            "/org/gnome/Tour/help.svg",
+            "Learn More",
+            "That's it! To learn more, see the Help",
+            "The help app contains information, tips and tricks.",
+        )));
 
+        self.container.add_named(&self.paginator.widget, "pages");
         self.widget.add(&self.container);
     }
 }