From de81f30407a93ae4dc9cffa56eabeb350362c36b Mon Sep 17 00:00:00 2001
From: Alexander Ivash <elderorb@gmail.com>
Date: Sat, 5 May 2018 18:42:19 +0300
Subject: [PATCH] page indicators styling

---
 interface/resources/qml/hifi/AvatarApp.qml    | 46 +++++++++----------
 .../qml/hifi/avatarapp/PageIndicator.qml      | 37 +++++++++++++++
 .../qml/hifi/avatarapp/ShadowGlyph.qml        | 29 ++++++++++++
 3 files changed, 87 insertions(+), 25 deletions(-)
 create mode 100644 interface/resources/qml/hifi/avatarapp/PageIndicator.qml
 create mode 100644 interface/resources/qml/hifi/avatarapp/ShadowGlyph.qml

diff --git a/interface/resources/qml/hifi/AvatarApp.qml b/interface/resources/qml/hifi/AvatarApp.qml
index a650a3cd9f..42c4a00d15 100644
--- a/interface/resources/qml/hifi/AvatarApp.qml
+++ b/interface/resources/qml/hifi/AvatarApp.qml
@@ -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)
                 }
             }
 
diff --git a/interface/resources/qml/hifi/avatarapp/PageIndicator.qml b/interface/resources/qml/hifi/avatarapp/PageIndicator.qml
new file mode 100644
index 0000000000..91e12f4f0e
--- /dev/null
+++ b/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();
+        }
+    }
+}
diff --git a/interface/resources/qml/hifi/avatarapp/ShadowGlyph.qml b/interface/resources/qml/hifi/avatarapp/ShadowGlyph.qml
new file mode 100644
index 0000000000..c2d84bb371
--- /dev/null
+++ b/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
+    }
+}