mirror of
https://github.com/lubosz/overte.git
synced 2025-04-08 14:22:38 +02:00
page indicators styling
This commit is contained in:
parent
fe2ebe63e8
commit
de81f30407
3 changed files with 87 additions and 25 deletions
|
@ -797,36 +797,32 @@ Rectangle {
|
|||
Row {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
||||
HiFiGlyphs {
|
||||
rotation: 180
|
||||
text: "\ue01d";
|
||||
size: 50
|
||||
color: view.hasPrev ? 'black' : 'gray'
|
||||
visible: view.hasNext || view.hasPrev
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
enabled: view.hasPrev
|
||||
onClicked: {
|
||||
view.setPage(view.currentPage - 1)
|
||||
}
|
||||
Rectangle {
|
||||
width: 40
|
||||
height: 40
|
||||
color: 'transparent'
|
||||
|
||||
PageIndicator {
|
||||
x: 1
|
||||
hasNext: view.hasNext
|
||||
hasPrev: view.hasPrev
|
||||
onClicked: view.setPage(view.currentPage - 1)
|
||||
}
|
||||
}
|
||||
|
||||
spacing: 0
|
||||
|
||||
HiFiGlyphs {
|
||||
text: "\ue01d";
|
||||
size: 50
|
||||
color: view.hasNext ? 'black' : 'gray'
|
||||
visible: view.hasNext || view.hasPrev
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
enabled: view.hasNext
|
||||
onClicked: {
|
||||
view.setPage(view.currentPage + 1)
|
||||
}
|
||||
Rectangle {
|
||||
width: 40
|
||||
height: 40
|
||||
color: 'transparent'
|
||||
|
||||
PageIndicator {
|
||||
x: -1
|
||||
isPrevious: false
|
||||
hasNext: view.hasNext
|
||||
hasPrev: view.hasPrev
|
||||
onClicked: view.setPage(view.currentPage + 1)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
37
interface/resources/qml/hifi/avatarapp/PageIndicator.qml
Normal file
37
interface/resources/qml/hifi/avatarapp/PageIndicator.qml
Normal file
|
@ -0,0 +1,37 @@
|
|||
import QtQuick 2.9
|
||||
|
||||
ShadowGlyph {
|
||||
id: indicator
|
||||
property bool isPrevious: true;
|
||||
property bool hasNext: false
|
||||
property bool hasPrev: false
|
||||
property bool isEnabled: isPrevious ? hasPrev : hasNext
|
||||
signal clicked;
|
||||
|
||||
states: [
|
||||
State {
|
||||
name: "hovered"
|
||||
when: pageIndicatorMouseArea.containsMouse;
|
||||
PropertyChanges { target: indicator; y: -5 }
|
||||
PropertyChanges { target: indicator; dropShadowVerticalOffset: 9 }
|
||||
}
|
||||
]
|
||||
|
||||
text: isPrevious ? "E" : "D";
|
||||
width: 40
|
||||
height: 40
|
||||
font.pixelSize: 100
|
||||
color: isEnabled ? 'black' : 'gray'
|
||||
visible: hasNext || hasPrev
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
|
||||
MouseArea {
|
||||
id: pageIndicatorMouseArea
|
||||
anchors.fill: parent
|
||||
enabled: isEnabled
|
||||
hoverEnabled: enabled
|
||||
onClicked: {
|
||||
parent.clicked();
|
||||
}
|
||||
}
|
||||
}
|
29
interface/resources/qml/hifi/avatarapp/ShadowGlyph.qml
Normal file
29
interface/resources/qml/hifi/avatarapp/ShadowGlyph.qml
Normal file
|
@ -0,0 +1,29 @@
|
|||
import "../../styles-uit"
|
||||
import QtQuick 2.9
|
||||
import QtGraphicalEffects 1.0
|
||||
|
||||
Item {
|
||||
property alias text: glyph.text
|
||||
property alias font: glyph.font
|
||||
property alias color: glyph.color
|
||||
property alias horizontalAlignment: glyph.horizontalAlignment
|
||||
property alias dropShadowRadius: shadow.radius
|
||||
property alias dropShadowHorizontalOffset: shadow.horizontalOffset
|
||||
property alias dropShadowVerticalOffset: shadow.verticalOffset
|
||||
|
||||
HiFiGlyphs {
|
||||
id: glyph
|
||||
width: parent.width
|
||||
height: parent.height
|
||||
}
|
||||
|
||||
DropShadow {
|
||||
id: shadow
|
||||
anchors.fill: glyph
|
||||
radius: 4
|
||||
horizontalOffset: 0
|
||||
verticalOffset: 4
|
||||
color: Qt.rgba(0, 0, 0, 0.25)
|
||||
source: glyph
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue