Skip to content

Commit

Permalink
Update QML components
Browse files Browse the repository at this point in the history
  • Loading branch information
emericg committed Jan 17, 2024
1 parent b631dbd commit 5276d59
Show file tree
Hide file tree
Showing 7 changed files with 199 additions and 55 deletions.
12 changes: 6 additions & 6 deletions qml/DesktopSidebar.qml
Original file line number Diff line number Diff line change
Expand Up @@ -41,31 +41,31 @@ Rectangle {
sourceSize: 40
highlightMode: "indicator"

selected: (appContent.state === "DesktopComponents")
highlighted: (appContent.state === "DesktopComponents")
onClicked: screenDesktopComponents.loadScreen()
}
DesktopSidebarItem {
source: "qrc:/assets/icons_material/duotone-touch_app-24px.svg"
sourceSize: 40
highlightMode: "indicator"

selected: (appContent.state === "MobileComponents")
highlighted: (appContent.state === "MobileComponents")
onClicked: screenMobileComponents.loadScreen()
}
DesktopSidebarItem {
source: "qrc:/assets/icons_material/duotone-memory-24px.svg"
sourceSize: 40
highlightMode: "indicator"

selected: (appContent.state === "HostInfos")
highlighted: (appContent.state === "HostInfos")
onClicked: screenHostInfos.loadScreen()
}
DesktopSidebarItem {
source: "qrc:/assets/icons_material/duotone-format_size-24px.svg"
sourceSize: 40
highlightMode: "indicator"

selected: (appContent.state === "FontInfos")
highlighted: (appContent.state === "FontInfos")
onClicked: screenFontInfos.loadScreen()
}
}
Expand All @@ -83,7 +83,7 @@ Rectangle {
sourceSize: 40
highlightMode: "indicator"

selected: (appContent.state === "Settings")
highlighted: (appContent.state === "Settings")
onClicked: screenSettings.loadScreen()
}

Expand All @@ -92,7 +92,7 @@ Rectangle {
sourceSize: 40
highlightMode: "indicator"

selected: (appContent.state === "About")
highlighted: (appContent.state === "About")
onClicked: screenAbout.loadScreen()
}

Expand Down
72 changes: 30 additions & 42 deletions qml/components_generic/DesktopSidebarItem.qml
Original file line number Diff line number Diff line change
@@ -1,55 +1,42 @@
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Layouts 2.15
import QtQuick.Controls.impl 2.15
import QtQuick.Templates 2.15 as T

import ThemeEngine 1.0
import "qrc:/js/UtilsNumber.js" as UtilsNumber

