From da361a55a7e8b138f738dbd84f01ecfb8186877a Mon Sep 17 00:00:00 2001 From: Chris Cochrun Date: Fri, 29 Sep 2023 06:45:51 -0500 Subject: [PATCH] fixing a lot of small ui pieces with gridUnits and colors May need to change TextBackground to just ControlBackground, and use it in more than just text controls --- src/qml/presenter/Header.qml | 5 +++ src/qml/presenter/LibraryItem.qml | 4 ++ src/qml/presenter/Presentation.qml | 2 +- src/qml/presenter/SongEditor.qml | 59 +++++++++++++++------------- src/qml/presenter/TextBackground.qml | 37 +++++++++-------- 5 files changed, 59 insertions(+), 48 deletions(-) diff --git a/src/qml/presenter/Header.qml b/src/qml/presenter/Header.qml index 322dd0f..d3095a6 100644 --- a/src/qml/presenter/Header.qml +++ b/src/qml/presenter/Header.qml @@ -4,10 +4,12 @@ import QtQuick.Controls 2.15 as Controls import QtQuick.Window 2.15 import QtQuick.Layouts 1.15 import org.kde.kirigami 2.13 as Kirigami +import "./" as Presenter Kirigami.ActionToolBar { id: root alignment: Qt.AlignRight + height: Kirigami.Units.gridUnit * 2.0 Kirigami.Heading { text: "Presenter" @@ -25,6 +27,9 @@ Kirigami.ActionToolBar { anchors.centerIn: parent width: parent.width / 3 onAccepted: showPassiveNotification(searchField.text, 3000) + background: Presenter.TextBackground { + control: searchField + } } } }, diff --git a/src/qml/presenter/LibraryItem.qml b/src/qml/presenter/LibraryItem.qml index 0bee03f..8cc152b 100644 --- a/src/qml/presenter/LibraryItem.qml +++ b/src/qml/presenter/LibraryItem.qml @@ -135,6 +135,7 @@ ColumnLayout { width: parent.width display: Controls.Button.IconOnly visible: selectedLibrary == libraryType + rightPadding: 5 actions: [ Kirigami.Action { icon.name: "document-new" @@ -150,6 +151,9 @@ ColumnLayout { height: parent.height width: parent.width - 40 onAccepted: proxyModel.setFilterRegularExpression(searchField.text) + background: Presenter.TextBackground { + control: searchField + } } } ] diff --git a/src/qml/presenter/Presentation.qml b/src/qml/presenter/Presentation.qml index 883bef7..c03fa5d 100644 --- a/src/qml/presenter/Presentation.qml +++ b/src/qml/presenter/Presentation.qml @@ -142,7 +142,7 @@ FocusScope { implicitHeight: Kirigami.Units.gridUnit * 10 anchors.left: previewSlide.right anchors.verticalCenter: parent.verticalCenter - color: "white" + color: Kirigami.Theme.textColor MouseArea { anchors.fill: parent onPressed: nextSlideAction() diff --git a/src/qml/presenter/SongEditor.qml b/src/qml/presenter/SongEditor.qml index 268f10b..27117b3 100644 --- a/src/qml/presenter/SongEditor.qml +++ b/src/qml/presenter/SongEditor.qml @@ -34,14 +34,21 @@ Item { hoverEnabled: true /* flat: true */ onActivated: updateFont(currentText) + background: Presenter.TextBackground { + control: fontBox + } } Controls.SpinBox { id: fontSizeBox editable: true from: 5 to: 150 + height: parent.height hoverEnabled: true onValueModified: updateFontSize(value) + background: Presenter.TextBackground { + control: fontSizeBox + } } Controls.ComboBox { id: hAlignmentBox @@ -50,6 +57,9 @@ Item { hoverEnabled: true /* flat: true */ onActivated: updateHorizontalTextAlignment(currentText.toLowerCase()); + background: Presenter.TextBackground { + control: hAlignmentBox + } } Controls.ComboBox { id: vAlignmentBox @@ -58,6 +68,9 @@ Item { hoverEnabled: true /* flat: true */ onActivated: updateVerticalTextAlignment(currentText.toLowerCase()); + background: Presenter.TextBackground { + control: vAlignmentBox + } } Controls.ToolButton { text: "B" @@ -176,6 +189,10 @@ Item { text: song.title padding: 10 onEditingFinished: updateTitle(text); + background: Presenter.TextBackground { + control: songTitleField + errorCondition: song.title.length === 0 + } } Controls.Label { @@ -208,22 +225,9 @@ Item { text: song.vorder padding: 10 onEditingFinished: updateVerseOrder(text); - background: Rectangle { - color: songVorderField.enabled ? Kirigami.Theme.backgroundColor : - song.vorder.trim().length === 0 ? - Kirigami.Theme.negativeBackgroundColor : - Kirigami.Theme.backgroundColor - implicitWidth: parent.width - implicitHeight: parent.height - radius: 10 - border.color: { - if (song.vorder.trim().length === 0) - return Kirigami.Theme.negativeTextColor - else if (songVorderField.enabled) - return Kirigami.Theme.highlightColor - else - return Kirigami.Theme.positiveColor - } + background: Presenter.TextBackground { + control: songVorderField + errorCondition: song.vorder.length === 0 } } @@ -268,17 +272,8 @@ Item { editorTimer.running = false; } onPressed: editorTimer.running = true - background: Rectangle { - color: Kirigami.Theme.backgroundColor - implicitWidth: parent.width - implicitHeight: parent.height - radius: 10 - border.color: { - if (songVorderField.enabled) - return Kirigami.Theme.highlightColor - else - return Kirigami.Theme.positiveColor - } + background: Presenter.TextBackground { + control: lyricsEditor } } } @@ -313,6 +308,9 @@ Item { text: song.author padding: 10 onEditingFinished: updateAuthor(text) + background: Presenter.TextBackground { + control: songAuthorField + } } Controls.Label { @@ -346,7 +344,9 @@ Item { text: song.audio padding: 10 onEditingFinished: showPassiveNotification(text) - + background: Presenter.TextBackground { + control: songAudioField + } } Controls.ToolButton { @@ -355,6 +355,9 @@ Item { text: "Audio" icon.name: "folder-music-symbolic" onClicked: updateAudioFile() + /* background: Presenter.TextBackground { */ + /* control: audioPickerButton */ + /* } */ } } } diff --git a/src/qml/presenter/TextBackground.qml b/src/qml/presenter/TextBackground.qml index bdf88a0..15060bd 100644 --- a/src/qml/presenter/TextBackground.qml +++ b/src/qml/presenter/TextBackground.qml @@ -1,32 +1,31 @@ import QtQuick 2.13 import QtGraphicalEffects 1.15 +import org.kde.kirigami 2.13 as Kirigami -Rectangle { +Item { id: root - // Used for property var control - property bool errorCondition + property bool errorCondition: false + implicitWidth: control.width + implicitHeight: control.height - color: Kirigami.Theme.backgroundColor - implicitWidth: parent.width - implicitHeight: parent.height - radius: 10 - border.color: { - if (control.enabled) - return Kirigami.Theme.highlightColor - else if (errorCondition) - return Kirigami.Theme.negativeTextColor - else - return Kirigami.Theme.positiveColor + Rectangle { + id: rect + color: Kirigami.Theme.backgroundColor + anchors.fill: parent + radius: 10 + border.color: control.activeFocus ? Kirigami.Theme.highlightColor : (errorCondition ? Kirigami.Theme.negativeTextColor : Kirigami.Theme.backgroundColor) } DropShadow { id: shadow - source: root - horizontalOffset: 2 - verticalOffset: 2 + width: control.hovered || control.activeFocus ? parent.width : 0 + height: control.hovered || control.activeFocus ? parent.height : 0 + source: rect + horizontalOffset: control.hovered || control.activeFocus ? 2 : 0 + verticalOffset: control.hovered || control.activeFocus ? 2 : 0 radius: 3 - samples: 8 - color: "black" + samples: 16 + color: "#AA000000" } }