Merge branch 'bilelmoussaoui/headerbar' into 'master'

.gitlab-ci.yml

 include:
-  - project: 'gnome/citemplates'
-    file: 'flatpak/flatpak-ci-initiative-sdk-extensions.yml'
+  - project: "gnome/citemplates"
+    file: "flatpak/flatpak-ci-initiative-sdk-extensions.yml"
 
 flatpak:
-  image: 'registry.gitlab.gnome.org/gnome/gnome-runtime-images/rust_bundle:3.36'
+  image: "registry.gitlab.gnome.org/gnome/gnome-runtime-images/rust_bundle:master"
   variables:
     BUNDLE: "org.gnome.TourDevel.flatpak"
     MANIFEST_PATH: "build-aux/org.gnome.TourDevel.json"
     FLATPAK_MODULE: "gnome-tour"
     APP_ID: "org.gnome.TourDevel"
     RUNTIME_REPO: "https://nightly.gnome.org/gnome-nightly.flatpakrepo"
-  extends: '.flatpak'
+  extends: ".flatpak"
 
 nightly:
-  extends: '.publish_nightly'
-  dependencies: ['flatpak']
-  needs: ['flatpak']
+  extends: ".publish_nightly"
+  dependencies: ["flatpak"]
+  needs: ["flatpak"]
 
 # Configure and run rustfmt
 # Exits and builds fails if on bad format

build-aux/org.gnome.TourDevel.json

 {
     "app-id" : "org.gnome.TourDevel",
     "runtime" : "org.gnome.Platform",
-    "runtime-version" : "3.36",
+    "runtime-version" : "master",
     "sdk" : "org.gnome.Sdk",
     "sdk-extensions" : [
         "org.freedesktop.Sdk.Extension.rust-stable"
@@ -29,29 +29,6 @@
     },
     "modules" : [
         {
-            "name" : "libhandy",
-            "buildsystem" : "meson",
-            "config-opts" : [
-                "-Dintrospection=disabled",
-                "-Dgtk_doc=false",
-                "-Dtests=false",
-                "-Dexamples=false",
-                "-Dvapi=false",
-                "-Dglade_catalog=disabled"
-            ],
-            "cleanup" : [
-                "/include",
-                "/lib/pkgconfig"
-            ],
-            "sources" : [
-                {
-                    "type" : "git",
-                    "url" : "https://gitlab.gnome.org/GNOME/libhandy.git",
-                    "commit" : "94313c206258860b2428712e7ece1d02c5177857"
-                }
-            ]
-        },
-        {
             "name" : "gnome-tour",
             "buildsystem" : "meson",
             "config-opts" : [

data/resources.gresource.xml

@@ -2,11 +2,8 @@
 <gresources>
   <gresource prefix="/org/gnome/Tour/">
       <file compressed="true" alias="style.css">resources/style.css</file>
-      <file compressed="true" alias="blank.svg">resources/assets/blank.svg</file>
-      <file compressed="true" alias="start-fg.svg">resources/assets/start-fg.svg</file>
-      <file compressed="true" alias="start-bg.svg">resources/assets/start-bg.svg</file>
-      <file compressed="true" alias="start-bg-bg.svg">resources/assets/start-bg-bg.svg</file>
-      <file compressed="true" alias="start-bg-bg-bg.svg">resources/assets/start-bg-bg-bg.svg</file>
+    <file compressed="true" alias="blank.svg">resources/assets/blank.svg</file>
+      <file compressed="true" alias="welcome.svg">resources/assets/welcome.svg</file>
       <file compressed="true" alias="overview.svg">resources/assets/overview.svg</file>
       <file compressed="true" alias="workspaces.svg">resources/assets/workspaces.svg</file>
       <file compressed="true" alias="makeyourown.svg">resources/assets/makeyourown.svg</file>

data/resources/assets/start-bg-bg-bg.svg

-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="400" width="600"><defs><linearGradient xlink:href="#a" id="b" x1="-1180" y1="1314.52" x2="-940" y2="1314.52" gradientUnits="userSpaceOnUse" gradientTransform="translate(1059.535 -574.008) scale(1.14415)"/><linearGradient id="a"><stop offset="0" stop-color="#3580e4"/><stop offset="1" stop-color="#8abfdd"/></linearGradient></defs><circle cx="-153.265" cy="930" r="137.298" transform="matrix(0 -1 1 0 -620 9.437)" fill="url(#b)"/></svg>
\ No newline at end of file

data/resources/assets/start-bg-bg.svg

-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="400" width="600"><defs><linearGradient id="a"><stop offset="0" stop-color="#b2d0f4"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient id="b"><stop offset="0" stop-color="#b2cdf1"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient xlink:href="#a" id="c" x1="85" y1="195" x2="85" y2="165" gradientUnits="userSpaceOnUse"/><linearGradient xlink:href="#b" id="d" x1="245" y1="195" x2="245" y2="170" gradientUnits="userSpaceOnUse" gradientTransform="translate(670 20.563)"/></defs><path d="M97.5 140a27.5 27.5 0 00-26.938 21.969A17.5 17.5 0 0062.5 160 17.5 17.5 0 0045 177.5 17.5 17.5 0 0062.5 195a17.5 17.5 0 00.05 0H155a10 10 0 0010-10 10 10 0 00-10-10 10 10 0 00-7.871 3.83 20 20 0 00.371-3.83 20 20 0 00-20-20 20 20 0 00-5.17.68A27.5 27.5 0 0097.5 140z" fill="url(#c)" opacity=".5"/><path d="M905 175.563a20 20 0 00-20 20 20 20 0 0020 20h27.5a12.5 12.5 0 0012.5-12.5 12.5 12.5 0 00-12.5-12.5 12.5 12.5 0 00-7.643 2.611A20 20 0 00905 175.563z" opacity=".5" fill="url(#d)" transform="translate(-620 9.437)"/></svg>
\ No newline at end of file

data/resources/assets/start-bg.svg

-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="400" width="1400"><defs><linearGradient id="b"><stop offset="0" stop-color="#c5dcf7"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient xlink:href="#a" id="c" x1="85" y1="107.162" x2="85" y2="86" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-3.35406 0 0 3.35406 1487.997 -204.114)"/><linearGradient id="a"><stop offset="0" stop-color="#eef4fc"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient xlink:href="#b" id="d" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-2.7272 0 0 2.7272 1434.713 -153.978)" x1="85" y1="107.162" x2="85" y2="86"/><linearGradient xlink:href="#b" id="e" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-2.57314 0 0 2.57314 1337.412 -173.264)" x1="85" y1="110.304" x2="85" y2="86.986"/><linearGradient xlink:href="#b" id="f" gradientUnits="userSpaceOnUse" gradientTransform="translate(1495.83 -136.448) scale(1.54638)" x1="85" y1="107.162" x2="85" y2="82.135"/></defs><g transform="translate(-620 199.437)" fill="url(#c)"><path d="M1172.903 20.563c21.305.03 40.644 12.452 49.52 31.82a40.917 40.917 0 0118.66-4.55c21.519.032 39.339 16.716 40.77 38.187h.139c15.062 0 27.271 12.21 27.271 27.272 0 15.061-12.21 27.271-27.272 27.271h-152.722a32.727 32.727 0 01-32.727-32.726 32.727 32.727 0 0121.914-30.851 57.352 57.352 0 01-.097-1.874c0-30.124 24.42-54.544 54.544-54.544z" fill="url(#d)"/><path style="font-variation-settings:normal" d="M840.695.562a45.133 45.133 0 00-44.932 42.712c-16.205 2.541-28.526 16.495-28.526 33.436 0 18.754 15.098 33.853 33.853 33.853h87.959a26.127 26.127 0 0026.185-26.184 26.129 26.129 0 00-26.185-26.186h-4.848a45.133 45.133 0 001.764-12.497A45.133 45.133 0 00840.832.563a45.133 45.133 0 00-.136 0z" fill="url(#e)"/><path d="M1644.283-37.48a30.932 30.932 0 00-28.08 18.043 23.2 23.2 0 00-10.58-2.58c-12.201.018-22.305 9.478-23.117 21.653h-.079c-8.54 0-15.463 6.923-15.463 15.464 0 8.54 6.923 15.463 15.464 15.463h86.596a18.557 18.557 0 0018.557-18.556 18.557 18.557 0 00-12.426-17.494 32.52 32.52 0 00.055-1.062c0-17.081-13.846-30.928-30.927-30.928z" fill="url(#f)"/></g></svg>
\ No newline at end of file

data/resources/assets/start-fg.svg

-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="300"><defs><radialGradient r="33.5" fy="48.406" fx="79.091" cy="48.406" cx="79.091" gradientTransform="matrix(.00476 1.62228 -1.43419 .00422 141.702 -82.047)" gradientUnits="userSpaceOnUse" id="e" xlink:href="#a"/><radialGradient r="12" fy="54.102" fx="71.474" cy="54.102" cx="71.474" gradientTransform="matrix(4.50607 0 0 4.76661 -259.306 -59.706)" gradientUnits="userSpaceOnUse" id="f" xlink:href="#b"/><radialGradient r="14.583" fy="49.777" fx="40.152" cy="49.777" cx="40.152" gradientTransform="matrix(.87016 4.27869 -2.56693 .52204 148.394 -163.306)" gradientUnits="userSpaceOnUse" id="g" xlink:href="#c"/><radialGradient r="14.583" fy="49.777" fx="40.152" cy="49.777" cx="40.152" gradientTransform="matrix(.87016 4.27869 -2.56693 .52204 148.394 -163.306)" gradientUnits="userSpaceOnUse" id="h" xlink:href="#c"/><linearGradient id="a"><stop offset="0" stop-color="#fff"/><stop offset=".519" stop-color="#fff"/><stop offset=".734" stop-color="#cfcfcf"/><stop offset="1" stop-color="#dcdcdc"/></linearGradient><linearGradient id="b"><stop offset="0" stop-color="#ed686f"/><stop offset=".865" stop-color="#a51d2d"/><stop offset="1" stop-color="#e01b24"/></linearGradient><linearGradient id="c"><stop offset="0" stop-color="#ed686f"/><stop offset=".911" stop-color="#a51d2d"/><stop offset="1" stop-color="#e01b24"/></linearGradient><clipPath id="d" clipPathUnits="userSpaceOnUse"><path d="M65 177c-18.502 0-33.5 14.998-33.5 33.5.008 7.371 4.131 15.807 11.388 23.526l12.617 13.171H75.02l12.137-13.245c6.636-7.059 11.33-16.117 11.344-23.452 0-18.502-14.998-33.5-33.5-33.5z" style="marker:none" fill="#fff" stroke-width="2"/></clipPath></defs><g transform="matrix(2.34097 0 0 2.2008 137.836 -339.542)" clip-path="url(#d)"><path transform="translate(-8 156)" d="M73 21c-18.502 0-33.5 14.998-33.5 33.5.008 7.371 3.5 14.422 6.94 20.379L58 98h30l11.605-23.21c3.395-5.88 6.88-12.955 6.895-20.29C106.5 35.998 91.502 21 73 21z" style="marker:none" fill="url(#e)"/><path d="M64 177s-18.332 12.132-18.332 30.989C45.668 222.56 61.842 254 61.842 254H67s1.333-31.44 1.333-46.011C68.333 189.132 64 177 64 177z" fill="url(#f)"/><path transform="translate(-8 156)" d="M71.983 21.106c-8.207.147-16.328 3.285-22.5 8.695-6.174 5.409-10.35 13.047-11.574 21.163-1.24 8.225.567 16.874 4.995 23.915L61.902 98h6.432L55.002 81.27c-4.3-5.395-8.472-11.07-10.596-17.634-2.123-6.564-2.166-13.8.003-20.348A32.824 32.824 0 0154.925 28.13a32.824 32.824 0 0117.058-7.025z" fill="url(#g)"/><path transform="matrix(-1 0 0 1 137.16 155.823)" d="M73.003 21.303c-7.709-1.547-15.97-.154-22.746 3.835-6.776 3.989-12.002 10.537-14.39 18.029a32.484 32.484 0 00-.757 16.805 32.484 32.484 0 007.794 14.907L54.11 98h13.383L54.16 74.356c-2.868-5.087-5.557-10.406-6.427-16.181-.87-5.775.036-11.771 2.374-17.123 4.173-9.55 12.836-17.022 22.895-19.748z" fill="url(#h)"/></g><path style="marker:none" d="M272.834 227.583v14.548a7.277 7.277 0 007.293 7.294h19.744c4.041 0 6.446-3.343 7.294-7.294v-14.548z" fill="#e5a50a"/><path style="marker:none" d="M272.834 224.462v14.548a7.277 7.277 0 007.293 7.293h19.744c4.041 0 6.446-3.341 7.294-7.293v-14.548z" fill="#e5a50a"/><path style="marker:none" d="M294.681 224.462v21.84h5.19c4.041 0 6.446-3.34 7.294-7.292v-14.548z" fill="#f3af0b"/></svg>
\ No newline at end of file

data/resources/style.css

@@ -20,6 +20,11 @@
   transition-duration: 250ms;
   transition-timing-function: ease-in-out;
 }
+
+window .titlebar button {
+  min-width: 60px;
+}
+
 /* pages */
 
 @keyframes welcome-bg-move {
@@ -38,15 +43,6 @@
 }
 
 .page { color: #000; }
-  .welcome-page {
-    background-repeat: no-repeat, repeat-x, repeat-x, no-repeat;
-    background-image: url('/org/gnome/Tour/start-fg.svg'),
-                      url('/org/gnome/Tour/start-bg.svg'),
-                      url('/org/gnome/Tour/start-bg-bg.svg'),
-                      url('/org/gnome/Tour/start-bg-bg-bg.svg');
-    background-position: center 30%, -1400px 0, -600px 0, center 30%; /* wasn't able to properly loop with relative offsets */
-    animation: welcome-bg-move 60s linear infinite;
-  }
 
   /* .page:nth-child(2) { background: linear-gradient(to right, #3584e4, #1a5fb4); }  overview */
   .page:nth-child(3) {  }  /* customize */

src/widgets/pages/welcome.rs

@@ -78,9 +78,7 @@ impl WelcomePageWidget {
 
         #[cfg(not(feature = "video"))]
         let header = {
-            let icon = glib::get_os_info("LOGO").unwrap_or_else(|| "start-here-symbolic".into());
-
-            let logo = gtk::Image::from_resource("/org/gnome/Tour/blank.svg");
+            let logo = gtk::Image::from_resource("/org/gnome/Tour/welcome.svg");
             logo.show();
 
             logo.upcast::<gtk::Widget>()
@@ -167,41 +165,6 @@ impl WelcomePageWidget {
         text.show();
         container.add(&text);
 
-        let actions_container = gtk::BoxBuilder::new()
-            .orientation(gtk::Orientation::Horizontal)
-            .spacing(12)
-            .halign(gtk::Align::Center)
-            .margin_top(36)
-            .build();
-
-        let skip_tour_btn = gtk::ButtonBuilder::new()
-            .label(&gettext("_No Thanks"))
-            .height_request(40)
-            .width_request(180)
-            .use_underline(true)
-            .action_name("app.skip-tour")
-            .build();
-        skip_tour_btn.show();
-        actions_container.add(&skip_tour_btn);
-
-        let start_tour_btn = gtk::ButtonBuilder::new()
-            .label(&gettext("_Start Tour"))
-            .height_request(40)
-            .width_request(180)
-            .use_underline(true)
-            .action_name("app.start-tour")
-            .build();
-        start_tour_btn
-            .get_style_context()
-            .add_class("suggested-action");
-        start_tour_btn.show();
-        actions_container.add(&start_tour_btn);
-        actions_container.set_focus_child(Some(&start_tour_btn));
-
-        actions_container.show();
-
-        container.add(&actions_container);
-
         container.show();
         self.widget.add(&container);
         self.widget.show();

src/widgets/paginator.rs

@@ -14,6 +14,8 @@ pub struct PaginatorWidget {
     pages: RefCell<Vec<gtk::Widget>>,
     current_page: RefCell<u32>,
     next_btn: gtk::Button,
+    start_btn: gtk::Button,
+    finish_btn: gtk::Button,
     close_btn: gtk::Button,
     previous_btn: gtk::Button,
 }
@@ -27,7 +29,9 @@ impl PaginatorWidget {
             carousel: libhandy::Carousel::new(),
             carousel_dots: libhandy::CarouselIndicatorDots::new(),
             headerbar: libhandy::HeaderBar::new(),
+            start_btn: gtk::Button::with_label(&gettext("_Start")),
             next_btn: gtk::Button::with_label(&gettext("_Next")),
+            finish_btn: gtk::Button::with_label(&gettext("_Close")),
             close_btn: gtk::Button::with_label(&gettext("_Close")),
             previous_btn: gtk::Button::with_label(&gettext("_Previous")),
             pages: RefCell::new(Vec::new()),
@@ -71,27 +75,29 @@ impl PaginatorWidget {
         let forelast_page = n_pages - 2.0;
         let last_page = n_pages - 1.0;
 
-        let (opacity_close, opacity_previous, opacity_next) =
+        let (opacity_finish, opacity_previous, opacity_start, opacity_next) =
             if (0.0 <= position) && (position < 1.0) {
-                (0.0, position, position)
-            } else if (1.0 <= position) && (position <= forelast_page) {
-                (0.0, 1.0, 1.0)
+                (0.0, position, 1.0, position)
+            } else if (0.0 <= position) && (position <= forelast_page) {
+                (0.0, 1.0, 1f64 - position, 1.0)
             } else if (forelast_page < position) && (position <= last_page) {
-                (position - forelast_page, 1.0, 1.0)
+                (position - forelast_page, 1.0, 0.0, 1.0)
             } else {
                 panic!("Position of the carousel is outside the allowed range");
             };
 
-        self.close_btn.set_opacity(opacity_close);
-        self.close_btn.set_visible(opacity_close > 0_f64);
-
-        self.previous_btn.set_opacity(opacity_previous);
-        self.previous_btn.set_visible(opacity_previous > 0_f64);
+        self.start_btn.set_opacity(opacity_start);
+        self.start_btn.set_visible(opacity_start > 0_f64);
 
         self.next_btn.set_opacity(opacity_next);
         self.next_btn.set_visible(opacity_next > 0_f64);
 
-        self.headerbar.set_opacity(opacity_next);
+        self.finish_btn.set_opacity(opacity_finish);
+        self.finish_btn.set_visible(opacity_finish > 0_f64);
+
+        self.previous_btn.set_opacity(opacity_previous);
+        self.previous_btn.set_visible(opacity_previous > 0_f64);
+
         self.current_page.replace(page_nr);
     }
 
@@ -106,11 +112,12 @@ impl PaginatorWidget {
             .connect_property_position_notify(clone!(@weak p => move |_| {
                 p.update_position();
             }));
-
-        let btn_size_group = gtk::SizeGroup::new(gtk::SizeGroupMode::Horizontal);
-        btn_size_group.add_widget(&self.previous_btn);
-        btn_size_group.add_widget(&self.next_btn);
-        btn_size_group.add_widget(&self.close_btn);
+        self.start_btn
+            .get_style_context()
+            .add_class("suggested-action");
+        self.start_btn.set_use_underline(true);
+        self.start_btn.set_action_name(Some("app.start-tour"));
+        self.start_btn.show();
 
         self.next_btn
             .get_style_context()
@@ -118,25 +125,45 @@ impl PaginatorWidget {
         self.next_btn.set_use_underline(true);
         self.next_btn.set_action_name(Some("app.next-page"));
 
-        self.close_btn
-            .get_style_context()
-            .add_class("suggested-action");
         self.close_btn.set_use_underline(true);
         self.close_btn.set_action_name(Some("app.quit"));
+        self.close_btn.show();
+
+        self.finish_btn
+            .get_style_context()
+            .add_class("suggested-action");
+        self.finish_btn.set_use_underline(true);
+        self.finish_btn.set_action_name(Some("app.quit"));
 
         self.previous_btn.set_use_underline(true);
         self.previous_btn.set_action_name(Some("app.previous-page"));
 
+        let previous_overlay = gtk::Overlay::new();
+        previous_overlay.add(&self.close_btn);
+        previous_overlay.add_overlay(&self.previous_btn);
+        previous_overlay.show();
+
         let next_overlay = gtk::Overlay::new();
         next_overlay.add(&self.next_btn);
-        next_overlay.add_overlay(&self.close_btn);
+        next_overlay.add_overlay(&self.finish_btn);
         next_overlay.show();
 
+        let start_overlay = gtk::Overlay::new();
+        start_overlay.add(&self.start_btn);
+        start_overlay.add_overlay(&next_overlay);
+        start_overlay.show();
+
+        let btn_size_group = gtk::SizeGroup::new(gtk::SizeGroupMode::Horizontal);
+        btn_size_group.add_widget(&self.previous_btn);
+        btn_size_group.add_widget(&self.close_btn);
+        btn_size_group.add_widget(&next_overlay);
+        btn_size_group.add_widget(&start_overlay);
+        btn_size_group.add_widget(&self.finish_btn);
+
         self.headerbar.set_custom_title(Some(&self.carousel_dots));
-        self.headerbar.pack_start(&self.previous_btn);
-        self.headerbar.pack_end(&next_overlay);
+        self.headerbar.pack_start(&previous_overlay);
+        self.headerbar.pack_end(&start_overlay);
         self.headerbar.set_show_close_button(false);
-        self.headerbar.set_opacity(0_f64);
         self.headerbar.show();
 
         self.widget.add(&self.headerbar);