Skip to content

Port and rework UI for Qt Quick/QML

Noah Davis requested to merge work/ndavis/spectacle-qml into master

There are still some parts that use Qt Widgets, such as the settings dialog, font dialog, color dialog, print dialog and popup menus. The Qt Quick port is needed for a future patch where screen recording will be added and it also allows more animations to be used. The UI was redesigned, partly because the old UI couldn't be ported nicely to QML and partly to improve the appearance of the UI.

There are 2 window classes for the main UIs. CaptureWindow is used for the rectangle capture mode and ViewerWindow is used for the other modes and viewing accepted regions from the rectangle capture mode. Both UIs support adding annotations.

Fullscreen Capture UI:

The UI is a lot like the old UI, but there are floating toolbars that expose more functionality.

  • Annotations, saving, copying and taking a new snapshot can be done directly.
  • Export, Options and Help menus can be accessed directly.
  • Info box no longer covers or overlaps with selection handles.
  • Antialiasing for selection handles is fixed.
  • Each screen now has its own fullscreen window, which fixes some issues on Wayland and X11.

Image Viewer UI (appears after a screenshot has been taken):

  • Main controls are consolidated into a single top toolbar: Save, Save As, Copy, Export (opens popup menu), Show Annotation Tools, Configure (opens settings dialog), Help (opens popup menu)
  • There is a right sidebar for selecting capture modes and related options that were in the old UI.
  • The whole UI doesn't completely transform when annotation controls are shown anymore. Instead, a vertical left side toolbar (tools) and a bottom toolbar (tool options) are added and the right sidebar slides away. Undo and Redo are added to the top toolbar.
  • It should be easier to understand the annotation UI now.
  • Annotations done in the Fullscreen Capture UI can still be undone/redone in the Image Viewer UI.

No screenshot taken UI (appears when configured to start without taking a screenshot):

  • Has buttons for each capture mode on the left
  • Has all the other options that were in the Image Viewer UI sidebar and the old UI on the right
  • Has buttons for opening the settings dialog and showing the help menu below the options.
  • The heading can be used to drag the window just to make moving the dialog around a bit more convenient.

The kImageAnnotator library was replaced by a custom annotation system because kImageAnnotator only worked with Qt Widgets and can't work in the rectangle capture mode since it has its own UI.

There is some unused code in this patch that is meant for the upcoming video recording feature.

BUG: 407843 BUG: 425311 BUG: 425853 BUG: 427117 BUG: 429141 BUG: 431278 BUG: 437495 BUG: 451838 BUG: 456399 BUG: 458956 BUG: 460689 BUG: 462521 FIXED-IN: 23.04

Fullscreen Capture UI
Screenshot_20221207_052432
Image Viewer UI
Screenshot_20221207_052647
No Screenshot UI
Screenshot_20221207_053432
Image Viewer Annotations
Screenshot_20221207_052825
Export Menu
Screenshot_20220823_141330
Options Menu
Screenshot_20220823_141058
Help Menu
Screenshot_20220823_141353
Annotation Options (sections are hidden based on what the active tool can use)
Screenshot_20221207_053046Screenshot_20221207_053136
Edited by Noah Davis

Merge request reports