White theme

1 files changed, 136 insertions, 78 deletions

diff --git a/components/DatePicker.qml b/components/DatePicker.qml
index f32ce8bc..b08d786e 100644
--- a/components/DatePicker.qml
+++ b/components/DatePicker.qml
@@ -26,18 +26,22 @@
 // STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF
 // THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
-import QtQuick 2.2
+import QtQuick 2.9
 import QtQuick.Controls 1.2
+import QtQuick.Layouts 1.2
+import QtGraphicalEffects 1.0
 import QtQuick.Controls.Styles 1.2
 
-import "../components" as MoneroComponents
+import "." as MoneroComponents
+import "effects/" as MoneroEffects
 
 Item {
     id: datePicker
+    z: parent.z + 1
     property bool expanded: false
     property date currentDate
     property bool showCurrentDate: true
-    property color backgroundColor : "#404040"
+    property color backgroundColor : MoneroComponents.Style.appWindowBorderColor
     property color errorColor : "red"
     property bool error: false
     property alias inputLabel: inputLabel
@@ -67,7 +71,7 @@ Item {
         height: 22
         width: parent.width
 
-        Text {
+        MoneroComponents.TextPlain {
             id: inputLabel
             anchors.top: parent.top
             anchors.topMargin: 2
@@ -77,6 +81,7 @@ Item {
             font.bold: false
             textFormat: Text.RichText
             color: MoneroComponents.Style.defaultFontColor
+            themeTransition: false
 
             MouseArea {
                 anchors.fill: parent
@@ -106,45 +111,14 @@ Item {
             color: datePicker.backgroundColor
         }
 
-        Item {
-            id: buttonItem
-            anchors.right: parent.right
-            anchors.top: parent.top
-            anchors.bottom: parent.bottom
-            anchors.margins: 4
-            width: height
-
-            Image {
-                id: button
-                anchors.centerIn: parent
-                source: "../images/whiteDropIndicator.png"
-                rotation: datePicker.expanded ? 180 : 0
-            }
-
-            MouseArea {
-                anchors.fill: parent
-                onClicked: datePicker.expanded = !datePicker.expanded
-                hoverEnabled: true
-                cursorShape: Qt.PointingHandCursor
-            }
-        }
-
-        Rectangle {
-            id: separator
-            anchors.verticalCenter: parent.verticalCenter
-            anchors.right: buttonItem.left
-            anchors.rightMargin: 4
-            height: 16
-            width: 1
-            color: "#808080"
-            visible: datePicker.expanded
-        }
-
-        Row {
+        RowLayout {
             id: dateInput
             anchors.verticalCenter: parent.verticalCenter
             anchors.left: parent.left
-            anchors.leftMargin: 10
+            anchors.leftMargin: 2
+            anchors.right: parent.right
+            property string headerFontColor: MoneroComponents.Style.blackTheme ? "#e6e6e6" : "#333333"
+            spacing: 0
 
             function setDate(date) {
                 var day = date.getDate()
@@ -164,12 +138,14 @@ Item {
             TextInput {
                 id: dayInput
                 readOnly: true
-                width: 22
+                Layout.preferredWidth: childrenRect.width + 40
                 font.family: MoneroComponents.Style.fontRegular.name
                 font.pixelSize: 14
-                color: datePicker.error ? errorColor : MoneroComponents.Style.defaultFontColor
-                maximumLength: 2
+                color: datePicker.error ? errorColor : parent.headerFontColor
+                selectionColor: MoneroComponents.Style.dimmedFontColor
+                selectByMouse: true
                 horizontalAlignment: TextInput.AlignHCenter
+                maximumLength: 2
                 validator: IntValidator{bottom: 01; top: 31;}
                 KeyNavigation.tab: monthInput
 
@@ -187,22 +163,25 @@ Item {
                 }
             }
 
-            Text {
+            MoneroComponents.TextPlain {
                 font.family: MoneroComponents.Style.fontRegular.name
                 font.pixelSize: 14
                 color: datePicker.error ? errorColor : MoneroComponents.Style.defaultFontColor
                 text: "-"
+                themeTransition: false
             }
 
             TextInput {
                 id: monthInput
                 readOnly: true
-                width: 22
+                Layout.preferredWidth: childrenRect.width + 40
                 font.family: MoneroComponents.Style.fontRegular.name
                 font.pixelSize: 14
-                color: datePicker.error ? errorColor : MoneroComponents.Style.defaultFontColor
-                maximumLength: 2
+                color: datePicker.error ? errorColor : parent.headerFontColor
+                selectionColor: MoneroComponents.Style.dimmedFontColor
+                selectByMouse: true
                 horizontalAlignment: TextInput.AlignHCenter
+                maximumLength: 2
                 validator: IntValidator{bottom: 01; top: 12;}
                 KeyNavigation.tab: yearInput
                 text: {
@@ -219,23 +198,27 @@ Item {
                 }
             }
 
-            Text {
+            MoneroComponents.TextPlain {
                 font.family: MoneroComponents.Style.fontRegular.name
                 font.pixelSize: 14
                 color: datePicker.error ? errorColor : MoneroComponents.Style.defaultFontColor
                 text: "-"
+                themeTransition: false
             }
 
             TextInput {
                 id: yearInput
-                width: 44
+                Layout.preferredWidth: childrenRect.width + 60
                 font.family: MoneroComponents.Style.fontRegular.name
                 font.pixelSize: 14
-                color: datePicker.error ? errorColor : MoneroComponents.Style.defaultFontColor
-                maximumLength: 4
+                color: datePicker.error ? errorColor : parent.headerFontColor
+                selectionColor: MoneroComponents.Style.dimmedFontColor
+                selectByMouse: true
                 horizontalAlignment: TextInput.AlignHCenter
+                maximumLength: 4
                 validator: IntValidator{bottom: 1000; top: 9999;}
                 text: if(datePicker.showCurrentDate) datePicker.currentDate.getFullYear()
+
                 onFocusChanged: {
                     if(focus === false) {
                         var d = new Date()
@@ -245,6 +228,36 @@ Item {
                     }
                 }
             }
+
+            Rectangle {
+                Layout.preferredHeight: parent.height
+                Layout.fillWidth: true
+                color: "transparent"
+
+                Image {
+                    id: button
+                    anchors.right: parent.right
+                    anchors.rightMargin: 10 * scaleRatio
+                    anchors.verticalCenter: parent.verticalCenter
+                    source: "qrc:///images/whiteDropIndicator.png"
+                    visible: false
+                }
+
+                ColorOverlay {
+                    source: button
+                    anchors.fill: button
+                    color: MoneroComponents.Style.defaultFontColor
+                    rotation: datePicker.expanded ? 180 : 0
+                    opacity: 1
+                }
+
+                MouseArea {
+                    anchors.fill: parent
+                    onClicked: datePicker.expanded = !datePicker.expanded
+                    hoverEnabled: true
+                    cursorShape: Qt.PointingHandCursor
+                }
+            }
         }
     }
 
@@ -253,12 +266,12 @@ Item {
         anchors.left: parent.left
         anchors.right: parent.right
         anchors.top: head.bottom
-        color: "#FFFFFF"
+        anchors.topMargin: 10 * scaleRatio
+        color: MoneroComponents.Style.middlePanelBackgroundColor
         border.width: 1
-        border.color: "#DBDBDB"
+        border.color: MoneroComponents.Style.appWindowBorderColor
         height: datePicker.expanded ? calendar.height + 2 : 0
         clip: true
-        //radius: 4
 
         Behavior on height {
             NumberAnimation { duration: 100; easing.type: Easing.InQuad }
@@ -270,7 +283,7 @@ Item {
             anchors.leftMargin: 1
             anchors.rightMargin: 1
             anchors.top: parent.top
-            color: "#FFFFFF"
+            color: MoneroComponents.Style.appWindowBorderColor
             height: 1
         }
 
@@ -280,40 +293,58 @@ Item {
             anchors.right: parent.right
             anchors.top: parent.top
             anchors.margins: 1
-            height: 180
+            anchors.bottomMargin: 10 * scaleRatio
+            height: 220
             frameVisible: false
 
             style: CalendarStyle {
                 gridVisible: false
-                background: Rectangle { color: "transparent" }
+                background: Rectangle { color: MoneroComponents.Style.middlePanelBackgroundColor }
                 dayDelegate: Item {
                     z: parent.z + 1
                     implicitHeight: implicitWidth
                     implicitWidth: calendar.width / 7
 
                     Rectangle {
+                        id: dayRect
                         anchors.fill: parent
                         radius: parent.implicitHeight / 2
-                        color: dayArea.pressed && styleData.visibleMonth ? "#FF6C3B" : "transparent"
+                        color: {
+                            if(dayArea.pressed && styleData.visibleMonth)
+                                return MoneroComponents.Style.blackTheme ? "#20FFFFFF" : "#10000000"
+                            return "transparent";
+                        }
                     }
 
-                    Text {
+                    MoneroComponents.TextPlain {
+                        id: dayText
                         anchors.centerIn: parent
-                        font.family: "Arial"
-                        font.pixelSize: 12
-                        font.bold: dayArea.pressed
+                        font.family: MoneroComponents.Style.fontMonoRegular.name
+                        font.pixelSize: {
+                            if(!styleData.visibleMonth) return 12
+                            return 14
+                        }
+                        font.bold: {
+                            if(dayArea.pressed || styleData.visibleMonth) return true;
+                            return false;
+                        }
                         text: styleData.date.getDate()
+                        themeTransition: false
                         color: {
-                            if(!styleData.visibleMonth) return "#DBDBDB"
-                            if(dayArea.pressed) return "#FFFFFF"
-                            if(styleData.today) return "#FF6C3B"
-                            return "#4A4848"
+                            if(!styleData.visibleMonth) return MoneroComponents.Style.lightGreyFontColor
+                            if(dayArea.pressed) return MoneroComponents.Style.defaultFontColor
+                            if(styleData.today) return MoneroComponents.Style.orange
+                            return MoneroComponents.Style.defaultFontColor
                         }
                     }
 
                     MouseArea {
                         id: dayArea
                         anchors.fill: parent
+                        hoverEnabled: true
+                        onEntered: dayRect.color = MoneroComponents.Style.blackTheme ? "#20FFFFFF" : "#10000000"
+                        onExited: dayRect.color = "transparent"
+                        cursorShape: Qt.PointingHandCursor
                         onClicked: {
                             if(styleData.visibleMonth) {
                                 currentDate = styleData.date
@@ -325,7 +356,7 @@ Item {
                                 else calendar.showPreviousMonth()
                             }
 
-                            dateChanged();
+                            datePicker.dateChanged();
                         }
                     }
                 }
@@ -334,12 +365,13 @@ Item {
                     implicitHeight: 20
                     implicitWidth: calendar.width / 7
 
-                    Text {
+                    MoneroComponents.TextPlain {
                         anchors.centerIn: parent
                         elide: Text.ElideRight
-                        font.family: "Arial"
-                        font.pixelSize: 9
-                        color: "#535353"
+                        font.family: MoneroComponents.Style.fontMonoRegular.name
+                        font.pixelSize: 12
+                        color: MoneroComponents.Style.lightGreyFontColor
+                        themeTransition: false
                         text: {
                             var locale = Qt.locale()
                             return locale.dayName(styleData.dayOfWeek, Locale.ShortFormat)
@@ -348,29 +380,44 @@ Item {
                 }
 
                 navigationBar: Rectangle {
+                    color: MoneroComponents.Style.middlePanelBackgroundColor
                     implicitWidth: calendar.width
                     implicitHeight: 30
 
-                    Text {
+                    MoneroComponents.TextPlain {
                         anchors.centerIn: parent
-                        font.family: "Arial"
-                        font.pixelSize: 12
-                        color: "#4A4646"
+                        font.family: MoneroComponents.Style.fontMonoRegular.name
+                        font.pixelSize: 14
+                        color: MoneroComponents.Style.dimmedFontColor
+                        themeTransition: false
                         text: styleData.title
                     }
 
+
                     Item {
                         anchors.left: parent.left
+                        anchors.leftMargin: 4 * scaleRatio
                         anchors.top: parent.top
                         anchors.bottom: parent.bottom
                         width: height
 
                         Image {
+                            id: prevMonthIcon
                             anchors.centerIn: parent
-                            source: "../images/prevMonth.png"
+                            source: "qrc:///images/prevMonth.png"
+                            visible: false
+                        }
+
+                        ColorOverlay {
+                            source: prevMonthIcon
+                            anchors.fill: prevMonthIcon
+                            color: MoneroComponents.Style.defaultFontColor
+                            opacity: 0.5
                         }
 
                         MouseArea {
+                            hoverEnabled: true
+                            cursorShape: Qt.PointingHandCursor
                             anchors.fill: parent
                             onClicked: calendar.showPreviousMonth()
                         }
@@ -378,18 +425,29 @@ Item {
 
                     Item {
                         anchors.right: parent.right
+                        anchors.rightMargin: 4 * scaleRatio
                         anchors.top: parent.top
                         anchors.bottom: parent.bottom
                         width: height
 
                         Image {
+                            id: nextMonthIcon
                             anchors.centerIn: parent
-                            source: "../images/prevMonth.png"
-                            transformOrigin: Item.Center
+                            source: "qrc:///images/prevMonth.png"
+                            visible: false
+                        }
+
+                        ColorOverlay {
+                            source: nextMonthIcon
+                            anchors.fill: nextMonthIcon
+                            color: MoneroComponents.Style.defaultFontColor
+                            opacity: 0.5
                             rotation: 180
                         }
 
                         MouseArea {
+                            hoverEnabled: true
+                            cursorShape: Qt.PointingHandCursor
                             anchors.fill: parent
                             onClicked: calendar.showNextMonth()
                         }