Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Additional options for tags #1

Open
wants to merge 6 commits into
base: master
Choose a base branch
from

Conversation

mrbubblesort
Copy link

I added these options for tags:
bgBox - (true|false) background box on/off
bgBoxPadX - (int) x padding on tag
bgBoxPadY - (int) y padding on tag
bgBoxStroke - (string) outline color for bg box
bgBoxColor - (string) color for bg box
bgBoxRadius - (int) radius of bg box corners

For example, this would make the tags look like a bootstrap labels or buttons (http://getbootstrap.com/components/#labels):
$('#tag-canvas').tagcanvas({
'textColour' : '#FFFFFF',
'bgBox': true,
'bgBoxPadX' : 6,
'bgBoxPadY' : 10,
'bgBoxStroke' : "#5BC0DE",
'bgBoxColor' : "#5BC0DE",
'bgBoxRadius' : 5,
});

These options are now available for styling tags:
bgBox - (true|false) background box on/off
bgBoxPadX - (int) x padding on tag
bgBoxPadY - (int) y padding on tag
bgBoxStroke - (string) outline color for bg box
bgBoxColor - (string) color for bg box
bgBoxRadius - (int) radius of bg box corners

For example, this would make the tags look like a bootstrap label (http://getbootstrap.com/components/#labels): 
$('#tag-canvas').tagcanvas({
   'textColour' : '#FFFFFF',
   'bgBox': true,
   'bgBoxPadX' : 6,
   'bgBoxPadY' : 10,
   'bgBoxStroke' : "#5BC0DE",
   'bgBoxColor' : "#5BC0DE",
   'bgBoxRadius' : 5,
});
@nurikabe
Copy link

+1 to make it easier to use with Bootstrap. Nice to see this library in GitHub.

@goat1000
Copy link
Owner

I've had a quick look over this, and found a couple of minor problems:

  1. The padding and radius options don't take into account the "txtScale" value - this is easy to fix in the Tproto.Measure function by multiplying (like s * this.height and s * t.shadowBlur).
  2. With the "outlineMethod" set to "colour", the whole tag is opaque in the outline colour, so you can't read it. Not sure if there is an easy fix for this.
  3. Not really a problem, but "bgBoxColor" for the option name when I've spelled the other options "textColour" and "outlineColour" could cause confusion.

Otherwise, it looks good.

@mrbubblesort
Copy link
Author

OK, no problem. I'll try to get that in this week then. Thanks for the input.

@nurikabe
Copy link

Bump

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants