papyros/qml-material

:book: Material Design implemented in QtQuick

Papyros

General issue tracking and wikis for Papyros, along with a CMake superbuild for easy building of all the papyros projects.

Superbuild dependencies

• Qt 5.5, including the following modules:
  • QtQuick.Controls
  • QtGraphicalEffects
  • QtWayland
• Wayland
• CMake
• Extra CMake Modules
• QT5XDG
• KDE Frameworks
  • KConfig
  • KWallet
  • KDeclarative
  • Solid
  • NetworkManagerQt
  • ModemManagerQt (optional)
• ALSA or PulseAudio
• xdg-app compiled with --enable-libxdgapp

Building the superbuild

The CMakeLists.txt provides a superbuild which checks out and builds the following projects:

• qml-material
• libpapyros
• greenisland
• papyros-shell
• terminal-app
• settings-app
• software-app

To build the superbuild, run the following commands:

mkdir build; cd build
cmake .. -DCMAKE_INSTALL_PREFIX=/usr # or ~/.local for local builds
make

That's it! CMake will automatically download, build, and install the included projects!

To run the desktop shell, simply run:

papyros-session

qml-material's Issues

Dropdowns don't work in a dialog

The dropdown also uses the overlay layer, breaking the dialog

Say somewhere that it depends on quantum-os/qml-extras

There is nowhere to be found a note saying that qml-material depends on qml-extras, and the project doesn't work without it.

A little note in the README would suffice.

Awesome project, congratulations.

CardPage and CardSlideTransition are broken

CardPage still uses deprecated IconAction
property transition can't be set on a Page
theme.blackColor('secondary') is deprecated??
and others

I don't know what CardPage is supposed to do so i can't fix this.

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

Dialog.show() don't work with QQmlApplicationEngine

Dialogs works fine with qmlscene but i can't get it working with QQmlApplicationEngine.

When i call actionableDialog.show() method, i get; "...qml/Material/Popover.qml:40: TypeError: Cannot call method 'mapToItem' of null".

Pushing multiple pages to stack at once

This may already be possible and I'm just not seeing how (I see the PageStack pushFrom method, but I can't tell what it's for exactly), but it would be useful to be able to push several pages at once and only have one transition to the new top page (same as passing an array to http://doc.qt.io/qt-5/qml-qtquick-controls-stackview.html#push-method).

Install on Windows

How do I install qml-material in order to use it in my applications as normal QML import? Do I have to copy the qml files every time to my project or can I use it somehow like a shared libary?

Omit dynamic scoping issues

Disclaimer, I do not know Qml very well.

For the last hours I tried to make a "working" App from the material components and by "working" I mean: it opens and looks good but does not do anything. So far I have not been successful.

From what I can see, a big issue is that a lot of components reference ids and properties which are not defined in the component document. For example the ActionBar component property maxActionCount refers to the toolbar id/property which is not defined in the ActionBar. This means it must be defined in the parent Qml object when instantiated, as far as I understand. Same for the currentPage property of the Page component.

These references make it really hard to understand the components and use them correctly. After reading the Qml docs it seems to me that this is also not recommended to do if it can be avoided, especially if you build reusable components.

I hope somebody with more Qml knowledge can confirm or refute this.

PageStack leaks pages and transitions

It looks like the act of going back and forth is causing new pages and associated transitions to be created every time you go forwards or back. In Qt controls they use a Loader and have the page created on push and destroyed on pop. We may want to base off of their implementation, or try to duplicate their stack management.

Gitter

Hi Papyros!

Would it be possible to reach out to you via something like Gitter or similar for basic questions and help?

I'm running a small open source project too and have it very useful in getting people started and keeping in touch with how it is being used.

In this case, I just cloned this (absolutely wonderful!) repository and was playing around with the demos, but are having some issues that I'm sure relates to some basic misunderstanding of how to use it properly and so it would be great to be able to post quick questions somewhere.

If you would rather I open up issues, I'd be happy to do so instead.

Thanks,
Marcus

Automove a dialog on the center of screen

If we resize the main window or if the dialog window size change, the dialog is not recentered

Maybe it is good to make it centered on any changes if it is possible ?

Install on Ubuntu 14.04

Sorry if any inconvenience this question.

I am trying to install it on Ubuntu, but as I can only install Qt 5.3+ from the binary provided in qt.io I'm not able to install it.

Could someone help me with this installation?

I've tried to do this:

$ ./<PAHT_TO_QT_DIR>/Qt5.4.0/5.4/gcc_64/bin/qmake PATH_TO_QML_EXTRAS>/qml-extras/qml-extras.pro
$ make check
$ make install
$ ./<PAHT_TO_QT_DIR>/Qt5.4.0/5.4/gcc_64/bin/qmake <PATH_TO_QML_MATERIAL>/qml-material/qml-materials.pro
$ make
$ make check # Optional, make sure everything is working correctly
$ sudo make install

But on make check of the qml-extras occurs some errors.

How do I view examples/demo?

I'm fairly new to Qt and I was wondering what steps are needed to get the Material modules installed and how do I view main.qml? I'm using Qt5.3.2 on Linux Mint 17.

Checkbox animation bug when clicking on the label

Hello :)
When we click on the label of the checkbox, the checkbox state is switched. But there is not the wave who is going out of the checkbox (this wave is present when we click on the checkbox) !
I don't know if it's normal or not ;)

Sorry for my poor english i hope you've understood

Reference to JS out of project

PageStack.qml refers to ../qml-extras/utils.js, which is out of project scope. It can be put in separate git repo as a submodule.

Density problem for low desktop resolutions

Hi everyone :)
I've two screens : 1920x1080 and 1360x768.
All work fine on 1920x1080 but the text is very very very little and unreadable on 1360x768.
First image is on high resolution and the second on the lower resolution.
I thinks the problem come from units.dp, no ?

Add some examples

Add some examples of how the toolkit can be used.

Cannot add component to ApplicationWindow if it is not type Page

I have several .qml files in my project, some of which are not pages. One of these files is called PageModel.qml and is in the same directory as main.qml. In the main.qml under the ApplicationWindow, I tried to add PageModel{id: pagemodel} but I get an error at runtime of "Cannot assign object to list". This also happens when trying to add a component of type Window or Connections. All of these work as described when not using the Material library.

Gestures module

Hi everyone,
I was thinking about implementing the gestures from the spec as QML-components.
What do you think about it?
http://www.google.com/design/spec/patterns/gestures.html
greets, schmidi

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

Toolbar and tabbar disappear.

Hi papyros!

I downloaded the latest version of the demo application and then launched it. Then I clicked "Page Stack" button on right sidebar and "Push Subpage" button too. The page "Page Title" was opened. Then I clicked "Back" button. Once the main window was opened, toolbar was disappeared.

I use qml-material in my project. TabBar disappears as the toolbar when we are returning on the previous page.

Sorry for my poor english!

Dmitri.

when papyros are downloadable?

undefined variables

hey havent been around for a while but im happy to see the progress we are making so far. I noticed that that my latest clone of the papyros-shell is complaining about alot of values which seem non existing on this side of the project . now im typing i realize that maybe i should post this issue over there

papyros/papyros-shell#32

Radio button component

Implement the radio button component: http://www.google.com/design/spec/components/switches.html#switches-radio-button

Clean up project metadata

Add a README and COPYING file, and clean up source code headers.

Checkbox component

Implement the checkbox from Material Design: http://www.google.com/design/spec/components/switches.html#switches-checkbox

Demo don't work with QQmlApplicationEngine

