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

6 files changed, 488 insertions, 5 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()
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/components/Label.qml b/components/Label.qml
index 81b2c6c2..c85d6d61 100644
--- a/components/Label.qml
+++ b/components/Label.qml
@@ -37,7 +37,7 @@ Item {
         hoverEnabled: true
         onEntered: {
             icon.visible = false
-            var pos = rootItem.mapFromItem(icon, 0, -15)
+            var pos = appWindow.mapFromItem(icon, 0, -15)
             tipItem.text = item.tipText
             tipItem.x = pos.x
             if(tipItem.height > 30)
diff --git a/components/MenuButton.qml b/components/MenuButton.qml
index 80384d0f..38e63c92 100644
--- a/components/MenuButton.qml
+++ b/components/MenuButton.qml
@@ -40,7 +40,7 @@ Rectangle {
             font.pixelSize: 11
             font.bold: true
             color: button.checked || buttonArea.containsMouse ? "#FFFFFF" : dot.color
-            visible: appWindow.altPressed
+            visible: appWindow.ctrlPressed
         }
     }
 
diff --git a/components/PrivacyLevel.qml b/components/PrivacyLevel.qml
index f5ada015..19645b07 100644
--- a/components/PrivacyLevel.qml
+++ b/components/PrivacyLevel.qml
@@ -32,12 +32,26 @@ Item {
             anchors.left: parent.left
             anchors.margins: 4
             radius: 2
+            width: row.x
+
             color: {
                 if(item.fillLevel < 3) return "#FF6C3C"
                 if(item.fillLevel < repeater.count - 1) return "#FFE00A"
                 return "#36B25C"
             }
-            width: row.x
+
+            Timer {
+                interval: 500
+                running: true
+                repeat: false
+                onTriggered: fillRect.loaded = true
+            }
+
+            property bool loaded: false
+            Behavior on width {
+                enabled: fillRect.loaded
+                NumberAnimation { duration: 100; easing.type: Easing.InQuad }
+            }
         }
 
         MouseArea {
@@ -82,7 +96,6 @@ Item {
                 width: 1
                 height: 48
                 property bool mainTick: index === 0 || index === 3 || index === repeater.count - 1
-
                 Component.onCompleted: repeater.modelItems[index] = delegate
 
                 Image {
diff --git a/components/TableDropdown.qml b/components/TableDropdown.qml
index fb248d19..9cd58238 100644
--- a/components/TableDropdown.qml
+++ b/components/TableDropdown.qml
@@ -161,7 +161,7 @@ Item {
                             anchors.fill: parent
                             propagateComposedEvents: true
                             onEntered: {
-                                var pos = rootItem.mapFromItem(delegate, 30, -20)
+                                var pos = appWindow.mapFromItem(delegate, 30, -20)
                                 tipItem.text = name
                                 tipItem.x = pos.x
                                 if(tipItem.height > 30)
diff --git a/components/TitleBar.qml b/components/TitleBar.qml
new file mode 100644
index 00000000..fbaad01b
--- /dev/null
+++ b/components/TitleBar.qml
@@ -0,0 +1,137 @@
+import QtQuick 2.2
+import QtQuick.Window 2.0
+
+Row {
+    Rectangle {
+        width: 25
+        height: 25
+        radius: 5
+        clip: true
+        color: helpArea.containsMouse ? "#DBDBDB" : "#FFFFFF"
+
+        Rectangle {
+            width: 25
+            height: 25
+            radius: 5
+            color: "#FFFFFF"
+            visible: helpArea.containsMouse
+            x: 1; y: 2
+        }
+
+        Image {
+            anchors.centerIn: parent
+            source: {
+                if(appWindow.whatIsEnable)
+                    return "../images/whatIsIcon.png"
+                return helpArea.containsMouse ? "../images/helpIconHovered.png" :
+                                                "../images/helpIcon.png"
+            }
+        }
+
+        MouseArea {
+            id: helpArea
+            anchors.fill: parent
+            hoverEnabled: true
+            onClicked: appWindow.whatIsEnable = !appWindow.whatIsEnable
+        }
+    }
+
+    Rectangle {
+        width: 25
+        height: 25
+        radius: 5
+        clip: true
+        color: minimizeArea.containsMouse ? "#DBDBDB" : "#FFFFFF"
+
+        Rectangle {
+            width: 25
+            height: 25
+            radius: 5
+            color: "#FFFFFF"
+            visible: minimizeArea.containsMouse
+            x: 1; y: 2
+        }
+
+        Image {
+            anchors.centerIn: parent
+            source: minimizeArea.containsMouse ? "../images/minimizeIconHovered.png" :
+                                                 "../images/minimizeIcon.png"
+        }
+
+        MouseArea {
+            id: minimizeArea
+            anchors.fill: parent
+            hoverEnabled: true
+            onClicked: appWindow.visibility = Window.Minimized
+        }
+    }
+
+    Rectangle {
+        property bool checked: false
+        width: 25
+        height: 25
+        radius: 5
+        clip: true
+        color: maximizeArea.containsMouse ? "#DBDBDB" : "#FFFFFF"
+
+        Rectangle {
+            width: 25
+            height: 25
+            radius: 5
+            color: "#FFFFFF"
+            visible: maximizeArea.containsMouse
+            x: 1; y: 2
+        }
+
+        Image {
+            anchors.centerIn: parent
+            source: {
+                if(parent.checked)
+                    return  maximizeArea.containsMouse ? "../images/backToWindowIconHovered.png" :
+                                                         "../images/backToWindowIcon.png"
+                return maximizeArea.containsMouse ? "../images/maximizeIconHovered.png" :
+                                                    "../images/maximizeIcon.png"
+            }
+        }
+
+        MouseArea {
+            id: maximizeArea
+            anchors.fill: parent
+            hoverEnabled: true
+            onClicked: {
+                parent.checked = !parent.checked
+                appWindow.visibility = parent.checked ? Window.FullScreen :
+                                                        Window.Windowed
+            }
+        }
+    }
+
+    Rectangle {
+        width: 25
+        height: 25
+        radius: 5
+        clip: true
+        color: closeArea.containsMouse ? "#DBDBDB" : "#FFFFFF"
+
+        Rectangle {
+            width: 25
+            height: 25
+            radius: 5
+            color: "#FFFFFF"
+            visible: closeArea.containsMouse
+            x: 1; y: 2
+        }
+
+        Image {
+            anchors.centerIn: parent
+            source: "../images/closeIcon.png"
+        }
+
+        MouseArea {
+            id: closeArea
+            anchors.fill: parent
+            hoverEnabled: true
+            onClicked: Qt.quit()
+        }
+    }
+}