From 49bb4516f2b32f926f33a7600657222619b73381 Mon Sep 17 00:00:00 2001 From: marcin Date: Sun, 13 Jul 2014 14:27:50 +0200 Subject: shortcuts fix + ctrl+tab/ctrl+shift+tab functionality + heperlinks fix --- components/DatePicker.qml | 333 +++++++++++++++++++++++++++++++++++++++++++ components/Label.qml | 2 +- components/MenuButton.qml | 2 +- components/PrivacyLevel.qml | 17 ++- components/TableDropdown.qml | 2 +- components/TitleBar.qml | 137 ++++++++++++++++++ 6 files changed, 488 insertions(+), 5 deletions(-) create mode 100644 components/DatePicker.qml create mode 100644 components/TitleBar.qml (limited to 'components') 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() + } + } +} -- cgit v1.2.3