[gnome-tour/bilelmoussaoui/fixes] paginator: implement the new design

From: Bilal Elmoussaoui <bilelmoussaoui src gnome org>
To: commits-list gnome org
Cc:
Subject: [gnome-tour/bilelmoussaoui/fixes] paginator: implement the new design
Date: Fri, 31 Dec 2021 20:50:26 +0000 (UTC)
commit d39c8164cddcd490879f53101d739205c9b655ac
Author: Bilal Elmoussaoui <bil elmoussaoui gmail com>
Date:   Fri Dec 31 21:50:16 2021 +0100

    paginator: implement the new design

 data/resources.gresource.xml            | 24 ++++++----
 data/resources/left-large-symbolic.svg  |  2 +
 data/resources/right-large-symbolic.svg |  2 +
 src/widgets/paginator.rs                | 85 +++++++++++++++++----------------
 4 files changed, 61 insertions(+), 52 deletions(-)
---
diff --git a/data/resources.gresource.xml b/data/resources.gresource.xml
index bdb60b8..4f542c2 100644
--- a/data/resources.gresource.xml
+++ b/data/resources.gresource.xml
@@ -1,15 +1,19 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <gresources>
   <gresource prefix="/org/gnome/Tour/">
-      <file compressed="true" alias="style.css">resources/style.css</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="search.svg">resources/assets/search.svg</file>
-      <file compressed="true" alias="blank.svg">resources/assets/blank.svg</file>
-      <file compressed="true" alias="workspaces.svg">resources/assets/workspaces.svg</file>
-      <file compressed="true" alias="ready-to-go.svg">resources/assets/ready-to-go.svg</file>
-      <file compressed="true" alias="hand-fg.svg">resources/assets/hand-fg.svg</file>
-      <file compressed="true" alias="updown-bg.svg">resources/assets/updown-bg.svg</file>
-      <file compressed="true" alias="leftright-bg.svg">resources/assets/leftright-bg.svg</file>
+    <file compressed="true" alias="style.css">resources/style.css</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="search.svg">resources/assets/search.svg</file>
+    <file compressed="true" alias="blank.svg">resources/assets/blank.svg</file>
+    <file compressed="true" alias="workspaces.svg">resources/assets/workspaces.svg</file>
+    <file compressed="true" alias="ready-to-go.svg">resources/assets/ready-to-go.svg</file>
+    <file compressed="true" alias="hand-fg.svg">resources/assets/hand-fg.svg</file>
+    <file compressed="true" alias="updown-bg.svg">resources/assets/updown-bg.svg</file>
+    <file compressed="true" alias="leftright-bg.svg">resources/assets/leftright-bg.svg</file>
+  </gresource>
+  <gresource prefix="/org/gnome/Tour/icons/scalable/actions">
+    <file compressed="true" alias="left-large-symbolic.svg">resources/left-large-symbolic.svg</file>
+    <file compressed="true" alias="right-large-symbolic.svg">resources/right-large-symbolic.svg</file>
   </gresource>
 </gresources>
diff --git a/data/resources/left-large-symbolic.svg b/data/resources/left-large-symbolic.svg
new file mode 100644
index 0000000..83b469d
--- /dev/null
+++ b/data/resources/left-large-symbolic.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink"; height="16px" viewBox="0 
0 16 16" width="16px"><filter id="a" height="100%" width="100%" x="0%" y="0%"><feColorMatrix 
in="SourceGraphic" type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/></filter><mask id="b"><g 
filter="url(#a)"><path d="m 0 0 h 16 v 16 h -16 z" fill-opacity="0.3"/></g></mask><clipPath id="c"><path d="m 
0 0 h 1600 v 1200 h -1600 z"/></clipPath><mask id="d"><g filter="url(#a)"><path d="m 0 0 h 16 v 16 h -16 z" 
fill-opacity="0.05"/></g></mask><clipPath id="e"><path d="m 0 0 h 1600 v 1200 h -1600 z"/></clipPath><mask 
id="f"><g filter="url(#a)"><path d="m 0 0 h 16 v 16 h -16 z" fill-opacity="0.05"/></g></mask><clipPath 
id="g"><path d="m 0 0 h 1600 v 1200 h -1600 z"/></clipPath><mask id="h"><g filter="url(#a)"><path d="m 0 0 h 
16 v 16 h -16 z" fill-opacity="0.05"/></g></mask><clipPath id="i"><path d="m 0 0 h 1600 v 1200 h -1600 
z"/></clipPath><mask id="j"><g filter="url(#a)">
 <path d="m 0 0 h 16 v 16 h -16 z" fill-opacity="0.05"/></g></mask><clipPath id="k"><path d="m 0 0 h 1600 v 
1200 h -1600 z"/></clipPath><mask id="l"><g filter="url(#a)"><path d="m 0 0 h 16 v 16 h -16 z" 
fill-opacity="0.05"/></g></mask><clipPath id="m"><path d="m 0 0 h 1600 v 1200 h -1600 z"/></clipPath><mask 
id="n"><g filter="url(#a)"><path d="m 0 0 h 16 v 16 h -16 z" fill-opacity="0.05"/></g></mask><clipPath 
id="o"><path d="m 0 0 h 1600 v 1200 h -1600 z"/></clipPath><mask id="p"><g filter="url(#a)"><path d="m 0 0 h 
16 v 16 h -16 z" fill-opacity="0.3"/></g></mask><clipPath id="q"><path d="m 0 0 h 1600 v 1200 h -1600 
z"/></clipPath><mask id="r"><g filter="url(#a)"><path d="m 0 0 h 16 v 16 h -16 z" 
fill-opacity="0.5"/></g></mask><clipPath id="s"><path d="m 0 0 h 1600 v 1200 h -1600 z"/></clipPath><g 
clip-path="url(#c)" mask="url(#b)" transform="matrix(1 0 0 1 -980 -80)"><path d="m 562.460938 212.058594 h 
10.449218 c -1.183594 0.492187 -1.296875 2.460937 0 3 h -10.449218 z m 0 0" fill="
 #2e3436"/></g><g clip-path="url(#e)" mask="url(#d)" transform="matrix(1 0 0 1 -980 -80)"><path d="m 16 748 h 
1 v 1 h -1 z m 0 0" fill="#2e3436" fill-rule="evenodd"/></g><g clip-path="url(#g)" mask="url(#f)" 
transform="matrix(1 0 0 1 -980 -80)"><path d="m 17 747 h 1 v 1 h -1 z m 0 0" fill="#2e3436" 
fill-rule="evenodd"/></g><g clip-path="url(#i)" mask="url(#h)" transform="matrix(1 0 0 1 -980 -80)"><path 
d="m 18 750 h 1 v 1 h -1 z m 0 0" fill="#2e3436" fill-rule="evenodd"/></g><g clip-path="url(#k)" 
mask="url(#j)" transform="matrix(1 0 0 1 -980 -80)"><path d="m 16 750 h 1 v 1 h -1 z m 0 0" fill="#2e3436" 
fill-rule="evenodd"/></g><g clip-path="url(#m)" mask="url(#l)" transform="matrix(1 0 0 1 -980 -80)"><path 
d="m 17 751 h 1 v 1 h -1 z m 0 0" fill="#2e3436" fill-rule="evenodd"/></g><g clip-path="url(#o)" 
mask="url(#n)" transform="matrix(1 0 0 1 -980 -80)"><path d="m 19 751 h 1 v 1 h -1 z m 0 0" fill="#2e3436" 
fill-rule="evenodd"/></g><g clip-path="url(#q)" mask="url(#p)" transform="matr
 ix(1 0 0 1 -980 -80)"><path d="m 136 776 v 7 h 7 v -7 z m 0 0" fill="#2e3436"/></g><g clip-path="url(#s)" 
mask="url(#r)" transform="matrix(1 0 0 1 -980 -80)"><path d="m 219 758 h 3 v 12 h -3 z m 0 0" 
fill="#2e3436"/></g><g fill="#474747"><path d="m 11.644531 2.707031 l -1.414062 -1.414062 l -6.707031 
6.707031 l 6.707031 6.707031 l 1.414062 -1.414062 l -5.292969 -5.292969 z m 0 0"/><path d="m 10.9375 15 h 1 v 
-1 h -1 z m 0 0"/><path d="m 10.9375 2 h 1 v -1 h -1 z m 0 0"/><path d="m 10.9375 3 c 0.554688 0 1 -0.449219 
1 -1 c 0 -0.554688 -0.445312 -1 -1 -1 s -1 0.445312 -1 1 c 0 0.550781 0.445312 1 1 1 z m 0 0"/><path d="m 
10.9375 15 c 0.554688 0 1 -0.449219 1 -1 c 0 -0.554688 -0.445312 -1 -1 -1 s -1 0.445312 -1 1 c 0 0.550781 
0.445312 1 1 1 z m 0 0"/></g></svg>
diff --git a/data/resources/right-large-symbolic.svg b/data/resources/right-large-symbolic.svg
new file mode 100644
index 0000000..b05a993
--- /dev/null
+++ b/data/resources/right-large-symbolic.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink"; height="16px" viewBox="0 
0 16 16" width="16px"><filter id="a" height="100%" width="100%" x="0%" y="0%"><feColorMatrix 
in="SourceGraphic" type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/></filter><mask id="b"><g 
filter="url(#a)"><path d="m 0 0 h 16 v 16 h -16 z" fill-opacity="0.3"/></g></mask><clipPath id="c"><path d="m 
0 0 h 1600 v 1200 h -1600 z"/></clipPath><mask id="d"><g filter="url(#a)"><path d="m 0 0 h 16 v 16 h -16 z" 
fill-opacity="0.05"/></g></mask><clipPath id="e"><path d="m 0 0 h 1600 v 1200 h -1600 z"/></clipPath><mask 
id="f"><g filter="url(#a)"><path d="m 0 0 h 16 v 16 h -16 z" fill-opacity="0.05"/></g></mask><clipPath 
id="g"><path d="m 0 0 h 1600 v 1200 h -1600 z"/></clipPath><mask id="h"><g filter="url(#a)"><path d="m 0 0 h 
16 v 16 h -16 z" fill-opacity="0.05"/></g></mask><clipPath id="i"><path d="m 0 0 h 1600 v 1200 h -1600 
z"/></clipPath><mask id="j"><g filter="url(#a)">
 <path d="m 0 0 h 16 v 16 h -16 z" fill-opacity="0.05"/></g></mask><clipPath id="k"><path d="m 0 0 h 1600 v 
1200 h -1600 z"/></clipPath><mask id="l"><g filter="url(#a)"><path d="m 0 0 h 16 v 16 h -16 z" 
fill-opacity="0.05"/></g></mask><clipPath id="m"><path d="m 0 0 h 1600 v 1200 h -1600 z"/></clipPath><mask 
id="n"><g filter="url(#a)"><path d="m 0 0 h 16 v 16 h -16 z" fill-opacity="0.05"/></g></mask><clipPath 
id="o"><path d="m 0 0 h 1600 v 1200 h -1600 z"/></clipPath><mask id="p"><g filter="url(#a)"><path d="m 0 0 h 
16 v 16 h -16 z" fill-opacity="0.3"/></g></mask><clipPath id="q"><path d="m 0 0 h 1600 v 1200 h -1600 
z"/></clipPath><mask id="r"><g filter="url(#a)"><path d="m 0 0 h 16 v 16 h -16 z" 
fill-opacity="0.5"/></g></mask><clipPath id="s"><path d="m 0 0 h 1600 v 1200 h -1600 z"/></clipPath><g 
clip-path="url(#c)" mask="url(#b)" transform="matrix(1 0 0 1 -1000 -80)"><path d="m 562.460938 212.058594 h 
10.449218 c -1.183594 0.492187 -1.296875 2.460937 0 3 h -10.449218 z m 0 0" fill=
 "#2e3436"/></g><g clip-path="url(#e)" mask="url(#d)" transform="matrix(1 0 0 1 -1000 -80)"><path d="m 16 748 
h 1 v 1 h -1 z m 0 0" fill="#2e3436" fill-rule="evenodd"/></g><g clip-path="url(#g)" mask="url(#f)" 
transform="matrix(1 0 0 1 -1000 -80)"><path d="m 17 747 h 1 v 1 h -1 z m 0 0" fill="#2e3436" 
fill-rule="evenodd"/></g><g clip-path="url(#i)" mask="url(#h)" transform="matrix(1 0 0 1 -1000 -80)"><path 
d="m 18 750 h 1 v 1 h -1 z m 0 0" fill="#2e3436" fill-rule="evenodd"/></g><g clip-path="url(#k)" 
mask="url(#j)" transform="matrix(1 0 0 1 -1000 -80)"><path d="m 16 750 h 1 v 1 h -1 z m 0 0" fill="#2e3436" 
fill-rule="evenodd"/></g><g clip-path="url(#m)" mask="url(#l)" transform="matrix(1 0 0 1 -1000 -80)"><path 
d="m 17 751 h 1 v 1 h -1 z m 0 0" fill="#2e3436" fill-rule="evenodd"/></g><g clip-path="url(#o)" 
mask="url(#n)" transform="matrix(1 0 0 1 -1000 -80)"><path d="m 19 751 h 1 v 1 h -1 z m 0 0" fill="#2e3436" 
fill-rule="evenodd"/></g><g clip-path="url(#q)" mask="url(#p)" transfor
 m="matrix(1 0 0 1 -1000 -80)"><path d="m 136 776 v 7 h 7 v -7 z m 0 0" fill="#2e3436"/></g><g 
clip-path="url(#s)" mask="url(#r)" transform="matrix(1 0 0 1 -1000 -80)"><path d="m 219 758 h 3 v 12 h -3 z m 
0 0" fill="#2e3436"/></g><g fill="#474747"><path d="m 4.292969 2.707031 l 1.414062 -1.414062 l 6.707031 
6.707031 l -6.707031 6.707031 l -1.414062 -1.414062 l 5.292969 -5.292969 z m 0 0"/><path d="m 5 15 h -1 v -1 
h 1 z m 0 0"/><path d="m 5 2 h -1 v -1 h 1 z m 0 0"/><path d="m 5 3 c -0.554688 0 -1 -0.449219 -1 -1 c 0 
-0.554688 0.445312 -1 1 -1 s 1 0.445312 1 1 c 0 0.550781 -0.445312 1 -1 1 z m 0 0"/><path d="m 5 15 c 
-0.554688 0 -1 -0.449219 -1 -1 c 0 -0.554688 0.445312 -1 1 -1 s 1 0.445312 1 1 c 0 0.550781 -0.445312 1 -1 1 
z m 0 0"/></g></svg>
diff --git a/src/widgets/paginator.rs b/src/widgets/paginator.rs
index 55c5d20..ac59cd4 100644
--- a/src/widgets/paginator.rs
+++ b/src/widgets/paginator.rs
@@ -21,8 +21,6 @@ mod imp {
         pub(super) next_overlay: gtk::Overlay,
         pub(super) next_btn: gtk::Button,
         pub(super) start_btn: gtk::Button,
-        pub(super) finish_btn: gtk::Button,
-        pub(super) close_btn: gtk::Button,
         pub(super) previous_btn: gtk::Button,
     }
 
@@ -31,13 +29,11 @@ mod imp {
             Self {
                 carousel: adw::Carousel::new(),
                 carousel_dots: adw::CarouselIndicatorDots::new(),
-                headerbar: gtk::HeaderBar::builder().show_title_buttons(false).build(),
-                start_btn: gtk::Button::with_label(&gettext("_Start")),
+                headerbar: gtk::HeaderBar::builder().show_title_buttons(true).build(),
+                start_btn: gtk::Button::from_icon_name(Some("right-large-symbolic")),
                 next_overlay: gtk::Overlay::new(),
-                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")),
+                next_btn: gtk::Button::from_icon_name(Some("right-large-symbolic")),
+                previous_btn: gtk::Button::from_icon_name(Some("left-large-symbolic")),
                 pages: RefCell::new(Vec::new()),
                 current_page: Cell::new(0),
             }
@@ -59,6 +55,7 @@ mod imp {
                 .unwrap();
             layout_manager.set_orientation(gtk::Orientation::Vertical);
 
+            self.headerbar.add_css_class("flat");
             self.carousel_dots.set_carousel(Some(&self.carousel));
             self.carousel.set_hexpand(true);
             self.carousel.set_vexpand(true);
@@ -71,47 +68,56 @@ mod imp {
                 }));
             self.start_btn.add_css_class("suggested-action");
             self.start_btn.set_use_underline(true);
+            self.start_btn.set_valign(gtk::Align::Center);
             self.start_btn.set_action_name(Some("app.start-tour"));
+            self.start_btn.set_tooltip_text(Some(&gettext("Start")));
+            self.start_btn.add_css_class("circular");
 
-            self.next_btn.add_css_class("suggested-action");
+            self.next_btn.set_tooltip_text(Some(&gettext("Next")));
             self.next_btn.set_use_underline(true);
+            self.next_btn.set_valign(gtk::Align::Center);
             self.next_btn.set_action_name(Some("app.next-page"));
-
-            self.close_btn.set_use_underline(true);
-            self.close_btn.set_action_name(Some("app.quit"));
-
-            self.finish_btn.add_css_class("suggested-action");
-            self.finish_btn.set_use_underline(true);
-            self.finish_btn.set_action_name(Some("app.quit"));
+            self.next_btn.add_css_class("circular");
 
             self.previous_btn.set_use_underline(true);
+            self.previous_btn.set_valign(gtk::Align::Center);
             self.previous_btn.set_action_name(Some("app.previous-page"));
+            self.previous_btn
+                .set_tooltip_text(Some(&gettext("Previous")));
+            self.previous_btn.add_css_class("circular");
 
             self.next_overlay.set_child(Some(&self.next_btn));
-            self.next_overlay.add_overlay(&self.finish_btn);
+            self.next_overlay.set_valign(gtk::Align::Center);
             self.next_overlay.set_can_target(false);
 
             let previous_overlay = gtk::Overlay::new();
-            previous_overlay.set_child(Some(&self.close_btn));
+            previous_overlay.set_valign(gtk::Align::Center);
             previous_overlay.add_overlay(&self.previous_btn);
 
             let start_overlay = gtk::Overlay::new();
             start_overlay.set_child(Some(&self.start_btn));
+            start_overlay.set_valign(gtk::Align::Center);
             start_overlay.add_overlay(&self.next_overlay);
 
             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(&self.next_overlay);
             btn_size_group.add_widget(&start_overlay);
-            btn_size_group.add_widget(&self.finish_btn);
 
             self.headerbar.set_title_widget(Some(&self.carousel_dots));
-            self.headerbar.pack_start(&previous_overlay);
-            self.headerbar.pack_end(&start_overlay);
 
             obj.append(&self.headerbar);
-            obj.append(&self.carousel);
+            let container = gtk::Box::builder()
+                .orientation(gtk::Orientation::Horizontal)
+                .margin_start(12)
+                .margin_end(12)
+                .build();
+
+            container.append(&previous_overlay);
+            container.append(&self.carousel);
+            container.append(&start_overlay);
+
+            obj.append(&container);
 
             self.parent_constructed(obj);
         }
@@ -169,20 +175,21 @@ impl PaginatorWidget {
         let forelast_page = n_pages - 2.0;
         let last_page = n_pages - 1.0;
 
-        let (opacity_finish, opacity_previous, opacity_start, opacity_next, opacity_close) =
-            if (0.0..1.0).contains(&position) {
-                if position == 0.0 {
-                    (0.0, position, 1.0, position, 1.0)
-                } else {
-                    (0.0, position, 1.0, position, 1f64 - position)
-                }
-            } else if (0.0 <= position) && (position <= forelast_page) {
-                (0.0, 1.0, 1f64 - position, 1.0, 0.0)
-            } else if (forelast_page < position) && (position <= last_page) {
-                (position - forelast_page, 1.0, 0.0, 1.0, 0.0)
+        let (opacity_previous, opacity_start, opacity_next) = if (0.0..1.0).contains(&position) {
+            if position == 0.0 {
+                (position, 1.0, position)
             } else {
-                panic!("Position of the carousel is outside the allowed range");
-            };
+                (position, 1.0, position)
+            }
+        } else if (0.0 <= position) && (position <= forelast_page) {
+            (1.0, 0.0, 1.0)
+        } else if forelast_page >= position {
+            (1.0, 0.0, 1.0)
+        } else if position > forelast_page {
+            (1.0, 0.0, last_page - position)
+        } else {
+            panic!("Position of the carousel is outside the allowed range");
+        };
 
         imp.start_btn.set_opacity(opacity_start);
         imp.start_btn.set_visible(opacity_start > 0_f64);
@@ -191,15 +198,9 @@ impl PaginatorWidget {
         imp.next_btn.set_visible(opacity_next > 0_f64);
         imp.next_overlay.set_can_target(opacity_next > 0_f64);
 
-        imp.finish_btn.set_opacity(opacity_finish);
-        imp.finish_btn.set_visible(opacity_finish > 0_f64);
-
         imp.previous_btn.set_opacity(opacity_previous);
         imp.previous_btn.set_visible(opacity_previous > 0_f64);
 
-        imp.close_btn.set_opacity(opacity_close);
-        imp.start_btn.set_visible(opacity_close > 0_f64);
-
         imp.current_page.set(page_nr);
     }
[Date Prev][Date Next] [Thread Prev][Thread Next] [Thread Index] [Date Index] [Author Index]