z-bar-qt/Modules/Settings/Pages/Panels/Bar/BarStatusIcons.qml

pragma ComponentBehavior: Bound

import QtQuick.Layouts
import qs.Config
import qs.Modules.Settings.Common

PageBase {
	id: root

	readonly property var builtinIcons: ({
			audio: qsTr("Speakers"),
			microphone: qsTr("Microphone"),
			power: qsTr("Battery")
		})

	isSubPage: true
	title: qsTr("System icons")

	ColumnLayout {
		anchors.horizontalCenter: parent.horizontalCenter
		anchors.top: parent.top
		spacing: Appearance.spacing.extraSmall / 2
		width: root.cappedWidth

		// Visible icons
		SectionHeader {
			first: true
			text: qsTr("Visible icons")
		}

		ListEditor {
			function labelFor(item: var): string {
				const prettyName = root.builtinIcons[item.id];
				if (prettyName)
					return prettyName;
				const label = item.id.replace(/([A-Z])/g, " $1");
				return label.charAt(0).toUpperCase() + label.slice(1).toLowerCase();
			}

			function toggledFor(item: var): bool {
				return item.enabled;
			}

			first: true
			values: Config.bar.tray.statusIcons
			z: 1

			onItemMoved: (from, to) => {
				const icons = Config.bar.tray.statusIcons.slice();
				const [moved] = icons.splice(from, 1);
				icons.splice(to, 0, moved);
				Config.bar.tray.statusIcons = icons;
			}
			onItemRemoved: index => {
				const icons = Config.bar.tray.statusIcons.slice();
				icons.splice(index, 1);
				Config.bar.tray.statusIcons = icons;
			}
			onItemToggled: (index, checked) => {
				const icons = Config.bar.tray.statusIcons.slice();
				icons[index] = Object.assign({}, icons[index], {
					enabled: checked
				});
				Config.bar.tray.statusIcons = icons;
			}
		}

		DialogSelectButton {
			id: addItemContainer

			acceptLabel: qsTr("Add")
			enabled: {
				console.log(Object.keys(model).length);
				return Object.keys(model).length > 0;
			}
			header: qsTr("Add new entry")
			icon: "add"
			label: qsTr("Add entry")
			model: {
				const present = new Set(Config.bar.tray.statusIcons.map(item => item.id));
				return Object.keys(root.builtinIcons).filter(id => !present.has(id)).map(id => ({
							id: id,
							label: root.builtinIcons[id]
						}));
			}
			rootParent: root.flickable

			onAccepted: {
				if (!selectedItem)
					return;

				const icons = Config.bar.tray.statusIcons.slice();
				icons.push({
					id: selectedItem,
					enabled: true
				});
				Config.bar.tray.statusIcons = icons;
			}
		}

		// Behavior
		SectionHeader {
			text: qsTr("Behavior")
		}

		ToggleRow {
			checked: Config.bar.popouts.statusIcons
			first: true
			settingAnchor: "bar-status-popout-on-hover"
			subtext: qsTr("Show a details popout when hovering the status icons")
			text: qsTr("Popout on hover")

			onToggled: Config.bar.popouts.statusIcons = checked
		}
	}
}