Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Qt Quick Controls 2.0 chapter #203

Merged
merged 96 commits into from Dec 25, 2018
Merged

Conversation

e8johan
Copy link
Member

@e8johan e8johan commented Sep 19, 2018

This is work in progress - do not merge!

I've outlined where to add Qt Quick Controls 2.0 references and a general outline for the main chapter on Qt Quick Controls 2.0 and am looking for feedback.

Copy link

@mitchcurtis mitchcurtis left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure what kind of review you're after at this stage... probably more high-level, I guess, but I pointed out some grammar issues just in case.


- What controls exist
- How do the styles look
- How to use them on desktop

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What kind of content did you have planned for this section?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is an outline. The contents would answer these questions and introduce the topic.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I understand that it's an outline, I'm just curious about what you plan on putting here, on a high level.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So the "implementation for desktop" part of the example will cover the "How to use them on desktop" section?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As this is the highlevel introduction, this will be showing how to do something that fits onto a desktop with the controls. E.g. menus and such, and try to contrast that with the next section which will focus more on a device/phone style UI (e.g. one main window vs one document window, stackview vs dialogs, etc).
This will be more of a whirlwind tour, so some code demonstrating the elements and screenshots showing the possibilities. The actual details will be covered more in depth further down.

docs/controls/controls.rst Outdated Show resolved Hide resolved
Introduction to Controls
========================

- What controls exist

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this should say "Which controls exist". Or maybe "The list of controls" would be better.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This bullet is more of a placeholder for the contents planned. I want to add a set of paragraphs answering this question.

- What controls exist
- How do the styles look
- How to use them on desktop
- How to use them on devices

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What does this mean? What will the content be?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here, the contents is supposed to address these questions.

- Document Windows (one window per document instance)
- Dialogs (and layouts)
- Nested screens with stack view
- Side-by-side screens with page view

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's this one? Do you have an example image/screenshot? Which concrete types would this use?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These would probably be one sub-section each discussing best practices for setting up these common interaction patterns.

docs/qmlstart/qmlstart.rst Outdated Show resolved Hide resolved
@e8johan
Copy link
Member Author

e8johan commented Sep 19, 2018

Good feedback - thanks!

I'm more after high level feedback on the flow. Does the high level story hold (answering all the bullet questions in this order) and have I covered all the key topics?

@e8johan e8johan changed the title Qt Quick Controls 2.0 chapter [WIP) Qt Quick Controls 2.0 chapter [WIP] Sep 19, 2018
@mitchcurtis
Copy link

Good feedback - thanks!

I'm more after high level feedback on the flow. Does the high level story hold (answering all the bullet questions in this order) and have I covered all the key topics?

I think it looks fine.

Some other things that may be worth mentioning when you get to the content stage:

  • Palette support, although not supported for each style yet, might be worth mentioning as the best solution for tweaking colours without overriding whole delegates and hence losing the style.
  • The imagine style would be worth mentioning as a designer-friendly solution for creating a style without having to code.

Copy link
Member Author

@e8johan e8johan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I introduced this in the Introduction section that I just pushed.


- What controls exist
- How do the styles look
- How to use them on desktop
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As this is the highlevel introduction, this will be showing how to do something that fits onto a desktop with the controls. E.g. menus and such, and try to contrast that with the next section which will focus more on a device/phone style UI (e.g. one main window vs one document window, stackview vs dialogs, etc).
This will be more of a whirlwind tour, so some code demonstrating the elements and screenshots showing the possibilities. The actual details will be covered more in depth further down.

.. literalinclude:: src/imageviewer-desktop/main.qml
:lines: 1-6, 10-13, 83-

The ``ApplicationWindow`` consists of four main areas as shown below. The menu bar, tool bar and status bar are usually populated by instances of ``MenuBar``, ``ToolBar`` and ``StatusBar`` controls respectively, while the contents area is where the children of the window goes. Notice that the image viewer application does not feature a status bar, that is why it is missing from the code show here, as well as from the figure above.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

StatusBar is a Controls 1 type, so we should leave it out.

Imagine .. image:: assets/style-imagine.png
========= =====================================

.. todo:: Pick a better UI to grab the example screenshot from.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You could probably use the screenshots from the docs if you wanted. E.g.: https://doc.qt.io/qt-5/qtquickcontrols2-material.html

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That would imply that the CLA applies to the Qt resources, so I'll leave it for now.

@@ -0,0 +1,86 @@
import QtQuick 2.0
import QtQuick.Controls 2.4
import QtQuick.Dialogs 1.2

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if we should use the dialogs from Qt.labs.platform instead?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wanted a pure QML solution first, since the labs module requires QtWidgets. I've added a note about this, and there is a separate section on the labs module.

@e8johan e8johan merged commit cc1e543 into qmlbook:master Dec 25, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants