summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--data/css/endless-widgets.css64
-rw-r--r--overrides/Endless.js2
-rw-r--r--overrides/Makefile.am.inc3
-rw-r--r--overrides/endless_private/topbar_nav_button.js47
-rw-r--r--test/smoke-tests/back-forward.js124
5 files changed, 238 insertions, 2 deletions
diff --git a/data/css/endless-widgets.css b/data/css/endless-widgets.css
index 0925f9c..d12a3f7 100644
--- a/data/css/endless-widgets.css
+++ b/data/css/endless-widgets.css
@@ -7,7 +7,7 @@
/* Insensitive Text */
-GtkLabel:insensitive {
+.menu GtkLabel:insensitive {
color: rgba(255, 255, 255, 0.5);
}
@@ -80,6 +80,37 @@ EosWindow {
color-stop(0, rgb(67, 67, 67)));
}
+.top-bar .back,
+.top-bar .forward {
+ background-image: linear-gradient(-179deg,
+ rgba(98, 98, 98, 0.49) 0%,
+ alpha(black, 0.50) 100%);
+ border: 1px solid black;
+ box-shadow: inset 1px 1px alpha(white, 0.25);
+ padding: 2px 10px;
+}
+
+.top-bar .back:insensitive,
+.top-bar .forward:insensitive {
+ border: 1px solid alpha(black, 0.20);
+ background-color: transparent;
+ background-image: none;
+ box-shadow: none;
+ color: #5a5a5a;
+ icon-shadow: none;
+}
+
+.top-bar .back {
+ border-top-left-radius: 5px;
+ border-bottom-left-radius: 5px;
+ border-right: 0px none;
+}
+
+.top-bar .forward {
+ border-top-right-radius: 5px;
+ border-bottom-right-radius: 5px;
+}
+
.endless-search-box .cell{
color: #464646;
background-repeat: no-repeat;
@@ -90,3 +121,34 @@ EosWindow {
.endless-search-box .cell:selected{
background-image: url('resource:///com/endlessm/sdk/assets/autocomplete_list_middle_hover.png');
}
+
+.top-bar .back,
+.top-bar .forward {
+ background-image: linear-gradient(-179deg,
+ rgba(98, 98, 98, 0.49) 0%,
+ alpha(black, 0.50) 100%);
+ border: 1px solid black;
+ box-shadow: inset 1px 1px alpha(white, 0.25);
+ padding: 4px 10px;
+}
+
+.top-bar .back:insensitive,
+.top-bar .forward:insensitive {
+ border: 1px solid alpha(black, 0.20);
+ background-color: transparent;
+ background-image: none;
+ box-shadow: none;
+ color: #5a5a5a;
+ icon-shadow: none;
+}
+
+.top-bar .back {
+ border-top-left-radius: 5px;
+ border-bottom-left-radius: 5px;
+ border-right: 0px none;
+}
+
+.top-bar .forward {
+ border-top-right-radius: 5px;
+ border-bottom-right-radius: 5px;
+}
diff --git a/overrides/Endless.js b/overrides/Endless.js
index dc76847..4049836 100644
--- a/overrides/Endless.js
+++ b/overrides/Endless.js
@@ -26,6 +26,7 @@ imports.searchPath.unshift(getCurrentFileDir());
const AssetButton = imports.endless_private.asset_button;
const ConnectionTest = imports.endless_private.connection_test;
const SearchBox = imports.endless_private.search_box;
+const TopbarNavButton = imports.endless_private.topbar_nav_button;
function _init() {
// this is imports.gi.Endless
@@ -34,6 +35,7 @@ function _init() {
Endless.AssetButton = AssetButton.AssetButton;
Endless.doConnectionTestAsync = ConnectionTest.doConnectionTestAsync;
Endless.SearchBox = SearchBox.SearchBox;
+ Endless.TopbarNavButton = TopbarNavButton.TopbarNavButton;
// Override Endless.PageManager.add() so that you can set child properties
// at the same time
diff --git a/overrides/Makefile.am.inc b/overrides/Makefile.am.inc
index 9a21b2e..be0f9cd 100644
--- a/overrides/Makefile.am.inc
+++ b/overrides/Makefile.am.inc
@@ -9,5 +9,6 @@ nobase_dist_gjs_DATA = \
overrides/Endless.js \
overrides/endless_private/asset_button.js \
overrides/endless_private/connection_test.js \
- overrides/endless_private/search_box.js \
+ overrides/endless_private/search_box.js \
+ overrides/endless_private/topbar_nav_button.js \
$(NULL)
diff --git a/overrides/endless_private/topbar_nav_button.js b/overrides/endless_private/topbar_nav_button.js
new file mode 100644
index 0000000..2f77eea
--- /dev/null
+++ b/overrides/endless_private/topbar_nav_button.js
@@ -0,0 +1,47 @@
+const GObject = imports.gi.GObject;
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+
+const TopbarNavButton = new Lang.Class({
+ Name: 'TopbarNavButton',
+ GTypeName: 'EosTopbarNavButton',
+ Extends: Gtk.Grid,
+ Properties: {
+ 'back-button': GObject.ParamSpec.object('back-button', 'Back button',
+ 'Topbar back button widget',
+ GObject.ParamFlags.READABLE,
+ Gtk.Button.$gtype),
+ 'forward-button': GObject.ParamSpec.object('forward-button',
+ 'Forward button', 'Topbar forward button widget',
+ GObject.ParamFlags.READABLE,
+ Gtk.Button.$gtype)
+ },
+
+ _init: function(props) {
+ props = props || {};
+ props.orientation = Gtk.Orientation.HORIZONTAL;
+ this.parent(props);
+
+ this._back_button = Gtk.Button.new_from_icon_name('topbar-go-previous-symbolic',
+ Gtk.IconSize.SMALL_TOOLBAR);
+ this._forward_button = Gtk.Button.new_from_icon_name('topbar-go-next-symbolic',
+ Gtk.IconSize.SMALL_TOOLBAR);
+ this._back_button.can_focus = false;
+ this._forward_button.can_focus = false;
+ this._back_button.get_style_context().add_class('back');
+ this._back_button.get_style_context().add_class(Gtk.STYLE_CLASS_LINKED);
+ this._forward_button.get_style_context().add_class('forward');
+ this._forward_button.get_style_context().add_class(Gtk.STYLE_CLASS_LINKED);
+
+ this.add(this._back_button);
+ this.add(this._forward_button);
+ },
+
+ get back_button() {
+ return this._back_button;
+ },
+
+ get forward_button() {
+ return this._forward_button;
+ }
+});
diff --git a/test/smoke-tests/back-forward.js b/test/smoke-tests/back-forward.js
new file mode 100644
index 0000000..9c4f9b2
--- /dev/null
+++ b/test/smoke-tests/back-forward.js
@@ -0,0 +1,124 @@
+// Copyright 2013 Endless Mobile, Inc.
+
+const Lang = imports.lang;
+const Endless = imports.gi.Endless;
+const Gtk = imports.gi.Gtk;
+const Gdk = imports.gi.Gdk;
+const GObject = imports.gi.GObject;
+
+const TEST_APPLICATION_ID = 'com.endlessm.example.test-back-forward';
+
+const CSS_STYLES = ' \
+ .count { \
+ font-size: 36px; \
+ padding: 10px; \
+ color: black; \
+ background-color: white; \
+ border-radius: 0; \
+ transition: border-radius 500ms, background-color 500ms; \
+ } \
+ .current { \
+ border-radius: 20px; \
+ background-color: purple; \
+ }';
+
+const Page = new Lang.Class({
+ Name: 'Page',
+ Extends: Gtk.Grid,
+ Properties: {
+ 'current': GObject.ParamSpec.int('current', '', '',
+ GObject.ParamFlags.READABLE | GObject.ParamFlags.WRITABLE,
+ 0, 4, 0)
+ },
+
+ _init: function (props) {
+ this._current = 0;
+ this._frames = null;
+
+ props = props || {};
+ props.orientation = Gtk.Orientation.HORIZONTAL;
+ this.parent(props);
+
+ this._frames = [0, 1, 2, 3, 4].map(function (item, index) {
+ let frame = new Gtk.Frame({
+ margin: 5
+ });
+ let label = new Gtk.Label({
+ label: index.toString()
+ });
+ frame.add(label);
+ frame.get_style_context().add_class('count');
+ this.add(frame);
+ return frame;
+ }, this);
+ },
+
+ get current() {
+ return this._current;
+ },
+
+ set current(value) {
+ if(this._frames)
+ this._frames[this._current].get_style_context().remove_class('current');
+ this._current = value;
+ if(this._frames)
+ this._frames[this._current].get_style_context().add_class('current');
+ this.notify('current');
+ }
+});
+
+const TestApplication = new Lang.Class ({
+ Name: 'TestApplication',
+ Extends: Endless.Application,
+
+ vfunc_startup: function () {
+ this.parent();
+
+ this._win = new Endless.Window({
+ application: this
+ });
+ let page = new Page({
+ halign: Gtk.Align.CENTER,
+ valign: Gtk.Align.CENTER,
+ expand: true,
+ });
+ let nav = new Endless.TopbarNavButton();
+ this._win.page_manager.add(page, {
+ left_topbar_widget: nav
+ });
+
+ let provider = new Gtk.CssProvider();
+ provider.load_from_data(CSS_STYLES);
+ Gtk.StyleContext.add_provider_for_screen(Gdk.Screen.get_default(), provider,
+ Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
+
+ nav.back_button.connect('clicked', function () {
+ page.current--;
+ });
+ nav.forward_button.connect('clicked', function () {
+ page.current++;
+ });
+ page.connect('notify::current', function () {
+ nav.back_button.sensitive = true;
+ nav.forward_button.sensitive = true;
+ if (page.current === 0)
+ nav.back_button.sensitive = false;
+ if (page.current === 4)
+ nav.forward_button.sensitive = false;
+ });
+
+ page.current = 0;
+ },
+
+ vfunc_activate: function () {
+ this._win.show_all();
+
+ this.parent();
+ }
+});
+
+let app = new TestApplication({
+ application_id: TEST_APPLICATION_ID,
+ flags: 0
+});
+app.run(ARGV);
generated by cgit v1.2.3 (git 2.25.1) at 2024-04-24 18:24:43 +0000