diff --git a/sandbox/StatusTabSwitchPage.qml b/sandbox/StatusTabSwitchPage.qml new file mode 100644 index 00000000..1aa3753f --- /dev/null +++ b/sandbox/StatusTabSwitchPage.qml @@ -0,0 +1,24 @@ +import QtQuick 2.14 +import QtQuick.Layouts 1.14 +import QtQuick.Controls 2.13 + +import StatusQ.Controls 0.1 + +GridLayout { + columns: 1 + columnSpacing: 5 + rowSpacing: 5 + + StatusSwitchTabBar { + StatusSwitchTab { + text: "Swap" + } + StatusSwitchTab { + text: "Swap & Send" + } + StatusSwitchTab { + text: "Send" + } + } +} + diff --git a/sandbox/main.qml b/sandbox/main.qml index 802829a3..3ebe313d 100644 --- a/sandbox/main.qml +++ b/sandbox/main.qml @@ -138,6 +138,11 @@ StatusWindow { selected: page.sourceComponent == buttonsComponent onClicked: page.sourceComponent = buttonsComponent } + StatusNavigationListItem { + title: "StatusSwitchTab" + selected: page.sourceComponent == statusTabSwitchesComponent + onClicked: page.sourceComponent = statusTabSwitchesComponent + } StatusNavigationListItem { title: "Controls" selected: page.sourceComponent == controlsComponent @@ -281,6 +286,11 @@ StatusWindow { Popups {} } + Component { + id: statusTabSwitchesComponent + StatusTabSwitchPage {} + } + Component { id: demoAppCmp diff --git a/src/StatusQ/Controls/StatusSwitchTab.qml b/src/StatusQ/Controls/StatusSwitchTab.qml new file mode 100644 index 00000000..bc9757b5 --- /dev/null +++ b/src/StatusQ/Controls/StatusSwitchTab.qml @@ -0,0 +1,53 @@ +import QtQuick 2.14 +import QtQuick.Controls 2.14 +import QtGraphicalEffects 1.13 + +import StatusQ.Core 0.1 +import StatusQ.Core.Theme 0.1 + +TabButton { + id: control + contentItem: Item { + height: 36 + MouseArea { + id: sensor + hoverEnabled: true + anchors.fill: parent + cursorShape: control.hovered ? Qt.PointingHandCursor : Qt.ArrowCursor + onClicked: control.checked = true + + StatusBaseText { + id: label + text: control.text + color: Theme.palette.primaryColor1 + font.weight: Font.Medium + font.pixelSize: 15 + horizontalAlignment: Text.AlignHCenter + anchors.centerIn: parent + } + } + } + + background: Rectangle { + id: controlBackground + implicitHeight: 36 + implicitWidth: 148 + color: control.checked ? + Theme.palette.statusSwitchTab.backgroundColor : + "transparent" + radius: 8 + layer.enabled: true + layer.effect: DropShadow { + width: controlBackground.width + height: controlBackground.height + x: controlBackground.x + source: controlBackground + horizontalOffset: 0 + verticalOffset: 0 + radius: 10 + samples: 25 + spread: 0 + color: Theme.palette.dropShadow + } + } +} diff --git a/src/StatusQ/Controls/StatusSwitchTabBar.qml b/src/StatusQ/Controls/StatusSwitchTabBar.qml new file mode 100644 index 00000000..f23b3ebb --- /dev/null +++ b/src/StatusQ/Controls/StatusSwitchTabBar.qml @@ -0,0 +1,16 @@ +import QtQuick 2.14 +import QtQuick.Controls 2.14 +import StatusQ.Core.Theme 0.1 + +TabBar { + id: control + padding: 1 + + background: Rectangle { + implicitHeight: 36 + color: Theme.palette.directColor7 + radius: 8 + border.width: 1 + border.color: color + } +} diff --git a/src/StatusQ/Controls/qmldir b/src/StatusQ/Controls/qmldir index 48de26c1..5d3cde51 100644 --- a/src/StatusQ/Controls/qmldir +++ b/src/StatusQ/Controls/qmldir @@ -17,3 +17,5 @@ StatusSlider 0.1 StatusSlider.qml StatusBaseInput 0.1 StatusBaseInput.qml StatusInput 0.1 StatusInput.qml StatusPickerButton 0.1 StatusPickerButton.qml +StatusSwitchTab 0.1 StatusSwitchTab.qml +StatusSwitchTabBar 0.1 StatusSwitchTabBar.qml diff --git a/src/StatusQ/Core/Theme/StatusDarkTheme.qml b/src/StatusQ/Core/Theme/StatusDarkTheme.qml index 53657c36..4afe71dc 100644 --- a/src/StatusQ/Core/Theme/StatusDarkTheme.qml +++ b/src/StatusQ/Core/Theme/StatusDarkTheme.qml @@ -177,5 +177,9 @@ ThemePalette { property QtObject statusChatInput: QtObject { property color secondaryBackgroundColor: "#414141" } + + property QtObject statusSwitchTab: QtObject { + property color backgroundColor: baseColor3 + } } diff --git a/src/StatusQ/Core/Theme/StatusLightTheme.qml b/src/StatusQ/Core/Theme/StatusLightTheme.qml index 3b49561a..d9e0c7ee 100644 --- a/src/StatusQ/Core/Theme/StatusLightTheme.qml +++ b/src/StatusQ/Core/Theme/StatusLightTheme.qml @@ -175,5 +175,9 @@ ThemePalette { property QtObject statusChatInput: QtObject { property color secondaryBackgroundColor: "#E2E6E8" } + + property QtObject statusSwitchTab: QtObject { + property color backgroundColor: white + } } diff --git a/src/StatusQ/Core/Theme/ThemePalette.qml b/src/StatusQ/Core/Theme/ThemePalette.qml index a26ab124..208e1eeb 100644 --- a/src/StatusQ/Core/Theme/ThemePalette.qml +++ b/src/StatusQ/Core/Theme/ThemePalette.qml @@ -139,6 +139,10 @@ QtObject { property color secondaryBackgroundColor } + property QtObject statusSwitchTab: QtObject { + property color backgroundColor + } + function alphaColor(color, alpha) { let actualColor = Qt.darker(color, 1) actualColor.a = alpha