Help with icons

[Massimo Di Pierro]

In the old days of BS2 we used "icon icon-{name}" for icons. then to support BS3 we also added "glyphicon glyphicon-{name}". now we use BS4 and there are no more icons we have to use Font Awesome so we should add "fa fa-{name}". I can easily add this to sqlhtml.py and we will all be fine but we will have a proliferation of classes. Another option is to use define .icon and .icon-{name} for those classes that we use in the grid in terms of font awesome icons and add them to web2py-bootstrap4.css.

Preferences?

[tim.n...@conted.ox.ac.uk]

Since I use fa icons all over the place, and do a fair bit of styling on top of the w2p css, I'd sooner see 'fa fa-{name}' rules.  Not as clean as .icon, I admit, but it makes it easier for global rules to affect the grid.

Is it possible to pass a dict of custom icon class strings to the grid, so 'icon icon-plus' is the default, but can be replaced by 'fa fa-plus'?

[tim.n...@conted.ox.ac.uk]

Answered my own question: SQLFORM.grid(ui={...})

So either solution is fine.

[Richard Vézina]

Hello Massimo,

Whit font-awesome 3.2.1 it was drop in replace, sadly they change their way how to hook icons... 

I think we should suggest to pass them more than include them in the core code there is these settings for instance which is good :

        # jQuery UI ThemeRoller classes (empty if ui is disabled)

        if ui == 'jquery-ui':

            ui = dict(widget='ui-widget',

                      header='ui-widget-header',

                      content='ui-widget-content',

                      default='ui-state-default',

                      cornerall='ui-corner-all',

                      cornertop='ui-corner-top',

                      cornerbottom='ui-corner-bottom',

                      button='ui-button-text-icon-primary',

                      buttontext='ui-button-text',

                      buttonadd='ui-icon ui-icon-plusthick',

                      buttonback='ui-icon ui-icon-arrowreturnthick-1-w',

                      buttonexport='ui-icon ui-icon-transferthick-e-w',

                      buttondelete='ui-icon ui-icon-trash',

                      buttonedit='ui-icon ui-icon-pencil',

                      buttontable='ui-icon ui-icon-triangle-1-e',

                      buttonview='ui-icon ui-icon-zoomin',

                      )

        elif ui == 'web2py':

            ui = dict(widget='',

                      header='',

                      content='',

                      default='',

                      cornerall='',

                      cornertop='',

                      cornerbottom='',

                      button='button btn btn-default',

                      buttontext='buttontext button',

                      buttonadd='icon plus icon-plus glyphicon glyphicon-plus',

                      buttonback='icon leftarrow icon-arrow-left glyphicon glyphicon-arrow-left',

                      buttonexport='icon downarrow icon-download glyphicon glyphicon-download',

                      buttondelete='icon trash icon-trash glyphicon glyphicon-trash',

                      buttonedit='icon pen icon-pencil glyphicon glyphicon-pencil',

                      buttontable='icon rightarrow icon-arrow-right glyphicon glyphicon-arrow-right',

                      buttonview='icon magnifier icon-zoom-in glyphicon glyphicon-zoom-in'

                      )

But I am not sure if it propagate to all the widget properly of if there is a way to customize all different widgets...

We already have glyphicon glyphicon-something... It would make sens to stick with fa fa-something...

Richard

On Sun, Dec 3, 2017 at 12:41 PM, Massimo Di Pierro <massimo....@gmail.com> wrote:

In the old days of BS2 we used "icon icon-{name}" for icons. then to support BS3 we also added "glyphicon glyphicon-{name}". now we use BS4 and there are no more icons we have to use Font Awesome so we should add "fa fa-{name}". I can easily add this to sqlhtml.py and we will all be fine but we will have a proliferation of classes. Another option is to use define .icon and .icon-{name} for those classes that we use in the grid in terms of font awesome icons and add them to web2py-bootstrap4.css.

Preferences?

--
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
---
You received this message because you are subscribed to the Google Groups "web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to web2py+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Richard Vézina]

I don't see much of icon stuff in widget.py and validators.py...

There is also one thing that bug me with custom widget when you want to use bts "add-on" or semantic ui "label" :

$

.00

You have to handle error message that get inserted before the div ui label stuff with js... It would be better that error message get append to field div instead of just below the input field...

Richard

[Richard Vézina]

I think this can be fix in web2py.js .fire() :

        /* Triggers an event on an element and returns false if the event result is false */

        fire: function (obj, type, data, target) {

            var event = $.Event(type, {

                'containerTarget': $('#' + target)[0]

            });

            obj.trigger(event, data);

            return event.result !== false;

        },

But I am not sure how...

[Leonel Câmara]

Web2py is all about having sane defaults that just work. So I think we should have fontawesome integrated by default with the welcome app and in the grid. People who want to use other icons will have to use the ui_dict option in the grid and make their own layout, etc. just as they always had to do. 

[Richard Vézina]

I search further, I think my issue come form html.py 

https://github.com/web2py/web2py/blob/master/gluon/html.py#L1914

It seems where web2py is cooking the rendering of error stuff...

I am not sure how to pass particular class in error context only, so error get handle by semantic ui :

https://semantic-ui.com/collections/form.html

<div class="ui form error"> <div class="field"> <label>E-mail</label> <input type="email" placeholder="j...@schmoe.com"> </div> <div class="ui error message"> <div class="header">Action Forbidden</div> <p>You can only sign up for an account once with a given e-mail address.</p> </div> <div class="ui submit button">Submit</div> </div>

I am not sure what the impact of not having error at form level as web2py doesn't set error class to form... It can be fix with js for sure, but I would rather prefer generate the html in the first place...

I know we want to get away from rendering stuff, but does it means will drop it entirely once we get web3py??

I think having a kind of "progressive" approach and support server side and client side would be more convenient than be force to do everything client side...

Richard

On Mon, Dec 4, 2017 at 2:06 PM, Leonel Câmara <leonel...@gmail.com> wrote:

Web2py is all about having sane defaults that just work. So I think we should have fontawesome integrated by default with the welcome app and in the grid. People who want to use other icons will have to use the ui_dict option in the grid and make their own layout, etc. just as they always had to do. 

--

[Richard Vézina]

Sorry for caniblizing this thread :D