qooxdoo themes and more for qx.Desktop
JavaScript Other
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

README.md

sqv

qooxdoo themes and more for qx.Desktop applications
Included in this package:

  • CLEAN - A flat qx.Desktop theme that promotes simplicity, open spaces, crisp edges and bright colors
  • FontAwesome for qx.Desktop - Font Icons for qooxdoo Desktop web applications
  • Demos - Clean theme with FontAwesome icons at the top

CLEAN

Clean

  • A theme for qx.Desktop applications
  • It's objective is to live up to it's name
  • Inspired by Semantic UI

FontAwesome for qx.Desktop

The fully integrated way of using Font Icons in your qx.Desktop application.

To use:

Step 1 Download sqv

Step 2 Download the latest FontAwesome zip file from the FontAwesome github site - http://fortawesome.github.io/Font-Awesome/

Step 3 Copy the contents of the FontAwesome "fonts" folder to the empty "sqv\source\resource\sqv\fonts\FontAwesome" folder

Step 4 Link sqv to your qx.Desktop project as a library by adding the following library entry to your app's config.json file:

"library" :
  [
    {
      "manifest" : "${QOOXDOO_PATH}/application/sqv/Manifest.json"
    }
  ]

Step 5 Add the following lines of qooxdoo code to the start of the main function of your application (replace "sqv.theme.clean.Appearance|Decoration|Font" with the class names of the theme your app is currently using)

// Add font and text properties to the qx Image widget
qx.Class.include(qx.ui.basic.Image, sqv.ui.basic.MImage);
  
// Add the beforeContent property to the Decorator class
qx.Class.include(qx.ui.decoration.Decorator, sqv.ui.decoration.MBeforeContent);
 
// Add FontAwesome specific Appearance, Decoration and Font entries to the current theme 
qx.Theme.include(sqv.theme.clean.Appearance, sqv.fonticon.FontAwesome.Appearance);
qx.Theme.include(sqv.theme.clean.Decoration, sqv.fonticon.FontAwesome.Decoration);
qx.Theme.include(sqv.theme.clean.Font, sqv.fonticon.FontAwesome.Font);

Step 6 Add the following config entry (add-css) into sqv's config.json file, common entry (12/28/2017 - removed since this is an alternative to the qx @font implemention of font icons). This will bring in the necessary fontawesome css classes:

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

Step 7 Run "generate.py source" in the command line to link the sqv project files to your application

Step 8 Create an image in your application and set its appearance property to "fa-search"

//stand alone icon example
var faiconsearch = new qx.ui.basic.Image().set({appearance:"fa-search"});

//example button with a fonticon
//the appearance "search-button" is an example appearance found in sqv.iconfont.FontAwesome.Appearance
var button = new qx.ui.form.Button("Icon Button", "");
button.setAppearance("search-button");

Step 9 Run your project and see the results

Demos

Clean Theme (with FontAwesome icons) for qx.Desktop: http://sqville.com/examples/qxthemes/clean/index.html