plasmoids: añade commandoutput y codexbar al tracking

Ambos ya estaban puestos en un panel real pero no viajaban a la otra máquina -- detectado en la misma auditoría que quitó claudeusageswitcher y tt.launchpadPlasma (sin usar). Sin esto, una reinstalación desde arch-setup dejaría el panel sin estos dos widgets. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-09-20 23:15:48 +02:00
parent d434a3c635
commit b98999cde9
40 changed files with 4029 additions and 0 deletions
@@ -0,0 +1,12 @@
+// Version 5
+
+import QtQuick
+import QtQuick.Controls as QQC2
+
+QQC2.CheckBox {
+	id: configCheckBox
+
+	property string configKey: ''
+	checked: plasmoid.configuration[configKey]
+	onClicked: plasmoid.configuration[configKey] = !plasmoid.configuration[configKey]
+}
@@ -0,0 +1,159 @@
+// Version 8
+
+import QtQuick
+import QtQuick.Controls as QQC2
+import QtQuick.Dialogs as QtDialogs
+import QtQuick.Window
+import org.kde.kirigami as Kirigami
+
+// https://doc.qt.io/qt-6/qtgraphicaleffects5-index.html
+import Qt5Compat.GraphicalEffects as QtGraphicalEffects // TODO Deprecated in Qt6
+
+
+QQC2.TextField {
+	id: colorField
+	font.family: "monospace"
+	readonly property string defaultText: "#AARRGGBB"
+	placeholderText: defaultColor ? defaultColor : defaultText
+
+	onTextChanged: {
+		// Make sure the text is:
+		//   Empty (use default)
+		//   or #123 or #112233 or #11223344 before applying the color.
+		if (text.length === 0
+			|| (text.indexOf('#') === 0 && (text.length == 4 || text.length == 7 || text.length == 9))
+		) {
+			colorField.value = text
+		}
+	}
+
+	property bool showAlphaChannel: true
+	property bool showPreviewBg: true
+
+	property string configKey: ''
+	property string defaultColor: ''
+	property string value: {
+		if (configKey) {
+			return plasmoid.configuration[configKey]
+		} else {
+			return "#000"
+		}
+	}
+
+	readonly property color defaultColorValue: defaultColor
+	readonly property color valueColor: {
+		if (value == '' && defaultColor) {
+			return defaultColor
+		} else {
+			return value
+		}
+	}
+
+	onValueChanged: {
+		if (!activeFocus) {
+			text = colorField.value
+		}
+		if (configKey) {
+			if (value == defaultColorValue) {
+				plasmoid.configuration[configKey] = ""
+			} else {
+				plasmoid.configuration[configKey] = value
+			}
+		}
+	}
+
+	leftPadding: rightPadding + mouseArea.height + rightPadding
+
+	FontMetrics {
+		id: fontMetrics
+		font.family: colorField.font.family
+		font.italic: colorField.font.italic
+		font.pointSize: colorField.font.pointSize
+		font.pixelSize: colorField.font.pixelSize
+		font.weight: colorField.font.weight
+	}
+	readonly property int defaultWidth: Math.ceil(fontMetrics.advanceWidth(defaultText))
+	implicitWidth: rightPadding + Math.max(defaultWidth, contentWidth) + leftPadding
+
+	MouseArea {
+		id: mouseArea
+		anchors.leftMargin: parent.rightPadding
+		anchors.topMargin: parent.topPadding
+		anchors.bottomMargin: parent.bottomPadding
+		anchors.left: parent.left
+		anchors.top: parent.top
+		anchors.bottom: parent.bottom
+		width: height
+		hoverEnabled: true
+		cursorShape: Qt.PointingHandCursor
+
+		onClicked: dialogLoader.active = true
+
+		// Color Preview Circle
+		Rectangle {
+			id: previewBgMask
+			visible: false
+			anchors.fill: parent
+			border.width: 1 * Screen.devicePixelRatio
+			border.color: "transparent"
+			radius: width / 2
+		}
+		QtGraphicalEffects.ConicalGradient {
+			id: previewBgGradient
+			visible: colorField.showPreviewBg
+			anchors.fill: parent
+			angle: 0.0
+			gradient: Gradient {
+				GradientStop { position: 0.00; color: "white" }
+				GradientStop { position: 0.24; color: "white" }
+				GradientStop { position: 0.25; color: "#cccccc" }
+				GradientStop { position: 0.49; color: "#cccccc" }
+				GradientStop { position: 0.50; color: "white" }
+				GradientStop { position: 0.74; color: "white" }
+				GradientStop { position: 0.75; color: "#cccccc" }
+				GradientStop { position: 1.00; color: "#cccccc" }
+			}
+			source: previewBgMask
+		}
+		Rectangle {
+			id: previewFill
+			anchors.fill: parent
+			color: colorField.valueColor
+			border.width: 1 * Screen.devicePixelRatio
+			border.color: Kirigami.ColorUtils.linearInterpolation(color, Kirigami.Theme.textColor, 0.5)
+			radius: width / 2
+		}
+	}
+
+	Loader {
+		id: dialogLoader
+		active: false
+		sourceComponent: QtDialogs.ColorDialog {
+			id: dialog
+			visible: true
+			modality: Qt.WindowModal
+			options: colorField.showAlphaChannel ? QtDialogs.ColorDialog.ShowAlphaChannel : 0
+			selectedColor: colorField.valueColor
+			onSelectedColorChanged: {
+				if (visible) {
+					colorField.text = selectedColor
+				}
+			}
+			onAccepted: {
+				colorField.text = selectedColor
+				dialogLoader.active = false
+			}
+			onRejected: {
+				// This event is also triggered when the user clicks outside the popup modal.
+				// TODO Find a way to only trigger when Cancel is clicked.
+				colorField.text = initColor
+				dialogLoader.active = false
+			}
+
+			property color initColor
+			Component.onCompleted: {
+				initColor = colorField.valueColor
+			}
+		}
+	}
+}
@@ -0,0 +1,102 @@
+// Version 8
+
+import QtQuick
+import QtQuick.Controls as QQC2
+
+/*
+** Example:
+**
+import './libconfig' as LibConfig
+LibConfig.ComboBox {
+	configKey: "appDescription"
+	model: [
+		{ value: "a", text: i18n("A") },
+		{ value: "b", text: i18n("B") },
+		{ value: "c", text: i18n("C") },
+	]
+}
+LibConfig.ComboBox {
+	configKey: "appDescription"
+	populated: false
+	onPopulate: {
+		model = [
+			{ value: "a", text: i18n("A") },
+			{ value: "b", text: i18n("B") },
+			{ value: "c", text: i18n("C") },
+		]
+		populated = true
+	}
+}
+*/
+QQC2.ComboBox {
+	id: configComboBox
+
+	property string configKey: ''
+	readonly property string configValue: configKey ? plasmoid.configuration[configKey] : ""
+	onConfigValueChanged: {
+		if (!focus && value != configValue) {
+			selectValue(configValue)
+		}
+	}
+
+	readonly property var currentItem: currentIndex >= 0 ? model[currentIndex] : null
+
+	textRole: "text" // Doesn't autodeduce from model if we manually populate it
+
+	// Note that ComboBox.valueRole and ComboBox.currentValue was introduced in Qt 5.14.
+	// Ubuntu 20.04 only has Qt 5.12. We cannot define a currentValue property or it will
+	// break when users upgrade to Qt 5.14.
+	property string _valueRole: "value"
+	readonly property var _currentValue: _valueRole && currentIndex >= 0 ? model[currentIndex][_valueRole] : null
+	readonly property alias value: configComboBox._currentValue
+
+	model: []
+
+	signal populate()
+	property bool populated: true
+
+	Component.onCompleted: {
+		populate()
+		selectValue(configValue)
+	}
+
+	onCurrentIndexChanged: {
+		if (typeof model !== 'number' && 0 <= currentIndex && currentIndex < count) {
+			var item = model[currentIndex]
+			if (typeof item !== "undefined") {
+				var val = item[_valueRole]
+				if (configKey && (typeof val !== "undefined") && populated) {
+					plasmoid.configuration[configKey] = val
+				}
+			}
+		}
+	}
+
+	function size() {
+		if (typeof model === "number") {
+			return model
+		} else if (typeof model.count === "number") {
+			return model.count
+		} else if (typeof model.length === "number") {
+			return model.length
+		} else {
+			return 0
+		}
+	}
+
+	function findValue(val) {
+		for (var i = 0; i < size(); i++) {
+			if (model[i][_valueRole] == val) {
+				return i
+			}
+		}
+		return -1
+	}
+
+	function selectValue(val) {
+		var index = findValue(val)
+		if (index >= 0) {
+			currentIndex = index
+		}
+	}
+}
@@ -0,0 +1,24 @@
+// Version 4
+
+import QtQuick
+
+import "." as LibConfig
+
+LibConfig.ComboBox {
+	id: configFontFamily
+
+	populated: false
+
+	// Based on: org.kde.plasma.digitalclock
+	onPopulate: {
+		var arr = [] // Use temp array to avoid constant binding stuff
+		arr.push({ text: i18nc("Use default font", "Default"), value: "" })
+
+		var fonts = Qt.fontFamilies()
+		for (var i = 0; i < fonts.length; i++) {
+			arr.push({ text: fonts[i], value: fonts[i] })
+		}
+		model = arr
+		populated = true
+	}
+}
@@ -0,0 +1,33 @@
+// Version 3
+
+import QtQuick
+import QtQuick.Window
+import org.kde.kirigami as Kirigami
+import org.kde.kcmutils as KCM
+
+KCM.SimpleKCM {
+	id: simpleKCM
+	default property alias _formChildren: formLayout.data
+
+	Kirigami.FormLayout {
+		id: formLayout
+	}
+
+	// https://invent.kde.org/plasma/plasma-desktop/-/blame/master/desktoppackage/contents/configuration/AppletConfiguration.qml
+	// AppletConfiguration.implicitWidth: Kirigami.Units.gridUnit * 40 = 720
+	// AppletConfiguration.Layout.minimumWidth: Kirigami.Units.gridUnit * 30 = 540
+	// In practice, Window.width = 744px is a typical FormLayout.wideMode switchWidth
+	// A rough guess is 128+24+180+10+360+24+20 = 746px
+	// TabSidebar=128x, Padding=24px, Labels=180px, Spacing=10px, Controls=360px, Padding=24px, Scrollbar=20px
+	// However the default is only 720px. So we'll set it to a 800px minimum to avoid wideMode=false
+	property int wideModeMinWidth: 800 * Screen.devicePixelRatio
+	Window.onWindowChanged: {
+		if (Window.window) {
+			Window.window.visibleChanged.connect(function(){
+				if (Window.window && Window.window.visible && Window.window.width < wideModeMinWidth) {
+					Window.window.width = wideModeMinWidth
+				}
+			})
+		}
+	}
+}
@@ -0,0 +1,83 @@
+// Version 6
+
+import QtQuick
+import QtQuick.Controls as QQC2
+import QtQuick.Layouts
+import org.kde.kirigami as Kirigami
+
+/*
+** Example:
+**
+import './libconfig' as LibConfig
+LibConfig.Heading {
+	text: i18n("SpinBox (Double)")
+}
+*/
+
+// While the following Kirigami is very simple:
+// Kirigami.Separator {
+//     Kirigami.FormData.label: "Heading"
+//     Kirigami.FormData.isSection: true
+// }
+//
+// I want to be able to adjust the label size and make it bold.
+// Kirigami's buddy Heading is level=3, which does not stand out
+// very well. I also want to center the heading.
+// Since we can't access the Heading in the buddy component, we
+// need to make sure the Heading has no text, and draw our own.
+ColumnLayout {
+	id: heading
+	spacing: 0
+
+	property string text: ""
+	property alias separator: separator
+	property alias label: label
+	property bool useThickTopMargin: true
+
+	property Item __formLayout: {
+		if (parent && typeof parent.wideMode === 'boolean') {
+			return parent
+		} else if (typeof formLayout !== 'undefined' && typeof formLayout.wideMode === 'boolean') {
+			return formLayout
+		} else if (typeof page !== 'undefined' && typeof page.wideMode === 'boolean') {
+			return page
+		} else {
+			return null
+		}
+	}
+
+	Layout.fillWidth: true
+	// Kirigami.FormData.isSection: true
+	Kirigami.MnemonicData.controlType: Kirigami.MnemonicData.FormLabel
+
+	Kirigami.Separator {
+		id: separator
+		visible: false
+		Layout.fillWidth: true
+		Layout.topMargin: Kirigami.Units.largeSpacing
+		Layout.bottomMargin: Kirigami.Units.largeSpacing
+	}
+
+	Kirigami.Heading {
+		id: label
+		Layout.topMargin: useThickTopMargin ? Kirigami.Units.largeSpacing * 3 : Kirigami.Units.largeSpacing
+		Layout.bottomMargin: Kirigami.Units.smallSpacing
+		Layout.fillWidth: true
+		text: heading.text
+		level: 1
+		font.weight: Font.Bold
+		// horizontalAlignment: (!__formLayout || __formLayout.wideMode) ? Text.AlignHCenter : Text.AlignLeft
+		verticalAlignment: (!__formLayout || __formLayout.wideMode) ? Text.AlignVCenter : Text.AlignBottom
+	}
+}
+
+//--- Test Default Kirigami Heading
+// Kirigami.Separator {
+// 	property string text: ""
+// 	Kirigami.FormData.label: text
+// 	Kirigami.FormData.isSection: true
+// 	property alias separator: separator
+// 	Item {
+// 		id: separator
+// 	}
+// }
@@ -0,0 +1,225 @@
+// Version 7
+
+import QtQuick
+import QtQuick.Controls as QQC2
+
+/*
+** Example:
+**
+import './libconfig' as LibConfig
+// Integer
+LibConfig.SpinBox {
+	configKey: "leftPadding"
+	suffix: "px"
+	from: 0
+	to: 1000
+	stepSize: 5
+}
+// Double
+LibConfig.SpinBox {
+	configKey: "distance"
+	decimals: 3
+	suffix: "m"
+	minimumValue: 0.0
+	maximumValue: 1000.0
+	stepSize: Math.round(0.5 * factor)
+}
+*/
+// QQC1.SpinBox: https://github.com/qt/qtquickcontrols/blob/dev/src/controls/SpinBox.qml
+// QQC2.SpinBox: https://github.com/qt/qtquickcontrols2/blob/5.15/src/imports/controls/SpinBox.qml
+// KDE Config Theme: https://invent.kde.org/frameworks/qqc2-desktop-style/-/blob/master/org.kde.desktop/SpinBox.qml
+// Qt6 QQC2.SpinBox: https://github.com/qt/qtquickcontrols2/blob/dev/src/imports/controls/basic/SpinBox.qml
+QQC2.SpinBox {
+	id: spinBox
+
+	property string configKey: ''
+	readonly property var configValue: configKey ? plasmoid.configuration[configKey] : 0
+
+	readonly property real factor: Math.pow(10, decimals)
+	readonly property real valueReal: value / factor
+	value: Math.round(configValue * factor)
+	onValueRealChanged: serializeTimer.start()
+
+	readonly property int spinBox_MININT: Math.ceil(-2147483648 / factor)
+	readonly property int spinBox_MAXINT: Math.floor(2147483647 / factor)
+	from: Math.round(minimumValue * factor)
+	to: Math.round(maximumValue * factor)
+
+	// Reimplement QQC1 properties
+	// https://github.com/qt/qtquickcontrols/blob/dev/src/controls/SpinBox.qml
+	property int decimals: 0
+	property alias prefix: prefixLabel.text
+	property alias suffix: suffixLabel.text
+	property real minimumValue: 0
+	property real maximumValue: spinBox_MAXINT
+
+	// Avoid selecting prefix/suffix by drawing them overlayed on top.
+	// As a bonus, we can draw with in a different color (textColor at 60% opacity).
+	QQC2.Label {
+		id: prefixLabel
+		anchors.left: parent.left
+		anchors.top: parent.top
+		anchors.bottom: parent.bottom
+		anchors.leftMargin: spinBox.leftPadding
+		anchors.topMargin: spinBox.topPadding
+		anchors.bottomMargin: spinBox.bottomPadding
+		font: spinBox.font
+		horizontalAlignment: Qt.AlignHCenter
+		verticalAlignment: Qt.AlignVCenter
+		color: spinBox.palette.text
+		opacity: 0.6
+	}
+	QQC2.Label {
+		id: suffixLabel
+		anchors.right: parent.right
+		anchors.top: parent.top
+		anchors.bottom: parent.bottom
+		anchors.rightMargin: spinBox.rightPadding
+		anchors.topMargin: spinBox.topPadding
+		anchors.bottomMargin: spinBox.bottomPadding
+		font: spinBox.font
+		horizontalAlignment: Qt.AlignHCenter
+		verticalAlignment: Qt.AlignVCenter
+		color: spinBox.palette.text
+		opacity: 0.6
+	}
+
+	Timer { // throttle
+		id: serializeTimer
+		interval: 300
+		onTriggered: {
+			if (configKey) {
+				if (decimals == 0) {
+					plasmoid.configuration[configKey] = spinBox.value
+				} else {
+					plasmoid.configuration[configKey] = spinBox.valueReal
+				}
+			}
+		}
+	}
+
+	// Note: Qt5 used RegExpValidator { regExp: /[\-\.\d]+/ }
+	// validator: RegularExpressionValidator {
+	// 	regularExpression: /[\-\.\d]+/
+	// }
+	validator: DoubleValidator {
+		bottom: Math.min(spinBox.from, spinBox.to)
+		top:  Math.max(spinBox.from, spinBox.to)
+		decimals: spinBox.decimals
+		notation: DoubleValidator.StandardNotation
+	}
+
+	textFromValue: function(value, locale) {
+		return Number(value / factor).toFixed(decimals)
+	}
+
+	valueFromText: function(text, locale) {
+		var text2 = text
+			.replace(/[^\-\.\d]/g, '') // Remove non digit characters
+			.replace(/\.+/g, '.') // Allow user to type '.' instead of RightArrow to enter to decimals
+		var val = Number(text2)
+		if (isNaN(val)) {
+			val = -0
+		}
+		// console.log('valueFromText', text, val)
+		return Math.round(val * factor)
+	}
+
+	// Select value on foucs
+	onActiveFocusChanged: {
+		if (activeFocus) {
+			selectValue()
+		}
+	}
+	function selectValue() {
+		// Check if SpinBox.contentItem == TextInput
+		// https://invent.kde.org/frameworks/qqc2-desktop-style/-/blob/master/org.kde.desktop/SpinBox.qml
+		// https://doc.qt.io/qt-5/qml-qtquick-textinput.html#select-method
+		if (contentItem && contentItem instanceof TextInput) {
+			contentItem.selectAll()
+		}
+	}
+
+	function fixMinus(str) {
+		var minusIndex = str.indexOf('-')
+		if (minusIndex >= 0) {
+			var a = str.substr(0, minusIndex)
+			var b = str.substr(minusIndex+1)
+			console.log('a', a, 'b', b)
+
+			return '-' + a + b
+		} else {
+			return str
+		}
+	}
+	function fixDecimals(str) {
+		var periodIndex = str.indexOf('.')
+		var a = str.substr(0, periodIndex+1)
+		var b = str.substr(periodIndex+1)
+		return a + b.replace(/\.+/g, '') // Remove extra periods
+	}
+
+	function fixText(str) {
+		return fixMinus(fixDecimals(str))
+	}
+
+	function onTextEdited() {
+		var oldText = spinBox.contentItem.text
+		// console.log('onTextEdited', 'oldText1', oldText)
+		oldText = fixText(oldText)
+		// console.log('onTextEdited', 'oldText2', oldText)
+		var oldPeriodIndex = oldText.indexOf('.')
+		if (oldPeriodIndex == -1) {
+			oldPeriodIndex = oldText.length
+		}
+		var oldCursorPosition = spinBox.contentItem.cursorPosition
+		var oldCursorDelta = oldPeriodIndex - oldCursorPosition
+
+		spinBox.value = spinBox.valueFromText(oldText, spinBox.locale)
+		spinBox.valueModified()
+
+		var newText = spinBox.contentItem.text
+		// console.log('onTextEdited', 'newText1', newText)
+		newText = fixText(newText)
+		// console.log('onTextEdited', 'newText2', newText)
+		var newPeriodIndex = newText.indexOf('.')
+		if (newPeriodIndex == -1) {
+			newPeriodIndex = newText.length
+		}
+		if (newText != spinBox.contentItem.text) {
+			spinBox.contentItem.text = Qt.binding(function(){
+				return spinBox.textFromValue(spinBox.value, spinBox.locale)
+			})
+		}
+		spinBox.contentItem.cursorPosition = newPeriodIndex - oldCursorDelta
+	}
+
+	function bindContentItem() {
+		if (contentItem && contentItem instanceof TextInput) {
+			// We bind the left/right padding in the TextInput so that
+			// clicking the prefix/suffix will focus the TextInput. If we set
+			// the SpinBox left/right padding, then they do not focus the TextInput.
+			contentItem.leftPadding = Qt.binding(function(){ return prefixLabel.implicitWidth })
+			contentItem.rightPadding = Qt.binding(function(){ return suffixLabel.implicitWidth })
+
+			// Bind value update on keypress, while retaining cursor position
+			spinBox.contentItem.textEdited.connect(spinBox.onTextEdited)
+		}
+	}
+
+	onContentItemChanged: {
+		bindContentItem()
+	}
+
+	Component.onCompleted: {
+		for (var i = 0; i < data.length; i++) {
+			if (data[i] instanceof Connections) {
+				// Remove the Connections where it changes the text/cursor when typing.
+				// onTextEdited { value = valueFromText() }
+				data[i].destroy()
+				break
+			}
+		}
+		bindContentItem()
+	}
+}
@@ -0,0 +1,57 @@
+// Version 4
+
+import QtQuick
+import QtQuick.Controls as QQC2
+import QtQuick.Layouts
+
+RowLayout {
+	id: configTextAlign
+
+	property string configKey: ''
+	readonly property string configValue: configKey ? plasmoid.configuration[configKey] : ""
+
+	function setValue(val) {
+		if (configKey) {
+			plasmoid.configuration[configKey] = val
+		}
+		updateChecked()
+	}
+
+	function updateChecked() {
+		// button.checked bindings are unbound when clicked
+		justifyLeftButton.checked = Qt.binding(function(){ return configValue == Text.AlignLeft })
+		justifyCenterButton.checked = Qt.binding(function(){ return configValue == Text.AlignHCenter })
+		justifyRightButton.checked = Qt.binding(function(){ return configValue == Text.AlignRight })
+		justifyFillButton.checked = Qt.binding(function(){ return configValue == Text.AlignJustify })
+	}
+
+	Component.onCompleted: updateChecked()
+
+	QQC2.Button {
+		id: justifyLeftButton
+		icon.name: "format-justify-left-symbolic"
+		checkable: true
+		onClicked: setValue(Text.AlignLeft)
+	}
+
+	QQC2.Button {
+		id: justifyCenterButton
+		icon.name: "format-justify-center-symbolic"
+		checkable: true
+		onClicked: setValue(Text.AlignHCenter)
+	}
+
+	QQC2.Button {
+		id: justifyRightButton
+		icon.name: "format-justify-right-symbolic"
+		checkable: true
+		onClicked: setValue(Text.AlignRight)
+	}
+
+	QQC2.Button {
+		id: justifyFillButton
+		icon.name: "format-justify-fill-symbolic"
+		checkable: true
+		onClicked: setValue(Text.AlignJustify)
+	}
+}
@@ -0,0 +1,48 @@
+// Version 6
+
+import QtQuick
+import QtQuick.Controls as QQC2
+import org.kde.kirigami as Kirigami
+
+QQC2.TextField {
+	id: textField
+
+	property string configKey: ''
+	readonly property string configValue: configKey ? plasmoid.configuration[configKey] : ""
+	onConfigValueChanged: {
+		if (!focus && text != configValue) {
+			text = configValue
+		}
+	}
+
+	text: configValue
+	onTextChanged: serializeTimer.start()
+
+	property string defaultValue: ""
+
+	rightPadding: clearButton.width + Kirigami.Units.smallSpacing
+
+	property alias clearButton: clearButton
+	QQC2.ToolButton {
+		id: clearButton
+		visible: textField.text != textField.defaultValue
+		icon.name: "edit-clear"
+		onClicked: textField.text = defaultValue
+
+		anchors.top: parent.top
+		anchors.right: parent.right
+		anchors.bottom: parent.bottom
+
+		width: implicitBackgroundHeight
+	}
+
+	Timer { // throttle
+		id: serializeTimer
+		interval: 300
+		onTriggered: {
+			if (configKey) {
+				plasmoid.configuration[configKey] = textField.text
+			}
+		}
+	}
+}
@@ -0,0 +1,63 @@
+// Version 6
+
+import QtQuick
+import QtQuick.Controls as QQC2
+import QtQuick.Layouts
+import org.kde.kirigami as Kirigami
+
+import "." as LibConfig
+
+Flow {
+	id: configTextFormat
+
+	spacing: Kirigami.Units.smallSpacing * 2
+	Layout.fillWidth: true
+
+	property alias boldConfigKey: configBold.configKey
+	property alias italicConfigKey: configItalic.configKey
+	property alias underlineConfigKey: configUnderline.configKey
+	property alias alignConfigKey: configTextAlign.configKey
+	property alias vertAlignConfigKey: configVertAlign.configKey
+
+	RowLayout {
+		QQC2.Button {
+			id: configBold
+			property string configKey: ''
+			visible: configKey
+			icon.name: 'format-text-bold-symbolic'
+			checkable: true
+			checked: configKey ? plasmoid.configuration[configKey] : false
+			onClicked: plasmoid.configuration[configKey] = checked
+		}
+
+		QQC2.Button {
+			id: configItalic
+			property string configKey: ''
+			visible: configKey
+			icon.name: 'format-text-italic-symbolic'
+			checkable: true
+			checked: configKey ? plasmoid.configuration[configKey] : false
+			onClicked: plasmoid.configuration[configKey] = checked
+		}
+
+		QQC2.Button {
+			id: configUnderline
+			property string configKey: ''
+			visible: configKey
+			icon.name: 'format-text-underline-symbolic'
+			checkable: true
+			checked: configKey ? plasmoid.configuration[configKey] : false
+			onClicked: plasmoid.configuration[configKey] = checked
+		}
+	}
+
+	LibConfig.TextAlign {
+		id: configTextAlign
+		visible: configKey
+	}
+
+	LibConfig.VertAlign {
+		id: configVertAlign
+		visible: configKey
+	}
+}
@@ -0,0 +1,49 @@
+// Version 5
+
+import QtQuick
+import QtQuick.Controls as QQC2
+import QtQuick.Layouts
+
+RowLayout {
+	id: configVertAlign
+
+	property string configKey: ''
+	readonly property string configValue: configKey ? plasmoid.configuration[configKey] : ""
+
+	function setValue(val) {
+		if (configKey) {
+			plasmoid.configuration[configKey] = val
+		}
+		updateChecked()
+	}
+
+	function updateChecked() {
+		// button.checked bindings are unbound when clicked
+		vertTopButton.checked = Qt.binding(function(){ return configValue == Text.AlignTop })
+		vertCenterButton.checked = Qt.binding(function(){ return configValue == Text.AlignVCenter })
+		vertBottomButton.checked = Qt.binding(function(){ return configValue == Text.AlignBottom })
+	}
+
+	Component.onCompleted: updateChecked()
+
+	QQC2.Button {
+		id: vertTopButton
+		icon.name: "align-vertical-top"
+		checkable: true
+		onClicked: setValue(Text.AlignTop)
+	}
+
+	QQC2.Button {
+		id: vertCenterButton
+		icon.name: "align-vertical-center"
+		checkable: true
+		onClicked: setValue(Text.AlignVCenter)
+	}
+
+	QQC2.Button {
+		id: vertBottomButton
+		icon.name: "align-vertical-bottom"
+		checkable: true
+		onClicked: setValue(Text.AlignBottom)
+	}
+}