[gnome-software: 1/2] gs-updates-page: Use a larger image on the ‘up to date’ page
- From: Philip Withnall <pwithnall src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-software: 1/2] gs-updates-page: Use a larger image on the ‘up to date’ page
- Date: Fri, 13 Aug 2021 13:51:08 +0000 (UTC)
commit e58e6eb75c11b7384e2d7425aa6790d1452cce6b
Author: Philip Withnall <pwithnall endlessos org>
Date: Fri Aug 13 11:31:51 2021 +0100
gs-updates-page: Use a larger image on the ‘up to date’ page
This implements the design from #1388. Unfortunately this means we can
no longer use `HdyStatusPage`, as it currently only supports smaller
icons.
In future, once https://gitlab.gnome.org/GNOME/libadwaita/-/issues/173
is backported to libhandy, we could switch back to using
`HdyStatusPage`.
Using a design by Jakub Steiner.
Signed-off-by: Philip Withnall <pwithnall endlessos org>
Fixes: #1388
data/assets/up-to-date.svg | 259 +++++++++++++++++++++++++++++++++++++++
src/gnome-software.gresource.xml | 1 +
src/gs-updates-page.c | 11 +-
src/gs-updates-page.ui | 70 ++++++++++-
src/gtk-style.css | 7 ++
5 files changed, 338 insertions(+), 10 deletions(-)
---
diff --git a/data/assets/up-to-date.svg b/data/assets/up-to-date.svg
new file mode 100644
index 000000000..fd2e818b2
--- /dev/null
+++ b/data/assets/up-to-date.svg
@@ -0,0 +1,259 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+ inkscape:version="1.1-rc (52f87abb86, 2021-05-02)"
+ id="svg8"
+ version="1.1"
+ viewBox="0 0 400 400"
+ height="400"
+ width="400"
+ sodipodi:docname="up-to-date.svg"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape";
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd";
+ xmlns:xlink="http://www.w3.org/1999/xlink";
+ xmlns="http://www.w3.org/2000/svg";
+ xmlns:svg="http://www.w3.org/2000/svg";
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#";
+ xmlns:cc="http://creativecommons.org/ns#";
+ xmlns:dc="http://purl.org/dc/elements/1.1/";>
+ <defs
+ id="defs2">
+ <linearGradient
+ inkscape:collect="always"
+ id="linearGradient14556">
+ <stop
+ style="stop-color:#f9ef69;stop-opacity:1;"
+ offset="0"
+ id="stop14552" />
+ <stop
+ style="stop-color:#f5c211;stop-opacity:1"
+ offset="1"
+ id="stop14554" />
+ </linearGradient>
+ <linearGradient
+ id="a-3"
+ gradientTransform="matrix(0.707107,0.707107,0.707107,-0.707107,2,-170)"
+ gradientUnits="userSpaceOnUse"
+ x1="188.44394"
+ x2="261.09912"
+ y1="-77.78183"
+ y2="-150.43706">
+ <stop
+ offset="0"
+ stop-color="#f6d32d"
+ id="stop2-6" />
+ <stop
+ offset="1"
+ stop-color="#f5c211"
+ id="stop4-7" />
+ </linearGradient>
+ <radialGradient
+ id="b"
+ cx="280.9942"
+ cy="488.84842"
+ gradientTransform="matrix(0.347005,0,0,0.342234,-31.50647,-127.48206)"
+ gradientUnits="userSpaceOnUse"
+ r="224">
+ <stop
+ offset="0"
+ stop-color="#fdfacf"
+ id="stop7" />
+ <stop
+ offset="0.4"
+ stop-color="#f9f06b"
+ id="stop9" />
+ <stop
+ offset="1"
+ stop-color="#f6d32d"
+ id="stop11" />
+ </radialGradient>
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#linearGradient10519"
+ id="linearGradient10521"
+ x1="564.64844"
+ y1="486.45703"
+ x2="723.66016"
+ y2="486.45703"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(1.1724844,0,0,1.1724844,-531.44458,-257.84982)" />
+ <linearGradient
+ inkscape:collect="always"
+ id="linearGradient10519">
+ <stop
+ style="stop-color:#26a269;stop-opacity:1;"
+ offset="0"
+ id="stop10515" />
+ <stop
+ style="stop-color:#1eef8f;stop-opacity:1"
+ offset="0.28584763"
+ id="stop10685" />
+ <stop
+ style="stop-color:#165f3d;stop-opacity:1"
+ offset="1"
+ id="stop10517" />
+ </linearGradient>
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#linearGradient8268"
+ id="linearGradient8270"
+ x1="624.69623"
+ y1="401.86096"
+ x2="698.71875"
+ y2="288.45312"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(1.1724844,0,0,1.1724844,-531.44458,-201.41465)" />
+ <linearGradient
+ inkscape:collect="always"
+ id="linearGradient8268">
+ <stop
+ style="stop-color:#26a269;stop-opacity:1"
+ offset="0"
+ id="stop8264" />
+ <stop
+ style="stop-color:#f9f06b;stop-opacity:1"
+ offset="1"
+ id="stop8266" />
+ </linearGradient>
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#linearGradient14556"
+ id="linearGradient14558"
+ x1="231.2832"
+ y1="145.98535"
+ x2="231.2832"
+ y2="252.41602"
+ gradientUnits="userSpaceOnUse" />
+ </defs>
+ <sodipodi:namedview
+ units="px"
+ borderlayer="true"
+ inkscape:showpageshadow="false"
+ showgrid="false"
+ inkscape:document-rotation="0"
+ inkscape:current-layer="g960"
+ inkscape:document-units="px"
+ inkscape:cy="199.00005"
+ inkscape:cx="169.20055"
+ inkscape:zoom="0.98994949"
+ inkscape:pageshadow="2"
+ inkscape:pageopacity="0"
+ borderopacity="1"
+ bordercolor="#383838"
+ pagecolor="#1f1f1f"
+ id="base"
+ inkscape:pagecheckerboard="1"
+ width="400px"
+ objecttolerance="10.0"
+ gridtolerance="10.0"
+ guidetolerance="10.0"
+ inkscape:window-width="1920"
+ inkscape:window-height="1011"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1" />
+ <metadata
+ id="metadata5">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage"; />
+ <cc:license
+ rdf:resource="http://creativecommons.org/licenses/by-sa/4.0/"; />
+ </cc:Work>
+ <cc:License
+ rdf:about="http://creativecommons.org/licenses/by-sa/4.0/";>
+ <cc:permits
+ rdf:resource="http://creativecommons.org/ns#Reproduction"; />
+ <cc:permits
+ rdf:resource="http://creativecommons.org/ns#Distribution"; />
+ <cc:requires
+ rdf:resource="http://creativecommons.org/ns#Notice"; />
+ <cc:requires
+ rdf:resource="http://creativecommons.org/ns#Attribution"; />
+ <cc:permits
+ rdf:resource="http://creativecommons.org/ns#DerivativeWorks"; />
+ <cc:requires
+ rdf:resource="http://creativecommons.org/ns#ShareAlike"; />
+ </cc:License>
+ </rdf:RDF>
+ </metadata>
+ <g
+ id="layer1"
+ inkscape:groupmode="layer"
+ inkscape:label="Layer 1">
+ <g
+ id="g960"
+ transform="translate(-9)">
+ <g
+ style="stroke-width:0.386113"
+ transform="matrix(1.1259125,0,0,1.1259125,224.47071,55.053376)"
+ id="g862">
+ <path
+ d="m 20,20 h 88 v 88 H 20 Z m 0,0"
+ fill="#f5c211"
+ id="path856-5"
+ style="stroke-width:0.298167" />
+ <path
+ style="fill:url(#a-3);stroke-width:0.386113"
+ d="M 2,64 64,126 126,64 64,2 Z m 0,0"
+ fill="url(#a)"
+ id="path858-3" />
+ <path
+ style="fill:url(#b);stroke-width:0.386113"
+ d="M 112,64 C 112,90.507812 90.507812,112 64,112 37.492188,112 16,90.507812 16,64 16,37.492188
37.492188,16 64,16 c 26.507812,0 48,21.492188 48,48 z m 0,0"
+ fill="url(#b)"
+ id="path860-5" />
+ </g>
+ <circle
+ style="fill:url(#linearGradient10521);fill-opacity:1;stroke-width:18.7598;stop-color:#000000"
+ id="circle10463"
+ cx="209.35948"
+ cy="242.87909"
+ r="101.09472" />
+ <circle
+ style="fill:url(#linearGradient14558);fill-opacity:1;stroke-width:18.7598;stop-color:#000000"
+ id="circle11708"
+ cx="209.35948"
+ cy="236.68916"
+ r="101.09472" />
+ <circle
+ style="fill:url(#linearGradient8270);fill-opacity:1;stroke-width:18.7598;stop-color:#000000"
+ id="path2198"
+ cx="209.35948"
+ cy="238.18916"
+ r="101.09472" />
+ <g
+ id="g8228"
+ transform="matrix(0.93457387,0,0,0.93457387,-395.96762,-136.74431)">
+ <path
+ id="path2322"
+
style="display:inline;fill:#99c1f1;fill-opacity:1;stroke:none;stroke-width:32.3735;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.482318;stop-color:#000000"
+ d="m 538.64083,296.63671 a 43.839679,43.839679 0 0 0 -39.2403,24.36235 35.177858,35.177858 0 0 0
-3.3343,-0.16019 35.177858,35.177858 0 0 0 -35.1788,35.17881 35.177858,35.177858 0 0 0 0.9716,8.21352 h
147.2279 a 29.419203,29.419203 0 0 0 -26.7777,-28.00225 43.839679,43.839679 0 0 0 -43.6326,-39.59224
43.839679,43.839679 0 0 0 -0.036,0 z" />
+ <path
+ id="path889"
+
style="display:inline;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:32.3735;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.482318;stop-color:#000000"
+ d="m 538.64083,292.63671 a 43.839679,43.839679 0 0 0 -39.2403,24.36235 35.177858,35.177858 0 0 0
-3.3343,-0.16019 35.177858,35.177858 0 0 0 -35.1788,35.17881 35.177858,35.177858 0 0 0 0.9716,8.21352 h
147.2279 a 29.419203,29.419203 0 0 0 -26.7777,-28.00225 43.839679,43.839679 0 0 0 -43.6326,-39.59224
43.839679,43.839679 0 0 0 -0.036,0 z" />
+ </g>
+ <path
+
style="fill:none;stroke:#8ff0a4;stroke-width:27.0574;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ d="m 173.95206,242.7111 27.04994,27.04994 55.33318,-55.33316"
+ id="path7128" />
+ <g
+ id="g8232"
+ transform="matrix(0.85677501,0,0,0.85677501,-296.65379,-71.159142)">
+ <path
+ id="path2302"
+
style="display:inline;fill:#99c1f1;fill-opacity:1;stroke:none;stroke-width:48.5793;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.482318;stop-color:#000000"
+ d="m 741.32713,365.18189 c -14.26103,10e-4 -26.92647,9.11418 -31.45954,22.63558 -3.34805,-1.36908
-6.93047,-2.07375 -10.54763,-2.07475 -15.40287,-6.9e-4 -27.88955,12.48596 -27.88889,27.88883 -3.2e-4,4.76721
1.22143,9.45492 3.54859,13.61552 h 82.67972 c 10.41164,-5.88686 16.84961,-16.92128 16.85101,-28.88194
-8e-5,-18.32657 -14.85669,-33.18317 -33.18326,-33.18324 z"
+ sodipodi:nodetypes="cccccccc" />
+ <path
+ id="path903"
+
style="display:inline;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:48.5793;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.482318;stop-color:#000000"
+ d="m 739.32713,361.18189 c -14.26103,10e-4 -26.92647,9.11418 -31.45954,22.63558 -3.34805,-1.36908
-6.93047,-2.07375 -10.54763,-2.07475 -15.40287,-6.9e-4 -27.88955,12.48596 -27.88889,27.88883 -3.2e-4,4.76721
1.22143,9.45492 3.54859,13.61552 h 82.67972 c 10.41164,-5.88686 16.84961,-16.92128 16.85101,-28.88194
-8e-5,-18.32657 -14.85669,-33.18317 -33.18326,-33.18324 z"
+ sodipodi:nodetypes="cccccccc" />
+ </g>
+ </g>
+ </g>
+</svg>
diff --git a/src/gnome-software.gresource.xml b/src/gnome-software.gresource.xml
index 0e26ed067..02880c99d 100644
--- a/src/gnome-software.gresource.xml
+++ b/src/gnome-software.gresource.xml
@@ -52,6 +52,7 @@
<file preprocess="xml-stripblanks">org.freedesktop.PackageKit.xml</file>
<file>gtk-style.css</file>
<file>gtk-style-hc.css</file>
+ <file preprocess="xml-stripblanks" alias="up-to-date.svg">../data/assets/up-to-date.svg</file>
<file alias="work-category-background.png">../data/assets/work-category-background.png</file>
<file preprocess="xml-stripblanks"
alias="icons/scalable/apps/system-component-addon.svg">../data/icons/system-component-addon.svg</file>
<file preprocess="xml-stripblanks"
alias="icons/scalable/apps/system-component-application.svg">../data/icons/system-component-application.svg</file>
diff --git a/src/gs-updates-page.c b/src/gs-updates-page.c
index e7e7dc62e..db1556068 100644
--- a/src/gs-updates-page.c
+++ b/src/gs-updates-page.c
@@ -70,7 +70,7 @@ struct _GsUpdatesPage
GtkWidget *button_updates_mobile;
GtkWidget *button_updates_offline;
GtkWidget *updates_failed_page;
- GtkWidget *updates_uptodate_page;
+ GtkLabel *uptodate_description;
GtkWidget *scrolledwindow_updates;
GtkWidget *spinner_updates;
GtkWidget *stack_updates;
@@ -250,8 +250,8 @@ gs_updates_page_refresh_last_checked (GsUpdatesPage *self)
/* TRANSLATORS: This is the time when we last checked for updates */
last_checked = g_strdup_printf (_("Last checked: %s"), checked_str);
- hdy_status_page_set_description (HDY_STATUS_PAGE (self->updates_uptodate_page),
- last_checked);
+ gtk_label_set_label (self->uptodate_description, last_checked);
+ gtk_widget_set_visible (GTK_WIDGET (self->uptodate_description), TRUE);
if (hours_ago < 1)
interval = 60;
@@ -265,8 +265,7 @@ gs_updates_page_refresh_last_checked (GsUpdatesPage *self)
self->refresh_last_checked_id = g_timeout_add_seconds (interval,
gs_updates_page_refresh_last_checked_cb, self);
} else {
- hdy_status_page_set_description (HDY_STATUS_PAGE (self->updates_uptodate_page),
- NULL);
+ gtk_widget_set_visible (GTK_WIDGET (self->uptodate_description), FALSE);
}
}
@@ -1472,7 +1471,7 @@ gs_updates_page_class_init (GsUpdatesPageClass *klass)
gtk_widget_class_bind_template_child (widget_class, GsUpdatesPage, button_updates_mobile);
gtk_widget_class_bind_template_child (widget_class, GsUpdatesPage, button_updates_offline);
gtk_widget_class_bind_template_child (widget_class, GsUpdatesPage, updates_failed_page);
- gtk_widget_class_bind_template_child (widget_class, GsUpdatesPage, updates_uptodate_page);
+ gtk_widget_class_bind_template_child (widget_class, GsUpdatesPage, uptodate_description);
gtk_widget_class_bind_template_child (widget_class, GsUpdatesPage, scrolledwindow_updates);
gtk_widget_class_bind_template_child (widget_class, GsUpdatesPage, spinner_updates);
gtk_widget_class_bind_template_child (widget_class, GsUpdatesPage, stack_updates);
diff --git a/src/gs-updates-page.ui b/src/gs-updates-page.ui
index 6b85e7e78..f2a203aeb 100644
--- a/src/gs-updates-page.ui
+++ b/src/gs-updates-page.ui
@@ -179,11 +179,73 @@
</object>
</child>
<child>
- <object class="HdyStatusPage" id="updates_uptodate_page">
+
+ <!-- FIXME: This should be a HdyStatusPage but it doesn’t
+ currently support non-icon images
+ See https://gitlab.gnome.org/GNOME/libhandy/-/issues/448 -->
+ <object class="GtkScrolledWindow">
<property name="visible">True</property>
- <property name="icon_name">object-select-symbolic</property>
- <property name="title" translatable="yes" comments="TRANSLATORS: This means all software
(plural) installed on this system is up to date.">Up To Date</property>
- <property name="description">Last checked: HH:MM</property>
+ <property name="hscrollbar-policy">never</property>
+ <property name="propagate-natural-height">True</property>
+ <style>
+ <class name="fake-hdy-status-page"/>
+ </style>
+ <child>
+ <object class="GtkBox">
+ <property name="visible">True</property>
+ <property name="orientation">vertical</property>
+ <property name="valign">center</property>
+ <child>
+ <object class="HdyClamp">
+ <property name="visible">True</property>
+ <child>
+ <object class="GtkBox">
+ <property name="visible">True</property>
+ <property name="orientation">vertical</property>
+ <property name="valign">center</property>
+ <child>
+ <object class="GtkImage">
+ <property name="visible">True</property>
+ <!--><property name="pixel-size">400</property>-->
+ <property name="resource">/org/gnome/Software/up-to-date.svg</property>
+ <style>
+ <class name="icon"/>
+ </style>
+ </object>
+ </child>
+ <child>
+ <object class="GtkLabel">
+ <property name="visible">True</property>
+ <property name="wrap">True</property>
+ <property name="wrap-mode">word-char</property>
+ <property name="justify">center</property>
+ <property name="label" translatable="yes" comments="TRANSLATORS: This
means all software (plural) installed on this system is up to date.">Up to Date</property>
+ <style>
+ <class name="title"/>
+ <class name="large-title"/>
+ </style>
+ </object>
+ </child>
+ <child>
+ <object class="GtkLabel" id="uptodate_description">
+ <property name="visible">True</property>
+ <property name="wrap">True</property>
+ <property name="wrap-mode">word-char</property>
+ <property name="justify">center</property>
+ <property name="use-markup">True</property>
+ <property name="label">Last checked: HH:MM</property>
+ <style>
+ <class name="body"/>
+ <class name="description"/>
+ </style>
+ </object>
+ </child>
+ </object>
+ </child>
+ </object>
+ </child>
+ </object>
+ </child>
</object>
<packing>
<property name="expand">True</property>
diff --git a/src/gtk-style.css b/src/gtk-style.css
index 6ba409220..397c1efb2 100644
--- a/src/gtk-style.css
+++ b/src/gtk-style.css
@@ -780,3 +780,10 @@ window.toolbox button.titlebutton:not(:hover) {
}
.install-progress-label { font-size: smaller }
+
+/* FIXME: These are needed in the updates page until we can use HdyStatusPage
+ * again. See the note in gs-updates-page.ui. */
+scrolledwindow.fake-hdy-status-page > viewport > box { margin: 36px 12px; }
+scrolledwindow.fake-hdy-status-page > viewport > box > clamp:not(:last-child) > box { margin-bottom: 36px; }
+scrolledwindow.fake-hdy-status-page > viewport > box > clamp > box > .icon:not(:last-child) { margin-bottom:
36px; }
+scrolledwindow.fake-hdy-status-page > viewport > box > clamp > box > .title:not(:last-child) {
margin-bottom: 12px; }
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
