Quantcast

FontAwesome font icons for qx.Desktop

classic Classic list List threaded Threaded
19 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

FontAwesome font icons for qx.Desktop

SQville
As promised, FontAwesome, font icons for qx.Desktop

Code and steps on getting it set up can be found here:
https://github.com/sqville/sqv

Features:

 - Font icons can be used where ever qx.ui.basic.Image is used (Buttons, Menus, Trees, Tabs, etc)
 - Font icons respond to events just like regular text

A few points to keep in mind:

- I recommend adding sqv to your app as a library

- Not all of the FontAwesome icons are implemented (only the 4 you see on the demo page: http://sqville.com/examples/qxthemes/clean/index.html)

- The example Application class (sqv/source/class/sqv/Application.js) shows you how to use fonticons with the Image and Button widgets.

Let me know how it goes for you :-)

Chris
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: FontAwesome font icons for qx.Desktop

woprandi

Seems to be very clean. Nice job

Le 14 mai 2015 07:20, "SQville" <[hidden email]> a écrit :
As promised, FontAwesome, font icons for qx.Desktop

Code and steps on getting it set up can be found here:
https://github.com/sqville/sqv

Features:

 - Font icons can be used where ever qx.ui.basic.Image is used (Buttons,
Menus, Trees, Tabs, etc)
 - Font icons respond to events just like regular text

A few points to keep in mind:

- I recommend adding sqv to your app as a library

- Not all of the FontAwesome icons are implemented (only the 4 you see on
the demo page: http://sqville.com/examples/qxthemes/clean/index.html)

- The example Application class (sqv/source/class/sqv/Application.js) shows
you how to use fonticons with the Image and Button widgets.

Let me know how it goes for you :-)

Chris



--
View this message in context: http://qooxdoo.678.n2.nabble.com/FontAwesome-font-icons-for-qx-Desktop-tp7587151.html
Sent from the qooxdoo mailing list archive at Nabble.com.

------------------------------------------------------------------------------
One dashboard for servers and applications across Physical-Virtual-Cloud
Widest out-of-the-box monitoring support with 50+ applications
Performance metrics, stats and reports that give you Actionable Insights
Deep dive visibility with transaction tracing using APM Insight.
http://ad.doubleclick.net/ddm/clk/290420510;117567292;y
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

------------------------------------------------------------------------------
One dashboard for servers and applications across Physical-Virtual-Cloud
Widest out-of-the-box monitoring support with 50+ applications
Performance metrics, stats and reports that give you Actionable Insights
Deep dive visibility with transaction tracing using APM Insight.
http://ad.doubleclick.net/ddm/clk/290420510;117567292;y
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: FontAwesome font icons for qx.Desktop

SQville
Thanks.

I forgot to include two important notes.

1. You can easily add icons by adding more decorator entries to the sqv.fonticon.FontAwesome.Decoration.js file, and appearance entries to the sqv.fonticon.FontAwesome.Appearance.js file

2. This would work for any font icon set available, not just FontAwesome. To do that just create a new set of Appearance, Decoration and Font files in the sqv\fonticon folder. Name the new folder and files accordingly

Chris
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: FontAwesome font icons for qx.Desktop

Dietrich Streifert
In reply to this post by SQville
Hi Chris,

Thank you for sharing.

When opening on iPad or iPhone (both iOS8) no Icons are displayed. i'm just seing a black bordered white square.

Regards
Dietrich


> Am 14.05.2015 um 07:19 schrieb SQville <[hidden email]>:
>
> As promised, FontAwesome, font icons for qx.Desktop
>
> Code and steps on getting it set up can be found here:
> https://github.com/sqville/sqv
>
> Features:
>
> - Font icons can be used where ever qx.ui.basic.Image is used (Buttons,
> Menus, Trees, Tabs, etc)
> - Font icons respond to events just like regular text
>
> A few points to keep in mind:
>
> - I recommend adding sqv to your app as a library
>
> - Not all of the FontAwesome icons are implemented (only the 4 you see on
> the demo page: http://sqville.com/examples/qxthemes/clean/index.html)
>
> - The example Application class (sqv/source/class/sqv/Application.js) shows
> you how to use fonticons with the Image and Button widgets.
>
> Let me know how it goes for you :-)
>
> Chris
>
>
>
> --
> View this message in context: http://qooxdoo.678.n2.nabble.com/FontAwesome-font-icons-for-qx-Desktop-tp7587151.html
> Sent from the qooxdoo mailing list archive at Nabble.com.
>
> ------------------------------------------------------------------------------
> One dashboard for servers and applications across Physical-Virtual-Cloud
> Widest out-of-the-box monitoring support with 50+ applications
> Performance metrics, stats and reports that give you Actionable Insights
> Deep dive visibility with transaction tracing using APM Insight.
> http://ad.doubleclick.net/ddm/clk/290420510;117567292;y
> _______________________________________________
> qooxdoo-devel mailing list
> [hidden email]
> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

