Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add vertical resizing feature to Widget component #1886

Merged
merged 5 commits into from Aug 9, 2022
Merged

Add vertical resizing feature to Widget component #1886

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0ea72d1
Add vertical resizing feature to Widget component
Jul 25, 2022
2036372
Change Widget API
Jul 29, 2022
3008875
Change collapsing and resizing behavior of Widget component
Aug 1, 2022
38c9518
WidgetContainer: change expanding widget behaviour
Aug 4, 2022
01e2cb0
Pro View: Set minimum heights for the orderbook and the best orders
Aug 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
67 changes: 61 additions & 6 deletions atomic_defi_design/Dex/Components/Widget.qml
View file
Open in desktop
Expand Up @@ -14,7 +14,9 @@ Item
property string title: "Widget"

property bool collapsable: true
property bool collapsedAtConstruction: false
property bool collapsed: false

property bool resizable: true

property alias header: headerLoader.sourceComponent
property alias background: backgroundLoader.sourceComponent
Expand All @@ -23,11 +25,16 @@ Item
property int spacing: 10
property int contentSpacing: 10

property int collapsedHeight: 70
property int minHeight: collapsedHeight
property int maxHeight: -1
property int _previousHeight

default property alias contentData: content.data

property bool _collapsed: collapsable && collapsedAtConstruction
function isCollapsed() { return collapsed }

function isCollapsed() { return _collapsed }
clip: true

// Background
Loader
Expand All @@ -37,8 +44,11 @@ Item
sourceComponent: defaultBackground
}

// Header + Content
Column
{
id: column

anchors.fill: parent
anchors.margins: root.margins

Expand All @@ -57,7 +67,7 @@ Item
{
id: content

visible: !root._collapsed
visible: !root.collapsed

width: parent.width
height: parent.height - y
Expand All @@ -66,6 +76,37 @@ Item
}
}

// Resize area
MouseArea
{
enabled: resizable && !collapsed
visible: enabled

anchors.bottom: root.bottom
width: root.width
height: 5

cursorShape: Qt.SizeVerCursor

onMouseYChanged:
{
if (root.parent.objectName === "widgetContainer")
{
if (root.parent.availableHeight === 0 && mouseY > 0)
return
if (root.parent.availableHeight && root.parent.availableHeight < mouseY)
root.height += root.parent.availableHeight
else
root.height += mouseY
}

if (root.maxHeight >= 0 && root.height > root.maxHeight)
root.height = root.maxHeight
else if (root.minHeight >= 0 && root.height < root.minHeight)
root.height = root.minHeight
}
}

// Header Component
Component
{
Expand All @@ -81,14 +122,28 @@ Item
width: 20
height: 20
color: collapseButMouseArea.containsMouse ? Dex.CurrentTheme.foregroundColor2 : Dex.CurrentTheme.foregroundColor
icon: root._collapsed ? Qaterial.Icons.chevronUp : Qaterial.Icons.chevronDown
icon: root.collapsed ? Qaterial.Icons.chevronUp : Qaterial.Icons.chevronDown

DefaultMouseArea
{
id: collapseButMouseArea
anchors.fill: parent
hoverEnabled: true
onClicked: root._collapsed = !root._collapsed
onClicked:
{
let oldHeight = root.height
root.collapsed = !root.collapsed
if (root.collapsed)
{
root._previousHeight = root.height
root.height = root.collapsedHeight
}
else
{
root.height = root._previousHeight
root._previousHeight = root.collapsedHeight
}
}
}
}
}
Expand Down
15 changes: 15 additions & 0 deletions atomic_defi_design/Dex/Components/WidgetContainer.qml
View file
Open in desktop
@@ -0,0 +1,15 @@
import QtQuick 2.12

Column
{
readonly property string componentName: "widgetContainer"
readonly property int availableHeight: height - (childrenRect.height + (children.length - 1) * spacing)

function getHeight(ratio)
{
return (height - (children.length - 1) * spacing) * ratio
}

spacing: 4
objectName: componentName
}
2 changes: 1 addition & 1 deletion atomic_defi_design/Dex/Exchange/Trade/OrderBook/Vertical.qml
View file
Open in desktop
Expand Up @@ -49,4 +49,4 @@ Widget
Layout.fillHeight: true
Layout.fillWidth: true
}
}
}
32 changes: 18 additions & 14 deletions atomic_defi_design/Dex/Exchange/Trade/ProView.qml
View file
Open in desktop
Expand Up @@ -132,38 +132,42 @@ RowLayout
id: tradingInfo

Layout.fillWidth: true
Layout.minimumHeight: isCollapsed() ? 60 : 610
Layout.fillHeight: !isCollapsed()
Layout.fillHeight: true

resizable: false
}
}

ColumnLayout
WidgetContainer
{
property real _orderBookHeightRatio: 0.65
property real _bestOrdersHeightRatio: 0.35

Layout.minimumWidth: orderBook.visible || bestOrders.visible ? 353 : -1
Layout.fillWidth: true
Layout.fillHeight: true
Layout.alignment: Qt.AlignTop
spacing: 4

onHeightChanged:
{
orderBook.height = getHeight(_orderBookHeightRatio);
bestOrders.height = getHeight(_bestOrdersHeightRatio);
}

OrderBook.Vertical
{
id: orderBook

Layout.fillWidth: true

Layout.minimumHeight: isCollapsed() ? 70 : 365
Layout.maximumHeight: bestOrders.visible && !bestOrders.isCollapsed() ? 536 : -1
Layout.fillHeight: !isCollapsed()
width: parent.width
}

// Best Orders
BestOrder.List
{
id: bestOrders

Layout.fillWidth: true

Layout.minimumHeight: isCollapsed() ? 70 : 196
Layout.fillHeight: !isCollapsed()
width: parent.width
}
}

Expand All @@ -175,9 +179,9 @@ RowLayout
Layout.minimumWidth: visible ? 302 : -1
Layout.maximumWidth: 350
Layout.fillWidth: true

Layout.minimumHeight: 571
Layout.fillHeight: true

resizable: false
}

ModalLoader
Expand Down