[gnome-software/wip/jimmac/banners-336: 27/27] Featured Banners: center app name and description labels
- From: Jakub Steiner <jimmac src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-software/wip/jimmac/banners-336: 27/27] Featured Banners: center app name and description labels
- Date: Thu, 30 Jan 2020 19:07:34 +0000 (UTC)
commit 625add2611871dc7cdb3e0e4d4b9d9143ee91c89
Author: Tobias Bernard <tbernard gnome org>
Date: Mon Jan 13 15:43:39 2020 +0100
Featured Banners: center app name and description labels
- use new gtk typography
- match Banner Viewer styling
- tone down backgrounds for the new layout
Fixes https://gitlab.gnome.org/GNOME/gnome-software/issues/896
data/assets/featured-polari.svg | 73 +-----------------
data/assets/org.gnome.Software.Featured.xml | 115 ++++++++++++++++------------
src/gs-feature-tile.ui | 13 +++-
src/gtk-style.css | 10 +++
4 files changed, 85 insertions(+), 126 deletions(-)
---
diff --git a/data/assets/featured-polari.svg b/data/assets/featured-polari.svg
index a663d63e..22297614 100644
--- a/data/assets/featured-polari.svg
+++ b/data/assets/featured-polari.svg
@@ -1,72 +1 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
- xmlns:dc="http://purl.org/dc/elements/1.1/";
- xmlns:cc="http://creativecommons.org/ns#";
- xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#";
- xmlns:svg="http://www.w3.org/2000/svg";
- xmlns="http://www.w3.org/2000/svg";
- xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd";
- xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape";
- width="1200"
- height="471.466"
- viewBox="0 0 1125 442"
- version="1.1"
- id="svg5756"
- sodipodi:docname="featured-polari.svg"
- inkscape:version="0.92.4 5da689c313, 2019-01-14">
- <metadata
- id="metadata5762">
- <rdf:RDF>
- <cc:Work
- rdf:about="">
- <dc:format>image/svg+xml</dc:format>
- <dc:type
- rdf:resource="http://purl.org/dc/dcmitype/StillImage"; />
- <dc:title></dc:title>
- </cc:Work>
- </rdf:RDF>
- </metadata>
- <defs
- id="defs5760" />
- <sodipodi:namedview
- pagecolor="#ffffff"
- bordercolor="#666666"
- borderopacity="1"
- objecttolerance="10"
- gridtolerance="10"
- guidetolerance="10"
- inkscape:pageopacity="0"
- inkscape:pageshadow="2"
- inkscape:window-width="640"
- inkscape:window-height="480"
- id="namedview5758"
- showgrid="false"
- inkscape:zoom="1"
- inkscape:cx="716.85619"
- inkscape:cy="-69.281817"
- inkscape:current-layer="svg5756" />
- <path
-
style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;color-interpolation:sRGB;color-interpolation-filters:linearRGB;fill:#33d17a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.14629614;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
- d="m 306.51584,65.946597 c -46.18909,0 -83.37401,37.184883 -83.37401,83.374013 v 15.1587 c 0,46.18911
37.18492,83.37401 83.37401,83.37401 h 621.34107 l 45.4785,45.47852 v -45.47852 h 7.5782 c 46.18899,0
83.37389,-37.1849 83.37389,-83.37401 v -15.1587 c 0,-46.18913 -37.1849,-83.374013 -83.37389,-83.374013 z"
- id="rect1128-7"
- inkscape:connector-curvature="0"
- sodipodi:nodetypes="sssscccsssss" />
- <path
-
style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;color-interpolation:sRGB;color-interpolation-filters:linearRGB;fill:#228f5d;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.14629614;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
- d="m 223.14091,156.90073 v 7.57946 c 0,46.18912 37.18474,83.37385 83.37386,83.37385 h 621.34354 l
45.4766,45.47665 v -7.57943 L 927.85831,240.2746 H 306.51477 c -46.18912,0 -83.37386,-37.18474
-83.37386,-83.37387 z m 841.14729,0 c 0,46.18913 -37.1848,83.37387 -83.37389,83.37387 h -7.5794 v 7.57944 h
7.5794 c 46.18909,0 83.37389,-37.18473 83.37389,-83.37385 z"
- id="rect1362-3"
- inkscape:connector-curvature="0"
- sodipodi:nodetypes="cssccccsccsccssc" />
- <path
-
style="display:inline;fill:#f6f5f4;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.05352132px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;enable-background:new"
- d="m 175.44355,156.90117 c -46.18913,0 -83.37403,37.1849 -83.37403,83.37401 v 15.15869 c 0,46.18913
37.1849,83.37403 83.37403,83.37403 h 22.73925 v 45.47607 l 45.47608,-45.47607 h 386.43846 c 46.18912,0
83.3716,-37.1849 83.3716,-83.37403 v -15.15869 c 0,-46.18911 -37.18248,-83.37401 -83.3716,-83.37401 z"
- id="path1038-5"
- inkscape:connector-curvature="0"
- sodipodi:nodetypes="sssscccsssss" />
- <path
- inkscape:connector-curvature="0"
-
style="display:inline;fill:#deddda;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.05352132px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;enable-background:new"
- d="m 92.16585,251.64377 c -0.0558,1.25773 -0.0963,2.51773 -0.0963,3.78972 0,46.18911 37.18473,83.37386
83.37385,83.37386 h 22.73833 v -7.57944 h -22.73829 c -44.91714,0 -81.30679,-35.17005 -83.27764,-79.58414 z m
621.20799,0 c 0,41.70037 -38.3605,79.58414 -83.27764,79.58414 H 243.65848 l -45.47666,45.47665 v 7.57944 l
45.47666,-45.47665 H 630.0962 c 46.18912,0 83.37387,-37.18475 83.37387,-83.37386 0,-1.27199 -0.0404,-2.53199
-0.0963,-3.78972 z"
- id="path1354-2"
- sodipodi:nodetypes="cssccscccsccccsscc" />
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg"; width="2000" height="470" viewBox="0 0 1875 440.626"><path
style="marker:none" d="M1048.979 64.572c-46.19 0-83.374 37.185-83.374 83.374v15.159c0 46.189 37.185 83.374
83.374 83.374h621.341l45.479 45.478V246.48h7.578c46.189 0 83.374-37.185
83.374-83.374v-15.159c0-46.189-37.185-83.374-83.374-83.374z" color="#000" overflow="visible"
fill="#33d17a"/><path style="marker:none" d="M965.604 155.526v7.58c0 46.189 37.185 83.374 83.374
83.374h621.343l45.477 45.476v-7.58l-45.477-45.476h-621.343c-46.19 0-83.374-37.185-83.374-83.374zm841.147 0c0
46.19-37.184 83.374-83.373 83.374h-7.58v7.58h7.58c46.189 0 83.373-37.185 83.373-83.374z" color="#000"
overflow="visible" fill="#228f5d"/><path d="M175.444 155.527c-46.19 0-83.374 37.185-83.374 83.374v15.158c0
46.19 37.184 83.375 83.374 83.375h22.739v45.476l45.476-45.476h386.438c46.19 0 83.372-37.185
83.372-83.375v-15.158c0-46.19-37.183-83.374-83.372-83.374z" fill="#f6f5f4" fill-rule="evenodd"/><path
d="M92.16
6 250.27
a85.333 85.333 0 00-.096 3.79c0 46.188 37.184 83.373 83.373 83.373h22.739v-7.58h-22.739c-44.917
0-81.306-35.17-83.277-79.584zm621.208 0c0 41.7-38.36 79.584-83.278 79.584H243.658l-45.476
45.476v7.58l45.476-45.477h386.438c46.19 0 83.374-37.185 83.374-83.374 0-1.272-.04-2.532-.096-3.79z"
fill="#deddda" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/data/assets/org.gnome.Software.Featured.xml b/data/assets/org.gnome.Software.Featured.xml
index ce8b493f..515c2de7 100644
--- a/data/assets/org.gnome.Software.Featured.xml
+++ b/data/assets/org.gnome.Software.Featured.xml
@@ -1,24 +1,28 @@
<?xml version="1.0" encoding="UTF-8"?>
<components>
- <component merge="append">
+ <component>
<id>inkscape.desktop</id>
<custom>
- <value key="GnomeSoftware::FeatureTile-css">border-color: #ccc;
+ <value key="GnomeSoftware::FeatureTile-css">border-color: #aaa;
text-shadow: none;
-color: #606060;
+color: #333;
background:
+ linear-gradient(to bottom, rgba(255,255,255,0.3), rgba(200,200,200,0.9)),
url('file://@datadir@/gnome-software/featured-inkscape.svg')
- 20% / 60% auto no-repeat,
- linear-gradient(to bottom, #ffffff, #e2e2e2);
+ left 40% / 80% auto no-repeat;
</value>
</custom>
</component>
- <component merge="append">
+ <component>
<id>mypaint.desktop</id>
<custom>
<value key="GnomeSoftware::FeatureTile-css">border-color: #888;
-color: #000;
-text-shadow: none;
+color: #333;
+text-shadow: 0 1px 12px rgba(255,255,255,0.05),
+ 0 -1px rgba(255,255,255,0.05),
+ 1px 0 rgba(255,255,255,0.1),
+ 0 1px rgba(255,255,255,0.3),
+ -1px 0 rgba(255,255,255,0.1);
background:
url('file://@datadir@/gnome-software/featured-mypaint.svg')
left 90% / 300px auto no-repeat,
@@ -27,7 +31,7 @@ box-shadow: none;
</value>
</custom>
</component>
- <component merge="append">
+ <component>
<id>org.gnome.Maps.desktop</id>
<custom>
<value key="GnomeSoftware::FeatureTile-css">border-color: #deddda;
@@ -42,22 +46,23 @@ background: #f6f5f4,
</value>
</custom>
</component>
- <component merge="append">
+ <component>
<id>org.gnome.Polari.desktop</id>
<custom>
<value key="GnomeSoftware::FeatureTile-css">border-color: #4e9a06;
-color: #53f1aa;
+color: #fff;
text-shadow: 0 1px #317e54,
-1px 0 #317e54;
box-shadow: none;
outline: none;
background:
+ linear-gradient(to bottom, rgba(105,108,116,0.3)),
url('file://@datadir@/gnome-software/featured-polari.svg')
- left 65% / 70% auto no-repeat, #43a570;
+ center / 90% auto no-repeat, #43a570;
</value>
</custom>
</component>
- <component merge="append">
+ <component>
<id>transmission-gtk.desktop</id>
<custom>
<value key="GnomeSoftware::FeatureTile-css">border-color: #d65100;
@@ -66,13 +71,13 @@ color: #ffffff;
box-shadow: none;
background:
url('file://@datadir@/gnome-software/featured-transmission.svg')
- 10% center / 50% auto no-repeat, -gtk-gradient (radial,
+ -20% center / 40% auto no-repeat, -gtk-gradient (radial,
center bottom, 0, center center, 0.8,
from(#ffa348), to(#e66100));
</value>
</custom>
</component>
- <component merge="append">
+ <component>
<id>org.gnome.Podcasts</id>
<custom>
<value key="GnomeSoftware::FeatureTile-css">border: 1px solid #d7430a;
@@ -80,10 +85,14 @@ background: #f7632a,
url('file://@datadir@/gnome-software/featured-podcasts.svg')
10% 20% / 50% auto no-repeat;
color: #fff;
-text-shadow: none;</value>
+text-shadow: 0 1px 12px rgba(0,0,0,0.05),
+ 0 -1px rgba(0,0,0,0.05),
+ 1px 0 rgba(0,0,0,0.1),
+ 0 1px rgba(0,0,0,0.3),
+ -1px 0 rgba(0,0,0,0.1);</value>
</custom>
</component>
- <component merge="append">
+ <component>
<id>org.gnome.Boxes.desktop</id>
<categories>
<category>Featured</category>
@@ -91,12 +100,16 @@ text-shadow: none;</value>
<custom>
<value key="GnomeSoftware::FeatureTile-css">border: 1px solid #ed8254;
background: #fca937 url('file://@datadir@/gnome-software/featured-boxes.svg')
- 10% 40% / 60% auto no-repeat;
-color: #cd6234;
-text-shadow: 0 1px rgba(255,255,255,0.3);</value>
+ 150% center / 60% auto no-repeat;
+color: #fff;
+text-shadow: 0 1px 12px rgba(0,0,0,0.05),
+ 0 -1px rgba(0,0,0,0.05),
+ 1px 0 rgba(0,0,0,0.1),
+ 0 1px rgba(0,0,0,0.3),
+ -1px 0 rgba(0,0,0,0.1);</value>
</custom>
</component>
- <component merge="append">
+ <component>
<id>com.github.johnfactotum.Foliate</id>
<categories>
<category>Featured</category>
@@ -113,30 +126,29 @@ text-shadow: none;
</value>
</custom>
</component>
- <component merge="append">
+ <component>
<id>org.gnome.SoundRecorder.desktop</id>
<custom>
<value key="GnomeSoftware::FeatureTile-css">border: 1px solid #bbb;
-/* background: #f6f5f4 url('file://@datadir@/gnome-software/featured-sound-recorder.svg')
- 10% 40% / 50% auto no-repeat; */
background: #443f51 url('file://@datadir@/gnome-software/featured-sound-recorder.svg')
- 10% 40% / 50% auto no-repeat;
+ 130% 40% / 50% auto no-repeat;
color: #fff;
text-shadow: none;</value>
</custom>
</component>
- <component merge="append">
+ <component>
<id>org.kde.kdenlive</id>
<custom>
<value key="GnomeSoftware::FeatureTile-css">border: 1px solid #df321e;
-background: #ffd6ac url('file://@datadir@/gnome-software/featured-kdenlive-bg.jpg')
- left 20% / 60% auto no-repeat;
+background: linear-gradient(to bottom, rgba(255,214,172,0.8), rgba(255,214,172,0.8)),
+ url('file://@datadir@/gnome-software/featured-kdenlive-bg.jpg')
+ center / cover no-repeat;
color: #df321e;
box-shadow: none;
text-shadow: none;</value>
</custom>
</component>
- <component merge="append">
+ <component>
<id>org.gimp.GIMP</id>
<custom>
<value key="GnomeSoftware::FeatureTile-css">border-color: #4a8c30;
@@ -144,12 +156,12 @@ text-shadow: none;
color: rgba(255,255,255,0.9);
background:
url('file://@datadir@/gnome-software/featured-gimp.png')
- left 50% / 50% auto no-repeat,
+ -20% 50% / 50% auto no-repeat,
linear-gradient(to bottom, #8ac674, #cbddc3);
</value>
</custom>
</component>
- <component merge="append">
+ <component>
<id>org.videolan.VLC</id>
<custom>
<value key="GnomeSoftware::FeatureTile-css">border: 1px solid #df321e;
@@ -161,7 +173,7 @@ box-shadow: none;
text-shadow: 0 0 2px #fff;</value>
</custom>
</component>
- <component merge="append">
+ <component>
<id>com.spotify.Client</id>
<categories>
<category>Featured</category>
@@ -175,17 +187,20 @@ background: url('http://people.gnome.org/~jimmac/gnome-software/spotify-logo.svg
10% / 200px auto no-repeat, -gtk-gradient (linear, left top, left bottom, from(#b47fba), to(#000));</value>
</custom>
</component>
- <component merge="append">
+ <component>
<id>com.slack.Slack</id>
<custom>
<value key="GnomeSoftware::FeatureTile-css">border: 1px solid #eee;
-background: url('http://people.gnome.org/~jimmac/gnome-software/slack-logo.svg') 10% 48px / 200px auto
no-repeat, url('file://@datadir@/gnome-software/featured-slack-bg.jpg')
+background:
+ url('http://people.gnome.org/~jimmac/gnome-software/slack-logo.svg') 10% 48px / 200px auto no-repeat,
+ linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
+ url('file://@datadir@/gnome-software/featured-slack-bg.jpg')
center / cover no-repeat;
color: #fff;
text-shadow: none;</value>
</custom>
</component>
- <component merge="append">
+ <component>
<id>org.gnome.FeedReader</id>
<custom>
<value key="GnomeSoftware::FeatureTile-css">border-color: #d65100;
@@ -198,19 +213,19 @@ background: #f5c211
</value>
</custom>
</component>
- <component merge="append">
+ <component>
<id>com.bitwarden.desktop</id>
<custom>
<value key="GnomeSoftware::FeatureTile-css">border: 1px solid #1c6d8c;
box-shadow: none;
background: #2ec27e
url('file://@datadir@/gnome-software/featured-bitwarden.svg')
- 0 50% / 60% auto no-repeat;
+ 150% 80% / 60% auto no-repeat;
color: #fff;
text-shadow: 0 0 2px #26a269;</value>
</custom>
</component>
- <component merge="append">
+ <component>
<id>com.dropbox.Client</id>
<custom>
<value key="GnomeSoftware::FeatureTile-css">border: 1px solid #a8c3d6;
@@ -221,7 +236,7 @@ background: #b8d3e6 url('file://@datadir@/gnome-software/featured-dropbox.png')
color: #47525d;</value>
</custom>
</component>
- <component merge="append">
+ <component>
<id>com.github.calo001.fondo</id>
<custom>
<value key="GnomeSoftware::FeatureTile-css">border: 1px solid transparent;
@@ -233,7 +248,7 @@ box-shadow: none;
text-shadow: 0 1px 2px #000;</value>
</custom>
</component>
- <component merge="append">
+ <component>
<id>org.darktable.Darktable</id>
<categories>
<category>Featured</category>
@@ -247,7 +262,7 @@ box-shadow: none;
text-shadow: 0 1px 2px #000;</value>
</custom>
</component>
- <component merge="append">
+ <component>
<id>com.calibre_ebook.calibre</id>
<categories>
<category>Featured</category>
@@ -261,7 +276,7 @@ box-shadow: none;
text-shadow: 0 1px 2px #000;</value>
</custom>
</component>
- <component merge="append">
+ <component>
<id>fr.free.Homebank</id>
<custom>
<value key="GnomeSoftware::FeatureTile-css">border: 1px solid transparent;
@@ -272,7 +287,7 @@ box-shadow: none;
text-shadow: 0 1px 2px #000;</value>
</custom>
</component>
- <component merge="append">
+ <component>
<id>de.wolfvollprecht.UberWriter</id>
<custom>
<value key="GnomeSoftware::FeatureTile-css">border: 1px solid #0554c4;
@@ -284,7 +299,7 @@ text-shadow: 0 0 3px #3584e4;
box-shadow: none;</value>
</custom>
</component>
- <component merge="append">
+ <component>
<id>net.sourceforge.Klavaro</id>
<custom>
<value key="GnomeSoftware::FeatureTile-css">border: 1px solid transparent;
@@ -295,7 +310,7 @@ box-shadow: none;
text-shadow: 0 0 4px #fff;</value>
</custom>
</component>
- <component merge="append">
+ <component>
<id>com.github.junrrein.PDFSlicer</id>
<custom>
<value key="GnomeSoftware::FeatureTile-css">border: 1px solid #1c6d8c;
@@ -307,7 +322,7 @@ color: #fff;
text-shadow: none;</value>
</custom>
</component>
- <component merge="append">
+ <component>
<id>org.gnome.Todo.desktop</id>
<custom>
<value key="GnomeSoftware::FeatureTile-css">border: 1px solid transparent;
@@ -318,7 +333,7 @@ box-shadow: none;
text-shadow: 0 1px 2px #000;</value>
</custom>
</component>
- <component merge="append">
+ <component>
<id>com.github.fabiocolacio.marker</id>
<categories>
<category>Featured</category>
@@ -332,7 +347,7 @@ box-shadow: none;
text-shadow: 0 1px 2px #000;</value>
</custom>
</component>
- <component merge="append">
+ <component>
<id>com.valvesoftware.Steam</id>
<custom>
<value key="GnomeSoftware::FeatureTile-css">border-color: #1b2838;
@@ -343,7 +358,7 @@ background: #1b2838 url('http://people.gnome.org/~jimmac/gnome-software/steam-lo
10% / 200px auto no-repeat;</value>
</custom>
</component>
- <component merge="append">
+ <component>
<id>org.gnome.Tetravex</id>
<custom>
<value key="GnomeSoftware::FeatureTile-css">border: 1px solid transparent;
@@ -354,7 +369,7 @@ box-shadow: none;
text-shadow: 0 0 2px #fff;</value>
</custom>
</component>
- <component merge="append">
+ <component>
<id>org.stellarium.Stellarium</id>
<custom>
<value key="GnomeSoftware::FeatureTile-css">border: 1px solid transparent;
diff --git a/src/gs-feature-tile.ui b/src/gs-feature-tile.ui
index 7fecf295..b2714989 100644
--- a/src/gs-feature-tile.ui
+++ b/src/gs-feature-tile.ui
@@ -33,21 +33,23 @@
<child>
<object class="GtkBox" id="box2">
<property name="visible">True</property>
- <property name="halign">end</property>
+ <property name="halign">center</property>
<property name="orientation">vertical</property>
<property name="margin">40</property>
<child>
<object class="GtkLabel" id="title">
<property name="visible">True</property>
<property name="xalign">0</property>
- <property name="halign">start</property>
+ <property name="halign">center</property>
<property name="valign">end</property>
<property name="vexpand">True</property>
<property name="ellipsize">end</property>
<attributes>
<attribute name="scale" value="2.5"/>
- <attribute name="weight" value="700"/>
</attributes>
+ <style>
+ <class name="title-1"/>
+ </style>
</object>
</child>
<child>
@@ -55,8 +57,11 @@
<property name="visible">True</property>
<property name="ellipsize">end</property>
<property name="xalign">0</property>
- <property name="halign">start</property>
+ <property name="halign">center</property>
<property name="valign">start</property>
+ <style>
+ <class name="caption"/>
+ </style>
</object>
</child>
</object>
diff --git a/src/gtk-style.css b/src/gtk-style.css
index 75921b1a..3e31c8c2 100644
--- a/src/gtk-style.css
+++ b/src/gtk-style.css
@@ -522,3 +522,13 @@ flowboxchild {
margin-right: -25px;
padding: 10px 20px 10px 5px;
}
+
+/* these typographical classes will be provided in gtk eventually */
+.title-1{
+ font-weight: 800;
+ font-size: 20pt;
+}
+.caption{
+ font-weight: 400;
+ font-size: 9pt;
+}
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
