ubports / qqc2-suru-style

Suru style for QtQuick Controls 2. Migrated to https://gitlab.com/ubports/core/qqc2-suru-style

qqc2-suru-style

Suru Style for QtQuick Controls 2. Qt 5.9 is required.

qqc2-suru-style's Issues

Suru StackView transitions seem to be ignored

Defined transitions in the Suru style for StackView seems to be ignored.
Push a page into a stack kicks in from the right.

Dark mode issues

Description

Add a Spinbox. Set the Suru.theme to Suru.Dark
The label is still black and cannot be seen in dark mode.

Ubuntu UI Toolkit Button with strokeColor has unreadable text in dark mode

See Ubuntu UI Toolkit App. Switch to dark mode and open the Buttons page.
The 'Stroke' button has dark text on dark background.

Qt 5.12: ElevationEffect is not a type

Dekko runs into ElevationEffect is not a type in Dialog.qml:68. See Dekko Issue for reference.

cannot get ComboBox editable

When setting 'editable' to true for a ComboBox it has no effect. Could it be due to the style for ComboBox using a 'Text' field which is a readonly text component?

Border, dividers, lines are gone

• Channel: Devel and Edge

Description

The borders, dividers, separator lines, etc. are gone in some qqc2 components.
From what I noticed in my apps, these components are the following:

• Tumbler
• Page Header (ToolBar)
• Text Field
• SpinBox
• GroupBox

Additional Information / Screenshots

Here are some screenshots from my Palitan. You can see here some elements that lose the borders, etc.

Positioning of items is off

Qt on edge now properly supports pixel density whereas the QQC2 Suru styling implementation still shows the same issue of positioning items wrongly.
Examples:

Suru style:

compared to Material style:

Not Visible DropShadow on Dark Theme (no dim)

DropShadow alway returns black shadow.
On dark theme with no dim layer (for copy / paste popup) the drop shadow is not visible

Keep StackView Transitions?

We have some default transitions when pages are pushed or popped from a StackView.

The rational behind it is that transitions should give a hint on what is happening when user taps on an element: if tap on the header of an email the transition should hint the user that that email is being opened.

Therefore, when an element of a list is tapped a page is enters «flying» from the right but it also does if we tap on the header icon for example. At then end, looks like the app is slower than it is as the header text (if) changes does it before than the page entering in.

My question is: Do we want to keep these transitions as default? Modify them? Delete them and implement this in another way?

Suru-styled Pages are missing background Rectangle

Since the removal of the background Rectangle (commit: bd803c9)
the Page component differs from other styling implementations (Material, Universal) in that it allows see-through behavior, which might not be expected from an application coming from a different platform and using QQC2.
To keep friction low we might have to revert the commit that introduced this regression.

background width of TextField

When I have a textfield with a large width the border is too small (ending somewhere before the end of the control).

I added

                    Component.onCompleted: {
                        background.width = width
                    }

to have the border surround the complete control.

New spinner icon

what about using a more dynamic spinner icon from canonical https://github.com/CanonicalLtd/desktop-design/blob/master/Toolkit%20%26%20Patterns/Theme/Progress/spinner.svg ?

Suru Theme Dial controls oversized

hi, just tested a page with Dial controls.
Size seems to be fine in System theme but not in Suru (overlaps). i've tried either by defining width and height in Dial and implicitWidth and implicitHeight ).

Don't force dark style

Once ubuntu-ui-toolkit#39 has been implemented Suru style should no longer force dark style on apps, but rather let them opt into using the dark style.

Move to cmake?

Since qmake is both hard to work with and semi deprecated upstream.

Also most of our components use cmake, and i'm planing to move more of them over.

commercial usage

Hi . guys can I use suru style in commercial app?

Dialogs expose old window buffers during redraws

Steps to reproduce:

• Open GhostCloud from the OpenStore
• Press the hamburger menu
• Select "About GhostCloud"

Expectation:

• Scrolling through the page should feel fluid

Actual result:

• Old window buffers are kept and shown during redraw when scrolling the page

Add Private headers to project

Cause of the qt private headers have no guaranty to reserve API , Is good idea to adding one of this to project?

Use suru sytle in other projects

Hi. how can i add this style in my project for Linux.

Add explanation on how to use it, build

What dose .qmake.conf do?

Hi, I'm working on my fork of qqc2-suru-style. I need to know how .qmake.conf file work. can u help me ? thank you.

Private APIs changed (surprise)

Arch GNU/Linux. Qt 5.11.1

In file included from qquicksurustyle.cpp:24:
qquicksurustyle_p.h:28:10: fatal error: QtQuickControls2/private/qquickstyleattached_p.h: No such file or directory
 #include <QtQuickControls2/private/qquickstyleattached_p.h>
          ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
compilation terminated.
make[1]: *** [Makefile.suru:700: .obj/qquicksurustyle.o] Error 1
make[1]: *** Waiting for unfinished jobs....
In file included from qquicksuruunits.cpp:2:
qquicksurustyle_p.h:28:10: fatal error: QtQuickControls2/private/qquickstyleattached_p.h: No such file or directory
 #include <QtQuickControls2/private/qquickstyleattached_p.h>
          ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
compilation terminated.

Full list of private APIs in Qt 5.11.1:

qt5-quickcontrols2 /usr/include/qt/QtQuickControls2/5.11.1/QtQuickControls2/private/qquickanimatednode_p.h
qt5-quickcontrols2 /usr/include/qt/QtQuickControls2/5.11.1/QtQuickControls2/private/qquickattachedobject_p.h
qt5-quickcontrols2 /usr/include/qt/QtQuickControls2/5.11.1/QtQuickControls2/private/qquickchecklabel_p.h
qt5-quickcontrols2 /usr/include/qt/QtQuickControls2/5.11.1/QtQuickControls2/private/qquickclippedtext_p.h
qt5-quickcontrols2 /usr/include/qt/QtQuickControls2/5.11.1/QtQuickControls2/private/qquickcolor_p.h
qt5-quickcontrols2 /usr/include/qt/QtQuickControls2/5.11.1/QtQuickControls2/private/qquickcolorimage_p.h
qt5-quickcontrols2 /usr/include/qt/QtQuickControls2/5.11.1/QtQuickControls2/private/qquickiconimage_p.h
qt5-quickcontrols2 /usr/include/qt/QtQuickControls2/5.11.1/QtQuickControls2/private/qquickiconimage_p_p.h
qt5-quickcontrols2 /usr/include/qt/QtQuickControls2/5.11.1/QtQuickControls2/private/qquickiconlabel_p.h
qt5-quickcontrols2 /usr/include/qt/QtQuickControls2/5.11.1/QtQuickControls2/private/qquickiconlabel_p_p.h
qt5-quickcontrols2 /usr/include/qt/QtQuickControls2/5.11.1/QtQuickControls2/private/qquickitemgroup_p.h
qt5-quickcontrols2 /usr/include/qt/QtQuickControls2/5.11.1/QtQuickControls2/private/qquickmnemoniclabel_p.h
qt5-quickcontrols2 /usr/include/qt/QtQuickControls2/5.11.1/QtQuickControls2/private/qquickpaddedrectangle_p.h
qt5-quickcontrols2 /usr/include/qt/QtQuickControls2/5.11.1/QtQuickControls2/private/qquickplaceholdertext_p.h
qt5-quickcontrols2 /usr/include/qt/QtQuickControls2/5.11.1/QtQuickControls2/private/qquickproxytheme_p.h
qt5-quickcontrols2 /usr/include/qt/QtQuickControls2/5.11.1/QtQuickControls2/private/qquickstyle_p.h
qt5-quickcontrols2 /usr/include/qt/QtQuickControls2/5.11.1/QtQuickControls2/private/qquickstyleplugin_p.h
qt5-quickcontrols2 /usr/include/qt/QtQuickControls2/5.11.1/QtQuickControls2/private/qquickstyleselector_p.h
qt5-quickcontrols2 /usr/include/qt/QtQuickControls2/5.11.1/QtQuickControls2/private/qquickstyleselector_p_p.h
qt5-quickcontrols2 /usr/include/qt/QtQuickControls2/5.11.1/QtQuickControls2/private/qquicktheme_p.h
qt5-quickcontrols2 /usr/include/qt/QtQuickControls2/5.11.1/QtQuickControls2/private/qquicktumblerview_p.h
qt5-quickcontrols2 /usr/include/qt/QtQuickControls2/5.11.1/QtQuickControls2/private/qtquickcontrols2-config_p.h
qt5-quickcontrols2 /usr/include/qt/QtQuickControls2/5.11.1/QtQuickControls2/private/qtquickcontrols2global_p.h

Suru Label changes QQC2 Label default wrap mode

In QQC2, wordWrap is set to None by default (https://doc.qt.io/qt-5/qml-qtquick-text.html#wrapMode-prop). Suru style redefines that default and sets it to WordWrap (https://github.com/ubports/qqc2-suru-style/blob/xenial/qqc2-suru/Label.qml#L35). As a result, apps assuming that Label is a single-line text unless specified otherwise, are getting strange issues (rinigus/pure-maps#304). Please restore QQC2 default.