diff --git a/Components/CustomSplitButtonRow.qml b/Components/CustomSplitButtonRow.qml index 491a8ed..15bb182 100644 --- a/Components/CustomSplitButtonRow.qml +++ b/Components/CustomSplitButtonRow.qml @@ -8,20 +8,34 @@ Item { id: root property alias active: splitButton.active + property alias buttonAlias: splitButton property bool enabled: true property alias expanded: splitButton.expanded property int expandedZ: 100 required property string label property alias menuItems: splitButton.menuItems + property bool shouldBeActive: true property alias type: splitButton.type signal selected(item: MenuItem) - Layout.fillWidth: true - Layout.preferredHeight: row.implicitHeight + Appearance.padding.smaller * 2 + anchors.left: parent.left + anchors.right: parent.right clip: false + implicitHeight: row.implicitHeight + Appearance.padding.smaller * 2 + opacity: shouldBeActive ? 1 : 0 + scale: shouldBeActive ? 1 : 0.8 z: root.expanded ? expandedZ : -1 + Behavior on opacity { + Anim { + } + } + Behavior on scale { + Anim { + } + } + RowLayout { id: row diff --git a/Config/Colors.qml b/Config/Colors.qml index 287ea02..3b99070 100644 --- a/Config/Colors.qml +++ b/Config/Colors.qml @@ -1,5 +1,13 @@ import Quickshell.Io JsonObject { + property Presets presets: Presets { + } property string schemeType: "vibrant" + + component Presets: JsonObject { + property string accent: "" + property string name: "" + property string variant: "" + } } diff --git a/Config/Config.qml b/Config/Config.qml index c02f483..2f6686e 100644 --- a/Config/Config.qml +++ b/Config/Config.qml @@ -115,7 +115,12 @@ Singleton { function serializeColors(): var { return { - schemeType: colors.schemeType + schemeType: colors.schemeType, + presets: { + name: colors.presets.name, + variant: colors.presets.variant, + accent: colors.presets.accent + } }; } diff --git a/Helpers/FetchPresets.qml b/Helpers/FetchPresets.qml new file mode 100644 index 0000000..51c306f --- /dev/null +++ b/Helpers/FetchPresets.qml @@ -0,0 +1,63 @@ +// FetchPresets.qml +pragma Singleton + +import QtQuick +import Quickshell +import Quickshell.Io + +Singleton { + id: root + + property var parsedPresets: ({}) + readonly property var presets: parsedPresets + property bool ready: false + + function accents(presetName, variantName) { + const variant = parsedPresets[presetName]?.variants?.[variantName]; + + return variant?.accents ?? []; + } + + function defaultAccent(presetName, variantName) { + const variant = parsedPresets[presetName]?.variants?.[variantName]; + + return variant?.default_accent ?? ""; + } + + function modes(presetName, variantName) { + const variant = parsedPresets[presetName]?.variants?.[variantName]; + + return variant?.modes ?? []; + } + + function presetNames() { + return Object.keys(parsedPresets); + } + + function variantNames(presetName) { + const preset = parsedPresets[presetName]; + + if (!preset || !preset.variants) + return []; + + return Object.keys(preset.variants); + } + + Process { + command: ["zshell-cli", "scheme", "list-presets", "--json"] + running: true + + stdout: StdioCollector { + onStreamFinished: { + try { + const parsed = JSON.parse(text); + + root.parsedPresets = parsed.presets ?? {}; + root.ready = true; + } catch (e) { + console.error("Failed to parse presets JSON:", e); + } + } + } + } +} diff --git a/Helpers/ModeScheduler.qml b/Helpers/ModeScheduler.qml index 960e84c..4aa01ef 100644 --- a/Helpers/ModeScheduler.qml +++ b/Helpers/ModeScheduler.qml @@ -12,7 +12,7 @@ Singleton { readonly property int darkEnd: Config.general.color.scheduleDarkEnd readonly property int darkStart: Config.general.color.scheduleDarkStart - readonly property bool enabled: Config.general.color.scheduleDark + readonly property bool enabled: Config.general.color.scheduleDark && Config.general.color.schemeGeneration function applyDarkMode() { Quickshell.execDetached(["zshell-cli", "scheme", "generate", "--mode", "dark"]); diff --git a/Modules/Settings/Categories/Appearance.qml b/Modules/Settings/Categories/Appearance.qml index 1fbbe43..5b46dec 100644 --- a/Modules/Settings/Categories/Appearance.qml +++ b/Modules/Settings/Categories/Appearance.qml @@ -1,3 +1,4 @@ +import QtQuick import qs.Modules.Settings.Controls import qs.Config @@ -80,6 +81,7 @@ SettingsPage { name: "Sans family" object: Config.appearance.font.family setting: "sans" + stringList: Qt.fontFamilies() } Separator { @@ -89,6 +91,7 @@ SettingsPage { name: "Monospace family" object: Config.appearance.font.family setting: "mono" + stringList: Qt.fontFamilies() } } diff --git a/Modules/Settings/Categories/Background.qml b/Modules/Settings/Categories/Background.qml index 233c31f..1b88388 100644 --- a/Modules/Settings/Categories/Background.qml +++ b/Modules/Settings/Categories/Background.qml @@ -43,7 +43,6 @@ SettingsPage { sectionId: "Wallpapers" WallpaperGrid { - Layout.fillWidth: true } } } diff --git a/Modules/Settings/Categories/General.qml b/Modules/Settings/Categories/General.qml index 4fe7d58..3d7eaba 100644 --- a/Modules/Settings/Categories/General.qml +++ b/Modules/Settings/Categories/General.qml @@ -1,4 +1,6 @@ import Quickshell +import QtQuick +import QtQuick.Layouts import qs.Modules.Settings.Controls import qs.Config import qs.Components @@ -67,6 +69,7 @@ SettingsPage { CustomSplitButtonRow { active: Config.general.color.mode === "light" ? menuItems[0] : menuItems[1] + buttonAlias.disabled: !Config.general.color.schemeGeneration label: qsTr("Scheme mode") menuItems: [ @@ -100,6 +103,7 @@ SettingsPage { id: schemeType active: root.schemeTypeItem(menuItems, Config.colors.schemeType) + buttonAlias.disabled: !Config.general.color.schemeGeneration label: qsTr("Scheme type") z: 2 @@ -169,21 +173,69 @@ SettingsPage { } Separator { + shouldBeActive: Config.general.color.schemeGeneration ? 0 : 1 + } + + SchemesListView { + name: "Color scheme presets" + object: Config.colors.presets + setting: "name" + shouldBeActive: Config.general.color.schemeGeneration ? 0 : 1 + stringList: FetchPresets.presetNames() + } + + Separator { + shouldBeActive: Config.colors.presets.name !== "" && !Config.general.color.schemeGeneration + } + + SchemesListView { + name: "Preset variant" + object: Config.colors.presets + setting: "variant" + shouldBeActive: Config.colors.presets.name !== "" && !Config.general.color.schemeGeneration + stringList: FetchPresets.variantNames(Config.colors.presets.name) + + onOptionSet: item => { + Quickshell.execDetached(["zshell-cli", "scheme", "generate", "--preset", `${Config.colors.presets.name.toLowerCase()}:${item}`]); + } + } + + Separator { + shouldBeActive: Config.colors.presets.variant !== "" && FetchPresets.accents(Config.colors.presets.name, Config.colors.presets.variant).length > 0 && !Config.general.color.schemeGeneration + } + + SchemesListView { + name: "Preset accent" + object: Config.colors.presets + setting: "accent" + shouldBeActive: Config.colors.presets.variant !== "" && FetchPresets.accents(Config.colors.presets.name, Config.colors.presets.variant).length > 0 && !Config.general.color.schemeGeneration + stringList: FetchPresets.accents(Config.colors.presets.name, Config.colors.presets.variant) + + onOptionSet: item => { + Quickshell.execDetached(["zshell-cli", "scheme", "generate", "--preset", `${Config.colors.presets.name.toLowerCase()}:${Config.colors.presets.variant}`, "--accent", `${item}`]); + } + } + + Separator { + shouldBeActive: Config.general.color.schemeGeneration ? 1 : 0 } SettingSwitch { name: "Smart color scheme" object: Config.general.color setting: "smart" + shouldBeActive: Config.general.color.schemeGeneration ? 1 : 0 } Separator { + shouldBeActive: Config.general.color.schemeGeneration ? 1 : 0 } SettingSpinner { name: "Schedule dark mode" object: Config.general.color settings: ["scheduleDarkStart", "scheduleDarkEnd", "scheduleDark"] + shouldBeActive: Config.general.color.schemeGeneration ? 1 : 0 } Separator { diff --git a/Modules/Settings/Controls/SchemesListView.qml b/Modules/Settings/Controls/SchemesListView.qml new file mode 100644 index 0000000..ae4f558 --- /dev/null +++ b/Modules/Settings/Controls/SchemesListView.qml @@ -0,0 +1,161 @@ +pragma ComponentBehavior: Bound + +import Quickshell +import QtQuick +import QtQuick.Layouts +import qs.Config +import qs.Components + +Item { + id: root + + required property string name + required property var object + property alias row: row + required property string setting + property bool shouldBeActive: true + required property list stringList + + signal optionSet(option: string) + + anchors.left: parent.left + anchors.right: parent.right + implicitHeight: shouldBeActive ? row.height : 0 + opacity: shouldBeActive ? 1 : 0 + scale: shouldBeActive ? 1 : 0.8 + visible: opacity > 0 + + Behavior on opacity { + Anim { + } + } + Behavior on scale { + Anim { + } + } + Behavior on y { + Anim { + } + } + + RowLayout { + id: row + + anchors.left: parent.left + anchors.margins: Appearance.padding.small + anchors.right: parent.right + anchors.verticalCenter: parent.verticalCenter + + CustomText { + id: text + + Layout.fillWidth: true + font.pointSize: Appearance.font.size.larger + text: root.name + } + + CustomClippingRect { + Layout.preferredHeight: 42 * 6 + Appearance.padding.normal * 2 + Appearance.spacing.small * 5 + Layout.preferredWidth: 500 + color: DynamicColors.tPalette.m3surfaceContainer + radius: (21 + Appearance.padding.normal) * Appearance.rounding.scale + + CustomRect { + id: searchBox + + anchors.left: parent.left + anchors.margins: Appearance.padding.normal + anchors.right: parent.right + anchors.top: parent.top + color: DynamicColors.tPalette.m3surfaceContainer + implicitHeight: 42 + radius: Appearance.rounding.full + + MaterialIcon { + id: searchIcon + + anchors.bottom: parent.bottom + anchors.left: parent.left + anchors.leftMargin: Appearance.padding.large + anchors.top: parent.top + font.pointSize: Appearance.font.size.large + text: "search" + verticalAlignment: Text.AlignVCenter + } + + CustomTextField { + id: textSearch + + anchors.left: searchIcon.right + anchors.leftMargin: Appearance.spacing.small + anchors.right: parent.right + anchors.rightMargin: Appearance.spacing.normal + anchors.verticalCenter: parent.verticalCenter + placeholderText: "Search..." + } + } + + CustomClippingRect { + anchors.bottom: parent.bottom + anchors.left: parent.left + anchors.margins: Appearance.padding.normal + anchors.right: parent.right + anchors.top: searchBox.bottom + bottomLeftRadius: 21 + bottomRightRadius: 21 + + CustomListView { + anchors.fill: parent + clip: true + spacing: Appearance.spacing.small + + delegate: CustomRect { + id: delegate + + required property string modelData + + anchors.left: parent.left + anchors.right: parent.right + implicitHeight: 42 + radius: Appearance.rounding.smallest + + CustomText { + anchors.fill: parent + anchors.leftMargin: Appearance.padding.normal + text: modelData + verticalAlignment: Text.AlignVCenter + } + + MaterialIcon { + anchors.fill: parent + anchors.rightMargin: Appearance.padding.normal + color: DynamicColors.palette.m3primary + font.pointSize: Appearance.font.size.large + horizontalAlignment: Text.AlignRight + text: "check_circle" + verticalAlignment: Text.AlignVCenter + visible: root.object[root.setting] === delegate.modelData + } + + StateLayer { + onClicked: { + root.object[root.setting] = delegate.modelData; + root.optionSet(delegate.modelData); + Config.save(); + } + } + } + model: ScriptModel { + values: { + const values = root.stringList; + const search = textSearch.text; + var regex = new RegExp(search, "i"); + + return values.filter(n => regex.test(n)); + } + } + } + } + } + } +} diff --git a/Modules/Settings/Controls/Separator.qml b/Modules/Settings/Controls/Separator.qml index 86fcab4..f699e20 100644 --- a/Modules/Settings/Controls/Separator.qml +++ b/Modules/Settings/Controls/Separator.qml @@ -6,7 +6,26 @@ import qs.Config CustomRect { id: root - Layout.fillWidth: true - Layout.preferredHeight: 1 + property bool shouldBeActive: true + + anchors.left: parent.left + anchors.right: parent.right color: DynamicColors.tPalette.m3outlineVariant + implicitHeight: shouldBeActive ? 1 : 0 + opacity: shouldBeActive ? 1 : 0 + scale: shouldBeActive ? 1 : 0.8 + visible: opacity > 0 + + Behavior on opacity { + Anim { + } + } + Behavior on scale { + Anim { + } + } + Behavior on y { + Anim { + } + } } diff --git a/Modules/Settings/Controls/SettingActionList.qml b/Modules/Settings/Controls/SettingActionList.qml index cab88a7..af32bb1 100644 --- a/Modules/Settings/Controls/SettingActionList.qml +++ b/Modules/Settings/Controls/SettingActionList.qml @@ -13,6 +13,7 @@ ColumnLayout { required property string name required property var object required property string setting + property bool shouldBeActive: true function addAction() { const list = [...root.object[root.setting]]; @@ -44,8 +45,26 @@ ColumnLayout { Config.save(); } - Layout.fillWidth: true + anchors.left: parent.left + anchors.right: parent.right + height: shouldBeActive ? implicitHeight : 0 + opacity: shouldBeActive ? 1 : 0 + scale: shouldBeActive ? 1 : 0.8 spacing: Appearance.spacing.smaller + visible: opacity > 0 + + Behavior on opacity { + Anim { + } + } + Behavior on scale { + Anim { + } + } + Behavior on y { + Anim { + } + } Rectangle { anchors.fill: parent diff --git a/Modules/Settings/Controls/SettingAliasList.qml b/Modules/Settings/Controls/SettingAliasList.qml index 332bead..bfdb215 100644 --- a/Modules/Settings/Controls/SettingAliasList.qml +++ b/Modules/Settings/Controls/SettingAliasList.qml @@ -13,6 +13,7 @@ ColumnLayout { required property string name required property var object required property string setting + property bool shouldBeActive: true function addAlias() { const list = [...root.object[root.setting]]; @@ -40,8 +41,26 @@ ColumnLayout { Config.save(); } - Layout.fillWidth: true + anchors.left: parent.left + anchors.right: parent.right + height: shouldBeActive ? implicitHeight : 0 + opacity: shouldBeActive ? 1 : 0 + scale: shouldBeActive ? 1 : 0.8 spacing: Appearance.spacing.smaller + visible: opacity > 0 + + Behavior on opacity { + Anim { + } + } + Behavior on scale { + Anim { + } + } + Behavior on y { + Anim { + } + } Rectangle { anchors.fill: parent diff --git a/Modules/Settings/Controls/SettingBarEntryList.qml b/Modules/Settings/Controls/SettingBarEntryList.qml index 47ac184..06c6338 100644 --- a/Modules/Settings/Controls/SettingBarEntryList.qml +++ b/Modules/Settings/Controls/SettingBarEntryList.qml @@ -25,6 +25,7 @@ Item { required property var object property var pendingCommitEntries: [] required property string setting + property bool shouldBeActive: true property int uidCounter: 0 property var visualEntries: [] @@ -146,8 +147,25 @@ Item { Config.save(); } - Layout.fillWidth: true - implicitHeight: layout.implicitHeight + anchors.left: parent.left + anchors.right: parent.right + implicitHeight: shouldBeActive ? layout.implicitHeight : 0 + opacity: shouldBeActive ? 1 : 0 + scale: shouldBeActive ? 1 : 0.8 + visible: opacity > 0 + + Behavior on opacity { + Anim { + } + } + Behavior on scale { + Anim { + } + } + Behavior on y { + Anim { + } + } Component.onCompleted: root.rebuildVisualEntries() diff --git a/Modules/Settings/Controls/SettingHyprSpinner.qml b/Modules/Settings/Controls/SettingHyprSpinner.qml index 456b666..e18016f 100644 --- a/Modules/Settings/Controls/SettingHyprSpinner.qml +++ b/Modules/Settings/Controls/SettingHyprSpinner.qml @@ -11,6 +11,7 @@ Item { required property string name required property var object required property list settings + property bool shouldBeActive: true function commitChoice(choice: int, setting: string): void { root.object[setting] = choice; @@ -32,8 +33,25 @@ Item { return Qt.formatTime(d, "h AP"); } - Layout.fillWidth: true - Layout.preferredHeight: row.implicitHeight + Appearance.padding.smaller * 2 + anchors.left: parent.left + anchors.right: parent.right + implicitHeight: shouldBeActive ? row.implicitHeight + Appearance.padding.smaller * 2 : 0 + opacity: shouldBeActive ? 1 : 0 + scale: shouldBeActive ? 1 : 0.8 + visible: opacity > 0 + + Behavior on opacity { + Anim { + } + } + Behavior on scale { + Anim { + } + } + Behavior on y { + Anim { + } + } Rectangle { anchors.fill: parent diff --git a/Modules/Settings/Controls/SettingInput.qml b/Modules/Settings/Controls/SettingInput.qml index bbe8cec..9ca5032 100644 --- a/Modules/Settings/Controls/SettingInput.qml +++ b/Modules/Settings/Controls/SettingInput.qml @@ -11,6 +11,7 @@ Item { required property string name required property var object required property string setting + property bool shouldBeActive: true function formattedValue(): string { const value = root.object[root.setting]; @@ -21,8 +22,25 @@ Item { return String(value); } - Layout.fillWidth: true - Layout.preferredHeight: row.implicitHeight + Appearance.padding.smaller * 2 + anchors.left: parent.left + anchors.right: parent.right + implicitHeight: shouldBeActive ? row.implicitHeight + Appearance.padding.smaller * 2 : 0 + opacity: shouldBeActive ? 1 : 0 + scale: shouldBeActive ? 1 : 0.8 + visible: opacity > 0 + + Behavior on opacity { + Anim { + } + } + Behavior on scale { + Anim { + } + } + Behavior on y { + Anim { + } + } Rectangle { anchors.fill: parent diff --git a/Modules/Settings/Controls/SettingList.qml b/Modules/Settings/Controls/SettingList.qml index 197d143..6351c91 100644 --- a/Modules/Settings/Controls/SettingList.qml +++ b/Modules/Settings/Controls/SettingList.qml @@ -8,13 +8,31 @@ Item { required property int index required property var modelData + property bool shouldBeActive: true signal addActiveActionRequested signal deleteRequested(int index) signal fieldEdited(string key, var value) - Layout.fillWidth: true - Layout.preferredHeight: row.implicitHeight + Appearance.padding.smaller * 2 + anchors.left: parent.left + anchors.right: parent.right + implicitHeight: shouldBeActive ? row.implicitHeight + Appearance.padding.smaller * 2 : 0 + opacity: shouldBeActive ? 1 : 0 + scale: shouldBeActive ? 1 : 0.8 + visible: opacity > 0 + + Behavior on opacity { + Anim { + } + } + Behavior on scale { + Anim { + } + } + Behavior on y { + Anim { + } + } CustomRect { anchors.left: parent.left diff --git a/Modules/Settings/Controls/SettingListView.qml b/Modules/Settings/Controls/SettingListView.qml index 0893937..213b0af 100644 --- a/Modules/Settings/Controls/SettingListView.qml +++ b/Modules/Settings/Controls/SettingListView.qml @@ -11,10 +11,32 @@ Item { required property string name required property var object + property alias row: row required property string setting + property bool shouldBeActive: true + required property list stringList - Layout.fillWidth: true - Layout.preferredHeight: row.height + signal optionSet + + anchors.left: parent.left + anchors.right: parent.right + implicitHeight: shouldBeActive ? row.height : 0 + opacity: shouldBeActive ? 1 : 0 + scale: shouldBeActive ? 1 : 0.8 + visible: opacity > 0 + + Behavior on opacity { + Anim { + } + } + Behavior on scale { + Anim { + } + } + Behavior on y { + Anim { + } + } RowLayout { id: row @@ -120,17 +142,18 @@ Item { StateLayer { onClicked: { root.object[root.setting] = fontDelegate.modelData; + root.optionSet(); Config.save(); } } } model: ScriptModel { values: { - const fonts = Qt.fontFamilies(); + const values = root.stringList; const search = fontSearch.text; var regex = new RegExp(search, "i"); - return fonts.filter(n => regex.test(n)); + return values.filter(n => regex.test(n)); } } } diff --git a/Modules/Settings/Controls/SettingReadOnly.qml b/Modules/Settings/Controls/SettingReadOnly.qml index 73969a0..992cc45 100644 --- a/Modules/Settings/Controls/SettingReadOnly.qml +++ b/Modules/Settings/Controls/SettingReadOnly.qml @@ -9,10 +9,28 @@ Item { readonly property bool highlighted: SettingsHighlight.highlightedSetting === name required property string name + property bool shouldBeActive: true required property string value - Layout.fillWidth: true - Layout.preferredHeight: row.implicitHeight + Appearance.padding.smaller * 2 + anchors.left: parent.left + anchors.right: parent.right + implicitHeight: shouldBeActive ? row.implicitHeight + Appearance.padding.smaller * 2 : 0 + opacity: shouldBeActive ? 1 : 0 + scale: shouldBeActive ? 1 : 0.8 + visible: opacity > 0 + + Behavior on opacity { + Anim { + } + } + Behavior on scale { + Anim { + } + } + Behavior on y { + Anim { + } + } Rectangle { anchors.fill: parent diff --git a/Modules/Settings/Controls/SettingSpinBox.qml b/Modules/Settings/Controls/SettingSpinBox.qml index b3c1661..4ce4c76 100644 --- a/Modules/Settings/Controls/SettingSpinBox.qml +++ b/Modules/Settings/Controls/SettingSpinBox.qml @@ -13,10 +13,28 @@ Item { required property string name required property var object required property string setting + property bool shouldBeActive: true property real step: 1 - Layout.fillWidth: true - Layout.preferredHeight: row.implicitHeight + Appearance.padding.smaller * 2 + anchors.left: parent.left + anchors.right: parent.right + implicitHeight: shouldBeActive ? row.implicitHeight + Appearance.padding.smaller * 2 : 0 + opacity: shouldBeActive ? 1 : 0 + scale: shouldBeActive ? 1 : 0.8 + visible: opacity > 0 + + Behavior on opacity { + Anim { + } + } + Behavior on scale { + Anim { + } + } + Behavior on y { + Anim { + } + } Rectangle { anchors.fill: parent diff --git a/Modules/Settings/Controls/SettingSpinner.qml b/Modules/Settings/Controls/SettingSpinner.qml index c3f3790..cff00a4 100644 --- a/Modules/Settings/Controls/SettingSpinner.qml +++ b/Modules/Settings/Controls/SettingSpinner.qml @@ -11,6 +11,7 @@ Item { required property string name required property var object required property list settings + property bool shouldBeActive: true function commitChoice(choice: int, setting: string): void { root.object[setting] = choice; @@ -32,8 +33,25 @@ Item { return Qt.formatTime(d, "h AP"); } - Layout.fillWidth: true - Layout.preferredHeight: row.implicitHeight + Appearance.padding.smaller * 2 + anchors.left: parent.left + anchors.right: parent.right + implicitHeight: shouldBeActive ? row.implicitHeight + Appearance.padding.smaller * 2 : 0 + opacity: shouldBeActive ? 1 : 0 + scale: shouldBeActive ? 1 : 0.8 + visible: opacity > 0 + + Behavior on opacity { + Anim { + } + } + Behavior on scale { + Anim { + } + } + Behavior on y { + Anim { + } + } Rectangle { anchors.fill: parent diff --git a/Modules/Settings/Controls/SettingStringList.qml b/Modules/Settings/Controls/SettingStringList.qml index c3bfcae..7081d2e 100644 --- a/Modules/Settings/Controls/SettingStringList.qml +++ b/Modules/Settings/Controls/SettingStringList.qml @@ -12,9 +12,27 @@ Item { required property string name required property var object required property string setting + property bool shouldBeActive: true - Layout.fillWidth: true - Layout.preferredHeight: layout.implicitHeight + anchors.left: parent.left + anchors.right: parent.right + implicitHeight: shouldBeActive ? layout.implicitHeight : 0 + opacity: shouldBeActive ? 1 : 0 + scale: shouldBeActive ? 1 : 0.8 + visible: opacity > 0 + + Behavior on opacity { + Anim { + } + } + Behavior on scale { + Anim { + } + } + Behavior on y { + Anim { + } + } Rectangle { anchors.fill: parent @@ -46,6 +64,9 @@ Item { StringListEditor { Layout.fillWidth: true addLabel: root.addLabel + anchors.left: undefined + anchors.right: undefined + anchors.verticalCenter: undefined values: [...(root.object[root.setting] ?? [])] onListEdited: function (values) { diff --git a/Modules/Settings/Controls/SettingSwitch.qml b/Modules/Settings/Controls/SettingSwitch.qml index b87ad4d..09d4f92 100644 --- a/Modules/Settings/Controls/SettingSwitch.qml +++ b/Modules/Settings/Controls/SettingSwitch.qml @@ -11,9 +11,27 @@ Item { required property string name required property var object required property string setting + property bool shouldBeActive: true - Layout.fillWidth: true - Layout.preferredHeight: row.implicitHeight + Appearance.padding.smaller * 2 + anchors.left: parent.left + anchors.right: parent.right + implicitHeight: shouldBeActive ? row.implicitHeight + Appearance.padding.smaller * 2 : 0 + opacity: shouldBeActive ? 1 : 0 + scale: shouldBeActive ? 1 : 0.8 + visible: opacity > 0 + + Behavior on opacity { + Anim { + } + } + Behavior on scale { + Anim { + } + } + Behavior on y { + Anim { + } + } Rectangle { anchors.fill: parent diff --git a/Modules/Settings/Controls/SettingsHeader.qml b/Modules/Settings/Controls/SettingsHeader.qml index 257757a..42d3d95 100644 --- a/Modules/Settings/Controls/SettingsHeader.qml +++ b/Modules/Settings/Controls/SettingsHeader.qml @@ -7,9 +7,13 @@ CustomRect { id: root required property string name + property bool shouldBeActive: true - Layout.preferredHeight: 60 - Layout.preferredWidth: 200 + implicitHeight: 60 + implicitWidth: 200 + opacity: shouldBeActive ? 1 : 0 + scale: shouldBeActive ? 1 : 0.8 + visible: opacity > 0 CustomText { anchors.fill: parent diff --git a/Modules/Settings/Controls/SettingsPage.qml b/Modules/Settings/Controls/SettingsPage.qml index a19f7b7..1bd46b7 100644 --- a/Modules/Settings/Controls/SettingsPage.qml +++ b/Modules/Settings/Controls/SettingsPage.qml @@ -60,12 +60,18 @@ CustomClippingRect { } } - ColumnLayout { + Column { id: clayout anchors.left: parent.left anchors.right: parent.right spacing: Appearance.spacing.small + + // move: Transition { + // Anim { + // properties: "y" + // } + // } } } } diff --git a/Modules/Settings/Controls/SettingsSection.qml b/Modules/Settings/Controls/SettingsSection.qml index 8cdb049..10976bb 100644 --- a/Modules/Settings/Controls/SettingsSection.qml +++ b/Modules/Settings/Controls/SettingsSection.qml @@ -10,18 +10,39 @@ CustomRect { property real contentPadding: Appearance.padding.large property string sectionId: "" - Layout.fillWidth: true - Layout.preferredHeight: layout.implicitHeight + contentPadding * 2 + anchors.left: parent.left + anchors.right: parent.right color: DynamicColors.tPalette.m3surfaceContainer + implicitHeight: layout.height + contentPadding * 2 radius: Appearance.rounding.normal - Appearance.padding.smaller - ColumnLayout { + Behavior on implicitHeight { + Anim { + } + } + Behavior on y { + Anim { + } + } + + Column { id: layout anchors.left: parent.left anchors.margins: root.contentPadding anchors.right: parent.right - anchors.verticalCenter: parent.verticalCenter + anchors.top: parent.top + // anchors.verticalCenter: parent.verticalCenter spacing: Appearance.spacing.normal + + Behavior on height { + Anim { + } + } + move: Transition { + Anim { + properties: "y" + } + } } } diff --git a/Modules/Settings/Controls/SpinnerButton.qml b/Modules/Settings/Controls/SpinnerButton.qml index b31ceb3..af95494 100644 --- a/Modules/Settings/Controls/SpinnerButton.qml +++ b/Modules/Settings/Controls/SpinnerButton.qml @@ -12,12 +12,29 @@ CustomRect { property alias expanded: menu.expanded property alias label: label property alias menu: menu + property bool shouldBeActive: true property alias text: label.text color: enabled ? DynamicColors.palette.m3primary : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHigh, 2) + opacity: shouldBeActive ? 1 : 0 radius: Appearance.rounding.full + scale: shouldBeActive ? 1 : 0.8 + visible: opacity > 0 z: expanded ? 100 : 0 + Behavior on opacity { + Anim { + } + } + Behavior on scale { + Anim { + } + } + Behavior on y { + Anim { + } + } + CustomText { id: label diff --git a/Modules/Settings/Controls/StringListEditor.qml b/Modules/Settings/Controls/StringListEditor.qml index 701e334..1598cac 100644 --- a/Modules/Settings/Controls/StringListEditor.qml +++ b/Modules/Settings/Controls/StringListEditor.qml @@ -9,6 +9,7 @@ ColumnLayout { id: root property string addLabel: qsTr("Add entry") + property bool shouldBeActive: true property var values: [] signal listEdited(var values) @@ -31,8 +32,26 @@ ColumnLayout { root.listEdited(list); } - Layout.fillWidth: true + anchors.left: parent.left + anchors.right: parent.right + height: shouldBeActive ? implicitHeight : 0 + opacity: shouldBeActive ? 1 : 0 + scale: shouldBeActive ? 1 : 0.8 spacing: Appearance.spacing.smaller + visible: opacity > 0 + + Behavior on opacity { + Anim { + } + } + Behavior on scale { + Anim { + } + } + Behavior on y { + Anim { + } + } Repeater { model: [...root.values] diff --git a/Modules/Settings/Controls/WallpaperCropper.qml b/Modules/Settings/Controls/WallpaperCropper.qml index bd3ff93..d8a9e12 100644 --- a/Modules/Settings/Controls/WallpaperCropper.qml +++ b/Modules/Settings/Controls/WallpaperCropper.qml @@ -13,11 +13,29 @@ Item { id: wrapper property bool changesMade: false + property bool shouldBeActive: true signal requestCrop - Layout.fillWidth: true - Layout.preferredHeight: 400 + anchors.left: parent.left + anchors.right: parent.right + implicitHeight: shouldBeActive ? 400 : 0 + opacity: shouldBeActive ? 1 : 0 + scale: shouldBeActive ? 1 : 0.8 + visible: opacity > 0 + + Behavior on opacity { + Anim { + } + } + Behavior on scale { + Anim { + } + } + Behavior on y { + Anim { + } + } IconButton { anchors.margins: Appearance.padding.normal diff --git a/Modules/Settings/Controls/WallpaperGrid.qml b/Modules/Settings/Controls/WallpaperGrid.qml index 62bcd1b..c66ef00 100644 --- a/Modules/Settings/Controls/WallpaperGrid.qml +++ b/Modules/Settings/Controls/WallpaperGrid.qml @@ -12,13 +12,19 @@ GridView { readonly property int columnsCount: Math.max(1, Math.floor(width / minCellWidth)) readonly property int minCellWidth: 200 + Appearance.spacing.normal + property bool shouldBeActive: true - Layout.preferredHeight: contentHeight + anchors.left: parent.left + anchors.right: parent.right cellHeight: 140 + Appearance.spacing.normal cellWidth: width / columnsCount clip: true + implicitHeight: shouldBeActive ? contentHeight : 0 interactive: false model: Wallpapers.list + opacity: shouldBeActive ? 1 : 0 + scale: shouldBeActive ? 1 : 0.8 + visible: opacity > 0 delegate: Item { required property int index @@ -137,4 +143,16 @@ GridView { radius: itemRadius } } + Behavior on opacity { + Anim { + } + } + Behavior on scale { + Anim { + } + } + Behavior on y { + Anim { + } + } }