Minor suggestion for status badges - include branch name in SVG

Nathanael Jones's Avatar

Nathanael Jones

23 Nov, 2014 11:09 PM

Status badges are great, but adding one for each popular branch can get tedious (and is very ugly, due to vertical alignment).

Waffle allows users to customize the SVG text contents:
https://badge.waffle.io/imazen/resizer.png?label=ready&title=Is...

Looking at the SVG source for two different 'title' values, I saw that only x and width attributes were changing, along with the text itself. I assume a fixed-character-width calculation is used, as the container does not grow perfectly with the text size.

I feel slightly bad for even suggesting something this minor, but it would make it easier to display a compact row of branch status badges.

  1. Support Staff 1 Posted by Feodor Fitsner on 25 Nov, 2014 02:58 AM

    Feodor Fitsner's Avatar

    I've been thinking about using GDI.

    -Feodor

  2. 2 Posted by Nathanael Jones on 25 Nov, 2014 10:30 AM

    Nathanael Jones's Avatar

    GDI+ on the server is nasty. Many operations create a process-wide lock. In particular, the text rendering support is very poor. ImageResizer is moving away from GDI+ as soon as possible.

    Are there particular issues with using SVG? Browser support is great.

  3. Support Staff 3 Posted by Feodor Fitsner on 25 Nov, 2014 02:43 PM

    Feodor Fitsner's Avatar

    I mean how would you calculate total width of SVG image then?

    -Feodor

  4. Support Staff 4 Posted by Feodor Fitsner on 25 Nov, 2014 02:49 PM

    Feodor Fitsner's Avatar

    Ah, I see it's fixed character width.

    -Feodor

  5. Support Staff 5 Posted by Feodor Fitsner on 25 Nov, 2014 11:25 PM

    Feodor Fitsner's Avatar

    OK, did so you can specify any text for failing, success and pending statuses. Looks like attached.

    Will deploy later today.

  6. 6 Posted by Nathanael Jones on 26 Nov, 2014 02:49 PM

    Nathanael Jones's Avatar

    Fantastic! What are the querystring keys?

  7. Support Staff 7 Posted by Feodor Fitsner on 26 Nov, 2014 05:56 PM

    Feodor Fitsner's Avatar

    Sure, it's passingText, failingText and pendingText parameters.

    For example: https://ci.appveyor.com/api/projects/status/jv0bm93plpu8gbqa?svg=tr...

    Works for SVG only (for now).

  8. 8 Posted by Mickey Rose on 07 Feb, 2016 12:17 PM

    Mickey Rose's Avatar

    Could you also make the buildText on grey background customizable, please?
    - e.g. by default badge is {<icon> build | passing} - when I use passingText=branch:ok, badge is {<icon>| branch:ok} - I'd like to use buildText=branch&passingText=ok, and get {<icon> branch | ok}

  9. Ilya Finkelshteyn closed this discussion on 25 Aug, 2018 02:04 AM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac