NetTalk Central

Author Topic: Bootstrap button icons  (Read 8123 times)

Jane

  • Sr. Member
  • ****
  • Posts: 347
  • Expert on nothing with opinions on everything.
    • View Profile
    • Email
Bootstrap button icons
« on: July 22, 2018, 05:27:16 PM »
Tell me there's an easy way to do this, please...

For whatever reason, I've wanted to use some bootstrap stuff in an NT app.

Some items are fairly straightforward.

But the standard way of putting icons on buttons is

  • in BS 3 - put a span before the button text with its contents something like
    span class="glyphicon glyphicon-pencil"
  • in BS4 the convention seems to be to use an <i> tag rather than a span.  And since glyphicons are no longer supplied, using another image font such as FontAwesome:
    i class="fas fa-pencil-alt"

This requires putting some HTML right before the button text, rather than just adding a class.

I haven't found a way to make this happen other than carving on a copy of netweb.clw to make TextValue longer and to hard-code around the self.translate(p_text) for anything to do with glyphicons or fontawesome tags. 

And then to kludge around the template-generated code so that the TextValue doesn't go through p_web.Translate before it gets to the button code.

It would seem that having an embed that allows XHTML for the button text would allow inserting the span or the <i>... or is there a way to do this that I'm missing?

Pics are what I've been playing with (only the edit/delete buttons, not the EIP):




bshields

  • Sr. Member
  • ****
  • Posts: 392
    • View Profile
    • Inhabit
    • Email
Re: Bootstrap button icons
« Reply #1 on: July 22, 2018, 08:38:17 PM »
Hi Jane,

I agree. I use FontAwesome extensively in my apps.

I've done exactly what you've suggested by modifying the template to support XHTML in the button name.

Regards
Bill

Jane

  • Sr. Member
  • ****
  • Posts: 347
  • Expert on nothing with opinions on everything.
    • View Profile
    • Email
Re: Bootstrap button icons
« Reply #2 on: July 22, 2018, 08:56:57 PM »
Guess that answers my question as to whether there's an easier way... as I'm thinking you'd have found it if there were.  8)

Thanks, Bill!

Jane

Bruce

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 11155
    • View Profile
Re: Bootstrap button icons
« Reply #3 on: July 23, 2018, 08:54:14 PM »
so, if I understand correctly;

given the current generated code;

<button type="button" name="change_btn" id="change_btnI5wf" value="" class="nt-change-button nt-small-button ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" title="Click here to Change this record" data-do="change" role="button" aria-disabled="false">
    <span class="ui-button-icon-primary ui-icon ui-icon-pencil"></span>
    <span class="ui-button-text">Hello</span>
</button>

You want to change this to...

<button type="button" name="change_btn" id="change_btnI5wf" value="" class="nt-change-button nt-small-button ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" title="Click here to Change this record" data-do="change" role="button" aria-disabled="false">
    something else here?
    <span class="ui-button-text">Hello</span>
</button>


Is that right?

Bruce

Bruce

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 11155
    • View Profile
Re: Bootstrap button icons
« Reply #4 on: July 23, 2018, 08:54:54 PM »
Or are you really just asking "how can I use Font Awesome on a button?"

bshields

  • Sr. Member
  • ****
  • Posts: 392
    • View Profile
    • Inhabit
    • Email
Re: Bootstrap button icons
« Reply #5 on: July 23, 2018, 09:20:51 PM »
Hi Bruce,

From my point of view, yes.

I need to place something like:


1
<button type="button" name="change_btn" id="change_btnI5wf" value="" class="nt-change-button nt-small-button ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" title="Click here to Change this record" data-do="change" role="button" aria-disabled="false">
    <i class="fab fa-500px"></i>
    <span class="ui-button-text">Hello</span>
</button>


This also works:


2
<button type="button" name="change_btn" id="change_btnI5wf" value="" class="nt-change-button nt-small-button ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" title="Click here to Change this record" data-do="change" role="button" aria-disabled="false">
    <span class="ui-button-text"><i class="fab fa-500px"></i> Hello</span>
</button>


I might also require:


3
<button type="button" name="change_btn" id="change_btnI5wf" value="" class="nt-change-button nt-small-button ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" title="Click here to Change this record" data-do="change" role="button" aria-disabled="false">
    <i class="fab fa-500px anotherstyle"></i>
    <span class="ui-button-text">Hello</span>
</button>


So I can control icon size.

#2 is probably the preference as the icon will pickup any font-size,colour,background,etc specified by ui-button-text. But that styling could be moved to the button tag in any event.

Regards
Bill


Jane

  • Sr. Member
  • ****
  • Posts: 347
  • Expert on nothing with opinions on everything.
    • View Profile
    • Email
Re: Bootstrap button icons
« Reply #6 on: July 24, 2018, 07:37:35 AM »
Bruce,

I haven't experimented as much as Bill apparently has. 
My testing-hack had the same result as his #2 code.  When that worked, I didn't try any variants.

If it's possible, that would be awesome ;-)

Jane

Bruce

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 11155
    • View Profile
Re: Bootstrap button icons
« Reply #7 on: July 30, 2018, 10:00:20 PM »
I think it's possible by embedding in WebHandler, in CreateButton method [1] after the parent call.

So by embedding after the parent call you can take what is returned by CreateButton, inject your code into it, and then return that. If you use StringTheory it should be pretty easy to do this. (Let me know if you need ideas, but I'm thinking about the INSTRING and INSERT methods here.)

[1] there are a number of button creation methods. you may find it more convenient to embed in CreateStdButton so you know the "type" of the button (passed in p_equate parameter.)

If you need more, just shout.

cheers
Bruce

Robert Iliuta

  • Sr. Member
  • ****
  • Posts: 469
    • View Profile
    • Email
Re: Bootstrap button icons
« Reply #8 on: August 20, 2018, 10:16:10 PM »
Hallo Bruce!

I try something in WebHandler but it not works...

This is the return value after parent call
ReturnValue = <button type="button" name="PrinteazaC" id="PrinteazaCAkB6" value="Printeaza"   data-do="bserver" data-form="b_transferuri">Printeaza</button>

Now what and where to insert my code: <i class="fas fa-print"></i>

Thank you!
Robert

Bruce

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 11155
    • View Profile
Re: Bootstrap button icons
« Reply #9 on: August 20, 2018, 10:47:10 PM »
what HTML code do you want to end up with?

Robert Iliuta

  • Sr. Member
  • ****
  • Posts: 469
    • View Profile
    • Email
Re: Bootstrap button icons
« Reply #10 on: August 20, 2018, 10:56:27 PM »
This is the code: <i class="fas fa-print"></i>

Bruce

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 11155
    • View Profile
Re: Bootstrap button icons
« Reply #11 on: August 22, 2018, 06:32:39 AM »
yes, I know that's the code you want to inject.
But mixing that with the generated code - what do you want to be left with?

It's impossible to answer you question of what to do, because I don't know what you want to do...

Cheers
Bruce

bshields

  • Sr. Member
  • ****
  • Posts: 392
    • View Profile
    • Inhabit
    • Email
Re: Bootstrap button icons
« Reply #12 on: August 22, 2018, 06:57:19 AM »
My crystal ball suggests:

ReturnValue = <button type="button" name="PrinteazaC" id="PrinteazaCAkB6" value="Printeaza"   data-do="bserver" data-form="b_transferuri"><i class="fas fa-print"></i>
 Printeaza</button>

Bruce

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 11155
    • View Profile
Re: Bootstrap button icons
« Reply #13 on: August 23, 2018, 02:49:55 AM »
str.SetValue(clip(ReturnValue))
i = str.instring('Printeaza')
str.Insert(i,'<i class="fas fa-print">')
ReturnValue = str.GetValue()

Robert Iliuta

  • Sr. Member
  • ****
  • Posts: 469
    • View Profile
    • Email
Re: Bootstrap button icons
« Reply #14 on: February 27, 2019, 12:23:00 AM »
Hallo Bruce!

I have a lot of buttons in "WebHandler, in CreateButton method [1] after the parent call" ... but it's very hard to add there every button you need to change/add icons.
It could be more easy to have another field on the button tab where we can add our style like Bill mentioned:

1
<button type="button" name="change_btn" id="change_btnI5wf" value="" class="nt-change-button nt-small-button ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" title="Click here to Change this record" data-do="change" role="button" aria-disabled="false">
    <i class="fab fa-500px"></i>
    <span class="ui-button-text">Hello</span>
</button>


OR (much better)

to add xHTML support in the button name :-)

The point is that if we can add this piece of code "<i class="fab fa-500px"></i>" before the name of the button it will be great.

Thank you!
Robert
« Last Edit: February 27, 2019, 12:25:15 AM by Robert Iliuta »