Merge pull request #1 from oetiker/initial

initial

.eslintrc.json

@@ -0,0 +1,65 @@
+{
+  "extends": "qx",
+  "parser": "babel-eslint",
+  "globals": {
+    "osparc": false
+  },
+  "rules": {
+    "max-len": [
+      2,
+      150
+    ],
+    "new-cap": "off",
+    "require-jsdoc": "off",
+    "linebreak-style": [
+      "error",
+      "unix"
+    ],
+    "curly": [
+      "warn",
+      "all"
+    ],
+    "block-scoped-var": "warn",
+    "brace-style": [
+      "warn",
+      "stroustrup"
+    ],
+    "indent": [
+      "warn",
+      2
+    ],
+    "object-property-newline": "warn",
+    "object-curly-newline": [
+      "warn",
+      {
+        "ObjectExpression": {
+          "multiline": true
+        },
+        "ObjectPattern": {
+          "multiline": true
+        }
+      }
+    ],
+    "key-spacing": [
+      "warn",
+      {
+        "singleLine": {
+          "beforeColon": false,
+          "afterColon": true
+        },
+        "multiLine": {
+          "beforeColon": false,
+          "afterColon": true
+        }
+      }
+    ],
+    "no-dupe-keys": "warn",
+    "no-dupe-class-members": "warn",
+    "no-unused-vars": [
+      "warn",
+      {
+        "args": "none"
+      }
+    ]
+  }
+}

.gitignore

@@ -57,3 +57,6 @@ typings/
 # dotenv environment variables file
 .env
 
+*-output
+*~
+*.bak

Dockerfile

@@ -0,0 +1,24 @@
+FROM node:8.9.2
+
+LABEL maintainer="oetiker" \
+      description="Qooxdoo Font Awesome 5 Icon Font"
+
+# reuses user defined in base image
+USER node
+
+# qooxdoo versioning
+
+# npm variables
+#ENV NPM_CONFIG_LOGLEVEL=warn
+ENV NPM_CONFIG_PREFIX=/home/node/.npm-global
+
+# access to bin
+ENV PATH=$NPM_CONFIG_PREFIX/bin:$PATH
+
+RUN npm install qxcompiler qooxdoo-sdk -g
+
+WORKDIR /home/node/src
+VOLUME  /home/node/src
+EXPOSE 31754
+
+ENTRYPOINT [ "qx" ]

Manifest.json

@@ -0,0 +1,68 @@
+{
+  "info" :
+  {
+    "name" : "qx-iconfont-material",
+
+    "summary" : "theme for the osparc web ui",
+    "description" : "a material design ispired dark theme for osparc",
+    "homepage" : "https://github.com/ITISFoundation/qx-osparc-theme",
+
+    "license" : "MIT license",
+    "authors" : [
+      {
+        "name": "Tobias Oetiker (oetiker)",
+        "email": "tobi@itis.ethz.ch"
+      }
+    ],
+    "version" : "0.0.0",
+    "qooxdoo-range": "5.x - 6.0.0-alpha"
+  },
+
+  "provides" :
+  {
+    "namespace"   : "iconfont.fontawesome5",
+    "encoding"    : "utf-8",
+    "class"       : "source/class",
+    "resource"    : "source/resource",
+    "translation" : "source/translation",
+    "type"        : "contribution",
+    "webfonts": [
+      {
+        "name": "FontAwesome5Brands",
+        "defaultSize": 32,
+        "comparisonString": "\uf26e\uf368",
+        "mapping": "iconfont/fontawesome5/fa-brands.json",
+        "resources": [
+          "iconfont/fontawesome5/fa-brands-400.ttf",
+          "iconfont/fontawesome5/fa-brands-400.woff",
+          "iconfont/fontawesome5/fa-brands-400.woff2",
+          "iconfont/fontawesome5/fa-brands-400.eot"
+        ]
+      },
+      {
+        "name": "FontAwesome5Regular",
+        "defaultSize": 32,
+        "comparisonString": "\uf2b9\uf2bb",
+        "mapping": "iconfont/fontawesome5/fa-regular.json",
+        "resources": [
+          "iconfont/fontawesome5/fa-regular-400.ttf",
+          "iconfont/fontawesome5/fa-regular-400.woff",
+          "iconfont/fontawesome5/fa-regular-400.woff2",
+          "iconfont/fontawesome5/fa-regular-400.eot"
+        ]
+      },
+      {
+        "name": "FontAwesome5Solid",
+        "defaultSize": 32,
+        "comparisonString": "\uf2b9\uf2bb",
+        "mapping": "iconfont/fontawesome5/fa-solid.json",
+        "resources": [
+          "iconfont/fontawesome5/fa-solid-900.ttf",
+          "iconfont/fontawesome5/fa-solid-900.woff",
+          "iconfont/fontawesome5/fa-solid-900.woff2",
+          "iconfont/fontawesome5/fa-solid-900.eot"
+        ]
+      }
+    ]
+  }
+}

README.md

