stratifylabs/stratifyqml

Stratify Labs UI QML framework inspired by Twitter Bootstrap

StratifyLabs UI

StratifyLabs UI (SL.UI for short) is a QML UI framework inspired by Twitter Bootstrap. The goal is to provide easy-to-use, customizable QML building blocks that follow the Twitter Bootstrap look and feel including responsive elements that look great on any screen.

A full demo and documentation app is available in the releases section.

Contributors Welcome

StratifyLabs UI is released under the ASL 2.0. If you are willing to release contributions under this license and would like to contribute, please let me know.

Version 2.0 is Here!

Version 1.0 got the ball rolling but version 2.0 is a huge improvement. Many of the API's are the same, but under the hood big changes have been made to make customizing and stying objects easier and more intuitive.

Porting to 2.0

If you have built some apps using the 1.0 release, I highly recommend porting to version 2.0. You will have to download the code and run the documentation app (see below for options). If you have any issues porting, please submit an issue on Github. Even though the API is the same, the porting process will take some effort but will be well worth it as the "legacy-1.0" branch will not be getting many updates but 2.0 will continue to see bug fixes and feature addtions withouth breaking any APIs.

Documentation

To view the documentation, you have a couple of options:

• Download the SL.UI app for Mac or Windows from the releases section
• Coming Soon: Get the SL.UI Doc app from your favorite app store for Android/iOS
• Download the source code and launch the StratifyLabs UI Doc qmlproject from Qt Creator

Screen Shots

stratifyqml's Issues

SPanel: display corruption using Repeater/SList

It seem we can't use SPanel with dynamically data:

SPanel widget: https://github.com/bclermont/stratifyqml-issue-40/blob/a9acd5196437853215b2f217ec1f6458fd5dc4aa/XXXItem.qml

I'm trying to create multiple instance SPanel through a Repeater or a SList and it just show completely broken.

But the thing is it look nice if I initialize it at startup like:

https://github.com/bclermont/stratifyqml-issue-40/blob/master/main-ok-static.qml#L30

or

https://github.com/bclermont/stratifyqml-issue-40/blob/master/main-ok-model-inline.qml#L32

If I do it that way:

https://github.com/bclermont/stratifyqml-issue-40/blob/master/main-notok.qml#L36

it's broken:

All code to reproduce the problem is at https://github.com/bclermont/stratifyqml-issue-40

All sizes need to be based on point sizes rather than pixel size

Convert SCustomize to STheme and remove Singleton mark

The application will have to declare:

 STheme { id: Theme; /* include any variable changes here*/ }

In the top level windows so all SItems inherit the variable. This should have any updated variables bind throughout the program.

Tooltips (hovering) doesn't always work correctly

Windows animation timing is faster than Mac

There is a QML method to access the OS. When on windows, a multiplier needs to be added to the animation period (spinning, fade, horizontal push, etc)

Allow prompt to animate on and off

Animation might slide down/up or fade in/out

SModal mouse areas are still active when the modal is hidden

Move StratifyData to its own folder

PortIO should cache connections with sys_attr_t rather than reload it everytime

On SModal the close button is sometimes not in the correct place

Sometimes the close button is way off the modal on the right side.

Warning when clicking beyond data in a table

When a table has extra rows, clicking on the extra blank rows generates a warning:

Warning: file:///Users/tgil/Qt-5.8/5.8/clang_64/qml/StratifyLabs/UI/UI.2/STablePrivate.qml:168: Error: Cannot assign [undefined] to int

Add qdocconf file and implement QDoc style documentation

Cannot override FINAL property

How to install into linux desktop ?

Hello
I found the example code import the module by "StratifyLabs.UI ,
the folder seems should be MODULE_PATH/StratifyLabs/UI
but the current folder is StartifyLabs/StartifyLabsUI ,
so is that a mistake or my install way is wrong .

Here is my install way:

1. clone the git repo
2. add module path in project , which is LOCALPATH/StratifyLabs
3. change folder StartifyLabs/StarfyLabsUI to StartifyLabs/UI
4. import the module and use it as the StartifyLabs/Doc example

that seems works for me

My Env:
OS: Fedora 32
QT : 5.14

How to build lib and install for Qt android

Hi,

I try the lib for window desktop with no problem.
But I don't know how to build the so lib for use with Qt android deployment.
Could you guide how to include the lib to an android project?

Gradient does not rendered on SContainer

Hi,

I'm having problem using LinearGradient on SContainer, somehow it does not rendered. I attached a simple example to reproduce that.

So TestPage.qml shows that the gradient is missing. TestPage1.qml shows that the gradient works if I specify color property on target SContainer. For Comparison, I added TestPage2.qml which does not use Stratify component, only plain Rectangle.

What do you think went wrong here ?

Thanks

Missing SItem in 2.0

https://github.com/StratifyLabs/StratifyQML/blob/master/StratifyLabs/UI/UI.2/SLoader.qml#L20

but not in https://github.com/StratifyLabs/StratifyQML/tree/master/StratifyLabs/UI/UI.2