------------------------------------------------------------------------------
One dashboard for servers and applications across Physical-Virtual-Cloud
Widest out-of-the-box monitoring support with 50+ applications
Performance metrics, stats and reports that give you Actionable Insights
Deep dive visibility with transaction tracing using APM Insight.
http://ad.doubleclick.net/ddm/clk/290420510;117567292;y
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: FontAwesome font icons for qx.Desktop

SQville
Dietrich... that's because this is a qx.Desktop application/solution and not a qx.Moble application/solution

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: FontAwesome font icons for qx.Desktop

Dietrich Streifert
Hi Chris,

Yes I know it's qx.Desktop, but in some situations even qx.Desktop applications are used with tablets like iPad.

Meanwhile I'm not shure what I'm supposed to see if I open your demo link. Here are different screenshots on some browser platforms. I stumbled on the four squares behind the String "FontAwsome Icons:". As I understood the icons should be displayd behind the text. The button with label "Icon Button" should also display an icon. Here is what I'm seeing on different platforms:

Firefox 38.0.1 on Windows 7:


Internet Explorer 11 on Windows 7:


Safari 8 on OS X 10.10.3


Chrome 42 on Windows 7


and finally Spartan on Windows 10 Preview Build 10074:



Am 14.05.2015 um 19:29 schrieb SQville:
Dietrich... that's because this is a *qx.Desktop* application/solution and
not a qx.Moble application/solution





--
View this message in context: http://qooxdoo.678.n2.nabble.com/FontAwesome-font-icons-for-qx-Desktop-tp7587151p7587156.html
Sent from the qooxdoo mailing list archive at Nabble.com.

------------------------------------------------------------------------------
One dashboard for servers and applications across Physical-Virtual-Cloud 
Widest out-of-the-box monitoring support with 50+ applications
Performance metrics, stats and reports that give you Actionable Insights
Deep dive visibility with transaction tracing using APM Insight.
http://ad.doubleclick.net/ddm/clk/290420510;117567292;y
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel


------------------------------------------------------------------------------
One dashboard for servers and applications across Physical-Virtual-Cloud
Widest out-of-the-box monitoring support with 50+ applications
Performance metrics, stats and reports that give you Actionable Insights
Deep dive visibility with transaction tracing using APM Insight.
http://ad.doubleclick.net/ddm/clk/290420510;117567292;y
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: FontAwesome font icons for qx.Desktop

SQville
Thanks for finding this D!! I had the font installed on my Windows 7 machine so i was seeing it even though it wasn't loading the fonts.

My example and my code should be fixed now. I had to change up the architecture a tiny bit due to the fonts not loading using a WebFont entry in the Font.js file: http://qooxdoo.678.n2.nabble.com/Icon-Webfont-disables-every-webfont-td7586259.html

The fix is still a clean way of using font icons in qx.Desktop. I added a "add-css" job to my project's config.json file:

 "common" :
    {
      "add-css" :
          [
          {
          "uri" : "resource/sqv/css/font-awesome.min.css"
          }
          ]
    }

The css file now loads the source font files. I uploaded the font-awesome.min.css file to github. It only has the top @font-face to load all the source files
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: FontAwesome font icons for qx.Desktop

Phyo Arkar
Thats very good , so this team is free of PNGfiles which are tough to theme ?

On Sat, May 16, 2015 at 3:18 AM, SQville <[hidden email]> wrote:
Thanks for finding this D!! I had the font installed on my Windows 7 machine
so i was seeing it even though it wasn't loading the fonts.

My example and my code should be fixed now. I had to change up the
architecture a tiny bit due to the fonts not loading using a WebFont entry
in the Font.js file:
http://qooxdoo.678.n2.nabble.com/Icon-Webfont-disables-every-webfont-td7586259.html

