papyros / qml-material Goto Github PK
View Code? Open in Web Editor NEW:book: Material Design implemented in QtQuick
License: GNU Lesser General Public License v2.1
:book: Material Design implemented in QtQuick
License: GNU Lesser General Public License v2.1
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 :( !
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.
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.
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 ?
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?
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.
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.
This is used for buttons and icon buttons: http://www.google.com/design/spec/components/buttons.html
Remaining components to split out styles for:
Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.
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.
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.
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
Add a README and COPYING file, and clean up source code headers.
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.
how i can install the material design on win7 , or Ubuntu 14.10??
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
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.
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
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?
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.
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
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
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.
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.
The $5 bounty on this issue has been claimed at Bountysource.
Implement the checkbox from Material Design: http://www.google.com/design/spec/components/switches.html#switches-checkbox
Add some examples of how the toolkit can be used.
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.
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.
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).
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.
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.
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 :)
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..
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.
The dropdown also uses the overlay layer, breaking the dialog
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".
/modules/Material/MenuField.qml
has a looping height binding issueIn 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.
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.
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.
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.
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 ;-)
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.
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.htmlWe 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 withfont.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.
Implement the radio button component: http://www.google.com/design/spec/components/switches.html#switches-radio-button
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.