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
This commit is contained in:
Chris Cochrun 2023-09-29 06:45:51 -05:00
parent 6beb39bea8
commit da361a55a7
5 changed files with 59 additions and 48 deletions

View file

@ -4,10 +4,12 @@ import QtQuick.Controls 2.15 as Controls
import QtQuick.Window 2.15 import QtQuick.Window 2.15
import QtQuick.Layouts 1.15 import QtQuick.Layouts 1.15
import org.kde.kirigami 2.13 as Kirigami import org.kde.kirigami 2.13 as Kirigami
import "./" as Presenter
Kirigami.ActionToolBar { Kirigami.ActionToolBar {
id: root id: root
alignment: Qt.AlignRight alignment: Qt.AlignRight
height: Kirigami.Units.gridUnit * 2.0
Kirigami.Heading { Kirigami.Heading {
text: "Presenter" text: "Presenter"
@ -25,6 +27,9 @@ Kirigami.ActionToolBar {
anchors.centerIn: parent anchors.centerIn: parent
width: parent.width / 3 width: parent.width / 3
onAccepted: showPassiveNotification(searchField.text, 3000) onAccepted: showPassiveNotification(searchField.text, 3000)
background: Presenter.TextBackground {
control: searchField
}
} }
} }
}, },

View file

@ -135,6 +135,7 @@ ColumnLayout {
width: parent.width width: parent.width
display: Controls.Button.IconOnly display: Controls.Button.IconOnly
visible: selectedLibrary == libraryType visible: selectedLibrary == libraryType
rightPadding: 5
actions: [ actions: [
Kirigami.Action { Kirigami.Action {
icon.name: "document-new" icon.name: "document-new"
@ -150,6 +151,9 @@ ColumnLayout {
height: parent.height height: parent.height
width: parent.width - 40 width: parent.width - 40
onAccepted: proxyModel.setFilterRegularExpression(searchField.text) onAccepted: proxyModel.setFilterRegularExpression(searchField.text)
background: Presenter.TextBackground {
control: searchField
}
} }
} }
] ]

View file

@ -142,7 +142,7 @@ FocusScope {
implicitHeight: Kirigami.Units.gridUnit * 10 implicitHeight: Kirigami.Units.gridUnit * 10
anchors.left: previewSlide.right anchors.left: previewSlide.right
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
color: "white" color: Kirigami.Theme.textColor
MouseArea { MouseArea {
anchors.fill: parent anchors.fill: parent
onPressed: nextSlideAction() onPressed: nextSlideAction()

View file

@ -34,14 +34,21 @@ Item {
hoverEnabled: true hoverEnabled: true
/* flat: true */ /* flat: true */
onActivated: updateFont(currentText) onActivated: updateFont(currentText)
background: Presenter.TextBackground {
control: fontBox
}
} }
Controls.SpinBox { Controls.SpinBox {
id: fontSizeBox id: fontSizeBox
editable: true editable: true
from: 5 from: 5
to: 150 to: 150
height: parent.height
hoverEnabled: true hoverEnabled: true
onValueModified: updateFontSize(value) onValueModified: updateFontSize(value)
background: Presenter.TextBackground {
control: fontSizeBox
}
} }
Controls.ComboBox { Controls.ComboBox {
id: hAlignmentBox id: hAlignmentBox
@ -50,6 +57,9 @@ Item {
hoverEnabled: true hoverEnabled: true
/* flat: true */ /* flat: true */
onActivated: updateHorizontalTextAlignment(currentText.toLowerCase()); onActivated: updateHorizontalTextAlignment(currentText.toLowerCase());
background: Presenter.TextBackground {
control: hAlignmentBox
}
} }
Controls.ComboBox { Controls.ComboBox {
id: vAlignmentBox id: vAlignmentBox
@ -58,6 +68,9 @@ Item {
hoverEnabled: true hoverEnabled: true
/* flat: true */ /* flat: true */
onActivated: updateVerticalTextAlignment(currentText.toLowerCase()); onActivated: updateVerticalTextAlignment(currentText.toLowerCase());
background: Presenter.TextBackground {
control: vAlignmentBox
}
} }
Controls.ToolButton { Controls.ToolButton {
text: "B" text: "B"
@ -176,6 +189,10 @@ Item {
text: song.title text: song.title
padding: 10 padding: 10
onEditingFinished: updateTitle(text); onEditingFinished: updateTitle(text);
background: Presenter.TextBackground {
control: songTitleField
errorCondition: song.title.length === 0
}
} }
Controls.Label { Controls.Label {
@ -208,22 +225,9 @@ Item {
text: song.vorder text: song.vorder
padding: 10 padding: 10
onEditingFinished: updateVerseOrder(text); onEditingFinished: updateVerseOrder(text);
background: Rectangle { background: Presenter.TextBackground {
color: songVorderField.enabled ? Kirigami.Theme.backgroundColor : control: songVorderField
song.vorder.trim().length === 0 ? errorCondition: song.vorder.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
}
} }
} }
@ -268,17 +272,8 @@ Item {
editorTimer.running = false; editorTimer.running = false;
} }
onPressed: editorTimer.running = true onPressed: editorTimer.running = true
background: Rectangle { background: Presenter.TextBackground {
color: Kirigami.Theme.backgroundColor control: lyricsEditor
implicitWidth: parent.width
implicitHeight: parent.height
radius: 10
border.color: {
if (songVorderField.enabled)
return Kirigami.Theme.highlightColor
else
return Kirigami.Theme.positiveColor
}
} }
} }
} }
@ -313,6 +308,9 @@ Item {
text: song.author text: song.author
padding: 10 padding: 10
onEditingFinished: updateAuthor(text) onEditingFinished: updateAuthor(text)
background: Presenter.TextBackground {
control: songAuthorField
}
} }
Controls.Label { Controls.Label {
@ -346,7 +344,9 @@ Item {
text: song.audio text: song.audio
padding: 10 padding: 10
onEditingFinished: showPassiveNotification(text) onEditingFinished: showPassiveNotification(text)
background: Presenter.TextBackground {
control: songAudioField
}
} }
Controls.ToolButton { Controls.ToolButton {
@ -355,6 +355,9 @@ Item {
text: "Audio" text: "Audio"
icon.name: "folder-music-symbolic" icon.name: "folder-music-symbolic"
onClicked: updateAudioFile() onClicked: updateAudioFile()
/* background: Presenter.TextBackground { */
/* control: audioPickerButton */
/* } */
} }
} }
} }

View file

@ -1,32 +1,31 @@
import QtQuick 2.13 import QtQuick 2.13
import QtGraphicalEffects 1.15 import QtGraphicalEffects 1.15
import org.kde.kirigami 2.13 as Kirigami
Rectangle { Item {
id: root id: root
// Used for
property var control property var control
property bool errorCondition property bool errorCondition: false
implicitWidth: control.width
implicitHeight: control.height
color: Kirigami.Theme.backgroundColor Rectangle {
implicitWidth: parent.width id: rect
implicitHeight: parent.height color: Kirigami.Theme.backgroundColor
radius: 10 anchors.fill: parent
border.color: { radius: 10
if (control.enabled) border.color: control.activeFocus ? Kirigami.Theme.highlightColor : (errorCondition ? Kirigami.Theme.negativeTextColor : Kirigami.Theme.backgroundColor)
return Kirigami.Theme.highlightColor
else if (errorCondition)
return Kirigami.Theme.negativeTextColor
else
return Kirigami.Theme.positiveColor
} }
DropShadow { DropShadow {
id: shadow id: shadow
source: root width: control.hovered || control.activeFocus ? parent.width : 0
horizontalOffset: 2 height: control.hovered || control.activeFocus ? parent.height : 0
verticalOffset: 2 source: rect
horizontalOffset: control.hovered || control.activeFocus ? 2 : 0
verticalOffset: control.hovered || control.activeFocus ? 2 : 0
radius: 3 radius: 3
samples: 8 samples: 16
color: "black" color: "#AA000000"
} }
} }