page indicators styling

interface/resources/qml/hifi/AvatarApp.qml

@@ -797,36 +797,32 @@ Rectangle {
         Row {
             anchors.horizontalCenter: parent.horizontalCenter
 
-            HiFiGlyphs {
+            Rectangle {
-                rotation: 180
+                width: 40
-                text: "\ue01d";
+                height: 40
-                size: 50
+                color: 'transparent'
-                color: view.hasPrev ? 'black' : 'gray'
+
-                visible: view.hasNext || view.hasPrev
+                PageIndicator {
-                horizontalAlignment: Text.AlignHCenter
+                    x: 1
-                MouseArea {
+                    hasNext: view.hasNext
-                    anchors.fill: parent
+                    hasPrev: view.hasPrev
-                    enabled: view.hasPrev
+                    onClicked: view.setPage(view.currentPage - 1)
-                    onClicked: {
-                        view.setPage(view.currentPage - 1)
-                    }
                 }
             }
 
             spacing: 0
 
-            HiFiGlyphs {
+            Rectangle {
-                text: "\ue01d";
+                width: 40
-                size: 50
+                height: 40
-                color: view.hasNext ? 'black' : 'gray'
+                color: 'transparent'
-                visible: view.hasNext || view.hasPrev
+
-                horizontalAlignment: Text.AlignHCenter
+                PageIndicator {
-                MouseArea {
+                    x: -1
-                    anchors.fill: parent
+                    isPrevious: false
-                    enabled: view.hasNext
+                    hasNext: view.hasNext
-                    onClicked: {
+                    hasPrev: view.hasPrev
-                        view.setPage(view.currentPage + 1)
+                    onClicked: view.setPage(view.currentPage + 1)
-                    }
                 }
             }
 

interface/resources/qml/hifi/avatarapp/PageIndicator.qml

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

interface/resources/qml/hifi/avatarapp/ShadowGlyph.qml

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