The fix is still a clean way of using font icons in qx.Desktop. I added a
"add-css" job to my project's config.json file:

 "common" :
    {
      "add-css" :
          [
                {
                        "uri" : "resource/sqv/css/font-awesome.min.css"
                }
          ]
    }

The css file now loads the source font files. I uploaded the
font-awesome.min.css file to github. It only has the top @font-face to load
all the source files



--
View this message in context: http://qooxdoo.678.n2.nabble.com/FontAwesome-font-icons-for-qx-Desktop-tp7587151p7587158.html
Sent from the qooxdoo mailing list archive at Nabble.com.

------------------------------------------------------------------------------
One dashboard for servers and applications across Physical-Virtual-Cloud
Widest out-of-the-box monitoring support with 50+ applications
Performance metrics, stats and reports that give you Actionable Insights
Deep dive visibility with transaction tracing using APM Insight.
http://ad.doubleclick.net/ddm/clk/290420510;117567292;y
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel


------------------------------------------------------------------------------
One dashboard for servers and applications across Physical-Virtual-Cloud
Widest out-of-the-box monitoring support with 50+ applications
Performance metrics, stats and reports that give you Actionable Insights
Deep dive visibility with transaction tracing using APM Insight.
http://ad.doubleclick.net/ddm/clk/290420510;117567292;y
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: FontAwesome font icons for qx.Desktop

SQville
The theme can be free of PNG images using this FontAwesome implementation for qx.Desktop, but currently it is not. The folder and file images you see are PNG images. I'll try to produce a roadmap for everything I plan to release in the coming months so the community can plan accordingly
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: FontAwesome font icons for qx.Desktop

Phyo Arkar
thats very good , list your ideas for your theme as issues  so community can contribute too! . I am going to contribute in it.

On Mon, May 18, 2015 at 4:41 PM, SQville <[hidden email]> wrote:
The theme can be free of PNG images using this FontAwesome implementation for
qx.Desktop, but currently it is not. The folder and file images you see are
PNG images. I'll try to produce a roadmap for everything I plan to release
in the coming months so the community can plan accordingly



--
View this message in context: http://qooxdoo.678.n2.nabble.com/FontAwesome-font-icons-for-qx-Desktop-tp7587151p7587163.html
Sent from the qooxdoo mailing list archive at Nabble.com.

------------------------------------------------------------------------------
One dashboard for servers and applications across Physical-Virtual-Cloud
Widest out-of-the-box monitoring support with 50+ applications
Performance metrics, stats and reports that give you Actionable Insights
Deep dive visibility with transaction tracing using APM Insight.
http://ad.doubleclick.net/ddm/clk/290420510;117567292;y
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel


------------------------------------------------------------------------------
One dashboard for servers and applications across Physical-Virtual-Cloud
Widest out-of-the-box monitoring support with 50+ applications
Performance metrics, stats and reports that give you Actionable Insights
Deep dive visibility with transaction tracing using APM Insight.
http://ad.doubleclick.net/ddm/clk/290420510;117567292;y
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: FontAwesome font icons for qx.Desktop

slah
Thank you for sharing, awsome theme.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: FontAwesome font icons for qx.Desktop

woprandi
It doesn't work for me, buttons stille have the old style. And if I set appearance, I get this error :

Uncaught Error: qx.ui.form.Button has no themeable property "textAlign" while styling fa-search
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: FontAwesome font icons for qx.Desktop

SQville
Look at Step #7 a little more closely: https://github.com/sqville/sqv

You need to set the button's appearance to "search-button" and not "fa-search". You are seeing that error because you are directly asking the Button to show the font icon rather than the Image, and it's the Image that has the new properties mixed into it and not the Button class.

When you set the Button's appearance to "search-button" the Appearance.js that get's mixed into the current theme's appearance file has this entry in it that set's the button's icon to "fa-search":

"search-button/icon" : "fa-search"

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: FontAwesome font icons for qx.Desktop

woprandi
Now I have this error :

Uncaught Error: Error in property decorator of class qx.ui.form.Button in method setThemedDecorator with incoming value 'primary-button-box': Is invalid
Uncaught Error: Error in property decorator of class qx.ui.form.Button in method setThemedDecorator with incoming value 'primary-button-box-hovered': Is invalid!
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: FontAwesome font icons for qx.Desktop

SQville
Are you using Clean as your app's theme?

Example entry in your app's config.js file in order to use Clean as your theme:
"QXTHEME"      : "sqv.theme.Clean",

