1
0
mirror of https://gitlab.com/kelteseth/ScreenPlay.git synced 2024-11-07 03:22:33 +01:00

Refactor NavigationWallpaperConfiguration to look more like a button

This commit is contained in:
Elias Steurer 2021-09-02 13:17:15 +02:00
parent 66a6a30c04
commit c030b06b88
2 changed files with 98 additions and 64 deletions

View File

@ -1 +1,10 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 22 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><path id="display" d="M0,0l0,13.701l21.922,0l0,-13.701l-21.922,0Zm20.552,12.331l-19.182,0l0,-10.961l19.182,0l0,10.961Zm-6.166,2.74l-6.85,0l-0.685,2.741l-1.371,1.37l10.961,0l-1.37,-1.37l-0.685,-2.741Z" style="fill:#626262;fill-rule:nonzero;"/></svg>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 28 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g id="Artboard1" transform="matrix(1.27726,0,0,1.25117,0,0)">
<rect x="0" y="0" width="21.922" height="19.182" style="fill:none;"/>
<g id="display" transform="matrix(0.914274,0,0,1,0,0)">
<path d="M0,0L0,15.099L23.977,15.099L23.977,0L0,0ZM22.607,13.729L1.37,13.729L1.37,1.37L22.607,1.37L22.607,13.729ZM14.103,15.005L9.875,15.005L9.453,17.812L8.607,19.182L15.371,19.182L14.525,17.812L14.103,15.005Z" style="fill:rgb(98,98,98);fill-rule:nonzero;"/>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 658 B

After

Width:  |  Height:  |  Size: 952 B

View File

@ -6,96 +6,121 @@ import ScreenPlay 1.0
import "../Common"
Item {
id: navigationWallpaperConfiguration
id: root
width: 450
states: []
transitions: []
width: 390
property bool active: ScreenPlay.screenPlayManager.activeWallpaperCounter > 0
anchors {
top: parent.top
right: parent.right
rightMargin: 20
bottom: parent.bottom
}
RippleEffect {
id: rippleEffect
target: navigationWallpaperConfiguration
}
Connections {
function onActiveWallpaperCounterChanged() {
rippleEffect.trigger();
rippleEffect.trigger()
}
target: ScreenPlay.screenPlayManager
}
Image {
id: image
Pane {
anchors.centerIn: parent
contentWidth: activeMonitorName.contentWidth + image.width + 80
contentHeight: parent.height - 10
background: Item {
Rectangle {
id: bg
clip: true
anchors {
fill: parent
margins: 16
}
color: "transparent"
border.color: root.active ? Material.accentColor : Material.iconDisabledColor
border.width: 1
radius: 3
}
width: 24
height: 24
source: "qrc:/assets/icons/icon_monitor.svg"
RippleEffect {
id: rippleEffect
anchors {
rightMargin: 30
right: parent.right
verticalCenter: parent.verticalCenter
}
Text {
id: txtAmountActiveWallpapers
text: ScreenPlay.screenPlayManager.activeWallpaperCounter + ScreenPlay.screenPlayManager.activeWidgetsCounter
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
color: Material.accent
font.pointSize: 10
font.bold: true
font.family: ScreenPlay.settings.font
anchors {
horizontalCenter: parent.horizontalCenter
top: parent.top
topMargin: 1
target: bg
}
}
}
Text {
id: activeMonitorName
horizontalAlignment: Text.AlignRight
color: Material.foreground
font.pointSize: 12
font.family: ScreenPlay.settings.font
text: {
if (ScreenPlay.screenPlayManager.activeWallpaperCounter > 0)
return qsTr("Configurate active Wallpaper or Widgets");
else
return qsTr("No active Wallpaper or Widgets");
Behavior on contentWidth {
PropertyAnimation {
duration: 250
easing.type: Easing.InOutQuart
}
}
anchors {
right: image.right
rightMargin: 30
verticalCenter: parent.verticalCenter
Text {
id: activeMonitorName
horizontalAlignment: Text.AlignRight
color: root.active ? Material.primaryTextColor : Material.iconDisabledColor
font.pointSize: 12
font.family: ScreenPlay.settings.font
text: root.active ? qsTr("Configurate active Wallpaper or Widgets") : qsTr(
"No active Wallpaper or Widgets")
anchors {
right: image.right
rightMargin: 50
verticalCenter: parent.verticalCenter
}
}
}
Image {
id: image
MouseArea {
id: ma
width: 28
height: 24
source: "qrc:/assets/icons/icon_monitor.svg"
layer {
effect: ColorOverlay {
color:root.active ? Material.color(Material.Orange) : Material.iconDisabledColor
}
}
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
ScreenPlay.util.setToggleWallpaperConfiguration();
anchors {
rightMargin: 30
right: parent.right
verticalCenter: parent.verticalCenter
}
Text {
id: txtAmountActiveWallpapers
text: ScreenPlay.screenPlayManager.activeWallpaperCounter
+ ScreenPlay.screenPlayManager.activeWidgetsCounter
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
color:root.active ? Material.color(Material.Orange) : Material.iconDisabledColor
font.pointSize: 10
font.bold: true
font.family: ScreenPlay.settings.font
anchors {
horizontalCenter: parent.horizontalCenter
bottom: parent.bottom
bottomMargin: 7
}
}
}
MouseArea {
id: ma
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
ScreenPlay.util.setToggleWallpaperConfiguration()
}
}
}
}