I tried to launch the demo with QQmlApplicationEngine (with C++ code so). But, every time I launched it, the application start without showing any windows. That's why we need to don't forget to insert the statement visible:true in ApplicationWindow in QML.
I have got this problem for half a hour before found the problem :( !

Question about License

Hi,

I would like to know if it's possible to use qml-material in a closed source application that would be sold on Android or iOS market ?
Does the LGPLv2+ in case of QML permit this kind of use ?

Support the different Roboto styles styles

Upstream bug in Qt: https://bugreports.qt-project.org/browse/QTBUG-30851

We use the default Android font in our embedded application:
http://developer.android.com/design/style/typography.html

We want to use different flavors of this font (Regular, Light, Bold, Medium) in our app.

However, from QML, the font can only be specified by "font.family". All of these .ttf files contain the same font family name (which makes sense).

Setting font.bold to true on the Roboto Regular font produces a different end result than using the Roboto-bold.ttf file.
Likewise, playing around with font.weight does not yield any decent result. Both of these seem to process the existing font instead of looking for the different flavors of the font (like native applications do).
We need a way of accessing the different flavors of a font from QML.

For now, we have worked around this issue by editing the Roboto font and changing the "Family name" field and saving them as totally different fonts.

It looks like we'll have to work around this by renaming the various Roboto variants.

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

install

how i can install the material design on win7 , or Ubuntu 14.10??

How to use tabs ?

Hi :) !
I know it's not the better place to ask this but i don't know where ask this question.
I'm trying to use tabs but I don't understand how to do it. The traditionnal method (explained here http://qt-project.org/doc/qt-5/qml-qtquick-controls-tabview.html) don't work so can you tell me quickly please how your tabs system work ?
I see the code and I think I need to make Tabs element and push to it all tabs but I don't fully understand how to do it.

Thanks

Project ERROR: Unknown module(s) in QT: compositor

Hello, i installed Qt 5.4 RC in /opt an set the path to PATH=/opt/Qt5.4.0/5.4/gcc_64/bin:$PATH
and when i run qmake i get
Project ERROR: Unknown module(s) in QT: compositor

what am i missing?

Floating Action Button component

http://www.google.com/design/spec/components/buttons.html#buttons-floating-action-button

@ibeliever how are you thinking on implementing this one since we can't clip on a rounded rectangle (circle)?
I have been looking at options and i think the better one is to implement clipping in c++.
But i don't know how to do it.

Size of label in designer don't work

When working on a label, in the QtQuick designer, we can edit his size (http://uplmg.com/k4i see on bottom. I'm french so my QtCreator is in French :-p)

But changing this property don't set properly the size. So I take a look in the corresponding JS script.
I see font.pointSize: 30. I rename it by font.pixelSize: 30 and it work now !

I don't know if it's a bug or if I don't use the Label element correctly.

Create QtQuick.Controls style to theme pure Controls apps

• Move the styles out of the controls
• Install the styles to ${QML_INSTALL_DIR}/QtQuick/Controls/Styles/Material
• Update the styles to use Material properties only if they exist

Remaining components to split out styles for:

• RadioButton
• Slider
• TextField (pending port to QtQuick.Controls)

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

Update ProgressBar to use QtQuick.Controls

http://doc.qt.io/qt-5/qml-qtquick-controls-progressbar.html

Proper branch workflow

Doing all the work on the master branch is a bad practice, especially as the project gets bigger and gathers more contributors.
I suggest you add a "dev" branch, then one branch per feature or bugfix (e.g. "feature/Blabla"). Optionnaly, a "release" branch might be useful to review stable code before merging it into master as an official version.

MenuField height binding loop

The file /modules/Material/MenuField.qml has a looping height binding issue

In the Dropdown class in /modules/Material/MenuField.qml there are is a parent height that refers to its child while its child refers to its parents height. This causes binding errors when building.

  Dropdown {
            id: menu

            anchor: Item.TopLeft

            width: spinBox.width

             // This line is the culprit and causes errors.  
            height: Math.min(maxVisibleItems*units.dp(48) + units.dp(24), listView.contentHeight)

            ListView {
                id: listView

                width: menu.width
                height: menu.height

                interactive: true

                delegate: Standard {
                    id: delegateItem

                    text: modelData

                    onClicked: {
                        itemSelected(index)
                        listView.currentIndex = index
                        menu.close()
                    }
                }
            }

Maybe a good solution would be to use

height: maxVisibleItems*units.dp(48) + units.dp(24)

Instead of

height: Math.min(maxVisibleItems*units.dp(48) + units.dp(24), listView.contentHeight)

on line 97 of /modules/Material/MenuField.qml

I've been using that alternative and haven't noticed any effects.

Normalize ApplicationWindow setup

Right now there is very tight coupling between the ApplicationWindow, Toolbar, PageStack, Page and ActionBar. They reference items that may or may not be declared yet, and depending on how the application is started you can get hangs or null errors. Normally QML will want as much statically declared, and things that are dynamic are created via delegates or Loaders. The Page container has quite a few data elements (actions, tabs, transitions) that should really be exposed as models, and the PageStack uses delegates to render those models when they change. This will ensure everything is correctly set up before the bindings are hooked up.

I think the Page should really become an Object container with the actionbar, title and content properties. Then the PageStack would have a delegate that allows it to render the current item based on the index that is manipulated by push and pop..

There is problem with icons on Android.

Hi, papyros!

I have a problem with icons on Android:

file:///data/data/com.mydomain.myapplication/qt-reserved-files/qml/Material/Icon.qml:40 ((null)): file:///data/data/com.mydomain.myapplication/qt-reserved-files/qml/Material/Icon.qml:40:5: QML Image: Invalid image data: file:///data/data/com.mydomain.myapplication/qt-reserved-files/qml/Material/icons/navigation/arrow_back.svg

Also for icons: more_vert.svg, close.svg (I see that in log). And also for iOS.

The icon arrow_back.svg is not shown.

I use only arrow_back.svg (at subpage) but problem is for all above icons.

There are not problems on desktop (Ubuntu, MacOS).

Dmitri.

Documentation does not build [$5 awarded]

When building documentation it hangs generating the docs for ApplicationWindow.qml using up all the RAM in the machine, the only clue that i have found about this issue is that it happens with all the components that inherit something from QtQuick Controls.

The $5 bounty on this issue has been claimed at Bountysource.

Double-clicking back button on second page in stack puts app in inconsistent state

Create a simple app which pushes a second page to the pageStack, then double click the back button. This pops twice and leaves the app unusable (in my real app, it actually crashes; in the simple demo below, it just leaves the UI empty).

Demo:

import QtQuick 2.2
import Material 0.1
import Material.ListItems 0.1 as ListItem

ApplicationWindow {
   id: demo

   theme {
      accentColor: "#009688"
   }

   initialPage: page

   Page {
      id: page

      title: "Component Demo"

      Button {
         anchors.centerIn: parent
         text: "Push"
         onClicked: pageStack.push(c)
      }


   }
   Component {
      id: c
      Page {
        title: "Page 2"
      }
   }
}

Push the button, then double click the back button.

Move style elements to singletons

Right now there is an issue of theme, units, device and animations are in the Window object, so while they are global it is only if you have a Window object at the top level. This makes testing individual components in isolation difficult. These could easily become a QML singleton component that would allow them to be accessible without the need of a Window object.

How to visualize / test / develop

I'd love to help out with this project. I'm definitely following it, I committed a change for efficiency, and I'm working on my side on a launcher (you said you wanted to package apps with the OS and I believe in great launchers). I'm a good enough (read "average") developer.

How do I use any of what's in this repo? I'm on OSX, within QT, things look weird and I'm not even sure I understand what I see.

Reference to docs would be enough, a quick tutorial would be great ;-)

Licence?

I would strongly recommend you to licence this work under the LGPL Licence
https://tldrlegal.com/license/gnu-lesser-general-public-license-v2.1-%28lgpl-2.1%29

Implement focused state in Ink

This is used for buttons and icon buttons: http://www.google.com/design/spec/components/buttons.html

Left action button should show menu icon/behavior if page contains sidebar

Correct me if this is actually already implemented.

If a page contains a sidebar component, the actionbar should display the menu icon to perform showing the sidebar:

Once shown, since the sidebar is not drawn on top of the actionbar (maybe it should?), the icon should toggle to the back state to close the menu when clicked.

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

SimpleMenu list items dropdown does not fit to content widths

The dropdown that is opened from a SimpleMenu does not alter it's width based on it's contents, it is always a fixed width.

Example:

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

Add avatar/image component to ListItem [$5 awarded]

The $5 bounty on this issue has been claimed at Bountysource.

Component collection as a qml plugin

I think that we should prepare from this components collection single qml plugin. It's pretty simple with QQmlExtensionPlugin and I have experience here. If you agree with me let me do it.

Other thing is that for objects in my opinion we should use c++ classes. Same for simple utilities or singletons. With them we can expose enums for qml dialect which is important. This classes will be in this plugin to.

Good example here is Label element where you use string for style selection. We can use here enum from singleton.

Tabs

Hi :) ! How can we use tabs please ? Tabs are not included in the demo :p and i've a little bit of difficult to fully understand how to use it :)

Wrong density in Android Devices

Hi. I've successfully compiled and deployed the example qml on a LG Nexus 4. Screen density looks wrong, though. Device resolution is 768x1280. See attached screenshots.