shortcuts fix + ctrl+tab/ctrl+shift+tab functionality + heperlinks fix

1 files changed, 333 insertions, 0 deletions

diff --git a/components/DatePicker.qml b/components/DatePicker.qml
new file mode 100644
index 00000000..7a974ea8
--- /dev/null
+++ b/components/DatePicker.qml
@@ -0,0 +1,333 @@
+import QtQuick 2.2
+import QtQuick.Controls 1.2
+import QtQuick.Controls.Styles 1.2
+
+Item {
+    id: datePicker
+    property bool expanded: false
+    property var currentDate: new Date()
+    property bool showCurrentDate: true
+    height: 37
+    width: 156
+
+    onExpandedChanged: if(expanded) appWindow.currentItem = datePicker
+    function hide() { datePicker.expanded = false }
+    function containsPoint(px, py) {
+        if(px < 0)
+            return false
+        if(px > width)
+            return false
+        if(py < 0)
+            return false
+        if(py > height + calendarRect.height)
+            return false
+        return true
+    }
+
+    Item {
+        id: head
+        anchors.fill: parent
+
+        Rectangle {
+            anchors.left: parent.left
+            anchors.right: parent.right
+            height: parent.height - 1
+            radius: 4
+            y: 0
+            color: "#DBDBDB"
+        }
+
+        Rectangle {
+            anchors.left: parent.left
+            anchors.right: parent.right
+            height: parent.height - 1
+            radius: 4
+            y: 1
+            color: "#FFFFFF"
+
+            Item {
+                id: buttonItem
+                anchors.right: parent.right
+                anchors.top: parent.top
+                anchors.bottom: parent.bottom
+                anchors.margins: 4
+                width: height
+
+                StandardButton {
+                    id: button
+                    anchors.fill: parent
+                    shadowReleasedColor: "#DBDBDB"
+                    shadowPressedColor: "#888888"
+                    releasedColor: "#F0EEEE"
+                    pressedColor: "#DBDBDB"
+                    icon: "../images/datePicker.png"
+                    visible: !datePicker.expanded
+                    onClicked: datePicker.expanded = true
+                }
+
+                Image {
+                    anchors.centerIn: parent
+                    source: "../images/datePicker.png"
+                    visible: datePicker.expanded
+                }
+
+                MouseArea {
+                    anchors.fill: parent
+                    enabled: datePicker.expanded
+                    onClicked: datePicker.expanded = false
+                }
+            }
+
+            Rectangle {
+                id: separator
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.right: buttonItem.left
+                anchors.rightMargin: 4
+                height: 16
+                width: 1
+                color: "#DBDBDB"
+                visible: datePicker.expanded
+            }
+
+            Row {
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.left: parent.left
+                anchors.leftMargin: 10
+
+                TextInput {
+                    id: dayInput
+                    width: 22
+                    font.family: "Arial"
+                    font.pixelSize: 18
+                    color: "#525252"
+                    maximumLength: 2
+                    horizontalAlignment: TextInput.AlignHCenter
+                    validator: IntValidator{bottom: 01; top: 31;}
+                    KeyNavigation.tab: monthInput
+                    text: {
+                        if(datePicker.showCurrentDate) {
+                            var day = datePicker.currentDate.getDate()
+                            return day < 10 ? "0" + day : day
+                        }
+                    }
+                }
+
+                Text {
+                    font.family: "Arial"
+                    font.pixelSize: 18
+                    color: "#525252"
+                    text: "."
+                }
+
+                TextInput {
+                    id: monthInput
+                    width: 22
+                    font.family: "Arial"
+                    font.pixelSize: 18
+                    color: "#525252"
+                    maximumLength: 2
+                    horizontalAlignment: TextInput.AlignHCenter
+                    validator: IntValidator{bottom: 01; top: 12;}
+                    KeyNavigation.tab: yearInput
+                    text: {
+                        if(datePicker.showCurrentDate) {
+                            var month = datePicker.currentDate.getMonth() + 1
+                            return month < 10 ? "0" + month : month
+                        }
+                    }
+                }
+
+                Text {
+                    font.family: "Arial"
+                    font.pixelSize: 18
+                    color: "#525252"
+                    text: "."
+                }
+
+                TextInput {
+                    id: yearInput
+                    width: 44
+                    font.family: "Arial"
+                    font.pixelSize: 18
+                    color: "#525252"
+                    maximumLength: 4
+                    horizontalAlignment: TextInput.AlignHCenter
+                    validator: IntValidator{bottom: 2000; top: 2100;}
+                    text: if(datePicker.showCurrentDate) datePicker.currentDate.getFullYear()
+                }
+
+            }
+        }
+
+        Rectangle {
+            anchors.left: parent.left
+            anchors.bottom: parent.bottom
+            height: 3; width: 3
+            color: "#FFFFFF"
+            visible: datePicker.expanded
+        }
+
+        Rectangle {
+            anchors.right: parent.right
+            anchors.bottom: parent.bottom
+            height: 3; width: 3
+            color: "#FFFFFF"
+            visible: datePicker.expanded
+        }
+    }
+
+    Rectangle {
+        id: calendarRect
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: head.bottom
+        color: "#FFFFFF"
+        height: datePicker.expanded ? calendar.height : 0
+        clip: true
+        radius: 4
+
+        Behavior on height {
+            NumberAnimation { duration: 100; easing.type: Easing.InQuad }
+        }
+
+        Rectangle {
+            anchors.left: parent.left
+            anchors.top: parent.top
+            height: 3; width: 3
+            color: "#FFFFFF"
+        }
+
+        Rectangle {
+            anchors.right: parent.right
+            anchors.top: parent.top
+            height: 3; width: 3
+            color: "#FFFFFF"
+        }
+
+        Calendar {
+            id: calendar
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.top: parent.top
+            height: 180
+            frameVisible: false
+
+            style: CalendarStyle {
+                gridVisible: false
+                background: Rectangle { color: "transparent" }
+                dayDelegate: Item {
+                    implicitHeight: implicitWidth
+                    implicitWidth: calendar.width / 7
+
+                    Rectangle {
+                        anchors.fill: parent
+                        radius: parent.implicitHeight / 2
+                        color: dayArea.pressed && styleData.visibleMonth ? "#FF6C3B" : "transparent"
+                    }
+
+                    Text {
+                        anchors.centerIn: parent
+                        font.family: "Arial"
+                        font.pixelSize: 12
+                        font.letterSpacing: -1
+                        font.bold: dayArea.pressed
+                        text: styleData.date.getDate()
+                        color: {
+                            if(!styleData.visibleMonth) return "#DBDBDB"
+                            if(dayArea.pressed) return "#FFFFFF"
+                            if(styleData.today) return "#FF6C3B"
+                            return "#4A4848"
+                        }
+                    }
+
+                    MouseArea {
+                        id: dayArea
+                        anchors.fill: parent
+                        onClicked: {
+                            if(styleData.visibleMonth) {
+                                var date = styleData.date
+                                var day = date.getDate()
+                                var month = date.getMonth() + 1
+                                dayInput.text = day < 10 ? "0" + day : day
+                                monthInput.text = month < 10 ? "0" + month : month
+                                yearInput.text = date.getFullYear()
+                                datePicker.expanded = false
+                            } else {
+                                var date = styleData.date
+                                if(date.getMonth() > calendar.visibleMonth)
+                                    calendar.showNextMonth()
+                                else calendar.showPreviousMonth()
+                            }
+                        }
+                    }
+                }
+
+                dayOfWeekDelegate: Item {
+                    implicitHeight: 20
+                    implicitWidth: calendar.width / 7
+
+                    Text {
+                        anchors.centerIn: parent
+                        elide: Text.ElideRight
+                        font.family: "Arial"
+                        font.pixelSize: 9
+                        font.letterSpacing: -1
+                        color: "#535353"
+                        text: {
+                            var locale = Qt.locale()
+                            return locale.dayName(styleData.dayOfWeek, Locale.ShortFormat)
+                        }
+                    }
+                }
+
+                navigationBar: Rectangle {
+                    implicitWidth: calendar.width
+                    implicitHeight: 30
+
+                    Text {
+                        anchors.centerIn: parent
+                        font.family: "Arial"
+                        font.pixelSize: 12
+                        font.letterSpacing: -1
+                        color: "#4A4646"
+                        text: styleData.title
+                    }
+
+                    Item {
+                        anchors.left: parent.left
+                        anchors.top: parent.top
+                        anchors.bottom: parent.bottom
+                        width: height
+
+                        Image {
+                            anchors.centerIn: parent
+                            source: "../images/prevMonth.png"
+                        }
+
+                        MouseArea {
+                            anchors.fill: parent
+                            onClicked: calendar.showPreviousMonth()
+                        }
+                    }
+
+                    Item {
+                        anchors.right: parent.right
+                        anchors.top: parent.top
+                        anchors.bottom: parent.bottom
+                        width: height
+
+                        Image {
+                            anchors.centerIn: parent
+                            source: "../images/nextMonth.png"
+                        }
+
+                        MouseArea {
+                            anchors.fill: parent
+                            onClicked: calendar.showNextMonth()
+                        }
+                    }
+                }
+            }
+        }
+    }
+}