olivierldff / qaterial

🧩 Collection of Material Components based on QtQuickControls2.

Qaterial

A collection Material Components to build faster UI using Qml.

Warning : If you intend to use Qaterial in your project, you should use a stable version (v1.3) or create your own fork. I'm using this library for my own projects, and I will introduce breaking change if needed. This library isn't meant for LTS. Use at your own risk.

Feel free to pull request.

🚀 Overview

• Checkout Qaterial Gallery for example of most components.
• Getting Start Guide.
• Try it live with Qaterial Online (and checkout examples).

Roadmap

Some history. I started this library as a way to learn qml and how controls work. I made some api mistake so i'm fixing them here and there as time go. There will be breaking change.

Breaking Change

My goal is to move to more standard API relying more only on QtQuickControls default property. I think i made the mistake to introduce some property in type that doesn't need to be there. Here are some idea where i'm going:

• Move to Material 2018 text type. (Deprecate Material 2014 text type)
• Deprecate textType to only use font that is present in every controls. (Already in master) Now you can use Label.Headline6 for example where you used textType: Qaterial.Style.TextType.Title. Or font: Qaterial.Style.textTheme.headline6.
• Deprecate onPrimary, colorReverse, etc... that are everywhere
• Introduce a ColorTheme for base color of every controls.
• Use palette introduced in Qt 5.13 as the way to change colors to every controls. This will deprecate foregroundColor, backgroundColor, etc ... in many controls.
• Use attached properties for custom properties (ie elevation) as qt recommend in documentation.
• TextField will become a simple control without decorator meant to be the base of more customizable controls. You should move to TextFieldFilled or TextFieldOutlined or TextField2014 to have decorator (icon, suffix, prefix, etc...) (TextField2014 is already available as it is TextField). Maybe introduce a TextFieldDecorated without any background. Also maybe use placeholderText instead of title. Since title is used as placeholder from my experience.
• ColorPicker (i think it will be multiple variant and building block since everyone wants a different color picker).
• Deprecate some components llike DoublePage that are too much specialized and are not controls.
• Change name of FabButton to FloatingActionButton.
• Clean the mess of RawMaterialButton.
• Base TextArea on T.TextArea and not Item.
• More example in general.
• Deprecate TabBar specialization that are too much specialized that i end up never using them. They would better fit as example.
• Deprecate RoundColorIcon that is too complicated to use (and maintain)
• Refactor RoundImage to use ClipRRect.

Missing Components (ideas)

• AppBar (today only called ToolBar)
• Avatar
• Badge
• Backdrop
• Breadcrumb
• Chips
• Navigation rail
• Bottom sheets
• SearchBar

📌 Dependencies

• QOlm
• Qt::Core, Qt::Gui, Qt::Qml, Qt::Quick, Qt::QuickControls2, Qt::Svg, Qt::Xml
• googlefonts
• MaterialDesignIcons

qaterial's Issues

✨ Pull To Refresh

• onRefresh signal

How can i generate qt project

How can i generate qt project?
Thank you vervy mach.

LabelWithCaption binding loop

Qaterial.LabelWithCaption {
    anchors.centerIn: parent
    horizontalAlignment: Qt.AlignHCenter

    spacing: 10 // Binding loop detected for property "y"

    text: "I'm a simple label"
    caption: "Here is my caption text"

    textFont: Qaterial.Style.textTheme.headline5
    captionFont: Qaterial.Style.textTheme.body1
}

LabelWithCaption.qml: 48:3: QML Label: Binding loop detected for property "y"

Same problems with CaptionWithLabel, OverlineWithLabel and "maybe" IconLabelWithCaption, but I haven't tested it because IconLabelWithCaption (sure IconLabel too) doesn't work for me. It says "Could not resolve the prototype for Qaterial.IconLabelImpl" :(

Can we use different theme same time?

For example

Main window is dark theme
Dialog is light theme

is it possible?

Aggressive CMake error when using FetchContent for Qaterial

Most of the time each time we refresh the CMake we have this line: -- Download MaterialDesignIcons from https://github.com/OlivierLDff/MaterialDesignSvgo

CMake Error at /Users/romanszterg/CLionProjects/atomicDEX-Pro/cmake-build-release-brew-clang-9/_deps/materialdesignicons-subbuild/materialdesignicons-populate-prefix/tmp/materialdesignicons-populate-gitupdate.cmake:133 (message):
  

  Failed to unstash changes in:
  '/Users/romanszterg/CLionProjects/atomicDEX-Pro/cmake-build-release-brew-clang-9/_deps/materialdesignicons-src/'.


  You will have to resolve the conflicts manually

This happens like 6/10 and this is very annoying, any suggestions to prevent the stash ? The folder is already downloaded once, why this is re evaluated each time ?

Usage:

FetchContent_Declare(qmaterial URL https://github.com/OlivierLDff/Qaterial/archive/master.zip)
FetchContent_MakeAvailable(qmaterial)

Test that instantiate every element

• Instantiate every element in a loader
• Exit on success

This should be incorporated in the CI pipeline to make every component are at least running without errors

🐛 TimePickerDialog height is reevaluated multiple time when 'open'

Add documentation

Use singleton Icons to access Qaterial icons instead of url

ColorIcon.qml RangeError: Maximum call stack size exceeded

I have a weird error when using Colorize and ColorOverlay from Graphical effects:

file:///D:/Qt/5.15.12/msvc2019_64/qml/QtGraphicalEffects/Colorize.qml:0: RangeError: Maximum call stack size exceeded.

The error seems to come from a ColorIcon.qml I'm using in my application:

 /**
 * Copyright (C) Olivier Le Doeuff 2019
 * Contact: [email protected]
 */

// Qt
import QtQuick 2.12
import QtGraphicalEffects 1.12 as QGE

import Qaterial 1.0 as Qaterial

Item
{
  id: root

  property color color: Qaterial.Style.colorTheme.primaryText
  property alias icon: dummyImage.source
  property real size: Qaterial.Style.smallIcon
  property bool cached: true

  readonly property real _implicitSize: icon.toString() ? size : 0
  readonly property bool isImage: color.a === 0

  implicitWidth: _implicitSize
  implicitHeight: _implicitSize

 Image
  {
    id: dummyImage

    anchors.fill: parent

    fillMode: Image.PreserveAspectFit
    sourceSize: Qt.size(root.width, root.height)
    visible: root.isImage && root.enabled
  } // Image

  QGE.ColorOverlay
  {
    anchors.fill: parent

    source: dummyImage
    readonly property color implicitColor: enabled ? root.color : Qaterial.Style.colorTheme.disabledText
    color: Qt.rgba(implicitColor.r, implicitColor.g, implicitColor.b, implicitColor.a)

    cached: root.cached
    visible: !root.isImage
  } // ColorOverlay

  QGE.Colorize
  {
    anchors.fill: parent

    source: dummyImage
    hue: 0
    saturation: 0
    lightness: -0.2

    cached: root.cached
    visible: root.isImage && !root.enabled
  } // Colorize
} // Item

Can anyone perhaps tell me how I can solve this issue? I'm not so familiar with Graphical effects...

[QaterialOnline] Most of Calendar example broken

Most of the example of the category Calendar are broken in QaterialOnline.

Can't search in the doc website

⚡️ Clear Material Style dependencies

• BusyIndicator.qml
• ElevationEffect.qml
• ProgressBar.qml
• Ripple.qml

✨ Add AppBar.qml

• Qaterial implementation
• QaterialGallery example
• Documentation

Qaterial Online slowing browser

Hi, sorry if this is not the right place for the issue, but I didn't find the issue section in QaterialOnline.
Since yesterdey, when loading QaterialOnline in both Chrome on Windows and Firefox on Linux I'm receving a message of page not responding/page is slowing down, and it's not possibile anymore to use it.

ToolTip Simple sample not working on QaterialOnline

Tooltips are not showing in ToolTip Simple sample on QaterialOnline. They are working properly in the positioned sample instead

Qt 6.5

How to use Qt 6.5 on Windows 10 with mşngw??

✨ Date & Time picker should improve to use local

✨ Great project:

• https://github.com/mohammadhasanzadeh/yacalendar

Time

• Use local to determine use AM/PM or EU

Calendar

• Support calendar system
• Support calendar model

✨ SnackbarManager

Snackbar Manager should be customizable like : https://material-ui.com/components/snackbars/
It should also have a simple api SnackbarManager.show("my text")

Date format Change

How to change Data Format with TextFieldDatePicker?

QMake build file

Can you add please qmake build file?

TextFieldTimePicker/TextFieldClockButton examples not working anymore

⚡️ [ItemDelegate] - Clear and simplify

Change [anchors and reachors()] way of proceeding to [x, y, width, height]

Qaterial Online - Import "externalFile.qml"

Hi,
Is there a good way to import external QML files into Qaterial/QML Online environments?
the Import "http://fileaddress/filename.qml" syntax freezes the page.

I wrote those functions that work on QML Online, but not on Qaterial Online:

 property var importedObjects:({})
    property var timeStamp: "?"+new Date().getTime() // timestamp is helpful to avoid clearing the browser's cache every time a file is edited

    function _Timer() {
        return Qt.createQmlObject("import QtQuick 2.0; Timer {}", app);
    }

    function injectQML(target, name, file, properties) {
        file = file + timeStamp

        var i = 0
        var newComponent = Qt.createComponent(file);

        var timer = new _Timer(); timer.interval = 1, timer.repeat = true, timer.start();

        timer.triggered.connect(function () {
            i++;
            var status = isOBJloaded(newComponent, target,i);

            if (status !=="loading") {
                timer.destroy();

                importedObjects[name] = status;
                for (var a in properties) importedObjects[name][a] = properties[a];
            };
        })
    }


    function isOBJloaded(obj, target,i=0) {
        if (obj.status !== Component.Ready) return "loading";

        console.log("it took "+i+ (i === 1 ? " try ":" tries ") +"to load")
        return obj.createObject(target)
    }

    function destroyLastObject() {
        var lastObjectName = Object.keys(importedObjects)[Object.keys(importedObjects).length - 1]

        if (!importedObjects[lastObjectName]) return

        importedObjects[lastObjectName].destroy()
        delete importedObjects[lastObjectName]
    }

I call them like this:

Button {
            text:"run injectQML( parent, name, file, {properties} )"

            onPressed: {
                var randomColor = Math.floor(16777215 * Math.random()).toString(16)
                var newObject = {
                    name:"rectangle_"+ randomColor,
                    source:"https://jetrotal.github.io/easyRPG_UI/scripts/qml/components/rectangleTest.qml",
                    parent:headerMainContainer
                }

                newObject.properties = {
                    "color": "#" + randomColor,
                    "text": newObject.name
                }

                app.injectQML(newObject.parent, newObject.name,newObject.source ,newObject.properties);
            }
        }

        Button {
            text:"Destroy Last Imported Object"

            onPressed: destroyLastObject();
        }

It kinda do it's job, but the code is too messy, and i'd have to place the same lines of code on every file that depends on an external QML.

Thanks in advance, BTW you made some amazing fixes on Qaterial Online Issues, would be nice to push them into the Official QML Online Repo, on GitLabs too.

➖ Remove spdlog dependency

And replace logs with regular logs qDebug/qInfo/qWarning
Qaterial should force linking to spdlog

wasm build is broken

b33352d broke the build with clang in wasm.
Icons.hpp is a huge c++ file with 5000+ Q_PROPERTY.

[HotReload]: Add a dialog to manage engine Import path.

Building Qaterial on Mac for IOS

I have a question regarding building the library for Qt 5.15.12 (builds fine for android and windows within QtCreator)
CMake Error at /Applications/Qt/5.15.12/ios/lib/cmake/Qt5Core/Qt5CoreConfig.cmake:91 (message):
Library not found: MobileCoreServices
Call Stack (most recent call first):
/Applications/Qt/5.15.12/ios/lib/cmake/Qt5Core/Qt5CoreConfig.cmake:263 (_qt5_Core_process_prl_file)
/Applications/Qt/5.15.12/ios/lib/cmake/Qt5/Qt5Config.cmake:28 (find_package)
CMakeLists.txt:96 (find_package)

Can you please give advice? The Components I've created for my App look so great and this would be really amazing to have the planned UI update.

How can i add right Text

How can i add rightText for TextFieldDelegate??

Thanks...

How can i install to qt's directory qml

i want to use in qtcreator, but now can't make it

CMake error with QtCreator

Hello, I use QtCreator to build Qaterial, but there are many errors like this:
(I have used Qtcreator to create CMake Quick test project and it's work fine.)

`
CMake Error at CMakeLists.txt:180 (add_library):
Target "Qaterial" links to target "Qt::Core" but the target was not found.
Perhaps a find_package() call is missing for an IMPORTED target, or an
ALIAS target is missing?

CMake Error at CMakeLists.txt:180 (add_library):
Target "Qaterial" links to target "Qt::Gui" but the target was not found.
Perhaps a find_package() call is missing for an IMPORTED target, or an
ALIAS target is missing?

CMake Error at CMakeLists.txt:180 (add_library):
Target "Qaterial" links to target "Qt::Svg" but the target was not found.
Perhaps a find_package() call is missing for an IMPORTED target, or an
ALIAS target is missing?
`

Pls help.

Dialog Manager How to??

How to 2 line TextField with dialogManager??

For Ex:

First Line NAME field
Second Line SURNAME field

How to read with DİalogManager??

Refactor namespace and indentation

• All items should import Qaterial with it's namespace for easier readability
• Indent style should be 2 spaces

TextArea: property "text" not updated

See example https://tinyurl.com/ydorg5dq where the button text should follow the TextArea content.

• Commenting out the import Qaterial line and run without Qaterial does not have this problem:

Icons ListView

Example that display all the icons in "qrc:/Qaterial/Icons"

• Display name in Icons.qml as a tooltip
• TextField to search

👷 Deploy Qaterial HotReloader on linux

Deploy Qaterial HotReloader on linux

• https://github.com/probonopd/linuxdeployqt

🏗 Refactor TextArea to make in inherit from T.TextArea

Typography

• Example
• Documentation

• https://material.io/design/typography/the-type-system.html#type-scale

✨ DialogManager

Simplify API, for example turn acceptedCallback in onAccepted.

For all of functions from Dialog :
accepted()
applied()
discarded()
helpRequested()
rejected()
reset()

Make ressources dependencies optionnal

• Mdi dependencies optionnal with QATERIAL_ENABLE_ICONS

• Roboto with QATERIAL_ENABLE_ROBOTO

• Lato with QATERIAL_ENABLE_LATO

• RobotoMono with QATERIAL_ENABLE_ROBOTO_MONO

• Download ttf at configure time

• Use svgo to optimize Mdi svg icons. (Save 30% of binary space)

Add Tooltip.qml

• Implementation in Qaterial
• Example in QaterialGallery
• Example in Qaterial (https://material-ui.com/components/tooltips/)

🐛 DatePickerDialog height is reevaluated multiple time when 'open'

🚑️ Wasm memory leak

QaterialOnline have memory leak on chrome, and seem to freeze in infinite allocation loop
This error seems to be introduced by e8da53b

Possible cause:
Q_LOGGING_CATEGORY ?

✨ Support Qt Designer

Warning: I'm not familiar with cmake, my experience had been with qmake so far. My question will probably be asked again and again, as QT Creator is a popular IDE for Qt/QML applications.

I'm trying to use Qaterial with QTCreator. In this Github repo, I provide the code I use to reproduce this problem, with 1 commit per change I perform. You can very easily try yourself.

So, I start from scratch and create a Test project that use cmake. This commit just the initial output of Qt Creator.

Then, I add this commit that switch C++ and QML to Qaterial and add dependency build.

But, that don't works, build fail with

Test/main.cpp:1:10: fatal error: 'Qaterial/Qaterial.hpp' file not found
#include <Qaterial/Qaterial.hpp>
         ^~~~~~~~~~~~~~~~~~~~~~~
1 error generated.

Sure, the reason is those files are in build-Test-Desktop_Qt_5_15_1_clang_64bit-Debug/_deps/qaterial-src/.

From QtCreator cmake integration doc:

Adding External Libraries to CMake Projects
Through external libraries, Qt Creator can support code completion and syntax highlighting as if they were part of the current project or the Qt library.
Qt Creator detects the external libraries using the find_package() macro. Some libraries come with the CMake installation. You can find those in the Modules directory of your CMake installation. For more information, see cmake-packages(7).
Syntax completion and highlighting work once your project successfully builds and links against the external library.

So, I tried find_package(Qaterial) and output of cmake is:

Make Warning at CMakeLists.txt:38 (find_package):
  By not providing "FindQaterial.cmake" in CMAKE_MODULE_PATH this project has
  asked CMake to find a package configuration file provided by "Qaterial",
  but CMake did not find one.

  Could not find a package configuration file provided by "Qaterial" with any
  of the following names:

    QaterialConfig.cmake
    qaterial-config.cmake

  Add the installation prefix of "Qaterial" to CMAKE_PREFIX_PATH or set
  "Qaterial_DIR" to a directory containing one of the above files.  If
  "Qaterial" provides a separate development package or SDK, be sure it has
  been installed.

In Qaterial repository, there is no *config*.cmake nor Find*.cmake.

So, how can I use Qaterial with Qt Creator?

How to manage the space between the cards?

import QtQuick 2.15
import Qaterial 1.0 as Qaterial
import QtQuick.Controls 2.12

Qaterial.Page
{
    id: root
    ScrollView
    {
        parent: root
        id: _pagescroll
        width:root.width
        height: root.height
        contentWidth: -1
        ScrollBar.vertical.policy: ScrollBar.AlwaysOff
        ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
        ScrollBar.horizontal.interactive: false
        ScrollBar.vertical.interactive: false
        Column
        {
            width: parent.width
            height: parent.height
            Qaterial.Grid
            {
                height: parent.height
                width: parent.width
                id: grid
                leftPadding: 16
                rightPadding: 16
                topPadding: 8
                bottomPadding: 8
                
                Qaterial.Card{
                    parent: grid
                    implicitWidth: 200
                    height: 100
                    Qaterial.Layout.extraLarge: Qaterial.Layout.FillQuarter
                    Qaterial.Layout.large: Qaterial.Layout.FillQuarter
                    Qaterial.Layout.medium: Qaterial.Layout.FillQuarter
                    Qaterial.Layout.small: Qaterial.Layout.FillQuarter
                    Qaterial.Layout.extraSmall: Qaterial.Layout.FillParent
                }
                
                Qaterial.Card
                {
                    Qaterial.Layout.extraLarge: Qaterial.Layout.FillQuarter
                    Qaterial.Layout.large: Qaterial.Layout.FillQuarter
                    Qaterial.Layout.medium: Qaterial.Layout.FillQuarter
                    Qaterial.Layout.small: Qaterial.Layout.FillQuarter
                    Qaterial.Layout.extraSmall: Qaterial.Layout.FillParent
                    
                    implicitHeight: 50
                }
                
                Qaterial.Card
                {
                    Qaterial.Layout.extraLarge: Qaterial.Layout.FillHalf
                    Qaterial.Layout.large: Qaterial.Layout.FillHalf
                    Qaterial.Layout.medium: Qaterial.Layout.FillHalf
                    Qaterial.Layout.small: Qaterial.Layout.FillHalf
                    Qaterial.Layout.extraSmall: Qaterial.Layout.FillParent
                    
                    implicitHeight: 50
                }
                
                Qaterial.Card
                {
                    Qaterial.Layout.extraLarge: Qaterial.Layout.FillQuarter
                    Qaterial.Layout.large: Qaterial.Layout.FillQuarter
                    Qaterial.Layout.medium: Qaterial.Layout.FillQuarter
                    Qaterial.Layout.small: Qaterial.Layout.FillQuarter
                    Qaterial.Layout.extraSmall: Qaterial.Layout.FillParent
                    
                    implicitHeight: 50
                }
                
                Qaterial.Card
                {
                    implicitHeight: 50
                    
                    Qaterial.Layout.large: Qaterial.Layout.FillQuarter
                    Qaterial.Layout.extraLarge: Qaterial.Layout.FillSixth
                }
                
                Qaterial.Card
                {
                    implicitHeight: 50
                    
                    Qaterial.Layout.large: Qaterial.Layout.FillQuarter
                    Qaterial.Layout.extraLarge: Qaterial.Layout.FillSixth
                }
                
                Qaterial.Card
                {
                    implicitHeight: 150
                    
                    Qaterial.Layout.large: Qaterial.Layout.FillQuarter
                    Qaterial.Layout.extraLarge: Qaterial.Layout.FillSixth
                }
                
                Qaterial.Card
                {
                    implicitHeight: 50
                    
                    Qaterial.Layout.large: Qaterial.Layout.FillQuarter
                    Qaterial.Layout.extraLarge: Qaterial.Layout.FillSixth
                }
                
                Qaterial.Card
                {
                    Qaterial.Layout.extraLarge: Qaterial.Layout.FillThird
                    Qaterial.Layout.large: Qaterial.Layout.FillParent
                    Qaterial.Layout.medium: Qaterial.Layout.FillHalf
                    Qaterial.Layout.small: Qaterial.Layout.FillParent
                    Qaterial.Layout.extraSmall: Qaterial.Layout.FillParent
                    
                    implicitHeight: 50
                    
                }
                
                Qaterial.Card
                {
                    Qaterial.Layout.extraLarge: Qaterial.Layout.FillParent
                    Qaterial.Layout.large: Qaterial.Layout.FillParent
                    Qaterial.Layout.medium: Qaterial.Layout.FillHalf
                    Qaterial.Layout.small: Qaterial.Layout.FillParent
                    Qaterial.Layout.extraSmall: Qaterial.Layout.FillParent
                    
                    implicitHeight: 50
                    
                }
            } 
        }
    }
}

Add Qaterial to existing Qt-Project using universal styled custom controls

Hey,

I want to use Qaterial as main UI components in my applications. The application currently relies on a Universal styled custom control set. I managed to build Qaterial for Qt 5.15 and I also can build my application against it. App launches, but app crashes after loading my main qml file. I built qaterial on local hard drive and want to include the lib in my qmake base project.

Here my project file:

# set path and name of lib
CONFIG(debug, debug|release) {
    QAT_BUILDTYPE = Debug
}
else {
    QAT_BUILDTYPE = Release
}

#CONFIG += staticlib

DEFINES += "QATERIAL_STATIC=1"

*msvc*{
    INCLUDEPATH += $$PWD/../../../../Qaterial/install/win/$${QAT_BUILDTYPE}/include
    LIBS += -L$$PWD/../../../../Qaterial/install/win/$${QAT_BUILDTYPE}/lib \
    -lQaterial \
    -lQaterialIcons \
    -lQaterialFonts \
    -lQaterialComponents \
    -lQOlm
    DEPENDPATH += $$PWD/../../../../Qaterial/install/win/$${QAT_BUILDTYPE}/lib
    QML_IMPORT_PATH += $$PWD/../../../../Qaterial/qml/Qaterial
}

Load main file, in main file i did not import Qaterial.
m_qmlEngine.load(QUrl(QStringLiteral("qrc:/EuroSoftLiveViewQml_win.qml")));

Init qaterial:

    m_engine->addImportPath("qrc:///");
    qaterial::loadQmlResources();
    qaterial::registerQmlTypes();

Starting app:

qaterial.utils: Load Qaterial v1.4.6
qaterial.utils: Load font ":/Qaterial/Fonts/Lato/Lato-Regular.ttf"
qaterial.utils: Load font ":/Qaterial/Fonts/Roboto/Roboto-Medium.ttf"
qaterial.utils: Load font ":/Qaterial/Fonts/Roboto/Roboto-Regular.ttf"
qaterial.utils: Load font ":/Qaterial/Fonts/RobotoMono/RobotoMono-Regular.ttf"

Crash of app:

I've been able to use locally built Qaterial with QaterialGallery and HelloWorldExample, these applications start fine. So my idea is that my config in qtquickcontrolsconfig2.conf could be the reason?

[Controls]
Style=Universal

[Material]
Primary=#03A9F4
Accent=#01579B

[Universal]
Accent=#0086E6

Can anyone help me?

✨ Real Theme support

• Qaterial.Theme attached property that propagate
• Background color from elevation :
• Coloring of background based on primary color
  
• Support 2018 Material Design Typo

https://flutter.dev/docs/cookbook/design/themes

✨ Finish ComboBox.qml & Clear Material Style dependency

Qt project configuration

Is there any template project using pro files and qmake instead of cmake? Or how can I pull cmake configuration off from cmake and make on myself?