z-bar-qt/Helpers/Picker/AnnotationToolbar.qml

pragma ComponentBehavior: Bound

import ZShell.Components
import QtQuick
import QtQuick.Layouts
import qs.Components
import qs.Config

CustomRect {
	id: root

	readonly property var colorPalette: ["#ff3b30", "#ff9500", "#ffcc00", "#34c759", "#0a84ff", "#af52de", "#ffffff", "#000000"]
	property color inkColor: "#ff3b30"
	property string tool: "move"
	readonly property var toolList: [
		{
			id: "move",
			glyph: "arrows_output"
		},
		{
			id: "pen",
			glyph: "draw"
		},
		{
			id: "line",
			glyph: "diagonal_line"
		},
		{
			id: "arrow",
			glyph: "arrow_outward"
		},
		{
			id: "rect",
			glyph: "rectangle"
		},
		{
			id: "ellipse",
			glyph: "circle"
		}
	]

	signal cancelRequested
	signal clearRequested
	signal colorSelected(color c)
	signal copyRequested
	signal saveRequested
	signal toolSelected(string tool)
	signal undoRequested

	color: DynamicColors.palette.m3surface
	height: row.implicitHeight + Appearance.padding.normal * 2
	radius: Appearance.rounding.full
	width: row.implicitWidth + Appearance.padding.normal * 2

	RowLayout {
		id: row

		anchors.centerIn: parent
		spacing: 6

		ButtonRow {
			id: toolRow

			spacing: Appearance.spacing.extraSmall

			Repeater {
				model: root.toolList

				delegate: IconButton {
					id: tool

					required property var modelData

					color: root.tool === modelData.id ? "#3584e4" : "transparent"
					icon: tool.modelData.glyph
					inactiveColor: root.tool === modelData.id ? DynamicColors.palette.m3primary : "transparent"
					inactiveOnColor: root.tool === modelData.id ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
					isRound: true
					shapeMorph: true
					shapeMorphExpansion: shapeMorph && pressed ? 12 : 0

					onClicked: root.toolSelected(tool.modelData.id)
				}
			}
		}

		CustomRect {
			Layout.fillHeight: true
			Layout.preferredWidth: 1
			color: DynamicColors.palette.m3outlineVariant
		}

		ButtonRow {
			spacing: Appearance.spacing.extraSmall

			Repeater {
				model: root.colorPalette

				delegate: IconButton {
					readonly property real buttonSize: toolRow.implicitHeight - Appearance.padding.normal
					required property color modelData

					fillWidth: false
					font.pointSize: 0
					icon: ""
					implicitHeight: buttonSize
					implicitWidth: buttonSize
					inactiveColor: modelData
					inactiveOnColor: DynamicColors.on(modelData)
					isRound: true
					shapeMorph: true
					shapeMorphExpansion: pressed ? 12 : 0

					onClicked: root.colorSelected(modelData)
				}
			}
		}

		CustomRect {
			Layout.fillHeight: true
			Layout.preferredWidth: 1
			color: DynamicColors.palette.m3outlineVariant
		}

		ButtonRow {
			spacing: Appearance.spacing.extraSmall

			IconButton {
				icon: "undo"
				inactiveColor: "transparent"
				inactiveOnColor: DynamicColors.palette.m3onSurface
				isRound: true
				shapeMorph: true
				shapeMorphExpansion: pressed ? 12 : 0

				onClicked: root.undoRequested()
			}

			IconButton {
				icon: "delete_history"
				inactiveColor: "transparent"
				inactiveOnColor: DynamicColors.palette.m3onSurface
				isRound: true
				shapeMorph: true
				shapeMorphExpansion: pressed ? 12 : 0

				onClicked: root.clearRequested()
			}

			IconButton {
				icon: "content_copy"
				inactiveColor: "transparent"
				inactiveOnColor: DynamicColors.palette.m3onSurface
				isRound: true
				shapeMorph: true
				shapeMorphExpansion: pressed ? 12 : 0

				onClicked: root.copyRequested()
			}

			IconButton {
				icon: "delete_forever"
				inactiveColor: "transparent"
				inactiveOnColor: DynamicColors.palette.m3onSurface
				isRound: true
				shapeMorph: true
				shapeMorphExpansion: pressed ? 12 : 0

				onClicked: root.cancelRequested()
			}

			IconButton {
				icon: "check"
				inactiveColor: "transparent"
				inactiveOnColor: DynamicColors.palette.m3onSurface
				isRound: true
				shapeMorph: true
				shapeMorphExpansion: pressed ? 12 : 0

				onClicked: root.saveRequested()
			}
		}
	}
}