Skip to content

X
ximper-welcome
Commit d39c8164 authored by Bilal Elmoussaoui's avatar Bilal Elmoussaoui
Browse files
Options

paginator: implement the new design

parent 0c7cab24
Hide whitespace changes
Inline Side-by-side
Showing with 61 additions and 52 deletions
data/resources.gresource.xml
View file @ d39c8164
<?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>
data/resources/left-large-symbolic.svg 0 → 100644
View file @ d39c8164
<?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="matrix(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>
data/resources/right-large-symbolic.svg 0 → 100644
View file @ d39c8164
<?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)" transform="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>
src/widgets/paginator.rs
View file @ d39c8164
......@@ -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);
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment