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.

8 files changed, 238 insertions, 0 deletions

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="."/>