diff options
author | Shaun McCance <shaunm@redhat.com> | 2021-02-09 19:27:51 -0500 |
---|---|---|
committer | Shaun McCance <shaunm@redhat.com> | 2021-02-09 19:27:51 -0500 |
commit | 863ebf4cbc776498e84d51d4bd81742242287756 (patch) | |
tree | 154659cbb95f3c3a19753d8b7f2fe2614921285d | |
parent | 8be1ec6600a28f5b0892bbe04c43ec870158b0a6 (diff) | |
download | yelp-xsl-863ebf4cbc776498e84d51d4bd81742242287756.tar.gz |
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.
-rw-r--r-- | test/mallard/source/banner-help.svg | 82 | ||||
-rw-r--r-- | test/mallard/source/credit1.page | 1 | ||||
-rw-r--r-- | test/mallard/source/index.page | 4 | ||||
-rw-r--r-- | test/mallard/source/note1.page | 1 | ||||
-rw-r--r-- | test/mallard/source/task1.page | 1 | ||||
-rw-r--r-- | xslt/common/css/core.css.tmpl | 21 | ||||
-rw-r--r-- | xslt/common/css/mallard.css.tmpl | 34 | ||||
-rw-r--r-- | xslt/mallard/html/mal2html-links.xsl | 94 |
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="."/> |