Add a basic pages support

data/resources.gresource.xml

@@ -2,5 +2,10 @@
 <gresources>
   <gresource prefix="/org/gnome/Tour/">
       <file compressed="true" alias="style.css">resources/style.css</file>
+      <file compressed="true" alias="activities.svg">resources/assets/activities.svg</file>
+      <file compressed="true" alias="calendar.svg">resources/assets/calendar.svg</file>
+      <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>
   </gresource>
 </gresources>

data/resources/style.css

@@ -4,6 +4,12 @@
    font-size: 24pt;
    letter-spacing: 0.2rem;
 }
+.page-head {
+  font-weight: 300;
+  font-size: 20pt;
+  letter-spacing: 0.2rem;
+}
+
 .title-1 {
    font-weight: 800;
    font-size: 20pt;

src/application.rs

-use gio::prelude::*;
-use gtk::prelude::*;
-use std::env;
-
 use crate::config;
 use crate::utils;
 use crate::widgets::Window;
+use gio::prelude::*;
+use gtk::prelude::*;
+use std::env;
+use std::rc::Rc;
 
 pub struct Application {
     app: gtk::Application,
-    window: Window,
+    window: Rc<Window>,
 }
 
 impl Application {
     pub fn new() -> Self {
         let app = gtk::Application::new(Some(config::APP_ID), gio::ApplicationFlags::FLAGS_NONE).unwrap();
-        let window = Window::new(&app);
+        let window = Rc::new(Window::new(&app));
 
         let application = Self { app, window };
 
@@ -33,7 +33,16 @@ impl Application {
                 app.quit();
             }),
         );
+        // Start Tour
+        utils::action(
+            &self.app,
+            "start-tour",
+            clone!(@strong self.window as window => move |_, _| {
+                window.start_tour();
+            }),
+        );
 
+        // Skip Tour
         utils::action(
             &self.app,
             "skip-tour",
@@ -41,6 +50,22 @@ impl Application {
                 app.quit();
             }),
         );
+
+        utils::action(
+            &self.app,
+            "next-page",
+            clone!(@strong self.window as window => move |_, _| {
+                window.next_page();
+            }),
+        );
+        utils::action(
+            &self.app,
+            "previous-page",
+            clone!(@strong self.window as window => move |_, _| {
+                window.previous_page();
+            }),
+        );
+
         self.app.set_accels_for_action("app.quit", &["<primary>q"]);
     }
 

src/meson.build

@@ -41,11 +41,13 @@ sources = files(
   'widgets/pages/welcome.rs',
   'widgets/headerbar.rs',
   'widgets/mod.rs',
+  'widgets/paginator.rs',
   'widgets/window.rs',
   'application.rs',
   'config.rs',
   'main.rs',
   'static_resources.rs',
+  'utils.rs',
 )
 
 custom_target(

src/widgets/headerbar.rs

 use gtk::prelude::*;
 
-pub struct Headerbar {
+pub struct HeaderBar {
     pub widget: gtk::HeaderBar,
+    container: gtk::Stack,
 }
 
-impl Headerbar {
+impl HeaderBar {
     pub fn new() -> Self {
         let widget = gtk::HeaderBar::new();
+        let container = gtk::Stack::new();
 
         widget.set_show_title_buttons(true);
 
-        Self { widget }
+        let headerbar = Self { widget, container };
+        headerbar.init();
+        headerbar
+    }
+
+    pub fn start_tour(&self) {
+        self.container.set_visible_child_name("pages");
+        self.widget.set_show_title_buttons(false);
+    }
+
+    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");
+
+        let pages_container = gtk::Box::new(gtk::Orientation::Horizontal, 0);
+
+        let previous_btn = gtk::Button::new();
+        previous_btn.add(&gtk::Label::new(Some("Previous")));
+        previous_btn.set_halign(gtk::Align::Start);
+        previous_btn.set_action_name(Some("app.previous-page"));
+        previous_btn.set_hexpand(true);
+        previous_btn.set_property_width_request(60);
+
+        let next_btn = gtk::Button::new();
+        next_btn.add(&gtk::Label::new(Some("Next")));
+        next_btn.get_style_context().add_class("suggested-action");
+        next_btn.set_action_name(Some("app.next-page"));
+        next_btn.set_halign(gtk::Align::End);
+        next_btn.set_hexpand(true);
+        next_btn.set_property_width_request(60);
+
+        pages_container.add(&previous_btn);
+        pages_container.add(&next_btn);
+        self.container.add_named(&pages_container, "pages");
+
+        self.widget.set_custom_title(Some(&self.container));
     }
 }

src/widgets/mod.rs

 mod headerbar;
 mod pages;
+mod paginator;
 mod window;
 
 pub use window::Window;

src/widgets/pages/image.rs

+use gtk::prelude::*;
+
+pub struct ImagePageWidget {
+    pub widget: gtk::Box,
+}
+
+impl ImagePageWidget {
+    pub fn new(resource_uri: &str, text: &str) -> Self {
+        let widget = gtk::Box::new(gtk::Orientation::Vertical, 48);
+
+        let image_page = Self { widget };
+
+        image_page.init(resource_uri, text);
+        image_page
+    }
+
+    fn init(&self, resource_uri: &str, text: &str) {
+        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));
+        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);
+    }
+}