if not then you will need to cut and paste the button's Decoration and Color entries (i.e. "primary-button-box*") into your app's Decoration.js and Color.js files

Feel free to email me directly at chris.eskew@sqville.com with steps of what you are trying to do and what you have done so far and I'll be happy to give you more specific steps.

Chris
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: FontAwesome font icons for qx.Desktop

valtovar
Hi all, great job.  

I have a question:

1. how can i put an icon in a button?  for example i have this:
 
  var fileMenu = new qx.ui.menubar.Button("File", "", this.getFileMenu());
  fileMenu.setAppearance("search-button");

it works, but it changes all style of my button and i dont want that, i want to put the icon only, not change the background color and other staff.

2. is it working in Menu Buttons? because i have this:

var newPageBtn = new qx.ui.menu.Button("New Page", "", new qx.ui.command.Command("Ctrl+N"));
newPageBtn.setAppearance("search-button");

and it doesn't work, it shows the label and command, but not the icon.

Thanks
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: FontAwesome font icons for qx.Desktop

SQville
It will not work in Menu Buttons as-is because you need to create the Menu Button specific appearance entries in your Appearance.js file (or this file that my project provided: https://github.com/sqville/sqv/blob/master/source/class/sqv/fonticon/FontAwesome/Appearance.js)

Here's what i mean. Search qooxdoo's simple Appearance js file (https://github.com/qooxdoo/qooxdoo/blob/master/framework/source/class/qx/theme/simple/Appearance.js) for "menu-button". You'll see many entries that support the themeing of the menu button. Changing any of these would change the look and feel of ALL of your app's menu buttons. Not good if you want just one of your menu buttons to have a search font icon.

What i did for button is the same thing you will need to do for menu-button. Copy all of the menu-button related appearance entries from the simple theme into my FontAwesome/Appearance.js file and rename them to "search-menu-button". Menu Buttons are more complex than Buttons, but use my "search-button" as a guide. It will help you to get closer to the solution your looking to implement.

...and i'm here to help you as much as i can along the way :-)

Chris





Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: FontAwesome font icons for qx.Desktop

woprandi
It will be much easier if we could just use as a standard qx theme

2015-11-21 0:52 GMT+01:00 SQville <[hidden email]>:
It will not work in Menu Buttons as-is because you need to create the Menu
Button specific appearance entries in your Appearance.js file (or this file
that my project provided:
https://github.com/sqville/sqv/blob/master/source/class/sqv/fonticon/FontAwesome/Appearance.js)

Here's what i mean. Search qooxdoo's simple Appearance js file
(https://github.com/qooxdoo/qooxdoo/blob/master/framework/source/class/qx/theme/simple/Appearance.js)
for "menu-button". You'll see many entries that support the themeing of the
menu button. Changing any of these would change the look and feel of ALL of
your app's menu buttons. Not good if you want just one of your menu buttons
to have a search font icon.

What i did for button is the same thing you will need to do for menu-button.
Copy all of the menu-button related appearance entries from the simple theme
into my FontAwesome/Appearance.js file and rename them to
"search-menu-button". Menu Buttons are more complex than Buttons, but use my
"search-button" as a guide. It will help you to get closer to the solution
your looking to implement.

...and i'm here to help you as much as i can along the way :-)

Chris









--
View this message in context: http://qooxdoo.678.n2.nabble.com/FontAwesome-font-icons-for-qx-Desktop-tp7587151p7587783.html
Sent from the qooxdoo mailing list archive at Nabble.com.

------------------------------------------------------------------------------
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel



--

------------------------------------------------------------------------------

_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: FontAwesome font icons for qx.Desktop

SQville
I wholeheartedly agree! So the qx community is aware, SQville (its just me) has no plans to produce one in the near future (I wish I had the time)... If someone would like to fund the work then that would be a different story (no crowd funding replies, please - I mean, food-on-the-table, shoes-on-the-kids, gas-in-the-tank funding) ;-)

Another desire of mine is to develop an "embedded" icon option. Something like CSS or SVG based icons. Ever since the qx team removed the Decorator layers out of qx.Desktop it's been harder to make this a reality.

My current thinking on this topic: Create a qx.html.SVG object and patch qx.ui.basic.Image to use it, or force qx.ui.basic.Image to be a div tag rather than an img tag and replace the inner div tag with SVG code. Any way, there are options out there, just not enough time to flesh them all out. :-)
Loading...