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 all 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.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 75 additions & 6 deletions atomic_defi_design/Dex/Components/Widget.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
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,42 @@ 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
{
if (root.parent.objectName === "widgetContainer" && root.parent.availableHeight < root._previousHeight)
{
if (root.height + root.parent.availableHeight < minHeight)
{
root.parent.resetSizes()
}
else
{
root.height += root.parent.availableHeight
}
}
else
{
root.height = root._previousHeight
}
root._previousHeight = root.collapsedHeight
}
}
}
}
}
Expand Down
24 changes: 24 additions & 0 deletions atomic_defi_design/Dex/Components/WidgetContainer.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
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
}

function resetSizes()
{
for (let i = 0; i < children.length; i++)
{
let child = children[i]
child.height = child.minHeight
}
}

spacing: 4
objectName: componentName
}
2 changes: 1 addition & 1 deletion atomic_defi_design/Dex/Exchange/Trade/OrderBook/Vertical.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,4 +49,4 @@ Widget
Layout.fillHeight: true
Layout.fillWidth: true
}
}
}
34 changes: 20 additions & 14 deletions atomic_defi_design/Dex/Exchange/Trade/ProView.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,38 +132,44 @@ 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
minHeight: 320
}

// Best Orders
BestOrder.List
{
id: bestOrders

Layout.fillWidth: true

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

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

Layout.minimumHeight: 571
Layout.fillHeight: true

resizable: false
}

ModalLoader
Expand Down