src/widgets/pages/mod.rs

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

src/widgets/pages/welcome.rs

@@ -43,6 +43,7 @@ impl WelcomePageWidget {
         start_tour_btn.get_style_context().add_class("suggested-action");
         start_tour_btn.set_property_height_request(40);
         start_tour_btn.set_property_width_request(180);
+        start_tour_btn.set_action_name(Some("app.start-tour"));
 
         let skip_tour_btn = gtk::Button::new();
         skip_tour_btn.add(&gtk::Label::new(Some("Skip")));

src/widgets/paginator.rs

+use gtk::prelude::*;
+use std::cell::RefCell;
+use std::convert::TryInto;
+
+use super::pages::ImagePageWidget;
+
+pub struct PaginatorWidget {
+    pub widget: gtk::Stack,
+    pages: Vec<ImagePageWidget>,
+    current_page: RefCell<i32>,
+}
+
+impl PaginatorWidget {
+    pub fn new() -> Self {
+        let widget = gtk::Stack::new();
+
+        let paginator = Self {
+            widget,
+            pages: Vec::new(),
+            current_page: RefCell::new(1),
+        };
+        paginator.init();
+        paginator
+    }
+
+    pub fn next(&self) {
+        let next_page = self.current_page.borrow().clone() + 1;
+        self.go_to(next_page);
+    }
+
+    pub fn previous(&self) {
+        let previous_page = self.current_page.borrow().clone() - 1;
+        self.go_to(previous_page);
+    }
+
+    pub fn add_page(&mut self, page: ImagePageWidget) {
+        let page_nr = self.pages.len() + 1;
+        let page_name = format!("page-{}", page_nr);
+
+        self.widget.add_named(&page.widget, &page_name);
+        self.pages.push(page);
+    }
+
+    fn init(&self) {
+        self.widget.set_transition_type(gtk::StackTransitionType::SlideLeftRight);
+        self.widget.set_transition_duration(300);
+    }
+
+    fn go_to(&self, page_nr: i32) {
+        let page_name = format!("page-{}", page_nr);
+        let total_pages: i32 = self.pages.len().try_into().unwrap_or(0);
+
+        if page_nr <= total_pages && self.widget.get_child_by_name(&page_name).is_some() {
+            self.current_page.replace(page_nr);
+            self.widget.set_visible_child_name(&page_name);
+        }
+    }
+}

src/widgets/window.rs

 use gtk::prelude::*;
 
-use super::headerbar::Headerbar;
-use super::pages::WelcomePageWidget;
+use super::headerbar::HeaderBar;
+use super::pages::{ImagePageWidget, WelcomePageWidget};
+use super::paginator::PaginatorWidget;
 use crate::config::PROFILE;
 
 pub struct Window {
     pub widget: gtk::ApplicationWindow,
+    container: gtk::Stack,
+    headerbar: HeaderBar,
+    paginator: PaginatorWidget,
 }
 
 impl Window {
     pub fn new(app: &gtk::Application) -> Self {
         let widget = gtk::ApplicationWindow::new(app);
+        let container = gtk::Stack::new();
+        let headerbar = HeaderBar::new();
+        let paginator = PaginatorWidget::new();
 
-        let window_widget = Window { widget };
+        let mut window_widget = Window {
+            widget,
+            container,
+            headerbar,
+            paginator,
+        };
 
         window_widget.init();
         window_widget
     }
 
-    fn init(&self) {
+    pub fn start_tour(&self) {
+        self.container.set_visible_child_name("pages");
+        self.headerbar.start_tour();
+    }
+
+    pub fn next_page(&self) {
+        self.paginator.next();
+    }
+
+    pub fn previous_page(&self) {
+        self.paginator.previous();
+    }
+
+    fn init(&mut self) {
         self.widget.set_default_size(920, 640);
+        self.container.set_transition_type(gtk::StackTransitionType::SlideLeftRight);
+        self.container.set_transition_duration(300);
 
         // Devel Profile
         if PROFILE == "Devel" {
             self.widget.get_style_context().add_class("devel");
         }
 
-        let headerbar = Headerbar::new();
-        self.widget.set_titlebar(Some(&headerbar.widget));
-
-        let container = gtk::Stack::new();
+        self.widget.set_titlebar(Some(&self.headerbar.widget));
 
         let welcome_page = WelcomePageWidget::new();
-        container.add_named(&welcome_page.widget, "welcome");
+        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(
+            "/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");
 
-        self.widget.add(&container);
+        self.widget.add(&self.container);
     }
 }