File 2000-ui.patch of Package spectacle

Overview Repositories Revisions Requests Users Attributes Meta

File 2000-ui.patch of Package spectacle (Revision cddf028298e3d095da79031f987f4fbb)

Currently displaying revision cddf028298e3d095da79031f987f4fbb , Show latest

diff --git a/src/CMakeLists.txt b/src/CMakeLists.txt
index 1b735910a5cbcb0c60f6f8dffc3bdb95685d56f7..07558eda53b250b063ba5f1ae41540b8f6007599 100644
--- a/src/CMakeLists.txt
+++ b/src/CMakeLists.txt
@@ -143,6 +143,7 @@ qt_add_qml_module(spectacle
     Gui/AnnotationsToolBarContents.qml
     Gui/ButtonGrid.qml
     Gui/CaptureModeButtonsColumn.qml
+    Gui/CaptureModeTabBar.qml
     Gui/CaptureOptions.qml
     Gui/CaptureSettingsColumn.qml
     Gui/CopiedMessage.qml
diff --git a/src/Gui/ButtonGrid.qml b/src/Gui/ButtonGrid.qml
index bb158446707912d1017b78cc6fa5f7f2a03b59b9..7d49242e92c1ab7852a24f8d43b4f664cc8b2b8d 100644
--- a/src/Gui/ButtonGrid.qml
+++ b/src/Gui/ButtonGrid.qml
@@ -9,10 +9,10 @@ import org.kde.spectacle.private
 
 Grid {
     id: root
-    property int displayMode: QQC.AbstractButton.TextBesideIcon
+    property int displayMode: QQC.AbstractButton.IconOnly
     property int focusPolicy: Qt.StrongFocus
     readonly property bool mirrored: effectiveLayoutDirection === Qt.RightToLeft
-    property bool animationsEnabled: true
+    property bool animationsEnabled: false
 
     clip: childrenRect.width > width || childrenRect.height > height
     horizontalItemAlignment: Grid.AlignHCenter
diff --git a/src/Gui/CaptureModeTabBar.qml b/src/Gui/CaptureModeTabBar.qml
new file mode 100644
index 0000000000000000000000000000000000000000..6f3d3a3149e4217ab33080fcc67bed1364aa9bd2
--- /dev/null
+++ b/src/Gui/CaptureModeTabBar.qml
@@ -0,0 +1,68 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls as QQC
+import org.kde.kirigami as Kirigami
+
+Kirigami.AbstractApplicationHeader {
+    id: root
+
+    property int currentIndex: 0
+
+    rightPadding: Kirigami.Units.largeSpacing
+    leftPadding: Kirigami.Units.largeSpacing
+
+    RowLayout {
+        width: parent.width
+        spacing: 0
+
+        readonly property real preferredButtonWidth: (width - spacing) / 2
+
+        TabButton {
+            Layout.preferredWidth: parent.preferredButtonWidth
+            checked: root.currentIndex === 0
+            icon.name: "camera-photo"
+            text: i18nc("@title:tab", "Screenshot")
+
+            onClicked: root.currentIndex = 0
+        }
+
+        TabButton {
+            Layout.preferredWidth: parent.preferredButtonWidth
+            checked: root.currentIndex === 1
+            icon.name: "camera-photo"
+            text: i18nc("@title:tab", "Recording")
+
+            onClicked: root.currentIndex = 1
+        }
+    }
+
+    component TabButton: Kirigami.NavigationTabButton {
+        id: button
+        autoExclusive: true
+        checkable: true
+        display: QQC.AbstractButton.TextBesideIcon
+        padding: Kirigami.Units.gridUnit / 2
+        contentItem: Item {
+            implicitWidth: row.implicitWidth
+            implicitHeight: row.implicitHeight
+
+            RowLayout {
+                id: row
+                anchors.centerIn: parent
+                width: Math.min(implicitWidth, parent.width)
+
+                Kirigami.Icon {
+                    implicitWidth: button.icon.width
+                    implicitHeight: button.icon.height
+                    source: button.icon.name
+                }
+
+                QQC.Label {
+                    Layout.fillWidth: true
+                    elide: Text.ElideRight
+                    text: button.text
+                }
+            }
+        }
+    }
+}
diff --git a/src/Gui/CaptureOptions.qml b/src/Gui/CaptureOptions.qml
index fe7879d571cf91f75aa0d65c6e1fe6abb8ca349d..1aa1d7ec471e35a3bf083fc311bcd3901b37eb22 100644
--- a/src/Gui/CaptureOptions.qml
+++ b/src/Gui/CaptureOptions.qml
@@ -9,36 +9,10 @@ import org.kde.spectacle.private
 
 Column {
     spacing: Kirigami.Units.mediumSpacing
-    Kirigami.Heading {
-        anchors.left: parent.left
-        width: Math.max(implicitWidth, parent.width)
-        topPadding: -captureHeadingMetrics.descent
-        bottomPadding: -captureHeadingMetrics.descent + parent.spacing
-        text: i18n("Take a new screenshot")
-        horizontalAlignment: Text.AlignLeft
-        verticalAlignment: Text.AlignVCenter
-        level: 3
-        // If recording is supported, there would be a tab bar right above this
-        // label with largely the same text, creating redundancy.
-        visible: !VideoPlatform.supportedRecordingModes
-        FontMetrics {
-            id: captureHeadingMetrics
-        }
-    }
     CaptureModeButtonsColumn {
         anchors.left: parent.left
         width: Math.max(implicitWidth, parent.width)
     }
-    Kirigami.Heading {
-        anchors.left: parent.left
-        width: Math.max(implicitWidth, parent.width)
-        topPadding: -captureHeadingMetrics.descent + parent.spacing
-        bottomPadding: -captureHeadingMetrics.descent + parent.spacing
-        horizontalAlignment: Text.AlignLeft
-        verticalAlignment: Text.AlignVCenter
-        text: i18nc("@title:group", "Screenshot Settings")
-        level: 3
-    }
     CaptureSettingsColumn {
         anchors.left: parent.left
         width: Math.max(Layout.minimumWidth, parent.width)
diff --git a/src/Gui/DialogPage.qml b/src/Gui/DialogPage.qml
index 89679ed375f90a0d265dac4fbe3db19a317a0151..1c6c82e13af12ad72482ebcaee450aca5c6f1426 100644
--- a/src/Gui/DialogPage.qml
+++ b/src/Gui/DialogPage.qml
@@ -154,6 +154,11 @@ EmptyPage {
         }
     }
 
+    header: CaptureModeTabBar {
+        id: tabBar
+        visible: VideoPlatform.supportedRecordingModes && !SpectacleCore.isRecording
+    }
+
     // Not ColumnLayout because layouts don't work well with animations.
     contentItem: Column {
         spacing: Kirigami.Units.mediumSpacing * 2
@@ -170,73 +175,14 @@ EmptyPage {
                 }
             }
         }
-        Loader {
-            width: Math.max(parent.width, implicitWidth)
-            active: VideoPlatform.supportedRecordingModes
-            visible: active
-            sourceComponent: Row {
-                // We don't want the visuals of a tab because they don't look nice here with
-                // qqc2-desktop-style, but this is functionally a tab.
-                // Maybe use a segmented control style in the future when one becomes available.
-                QQC.ToolButton {
-                    id: screenshotHeadingButton
-                    Accessible.role: Accessible.PageTab
-                    width: Math.max(parent.width / 2, dprRound(implicitWidth), dprRound(recordingHeadingButton.implicitWidth))
-                    height: Math.max(parent.height, dprRound(implicitHeight), dprRound(recordingHeadingButton.implicitHeight))
-                    // Extend the clickable area between the buttons
-                    leftInset: !mirrored ? 0 : Kirigami.Units.mediumSpacing
-                    rightInset: mirrored ? 0 : Kirigami.Units.mediumSpacing
-                    padding: Kirigami.Units.mediumSpacing * 2
-                    // Visually compensate for inset to make it look like spacing
-                    leftPadding: padding + leftInset
-                    rightPadding: padding + rightInset
-                    // Make the padding look more even with Latin-like scripts.
-                    // There should still be more than enough space for other scripts.
-                    topPadding: Math.max(0, padding - headingFontMetrics.descent)
-                    bottomPadding: Math.max(0, padding - headingFontMetrics.descent)
-                    // We do `pointSize * sqrt(2)` because `pointSize * 2` would actually result
-                    // in a font that uses 4x more area than the base font would have.
-                    font.pointSize: Application.font.pointSize * 1.414213562373095
-                    text: i18nc("@title:tab", "Screenshot")
-                    checkable: true
-                    checked: true
-                    autoExclusive: true
-                    FontMetrics {
-                        id: headingFontMetrics
-                        font: screenshotHeadingButton.font
-                    }
-                    onCheckedChanged: if (checked && contentLoader.sourceComponent !== screenshotComponent) {
-                        contentLoader.sourceComponent = screenshotComponent
-                    }
-                }
-
-                QQC.ToolButton {
-                    id: recordingHeadingButton
-                    Accessible.role: screenshotHeadingButton.Accessible.role
-                    width: screenshotHeadingButton.width
-                    height: screenshotHeadingButton.height
-                    leftInset: !mirrored ? Kirigami.Units.mediumSpacing : 0
-                    rightInset: mirrored ? Kirigami.Units.mediumSpacing : 0
-                    padding: screenshotHeadingButton.padding
-                    leftPadding: padding + leftInset
-                    rightPadding: padding + rightInset
-                    topPadding: screenshotHeadingButton.topPadding
-                    bottomPadding: screenshotHeadingButton.bottomPadding
-                    font: screenshotHeadingButton.font
-                    text: i18nc("@title:tab", "Recording")
-                    checkable: true
-                    checked: false
-                    autoExclusive: true
-                    onCheckedChanged: if (checked && contentLoader.sourceComponent !== recordingComponent) {
-                        contentLoader.sourceComponent = recordingComponent
-                    }
-                }
-            }
-        }
         Loader {
             id: contentLoader
             width: Math.max(parent.width, implicitWidth)
-            sourceComponent: screenshotComponent
+            sourceComponent: switch (tabBar.currentIndex) {
+                case 0: return screenshotComponent
+                case 1: return recordingComponent
+                default: return null
+            }
         }
     }
 
diff --git a/src/Gui/ImageCaptureOverlay.qml b/src/Gui/ImageCaptureOverlay.qml
index efde4ee5cbf331d46e90295ca21490e72a7ef7ab..b3ec673e38be08c26a6459dcde18b247642433c7 100644
--- a/src/Gui/ImageCaptureOverlay.qml
+++ b/src/Gui/ImageCaptureOverlay.qml
@@ -181,8 +181,7 @@ MouseArea {
             && !contains(mapFromItem(root, root.mouseX, root.mouseY))
             && !root.pressed
             && !annotations.enabled
-            && !mtbDragHandler.active
-            && !atbDragHandler.active
+            && !toolbarsLayoutDragHandler.active
             && !G.rectIntersects(SelectionEditor.handlesRect, Qt.rect(x, y, width, height))
         Behavior on opacity {
             NumberAnimation {
@@ -307,7 +306,7 @@ MouseArea {
                     return Qt.AlignBaseline
                 }
             }
-            readonly property bool normallyVisible: !Selection.empty && !(mainToolBar.visible && mainToolBar.valignment === ssToolTip.valignment)
+            readonly property bool normallyVisible: !Selection.empty && !mainToolBar.visible
             Binding on x {
                 value: contextWindow.dprRound(Selection.horizontalCenter - ssToolTip.width / 2)
                 when: ssToolTip.normallyVisible
@@ -361,231 +360,197 @@ MouseArea {
         Connections {
             target: Selection
             function onEmptyChanged() {
-                if (!Selection.empty
-                    && (mainToolBar.rememberPosition || atbLoader.rememberPosition)) {
-                    mainToolBar.rememberPosition = false
-                    atbLoader.rememberPosition = false
+                if (!Selection.empty) {
+                    toolbarsLayout.rememberPosition = false;
                 }
             }
         }
 
-        // Main ToolBar
-        FloatingToolBar {
-            id: mainToolBar
+        RowLayout {
+            id: toolbarsLayout
+            spacing: Kirigami.Units.smallSpacing
             property bool rememberPosition: false
-            readonly property int valignment: {
+            readonly property int alignment: {
                 if (Selection.empty) {
-                    return 0
+                    return 0;
                 }
-                if (3 * height + topPadding + Kirigami.Units.mediumSpacing
-                    <= SelectionEditor.screensRect.height - SelectionEditor.handlesRect.bottom
-                ) {
-                    return Qt.AlignBottom
-                } else if (3 * height + bottomPadding + Kirigami.Units.mediumSpacing
-                    <= SelectionEditor.handlesRect.top
-                ) {
-                    return Qt.AlignTop
-                } else {
-                    // At the bottom of the inside of the selection rect.
-                    return Qt.AlignBaseline
+                const maxHeight = 2 * height + Kirigami.Units.mediumSpacing;
+                const [min, max] = [
+                    SelectionEditor.screensRect.y,
+                    SelectionEditor.screensRect.y + SelectionEditor.screensRect.height,
+                ];
+                if (SelectionEditor.handlesRect.top - maxHeight >= min) {
+                    return Qt.AlignTop;
                 }
-            }
-            readonly property bool normallyVisible: {
-                let emptyHovered = (root.containsMouse || annotations.hovered) && Selection.empty
-                let menuVisible = ExportMenu.visible
-                menuVisible |= OptionsMenu.visible
-                menuVisible |= HelpMenu.visible
-                let pressed = SelectionEditor.dragLocation || annotations.anyPressed
-                return (emptyHovered || !Selection.empty || menuVisible) && !pressed
+                if (SelectionEditor.handlesRect.bottom + maxHeight <= max) {
+                    return Qt.AlignBottom;
+                }
+                return Qt.AlignBaseline
             }
             Binding on x {
                 value: {
-                    const v = Selection.empty ?
-                        (root.width - mainToolBar.width) / 2 + annotations.viewportRect.x
-                        : Selection.horizontalCenter - mainToolBar.width / 2
-                    return Math.max(mainToolBar.leftPadding, // min value
-                           Math.min(contextWindow.dprRound(v),
-                                    SelectionEditor.screensRect.width - mainToolBar.width - mainToolBar.rightPadding)) // max value
+                    let x;
+                    if (Selection.empty) {
+                        x = SelectionEditor.screensRect.x + (SelectionEditor.screensRect.width - toolbarsLayout.width) / 2;
+                    } else {
+                        x = Math.max(
+                                SelectionEditor.screensRect.x,
+                                Math.min(
+                                    Selection.horizontalCenter - toolbarsLayout.width / 2,
+                                    SelectionEditor.screensRect.x + SelectionEditor.screensRect.width - toolbarsLayout.width
+                                )
+                            );
+                    }
+                    return contextWindow.dprRound(x);
                 }
-                when: mainToolBar.normallyVisible && !mainToolBar.rememberPosition
+                when: mainToolBar.normallyVisible && !toolbarsLayout.rememberPosition
                 restoreMode: Binding.RestoreNone
             }
             Binding on y {
                 value: {
-                    let v = 0
-                    // put above selection if not enough room below selection
-                    if (mainToolBar.valignment & Qt.AlignTop) {
-                        v = SelectionEditor.handlesRect.top
-                            - mainToolBar.height - mainToolBar.bottomPadding
-                    } else if (mainToolBar.valignment & Qt.AlignBottom) {
-                        v = SelectionEditor.handlesRect.bottom + mainToolBar.topPadding
-                    } else if (mainToolBar.valignment & Qt.AlignBaseline) {
-                        v = Math.min(Selection.bottom, SelectionEditor.handlesRect.bottom - Kirigami.Units.gridUnit)
-                            - mainToolBar.height - mainToolBar.bottomPadding
+                    let y;
+                    if (toolbarsLayout.alignment & Qt.AlignTop) {
+                        y = SelectionEditor.handlesRect.top - toolbarsLayout.height - Kirigami.Units.mediumSpacing;
+                    } else if (toolbarsLayout.alignment & Qt.AlignBottom) {
+                        y = SelectionEditor.handlesRect.bottom + Kirigami.Units.mediumSpacing;
+                    } else if (toolbarsLayout.alignment & Qt.AlignBaseline) {
+                        y = Math.min(Selection.bottom, SelectionEditor.handlesRect.bottom - Kirigami.Units.gridUnit)
+                                - toolbarsLayout.height - Kirigami.Units.mediumSpacing;
                     } else {
-                        v = (mainToolBar.height / 2) - mainToolBar.parent.y
+                        y = SelectionEditor.screensRect.y + toolbarsLayout.height / 2;
                     }
-                    return contextWindow.dprRound(v)
+                    return contextWindow.dprRound(y);
                 }
-                when: mainToolBar.normallyVisible && !mainToolBar.rememberPosition
+                when: mainToolBar.normallyVisible && !toolbarsLayout.rememberPosition
                 restoreMode: Binding.RestoreNone
             }
-            visible: opacity > 0
-            opacity: normallyVisible && G.rectIntersects(Qt.rect(x,y,width,height), annotations.viewportRect)
-            Behavior on opacity {
-                NumberAnimation {
-                    duration: Kirigami.Units.longDuration
-                    easing.type: Easing.OutCubic
-                }
-            }
-            layer.enabled: true // improves the visuals of the opacity animation
-            focusPolicy: Qt.NoFocus
-            contentItem: MainToolBarContents {
-                id: mainToolBarContents
-                focusPolicy: Qt.NoFocus
-                displayMode: QQC.AbstractButton.TextBesideIcon
-                showSizeLabel: mainToolBar.valignment === ssToolTip.valignment
-                imageSize: G.rawSize(Selection.size, SelectionEditor.devicePixelRatio)
-            }
-
-            DragHandler { // parent is contentItem and parent is a read-only property
-                id: mtbDragHandler
+            DragHandler {
+                id: toolbarsLayoutDragHandler
                 enabled: Selection.empty
-                target: mainToolBar
                 acceptedButtons: Qt.LeftButton
                 margin: mainToolBar.padding
-                xAxis.minimum: annotations.viewportRect.x
-                xAxis.maximum: annotations.viewportRect.x + root.width - mainToolBar.width
-                yAxis.minimum: annotations.viewportRect.y
-                yAxis.maximum: annotations.viewportRect.y + root.height - mainToolBar.height
-                cursorShape: enabled ?
-                    (active ? Qt.ClosedHandCursor : Qt.OpenHandCursor)
-                    : undefined
-                onActiveChanged: if (active && !mainToolBar.rememberPosition) {
-                    mainToolBar.rememberPosition = true
+                xAxis.minimum: SelectionEditor.screensRect.x
+                xAxis.maximum: SelectionEditor.screensRect.x + SelectionEditor.screensRect.width - toolbarsLayout.width
+                yAxis.minimum: SelectionEditor.screensRect.y
+                yAxis.maximum: SelectionEditor.screensRect.y + SelectionEditor.screensRect.height - toolbarsLayout.height
+                cursorShape: enabled ? (active ? Qt.ClosedHandCursor : Qt.OpenHandCursor) : undefined
+                onActiveChanged: {
+                    if (active) {
+                        toolbarsLayout.rememberPosition = true;
+                    }
                 }
             }
-        }
-
-        AnimatedLoader {
-            id: atbLoader
-            property bool rememberPosition: false
-            readonly property int valignment: mainToolBar.valignment & (Qt.AlignTop | Qt.AlignBaseline) ?
-                Qt.AlignTop : Qt.AlignBottom
-            active: visible && mainToolBar.visible
-            onActiveChanged: if (!active && rememberPosition
-                && !contextWindow.annotating) {
-                rememberPosition = false
-            }
-            state: mainToolBar.normallyVisible
-                && contextWindow.annotating ? "active" : "inactive"
-
-            Binding on x {
-                value: {
-                    const min = mainToolBar.x
-                    const target = contextWindow.dprRound(mainToolBar.x + (mainToolBar.width - atbLoader.width) / 2)
-                    const max = mainToolBar.x + mainToolBar.width - atbLoader.width
-                    return Math.max(min, Math.min(target, max))
+            // Main ToolBar
+            FloatingToolBar {
+                id: mainToolBar
+                readonly property bool normallyVisible: {
+                    let emptyHovered = (root.containsMouse || annotations.hovered) && Selection.empty
+                    let menuVisible = ExportMenu.visible
+                    menuVisible |= OptionsMenu.visible
+                    menuVisible |= HelpMenu.visible
+                    let pressed = SelectionEditor.dragLocation || annotations.anyPressed
+                    return (emptyHovered || !Selection.empty || menuVisible) && !pressed
                 }
-                when: !atbLoader.rememberPosition
-                restoreMode: Binding.RestoreNone
-            }
-            Binding on y {
-                value: contextWindow.dprRound(atbLoader.valignment & Qt.AlignTop ?
-                    mainToolBar.y - atbLoader.height - Kirigami.Units.mediumSpacing
-                    : mainToolBar.y + mainToolBar.height + Kirigami.Units.mediumSpacing)
-                when: !atbLoader.rememberPosition
-                restoreMode: Binding.RestoreNone
-            }
-
-            DragHandler { // parented to contentItem
-                id: atbDragHandler
-                enabled: Selection.empty
-                acceptedButtons: Qt.LeftButton
-                xAxis.minimum: annotations.viewportRect.x
-                xAxis.maximum: annotations.viewportRect.x + root.width - atbLoader.width
-                yAxis.minimum: annotations.viewportRect.y
-                yAxis.maximum: annotations.viewportRect.y + root.height - atbLoader.height
-                cursorShape: enabled ?
-                    (active ? Qt.ClosedHandCursor : Qt.OpenHandCursor)
-                    : undefined
-                onActiveChanged: if (active && !atbLoader.rememberPosition) {
-                    atbLoader.rememberPosition = true
+                visible: opacity > 0
+                opacity: normallyVisible && G.rectIntersects(Qt.rect(x,y,width,height), annotations.viewportRect)
+                Behavior on opacity {
+                    NumberAnimation {
+                        duration: Kirigami.Units.longDuration
+                        easing.type: Easing.OutCubic
+                    }
                 }
-            }
-
-            sourceComponent: FloatingToolBar {
-                id: annotationsToolBar
+                layer.enabled: true // improves the visuals of the opacity animation
                 focusPolicy: Qt.NoFocus
-                contentItem: AnnotationsToolBarContents {
-                    id: annotationsContents
-                    displayMode: QQC.AbstractButton.IconOnly
+                contentItem: MainToolBarContents {
+                    id: mainToolBarContents
                     focusPolicy: Qt.NoFocus
+                    displayMode: QQC.AbstractButton.IconOnly
+                    showSizeLabel: true
+                    imageSize: G.rawSize(Selection.size, SelectionEditor.devicePixelRatio)
                 }
+            }
 
-                topLeftRadius: optionsToolBar.visible
-                    && optionsToolBar.x === 0
-                    && atbLoader.valignment & Qt.AlignTop ? 0 : radius
-                topRightRadius: optionsToolBar.visible
-                    && optionsToolBar.x === width - optionsToolBar.width
-                    && atbLoader.valignment & Qt.AlignTop ? 0 : radius
-                bottomLeftRadius: optionsToolBar.visible
-                    && optionsToolBar.x === 0
-                    && atbLoader.valignment & Qt.AlignBottom ? 0 : radius
-                bottomRightRadius: optionsToolBar.visible
-                    && optionsToolBar.x === width - optionsToolBar.width
-                    && atbLoader.valignment & Qt.AlignBottom ? 0 : radius
-
-                // Exists purely for cosmetic reasons to make the border of
-                // optionsToolBar that meets annotationsToolBar look better
-                Rectangle {
-                    id: borderBg
-                    z: -1
-                    visible: optionsToolBar.visible
-                    opacity: optionsToolBar.opacity
-                    parent: annotationsToolBar
-                    x: optionsToolBar.x + annotationsToolBar.background.border.width
-                    y: atbLoader.valignment & Qt.AlignTop ?
-                        optionsToolBar.y + optionsToolBar.height : optionsToolBar.y
-                    width: optionsToolBar.width - annotationsToolBar.background.border.width * 2
-                    height: contextWindow.dprRound(1)
-                    color: annotationsToolBar.background.color
-                }
+            AnimatedLoader {
+                id: atbLoader
+                readonly property int valignment: toolbarsLayout.alignment & (Qt.AlignTop | Qt.AlignBaseline) ?
+                    Qt.AlignTop : Qt.AlignBottom
+                active: visible && mainToolBar.visible
+                state: mainToolBar.normallyVisible
+                    && contextWindow.annotating ? "active" : "inactive"
 
-                AnimatedLoader {
-                    id: optionsToolBar
-                    parent: annotationsToolBar
-                    x: {
-                        let targetX = annotationsContents.x
-                        const checkedButton = annotationsContents.checkedButton
-                        if (checkedButton) {
-                            targetX += checkedButton.x + (checkedButton.width - width) / 2
-                        }
-                        return Math.max(0, // min value
-                               Math.min(contextWindow.dprRound(targetX),
-                                        parent.width - width)) // max value
+                sourceComponent: FloatingToolBar {
+                    id: annotationsToolBar
+                    focusPolicy: Qt.NoFocus
+                    contentItem: AnnotationsToolBarContents {
+                        id: annotationsContents
+                        displayMode: QQC.AbstractButton.IconOnly
+                        focusPolicy: Qt.NoFocus
                     }
-                    y: atbLoader.valignment & Qt.AlignTop ?
-                        -optionsToolBar.height + borderBg.height
-                        : optionsToolBar.height - borderBg.height
-                    state: if (AnnotationDocument.tool.options !== AnnotationTool.NoOptions
-                        || (AnnotationDocument.tool.type === AnnotationTool.SelectTool
-                            && AnnotationDocument.selectedItem.options !== AnnotationTool.NoOptions)
-                    ) {
-                        return "active"
-                    } else {
-                        return "inactive"
+
+                    topLeftRadius: optionsToolBar.visible
+                        && optionsToolBar.x === 0
+                        && atbLoader.valignment & Qt.AlignTop ? 0 : radius
+                    topRightRadius: optionsToolBar.visible
+                        && optionsToolBar.x === width - optionsToolBar.width
+                        && atbLoader.valignment & Qt.AlignTop ? 0 : radius
+                    bottomLeftRadius: optionsToolBar.visible
+                        && optionsToolBar.x === 0
+                        && atbLoader.valignment & Qt.AlignBottom ? 0 : radius
+                    bottomRightRadius: optionsToolBar.visible
+                        && optionsToolBar.x === width - optionsToolBar.width
+                        && atbLoader.valignment & Qt.AlignBottom ? 0 : radius
+
+                    // Exists purely for cosmetic reasons to make the border of
+                    // optionsToolBar that meets annotationsToolBar look better
+                    Rectangle {
+                        id: borderBg
+                        z: -1
+                        visible: optionsToolBar.visible
+                        opacity: optionsToolBar.opacity
+                        parent: annotationsToolBar
+                        x: optionsToolBar.x + annotationsToolBar.background.border.width
+                        y: atbLoader.valignment & Qt.AlignTop ?
+                            optionsToolBar.y + optionsToolBar.height : optionsToolBar.y
+                        width: optionsToolBar.width - annotationsToolBar.background.border.width * 2
+                        height: contextWindow.dprRound(1)
+                        color: annotationsToolBar.background.color
                     }
-                    sourceComponent: FloatingToolBar {
-                        focusPolicy: Qt.NoFocus
-                        contentItem: AnnotationOptionsToolBarContents {
-                            displayMode: QQC.AbstractButton.IconOnly
+
+                    AnimatedLoader {
+                        id: optionsToolBar
+                        parent: annotationsToolBar
+                        x: {
+                            let targetX = annotationsContents.x
+                            const checkedButton = annotationsContents.checkedButton
+                            if (checkedButton) {
+                                targetX += checkedButton.x + (checkedButton.width - width) / 2
+                            }
+                            return Math.max(0, // min value
+                                            Math.min(contextWindow.dprRound(targetX),
+                                                     parent.width - width)) // max value
+                        }
+                        y: atbLoader.valignment & Qt.AlignTop ?
+                            -optionsToolBar.height + borderBg.height
+                            : optionsToolBar.height - borderBg.height
+                        state: if (AnnotationDocument.tool.options !== AnnotationTool.NoOptions
+                            || (AnnotationDocument.tool.type === AnnotationTool.SelectTool
+                                && AnnotationDocument.selectedItem.options !== AnnotationTool.NoOptions)
+                        ) {
+                            return "active"
+                        } else {
+                            return "inactive"
+                        }
+                        sourceComponent: FloatingToolBar {
                             focusPolicy: Qt.NoFocus
+                            contentItem: AnnotationOptionsToolBarContents {
+                                displayMode: QQC.AbstractButton.IconOnly
+                                focusPolicy: Qt.NoFocus
+                            }
+                            topLeftRadius: atbLoader.valignment & Qt.AlignBottom && x >= 0 ? 0 : radius
+                            topRightRadius: atbLoader.valignment & Qt.AlignBottom && x + width <= annotationsToolBar.width ? 0 : radius
+                            bottomLeftRadius: atbLoader.valignment & Qt.AlignTop && x >= 0 ? 0 : radius
+                            bottomRightRadius: atbLoader.valignment & Qt.AlignTop && x + width <= annotationsToolBar.width ? 0 : radius
                         }
-                        topLeftRadius: atbLoader.valignment & Qt.AlignBottom && x >= 0 ? 0 : radius
-                        topRightRadius: atbLoader.valignment & Qt.AlignBottom && x + width <= annotationsToolBar.width ? 0 : radius
-                        bottomLeftRadius: atbLoader.valignment & Qt.AlignTop && x >= 0 ? 0 : radius
-                        bottomRightRadius: atbLoader.valignment & Qt.AlignTop && x + width <= annotationsToolBar.width ? 0 : radius
                     }
                 }
             }
diff --git a/src/Gui/ImageView.qml b/src/Gui/ImageView.qml
index d8c616b9ed4ac88334bb88bc15b4a7a95c4b5bd0..299b0f7780f0685e79b40fa6ec9b84f3f7e6e5c8 100644
--- a/src/Gui/ImageView.qml
+++ b/src/Gui/ImageView.qml
@@ -6,6 +6,7 @@ import QtQuick
 import QtQuick.Window
 import QtQuick.Layouts
 import QtQuick.Controls as QQC
+import org.kde.plasma.components 3.0 as PC3
 import org.kde.kirigami as Kirigami
 import org.kde.spectacle.private
 
@@ -26,7 +27,7 @@ EmptyPage {
     readonly property real minimumWidth: Math.max(
         header.implicitWidth,
         annotationsToolBar.implicitWidth + separator.implicitWidth + footerLoader.implicitWidth,
-        captureOptionsLoader.implicitWidth + 480 // leave some room for content if necessary
+        captureOptionsLoader.height + captureOptionsLoader.width
     )
     readonly property real minimumHeight: header.implicitHeight
         + Math.max(annotationsToolBar.implicitHeight,
@@ -52,7 +53,7 @@ EmptyPage {
             showNewScreenshotButton: false
             showOptionsMenu: false
             showUndoRedo: contextWindow.annotating
-            displayMode: QQC.AbstractButton.TextBesideIcon
+            displayMode: QQC.AbstractButton.IconOnly
         }
     }
 
@@ -147,17 +148,19 @@ EmptyPage {
             topPadding: Kirigami.Units.mediumSpacing * 2
             bottomPadding: Kirigami.Units.mediumSpacing * 2
 
-            header: QQC.TabBar {
+            header: CaptureModeTabBar {
                 id: tabBar
-                visible: VideoPlatform.supportedRecordingModes
-                currentIndex: 0
-                QQC.TabButton {
-                    width: tabBar.width / tabBar.count
-                    text: i18n("Screenshot")
-                }
-                QQC.TabButton {
-                    width: tabBar.width / tabBar.count
-                    text: i18n("Recording")
+                visible: VideoPlatform.supportedRecordingModes && !SpectacleCore.isRecording
+                background: Kirigami.InlineViewHeader {
+                    children: [
+                        Kirigami.Separator {
+                            anchors {
+                                top: parent.top
+                                bottom: parent.bottom
+                                left: parent.left
+                            }
+                        }
+                    ]
                 }
             }
 
diff --git a/src/Gui/MainToolBarContents.qml b/src/Gui/MainToolBarContents.qml
index eaf2ad0125068583e5631575aeea7bdcc82a9eb0..c2689df373c3deb73aaffe92eba1265de7022981 100644
--- a/src/Gui/MainToolBarContents.qml
+++ b/src/Gui/MainToolBarContents.qml
@@ -29,11 +29,20 @@ ButtonGrid {
         id: sizeLabelLoader
         state: root.showSizeLabel && root.imageSize.width > 0 && root.imageSize.height > 0 ?
             "active" : "inactive"
-        sourceComponent: SizeLabel {
-            height: QmlUtils.iconTextButtonHeight
-            size: root.imageSize
-            leftPadding: Kirigami.Units.mediumSpacing + QmlUtils.fontMetrics.descent
-            rightPadding: leftPadding
+        sourceComponent: ButtonGrid {
+            flow: root.flow
+
+            SizeLabel {
+                height: QmlUtils.iconTextButtonHeight
+                size: root.imageSize
+                leftPadding: Kirigami.Units.mediumSpacing + fontMetrics.descent
+                rightPadding: leftPadding
+            }
+
+            QQC.ToolSeparator {
+                height: parent.flow === Grid.TopToBottom ? implicitWidth : parent.height
+                width: parent.flow === Grid.TopToBottom ? parent.width : implicitWidth
+            }
         }
     }
 
diff --git a/src/Gui/RecordOptions.qml b/src/Gui/RecordOptions.qml
index ab71fc30f3a6382a4ae811fa83f6b2a32f790a84..05a3c77b100ef404bdb6c19cbeba548d854bf048 100644
--- a/src/Gui/RecordOptions.qml
+++ b/src/Gui/RecordOptions.qml
@@ -16,16 +16,6 @@ ColumnLayout {
         RecordingModeButtonsColumn {
             Layout.fillWidth: true
         }
-        Kirigami.Heading {
-            Layout.fillWidth: true
-            topPadding: -recordingSettingsMetrics.descent + parent.spacing
-            bottomPadding: -recordingSettingsMetrics.descent + parent.spacing
-            text: i18n("Recording Settings")
-            level: 3
-            FontMetrics {
-                id: recordingSettingsMetrics
-            }
-        }
         RecordingSettingsColumn {
             Layout.fillWidth: true
         }

Places

File 2000-ui.patch of Package spectacle (Revision cddf028298e3d095da79031f987f4fbb)

Places