Item {
T.Button {
id: control

implicitWidth: 64
implicitHeight: 64

focusPolicy: Qt.NoFocus

width: parent.width // width drive the size of this element
height: Math.max(parent.width, content.height + 24)

// actions
signal clicked()
signal pressed()
signal pressAndHold()

// states
property bool selected: false

// settings
property url source
property int sourceSize: 40
property string text

property string highlightMode: "background" // available: background, indicator, circle, content

// colors
property string colorContent: Theme.colorSidebarContent
property string colorHighlight: Theme.colorSidebarHighlight

// indicator
property url indicatorSource: "qrc:/assets/icons_material/baseline-autorenew-24px.svg"
property bool indicatorVisible: false
property bool indicatorAnimated: false
property color indicatorColor: "white"
property url indicatorSource: ""

////////////////////////////////////////////////////////////////////////////

MouseArea {
id: mouseArea
anchors.fill: parent
hoverEnabled: true

onClicked: control.clicked()
onPressed: control.pressed()
onPressAndHold: control.pressAndHold()
}

////////////////////////////////////////////////////////////////////////////

Rectangle {
id: background
anchors.centerIn: parent
background: Rectangle {
implicitWidth: 64
implicitHeight: 64

width: (control.highlightMode === "circle") ? height : parent.width
height: parent.height
Expand All @@ -60,21 +47,22 @@ Item {
control.highlightMode === "circle")
color: control.colorHighlight
opacity: {
if (control.selected) return 1
if (mouseArea.containsMouse) return 0.5
if (control.highlighted) return 1
if (control.hovered) return 0.5
return 0
}
Behavior on opacity { OpacityAnimator { duration: 233 } }
}
Rectangle {
id: backgroundIndicator
anchors.top: parent.top
anchors.left: parent.left
anchors.bottom: parent.bottom

width: 6
visible: (control.selected && control.highlightMode === "indicator")
color: Theme.colorPrimary
Rectangle {
id: backgroundIndicator
anchors.top: parent.top
anchors.left: parent.left
anchors.bottom: parent.bottom

width: 6
visible: (control.highlighted && control.highlightMode === "indicator")
color: Theme.colorPrimary
}
}

////////////////////////////////////////////////////////////////////////////
Expand All @@ -100,7 +88,7 @@ Item {
visible: source.toString().length

source: control.source
color: (!control.selected && control.highlightMode === "content") ? control.colorHighlight : control.colorContent
color: (!control.highlighted && control.highlightMode === "content") ? control.colorHighlight : control.colorContent
opacity: control.enabled ? 1.0 : 0.33

Item {
Expand All @@ -110,7 +98,7 @@ Item {
anchors.rightMargin: -4
anchors.bottom: parent.bottom

opacity: control.indicatorAnimated ? 1 : 0
opacity: (control.indicatorVisible || control.indicatorAnimated) ? 1 : 0
Behavior on opacity { OpacityAnimator { duration: 500 } }

Rectangle {
Expand Down Expand Up @@ -144,7 +132,7 @@ Item {
visible: control.text
text: control.text
textFormat: Text.PlainText
color: (!control.selected && control.highlightMode === "content") ? control.colorHighlight : control.colorContent
color: (!control.highlighted && control.highlightMode === "content") ? control.colorHighlight : control.colorContent
font.pixelSize: Theme.fontSizeContentVerySmall
font.bold: true

Expand Down
71 changes: 71 additions & 0 deletions qml/components_generic/SelectorGrid.qml
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
import QtQuick 2.15

import ThemeEngine 1.0

Item {
id: selectorGrid

implicitWidth: 512
implicitHeight: 40

width: parent.width
height: (selectorGrid.btnRows * btnHeight) + (selectorGrid.btnRows * contentPositioner.spacing)

opacity: enabled ? 1 : 0.4

property int btnCols: 4
property int btnRows: 3
property int btnWidth: width / selectorGrid.btnCols
property int btnHeight: 40

signal menuSelected(var index)
property int currentSelection: 0

property var model: null

////////////////

Rectangle { // background
anchors.fill: parent
radius: Theme.componentRadius
color: Theme.colorComponentBackground
}

////////////////

Grid {
id: contentPositioner
anchors.fill: parent
anchors.margins: 0
spacing: 1

columns: selectorGrid.btnCols
rows: selectorGrid.btnRows

Repeater {
model: selectorGrid.model
delegate: SelectorGridItem {
width: selectorGrid.btnWidth
height: selectorGrid.btnHeight

highlighted: (selectorGrid.currentSelection === idx)
index: idx ?? 0
text: txt ?? ""
onClicked: selectorGrid.menuSelected(idx)
}
}
}

////////////////

Rectangle { // foreground border
anchors.fill: parent
radius: Theme.componentRadius

color: "transparent"
border.width: Theme.componentBorderWidth
border.color: Theme.colorComponentBorder
}

////////////////
}
82 changes: 82 additions & 0 deletions qml/components_generic/SelectorGridItem.qml
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
import QtQuick 2.15
import QtQuick.Controls.impl 2.15
import QtQuick.Templates 2.15 as T

import ThemeEngine 1.0

T.Button {
id: control

implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
implicitContentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
implicitContentHeight + topPadding + bottomPadding)

leftPadding: 16
rightPadding: 16

focusPolicy: Qt.NoFocus

// settings
property int index
property url source
property int sourceSize: 32

// colors
property string colorContent: Theme.colorComponentText
property string colorContentHighlight: Theme.colorComponentContent
property string colorBackgroundHighlight: Theme.colorComponentDown

////////////////

background: Rectangle {
implicitWidth: 32
implicitHeight: 32
radius: Theme.componentRadius

color: control.colorBackgroundHighlight
opacity: {
if (control.hovered && control.highlighted) return 0.9
else if (control.highlighted) return 0.7
else if (control.hovered) return 0.5
return 0
}
Behavior on opacity { OpacityAnimator { duration: 133 } }
}

////////////////

contentItem: Item {
Row {
anchors.centerIn: parent
spacing: 4

IconSvg { // contentImage
anchors.verticalCenter: parent.verticalCenter
visible: control.source.toString().length

width: control.sourceSize
height: control.sourceSize

source: control.source
color: control.highlighted ? control.colorContentHighlight : control.colorContent
opacity: control.highlighted ? 1 : 0.5
}

Text { // contentText
anchors.verticalCenter: parent.verticalCenter
visible: control.text

text: control.text
textFormat: Text.PlainText
font: control.font
verticalAlignment: Text.AlignVCenter

color: control.highlighted ? control.colorContentHighlight : control.colorContent
opacity: control.highlighted ? 1 : 0.66
}
}
}

////////////////
}
2 changes: 1 addition & 1 deletion qml/components_themed/DrawerThemed.qml
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ T.Drawer {
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
contentHeight + topPadding + bottomPadding)

width: (appWindow.screenOrientation === Qt.PortraitOrientation || appWindow.width < 480)
width: (appWindow.singleColumn || appWindow.screenOrientation === Qt.PortraitOrientation || appWindow.width < 480)
? 0.8 * appWindow.width : 0.5 * appWindow.width
height: appWindow.height

Expand Down
13 changes: 8 additions & 5 deletions qml/components_themed/SwitchThemed_desktop.qml
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,17 @@ T.Switch {

font.pixelSize: Theme.componentFontSize

property color colorText: Theme.colorText
property color colorSubText: Theme.colorSubText

////////////////

indicator: Rectangle {
implicitWidth: 48
implicitHeight: Theme.componentHeight

x: control.leftPadding
y: (parent.height / 2) - (height / 2)
x: control.text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
y: control.topPadding + (control.availableHeight - height) / 2
width: 48
height: (width / 2)
radius: (width / 2)
Expand Down Expand Up @@ -57,15 +60,15 @@ T.Switch {
}

contentItem: Text {
leftPadding: control.indicator && !control.mirrored ? control.indicator.width + control.spacing : 0
rightPadding: control.indicator && control.mirrored ? control.indicator.width + control.spacing : 0
leftPadding: !control.mirrored ? control.indicator.width + control.spacing : 0
rightPadding: control.mirrored ? control.indicator.width + control.spacing : 0

opacity: enabled ? 1.0 : 0.33

text: control.text
textFormat: Text.PlainText
font: control.font
color: control.checked ? Theme.colorText : Theme.colorSubText
color: control.checked ? control.colorText : control.colorSubText
elide: Text.ElideRight
verticalAlignment: Text.AlignVCenter
}
Expand Down
2 changes: 1 addition & 1 deletion src/main.cpp
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
#include <utils_screen.h>
#include <utils_sysinfo.h>
#include <utils_language.h>
#include <utils_os_macosdock.h>
#include <utils_os_macos_dock.h>

#include <MobileUI/MobileUI.h>
#include <MobileSharing/MobileSharing.h>
Expand Down

0 comments on commit 5276d59

Please sign in to comment.