sqville / ville.fluent

Theme for the Qooxdoo JavaScript Framework

Ville.Fluent

ville.Fluent is a Qooxdoo theme inspired by Microsofts Fluent UI.

Benefits

• Adheres to Fluent UI design principles
• Uses design tokens and theme designer
• SVG based, fluentui system icons

Using the Theme in your Application

Use Qooxdoo's package (qx pkg) discovery and installation system. Other option is to download and add the ville.theme folder to your project. Reference it in your compile.json as a stand alone theme, or update your project's theme to extend the ville.theme.fluent theme classes (Appearance, Decoration, Font, Color, etc).

Demos

Demo

WidgetBrowser

Roadmap

• Full design (In Progress) - Wax demo showing the majority of qx ui widgets leveraging FluentUI design patterns.
• WidgetBrowser design (Completed) - Out of the box, qxl.widgetbrowser version of the theme.
• Architecture Review (Not Started) - Evaluate how best to package underlying features - i.e. ville.global (FluentUI's design tokens), ville.wax.MEmbed, ville.theme.MImage, and ville.wax.MTabView.

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Chris Eskew - email: [email protected]

ville.fluent's Issues

Warnings about missing resourses

Missing files

Web font icon color of dark version

I think white is better. All dark themes I've met there are white by default.

Tooltip font color

Looks like tooltip colors broken.

Close and restore button colors differ

Button colors differs for window buttons. I suggest to use white colors for theme.

Close button is not visible

Broken VirtualTree theme item

Looks like VirtualTree somehow broken. I see now picture of folder by default.
ville.Fluent theme:

classic.Theme:

My code:

qx.Class.define("scada.signalmonitor.tree.Item", {
    extend: qx.ui.tree.VirtualTreeItem,

    properties: {
        checked: {
            check : "Boolean",
            event: "changeChecked",
            nullable : true
        },

        image: {
            check : "String",
            event: "changeImage",
            nullable : true
        },

        count: {
            check : "String",
            event: "changeCount",
            nullable : true
        }
    },

    members: {
        __checkbox : null,
        __image : null,
        __count : null,

        _addWidgets(){
            this.addSpacer();
            this.addOpenButton();

            this.addIcon();
            this.bind("image", this, "icon");

            this.__checkbox = this.__createCheckBox();
            this.addWidget(this.__checkbox);
            this.addLabel();

            this.addListener("click", function(e) {
                if (e.getTarget() !== this.getChildControl("open")){
                    this.__checkbox.execute();
                }
            }, this);

            this.__checkbox.addListener("click", function(e) {
                e.stopPropagation();
            }, this);

            // All else should be right justified
            this.addWidget(new qx.ui.core.Spacer(), {flex: 1});
        },

        __createCheckBox(){
            const checkbox = new qx.ui.form.CheckBox().set({
                focusable: false,
                triState: true,
                marginRight: 4
            });
            this.bind("checked", checkbox, "value");
            checkbox.bind("value", this, "checked");
            return checkbox;
        }
    }
});

Big size of theme

Installing this theme via package system leads to 16 mb in which almost 15 mb for published folder content. I suggest to move this folder to another branch. For example like done in gitpages (if possible).