re-adatped pagehome
This commit is contained in:
ronoaer
parent
c461e00c5c
commit
366e27a321
5 changed files with 298 additions and 245 deletions
|
|
@ -217,6 +217,5 @@
|
|||
<file>ui/qml/Controls2/TopCloseButtonType.qml</file>
|
||||
<file>images/controls/x-circle.svg</file>
|
||||
<file>ui/qml/Controls2/Drawer2Type.qml</file>
|
||||
<file>ui/qml/Components/HomeRootMenuButton.qml</file>
|
||||
</qresource>
|
||||
</RCC>
|
||||
|
|
|
|||
|
|
@ -1,140 +0,0 @@
|
|||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
|
||||
import "../Controls2/TextTypes"
|
||||
import "../Controls2"
|
||||
|
||||
Item {
|
||||
id: root
|
||||
|
||||
property string text
|
||||
property int textMaximumLineCount: 2
|
||||
property int textElide: Qt.ElideRight
|
||||
|
||||
property string descriptionText
|
||||
|
||||
property var clickedFunction
|
||||
|
||||
property string rightImageSource
|
||||
|
||||
property string textColor: "#d7d8db"
|
||||
property string descriptionColor: "#878B91"
|
||||
property real textOpacity: 1.0
|
||||
|
||||
property string rightImageColor: "#d7d8db"
|
||||
|
||||
property bool descriptionOnTop: false
|
||||
|
||||
property string defaultServerHostName
|
||||
property string defaultContainerName
|
||||
|
||||
implicitWidth: content.implicitWidth + content.anchors.topMargin + content.anchors.bottomMargin
|
||||
implicitHeight: content.implicitHeight + content.anchors.leftMargin + content.anchors.rightMargin
|
||||
|
||||
ColumnLayout {
|
||||
id: content
|
||||
|
||||
anchors.right: parent.right
|
||||
anchors.left: parent.left
|
||||
anchors.bottom: parent.bottom
|
||||
|
||||
RowLayout {
|
||||
Layout.topMargin: 24
|
||||
Layout.leftMargin: 24
|
||||
Layout.rightMargin: 24
|
||||
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
|
||||
|
||||
Header1TextType {
|
||||
Layout.maximumWidth: root.width - 48 - 18 - 12 // todo
|
||||
|
||||
maximumLineCount: 2
|
||||
elide: Qt.ElideRight
|
||||
|
||||
text: root.text
|
||||
Layout.alignment: Qt.AlignLeft
|
||||
}
|
||||
|
||||
|
||||
ImageButtonType {
|
||||
id: rightImage
|
||||
|
||||
hoverEnabled: false
|
||||
image: rightImageSource
|
||||
imageColor: rightImageColor
|
||||
visible: rightImageSource ? true : false
|
||||
|
||||
// implicitSize: 18
|
||||
// backGroudRadius: 5
|
||||
horizontalPadding: 0
|
||||
padding: 0
|
||||
spacing: 0
|
||||
|
||||
|
||||
Rectangle {
|
||||
id: rightImageBackground
|
||||
anchors.fill: parent
|
||||
radius: 16
|
||||
color: "transparent"
|
||||
|
||||
Behavior on color {
|
||||
PropertyAnimation { duration: 200 }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
LabelTextType {
|
||||
Layout.bottomMargin: 44
|
||||
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
|
||||
|
||||
text: {
|
||||
var description = ""
|
||||
if (ServersModel.isDefaultServerHasWriteAccess()) {
|
||||
if (SettingsController.isAmneziaDnsEnabled()
|
||||
&& ContainersModel.isAmneziaDnsContainerInstalled(ServersModel.getDefaultServerIndex())) {
|
||||
description += "Amnezia DNS | "
|
||||
}
|
||||
} else {
|
||||
if (ServersModel.isDefaultServerConfigContainsAmneziaDns()) {
|
||||
description += "Amnezia DNS | "
|
||||
}
|
||||
}
|
||||
|
||||
description += root.defaultContainerName + " | " + root.defaultServerHostName
|
||||
return description
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
hoverEnabled: true
|
||||
|
||||
onEntered: {
|
||||
rightImageBackground.color = rightImage.hoveredColor
|
||||
|
||||
root.textOpacity = 0.8
|
||||
}
|
||||
|
||||
onExited: {
|
||||
rightImageBackground.color = rightImage.defaultColor
|
||||
|
||||
root.textOpacity = 1
|
||||
}
|
||||
|
||||
onPressedChanged: {
|
||||
rightImageBackground.color = pressed ? rightImage.pressedColor : entered ? rightImage.hoveredColor : rightImage.defaultColor
|
||||
|
||||
root.textOpacity = 0.7
|
||||
}
|
||||
|
||||
onClicked: {
|
||||
if (clickedFunction && typeof clickedFunction === "function") {
|
||||
clickedFunction()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -10,11 +10,18 @@ Item {
|
|||
target: PageController
|
||||
|
||||
function onForceCloseDrawer() {
|
||||
if (root.opened()) {
|
||||
close()
|
||||
return
|
||||
}
|
||||
|
||||
if (root.expanded()) {
|
||||
collapse()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
signal closed
|
||||
signal drawerClosed
|
||||
|
||||
visible: false
|
||||
|
||||
|
|
@ -28,6 +35,13 @@ Item {
|
|||
property int contentHeight: 0
|
||||
property Item contentParent: contentArea
|
||||
|
||||
property bool dragActive: dragArea.drag.active
|
||||
|
||||
/** Initial height of button content */
|
||||
property int collapsedHeight: 0
|
||||
|
||||
property bool fullMouseAreaVisible: true
|
||||
|
||||
state: "closed"
|
||||
|
||||
Rectangle {
|
||||
|
|
@ -37,7 +51,7 @@ Item {
|
|||
height: parent.height
|
||||
width: parent.width
|
||||
radius: 16
|
||||
color: "#90000000"
|
||||
color: "transparent" //"#90000000"
|
||||
border.color: "transparent"
|
||||
border.width: 1
|
||||
visible: true
|
||||
|
|
@ -45,19 +59,25 @@ Item {
|
|||
MouseArea {
|
||||
id: fullMouseArea
|
||||
anchors.fill: parent
|
||||
enabled: (root.state === "opened")
|
||||
enabled: (root.opened() || root.expanded())
|
||||
hoverEnabled: true
|
||||
visible: fullMouseAreaVisible
|
||||
|
||||
onClicked: {
|
||||
if (root.state === "opened") {
|
||||
if (root.opened()) {
|
||||
close()
|
||||
return
|
||||
}
|
||||
|
||||
if (root.expanded()) {
|
||||
collapse()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: placeAreaHolder
|
||||
height: parent.height - contentHeight
|
||||
height: (!root.opened()) ? 0 : parent.height - contentHeight
|
||||
anchors.right: parent.right
|
||||
anchors.left: parent.left
|
||||
visible: true
|
||||
|
|
@ -93,42 +113,65 @@ Item {
|
|||
|
||||
anchors.fill: parent
|
||||
|
||||
cursorShape: (root.state === "opened") ? Qt.PointingHandCursor : Qt.ArrowCursor
|
||||
cursorShape: root.collapsed() ? Qt.PointingHandCursor : Qt.ArrowCursor // ?
|
||||
hoverEnabled: true
|
||||
|
||||
drag.target: placeAreaHolder
|
||||
drag.axis: Drag.YAxis
|
||||
drag.maximumY: root.height
|
||||
drag.minimumY: root.height - root.height
|
||||
drag.maximumY: (root.collapsed() || root.expanded()) ? (root.height - collapsedHeight) : root.height
|
||||
drag.minimumY: (root.collapsed() || root.expanded()) ? (root.height - root.height * 0.9) : (root.height - root.height)
|
||||
|
||||
/** If drag area is released at any point other than min or max y, transition to the other state */
|
||||
onReleased: {
|
||||
if (root.state === "closed" && placeAreaHolder.y < root.height * 0.9) {
|
||||
if (root.closed() && placeAreaHolder.y < root.height * 0.9) {
|
||||
root.state = "opened"
|
||||
return
|
||||
}
|
||||
|
||||
if (root.state === "opened" && placeAreaHolder.y > (root.height - root.height * 0.9)) {
|
||||
if (root.opened() && placeAreaHolder.y > (root.height - root.height * 0.9)) {
|
||||
close()
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
if (root.collapsed() && placeAreaHolder.y < (root.height - collapsedHeight)) {
|
||||
root.state = "expanded"
|
||||
return
|
||||
}
|
||||
|
||||
if (root.expanded() && placeAreaHolder.y > (root.height - root.height * 0.9)) {
|
||||
root.state = "collapsed"
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
if (root.opened()) {
|
||||
placeAreaHolder.y = 0
|
||||
}
|
||||
}
|
||||
|
||||
onClicked: {
|
||||
if (root.state === "opened") {
|
||||
if (root.opened()) {
|
||||
close()
|
||||
return
|
||||
}
|
||||
|
||||
if (root.expanded()) {
|
||||
collapse()
|
||||
return
|
||||
}
|
||||
|
||||
if (root.collapsed()) {
|
||||
root.state = "expanded"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
onStateChanged: {
|
||||
if (root.state === "closed") {
|
||||
if (root.closed() || root.collapsed()) {
|
||||
var initialPageNavigationBarColor = PageController.getInitialPageNavigationBarColor()
|
||||
if (initialPageNavigationBarColor !== 0xFF1C1D21) {
|
||||
PageController.updateNavigationBarColor(initialPageNavigationBarColor)
|
||||
|
|
@ -138,11 +181,12 @@ Item {
|
|||
PageController.drawerClose()
|
||||
}
|
||||
|
||||
closed()
|
||||
drawerClosed()
|
||||
|
||||
return
|
||||
}
|
||||
if (root.state === "opened") {
|
||||
|
||||
if (root.opened() || root.expanded()) {
|
||||
if (PageController.getInitialPageNavigationBarColor() !== 0xFF1C1D21) {
|
||||
PageController.updateNavigationBarColor(0xFF1C1D21)
|
||||
}
|
||||
|
|
@ -161,7 +205,7 @@ Item {
|
|||
name: "closed"
|
||||
PropertyChanges {
|
||||
target: placeAreaHolder
|
||||
y: parent.height
|
||||
y: root.height
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -171,6 +215,22 @@ Item {
|
|||
target: placeAreaHolder
|
||||
y: dragArea.drag.minimumY
|
||||
}
|
||||
},
|
||||
|
||||
State {
|
||||
name: "collapsed"
|
||||
PropertyChanges {
|
||||
target: placeAreaHolder
|
||||
y: root.height - collapsedHeight
|
||||
}
|
||||
},
|
||||
|
||||
State {
|
||||
name: "expanded"
|
||||
PropertyChanges {
|
||||
target: placeAreaHolder
|
||||
y: root.height - root.height * 0.9
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
|
|
@ -199,6 +259,40 @@ Item {
|
|||
properties: "y"
|
||||
duration: 200
|
||||
}
|
||||
},
|
||||
|
||||
Transition {
|
||||
from: "expanded"
|
||||
to: "collapsed"
|
||||
PropertyAnimation {
|
||||
target: placeAreaHolder
|
||||
properties: "y"
|
||||
duration: 200
|
||||
}
|
||||
|
||||
onRunningChanged: {
|
||||
if (!running) {
|
||||
draw2Background.color = "transparent"
|
||||
fullMouseArea.visible = false
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
Transition {
|
||||
from: "collapsed"
|
||||
to: "expanded"
|
||||
PropertyAnimation {
|
||||
target: placeAreaHolder
|
||||
properties: "y"
|
||||
duration: 200
|
||||
}
|
||||
|
||||
onRunningChanged: {
|
||||
if (!running) {
|
||||
draw2Background.color = "#90000000"
|
||||
visibledMouseArea(true)
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
|
|
@ -212,9 +306,11 @@ Item {
|
|||
}
|
||||
|
||||
function open() {
|
||||
if (root.visible && root.state !== "closed") {
|
||||
//if (root.visible && !root.closed()) {
|
||||
if (root.opened()) {
|
||||
return
|
||||
}
|
||||
|
||||
draw2Background.color = "#90000000"
|
||||
|
||||
visibledMouseArea(true)
|
||||
|
|
@ -240,21 +336,52 @@ Item {
|
|||
root.state = "closed"
|
||||
}
|
||||
|
||||
onVisibleChanged: {
|
||||
// e.g cancel, ......
|
||||
if (!visible) {
|
||||
if (root.state === "opened") {
|
||||
if (needCloseButton) {
|
||||
PageController.drawerClose()
|
||||
}
|
||||
function collapse() {
|
||||
draw2Background.color = "transparent"
|
||||
root.state = "collapsed"
|
||||
}
|
||||
|
||||
close()
|
||||
}
|
||||
}
|
||||
|
||||
function visibledMouseArea(visbile) {
|
||||
fullMouseArea.visible = visbile
|
||||
dragArea.visible = visbile
|
||||
}
|
||||
|
||||
function opened() {
|
||||
return root.state === "opened" ? true : false
|
||||
}
|
||||
|
||||
function expanded() {
|
||||
return root.state === "expanded" ? true : false
|
||||
}
|
||||
|
||||
function closed() {
|
||||
return root.state === "closed" ? true : false
|
||||
}
|
||||
|
||||
function collapsed() {
|
||||
return root.state === "collapsed" ? true : false
|
||||
}
|
||||
|
||||
|
||||
onVisibleChanged: {
|
||||
// e.g cancel, ......
|
||||
if (!visible) {
|
||||
if (root.opened()) {
|
||||
if (needCloseButton) {
|
||||
PageController.drawerClose()
|
||||
}
|
||||
|
||||
close()
|
||||
}
|
||||
|
||||
if (root.expanded()) {
|
||||
if (needCloseButton) {
|
||||
PageController.drawerClose()
|
||||
}
|
||||
|
||||
collapse()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -30,13 +30,13 @@ PageType {
|
|||
target: PageController
|
||||
|
||||
function onRestorePageHomeState(isContainerInstalled) {
|
||||
menu.close()
|
||||
buttonContent.collapse()
|
||||
if (isContainerInstalled) {
|
||||
containersDropDown.menuVisible = true
|
||||
}
|
||||
}
|
||||
function onForceCloseDrawer() {
|
||||
menu.close()
|
||||
buttonContent.collapse()
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -69,7 +69,7 @@ PageType {
|
|||
}
|
||||
}
|
||||
|
||||
// collapsedServerMenuDescription.text = description + root.defaultContainerName + " | " + root.defaultServerHostName
|
||||
collapsedServerMenuDescription.text = description + root.defaultContainerName + " | " + root.defaultServerHostName
|
||||
expandedServersMenuDescription.text = description + root.defaultServerHostName
|
||||
}
|
||||
|
||||
|
|
@ -79,7 +79,7 @@ PageType {
|
|||
|
||||
Item {
|
||||
anchors.fill: parent
|
||||
anchors.bottomMargin: defaultServerInfo.implicitHeight
|
||||
anchors.bottomMargin: buttonContent.collapsedHeight
|
||||
|
||||
ConnectButton {
|
||||
anchors.centerIn: parent
|
||||
|
|
@ -88,7 +88,7 @@ PageType {
|
|||
|
||||
Rectangle {
|
||||
id: buttonBackground
|
||||
anchors.fill: defaultServerInfo
|
||||
anchors { left: buttonContent.left; right: buttonContent.right; top: buttonContent.top }
|
||||
|
||||
radius: 16
|
||||
color: root.defaultColor
|
||||
|
|
@ -105,41 +105,105 @@ PageType {
|
|||
}
|
||||
}
|
||||
|
||||
HomeRootMenuButton {
|
||||
id: defaultServerInfo
|
||||
anchors.right: parent.right
|
||||
anchors.left: parent.left
|
||||
anchors.bottom: parent.bottom
|
||||
|
||||
text: root.defaultServerName
|
||||
rightImageSource: "qrc:/images/controls/chevron-down.svg"
|
||||
|
||||
defaultContainerName: root.defaultContainerName
|
||||
defaultServerHostName: root.defaultServerHostName
|
||||
|
||||
clickedFunction: function() {
|
||||
menu.open()
|
||||
}
|
||||
}
|
||||
|
||||
Drawer2Type {
|
||||
id: menu
|
||||
parent: root
|
||||
id: buttonContent
|
||||
visible: true
|
||||
|
||||
fullMouseAreaVisible: false
|
||||
|
||||
/** True when expanded objects should be visible */
|
||||
property bool expandedVisibility: buttonContent.expanded() || (buttonContent.collapsed() && buttonContent.dragActive)
|
||||
/** True when collapsed objects should be visible */
|
||||
property bool collapsedVisibility: buttonContent.collapsed() && !buttonContent.dragActive
|
||||
|
||||
width: parent.width
|
||||
height: parent.height
|
||||
contentHeight: parent.height * 0.9
|
||||
|
||||
|
||||
ColumnLayout {
|
||||
id: content
|
||||
|
||||
parent: buttonContent.contentParent
|
||||
|
||||
visible: buttonContent.collapsedVisibility
|
||||
|
||||
anchors.right: parent.right
|
||||
anchors.left: parent.left
|
||||
anchors.top: parent.top
|
||||
|
||||
onImplicitHeightChanged: {
|
||||
if (buttonContent.collapsed() && buttonContent.collapsedHeight === 0) {
|
||||
buttonContent.collapsedHeight = implicitHeight
|
||||
}
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
Layout.topMargin: 24
|
||||
Layout.leftMargin: 24
|
||||
Layout.rightMargin: 24
|
||||
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
|
||||
|
||||
Header1TextType {
|
||||
id: collapsedButtonHeader
|
||||
Layout.maximumWidth: root.width - 48 - 18 - 12 // todo
|
||||
|
||||
maximumLineCount: 2
|
||||
elide: Qt.ElideRight
|
||||
|
||||
text: root.defaultServerName
|
||||
|
||||
Layout.alignment: Qt.AlignLeft
|
||||
}
|
||||
|
||||
|
||||
ImageButtonType {
|
||||
id: collapsedButtonChevron
|
||||
|
||||
hoverEnabled: false
|
||||
image: "qrc:/images/controls/chevron-down.svg"
|
||||
imageColor: "#d7d8db"
|
||||
|
||||
horizontalPadding: 0
|
||||
padding: 0
|
||||
spacing: 0
|
||||
|
||||
Rectangle {
|
||||
id: rightImageBackground
|
||||
anchors.fill: parent
|
||||
radius: 16
|
||||
color: "transparent"
|
||||
|
||||
Behavior on color {
|
||||
PropertyAnimation { duration: 200 }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
LabelTextType {
|
||||
id: collapsedServerMenuDescription
|
||||
Layout.bottomMargin: 44
|
||||
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
|
||||
visible: buttonContent.collapsedVisibility
|
||||
}
|
||||
}
|
||||
|
||||
Component.onCompleted: {
|
||||
buttonContent.collapse()
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
id: serversMenuHeader
|
||||
|
||||
parent: menu.contentParent
|
||||
parent: buttonContent.contentParent
|
||||
|
||||
anchors.top: parent.top
|
||||
anchors.right: parent.right
|
||||
anchors.left: parent.left
|
||||
|
||||
visible: buttonContent.expandedVisibility
|
||||
|
||||
Header1TextType {
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 24
|
||||
|
|
@ -222,6 +286,7 @@ PageType {
|
|||
Layout.topMargin: 48
|
||||
Layout.leftMargin: 16
|
||||
Layout.rightMargin: 16
|
||||
visible: buttonContent.expandedVisibility
|
||||
|
||||
headerText: qsTr("Servers")
|
||||
}
|
||||
|
|
@ -230,7 +295,7 @@ PageType {
|
|||
Flickable {
|
||||
id: serversContainer
|
||||
|
||||
parent: menu.contentParent
|
||||
parent: buttonContent.contentParent
|
||||
|
||||
anchors.top: serversMenuHeader.bottom
|
||||
anchors.right: parent.right
|
||||
|
|
@ -239,6 +304,8 @@ PageType {
|
|||
anchors.topMargin: 16
|
||||
contentHeight: col.implicitHeight
|
||||
|
||||
visible: buttonContent.expandedVisibility
|
||||
|
||||
clip: true
|
||||
|
||||
ScrollBar.vertical: ScrollBar {
|
||||
|
|
@ -342,7 +409,7 @@ PageType {
|
|||
onClicked: function() {
|
||||
ServersModel.currentlyProcessedIndex = index
|
||||
PageController.goToPage(PageEnum.PageSettingsServerInfo)
|
||||
menu.close()
|
||||
buttonContent.collapse()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -247,7 +247,7 @@ PageType {
|
|||
|
||||
z: 1
|
||||
|
||||
onClosed: {
|
||||
onDrawerClosed: {
|
||||
tabBar.setCurrentIndex(tabBar.previousIndex)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue