ComputerSurge/shields
3
0
Fork 0
Code Pull Requests 1 Activity

Hide left hand of badge if no label (#1585)

Browse Source 
* hide left side if no text

* fix whitespace at start of template

* for-the-badge done

* center text

* add logo support

* update snapshot test

* make first - in static badge optional

* add no label support to non static badges

* Add test for label

* update to not allow use of false/0/null

* fixup
This commit is contained in:
Danial
2018-07-27 08:27:32 +12:00
committed by GitHub
parent bbfd75a203
commit b216bcc17e
8 changed files with 34 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
lib/badge-data.js
View File

@@ -66,7 +66,7 @@ function setBadgeColor(badgeData, color) {
}
function makeLabel(defaultLabel, overrides) {
return overrides.label || defaultLabel;
return '' + (overrides.label === undefined ? defaultLabel || '' : overrides.label);
}
function makeLogo(defaultNamedLogo, overrides) {

3
lib/badge-data.spec.js
View File

@@ -42,6 +42,9 @@ describe('Badge data helpers', function() {
test(makeLabel, () => {
given('my badge', {}).expect('my badge');
given('my badge', { label: 'no, my badge' }).expect('no, my badge');
given('my badge', { label: false }).expect('false');
given('my badge', { label: 0 }).expect('0');
given('my badge', { label: '' }).expect('');
});
test(makeLogo, () => {

2
server.js
View File

@@ -7808,7 +7808,7 @@ cache(function(data, match, sendBadge, request) {
}));
// Any badge.
camp.route(/^\/(:|badge\/)(([^-]|--)*?)-(([^-]|--)*)-(([^-]|--)+)\.(svg|png|gif|jpg)$/,
camp.route(/^\/(:|badge\/)(([^-]|--)*?)-?(([^-]|--)*)-(([^-]|--)+)\.(svg|png|gif|jpg)$/,
function(data, match, end, ask) {
var subject = escapeFormat(match[2]);
var status = escapeFormat(match[4]);

8
templates/flat-square-template.svg
View File

@@ -1,14 +1,16 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="{{=it.widths[0]+it.widths[1]}}" height="20">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="{{=(it.widths[0] -= it.text[0].length ? 0 : (it.logo ? 8 : 11))+it.widths[1]}}" height="20">
<g shape-rendering="crispEdges">
<rect width="{{=it.widths[0]}}" height="20" fill="{{=it.escapeXml(it.colorA||"#555")}}"/>
<rect width="{{=it.widths[0]}}" height="20" fill="{{=it.escapeXml(it.text[0].length ? (it.colorA||"#555") : (it.colorB||"#4c1"))}}"/>
<rect x="{{=it.widths[0]}}" 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="14" xlink:href="{{=it.logo}}"/>
{{?}}
{{?it.text[0].length}}
<text x="{{=(((it.widths[0]+it.logoWidth+it.logoPadding)/2)+1)*10}}" y="140" 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="140" 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-(it.text[0].length ? 1 : 0 ))*10}}" y="140" 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 target="_blank" xlink:href="{{=it.links[0]}}">
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

10
templates/flat-template.svg
View File

@@ -1,4 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="{{=it.widths[0]+it.widths[1]}}" height="20">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="{{=(it.widths[0] -= it.text[0].length ? 0 : (it.logo ? 8 : 11))+it.widths[1]}}" height="20">
<linearGradient id="smooth" x2="0" y2="100%">
<stop offset="0" stop-color="#bbb" stop-opacity=".1"/>
<stop offset="1" stop-opacity=".1"/>
@@ -9,7 +9,7 @@
</clipPath>
<g clip-path="url(#round)">
<rect width="{{=it.widths[0]}}" height="20" fill="{{=it.escapeXml(it.colorA||"#555")}}"/>
<rect width="{{=it.widths[0]}}" height="20" fill="{{=it.escapeXml(it.text[0].length ? (it.colorA||"#555") : (it.colorB||"#4c1"))}}"/>
<rect x="{{=it.widths[0]}}" width="{{=it.widths[1]}}" height="20" fill="{{=it.escapeXml(it.colorB||"#4c1")}}"/>
<rect width="{{=it.widths[0]+it.widths[1]}}" height="20" fill="url(#smooth)"/>
</g>
@@ -18,10 +18,12 @@
{{?it.logo}}
<image x="5" y="3" width="{{=it.logoWidth}}" height="14" xlink:href="{{=it.logo}}"/>
{{?}}
{{?it.text[0].length}}
<text x="{{=(((it.widths[0]+it.logoWidth+it.logoPadding)/2)+1)*10}}" y="150" 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="140" 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="150" 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="140" 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-(it.text[0].length ? 1 : 0 ))*10}}" y="150" 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-(it.text[0].length ? 1 : 0 ))*10}}" y="140" transform="scale(0.1)" textLength="{{=(it.widths[1]-10)*10}}" lengthAdjust="spacing">{{=it.escapedText[1]}}</text>
</g>
{{?(it.links[0] && it.links[0].length)}}
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

8
templates/for-the-badge-template.svg
View File

@@ -1,16 +1,18 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="{{=(it.widths[0]+=(10+(it.text[0].length*1.5)))+(it.widths[1]+=(10+(it.text[1].length*2)))}}" height="28">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="{{=(it.widths[0] -= it.text[0].length ? -(10+(it.text[0].length*1.5)) : (it.logo ? 8 : 11))+(it.widths[1]+=(10+(it.text[1].length*2)))}}" height="28">
<g shape-rendering="crispEdges">
<rect width="{{=it.widths[0]}}" height="28" fill="{{=it.escapeXml(it.colorA||"#555")}}"/>
<rect width="{{=it.widths[0]}}" height="28" fill="{{=it.escapeXml(it.text[0].length ? (it.colorA||"#555") : (it.colorB||"#4c1"))}}"/>
<rect x="{{=it.widths[0]}}" width="{{=it.widths[1]}}" height="28" fill="{{=it.escapeXml(it.colorB||"#4c1")}}"/>
</g>
<g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="100">
{{?it.logo}}
<image x="9" y="7" width="{{=it.logoWidth}}" height="14" xlink:href="{{=it.logo}}"/>
{{?}}
{{?it.text[0].length}}
<text x="{{=((it.widths[0]+it.logoWidth+it.logoPadding)/2)*10}}" y="175" transform="scale(0.1)" textLength="{{=(it.widths[0]-(24+it.logoWidth+it.logoPadding))*10}}" lengthAdjust="spacing">{{=it.escapedText[0]}}</text>
{{?}}
<text x="{{=(it.widths[0]+it.widths[1]/2)*10}}" y="175" font-weight="bold" transform="scale(0.1)" textLength="{{=(it.widths[1]-24)*10}}" lengthAdjust="spacing">{{=it.escapedText[1]}}</text>
</g>
{{?(it.links[0] && it.links[0].length)}}
{{?(it.text[0].length && it.links[0] && it.links[0].length)}}
<a target="_blank" xlink:href="{{=it.links[0]}}">
<rect width="{{=it.widths[0]}}" height="28" fill="rgba(0,0,0,0)"/>
</a>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

10
templates/plastic-template.svg
View File

@@ -1,4 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="{{=it.widths[0]+it.widths[1]}}" height="18">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="{{=(it.widths[0] -= it.text[0].length ? 0 : (it.logo ? 8 : 11))+it.widths[1]}}" height="18">
<linearGradient id="smooth" x2="0" y2="100%">
<stop offset="0" stop-color="#fff" stop-opacity=".7"/>
<stop offset=".1" stop-color="#aaa" stop-opacity=".1"/>
@@ -11,7 +11,7 @@
</clipPath>
<g clip-path="url(#round)">
<rect width="{{=it.widths[0]}}" height="18" fill="{{=it.escapeXml(it.colorA||"#555")}}"/>
<rect width="{{=it.widths[0]}}" height="18" fill="{{=it.escapeXml(it.text[0].length ? (it.colorA||"#555") : (it.colorB||"#4c1"))}}"/>
<rect x="{{=it.widths[0]}}" width="{{=it.widths[1]}}" height="18" fill="{{=it.escapeXml(it.colorB||"#4c1")}}"/>
<rect width="{{=it.widths[0]+it.widths[1]}}" height="18" fill="url(#smooth)"/>
</g>
@@ -20,10 +20,12 @@
{{?it.logo}}
<image x="5" y="3" width="{{=it.logoWidth}}" height="14" xlink:href="{{=it.logo}}"/>
{{?}}
{{?it.text[0].length}}
<text x="{{=(((it.widths[0]+it.logoWidth+it.logoPadding)/2)+1)*10}}" y="140" 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="130" 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="140" 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="130" 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-(it.text[0].length ? 1 : 0))*10}}" y="140" 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-(it.text[0].length ? 1 : 0))*10}}" y="130" transform="scale(0.1)" textLength="{{=(it.widths[1]-10)*10}}" lengthAdjust="spacing">{{=it.escapedText[1]}}</text>
</g>
{{?(it.links[0] && it.links[0].length)}}
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB