feature/custom-drawer (#563)
Replaced all the DrawerType with DrawerType2
This commit is contained in:
Nethius
GitHub
parent
fd030a5fd4
commit
074562b141
35 changed files with 1331 additions and 1319 deletions
|
|
@ -1,84 +0,0 @@
|
|||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
|
||||
import "../Config"
|
||||
|
||||
Drawer {
|
||||
id: drawer
|
||||
property bool needCloseButton: true
|
||||
|
||||
Connections {
|
||||
target: PageController
|
||||
|
||||
function onForceCloseDrawer() {
|
||||
visible = false
|
||||
}
|
||||
}
|
||||
|
||||
edge: Qt.BottomEdge
|
||||
|
||||
clip: true
|
||||
modal: true
|
||||
dragMargin: -10
|
||||
|
||||
enter: Transition {
|
||||
SmoothedAnimation {
|
||||
velocity: 4
|
||||
}
|
||||
}
|
||||
|
||||
exit: Transition {
|
||||
SmoothedAnimation {
|
||||
velocity: 4
|
||||
}
|
||||
}
|
||||
|
||||
background: Rectangle {
|
||||
anchors.fill: parent
|
||||
anchors.bottomMargin: -radius
|
||||
radius: 16
|
||||
color: "#1C1D21"
|
||||
|
||||
border.color: "#2C2D30"
|
||||
border.width: 1
|
||||
|
||||
Rectangle {
|
||||
visible: GC.isMobile()
|
||||
|
||||
anchors.top: parent.top
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
anchors.topMargin: 10
|
||||
|
||||
width: 20
|
||||
height: 2
|
||||
color: "#2C2D30"
|
||||
}
|
||||
}
|
||||
|
||||
Overlay.modal: Rectangle {
|
||||
color: Qt.rgba(14/255, 14/255, 17/255, 0.8)
|
||||
}
|
||||
|
||||
onAboutToShow: {
|
||||
if (PageController.getInitialPageNavigationBarColor() !== 0xFF1C1D21) {
|
||||
PageController.updateNavigationBarColor(0xFF1C1D21)
|
||||
}
|
||||
}
|
||||
|
||||
onOpened: {
|
||||
if (needCloseButton) {
|
||||
PageController.drawerOpen()
|
||||
}
|
||||
}
|
||||
|
||||
onClosed: {
|
||||
if (needCloseButton) {
|
||||
PageController.drawerClose()
|
||||
}
|
||||
|
||||
var initialPageNavigationBarColor = PageController.getInitialPageNavigationBarColor()
|
||||
if (initialPageNavigationBarColor !== 0xFF1C1D21) {
|
||||
PageController.updateNavigationBarColor(initialPageNavigationBarColor)
|
||||
}
|
||||
}
|
||||
}
|
||||
241
client/ui/qml/Controls2/DrawerType2.qml
Normal file
241
client/ui/qml/Controls2/DrawerType2.qml
Normal file
|
|
@ -0,0 +1,241 @@
|
|||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
|
||||
import "TextTypes"
|
||||
|
||||
Item {
|
||||
id: root
|
||||
|
||||
readonly property string drawerExpanded: "expanded"
|
||||
readonly property string drawerCollapsed: "collapsed"
|
||||
|
||||
readonly property bool isOpened: drawerContent.state === root.drawerExpanded || (drawerContent.state === root.drawerCollapsed && dragArea.drag.active === true)
|
||||
readonly property bool isClosed: drawerContent.state === root.drawerCollapsed && dragArea.drag.active === false
|
||||
|
||||
readonly property bool isExpanded: drawerContent.state === root.drawerExpanded
|
||||
readonly property bool isCollapsed: drawerContent.state === root.drawerCollapsed
|
||||
|
||||
property Component collapsedContent
|
||||
property Component expandedContent
|
||||
|
||||
property string defaultColor: "#1C1D21"
|
||||
property string borderColor: "#2C2D30"
|
||||
|
||||
property real expandedHeight
|
||||
property real collapsedHeight: 0
|
||||
|
||||
signal entered
|
||||
signal exited
|
||||
signal pressed(bool pressed, bool entered)
|
||||
|
||||
signal aboutToHide
|
||||
signal aboutToShow
|
||||
signal close
|
||||
signal open
|
||||
signal closed
|
||||
signal opened
|
||||
|
||||
Connections {
|
||||
target: root
|
||||
|
||||
function onClose() {
|
||||
if (isCollapsed) {
|
||||
return
|
||||
}
|
||||
|
||||
aboutToHide()
|
||||
|
||||
drawerContent.state = root.drawerCollapsed
|
||||
closed()
|
||||
}
|
||||
|
||||
function onOpen() {
|
||||
if (isExpanded) {
|
||||
return
|
||||
}
|
||||
|
||||
aboutToShow()
|
||||
|
||||
drawerContent.state = root.drawerExpanded
|
||||
opened()
|
||||
}
|
||||
}
|
||||
|
||||
/** Set once based on first implicit height change once all children are layed out */
|
||||
Component.onCompleted: {
|
||||
if (root.isCollapsed && root.collapsedHeight == 0) {
|
||||
root.collapsedHeight = drawerContent.implicitHeight
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: background
|
||||
|
||||
anchors.fill: parent
|
||||
color: root.isCollapsed ? "transparent" : Qt.rgba(14/255, 14/255, 17/255, 0.8)
|
||||
|
||||
Behavior on color {
|
||||
PropertyAnimation { duration: 200 }
|
||||
}
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: emptyArea
|
||||
anchors.fill: parent
|
||||
enabled: root.isExpanded
|
||||
onClicked: {
|
||||
root.close()
|
||||
}
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: dragArea
|
||||
|
||||
anchors.fill: drawerContentBackground
|
||||
cursorShape: root.isCollapsed ? Qt.PointingHandCursor : Qt.ArrowCursor
|
||||
hoverEnabled: true
|
||||
|
||||
enabled: drawerContent.implicitHeight > 0
|
||||
|
||||
drag.target: drawerContent
|
||||
drag.axis: Drag.YAxis
|
||||
drag.maximumY: root.height - root.collapsedHeight
|
||||
drag.minimumY: root.height - root.expandedHeight
|
||||
|
||||
/** If drag area is released at any point other than min or max y, transition to the other state */
|
||||
onReleased: {
|
||||
if (root.isCollapsed && drawerContent.y < dragArea.drag.maximumY) {
|
||||
root.open()
|
||||
return
|
||||
}
|
||||
if (root.isExpanded && drawerContent.y > dragArea.drag.minimumY) {
|
||||
root.close()
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
onEntered: {
|
||||
root.entered()
|
||||
}
|
||||
onExited: {
|
||||
root.exited()
|
||||
}
|
||||
onPressedChanged: {
|
||||
root.pressed(pressed, entered)
|
||||
}
|
||||
|
||||
onClicked: {
|
||||
if (root.isCollapsed) {
|
||||
root.open()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: drawerContentBackground
|
||||
|
||||
anchors { left: drawerContent.left; right: drawerContent.right; top: drawerContent.top }
|
||||
height: root.height
|
||||
radius: 16
|
||||
color: root.defaultColor
|
||||
border.color: root.borderColor
|
||||
border.width: 1
|
||||
|
||||
Rectangle {
|
||||
width: parent.radius
|
||||
height: parent.radius
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.right: parent.right
|
||||
anchors.left: parent.left
|
||||
color: parent.color
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
id: drawerContent
|
||||
|
||||
Drag.active: dragArea.drag.active
|
||||
anchors.right: root.right
|
||||
anchors.left: root.left
|
||||
y: root.height - drawerContent.height
|
||||
state: root.drawerCollapsed
|
||||
|
||||
implicitHeight: root.isCollapsed ? collapsedLoader.implicitHeight : expandedLoader.implicitHeight
|
||||
|
||||
onStateChanged: {
|
||||
if (root.isCollapsed) {
|
||||
var initialPageNavigationBarColor = PageController.getInitialPageNavigationBarColor()
|
||||
if (initialPageNavigationBarColor !== 0xFF1C1D21) {
|
||||
PageController.updateNavigationBarColor(initialPageNavigationBarColor)
|
||||
}
|
||||
return
|
||||
}
|
||||
if (root.isExpanded) {
|
||||
if (PageController.getInitialPageNavigationBarColor() !== 0xFF1C1D21) {
|
||||
PageController.updateNavigationBarColor(0xFF1C1D21)
|
||||
}
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
states: [
|
||||
State {
|
||||
name: root.drawerCollapsed
|
||||
PropertyChanges {
|
||||
target: drawerContent
|
||||
y: root.height - root.collapsedHeight
|
||||
}
|
||||
},
|
||||
State {
|
||||
name: root.drawerExpanded
|
||||
PropertyChanges {
|
||||
target: drawerContent
|
||||
y: dragArea.drag.minimumY
|
||||
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
transitions: [
|
||||
Transition {
|
||||
from: root.drawerCollapsed
|
||||
to: root.drawerExpanded
|
||||
PropertyAnimation {
|
||||
target: drawerContent
|
||||
properties: "y"
|
||||
duration: 200
|
||||
}
|
||||
},
|
||||
Transition {
|
||||
from: root.drawerExpanded
|
||||
to: root.drawerCollapsed
|
||||
PropertyAnimation {
|
||||
target: drawerContent
|
||||
properties: "y"
|
||||
duration: 200
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
Loader {
|
||||
id: collapsedLoader
|
||||
|
||||
visible: root.isCollapsed
|
||||
sourceComponent: root.collapsedContent
|
||||
|
||||
anchors.right: parent.right
|
||||
anchors.left: parent.left
|
||||
}
|
||||
|
||||
Loader {
|
||||
id: expandedLoader
|
||||
|
||||
visible: root.isExpanded
|
||||
sourceComponent: root.expandedContent
|
||||
|
||||
anchors.right: parent.right
|
||||
anchors.left: parent.left
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -36,19 +36,23 @@ Item {
|
|||
property int rootButtonTextBottomMargin: 16
|
||||
|
||||
property real drawerHeight: 0.9
|
||||
property Item drawerParent
|
||||
property Component listView
|
||||
|
||||
property alias menuVisible: menu.visible
|
||||
signal open
|
||||
signal close
|
||||
|
||||
implicitWidth: rootButtonContent.implicitWidth
|
||||
implicitHeight: rootButtonContent.implicitHeight
|
||||
|
||||
onMenuVisibleChanged: {
|
||||
if (menuVisible) {
|
||||
rootButtonBackground.border.color = rootButtonPressedBorderColor
|
||||
} else {
|
||||
rootButtonBackground.border.color = rootButtonDefaultBorderColor
|
||||
}
|
||||
onOpen: {
|
||||
menu.open()
|
||||
rootButtonBackground.border.color = rootButtonPressedBorderColor
|
||||
}
|
||||
|
||||
onClose: {
|
||||
menu.close()
|
||||
rootButtonBackground.border.color = rootButtonDefaultBorderColor
|
||||
}
|
||||
|
||||
onEnabledChanged: {
|
||||
|
|
@ -133,21 +137,21 @@ Item {
|
|||
hoverEnabled: root.enabled ? true : false
|
||||
|
||||
onEntered: {
|
||||
if (menu.visible === false) {
|
||||
if (menu.isClosed) {
|
||||
rootButtonBackground.border.color = rootButtonHoveredBorderColor
|
||||
rootButtonBackground.color = rootButtonBackgroundHoveredColor
|
||||
}
|
||||
}
|
||||
|
||||
onExited: {
|
||||
if (menu.visible === false) {
|
||||
if (menu.isClosed) {
|
||||
rootButtonBackground.border.color = rootButtonDefaultBorderColor
|
||||
rootButtonBackground.color = rootButtonBackgroundColor
|
||||
}
|
||||
}
|
||||
|
||||
onPressed: {
|
||||
if (menu.visible === false) {
|
||||
if (menu.isClosed) {
|
||||
rootButtonBackground.color = pressed ? rootButtonBackgroundPressedColor : entered ? rootButtonHoveredBorderColor : rootButtonDefaultBorderColor
|
||||
}
|
||||
}
|
||||
|
|
@ -156,60 +160,68 @@ Item {
|
|||
if (rootButtonClickedFunction && typeof rootButtonClickedFunction === "function") {
|
||||
rootButtonClickedFunction()
|
||||
} else {
|
||||
menu.visible = true
|
||||
menu.open()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
DrawerType {
|
||||
DrawerType2 {
|
||||
id: menu
|
||||
|
||||
width: parent.width
|
||||
height: parent.height * drawerHeight
|
||||
parent: drawerParent
|
||||
|
||||
ColumnLayout {
|
||||
id: header
|
||||
anchors.fill: parent
|
||||
expandedHeight: drawerParent.height * drawerHeight
|
||||
|
||||
anchors.top: parent.top
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.topMargin: 16
|
||||
expandedContent: Item {
|
||||
id: container
|
||||
|
||||
BackButtonType {
|
||||
backButtonImage: root.headerBackButtonImage
|
||||
backButtonFunction: function() {
|
||||
root.menuVisible = false
|
||||
}
|
||||
}
|
||||
}
|
||||
implicitHeight: menu.expandedHeight
|
||||
|
||||
FlickableType {
|
||||
anchors.top: header.bottom
|
||||
anchors.topMargin: 16
|
||||
contentHeight: col.implicitHeight
|
||||
ColumnLayout {
|
||||
id: header
|
||||
|
||||
Column {
|
||||
id: col
|
||||
anchors.top: parent.top
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.topMargin: 16
|
||||
|
||||
spacing: 16
|
||||
BackButtonType {
|
||||
backButtonImage: root.headerBackButtonImage
|
||||
backButtonFunction: function() {
|
||||
menu.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Header2Type {
|
||||
FlickableType {
|
||||
anchors.top: header.bottom
|
||||
anchors.topMargin: 16
|
||||
contentHeight: col.implicitHeight
|
||||
|
||||
Column {
|
||||
id: col
|
||||
anchors.top: parent.top
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.leftMargin: 16
|
||||
anchors.rightMargin: 16
|
||||
|
||||
headerText: root.headerText
|
||||
spacing: 16
|
||||
|
||||
width: parent.width
|
||||
}
|
||||
Header2Type {
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.leftMargin: 16
|
||||
anchors.rightMargin: 16
|
||||
|
||||
Loader {
|
||||
id: listViewLoader
|
||||
sourceComponent: root.listView
|
||||
headerText: root.headerText
|
||||
|
||||
width: parent.width
|
||||
}
|
||||
|
||||
Loader {
|
||||
id: listViewLoader
|
||||
sourceComponent: root.listView
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue