Today part of “what to expect in 4.10 in QML components”: Dialog. The Dialog components have been introduced in plasma since sone time, and are documented in the usual page. The components that may be used to create a dialog are:
- Dialog: unsurprising name: it creates a Plasma themed window with space for a title, a content and buttons. You have to create all of them, you’re on your own, but provides the window management and methods such as open(), close(), accepted() and rejected(). You usually don’t want to use this, unless you want some strange custom things in the titlebar area or in the buttons area.
- CommonDialog: is a Dialog, but provides a titlebar and the buttons, you want to use this in the 90% of the cases when you want to display custom content in a dialog.
- SelectionDialog: presents the user a list of items to chose from, useful to create menus when you want to modally ask “what of those items do you want?”
- QueryDialog: probably the most useful: is a simple dialog with text and two buttons. Used for things like confirmation dialogs like “are you sure you want to delete this item?”. It displays a text and two buttons, that default as “Ok” and “Cancel”, but their text is customizable.
It’s a while this API exists, but in 4.10 there was an important change in its look and feel in 4.10: Now if it’s possible the dialogs looks “inline”. It will be done on the same window as the plasmoid (i.e. on the “desktop”) and if provided with a visualParent property, it will have a comic balloon tip pointing to it. As usual, an image is worth a thousand words:
But what about if there isn’t enough space? For instance the dialog may be displayed from a Panel, where is impossible to have an inline dialog. Fear not, in this case the dialog will become a separate window, still working everywhere:
An “inline” behavior for dialogs is preferred because in this way questions are semantically and visually grouped with the object they belong to, and most important the desktop layer must not “interrupt” the user, it’s just background information.
The switch between an inline behavior and an external window is completely automatic, as usual, something that the plasmoid should never have to worry about.
buttons are too long on sides 😉 their size should depend on text lenght in each translation 🙂
Looks cool!
The work you’re doing with plasma is a perfect candidate for the QML desktop-components everybody is so excited about!
“buttons are too long on sides 😉 their size should depend on text lenght in each translation :)”
they will grow as needed, but they have a minimum size hint, to keep a clean grid and to not have too small hit targets.
It’s a common UI guideline in pretty much all operating systems.
Really cool, but how about making that “balloon tip look” default for panel plasmoids? (as the Gnome guys did in the Gnome Shell) It would look really nice and consistent. I mean, the dialog window in the second screenshot, which is default for any plasmoid and notifications on the panel, looks very ugly overlapping.
These new components fill a painful gap of Plasma Components for me: I have usecases for Dialog, SelectionDialog and QueryDialog. I’m looking forward to employ them in KTouch and being able to retire my copy of the balloon component from bodega-client.
Looks great!
But is there no way to programatically avoid that awkward linewrapping? It’s very prevalent in many KDE programs (along with awkward ellipses).
>”Do you really want to delete this
>alarm?”
…should *super preferably* be…
>”Do you really want to delete this alarm?”
The comic ballon tip pointer is ingenious. Whoever came up with that idea wins an internet and a half today.
The idea with the ballon tip is great! It greatly improves the usability by making the context visually apparent.
The only problem I see by making it part of the QML widget, is that it is then inconsistent with the usual behavior with dialogs, especially when using kwin-effects (non-active windows are darkened, which emphasizes the dialog).
Do you think it would be possible to combine both approaches (ballon tip + separate window)?
Since several already asked already about the possibility of having panel popups with balloon tips, will just answer here.
there are some technical problems with it at the moment, so while i’m not sure with this behavior as default, i would definitely like to be activable by the theme. For several technical reasons is probably Plasma2 material tough.
THis is not the only example of what i find strange, just the latest.
If you are prompting a confirmation to Delete (or do something) why are the buttons not “Yes” or “No” to confirm or deny the action?
Nice done.
I’d also suggest the ballon tip for the panel.
@Ian: putting “Yes” and “No” in a confirmation dialog is considered bad design. Users tend to ‘blindly’ clicking “Yes”, “OK” and similar confirmation buttons. By putting “Delete” we force them to think what they are doing…
Looks nice, great work! Much less intrusive than full dialogs.
“they will grow as needed, but they have a minimum size hint, to keep a clean grid and to not have too small hit targets.
It’s a common UI guideline in pretty much all operating systems.”
The problem with the minimum size hint is that it is too large. If the button were no larger than the “Cancel” text, it would already be large enough. I have a plasmoid with three buttons on a row and if I make the plasmoid less wide, then the buttons overflow the available space making things very ugly. The “solution” I used is to make a ShrinkableButton which replaces the large button by a Button with only an icon on it when the plasmoid becomes too small.