From 409bcd18707bb4ab41856cc4e247606bb2d40c51 Mon Sep 17 00:00:00 2001
From: Danial <RedSparr0w@users.noreply.github.com>
Date: Sat, 28 Jul 2018 16:35:24 +1200
Subject: [PATCH] Add logo style badges - popout, popout-square (#1478)
* add logo style badges
add new styles:
- flat-logo
- flat-square-logo
* rename flat-logo -> popout
flat-logo -> popout
flat-square-logo -> popout-square
* default centered, add logoAlign param
* fix test
* logoAlign -> logoPosition
* reverse logoPosition direction
* fixup
---
lib/badge-data.js | 1 +
lib/badge-data.spec.js | 2 ++
lib/export-supported-features-cli.js | 2 ++
lib/make-badge.js | 10 ++++++++
lib/request-handler.js | 1 +
templates/popout-square-template.svg | 23 +++++++++++++++++
templates/popout-template.svg | 37 ++++++++++++++++++++++++++++
7 files changed, 76 insertions(+)
create mode 100644 templates/popout-square-template.svg
create mode 100644 templates/popout-template.svg
diff --git a/lib/badge-data.js b/lib/badge-data.js
index 7fd8ef5fe2..8c72bbb393 100644
--- a/lib/badge-data.js
+++ b/lib/badge-data.js
@@ -105,6 +105,7 @@ function makeBadgeData(defaultLabel, overrides) {
colorscheme: 'lightgrey',
template: overrides.style,
logo: makeLogo(undefined, overrides),
+ logoPosition: +overrides.logoPosition,
logoWidth: +overrides.logoWidth,
links: toArray(overrides.link),
colorA: makeColor(overrides.colorA),
diff --git a/lib/badge-data.spec.js b/lib/badge-data.spec.js
index 518ed7e7c5..6cdf3fb9c7 100644
--- a/lib/badge-data.spec.js
+++ b/lib/badge-data.spec.js
@@ -67,6 +67,7 @@ describe('Badge data helpers', function() {
label: 'no, my badge',
style: 'flat-square',
logo: 'image/svg+xml;base64,PHN2ZyB4bWxu',
+ logoPosition: 10,
logoWidth: '25',
link: 'https://example.com/',
colorA: 'blue',
@@ -76,6 +77,7 @@ describe('Badge data helpers', function() {
colorscheme: 'lightgrey',
template: 'flat-square',
logo: 'data:image/svg+xml;base64,PHN2ZyB4bWxu',
+ logoPosition: 10,
logoWidth: 25,
links: ['https://example.com/'],
colorA: 'blue',
diff --git a/lib/export-supported-features-cli.js b/lib/export-supported-features-cli.js
index bed3cc0efd..7757412239 100644
--- a/lib/export-supported-features-cli.js
+++ b/lib/export-supported-features-cli.js
@@ -12,6 +12,8 @@ const supportedFeatures = {
'flat',
'flat-square',
'for-the-badge',
+ 'popout',
+ 'popout-square',
'social',
],
};
diff --git a/lib/make-badge.js b/lib/make-badge.js
index a0b625d83b..dfe43523ab 100644
--- a/lib/make-badge.js
+++ b/lib/make-badge.js
@@ -109,6 +109,7 @@ function makeBadge (measurer, {
colorA,
colorB,
logo,
+ logoPosition,
logoWidth,
links = ['', ''],
}) {
@@ -122,6 +123,14 @@ function makeBadge (measurer, {
if (!(`${template}-${format}` in templates)) {
template = format === 'svg' ? 'flat' : 'default';
}
+ if (template.startsWith('popout')) {
+ if (logo){
+ logoPosition = (logoPosition <= 10 && logoPosition >= -10) ? logoPosition : 0;
+ logoWidth = +logoWidth || 32;
+ } else {
+ template = template.replace('popout', 'flat');
+ }
+ }
if (template === 'social') {
text[0] = capitalize(text[0]);
} else if (template === 'for-the-badge') {
@@ -164,6 +173,7 @@ function makeBadge (measurer, {
],
links: links.map(escapeXml),
logo,
+ logoPosition,
logoWidth,
logoPadding,
colorA,
diff --git a/lib/request-handler.js b/lib/request-handler.js
index d4bc0964e0..998d80e569 100644
--- a/lib/request-handler.js
+++ b/lib/request-handler.js
@@ -40,6 +40,7 @@ const globalQueryParams = new Set([
'style',
'link',
'logo',
+ 'logoPosition',
'logoWidth',
'link',
'colorA',
diff --git a/templates/popout-square-template.svg b/templates/popout-square-template.svg
new file mode 100644
index 0000000000..c6767fdb81
--- /dev/null
+++ b/templates/popout-square-template.svg
@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="{{=it.widths[0]+it.widths[1]}}" height="40">
+ <g shape-rendering="crispEdges">
+ <rect width="{{=it.widths[0]}}" y="{{=10-it.logoPosition}}" height="20" fill="{{=it.escapeXml(it.colorA||"#555")}}"/>
+ <rect x="{{=it.widths[0]}}" y="{{=10-it.logoPosition}}" width="{{=it.widths[1]}}" height="20" fill="{{=it.escapeXml(it.colorB||"#4c1")}}"/>
+ </g>
+ <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="110">
+ {{?it.logo}}
+ <image x="5" y="3" width="{{=it.logoWidth}}" height="32" xlink:href="{{=it.logo}}"/>
+ {{?}}
+ <text x="{{=(((it.widths[0]+it.logoWidth+it.logoPadding)/2)+1)*10}}" y="{{=(24-it.logoPosition)*10}}" transform="scale(0.1)" textLength="{{=(it.widths[0]-(10+it.logoWidth+it.logoPadding))*10}}" lengthAdjust="spacing">{{=it.escapedText[0]}}</text>
+ <text x="{{=(it.widths[0]+it.widths[1]/2-1)*10}}" y="{{=(24-it.logoPosition)*10}}" transform="scale(0.1)" textLength="{{=(it.widths[1]-10)*10}}" lengthAdjust="spacing">{{=it.escapedText[1]}}</text>
+ </g>
+ {{?(it.links[0] && it.links[0].length)}}
+ <a xlink:href="{{=it.links[0]}}">
+ <rect width="{{=it.widths[0]}}" height="40" fill="rgba(0,0,0,0)"/>
+ </a>
+ {{?}}
+ {{?(it.links[0] && it.links[0].length || it.links[1] && it.links[1].length)}}
+ <a xlink:href="{{=it.links[1] || it.links[0]}}">
+ <rect x="{{=it.widths[0]}}" width="{{=it.widths[1]}}" height="40" fill="rgba(0,0,0,0)"/>
+ </a>
+ {{?}}
+</svg>
diff --git a/templates/popout-template.svg b/templates/popout-template.svg
new file mode 100644
index 0000000000..98afc58960
--- /dev/null
+++ b/templates/popout-template.svg
@@ -0,0 +1,37 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="{{=it.widths[0]+it.widths[1]}}" height="40">
+ <linearGradient id="smooth" x2="0" y2="100%">
+ <stop offset="0" stop-color="#bbb" stop-opacity=".1"/>
+ <stop offset="1" stop-opacity=".1"/>
+ </linearGradient>
+
+ <clipPath id="round">
+ <rect width="{{=it.widths[0]+it.widths[1]}}" y="{{=10-it.logoPosition}}" height="20" rx="3" fill="#fff"/>
+ </clipPath>
+
+ <g clip-path="url(#round)">
+ <rect width="{{=it.widths[0]}}" y="{{=10-it.logoPosition}}" height="20" fill="{{=it.escapeXml(it.colorA||"#555")}}"/>
+ <rect x="{{=it.widths[0]}}" y="{{=10-it.logoPosition}}" width="{{=it.widths[1]}}" height="20" fill="{{=it.escapeXml(it.colorB||"#4c1")}}"/>
+ <rect width="{{=it.widths[0]+it.widths[1]}}" y="{{=10-it.logoPosition}}" height="20" fill="url(#smooth)"/>
+ </g>
+
+ <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="110">
+ {{?it.logo}}
+ <image x="5" y="3" width="{{=it.logoWidth}}" height="32" xlink:href="{{=it.logo}}"/>
+ {{?}}
+ <text x="{{=(((it.widths[0]+it.logoWidth+it.logoPadding)/2)+1)*10}}" y="{{=(25-it.logoPosition)*10}}" fill="#010101" fill-opacity=".3" transform="scale(0.1)" textLength="{{=(it.widths[0]-(10+it.logoWidth+it.logoPadding))*10}}" lengthAdjust="spacing">{{=it.escapedText[0]}}</text>
+ <text x="{{=(((it.widths[0]+it.logoWidth+it.logoPadding)/2)+1)*10}}" y="{{=(24-it.logoPosition)*10}}" transform="scale(0.1)" textLength="{{=(it.widths[0]-(10+it.logoWidth+it.logoPadding))*10}}" lengthAdjust="spacing">{{=it.escapedText[0]}}</text>
+ <text x="{{=(it.widths[0]+it.widths[1]/2-1)*10}}" y="{{=(25-it.logoPosition)*10}}" fill="#010101" fill-opacity=".3" transform="scale(0.1)" textLength="{{=(it.widths[1]-10)*10}}" lengthAdjust="spacing">{{=it.escapedText[1]}}</text>
+ <text x="{{=(it.widths[0]+it.widths[1]/2-1)*10}}" y="{{=(24-it.logoPosition)*10}}" transform="scale(0.1)" textLength="{{=(it.widths[1]-10)*10}}" lengthAdjust="spacing">{{=it.escapedText[1]}}</text>
+ </g>
+
+ {{?(it.links[0] && it.links[0].length)}}
+ <a xlink:href="{{=it.links[0]}}">
+ <rect width="{{=it.widths[0]}}" height="40" fill="rgba(0,0,0,0)"/>
+ </a>
+ {{?}}
+ {{?(it.links[0] && it.links[0].length || it.links[1] && it.links[1].length)}}
+ <a xlink:href="{{=it.links[1] || it.links[0]}}">
+ <rect x="{{=it.widths[0]}}" width="{{=it.widths[1]}}" height="40" fill="rgba(0,0,0,0)"/>
+ </a>
+ {{?}}
+</svg>
--
GitLab