@@ -0,0 +1,60 @@
+# Qooxdoo Integration of the Font Awesome 5 Icons font
+
+> These instructions assume that you are using the new [qooxdoo-compiler](https://github.com/qooxdoo/qooxdoo-compiler)
+> for building your application.
+
+## Using the iconfont in your Application
+
+```console
+$ qx contrib update
+$ qx contrib list
+$ qx contrib install ITISFoundation/qx-iconfont-fontawesome5
+```
+
+To induce the compiler to copy the font file you can either add a 'dummy' call to:
+
+`iconfont.fontawesome5.Include;`
+
+to your appliaction or you can explicitly include the class in the `compile.json` file.
+
+Your app now knows about all the material icons. To access the icons
+use names like:
+
+`@MaterialIcon/sms_failed/40`
+
+The demo app shows a list of all the icons available.
+
+To find the names of the icons, either look at the demo app, or go to https://fontawesome.com/icons
+
+
+## Running the Demo App
+
+This contrib also comes with a demo application. To make it really simple to test
+it comes with 'docker-batteries' included.
+
+The setup is prepared for runnig with docker. You don't
+need a local qooxdoo install or anyting to get started. Just install docker
+and give this a whirl.
+
+* build the docker image
+  ```console
+  $ docker-compose build
+  ```
+
+* run the demo server
+   ```console
+   $ docker-compose up
+   ```
+  Now you can open http://localhost:31754 to see the widgetbrowser. The selectbox in the top right corner lets you select the OSparc theme.
+
+If you want to run a different qx command, you can do this too
+
+```console
+$ docker-compose run qx lint
+```
+
+Inspect the image interactively
+
+```console
+$ docker run --entrypoint /bin/bash -i -t itisfoundation/qx-osparc-theme
+```

compile.json

@@ -0,0 +1,41 @@
+{
+  "targets": [
+    {
+      "type": "source",
+      "outputPath": "source-output"
+    },
+    {
+      "type": "hybrid",
+      "outputPath": "hybrid-output"
+    },
+    {
+      "type": "build",
+      "outputPath": "build-output"
+    }
+  ],
+  "defaultTarget": "source",
+  "serve": {
+    "listenPort": 31754
+  },
+  "locales": [
+    "en"
+  ],
+  "environment": {
+    "qx.icontheme": "Tango"
+  },
+  "applications": [
+    {
+      "class": "iconbrowser.Application",
+      "theme": "qx.theme.Simple",
+      "name": "iconbrowser",
+      "writeIndexHtmlToRoot": true,
+      "include": [
+        "iconfont.fontawesome5.Include"
+      ]
+    }
+  ],
+  "libraries": [
+    "../.npm-global/lib/node_modules/qooxdoo-sdk/framework",
+    "."
+  ]
+}

docker-compose.yml

@@ -0,0 +1,13 @@
+version: '3'
+services:
+  qx:
+    image: "itisfoundation/qx-iconfont-fontawesome5"
+    build:
+      context: .
+      dockerfile: Dockerfile
+    working_dir: /home/node/src
+    volumes:
+      - '.:/home/node/src'
+    ports:
+      - '31754:31754'
+    command: serve --verbose

package.json

@@ -0,0 +1,25 @@
+{
+  "dependencies": {
+    "babel-eslint": "^8.2.3",
+    "eslint": "^4.19.1",
+    "eslint-config-qx": "^0.1.0",
+    "eslint-plugin-qx-rules": "^0.1.0",
+    "qxcompiler": "^0.2.11"
+  },
+  "scripts": {
+    "lint": "eslint ./source/class/iconbrowser/**/*.js",
+    "build": "qx compile --target=source"
+  },
+  "name": "qx-iconfont-material",
+  "version": "0.0.0",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/ITISFoundation/qx-iconfont-material.git"
+  },
+  "licenses": [
+    {
+      "type": "MIT"
+    }
+  ],
+  "preferGlobal": true
+}

source/class/iconbrowser/Application.js

@@ -0,0 +1,75 @@
+/**
+ * shows all the icons aviable in the current qooxdoo appliaction
+ */
+
+/* global document,iconfont */
+
+qx.Class.define("iconbrowser.Application", {
+  extend: qx.application.Standalone,
+
+  members: {
+    main: function() {
+      this.base(arguments);
+      if (qx.core.Environment.get("qx.debug")) {
+        // support native logging capabilities, e.g. Firebug for Firefox
+        qx.log.appender.Native;
+      }
+      // dummy call to the inconfont class which will trigger the compiler to copy the
+      // font files to the output class.
+      // you could also explicitly include the class in the compile.json file
+
+      // iconfont.material.Include;
+
+      let copy = document.createElement("input");
+      document.body.appendChild(copy);
+      // Document is the application root
+      let iconDb = {};
+      for (let key in qx.$$resources) {
+        let re = key.match(/^@([^/]+)\/([^/]+)/);
+        if (!re) {
+          continue;
+        }
+        if (!iconDb[re[1]]) {
+          iconDb[re[1]] = [];
+        }
+        iconDb[re[1]].push({
+          handle: key,
+          name: re[2]
+        });
+      }
+
+      var doc = this.getRoot();
+      var scroll = new qx.ui.container.Scroll().set({
+        padding: [20,20,20,20]
+      });
+      doc.add(scroll, {
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0
+      });
+      var vbox = new qx.ui.container.Composite(new qx.ui.layout.VBox(30));
+      scroll.add(vbox);
+      for (let font in iconDb) {
+        let list = new qx.ui.container.Composite(new qx.ui.layout.Flow());
+        vbox.add(list);
+        let label = new qx.ui.basic.Label(font).set({font: new qx.bom.Font(30)});
+        label.setWidth(80*Math.ceil((label.getSizeHint().width+10.0)/80.0));
+        list.add(label);
+        iconDb[font].forEach(function(item) {
+          let img = new qx.ui.form.Button(null, item.handle + "/40").set({
+            toolTipText: item.name + " - click to copy",
+            minWidth: 80,
+            minHeight: 80
+          });
+          img.addListener("click", function() {
+            copy.value = item.handle;
+            copy.select();
+            document.execCommand("copy");
+          });
+          list.add(img);
+        });
+      }
+    }
+  }
+});