diff --git a/app/qmlV2/component/MMBottomBar.qml b/app/qmlV2/component/MMBottomBar.qml index 1308a4d42..d1524b68f 100644 --- a/app/qmlV2/component/MMBottomBar.qml +++ b/app/qmlV2/component/MMBottomBar.qml @@ -27,11 +27,11 @@ Rectangle { color: Style.forest enum Buttons { - Delete, EditGeometry, Advanced, Save + Delete, EditGeometry, Advanced, Save, BigEdit } enum States { - First, Second, Third + First, Second, Third, Forth } required property var state @@ -60,6 +60,12 @@ Rectangle { ListElement { button: MMBottomBar.Buttons.Save; priority: 0 } } + ListModel { + id: modelForth + + ListElement { button: MMBottomBar.Buttons.BigEdit; priority: 0 } + } + // buttons shown inside bottom bar ListModel { id: visibleButtonModel @@ -103,6 +109,7 @@ Rectangle { case MMBottomBar.States.First: currentFullModel = modelFirst; break case MMBottomBar.States.Second: currentFullModel = modelSecond; break case MMBottomBar.States.Third: currentFullModel = modelThird; break + case MMBottomBar.States.Forth: currentFullModel = modelForth; break } visibleButtonModel.clear() visibleButtonModel.modelReset() diff --git a/app/qmlV2/component/MMBottomBarButton.qml b/app/qmlV2/component/MMBottomBarButton.qml index bf3293264..00b42b46d 100644 --- a/app/qmlV2/component/MMBottomBarButton.qml +++ b/app/qmlV2/component/MMBottomBarButton.qml @@ -1,68 +1,113 @@ import QtQuick +import QtQuick.Controls +import QtQuick.Controls.Basic import "../Style.js" as Style -Column { +Item { id: control signal clicked(var button) - Item { - height: parent.height - width: (buttonView.width - 2*Style.commonSpacing) / buttonView.model.count + height: parent.height + width: (buttonView.width - 2*Style.commonSpacing) / buttonView.model.count - Rectangle { - width: parent.width - Style.commonSpacing/2 - height: parent.height - Style.commonSpacing/2 - anchors.centerIn: parent - clip: button !== MMBottomBar.Buttons.Save - color: Style.transparent + Button { + id: bigButton - Image { - source: { - switch (button) { - case MMBottomBar.Buttons.Delete: return Style.deleteIcon - case MMBottomBar.Buttons.EditGeometry: return Style.editIcon - case MMBottomBar.Buttons.Advanced: return Style.moreIcon - case MMBottomBar.Buttons.Save: return Style.doneIcon - } - } - anchors.horizontalCenter: parent.horizontalCenter - anchors.bottom: parent.bottom - anchors.bottomMargin: 2 * Style.commonSpacing + (button === MMBottomBar.Buttons.Save ? 14 * __dp : 0) + anchors.centerIn: parent + width: parent.width + visible: button === MMBottomBar.Buttons.BigEdit - Rectangle { - visible: button === MMBottomBar.Buttons.Save - anchors.centerIn: parent - width: 56 * __dp - height: width - radius: width / 2 - color: Style.transparent - border.color: Style.grass - border.width: 14 * __dp - } - } + contentItem: Row { +// Image { +// source: { +// switch (button) { +// case MMBottomBar.Buttons.BigEdit: return Style.editIcon +// } +// } +// anchors.horizontalCenter: parent.horizontalCenter +// anchors.bottom: parent.bottom +// anchors.bottomMargin: 2 * Style.commonSpacing + (button === MMBottomBar.Buttons.Save ? 14 * __dp : 0) +// } Text { - text: { - switch (button) { - case MMBottomBar.Buttons.Delete: return qsTr("Delete") - case MMBottomBar.Buttons.EditGeometry: return qsTr("Edit Geometry") - case MMBottomBar.Buttons.Advanced: return qsTr("Advanced") - case MMBottomBar.Buttons.Save: return qsTr("Save") - } - } - width: parent.width - color: Style.white - font: Qt.font(Style.t4) - anchors.horizontalCenter: parent.horizontalCenter - anchors.bottom: parent.bottom - anchors.bottomMargin: Style.commonSpacing + font: Qt.font(Style.t3) + text: qsTr("Edit") + leftPadding: 32 * __dp + rightPadding: 32 * __dp + topPadding: 10 * __dp + bottomPadding: 10 * __dp + color: Style.forest horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + elide: Text.ElideRight + } + } + + background: Rectangle { + color: Style.grass + radius: height / 2 + } + } + + Rectangle { + id: smallButton + + width: parent.width - Style.commonSpacing/2 + height: parent.height - Style.commonSpacing/2 + anchors.centerIn: parent + clip: button !== MMBottomBar.Buttons.Save + color: Style.transparent + + visible: button !== MMBottomBar.Buttons.BigEdit + + Image { + source: { + switch (button) { + case MMBottomBar.Buttons.Delete: return Style.deleteIcon + case MMBottomBar.Buttons.EditGeometry: return Style.editIcon + case MMBottomBar.Buttons.Advanced: return Style.moreIcon + case MMBottomBar.Buttons.Save: return Style.doneIcon + case MMBottomBar.Buttons.BigEdit: return Style.doneIcon + } } + anchors.horizontalCenter: parent.horizontalCenter + anchors.bottom: parent.bottom + anchors.bottomMargin: 2 * Style.commonSpacing + (button === MMBottomBar.Buttons.Save ? 14 * __dp : 0) - MouseArea { - anchors.fill: parent - onClicked: control.clicked(button) + Rectangle { + visible: button === MMBottomBar.Buttons.Save + anchors.centerIn: parent + width: 56 * __dp + height: width + radius: width / 2 + color: Style.transparent + border.color: Style.grass + border.width: 14 * __dp + } + } + Text { + text: { + switch (button) { + case MMBottomBar.Buttons.Delete: return qsTr("Delete") + case MMBottomBar.Buttons.EditGeometry: return qsTr("Edit Geometry") + case MMBottomBar.Buttons.Advanced: return qsTr("Advanced") + case MMBottomBar.Buttons.Save: return qsTr("Save") + case MMBottomBar.Buttons.BigEdit: return qsTr("Edit") + } } + width: parent.width + color: Style.white + font: Qt.font(Style.t4) + anchors.horizontalCenter: parent.horizontalCenter + anchors.bottom: parent.bottom + anchors.bottomMargin: Style.commonSpacing + horizontalAlignment: Text.AlignHCenter + } + + MouseArea { + anchors.fill: parent + onClicked: control.clicked(button) } } } + diff --git a/gallery/qml/pages/BottomBarPage.qml b/gallery/qml/pages/BottomBarPage.qml index f5e03b489..e929ddcf5 100644 --- a/gallery/qml/pages/BottomBarPage.qml +++ b/gallery/qml/pages/BottomBarPage.qml @@ -37,13 +37,13 @@ in menu of Advenced '-1' button" } } MMBottomBar { - state: MMBottomBar.States.Second; anchors.bottomMargin: 100 + state: MMBottomBar.States.Second; anchors.bottomMargin: 100 * __dp Text { color: "white"; leftPadding: 20; anchors.bottom: parent.bottom text: "Delete:0 - EditGeometry:0" } } - MMBottomBar { state: MMBottomBar.States.Third; anchors.bottomMargin: 200 + MMBottomBar { state: MMBottomBar.States.Third; anchors.bottomMargin: 200 * __dp Text { color: "white"; leftPadding: 20; anchors.bottom: parent.bottom text: "Delete:2 - EditGeometry:3 - Advanced:-1 - Save:0" @@ -53,4 +53,11 @@ in menu of Advenced '-1' button" onEditGeometryClicked: console.log("Edit geometry clicked") onSaveClicked: console.log("Save clicked") } + MMBottomBar { + state: MMBottomBar.States.Forth; anchors.bottomMargin: 320 * __dp + Text { + color: "white"; leftPadding: 20; anchors.bottom: parent.bottom + text: "BigEdit:0" + } + } }