[yelp-xsl] Adding experimental-gnome-tiles links style
- From: Shaun McCance <shaunm src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [yelp-xsl] Adding experimental-gnome-tiles links style
- Date: Wed, 10 Feb 2021 00:29:09 +0000 (UTC)
commit 863ebf4cbc776498e84d51d4bd81742242287756
Author: Shaun McCance <shaunm redhat com>
Date: Tue Feb 9 19:27:51 2021 -0500
Adding experimental-gnome-tiles links style
I'm trying to be very, very explicit about style hints that are experimental
and currently only intended for a single use, because I really want to be
able to drop these styles when we're done with them.
test/mallard/source/banner-help.svg | 82 +++++++++++++++++++++++++++++++
test/mallard/source/credit1.page | 1 +
test/mallard/source/index.page | 4 ++
test/mallard/source/note1.page | 1 +
test/mallard/source/task1.page | 1 +
xslt/common/css/core.css.tmpl | 21 ++++++++
xslt/common/css/mallard.css.tmpl | 34 +++++++++++++
xslt/mallard/html/mal2html-links.xsl | 94 ++++++++++++++++++++++++++++++++++++
8 files changed, 238 insertions(+)
---
diff --git a/test/mallard/source/banner-help.svg b/test/mallard/source/banner-help.svg
new file mode 100644
index 00000000..9638c51e
--- /dev/null
+++ b/test/mallard/source/banner-help.svg
@@ -0,0 +1,82 @@
+<?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="16"
+ height="16"
+ version="1.1"
+ id="svg12"
+ sodipodi:docname="help-contents-symbolic.svg"
+ inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)">
+ <metadata
+ id="metadata18">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage"; />
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <defs
+ id="defs16" />
+ <sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="824"
+ inkscape:window-height="480"
+ id="namedview14"
+ showgrid="false"
+ inkscape:zoom="49.625"
+ inkscape:cx="8"
+ inkscape:cy="8"
+ inkscape:window-x="26"
+ inkscape:window-y="23"
+ inkscape:window-maximized="0"
+ inkscape:current-layer="svg12" />
+ <g
+ fill="#474747"
+ id="g10"
+ style="fill:#3584e4">
+ <path
+ d="M3.025 0l.034.002a2.086 2.086 0 00-.159 0h-.02l-.024.002A1.98 1.98 0 001 2.045v11.914A1.981 1.981
0 003.041 16h9.918A1.98 1.98 0 0015 13.96V5a1.991 1.991 0 00-.617-1.422L11.426.62A1.99 1.99 0 0010.004
0h-.008zm-.017 2c-.002-.002.005 0 .002 0h6.965c-.01 0 .014.011.007.004l.008.008 2.998
3.002.008.006c-.007-.007.004.019.004.01v8.959c-.001-.08-.093.01-.012.012H3.012c.081-.001-.01-.092-.012-.012V2.011c.001.055.027.005.008-.01z"
+
style="line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;shape-padding:0;isolation:auto;mix-blend-mode:normal;marker:none;fill:#3584e4"
+ color="#bebebe"
+ font-weight="400"
+ font-family="sans-serif"
+ overflow="visible"
+ id="path2" />
+ <path
+ d="M8 4.877c-2.24 0-4.06 1.82-4.06 4.06A4.063 4.063 0 008 12.998c2.24 0 4.06-1.82 4.06-4.06A4.063
4.063 0 008 4.877zm0 1a3.043 3.043 0 013.06 3.06A3.043 3.043 0 018 11.999a3.043 3.043 0 01-3.06-3.06A3.043
3.043 0 018 5.877z"
+
style="line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;shape-padding:0;isolation:auto;mix-blend-mode:normal;marker:none;fill:#3584e4"
+ color="#bebebe"
+ font-weight="400"
+ font-family="sans-serif"
+ overflow="visible"
+ id="path4" />
+ <path
+ d="M8 6.938c-1.1 0-2 .9-2 2 0 1.099.9 2 2 2s2-.901 2-2c0-1.1-.9-2-2-2zm0 1c.563 0 1 .437 1 1 0
.562-.437 1-1 1s-1-.438-1-1c0-.563.437-1 1-1z"
+
style="line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;shape-padding:0;isolation:auto;mix-blend-mode:normal;marker:none;fill:#3584e4"
+ color="#bebebe"
+ font-weight="400"
+ font-family="sans-serif"
+ overflow="visible"
+ id="path6" />
+ <path
+ d="M6.331 5.6a2.991 2.991 0 00-1.669 1.684l1.908.954a1.31 1.31 0 01.699-.731zm3.338 0L8.73
7.507c.322.136.571.405.7.731l1.907-.954A2.991 2.991 0 009.668 5.6zm-3.1 4.069l-1.907.953c.309.757.91 1.348
1.67 1.653l.953-1.907a1.318 1.318 0 01-.715-.7zm2.861 0a1.316 1.316 0 01-.715.699l.954 1.907a3.003 3.003 0
001.669-1.653z"
+ id="path8"
+ style="fill:#3584e4" />
+ </g>
+</svg>
diff --git a/test/mallard/source/credit1.page b/test/mallard/source/credit1.page
index 292da97b..c7ff118c 100644
--- a/test/mallard/source/credit1.page
+++ b/test/mallard/source/credit1.page
@@ -32,6 +32,7 @@
<desc>Clicky clicky the about expander at the bottom.</desc>
<uix:thumb src="yelp.svg"/>
+ <uix:thumb role="experimental-gnome-tiles" src="banner-help.svg"/>
<link type="guide" xref="index"/>
</info>
diff --git a/test/mallard/source/index.page b/test/mallard/source/index.page
index 1505644f..e428033f 100644
--- a/test/mallard/source/index.page
+++ b/test/mallard/source/index.page
@@ -34,6 +34,10 @@ so uncomment whatever you want to test.
</links>
<!--
+ <links type="topic" style="experimental-gnome-tiles">
+ <title>Experimental gnome tile links</title>
+ </links>
+
<links type="topic"
xmlns:uix="http://projectmallard.org/experimental/ui/";
uix:thumbs="tiles">
diff --git a/test/mallard/source/note1.page b/test/mallard/source/note1.page
index ff0f6701..731fb0c3 100644
--- a/test/mallard/source/note1.page
+++ b/test/mallard/source/note1.page
@@ -12,6 +12,7 @@
<desc>Note some notes. Tip some tips. Warn some warnings.</desc>
<uix:thumb src="yelp.svg"/>
+ <uix:thumb role="experimental-gnome-tiles" src="banner-help.svg"/>
<link type="guide" xref="index"/>
</info>
diff --git a/test/mallard/source/task1.page b/test/mallard/source/task1.page
index 9d923251..4796a933 100644
--- a/test/mallard/source/task1.page
+++ b/test/mallard/source/task1.page
@@ -12,6 +12,7 @@
<desc>Perform the first action with gusto.</desc>
<uix:thumb src="yelp.svg"/>
+ <uix:thumb role="experimental-gnome-tiles" src="banner-help.svg"/>
<link type="guide" xref="index"/>
</info>
diff --git a/xslt/common/css/core.css.tmpl b/xslt/common/css/core.css.tmpl
index bd19c49c..1ed0ff12 100644
--- a/xslt/common/css/core.css.tmpl
+++ b/xslt/common/css/core.css.tmpl
@@ -226,6 +226,27 @@ dl.compact dt { margin-top: 0.2em; }
dl.compact dt:first-child { margin-top: 0; }
dl.compact dt + dt { margin-top: 0; }
+div.tiles {
+ display: flex;
+ flex-flow: row wrap;
+ align-items: stretch;
+ justify-content: stretch;
+ vertical-align: top;
+ clear: both;
+ margin: 0 -10px;
+}
+div.tiles > * {
+ vertical-align: top;
+ margin: 0;
+ padding: 10px;
+ max-width: none;
+}
+div.tiles > *:empty { padding: 0 10px; height: 0; }
+div.tile4 { flex: 1 0 {{$html.grid.size div 4 - 20}}px; }
+div.tile3 { flex: 1 0 {{$html.grid.size div 3 - 20}}px; }
+div.tile2 { flex: 1 0 {{$html.grid.size div 2 - 20}}px; }
+div.tile1 { flex: 1 0 {{$html.grid.size - 20}}px; }
+
a {
text-decoration: none;
color: {{$color.fg.blue}};
diff --git a/xslt/common/css/mallard.css.tmpl b/xslt/common/css/mallard.css.tmpl
index 0c533b1d..56c3f786 100644
--- a/xslt/common/css/mallard.css.tmpl
+++ b/xslt/common/css/mallard.css.tmpl
@@ -166,6 +166,7 @@ a.ui-overlay-close {
background-color: {{$color.blue}};
color: {{$color.bg}};
}
+<!-- FIXME drop this in favor of tiles CSS in core.css -->
div.links-tiles {
display: flex;
flex-flow: row wrap;
@@ -214,6 +215,39 @@ div.links-tile > a > span.links-tile-text > span.desc {
color: {{$color.fg.dark}};
}
+<!-- links/@style = 'experimental-gnome-tiles' -->
+a.ex-gnome-tile {
+ display: block;
+ border: solid 1px {{$color.gray}};
+ transition: box-shadow 0.5s linear;
+}
+a.ex-gnome-tile:hover {
+ box-shadow: 0px 2px 4px {{$color.gray}};
+}
+span.ex-gnome-tile-banner {
+ display: block;
+ height: 112px;
+ background: {{$color.fg.blue}};
+ overflow: hidden;
+}
+span.ex-gnome-tile-banner img {
+ width: 128px; height: 128px;
+ margin-{{$left}}: 64px;
+ margin-top: -8px;
+ transform: rotate(-10deg);
+}
+span.ex-gnome-tile-title {
+ color: {{$color.fg}};
+ display: block;
+ margin: 10px 20px;
+ font-size: 1.2em;
+}
+span.ex-gnome-tile-desc {
+ color: {{$color.fg.gray}};
+ display: block;
+ margin: 10px 20px;
+}
+
<!-- links/@style = 'grid' -->
div.links-grid-container {
margin-left: -10px;
diff --git a/xslt/mallard/html/mal2html-links.xsl b/xslt/mallard/html/mal2html-links.xsl
index 7b63b4db..f15d17f9 100644
--- a/xslt/mallard/html/mal2html-links.xsl
+++ b/xslt/mallard/html/mal2html-links.xsl
@@ -145,6 +145,7 @@ parameter will be used if provided.
<xsl:with-param name="links" select="$links"/>
</xsl:call-template>
</xsl:when>
+ <!-- FIXME delete this style -->
<xsl:when test="$uithumbs = 'tiles'">
<xsl:call-template name="mal2html.ui.links.tiles">
<xsl:with-param name="node" select="$node"/>
@@ -152,6 +153,7 @@ parameter will be used if provided.
<xsl:with-param name="role" select="$role"/>
</xsl:call-template>
</xsl:when>
+ <!-- FIXME delete this style -->
<xsl:when test="$uithumbs = 'hover'">
<xsl:call-template name="_mal2html.ui.links.hover">
<xsl:with-param name="node" select="$node"/>
@@ -159,12 +161,20 @@ parameter will be used if provided.
<xsl:with-param name="role" select="$role"/>
</xsl:call-template>
</xsl:when>
+ <!-- FIXME delete this style -->
<xsl:when test="contains($style, ' mouseovers ')">
<xsl:call-template name="_mal2html.links.mouseovers">
<xsl:with-param name="node" select="$node"/>
<xsl:with-param name="links" select="$links"/>
</xsl:call-template>
</xsl:when>
+ <xsl:when test="contains($style, ' experimental-gnome-tiles ')">
+ <xsl:call-template name="_mal2html.links.experimental_gnome_tiles">
+ <xsl:with-param name="node" select="$node"/>
+ <xsl:with-param name="links" select="$links"/>
+ <xsl:with-param name="role" select="$role"/>
+ </xsl:call-template>
+ </xsl:when>
<xsl:when test="contains($style, ' toronto ') or contains($style, ' grid ')">
<xsl:call-template name="_mal2html.links.grid">
<xsl:with-param name="node" select="$node"/>
@@ -172,6 +182,7 @@ parameter will be used if provided.
<xsl:with-param name="role" select="$role"/>
</xsl:call-template>
</xsl:when>
+ <!-- FIXME delete this style -->
<xsl:when test="contains($style, ' norwich ')">
<xsl:call-template name="_mal2html.links.norwich">
<xsl:with-param name="node" select="$node"/>
@@ -1236,6 +1247,89 @@ when determining which links to output.
</xsl:template>
+<!--#* _mal2html.links.experimental_gnome_tiles -->
+<xsl:template name="_mal2html.links.experimental_gnome_tiles">
+ <xsl:param name="node" select="."/>
+ <xsl:param name="links"/>
+ <xsl:param name="role"/>
+ <div class="tiles">
+ <xsl:for-each select="$links">
+ <xsl:sort data-type="number" select="@groupsort"/>
+ <xsl:sort select="mal:title[@type = 'sort']"/>
+ <xsl:variable name="link" select="."/>
+ <xsl:for-each select="$mal.cache">
+ <xsl:variable name="target" select="key('mal.cache.key', $link/@xref)"/>
+ <div class="tile3 {$link/@class}">
+ <xsl:for-each select="$link/@*">
+ <xsl:if test="starts-with(name(.), 'data-')">
+ <xsl:copy-of select="."/>
+ </xsl:if>
+ </xsl:for-each>
+ <xsl:variable name="infos" select="$target/mal:info | $link[@href]/mal:info"/>
+ <xsl:variable name="thumbs" select="$infos/uix:thumb[@role='experimental-gnome-tiles']"/>
+ <a class="ex-gnome-tile">
+ <xsl:attribute name="href">
+ <xsl:call-template name="mal.link.target">
+ <xsl:with-param name="node" select="$node"/>
+ <xsl:with-param name="xref" select="$link/@xref"/>
+ <xsl:with-param name="href" select="$link/@href"/>
+ </xsl:call-template>
+ </xsl:attribute>
+ <xsl:attribute name="title">
+ <xsl:call-template name="mal.link.tooltip">
+ <xsl:with-param name="node" select="$node"/>
+ <xsl:with-param name="xref" select="$link/@xref"/>
+ <xsl:with-param name="href" select="$link/@href"/>
+ <xsl:with-param name="role" select="$role"/>
+ <xsl:with-param name="info" select="$link[@href]/mal:info"/>
+ </xsl:call-template>
+ </xsl:attribute>
+ <span class="ex-gnome-tile-banner">
+ <xsl:call-template name="mal2html.ui.links.img">
+ <xsl:with-param name="node" select="$node"/>
+ <xsl:with-param name="thumbs" select="$thumbs"/>
+ <xsl:with-param name="role" select="$role"/>
+ <xsl:with-param name="height" select="128"/>
+ </xsl:call-template>
+ </span>
+ <span class="ex-gnome-tile-title">
+ <xsl:call-template name="mal.link.content">
+ <xsl:with-param name="node" select="$node"/>
+ <xsl:with-param name="xref" select="$link/@xref"/>
+ <xsl:with-param name="href" select="$link/@href"/>
+ <xsl:with-param name="role" select="$role"/>
+ <xsl:with-param name="info" select="$link[@href]/mal:info"/>
+ </xsl:call-template>
+ </span>
+ <xsl:if test="not(contains(concat(' ', $node/@style, ' '), ' nodesc '))">
+ <xsl:variable name="desc">
+ <xsl:call-template name="mal.link.desc">
+ <xsl:with-param name="node" select="$node"/>
+ <xsl:with-param name="xref" select="$link/@xref"/>
+ <xsl:with-param name="href" select="$link/@href"/>
+ <xsl:with-param name="role" select="$role"/>
+ <xsl:with-param name="info" select="$link[@href]/mal:info"/>
+ </xsl:call-template>
+ </xsl:variable>
+ <xsl:variable name="desc_" select="exsl:node-set($desc)/node()"/>
+ <xsl:if test="$desc_">
+ <span class="ex-gnome-tile-desc">
+ <xsl:apply-templates mode="_mal2html.links.divs.nolink.mode"
+ select="$desc_"/>
+ </span>
+ </xsl:if>
+ </xsl:if>
+ </a>
+ </div>
+ </xsl:for-each>
+ </xsl:for-each>
+ <!-- blank tiles for homogeneous sizing -->
+ <div class="links-tile"></div>
+ <div class="links-tile"></div>
+ </div>
+</xsl:template>
+
+
<!--#* _mal2html.links.divs -->
<xsl:template name="_mal2html.links.divs">
<xsl:param name="node" select="."/>
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