./SNavbar.qml:    property var item: SItem {
./SCarousel.qml:SItem {
./SPopover.qml:SItem {
./SBreadcrumb.qml:SItem {

How to change programmatically an attr.styles?

Hi,

is there a way to programmatically change an attr.styles?

For example, I would transform SLabel's styles from text-info to text-danger when an error occurs. Is it possible?

Right now I'm changing the whole string style, also if I would like to remove only one class and add another one.

SPanel doesn't calculate height correctly with hidden footer

SPanel footer should be colored

Bad path version for SRoundedRectangle

StratifyQML/StratifyLabs/UI/qmldir

Line 108 in dbac257

SRoundedRectangle 2.0 UI.1/SRoundedRectangle.qml

Isn't that file should point to UI.2 for SRoundedRectangle?

SPane compares parent to "undefined" instead of "null"

Can't add StratifyQML.UI to Project

I checkout this repository to /Users/oriane/StratifyQML/StratifyLabs/UI and I try to

import StratifyLabs.UI 2.0

After I:

• add to QML_IMPORT_PATH.
• add to this directory to qml.qrc

QtCreator can't find module:

qrc:/Page1.qml:2 module "StratifyLabs.UI" is not installed

and even:

import "/Users/oriane/StratifyQML/StratifyLabs/UI"

And I get

qrc:/Page1.qml:2 import "/Users/oriane/StratifyQML/StratifyLabs/UI" has no qmldir and no namespace

But the file is there:

$ file /Users/oriane/StratifyQML/StratifyLabs/UI/qmldir
/Users/oriane/StratifyQML/StratifyLabs/UI/qmldir: ASCII text

Add isTouch property to STheme

Looks like this:

property bool isTouch: {
      Qt.platform.os === "android" ||
      Qt.platform.os === "ios" ||
      Qt.platform.os === "blackberry" ||
      Qt.platform.os === "wince" ? true : false;
}

Add an Object that will allow stacking icons

Top bar is cut off on Windows 10

I downloaded the windows zip file and when I run the application the top bar is cut off as seen in this image.

Display corruption using SList

This is probably related to this issue: #40. So basically same case but using SList instead of SRepeater. I put a reproducible sample on following repository: https://github.com/arknable/stratify_list_issue.

Add support for Charts

SChart object will size and style charts.

SAnimator must be inside a layout (SColumn or SRow)

The SAnimator object won't size correctly without being inside a layout object.

SPane error on scroll

I need to wrap some content into something that scroll, I'm trying SPane with:

import QtQuick.Controls 1.2

import "StratifyQML"

ApplicationWindow {
    id: app
    visible: true
    property string appTitle: "Test"

    minimumWidth: 500
    minimumHeight: 200

    SCustomize {
        id: theme
        gray_base: "#303F9F"
    }

    SPane {
        data: SColumn {
            SRow {
                SBaseRectangleText {
                    text: "Row 1"
                }
            }
            SRow {
                SBaseRectangleText {
                    text: "Row 2"
                }
            }
            SRow {
                SBaseRectangleText {
                    text: "Row 3"
                }
            }
            SRow {
                SBaseRectangleText {
                    text: "Row 4"
                }
            }
            SRow {
                SBaseRectangleText {
                    text: "Row 5"
                }
            }
            SRow {
                SBaseRectangleText {
                    text: "Row 6"
                }
            }
            SRow {
                SBaseRectangleText {
                    text: "Row 7"
                }
            }
        }
    }
}

When I load that QML:

qrc:/qml/StratifyQML/SPane.qml:27:5: QML Flickable: Binding loop detected for property "contentHeight"

loop in console a few hundred times and:

qrc:/qml/main.qml:18:5: QML SPane: Binding loop detected for property "implicitHeight"

STextBox has strange behavior and performance on iOS

It doesn't act as a flickable. It selects the text and only scrolls when text is being selected.

STRIP error on Linux

Hi

Is there anybody knows how to solve the following issue on Ubuntu 16 ?

install -m 755 -p /home/qtdev/Development/StratifyQML/StratifyLabs/StratifyLabsUI/UI.1/SText.qml /tmp/StratifyQML/UI.1/
strip /tmp/StratifyQML/UI.1/SText.qml
strip:/tmp/StratifyQML/UI.1/SText.qml: File format not recognized

Thanks !

SModal doesn't stay on top during transition

Automatic Row Height

As there is no doc and the examples don't show what I'm trying to achieve, I'm trying with an issue.

I'm trying to have content that automatically resize like the following example.

The red rows height is their content size. But I wish to have one row resize based on the window size.
This is a common case.

Sadly, it seem that I can't apply the same logic as for web-bootstrap here.

can not load by qmlscene

qt 5.10.0

qmlscene Doc/main.qml

error:
Type Introduction unavailable
...
Cannot override FINAL property

but, test import StratifyLabs.UI 3.0, load ok.

Doc QML Project can't be executed

First, thank you for this great upgrade! I'm looking forward to use the new version!

I'm trying to follow your doc and I open https://github.com/StratifyLabs/StratifyQML/commits/master/StratifyLabs/Doc/StratifyLabs-UI-Doc.qmlproject in QT Creator and get this:

I also tried to add StratifyLabs to my project, manually. and it can't find there either.
Is there a problem in qmldir? or any other files?