page indicators styling

This commit is contained in:
Alexander Ivash 2018-05-05 18:42:19 +03:00
parent fe2ebe63e8
commit de81f30407
3 changed files with 87 additions and 25 deletions

View file

@ -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)
}
}

View 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();
}
}
}

View 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
}
}