makeing ImageEditor layout make more sense

This commit is contained in:
Chris Cochrun 2022-10-14 07:17:12 -05:00
parent b621bb0e10
commit 175182a32b

View file

@ -25,24 +25,23 @@ Item {
RowLayout { RowLayout {
anchors.fill: parent anchors.fill: parent
Controls.ComboBox { Controls.TextField {
model: Qt.fontFamilies() id: imageTitleField
implicitWidth: 300
editable: true Layout.preferredWidth: 300
hoverEnabled: true
/* onCurrentTextChanged: showPassiveNotification(currentText) */ placeholderText: "Image Title..."
} text: image.title
Controls.SpinBox { padding: 10
editable: true onEditingFinished: updateTitle(text);
from: 5
to: 72
hoverEnabled: true
} }
Controls.ComboBox { Controls.ComboBox {
model: ["IMAGES", "Center", "Right", "Justify"] model: ["Fill", "Crop", "Height", "Width"]
implicitWidth: 100 implicitWidth: 100
hoverEnabled: true hoverEnabled: true
} }
Controls.ToolSeparator {} Controls.ToolSeparator {}
Item { Layout.fillWidth: true } Item { Layout.fillWidth: true }
Controls.ToolSeparator {} Controls.ToolSeparator {}
@ -96,58 +95,22 @@ Item {
} }
} }
Controls.SplitView { ColumnLayout {
Layout.fillHeight: true Layout.fillHeight: true
Layout.fillWidth: true Layout.fillWidth: true
/* Layout.minimumWidth: 300 */
Layout.alignment: Qt.AlignCenter
Layout.columnSpan: 2 Layout.columnSpan: 2
handle: Item{
implicitWidth: 6
Rectangle {
height: parent.height
anchors.horizontalCenter: parent.horizontalCenter
width: 1
color: Controls.SplitHandle.hovered ? Kirigami.Theme.hoverColor : Kirigami.Theme.backgroundColor
}
}
ColumnLayout {
Controls.SplitView.fillHeight: true
Controls.SplitView.preferredWidth: 300
Controls.SplitView.minimumWidth: 100
Controls.TextField {
id: imageTitleField
Layout.preferredWidth: 300
Layout.fillWidth: true
Layout.leftMargin: 20
Layout.rightMargin: 20
placeholderText: "Image Title..."
text: image.title
padding: 10
onEditingFinished: updateTitle(text);
}
Item {
id: empty
Layout.fillHeight: true
}
}
ColumnLayout {
Controls.SplitView.fillHeight: true
Controls.SplitView.preferredWidth: 700
Controls.SplitView.minimumWidth: 300
spacing: 5 spacing: 5
Item { Item {
id: topEmpty id: topEmpty
Layout.fillHeight: true Layout.preferredHeight: 30
} }
Image { Image {
id: imagePreview id: imagePreview
Layout.preferredWidth: 600 Layout.preferredWidth: 1000
Layout.preferredHeight: Layout.preferredWidth / 16 * 9 Layout.preferredHeight: Layout.preferredWidth / 16 * 9
Layout.alignment: Qt.AlignCenter Layout.alignment: Qt.AlignCenter
fillMode: Image.PreserveAspectFit fillMode: Image.PreserveAspectFit
@ -160,7 +123,6 @@ Item {
} }
} }
}
function changeImage(image) { function changeImage(image) {
root.image = image; root.image = image;