diff options
Diffstat (limited to 'components')
46 files changed, 1991 insertions, 576 deletions
diff --git a/components/CheckBox.qml b/components/CheckBox.qml index f341d730..15648d3e 100644 --- a/components/CheckBox.qml +++ b/components/CheckBox.qml @@ -26,16 +26,20 @@ // 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.0 +import QtQuick 2.9 import QtQuick.Layouts 1.1 +import FontAwesome 1.0 -import "../components" as MoneroComponents +import "." as MoneroComponents +import "effects/" as MoneroEffects Item { id: checkBox property alias text: label.text - property string checkedIcon: "../images/checkedIcon-black.png" + property string checkedIcon: "qrc:///images/check-white.svg" property string uncheckedIcon + property int imgWidth: 13 * scaleRatio + property int imgHeight: 13 * scaleRatio property bool checked: false property alias background: backgroundRect.color property bool border: true @@ -63,6 +67,7 @@ Item { Rectangle { id: backgroundRect + visible: checkBox.border anchors.fill: parent radius: 3 color: "transparent" @@ -72,22 +77,26 @@ Item { } else { return MoneroComponents.Style.inputBorderColorInActive; } - visible: checkBox.border } - Image { + MoneroEffects.ImageMask { + id: img + visible: checkBox.checked || checkBox.uncheckedIcon != "" anchors.centerIn: parent - source: { - if (checkBox.checked || checkBox.uncheckedIcon == "") { + width: checkBox.imgWidth + height: checkBox.imgHeight + color: MoneroComponents.Style.defaultFontColor + fontAwesomeFallbackIcon: FontAwesome.plus + fontAwesomeFallbackSize: 14 + image: { + if (checkBox.checked || checkBox.uncheckedIcon == "") return checkBox.checkedIcon; - } return checkBox.uncheckedIcon; } - visible: checkBox.checked || checkBox.uncheckedIcon != "" } } - Text { + MoneroComponents.TextPlain { id: label font.family: MoneroComponents.Style.fontRegular.name font.pixelSize: checkBox.fontSize diff --git a/components/CheckBox2.qml b/components/CheckBox2.qml index 39494001..899f1f1e 100644 --- a/components/CheckBox2.qml +++ b/components/CheckBox2.qml @@ -26,22 +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.0 +import QtQuick 2.9 import QtQuick.Layouts 1.1 import QtGraphicalEffects 1.0 +import FontAwesome 1.0 + import "." 1.0 +import "." as MoneroComponents +import "effects/" as MoneroEffects RowLayout { id: checkBox property alias text: label.text - property string checkedIcon: "../images/checkedIcon-black.png" - property string uncheckedIcon property bool checked: false - property string background: "backgroundRect.color" property int fontSize: 14 * scaleRatio property alias fontColor: label.color property int textMargin: 8 * scaleRatio - property bool darkDropIndicator: false signal clicked() height: 25 * scaleRatio @@ -58,7 +58,7 @@ RowLayout { width: (label.width + indicatorRect.width + checkBox.textMargin) color: "transparent" - Text { + MoneroComponents.TextPlain { id: label font.family: Style.fontLight.name font.pixelSize: checkBox.fontSize @@ -77,21 +77,27 @@ RowLayout { color: "transparent" rotation: checkBox.checked ? 180 * scaleRatio : 0 - Image { + MoneroEffects.ImageMask { id: indicatorImage anchors.centerIn: parent - source: "../images/whiteDropIndicator.png" - visible: !darkDropIndicator - } - ColorOverlay { - anchors.fill: indicatorImage - source: indicatorImage - color: "#FF000000" - visible: darkDropIndicator + width: 12 * scaleRatio + height: 8 * scaleRatio + image: "qrc:///images/whiteDropIndicator.png" + color: MoneroComponents.Style.defaultFontColor + opacity: MoneroComponents.Style.blackTheme ? 1 : 0.75 + fontAwesomeFallbackIcon: FontAwesome.arrowDown + fontAwesomeFallbackSize: 14 + + MoneroEffects.ColorTransition { + targetObj: indicatorImage + blackColor: "white" + whiteColor: "black" + duration: 500 + } } } - MouseArea{ + MouseArea { anchors.fill: parent hoverEnabled: true cursorShape: Qt.PointingHandCursor @@ -100,7 +106,5 @@ RowLayout { } } } - - } } diff --git a/components/DaemonConsole.qml b/components/DaemonConsole.qml index bed7dc39..a27abe79 100644 --- a/components/DaemonConsole.qml +++ b/components/DaemonConsole.qml @@ -26,14 +26,15 @@ // 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.0 +import QtQuick 2.9 import QtQuick.Controls 2.0 import QtQuick.Dialogs 1.2 import QtQuick.Layouts 1.1 import QtQuick.Controls.Styles 1.4 import QtQuick.Window 2.2 -import "../components" as MoneroComponents +import "." as MoneroComponents +import "effects/" as MoneroEffects import "../js/Windows.js" as Windows import "../js/Utils.js" as Utils @@ -64,10 +65,18 @@ Window { width: 480 height: 280 - // background gradient - Image { + // background + MoneroEffects.GradientBackground { anchors.fill: parent - source: "../images/middlePanelBg.jpg" + fallBackColor: MoneroComponents.Style.middlePanelBackgroundColor + initialStartColor: MoneroComponents.Style.middlePanelBackgroundGradientStart + initialStopColor: MoneroComponents.Style.middlePanelBackgroundGradientStop + blackColorStart: MoneroComponents.Style._b_middlePanelBackgroundGradientStart + blackColorStop: MoneroComponents.Style._b_middlePanelBackgroundGradientStop + whiteColorStart: MoneroComponents.Style._w_middlePanelBackgroundGradientStart + whiteColorStop: MoneroComponents.Style._w_middlePanelBackgroundGradientStop + start: Qt.point(0, 0) + end: Qt.point(height, width) } // Make window draggable @@ -111,20 +120,20 @@ Window { font.family: MoneroComponents.Style.defaultFontColor font.pixelSize: 14 * scaleRatio color: MoneroComponents.Style.defaultFontColor - selectionColor: MoneroComponents.Style.dimmedFontColor + selectionColor: MoneroComponents.Style.textSelectionColor wrapMode: TextEdit.Wrap readOnly: true function logCommand(msg){ - msg = log_color(msg, "lime"); + msg = log_color(msg, MoneroComponents.Style.blackTheme ? "lime" : "#009100"); textArea.append(msg); } function logMessage(msg){ msg = msg.trim(); - var color = "white"; + var color = MoneroComponents.Style.defaultFontColor; if(msg.toLowerCase().indexOf('error') >= 0){ - color = "red"; + color = MoneroComponents.Style.errorColor; } else if (msg.toLowerCase().indexOf('warning') >= 0){ - color = "yellow"; + color = MoneroComponents.Style.warningColor; } // format multi-lines diff --git a/components/DaemonManagerDialog.qml b/components/DaemonManagerDialog.qml index 92298e3e..697445d2 100644 --- a/components/DaemonManagerDialog.qml +++ b/components/DaemonManagerDialog.qml @@ -26,7 +26,7 @@ // 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.0 +import QtQuick 2.9 import QtQuick.Controls 1.4 import QtQuick.Dialogs 1.2 import QtQuick.Layouts 1.1 @@ -89,12 +89,14 @@ Window { } } - Text { + MoneroComponents.TextPlain { text: qsTr("Starting local node in %1 seconds").arg(countDown) + translationManager.emptyString; font.pixelSize: 18 Layout.alignment: Qt.AlignHCenter Layout.fillWidth: true horizontalAlignment: Text.AlignHCenter + themeTransition: false + color: "black" } } 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() } diff --git a/components/HistoryTable.qml b/components/HistoryTable.qml new file mode 100644 index 00000000..949f944f --- /dev/null +++ b/components/HistoryTable.qml @@ -0,0 +1,506 @@ +// Copyright (c) 2014-2019, The Monero Project +// +// All rights reserved. +// +// Redistribution and use in source and binary forms, with or without modification, are +// permitted provided that the following conditions are met: +// +// 1. Redistributions of source code must retain the above copyright notice, this list of +// conditions and the following disclaimer. +// +// 2. Redistributions in binary form must reproduce the above copyright notice, this list +// of conditions and the following disclaimer in the documentation and/or other +// materials provided with the distribution. +// +// 3. Neither the name of the copyright holder nor the names of its contributors may be +// used to endorse or promote products derived from this software without specific +// prior written permission. +// +// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY +// EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF +// MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL +// THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, +// PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS +// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, +// 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.9 +import moneroComponents.Clipboard 1.0 +import moneroComponents.AddressBookModel 1.0 + +import "../components" as MoneroComponents +import "../js/TxUtils.js" as TxUtils + +ListView { + id: listView + clip: true + boundsBehavior: ListView.StopAtBounds + property var previousItem + property int rowSpacing: 12 + property var addressBookModel: null + + function buildTxDetailsString(tx_id, paymentId, tx_key,tx_note, destinations, rings, address, address_label) { + var trStart = '<tr><td width="85" style="padding-top:5px"><b>', + trMiddle = '</b></td><td style="padding-left:10px;padding-top:5px;">', + trEnd = "</td></tr>"; + + return '<table border="0">' + + (tx_id ? trStart + qsTr("Tx ID:") + trMiddle + tx_id + trEnd : "") + + (address_label ? trStart + qsTr("Address label:") + trMiddle + address_label + trEnd : "") + + (address ? trStart + qsTr("Address:") + trMiddle + address + trEnd : "") + + (paymentId ? trStart + qsTr("Payment ID:") + trMiddle + paymentId + trEnd : "") + + (tx_key ? trStart + qsTr("Tx key:") + trMiddle + tx_key + trEnd : "") + + (tx_note ? trStart + qsTr("Tx note:") + trMiddle + tx_note + trEnd : "") + + (destinations ? trStart + qsTr("Destinations:") + trMiddle + destinations + trEnd : "") + + (rings ? trStart + qsTr("Rings:") + trMiddle + rings + trEnd : "") + + "</table>" + + translationManager.emptyString; + } + + function lookupPaymentID(paymentId) { + if (!addressBookModel) + return "" + var idx = addressBookModel.lookupPaymentID(paymentId) + if (idx < 0) + return "" + idx = addressBookModel.index(idx, 0) + return addressBookModel.data(idx, AddressBookModel.AddressBookDescriptionRole) + } + + footer: Rectangle { + height: 127 * scaleRatio + width: listView.width + color: "transparent" + + MoneroComponents.TextPlain { + anchors.centerIn: parent + font.family: "Arial" + font.pixelSize: 14 + color: "#545454" + text: qsTr("No more results") + translationManager.emptyString + } + } + + delegate: Rectangle { + id: delegate + property bool collapsed: index ? false : true + height: collapsed ? 180 * scaleRatio : 70 * scaleRatio + width: listView.width + color: "transparent" + + function collapse(){ + delegate.height = 180 * scaleRatio; + } + + // borders + Rectangle{ + anchors.right: parent.right + anchors.top: parent.top + anchors.bottom: parent.bottom + width: 1 + color: "#404040" + } + + Rectangle{ + anchors.left: parent.left + anchors.top: parent.top + anchors.bottom: parent.bottom + width: collapsed ? 2 : 1 + color: collapsed ? "#BBBBBB" : "#404040" + } + + Rectangle{ + anchors.right: parent.right + anchors.bottom: parent.top + anchors.left: parent.left + height: 1 + color: "#404040" + } + + Rectangle{ + anchors.right: parent.right + anchors.bottom: parent.bottom + anchors.left: parent.left + height: 1 + color: "#404040" + } + + Rectangle { + id: row1 + anchors.left: parent.left + anchors.leftMargin: 20 * scaleRatio + anchors.right: parent.right + anchors.rightMargin: 20 * scaleRatio + anchors.top: parent.top + anchors.topMargin: 15 * scaleRatio + height: 40 * scaleRatio + color: "transparent" + + Image { + id: arrowImage + source: isOut ? "qrc:///images/downArrow.png" : confirmationsRequired === 60 ? "qrc:///images/miningxmr.png" : "qrc:///images/upArrow-green.png" + height: 18 * scaleRatio + width: (confirmationsRequired === 60 ? 18 : 12) * scaleRatio + anchors.top: parent.top + anchors.topMargin: 12 * scaleRatio + } + + MoneroComponents.TextPlain { + id: txrxLabel + anchors.left: arrowImage.right + anchors.leftMargin: 18 * scaleRatio + font.family: MoneroComponents.Style.fontLight.name + font.pixelSize: 14 * scaleRatio + text: isOut ? qsTr("Sent") + translationManager.emptyString : qsTr("Received") + translationManager.emptyString + color: "#808080" + } + + MoneroComponents.TextPlain { + id: amountLabel + anchors.left: arrowImage.right + anchors.leftMargin: 18 * scaleRatio + anchors.top: txrxLabel.bottom + anchors.topMargin: 0 * scaleRatio + font.family: MoneroComponents.Style.fontBold.name + font.pixelSize: 18 * scaleRatio + font.bold: true + text: { + var _amount = amount; + if(_amount === 0){ + // *sometimes* amount is 0, while the 'destinations string' + // has the correct amount, so we try to fetch it from that instead. + _amount = TxUtils.destinationsToAmount(destinations); + _amount = (_amount *1); + } + + return _amount + " XMR"; + } + color: isOut ? MoneroComponents.Style.white : MoneroComponents.Style.green + + MouseArea { + hoverEnabled: true + anchors.fill: parent + cursorShape: Qt.PointingHandCursor + onEntered: { + parent.color = MoneroComponents.Style.orange + } + onExited: { + parent.color = isOut ? MoneroComponents.Style.white : MoneroComponents.Style.green } + onClicked: { + console.log("Copied to clipboard"); + clipboard.setText(parent.text.split(" ")[0]); + appWindow.showStatusMessage(qsTr("Copied to clipboard"),3) + } + } + } + + Rectangle { + anchors.right: parent.right + width: 300 * scaleRatio + height: parent.height + color: "transparent" + + MoneroComponents.TextPlain { + id: dateLabel + anchors.left: parent.left + font.family: MoneroComponents.Style.fontRegular.name + font.pixelSize: 14 * scaleRatio + text: date + color: "#808080" + } + + MoneroComponents.TextPlain { + id: timeLabel + anchors.left: dateLabel.right + anchors.leftMargin: 7 * scaleRatio + anchors.top: parent.top + anchors.topMargin: 1 * scaleRatio + font.pixelSize: 12 * scaleRatio + text: time + color: "#808080" + } + + MoneroComponents.TextPlain { + id: toLabel + property string address: "" + color: "#BBBBBB" + anchors.left: parent.left + anchors.top: dateLabel.bottom + anchors.topMargin: 0 + font.family: MoneroComponents.Style.fontRegular.name + font.pixelSize: 16 * scaleRatio + text: { + if(isOut){ + address = TxUtils.destinationsToAddress(destinations); + if(address){ + var truncated = TxUtils.addressTruncate(address); + return qsTr("To ") + translationManager.emptyString + truncated; + } else { + return "Unknown recipient"; + } + } + return ""; + } + + MouseArea{ + visible: parent.address !== undefined + hoverEnabled: true + anchors.fill: parent + cursorShape: Qt.PointingHandCursor + onEntered: { + toLabel.color = "white"; + } + onExited: { + toLabel.color = "#BBBBBB"; + } + onClicked: { + if(parent.address){ + console.log("Address copied to clipboard"); + clipboard.setText(parent.address); + appWindow.showStatusMessage(qsTr("Address copied to clipboard"),3) + } + } + } + } + + Rectangle { + height: 24 * scaleRatio + width: 24 * scaleRatio + color: "transparent" + anchors.right: parent.right + anchors.verticalCenter: parent.verticalCenter + + Image { + id: dropdownImage + height: 8 * scaleRatio + width: 12 * scaleRatio + source: "qrc:///images/whiteDropIndicator.png" + rotation: delegate.collapsed ? 180 : 0 + anchors.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter + } + + MouseArea{ + anchors.fill: parent + hoverEnabled: true + cursorShape: Qt.PointingHandCursor + onClicked: { + delegate.collapsed = !delegate.collapsed; + } + } + } + } + } + + Rectangle { + id: row2 + anchors.left: parent.left + anchors.leftMargin: 20 * scaleRatio + anchors.right: parent.right + anchors.rightMargin: 20 * scaleRatio + anchors.top: row1.bottom + anchors.topMargin: 15 * scaleRatio + height: 40 * scaleRatio + color: "transparent" + visible: delegate.collapsed + + // left column + MoneroComponents.HistoryTableInnerColumn{ + anchors.left: parent.left + anchors.leftMargin: 30 * scaleRatio + + labelHeader: qsTr("Transaction ID") + translationManager.emptyString + labelValue: hash.substring(0, 18) + "..." + copyValue: hash + } + + // right column + MoneroComponents.HistoryTableInnerColumn{ + anchors.right: parent.right + anchors.rightMargin: 100 * scaleRatio + width: 200 * scaleRatio + height: parent.height + color: "transparent" + + labelHeader: qsTr("Fee") + labelValue: { + if(!isOut && !fee){ + return "-"; + } else if(isOut && fee){ + return fee + " XMR"; + } else { + return "Unknown" + } + } + copyValue: { + if(isOut && fee){ return fee } + else { return "" } + } + } + + } + + Rectangle { + id: row3 + anchors.left: parent.left + anchors.leftMargin: 20 * scaleRatio + anchors.right: parent.right + anchors.rightMargin: 20 * scaleRatio + anchors.top: row2.bottom + anchors.topMargin: 15 * scaleRatio + height: 40 * scaleRatio + color: "transparent" + visible: delegate.collapsed + + // left column + MoneroComponents.HistoryTableInnerColumn{ + anchors.left: parent.left + anchors.leftMargin: 30 * scaleRatio + labelHeader: qsTr("Blockheight") + labelValue: { + if (!isPending) + if(confirmations < confirmationsRequired) + return blockHeight + " " + qsTr("(%1/%2 confirmations)").arg(confirmations).arg(confirmationsRequired); + else + return blockHeight; + if (!isOut) + return qsTr("UNCONFIRMED") + translationManager.emptyString + if (isFailed) + return qsTr("FAILED") + translationManager.emptyString + return qsTr("PENDING") + translationManager.emptyString + } + copyValue: labelValue.indexOf(" ") > 0 ? labelValue.slice(0, labelValue.indexOf(" ")) : labelValue + } + + // right column + MoneroComponents.HistoryTableInnerColumn { + anchors.right: parent.right + anchors.rightMargin: 80 * scaleRatio + width: 220 * scaleRatio + height: parent.height + color: "transparent" + hashValue: hash + labelHeader: qsTr("Description") + translationManager.emptyString + labelHeaderIconImageSource: "qrc:///images/editIcon.png" + + labelValue: { + var note = currentWallet.getUserNote(hash); + if(note){ + if(note.length > 28) { + return note.substring(0, 28) + "..."; + } else { + return note; + } + } else { + return qsTr("None") + translationManager.emptyString; + } + } + + copyValue: { + return currentWallet.getUserNote(hash); + } + } + + Rectangle { + id: proofButton + visible: isOut + color: "#404040" + height: 24 * scaleRatio + width: 24 * scaleRatio + anchors.right: parent.right + anchors.bottom: parent.bottom + anchors.bottomMargin: 36 + radius: 20 * scaleRatio + + MouseArea { + id: proofButtonMouseArea + anchors.fill: parent + hoverEnabled: true + cursorShape: Qt.PointingHandCursor + onClicked: { + var address = TxUtils.destinationsToAddress(destinations); + if(address === undefined){ + console.log('getProof: Error fetching address') + return; + } + + var checked = (TxUtils.checkTxID(hash) && TxUtils.checkAddress(address, appWindow.persistentSettings.nettype)); + if(!checked){ + console.log('getProof: Error checking TxId and/or address'); + } + + console.log("getProof: Generate clicked: txid " + hash + ", address " + address); + root.getProofClicked(hash, address, ''); + } + + onEntered: { + proofButton.color = "#656565"; + } + + onExited: { + proofButton.color = "#404040"; + } + } + + MoneroComponents.TextPlain { + color: MoneroComponents.Style.defaultFontColor + text: "P" + anchors.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter + font.pixelSize: 14 * scaleRatio + } + } + + Rectangle { + id: detailsButton + color: "#404040" + height: 24 * scaleRatio + width: 24 * scaleRatio + anchors.right: parent.right + anchors.bottom: parent.bottom + anchors.bottomMargin: 6 + radius: 20 * scaleRatio + + MouseArea { + id: detailsButtonMouseArea + anchors.fill: parent + hoverEnabled: true + cursorShape: Qt.PointingHandCursor + onClicked: { + var tx_key = currentWallet.getTxKey(hash) + var tx_note = currentWallet.getUserNote(hash) + var rings = currentWallet.getRings(hash) + var address_label = subaddrIndex == 0 ? qsTr("Primary address") : currentWallet.getSubaddressLabel(subaddrAccount, subaddrIndex) + var address = currentWallet.address(subaddrAccount, subaddrIndex) + if (rings) + rings = rings.replace(/\|/g, '\n') + informationPopup.title = "Transaction details"; + informationPopup.content = buildTxDetailsString(hash,paymentId,tx_key,tx_note,destinations, rings, address, address_label); + informationPopup.onCloseCallback = null + informationPopup.open(); + } + + onEntered: { + detailsButton.color = "#656565"; + } + + onExited: { + detailsButton.color = "#404040"; + } + } + + MoneroComponents.TextPlain { + color: MoneroComponents.Style.defaultFontColor + text: "?" + anchors.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter + font.pixelSize: 14 * scaleRatio + } + } + } + } + + Clipboard { id: clipboard } +} diff --git a/components/IconButton.qml b/components/IconButton.qml index ba6d1e94..5d4d8d19 100644 --- a/components/IconButton.qml +++ b/components/IconButton.qml @@ -26,55 +26,33 @@ // 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.9 +import "../components" as MoneroComponents +import "../components/effects" as MoneroEffects -import QtQuick 2.0 - -Item { - property alias image : buttonImage - property alias imageSource : buttonImage.source - - signal clicked(var mouse) - +MoneroEffects.ImageMask { id: button - width: parent.height - height: parent.height - anchors.right: parent.right - anchors.top: parent.top - anchors.bottom: parent.bottom + z: 666 + color: MoneroComponents.Style.defaultFontColor + image: "" - Image { - id: buttonImage - source: "" - x : (parent.width - width) / 2 - y : (parent.height - height) / 2 - z: 100 - } + signal clicked(var mouse) MouseArea { - id: buttonArea - anchors.fill: buttonImage + anchors.fill: parent hoverEnabled: true cursorShape: Qt.PointingHandCursor - onPressed: { - buttonImage.x = buttonImage.x + 2 - buttonImage.y = buttonImage.y + 2 - } - - onReleased: { - buttonImage.x = (parent.width - width) / 2 - buttonImage.y = (parent.height - height) / 2 + onEntered: { + button.width = button.width + 2 + button.height = button.height + 2 } onExited: { - if (pressed) { - buttonImage.x = (parent.width - width) / 2 - buttonImage.y = (parent.height - height) / 2 - } + button.width = button.width - 2 + button.height = button.height - 2 } - onClicked: { - parent.clicked(mouse) - } + onClicked: button.clicked(mouse) } } diff --git a/components/InlineButton.qml b/components/InlineButton.qml index 4741a701..5871a8ff 100644 --- a/components/InlineButton.qml +++ b/components/InlineButton.qml @@ -26,10 +26,12 @@ // 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.0 +import QtQuick 2.9 import QtQuick.Layouts 1.1 +import QtGraphicalEffects 1.0 -import "../components" as MoneroComponents +import "." as MoneroComponents +import "./effects/" as MoneroEffects Item { id: inlineButton @@ -43,9 +45,9 @@ Item { property string pressedColor: "#FF4304" property string releasedColor: "#FF6C3C" property string icon: "" - property string textColor: "black" + property string textColor: MoneroComponents.Style.inlineButtonTextColor property int fontSize: small ? 14 * scaleRatio : 16 * scaleRatio - property int rectHeight: small ? 24 * scaleRatio : 28 * scaleRatio + property int rectHeight: small ? 24 * scaleRatio : 24 * scaleRatio property int rectHMargin: small ? 16 * scaleRatio : 22 * scaleRatio property alias text: inlineText.text property alias fontPixelSize: inlineText.font.pixelSize @@ -61,16 +63,16 @@ Item { Rectangle{ id: rect - color: MoneroComponents.Style.buttonBackgroundColorDisabled - border.color: "black" - height: 28 * scaleRatio - width: inlineText.text ? (inlineText.width + 22) * scaleRatio : inlineButton.icon ? (inlineImage.width + 16) * scaleRatio : rect.height + color: MoneroComponents.Style.buttonInlineBackgroundColor + height: 24 * scaleRatio + width: inlineText.text ? (inlineText.width + 16) * scaleRatio : inlineButton.icon ? (inlineImage.width + 16) * scaleRatio : rect.height radius: 4 anchors.verticalCenter: parent.verticalCenter anchors.right: parent.right + anchors.rightMargin: 4 * scaleRatio - Text { + MoneroComponents.TextPlain { id: inlineText font.family: MoneroComponents.Style.fontBold.name font.bold: true @@ -78,6 +80,13 @@ Item { color: inlineButton.textColor anchors.verticalCenter: parent.verticalCenter anchors.horizontalCenter: parent.horizontalCenter + themeTransition: false + + MoneroEffects.ColorTransition { + targetObj: inlineText + blackColor: MoneroComponents.Style._b_inlineButtonTextColor + whiteColor: MoneroComponents.Style._w_inlineButtonTextColor + } } Image { @@ -104,6 +113,18 @@ Item { } } + DropShadow { + visible: !MoneroComponents.Style.blackTheme + anchors.fill: rect + horizontalOffset: 2 + verticalOffset: 2 + radius: 7.0 + samples: 10 + color: "#1B000000" + cached: true + source: rect + } + Keys.onSpacePressed: doClick() Keys.onReturnPressed: doClick() } diff --git a/components/Input.qml b/components/Input.qml index b04c3c72..c3d345c4 100644 --- a/components/Input.qml +++ b/components/Input.qml @@ -27,7 +27,7 @@ // THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. import QtQuick.Controls 2.0 -import QtQuick 2.7 +import QtQuick 2.9 import "../components" as MoneroComponents @@ -38,8 +38,8 @@ TextField { horizontalAlignment: TextInput.AlignLeft selectByMouse: true color: MoneroComponents.Style.defaultFontColor - selectionColor: MoneroComponents.Style.dimmedFontColor - selectedTextColor: MoneroComponents.Style.defaultFontColor + selectionColor: MoneroComponents.Style.textSelectionColor + selectedTextColor: MoneroComponents.Style.textSelectedColor background: Rectangle { color: "transparent" diff --git a/components/InputDialog.qml b/components/InputDialog.qml index 26e1f18a..8b3414ed 100644 --- a/components/InputDialog.qml +++ b/components/InputDialog.qml @@ -26,7 +26,7 @@ // 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.7 +import QtQuick 2.9 import QtQuick.Controls 2.0 import QtQuick.Dialogs 1.2 import QtQuick.Layouts 1.1 @@ -49,7 +49,7 @@ Item { inactiveOverlay.visible = true leftPanel.enabled = false middlePanel.enabled = false - titleBar.enabled = false + titleBar.state = "essentials" show() root.visible = true; input.focus = true; @@ -60,7 +60,7 @@ Item { inactiveOverlay.visible = false leftPanel.enabled = true middlePanel.enabled = true - titleBar.enabled = true + titleBar.state = "default" root.visible = false; } @@ -101,14 +101,14 @@ Item { leftPadding: 10 topPadding: 10 color: MoneroComponents.Style.defaultFontColor - selectionColor: MoneroComponents.Style.dimmedFontColor - selectedTextColor: MoneroComponents.Style.defaultFontColor + selectionColor: MoneroComponents.Style.textSelectionColor + selectedTextColor: MoneroComponents.Style.textSelectedColor background: Rectangle { radius: 2 - border.color: Qt.rgba(255, 255, 255, 0.35) + border.color: MoneroComponents.Style.inputBorderColorActive border.width: 1 - color: "black" + color: MoneroComponents.Style.blackTheme ? "black" : "#A9FFFFFF" } Keys.onReturnPressed: { diff --git a/components/InputMulti.qml b/components/InputMulti.qml index e497e18b..4fea31c4 100644 --- a/components/InputMulti.qml +++ b/components/InputMulti.qml @@ -27,7 +27,7 @@ // THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. import QtQuick.Controls 2.0 -import QtQuick 2.7 +import QtQuick 2.9 import "../js/TxUtils.js" as TxUtils import "../components" as MoneroComponents @@ -48,8 +48,8 @@ TextArea { font.bold: fontBold horizontalAlignment: TextInput.AlignLeft selectByMouse: mouseSelection - selectionColor: MoneroComponents.Style.dimmedFontColor - selectedTextColor: MoneroComponents.Style.defaultFontColor + selectionColor: MoneroComponents.Style.textSelectionColor + selectedTextColor: MoneroComponents.Style.textSelectedColor property int minimumHeight: 100 * scaleRatio height: contentHeight > minimumHeight ? contentHeight : minimumHeight diff --git a/components/Label.qml b/components/Label.qml index 05c65da6..2ab9463d 100644 --- a/components/Label.qml +++ b/components/Label.qml @@ -26,7 +26,7 @@ // 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.5 +import QtQuick 2.9 import QtQuick.Layouts 1.1 import "../components" as MoneroComponents @@ -43,15 +43,15 @@ Item { property string fontFamily: "" property alias wrapMode: label.wrapMode property alias horizontalAlignment: label.horizontalAlignment - property alias hoveredLink: label.hoveredLink property alias elide: label.elide property alias textWidth: label.width + property alias themeTransition: label.themeTransition signal linkActivated() height: label.height * scaleRatio width: label.width * scaleRatio Layout.topMargin: 10 * scaleRatio - Text { + MoneroComponents.TextPlain { id: label anchors.bottom: parent.bottom anchors.bottomMargin: 2 * scaleRatio diff --git a/components/LabelButton.qml b/components/LabelButton.qml index 532f4901..eaa51677 100644 --- a/components/LabelButton.qml +++ b/components/LabelButton.qml @@ -26,7 +26,7 @@ // 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.0 +import QtQuick 2.9 import QtQuick.Layouts 1.1 import "../components" as MoneroComponents @@ -37,14 +37,14 @@ Rectangle { property alias text: labelButtonText.text id: labelButton - color: "#808080" + color: MoneroComponents.Style.buttonBackgroundColorDisabled radius: 3 height: 20 width: labelButtonText.width + 14 anchors.right: copyButton.left anchors.rightMargin: 6 - Text { + MoneroComponents.TextPlain { id: labelButtonText anchors.verticalCenter: parent.verticalCenter anchors.horizontalCenter: parent.horizontalCenter @@ -52,7 +52,7 @@ Rectangle { font.pixelSize: 12 font.bold: true text: "" - color: "black" + color: MoneroComponents.Style.inlineButtonTextColor } MouseArea { @@ -61,11 +61,11 @@ Rectangle { hoverEnabled: true onClicked: labelButton.clicked() onEntered: { - labelButton.color = "#707070"; + labelButton.color = MoneroComponents.Style.buttonBackgroundColorDisabledHover; labelButtonText.opacity = 0.8; } onExited: { - labelButton.color = "#808080"; + labelButton.color = MoneroComponents.Style.buttonBackgroundColorDisabled; labelButtonText.opacity = 1.0; } } diff --git a/components/LabelSubheader.qml b/components/LabelSubheader.qml index 50288ecf..7a74a378 100644 --- a/components/LabelSubheader.qml +++ b/components/LabelSubheader.qml @@ -26,9 +26,10 @@ // 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.0 +import QtQuick 2.9 import "../components" as MoneroComponents +import "../components/effects/" as MoneroEffects Label { id: item @@ -40,13 +41,12 @@ Label { anchors.left: parent.left anchors.right: parent.right height: 2 - color: MoneroComponents.Style.dividerColor - opacity: MoneroComponents.Style.dividerOpacity - } + color: MoneroComponents.Style.appWindowBorderColor - MouseArea { - anchors.fill: parent - acceptedButtons: Qt.NoButton - cursorShape: parent.hoveredLink ? Qt.PointingHandCursor : Qt.ArrowCursor + MoneroEffects.ColorTransition { + targetObj: parent + blackColor: MoneroComponents.Style._b_appWindowBorderColor + whiteColor: MoneroComponents.Style._w_appWindowBorderColor + } } } diff --git a/components/LanguageSidebar.qml b/components/LanguageSidebar.qml index 7d45d68b..94957e0b 100644 --- a/components/LanguageSidebar.qml +++ b/components/LanguageSidebar.qml @@ -28,7 +28,7 @@ import "../components" as MoneroComponents -import QtQuick 2.7 +import QtQuick 2.9 import QtQuick.XmlListModel 2.0 import QtQuick.Layouts 1.2 import QtQuick.Controls 2.0 @@ -79,7 +79,7 @@ Drawer { width: sideBar.width height: 32 * scaleRatio - Text { + MoneroComponents.TextPlain { anchors.left: parent.left anchors.leftMargin: 16 * scaleRatio font.bold: true @@ -101,7 +101,7 @@ Drawer { // button gradient while checked Image { anchors.fill: parent - source: "../images/menuButtonGradient.png" + source: "qrc:///images/menuButtonGradient.png" opacity: 0.65 visible: true diff --git a/components/LineEdit.qml b/components/LineEdit.qml index 95ba1369..f3016137 100644 --- a/components/LineEdit.qml +++ b/components/LineEdit.qml @@ -26,7 +26,8 @@ // 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.0 +import QtQuick 2.9 +import QtGraphicalEffects 1.0 import "../components" as MoneroComponents @@ -106,7 +107,7 @@ Item { } } - Text { + MoneroComponents.TextPlain { id: inputLabel anchors.top: parent.top anchors.left: parent.left @@ -146,7 +147,7 @@ Item { width: parent.width clip: true - Text { + MoneroComponents.TextPlain { id: placeholderLabel visible: input.text ? false : true anchors.verticalCenter: parent.verticalCenter @@ -192,7 +193,7 @@ Item { anchors.topMargin: 8 * scaleRatio anchors.left: parent.left anchors.leftMargin: 12 * scaleRatio - source: "../images/moneroIcon-28x28.png" + source: "qrc:///images/moneroIcon-28x28.png" visible: false } diff --git a/components/LineEditMulti.qml b/components/LineEditMulti.qml index 3689ad39..26d57509 100644 --- a/components/LineEditMulti.qml +++ b/components/LineEditMulti.qml @@ -26,7 +26,7 @@ // 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.0 +import QtQuick 2.9 import QtQuick.Layouts 1.1 import "../components" as MoneroComponents @@ -72,7 +72,7 @@ ColumnLayout { property int labelFontSize: 16 * scaleRatio property bool labelButtonVisible: false - property string fontColor: "white" + property string fontColor: MoneroComponents.Style.defaultFontColor property bool fontBold: false property int fontSize: 16 * scaleRatio @@ -103,7 +103,7 @@ ColumnLayout { height: (inputLabel.height + 10) * scaleRatio visible: showingHeader ? true : false - Text { + MoneroComponents.TextPlain { id: inputLabel anchors.top: parent.top anchors.left: parent.left @@ -172,7 +172,7 @@ ColumnLayout { onEditingFinished: item.editingFinished() error: item.error - Text { + MoneroComponents.TextPlain { id: placeholderLabel visible: input.text ? false : true anchors.verticalCenter: parent.verticalCenter diff --git a/components/MenuButton.qml b/components/MenuButton.qml index b587c975..a4aa236f 100644 --- a/components/MenuButton.qml +++ b/components/MenuButton.qml @@ -26,9 +26,11 @@ // 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.5 +import QtQuick 2.9 +import QtGraphicalEffects 1.0 import "../components" as MoneroComponents +import "effects/" as MoneroEffects Rectangle { id: button @@ -46,7 +48,6 @@ Rectangle { clicked(); } - function getOffset() { var offset = 0 var item = button @@ -61,16 +62,27 @@ Rectangle { property bool present: !under || under.checked || checked || under.numSelectedChildren > 0 height: present ? ((appWindow.height >= 800) ? 44 * scaleRatio : 38 * scaleRatio ) : 0 - // button gradient while checked - Image { + LinearGradient { + visible: isOpenGL && button.checked height: parent.height width: 260 anchors.verticalCenter: parent.verticalCenter anchors.right: parent.right anchors.rightMargin: -20 anchors.leftMargin: parent.getOffset() - source: "../images/menuButtonGradient.png" - visible: button.checked + start: Qt.point(width, 0) + end: Qt.point(0, 0) + gradient: Gradient { + GradientStop { position: 0.0; color: MoneroComponents.Style.menuButtonGradientStart } + GradientStop { position: 1.0; color: MoneroComponents.Style.menuButtonGradientStop } + } + } + + // fallback hover effect when opengl is not available + Rectangle { + visible: !isOpenGL && button.checked + anchors.fill: parent + color: MoneroComponents.Style.menuButtonFallbackBackgroundColor } // button decorations that are subject to leftMargin offsets @@ -79,7 +91,7 @@ Rectangle { anchors.leftMargin: parent.getOffset() + 20 * scaleRatio height: parent.height width: button.checked ? 20: 10 - color: "#00000000" + color: "transparent" // dot if unchecked Rectangle { @@ -93,43 +105,48 @@ Rectangle { Image { anchors.centerIn: parent anchors.left: parent.left - source: "../images/arrow-right-medium-white.png" + source: MoneroComponents.Style.menuButtonImageDotArrowSource visible: button.checked } } // button text - Text { + MoneroComponents.TextPlain { id: label + color: MoneroComponents.Style.menuButtonTextColor + themeTransitionBlackColor: MoneroComponents.Style._b_menuButtonTextColor + themeTransitionWhiteColor: MoneroComponents.Style._w_menuButtonTextColor anchors.verticalCenter: parent.verticalCenter anchors.left: parent.right anchors.leftMargin: 8 * scaleRatio - font.family: MoneroComponents.Style.fontMedium.name font.bold: true - font.pixelSize: 16 * scaleRatio - color: "#FFFFFF" + font.pixelSize: 14 * scaleRatio } } // menu button right arrow - Image { + MoneroEffects.ImageMask { anchors.verticalCenter: parent.verticalCenter + anchors.leftMargin: parent.getOffset() anchors.right: parent.right anchors.rightMargin: 20 * scaleRatio - anchors.leftMargin: parent.getOffset() - source: "../images/right.png" - opacity: button.checked ? 1.0 : 0.4 + height: 14 + width: 8 + image: MoneroComponents.Style.menuButtonImageRightSource + color: button.checked ? MoneroComponents.Style.menuButtonImageRightColorActive : MoneroComponents.Style.menuButtonImageRightColor + opacity: button.checked ? 0.8 : 0.25 } - Text { + MoneroComponents.TextPlain { id: symbolText anchors.right: parent.right anchors.rightMargin: 44 * scaleRatio anchors.verticalCenter: parent.verticalCenter font.pixelSize: 12 * scaleRatio font.bold: true - color: button.checked || buttonArea.containsMouse ? "#FFFFFF" : dot.color + color: button.checked || buttonArea.containsMouse ? MoneroComponents.Style.menuButtonTextColor : dot.color visible: appWindow.ctrlPressed + themeTransition: false } MouseArea { diff --git a/components/MenuButtonDivider.qml b/components/MenuButtonDivider.qml new file mode 100644 index 00000000..50d7c0f4 --- /dev/null +++ b/components/MenuButtonDivider.qml @@ -0,0 +1,15 @@ +import QtQuick 2.9 + +import "." as MoneroComponents +import "effects/" as MoneroEffects + +Rectangle { + color: MoneroComponents.Style.appWindowBorderColor + height: 1 + + MoneroEffects.ColorTransition { + targetObj: parent + blackColor: MoneroComponents.Style._b_appWindowBorderColor + whiteColor: MoneroComponents.Style._w_appWindowBorderColor + } +} diff --git a/components/MobileHeader.qml b/components/MobileHeader.qml index 53a080ad..8b8431b9 100644 --- a/components/MobileHeader.qml +++ b/components/MobileHeader.qml @@ -1,4 +1,4 @@ -import QtQuick 2.2 +import QtQuick 2.9 import QtGraphicalEffects 1.0 import QtQuick.Layouts 1.1 @@ -21,7 +21,7 @@ Rectangle { anchors.verticalCenterOffset: -5 anchors.left: parent.left anchors.leftMargin: 50 * scaleRatio - source: "../images/moneroLogo2.png" + source: "qrc:///images/moneroLogo2.png" } Image { @@ -30,7 +30,7 @@ Rectangle { anchors.verticalCenter: parent.verticalCenter anchors.left: parent.left anchors.leftMargin: 40 * scaleRatio - source: "../images/moneroIcon.png" + source: "qrc:///images/moneroIcon.png" } Grid { @@ -41,7 +41,7 @@ Rectangle { width: 256 * scaleRatio columns: 3 - Text { + MoneroComponents.TextPlain { id: balanceLabel width: 116 * scaleRatio height: 20 * scaleRatio @@ -55,7 +55,7 @@ Rectangle { text: leftPanel.balanceLabelText + ":" } - Text { + MoneroComponents.TextPlain { id: balanceText width: 110 * scaleRatio height: 20 * scaleRatio @@ -76,11 +76,11 @@ Rectangle { Image { anchors.verticalCenter: parent.verticalCenter anchors.left: parent.left - source: "../images/lockIcon.png" + source: "qrc:///images/lockIcon.png" } } - Text { + MoneroComponents.TextPlain { width: 116 * scaleRatio height: 20 * scaleRatio font.family: "Arial" @@ -93,7 +93,7 @@ Rectangle { text: qsTr("Unlocked Balance:") } - Text { + MoneroComponents.TextPlain { id: availableBalanceText width: 110 * scaleRatio height: 20 * scaleRatio diff --git a/components/NetworkStatusItem.qml b/components/NetworkStatusItem.qml index a1994398..a5ca56fa 100644 --- a/components/NetworkStatusItem.qml +++ b/components/NetworkStatusItem.qml @@ -26,7 +26,7 @@ // 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.0 +import QtQuick 2.9 import QtQuick.Layouts 1.1 import moneroComponents.Wallet 1.0 @@ -79,11 +79,11 @@ Rectangle { anchors.rightMargin: !appWindow.isMining ? 11 * scaleRatio : 0 source: { if(appWindow.isMining) { - return "../images/miningxmr.png" + return "qrc:///images/miningxmr.png" } else if(item.connected == Wallet.ConnectionStatus_Connected) { - return "../images/lightning.png" + return "qrc:///images/lightning.png" } else { - return "../images/lightning-white.png" + return "qrc:///images/lightning-white.png" } } MouseArea { @@ -105,7 +105,7 @@ Rectangle { height: 40 * scaleRatio width: 260 * scaleRatio - Text { + MoneroComponents.TextPlain { id: statusText anchors.left: parent.left anchors.top: parent.top @@ -113,20 +113,24 @@ Rectangle { font.family: MoneroComponents.Style.fontMedium.name font.bold: true font.pixelSize: 13 * scaleRatio - color: "white" - opacity: 0.5 + color: MoneroComponents.Style.dimmedFontColor + opacity: MoneroComponents.Style.blackTheme ? 0.65 : 0.5 text: qsTr("Network status") + translationManager.emptyString + themeTransition: false } - Text { + MoneroComponents.TextPlain { id: statusTextVal anchors.left: parent.left anchors.top: parent.top anchors.topMargin: 14 font.family: MoneroComponents.Style.fontMedium.name font.pixelSize: 20 * scaleRatio - color: "white" + color: MoneroComponents.Style.defaultFontColor text: getConnectionStatusString(item.connected) + translationManager.emptyString + opacity: MoneroComponents.Style.blackTheme ? 1.0 : 0.7 + themeTransition: false + MouseArea { anchors.fill: parent cursorShape: Qt.PointingHandCursor diff --git a/components/NewPasswordDialog.qml b/components/NewPasswordDialog.qml index 11e31008..bb987fe9 100644 --- a/components/NewPasswordDialog.qml +++ b/components/NewPasswordDialog.qml @@ -26,7 +26,7 @@ // 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.7 +import QtQuick 2.9 import QtQuick.Controls 2.0 import QtQuick.Dialogs 1.2 import QtQuick.Layouts 1.1 @@ -52,7 +52,9 @@ Item { inactiveOverlay.visible = true leftPanel.enabled = false middlePanel.enabled = false - titleBar.enabled = false + titleBar.state = "essentials" + + show(); root.visible = true; passwordInput1.text = ""; passwordInput2.text = ""; @@ -63,7 +65,7 @@ Item { inactiveOverlay.visible = false leftPanel.enabled = true middlePanel.enabled = true - titleBar.enabled = true + titleBar.state = "default" root.visible = false; closeCallback(); } @@ -123,22 +125,22 @@ Item { leftPadding: 10 topPadding: 10 color: MoneroComponents.Style.defaultFontColor - selectionColor: MoneroComponents.Style.dimmedFontColor - selectedTextColor: MoneroComponents.Style.defaultFontColor + selectionColor: MoneroComponents.Style.textSelectionColor + selectedTextColor: MoneroComponents.Style.textSelectedColor KeyNavigation.tab: passwordInput2 background: Rectangle { radius: 2 - border.color: Qt.rgba(255, 255, 255, 0.35) + border.color: MoneroComponents.Style.inputBorderColorInActive border.width: 1 - color: "black" + color: MoneroComponents.Style.blackTheme ? "black" : "#A9FFFFFF" Image { width: 26 * scaleRatio height: 26 * scaleRatio opacity: 0.7 fillMode: Image.PreserveAspectFit - source: isHidden ? "../images/eyeShow.png" : "../images/eyeHide.png" + source: isHidden ? "qrc:///images/eyeShow.png" : "qrc:///images/eyeHide.png" anchors.verticalCenter: parent.verticalCenter anchors.right: parent.right anchors.rightMargin: 20 @@ -202,24 +204,25 @@ Item { leftPadding: 10 topPadding: 10 color: MoneroComponents.Style.defaultFontColor - selectionColor: MoneroComponents.Style.dimmedFontColor - selectedTextColor: MoneroComponents.Style.defaultFontColor + selectionColor: MoneroComponents.Style.textSelectionColor + selectedTextColor: MoneroComponents.Style.textSelectedColor background: Rectangle { radius: 2 - border.color: Qt.rgba(255, 255, 255, 0.35) + border.color: MoneroComponents.Style.inputBorderColorInActive border.width: 1 - color: "black" + color: MoneroComponents.Style.blackTheme ? "black" : "#A9FFFFFF" Image { width: 26 * scaleRatio height: 26 * scaleRatio opacity: 0.7 fillMode: Image.PreserveAspectFit - source: isHidden ? "../images/eyeShow.png" : "../images/eyeHide.png" + source: isHidden ? "qrc:///images/eyeShow.png" : "qrc:///images/eyeHide.png" anchors.verticalCenter: parent.verticalCenter anchors.right: parent.right anchors.rightMargin: 20 + MouseArea { anchors.fill: parent cursorShape: Qt.PointingHandCursor diff --git a/components/Notifier.qml b/components/Notifier.qml index d14c1efe..1e842e84 100644 --- a/components/Notifier.qml +++ b/components/Notifier.qml @@ -26,7 +26,7 @@ // 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.0 +import QtQuick 2.9 import QtQuick.Controls 1.4 import moneroComponents.Wallet 1.0 diff --git a/components/PassphraseDialog.qml b/components/PassphraseDialog.qml index a8b47f12..1a41d5db 100644 --- a/components/PassphraseDialog.qml +++ b/components/PassphraseDialog.qml @@ -58,7 +58,9 @@ Item { leftPanel.enabled = false middlePanel.enabled = false - titleBar.enabled = false + titleBar.state = "essentials" + + show(); root.visible = true; passphaseInput1.text = ""; passphaseInput2.text = ""; @@ -69,7 +71,7 @@ Item { inactiveOverlay.visible = false leftPanel.enabled = true middlePanel.enabled = true - titleBar.enabled = true + titleBar.state = "default" root.visible = false; closeCallback(); } @@ -155,22 +157,22 @@ Item { leftPadding: 10 topPadding: 10 color: MoneroComponents.Style.defaultFontColor - selectionColor: MoneroComponents.Style.dimmedFontColor - selectedTextColor: MoneroComponents.Style.defaultFontColor + selectionColor: MoneroComponents.Style.textSelectionColor + selectedTextColor: MoneroComponents.Style.textSelectedColor KeyNavigation.tab: passphaseInput2 background: Rectangle { radius: 2 - border.color: Qt.rgba(255, 255, 255, 0.35) + border.color: MoneroComponents.Style.inputBorderColorInActive border.width: 1 - color: "black" + color: MoneroComponents.Style.blackTheme ? "black" : "#A9FFFFFF" Image { width: 26 * scaleRatio height: 26 * scaleRatio opacity: 0.7 fillMode: Image.PreserveAspectFit - source: isHidden ? "../images/eyeShow.png" : "../images/eyeHide.png" + source: isHidden ? "qrc:///images/eyeShow.png" : "qrc:///images/eyeHide.png" anchors.verticalCenter: parent.verticalCenter anchors.right: parent.right anchors.rightMargin: 20 @@ -207,7 +209,7 @@ Item { Layout.alignment: Qt.AlignHCenter height: 10 opacity: 0 - color: "black" + color: "transparent" } Label { @@ -239,16 +241,16 @@ Item { background: Rectangle { radius: 2 - border.color: Qt.rgba(255, 255, 255, 0.35) + border.color: MoneroComponents.Style.inputBorderColorInActive border.width: 1 - color: "black" + color: MoneroComponents.Style.blackTheme ? "black" : "#A9FFFFFF" Image { width: 26 * scaleRatio height: 26 * scaleRatio opacity: 0.7 fillMode: Image.PreserveAspectFit - source: isHidden ? "../images/eyeShow.png" : "../images/eyeHide.png" + source: isHidden ? "qrc:///images/eyeShow.png" : "qrc:///images/eyeHide.png" anchors.verticalCenter: parent.verticalCenter anchors.right: parent.right anchors.rightMargin: 20 diff --git a/components/PasswordDialog.qml b/components/PasswordDialog.qml index e292603b..eed71fa4 100644 --- a/components/PasswordDialog.qml +++ b/components/PasswordDialog.qml @@ -26,14 +26,15 @@ // 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.7 +import QtQuick 2.9 import QtQuick.Controls 2.0 import QtQuick.Dialogs 1.2 import QtQuick.Layouts 1.1 import QtQuick.Controls.Styles 1.4 import QtQuick.Window 2.0 -import "../components" as MoneroComponents +import "." as MoneroComponents +import "effects/" as MoneroEffects import "../js/Utils.js" as Utils Item { @@ -62,7 +63,9 @@ Item { errorTextLabel.text = errorText ? errorText : ""; leftPanel.enabled = false middlePanel.enabled = false - titleBar.enabled = false + + titleBar.state = "essentials" + show() root.visible = true; passwordInput.forceActiveFocus(); passwordInput.text = "" @@ -78,7 +81,8 @@ Item { inactiveOverlay.visible = false leftPanel.enabled = true middlePanel.enabled = true - titleBar.enabled = true + titleBar.state = "default" + root.visible = false; appWindow.hideBalanceForced = false; appWindow.updateBalance(); @@ -133,8 +137,8 @@ Item { leftPadding: 10 topPadding: 10 color: MoneroComponents.Style.defaultFontColor - selectionColor: MoneroComponents.Style.dimmedFontColor - selectedTextColor: MoneroComponents.Style.defaultFontColor + selectionColor: MoneroComponents.Style.textSelectionColor + selectedTextColor: MoneroComponents.Style.textSelectedColor onTextChanged: { var letter = text[passwordInput.text.length - 1]; @@ -149,19 +153,26 @@ Item { background: Rectangle { radius: 2 - border.color: Qt.rgba(255, 255, 255, 0.35) + color: MoneroComponents.Style.blackTheme ? "black" : "#A9FFFFFF" + border.color: MoneroComponents.Style.inputBorderColorInActive border.width: 1 - color: "black" + + MoneroEffects.ColorTransition { + targetObj: parent + blackColor: "black" + whiteColor: "#A9FFFFFF" + } Image { width: 26 * scaleRatio height: 26 * scaleRatio opacity: 0.7 fillMode: Image.PreserveAspectFit - source: isHidden ? "../images/eyeShow.png" : "../images/eyeHide.png" + source: isHidden ? "qrc:///images/eyeShow.png" : "qrc:///images/eyeHide.png" anchors.verticalCenter: parent.verticalCenter anchors.right: parent.right anchors.rightMargin: 20 + MouseArea { anchors.fill: parent cursorShape: Qt.PointingHandCursor diff --git a/components/PrivacyLevelSmall.qml b/components/PrivacyLevelSmall.qml index d1d0edf6..4f1f1939 100644 --- a/components/PrivacyLevelSmall.qml +++ b/components/PrivacyLevelSmall.qml @@ -28,7 +28,7 @@ // @TODO: Remove component after wizard redesign -import QtQuick 2.0 +import QtQuick 2.9 Item { id: item @@ -89,7 +89,7 @@ Item { } } - Text { + MoneroComponents.TextPlain { anchors.verticalCenter: parent.verticalCenter font.family: "Arial" font.pixelSize: 15 @@ -98,7 +98,7 @@ Item { text: qsTr("Low") + translationManager.emptyString } - Text { + MoneroComponents.TextPlain { anchors.verticalCenter: parent.verticalCenter font.family: "Arial" font.pixelSize: 15 @@ -107,7 +107,7 @@ Item { text: qsTr("Medium") + translationManager.emptyString } - Text { + MoneroComponents.TextPlain { anchors.verticalCenter: parent.verticalCenter font.family: "Arial" font.pixelSize: 15 diff --git a/components/ProcessingSplash.qml b/components/ProcessingSplash.qml index 4ff5c410..47f441b6 100644 --- a/components/ProcessingSplash.qml +++ b/components/ProcessingSplash.qml @@ -26,16 +26,18 @@ // 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.0 +import QtQuick 2.9 import QtQuick.Window 2.1 import QtQuick.Controls 1.4 import QtQuick.Layouts 1.1 +import "../components" as MoneroComponents + Rectangle { id: root - color: "white" + color: MoneroComponents.Style.blackTheme ? "white" : "transparent" visible: false - z:11 + z: 11 property alias messageText: messageTitle.text property alias heightProgressText : heightProgress.text @@ -61,12 +63,14 @@ Rectangle { anchors.leftMargin: 30 * scaleRatio anchors.rightMargin: 30 * scaleRatio + spacing: 12 + BusyIndicator { running: parent.visible Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter } - Text { + MoneroComponents.TextPlain { id: messageTitle text: "Please wait..." font { @@ -75,10 +79,12 @@ Rectangle { horizontalAlignment: Text.AlignHCenter Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter Layout.fillWidth: true + themeTransition: false + color: "black" } - Text { + MoneroComponents.TextPlain { id: heightProgress font { pixelSize: 18 * scaleRatio @@ -86,6 +92,8 @@ Rectangle { horizontalAlignment: Text.AlignHCenter Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter Layout.fillWidth: true + themeTransition: false + color: "black" } } } diff --git a/components/ProgressBar.qml b/components/ProgressBar.qml index 94447fc2..491727d5 100644 --- a/components/ProgressBar.qml +++ b/components/ProgressBar.qml @@ -26,7 +26,7 @@ // 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.0 +import QtQuick 2.9 import moneroComponents.Wallet 1.0 import "../components" as MoneroComponents @@ -46,8 +46,10 @@ Rectangle { fillLevel = progressLevel if(typeof statusTxt != "undefined" && statusTxt != "") { progressText.text = statusTxt; + progressTextValue.text = ""; } else { - progressText.text = syncText + remaining.toFixed(0); + progressText.text = syncText; + progressTextValue.text = remaining.toFixed(0); } } } @@ -59,31 +61,30 @@ Rectangle { anchors.rightMargin: 15 * scaleRatio anchors.fill: parent - Text { + MoneroComponents.TextPlain { id: progressText anchors.top: parent.top anchors.topMargin: 6 font.family: MoneroComponents.Style.fontMedium.name font.pixelSize: 13 * scaleRatio - font.bold: true - color: "white" + font.bold: MoneroComponents.Style.progressBarProgressTextBold + color: MoneroComponents.Style.defaultFontColor text: qsTr("Synchronizing %1").arg(syncType) + translationManager.emptyString height: 18 * scaleRatio } - Text { + MoneroComponents.TextPlain { id: progressTextValue anchors.top: parent.top anchors.topMargin: 6 anchors.right: parent.right font.family: MoneroComponents.Style.fontMedium.name font.pixelSize: 13 * scaleRatio - font.bold: true - color: "white" + font.bold: MoneroComponents.Style.progressBarProgressTextBold + color: MoneroComponents.Style.defaultFontColor height:18 * scaleRatio } - Rectangle { id: bar anchors.left: parent.left @@ -92,7 +93,24 @@ Rectangle { anchors.topMargin: 4 height: 8 * scaleRatio radius: 8 * scaleRatio - color: "#333333" // progressbar bg + color: MoneroComponents.Style.progressBarBackgroundColor + + states: [ + State { + name: "black"; + when: MoneroComponents.Style.blackTheme + PropertyChanges { target: bar; color: MoneroComponents.Style._b_progressBarBackgroundColor} + }, State { + name: "white"; + when: !MoneroComponents.Style.blackTheme + PropertyChanges { target: bar; color: MoneroComponents.Style._w_progressBarBackgroundColor} + } + ] + + transitions: Transition { + enabled: appWindow.themeTransition + ColorAnimation { properties: "color"; easing.type: Easing.InOutQuad; duration: 300 } + } Rectangle { id: fillRect @@ -103,7 +121,6 @@ Rectangle { property int maxWidth: bar.width * scaleRatio width: (maxWidth * fillLevel) / 100 radius: 8 - // could change color based on progressbar status; if(item.fillLevel < 99 ) color: "#FA6800" } @@ -116,7 +133,4 @@ Rectangle { } } - - - } diff --git a/components/QRCodeScanner.qml b/components/QRCodeScanner.qml index 162e6bf6..111e7ff6 100644 --- a/components/QRCodeScanner.qml +++ b/components/QRCodeScanner.qml @@ -26,7 +26,7 @@ // 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.0 +import QtQuick 2.9 import QtMultimedia 5.4 import QtQuick.Dialogs 1.2 import moneroComponents.QRCodeScanner 1.0 diff --git a/components/RadioButton.qml b/components/RadioButton.qml index 09b79107..cde2bb90 100644 --- a/components/RadioButton.qml +++ b/components/RadioButton.qml @@ -26,7 +26,7 @@ // 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.0 +import QtQuick 2.9 import QtQuick.Layouts 1.1 import "../components" as MoneroComponents @@ -41,8 +41,8 @@ Item { height: 26 * scaleRatio width: layout.width // legacy properties - property var checkedColor: "white" - property var borderColor: checked ? Qt.rgba(1, 1, 1, 0.35) : Qt.rgba(1, 1, 1, 0.25) + property var checkedColor: MoneroComponents.Style.blackTheme ? "white" : "#666666" + property var borderColor: checked ? MoneroComponents.Style.inputBorderColorActive : MoneroComponents.Style.inputBorderColorInActive function toggle(){ radioButton.checked = !radioButton.checked @@ -72,7 +72,7 @@ Item { } } - Text { + MoneroComponents.TextPlain { id: label Layout.leftMargin: (!isMobile ? 10 : 8) * scaleRatio color: MoneroComponents.Style.defaultFontColor diff --git a/components/RemoteNodeEdit.qml b/components/RemoteNodeEdit.qml index 46e9fe3c..0cec2171 100644 --- a/components/RemoteNodeEdit.qml +++ b/components/RemoteNodeEdit.qml @@ -28,7 +28,7 @@ import QtQuick.Controls 1.2 import QtQuick.Controls.Styles 1.2 -import QtQuick 2.2 +import QtQuick 2.9 import QtQuick.Layouts 1.1 import "../js/Utils.js" as Utils @@ -47,16 +47,16 @@ GridLayout { // the wizards get redesigned to the black-theme property string placeholderFontFamily: MoneroComponents.Style.fontRegular.name property bool placeholderFontBold: false - property int placeholderFontSize: 18 * scaleRatio + property int placeholderFontSize: 15 * scaleRatio property string placeholderColor: MoneroComponents.Style.defaultFontColor property real placeholderOpacity: 0.35 + property int labelFontSize: 14 * scaleRatio - property string lineEditBorderColor: Qt.rgba(0, 0, 0, 0.15) - property string lineEditBackgroundColor: "white" - property string lineEditFontColor: "black" - property int lineEditFontSize: 18 * scaleRatio - property int labelFontSize: 16 * scaleRatio - property bool lineEditFontBold: true + property string lineEditBackgroundColor: "transparent" + property string lineEditBorderColor: MoneroComponents.Style.inputBorderColorInActive + property string lineEditFontColor: MoneroComponents.Style.defaultFontColor + property bool lineEditFontBold: false + property int lineEditFontSize: 15 * scaleRatio signal editingFinished() signal textChanged() diff --git a/components/Scroll.qml b/components/Scroll.qml index 67b0c304..679eb278 100644 --- a/components/Scroll.qml +++ b/components/Scroll.qml @@ -26,7 +26,7 @@ // 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.0 +import QtQuick 2.9 import "." as MoneroComponents Item { diff --git a/components/StandardButton.qml b/components/StandardButton.qml index e9e9a92a..05ee16a0 100644 --- a/components/StandardButton.qml +++ b/components/StandardButton.qml @@ -26,7 +26,7 @@ // 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.0 +import QtQuick 2.9 import QtQuick.Layouts 1.1 import "../components" as MoneroComponents @@ -50,8 +50,7 @@ Item { implicitHeight: height implicitWidth: width - function doClick() { - // Android workaround + function doClick(){ releaseFocus(); clicked(); } @@ -64,6 +63,7 @@ Item { state: button.enabled ? "active" : "disabled" Component.onCompleted: state = state + states: [ State { name: "hover" @@ -90,7 +90,9 @@ Item { } } ] + transitions: Transition { + enabled: appWindow.themeTransition ColorAnimation { duration: 100 } } } @@ -101,15 +103,16 @@ Item { spacing: 11 * scaleRatio anchors.centerIn: parent - Text { + MoneroComponents.TextPlain { id: label font.family: MoneroComponents.Style.fontBold.name font.bold: true font.pixelSize: button.fontSize color: !buttonArea.pressed ? button.textColor : "transparent" visible: text !== "" + themeTransition: false - Text { + MoneroComponents.TextPlain { anchors.centerIn: parent color: button.textColor font.bold: label.font.bold @@ -117,6 +120,7 @@ Item { font.pixelSize: label.font.pixelSize - 1 text: label.text opacity: buttonArea.pressed ? 1 : 0 + themeTransition: false } } diff --git a/components/StandardDialog.qml b/components/StandardDialog.qml index 15069a33..ba5b198e 100644 --- a/components/StandardDialog.qml +++ b/components/StandardDialog.qml @@ -26,7 +26,7 @@ // 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.0 +import QtQuick 2.9 import QtQuick.Controls 2.0 import QtQuick.Dialogs 1.2 import QtQuick.Layouts 1.1 @@ -34,6 +34,7 @@ import QtQuick.Controls.Styles 1.4 import QtQuick.Window 2.0 import "../components" as MoneroComponents +import "effects/" as MoneroEffects Rectangle { id: root @@ -56,12 +57,18 @@ Rectangle { signal rejected() signal closeCallback(); - Image { - anchors.left: parent.left - anchors.right: parent.right - anchors.top: parent.top - anchors.bottom: parent.bottom - source: "../images/middlePanelBg.jpg" + // background + MoneroEffects.GradientBackground { + anchors.fill: parent + fallBackColor: MoneroComponents.Style.middlePanelBackgroundColor + initialStartColor: MoneroComponents.Style.middlePanelBackgroundGradientStart + initialStopColor: MoneroComponents.Style.middlePanelBackgroundGradientStop + blackColorStart: MoneroComponents.Style._b_middlePanelBackgroundGradientStart + blackColorStop: MoneroComponents.Style._b_middlePanelBackgroundGradientStop + whiteColorStart: MoneroComponents.Style._w_middlePanelBackgroundGradientStart + whiteColorStop: MoneroComponents.Style._w_middlePanelBackgroundGradientStop + start: Qt.point(0, 0) + end: Qt.point(height, width) } // Make window draggable @@ -188,11 +195,13 @@ Rectangle { height: 48 * scaleRatio color: "transparent" - Image { + MoneroEffects.ImageMask { anchors.centerIn: parent width: 16 * scaleRatio height: 16 * scaleRatio - source: "../images/close.png" + image: MoneroComponents.Style.titleBarCloseSource + color: MoneroComponents.Style.defaultFontColor + opacity: 0.75 } MouseArea { diff --git a/components/StandardDropdown.qml b/components/StandardDropdown.qml index 783d1d14..0eeab407 100644 --- a/components/StandardDropdown.qml +++ b/components/StandardDropdown.qml @@ -26,9 +26,11 @@ // 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.0 +import QtQuick 2.9 +import QtGraphicalEffects 1.0 import "../components" as MoneroComponents +import "../components/effects/" as MoneroEffects Item { id: dropdown @@ -36,9 +38,9 @@ Item { property alias dataModel: repeater.model property string shadowPressedColor property string shadowReleasedColor - property string pressedColor - property string releasedColor - property string textColor: "#FFFFFF" + property string pressedColor: MoneroComponents.Style.appWindowBorderColor + property string releasedColor: MoneroComponents.Style.titleBarButtonHoverColor + property string textColor: MoneroComponents.Style.defaultFontColor property alias currentIndex: columnid.currentIndex property bool expanded: false property int dropdownHeight: 42 @@ -81,14 +83,14 @@ Item { height: dropdown.dropdownHeight Rectangle { - color: dropdown.colorHeaderBackground + color: "transparent" border.width: dropdown.headerBorder ? 1 : 0 border.color: dropdown.colorBorder radius: 4 anchors.fill: parent } - Text { + MoneroComponents.TextPlain { id: firstColText anchors.verticalCenter: parent.verticalCenter anchors.left: parent.left @@ -97,7 +99,7 @@ Item { font.family: MoneroComponents.Style.fontRegular.name font.bold: dropdown.headerFontBold font.pixelSize: dropdown.fontHeaderSize - color: "#FFFFFF" + color: dropdown.textColor } Item { @@ -108,9 +110,18 @@ Item { width: 32 * scaleRatio Image { + id: dropdownIcon anchors.centerIn: parent - source: "../images/whiteDropIndicator.png" + source: "qrc:///images/whiteDropIndicator.png" + visible: false + } + + ColorOverlay { + source: dropdownIcon + anchors.fill: dropdownIcon + color: MoneroComponents.Style.defaultFontColor rotation: dropdown.expanded ? 180 * scaleRatio : 0 + opacity: 1 } } @@ -131,7 +142,6 @@ Item { clip: true height: dropdown.expanded ? columnid.height : 0 color: dropdown.pressedColor - //radius: 4 Rectangle { anchors.left: parent.left @@ -180,7 +190,7 @@ Item { //radius: index === repeater.count - 1 ? 4 : 0 color: itemArea.containsMouse || index === columnid.currentIndex || itemArea.containsMouse ? dropdown.releasedColor : dropdown.pressedColor - Text { + MoneroComponents.TextPlain { id: col1Text anchors.verticalCenter: parent.verticalCenter anchors.left: parent.left @@ -194,7 +204,7 @@ Item { text: qsTr(column1) + translationManager.emptyString } - Text { + MoneroComponents.TextPlain { id: col2Text anchors.verticalCenter: parent.verticalCenter anchors.right: parent.right diff --git a/components/Style.qml b/components/Style.qml index 8555cb5e..37c2f9ce 100644 --- a/components/Style.qml +++ b/components/Style.qml @@ -3,6 +3,7 @@ pragma Singleton import QtQuick 2.5 QtObject { + property bool blackTheme: true property QtObject fontMedium: FontLoader { id: _fontMedium; source: "qrc:/fonts/Roboto-Medium.ttf"; } property QtObject fontBold: FontLoader { id: _fontBold; source: "qrc:/fonts/Roboto-Bold.ttf"; } property QtObject fontLight: FontLoader { id: _fontLight; source: "qrc:/fonts/Roboto-Light.ttf"; } @@ -18,27 +19,176 @@ QtObject { property string white: "#FFFFFF" property string green: "#2EB358" property string moneroGrey: "#4C4C4C" + property string warningColor: "orange" - property string defaultFontColor: "white" - property string dimmedFontColor: "#BBBBBB" - property string lightGreyFontColor: "#DFDFDF" - property string greyFontColor: "#808080" - property string warningColor: "#963E00" - property string errorColor: "#FA6800" - property string inputBoxBackground: "black" - property string inputBoxBackgroundError: "#FFDDDD" - property string inputBoxColor: "white" - property string legacy_placeholderFontColor: "#BABABA" - property string inputBorderColorActive: Qt.rgba(255, 255, 255, 0.38) - property string inputBorderColorInActive: Qt.rgba(255, 255, 255, 0.32) - property string inputBorderColorInvalid: Qt.rgba(255, 0, 0, 0.40) + property string defaultFontColor: blackTheme ? _b_defaultFontColor : _w_defaultFontColor + property string dimmedFontColor: blackTheme ? _b_dimmedFontColor : _w_dimmedFontColor + property string lightGreyFontColor: blackTheme ? _b_lightGreyFontColor : _w_lightGreyFontColor + property string errorColor: blackTheme ? _b_errorColor : _w_errorColor + property string textSelectionColor: blackTheme ? _b_textSelectionColor : _w_textSelectionColor + property string textSelectedColor: blackTheme ? _b_textSelectedColor : _w_textSelectedColor - property string buttonBackgroundColor: "#FA6800" - property string buttonBackgroundColorHover: "#E65E00" - property string buttonBackgroundColorDisabled: "#707070" - property string buttonBackgroundColorDisabledHover: "#808080" - property string buttonTextColor: "white" - property string buttonTextColorDisabled: "black" - property string dividerColor: "white" - property real dividerOpacity: 0.20 + property string inputBoxBackground: blackTheme ? _b_inputBoxBackground : _w_inputBoxBackground + property string inputBoxBackgroundError: blackTheme ? _b_inputBoxBackgroundError : _w_inputBoxBackgroundError + property string inputBoxColor: blackTheme ? _b_inputBoxColor : _w_inputBoxColor + property string legacy_placeholderFontColor: blackTheme ? _b_legacy_placeholderFontColor : _w_legacy_placeholderFontColor + property string inputBorderColorActive: blackTheme ? _b_inputBorderColorActive : _w_inputBorderColorActive + property string inputBorderColorInActive: blackTheme ? _b_inputBorderColorInActive : _w_inputBorderColorInActive + property string inputBorderColorInvalid: blackTheme ? _b_inputBorderColorInvalid : _w_inputBorderColorInvalid + + property string buttonBackgroundColor: blackTheme ? _b_buttonBackgroundColor : _w_buttonBackgroundColor + property string buttonBackgroundColorHover: blackTheme ? _b_buttonBackgroundColorHover : _w_buttonBackgroundColorHover + property string buttonBackgroundColorDisabled: blackTheme ? _b_buttonBackgroundColorDisabled : _w_buttonBackgroundColorDisabled + property string buttonBackgroundColorDisabledHover: blackTheme ? _b_buttonBackgroundColorDisabledHover : _w_buttonBackgroundColorDisabledHover + property string buttonInlineBackgroundColor: blackTheme ? _b_buttonInlineBackgroundColor : _w_buttonInlineBackgroundColor + property string buttonTextColor: blackTheme ? _b_buttonTextColor : _w_buttonTextColor + property string buttonTextColorDisabled: blackTheme ? _b_buttonTextColorDisabled : _w_buttonTextColorDisabled + property string dividerColor: blackTheme ? _b_dividerColor : _w_dividerColor + property real dividerOpacity: blackTheme ? _b_dividerOpacity : _w_dividerOpacity + + property string titleBarBackgroundGradientStart: blackTheme ? _b_titleBarBackgroundGradientStart : _w_titleBarBackgroundGradientStart + property string titleBarBackgroundGradientStop: blackTheme ? _b_titleBarBackgroundGradientStop : _w_titleBarBackgroundGradientStop + property string titleBarBackgroundBorderColor: blackTheme ? _b_titleBarBackgroundBorderColor : _w_titleBarBackgroundBorderColor + property string titleBarLogoSource: blackTheme ? _b_titleBarLogoSource : _w_titleBarLogoSource + property string titleBarMinimizeSource: blackTheme ? _b_titleBarMinimizeSource : _w_titleBarMinimizeSource + property string titleBarExpandSource: blackTheme ? _b_titleBarExpandSource : _w_titleBarExpandSource + property string titleBarFullscreenSource: blackTheme ? _b_titleBarFullscreenSource : _w_titleBarFullscreenSource + property string titleBarCloseSource: blackTheme ? _b_titleBarCloseSource : _w_titleBarCloseSource + property string titleBarButtonHoverColor: blackTheme ? _b_titleBarButtonHoverColor : _w_titleBarButtonHoverColor + + property string wizardBackgroundGradientStart: blackTheme ? _b_wizardBackgroundGradientStart : _w_wizardBackgroundGradientStart + property string middlePanelBackgroundGradientStart: blackTheme ? _b_middlePanelBackgroundGradientStart : _w_middlePanelBackgroundGradientStart + property string middlePanelBackgroundGradientStop: blackTheme ? _b_middlePanelBackgroundGradientStop : _w_middlePanelBackgroundGradientStop + property string middlePanelBackgroundColor: blackTheme ? _b_middlePanelBackgroundColor : _w_middlePanelBackgroundColor + property string menuButtonFallbackBackgroundColor: blackTheme ? _b_menuButtonFallbackBackgroundColor : _w_menuButtonFallbackBackgroundColor + property string menuButtonGradientStart: blackTheme ? _b_menuButtonGradientStart : _w_menuButtonGradientStart + property string menuButtonGradientStop: blackTheme ? _b_menuButtonGradientStop : _w_menuButtonGradientStop + property string menuButtonTextColor: blackTheme ? _b_menuButtonTextColor : _w_menuButtonTextColor + property string menuButtonImageRightColorActive: blackTheme ? _b_menuButtonImageRightColorActive : _w_menuButtonImageRightColorActive + property string menuButtonImageRightColor: blackTheme ? _b_menuButtonImageRightColor : _w_menuButtonImageRightColor + property string menuButtonImageRightSource: blackTheme ? _b_menuButtonImageRightSource : _w_menuButtonImageRightSource + property string menuButtonImageDotArrowSource: blackTheme ? _b_menuButtonImageDotArrowSource : _w_menuButtonImageDotArrowSource + property string inlineButtonTextColor: blackTheme ? _b_inlineButtonTextColor : _w_inlineButtonTextColor + property string inlineButtonBorderColor: blackTheme ? _b_inlineButtonBorderColor : _w_inlineButtonBorderColor + property string appWindowBackgroundColor: blackTheme ? _b_appWindowBackgroundColor : _w_appWindowBackgroundColor + property string appWindowBorderColor: blackTheme ? _b_appWindowBorderColor : _w_appWindowBorderColor + property bool progressBarProgressTextBold: blackTheme ? _b_progressBarProgressTextBold : _w_progressBarProgressTextBold + property string progressBarBackgroundColor: blackTheme ? _b_progressBarBackgroundColor : _w_progressBarBackgroundColor + property string leftPanelBackgroundGradientStart: blackTheme ? _b_leftPanelBackgroundGradientStart : _w_leftPanelBackgroundGradientStart + property string leftPanelBackgroundGradientStop: blackTheme ? _b_leftPanelBackgroundGradientStop : _w_leftPanelBackgroundGradientStop + property string historyHeaderTextColor: blackTheme ? _b_historyHeaderTextColor : _w_historyHeaderTextColor + + property string _b_defaultFontColor: "white" + property string _b_dimmedFontColor: "#BBBBBB" + property string _b_lightGreyFontColor: "#DFDFDF" + property string _b_errorColor: "#FA6800" + property string _b_textSelectionColor: "#BBBBBB" + property string _b_textSelectedColor: "white" + + property string _b_inputBoxBackground: "black" + property string _b_inputBoxBackgroundError: "#FFDDDD" + property string _b_inputBoxColor: "white" + property string _b_legacy_placeholderFontColor: "#BABABA" + property string _b_inputBorderColorActive: Qt.rgba(255, 255, 255, 0.38) + property string _b_inputBorderColorInActive: Qt.rgba(255, 255, 255, 0.32) + property string _b_inputBorderColorInvalid: Qt.rgba(255, 0, 0, 0.40) + + property string _b_buttonBackgroundColor: "#FA6800" + property string _b_buttonBackgroundColorHover: "#E65E00" + property string _b_buttonBackgroundColorDisabled: "#707070" + property string _b_buttonBackgroundColorDisabledHover: "#808080" + property string _b_buttonInlineBackgroundColor: "#707070" + property string _b_buttonTextColor: "white" + property string _b_buttonTextColorDisabled: "black" + property string _b_dividerColor: "white" + property real _b_dividerOpacity: 0.20 + + property string _b_titleBarBackgroundGradientStart: "#262626"; + property string _b_titleBarBackgroundGradientStop: "#191919" + property string _b_titleBarBackgroundBorderColor: "#2f2f2f" + property string _b_titleBarLogoSource: "qrc:///images/titlebarLogo.png" + property string _b_titleBarMinimizeSource: "qrc:///images/minimize.svg" + property string _b_titleBarExpandSource: "qrc:///images/sidebar.svg" + property string _b_titleBarFullscreenSource: "qrc:///images/fullscreen.svg" + property string _b_titleBarCloseSource: "qrc:///images/close.svg" + property string _b_titleBarButtonHoverColor: "#10FFFFFF" + + property string _b_wizardBackgroundGradientStart: "#1e1e1e" + property string _b_middlePanelBackgroundGradientStart: "#232323" + property string _b_middlePanelBackgroundGradientStop: "#101010" + property string _b_middlePanelBackgroundColor: "#181818" + property string _b_menuButtonFallbackBackgroundColor: "#09FFFFFF" + property string _b_menuButtonGradientStart: "#11FFFFFF" + property string _b_menuButtonGradientStop: "#00000000" + property string _b_menuButtonTextColor: "white" + property string _b_menuButtonImageRightColorActive: "white" + property string _b_menuButtonImageRightColor: "white" + property string _b_menuButtonImageRightSource: "qrc:///images/right.svg" + property string _b_menuButtonImageDotArrowSource: "qrc:///images/arrow-right-medium-white.png" + property string _b_inlineButtonTextColor: "black" + property string _b_inlineButtonBorderColor: "black" + property string _b_appWindowBackgroundColor: "white" + property string _b_appWindowBorderColor: "#313131" + property bool _b_progressBarProgressTextBold: true + property string _b_progressBarBackgroundColor: "#24FFFFFF" + property string _b_leftPanelBackgroundGradientStart: "#222222" + property string _b_leftPanelBackgroundGradientStop: "#1a1a1a" + property string _b_historyHeaderTextColor: "#C0C0C0" + + property string _w_defaultFontColor: "black" + property string _w_dimmedFontColor: "#3f3f3f" + property string _w_lightGreyFontColor: "#515151" + property string _w_errorColor: "#FA6800" + property string _w_textSelectionColor: "#BBBBBB" + property string _w_textSelectedColor: "black" + + property string _w_inputBoxBackground: "white" + property string _w_inputBoxBackgroundError: "#FFDDDD" + property string _w_inputBoxColor: "black" + property string _w_legacy_placeholderFontColor: "#BABABA" + property string _w_inputBorderColorActive: Qt.rgba(0, 0, 0, 0.30) + property string _w_inputBorderColorInActive: Qt.rgba(0, 0, 0, 0.16) + property string _w_inputBorderColorInvalid: Qt.rgba(255, 0, 0, 0.50) + + property string _w_buttonBackgroundColor: "#FA6800" + property string _w_buttonBackgroundColorHover: "#E65E00" + property string _w_buttonBackgroundColorDisabled: "#bbbbbb" + property string _w_buttonBackgroundColorDisabledHover: "#D1D1D1" + property string _w_buttonInlineBackgroundColor: "#bbbbbb" + property string _w_buttonTextColor: "white" + property string _w_buttonTextColorDisabled: "black" + property string _w_dividerColor: "black" + property real _w_dividerOpacity: 0.20 + + property string _w_titleBarBackgroundGradientStart: "#fcfcfc" + property string _w_titleBarBackgroundGradientStop: "#FBFBFB" + property string _w_titleBarBackgroundBorderColor: "#DEDEDE" + property string _w_titleBarLogoSource: "qrc:///images/themes/white/titlebarLogo.png" + property string _w_titleBarMinimizeSource: "qrc:///images/themes/white/minimize.svg" + property string _w_titleBarExpandSource: "qrc:///images/themes/white/expand.svg" + property string _w_titleBarFullscreenSource: "qrc:///images/themes/white/fullscreen.svg" + property string _w_titleBarCloseSource: "qrc:///images/themes/white/close.svg" + property string _w_titleBarButtonHoverColor: "#11000000" + + property string _w_wizardBackgroundGradientStart: "white" + property string _w_middlePanelBackgroundGradientStart: "white" + property string _w_middlePanelBackgroundGradientStop: "#ededed" + property string _w_middlePanelBackgroundColor: "#f5f5f5" + property string _w_menuButtonFallbackBackgroundColor: "#09000000" + property string _w_menuButtonGradientStart: "#08000000" + property string _w_menuButtonGradientStop: "#10FFFFFF" + property string _w_menuButtonTextColor: "#787878" + property string _w_menuButtonImageRightSource: "qrc:///images/right.svg" + property string _w_menuButtonImageRightColorActive: "#FA6800" + property string _w_menuButtonImageRightColor: "#808080" + property string _w_menuButtonImageDotArrowSource: "qrc:///images/arrow-right-medium-white.png" + property string _w_inlineButtonTextColor: "white" + property string _w_inlineButtonBorderColor: "transparent" + property string _w_appWindowBackgroundColor: "black" + property string _w_appWindowBorderColor: "#dedede" + property bool _w_progressBarProgressTextBold: false + property string _w_progressBarBackgroundColor: "#24000000" + property string _w_leftPanelBackgroundGradientStart: "white" + property string _w_leftPanelBackgroundGradientStop: "#f5f5f5" + property string _w_historyHeaderTextColor: "#515151" } diff --git a/components/TableDropdown.qml b/components/TableDropdown.qml new file mode 100644 index 00000000..50a296a7 --- /dev/null +++ b/components/TableDropdown.qml @@ -0,0 +1,237 @@ +// Copyright (c) 2014-2018, The Monero Project +// +// All rights reserved. +// +// Redistribution and use in source and binary forms, with or without modification, are +// permitted provided that the following conditions are met: +// +// 1. Redistributions of source code must retain the above copyright notice, this list of +// conditions and the following disclaimer. +// +// 2. Redistributions in binary form must reproduce the above copyright notice, this list +// of conditions and the following disclaimer in the documentation and/or other +// materials provided with the distribution. +// +// 3. Neither the name of the copyright holder nor the names of its contributors may be +// used to endorse or promote products derived from this software without specific +// prior written permission. +// +// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY +// EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF +// MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL +// THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, +// PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS +// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, +// 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.9 + +Item { + id: dropdown + property bool expanded: false + property alias dataModel: repeater.model + signal collapsed() + signal optionClicked(int option) + width: 72 + height: 37 + + onExpandedChanged: if(expanded) appWindow.currentItem = dropdown + function hide() { dropdown.expanded = false } + function containsPoint(px, py) { + if(px < 0) + return false + if(px > width) + return false + if(py < 0) + return false + if(py > height + dropArea.height) + return false + return true + } + + Item { + id: head + anchors.fill: parent + + Rectangle { + anchors.left: parent.left + anchors.right: parent.right + height: parent.height - 1 + y: dropdown.expanded || dropArea.height > 0 ? 0 : 1 + //radius: 3 + color: dropdown.expanded || dropArea.height > 0 ? "#888888" : "#DBDBDB" + } + + Rectangle { + anchors.left: parent.left + anchors.right: parent.right + height: parent.height - 1 + y: dropdown.expanded || dropArea.height > 0 ? 1 : 0 + //radius: 3 + color: dropdown.expanded || dropArea.height > 0 ? "#DBDBDB" : "#F0EEEE" + } + + Rectangle { + anchors.left: parent.left + anchors.bottom: parent.bottom + height: 3 + width: 3 + color: "#DBDBDB" + visible: dropdown.expanded || dropArea.height > 0 + } + + Rectangle { + anchors.right: parent.right + anchors.bottom: parent.bottom + height: 3 + width: 3 + color: "#DBDBDB" + visible: dropdown.expanded || dropArea.height > 0 + } + + Image { + anchors.verticalCenter: parent.verticalCenter + anchors.left: parent.left + anchors.leftMargin: 10 + source: "qrc:///images/tableOptions.png" + } + + Rectangle { + anchors.centerIn: parent + anchors.horizontalCenterOffset: 1 + height: 23 + width: 1 + color: dropdown.expanded || dropArea.height > 0 ? "#FFFFFF" : "#DBDBDB" + } + + Image { + anchors.verticalCenter: parent.verticalCenter + anchors.right: parent.right + anchors.rightMargin: 10 + source: "qrc:///images/dropIndicator.png" + } + } + + Timer { + id: timer + interval: 50 + repeat: true + running: false + onTriggered: { + if(((appWindow.toolTip.visible && !appWindow.toolTip.containsMouse) || !appWindow.toolTip.visible) && !mouseArea.containsMouse) { + appWindow.toolTip.visible = false + dropdown.expanded = false + currentIndex = -1 + timer.stop() + } + } + } + + MouseArea { + id: mouseArea + anchors.left: head.left + anchors.right: head.right + anchors.top: head.top + height: head.height + dropArea.height + hoverEnabled: true + onEntered: dropdown.expanded = true + + property int currentIndex: -1 + onMouseYChanged: { + if(mouseY > head.height) { + var posY = parseInt((mouseY - head.height) / 30) + currentIndex = posY + } else { + currentIndex = -1 + } + } + + onClicked: { + optionClicked(currentIndex) + } + + onExited: timer.start() + preventStealing: true + z: 1 + + Item { + id: dropArea + anchors.left: parent.left + anchors.right: parent.right + y: head.height + height: dropdown.expanded ? column.height : 0 + onHeightChanged: if(height === 0) dropdown.collapsed() + clip: true + + Behavior on height { + NumberAnimation { duration: 100; easing.type: Easing.InQuad } + } + + Column { + id: column + anchors.left: parent.left + anchors.right: parent.right + anchors.top: parent.top + + Repeater { + id: repeater + + // Workaround for translations in listElements. All translated strings needs to be listed in this file. + property string stringCopy: qsTr("<b>Copy address to clipboard</b>") + translationManager.emptyString + property string stringSend: qsTr("<b>Send to this address</b>") + translationManager.emptyString + property string stringFind: qsTr("<b>Find similar transactions</b>") + translationManager.emptyString + property string stringRemove: qsTr("<b>Remove from address book</b>") + translationManager.emptyString + + delegate: Rectangle { + id: delegate + property bool containsMouse: index === mouseArea.currentIndex + anchors.left: parent.left + anchors.right: parent.right + height: 30 + color: containsMouse ? "#F0EEEE" : "#DBDBDB" + //radius: index === repeater.count - 1 ? 5 : 0 + Rectangle { + anchors.left: parent.left + anchors.top: parent.top + width: 5 + height: 5 + color: delegate.color + } + + Rectangle { + anchors.right: parent.right + anchors.top: parent.top + width: 5 + height: 5 + color: delegate.color + } + + Image { + anchors.verticalCenter: parent.verticalCenter + anchors.left: parent.left + anchors.leftMargin: 10 + source: icon + } + + onContainsMouseChanged: { + if(containsMouse) { + var pos = rootItem.mapFromItem(delegate, 30, -25) + appWindow.toolTip.text = qsTr(name) + translationManager.emptyString + appWindow.toolTip.x = pos.x - appWindow.toolTip.width +// if(appWindow.toolTip.height > 30) +// pos.y -= appWindow.toolTip.height - 30 + appWindow.toolTip.y = pos.y + appWindow.toolTip.visible = true + appWindow.toolTip.z = 3 + + } + } + + } + } + } + } + } +} diff --git a/components/TextBlock.qml b/components/TextBlock.qml index aec20892..9d1d0cf4 100644 --- a/components/TextBlock.qml +++ b/components/TextBlock.qml @@ -1,11 +1,11 @@ -import QtQuick 2.0 +import QtQuick 2.9 import "../components" as MoneroComponents TextEdit { color: MoneroComponents.Style.defaultFontColor font.family: MoneroComponents.Style.fontRegular.name - selectionColor: MoneroComponents.Style.dimmedFontColor + selectionColor: MoneroComponents.Style.textSelectionColor wrapMode: Text.Wrap readOnly: true selectByMouse: true diff --git a/components/TextPlain.qml b/components/TextPlain.qml new file mode 100644 index 00000000..2bc05042 --- /dev/null +++ b/components/TextPlain.qml @@ -0,0 +1,28 @@ +import QtQuick 2.9 + +import "." as MoneroComponents +import "effects/" as MoneroEffects + +Text { + // When using this component, please note that if you use a color different + // than `defaultFontColor`, you are required to also define `themeTransitionXColor`. + // If you do not set these the component will receive the wrong color after a transition. + // If you do not want to set these, use `themeTransition: false`. + id: root + property bool themeTransition: true + property string themeTransitionBlackColor: "" + property string themeTransitionWhiteColor: "" + font.family: MoneroComponents.Style.fontMedium.name + font.bold: false + font.pixelSize: 14 * scaleRatio + textFormat: Text.PlainText + + MoneroEffects.ColorTransition { + enabled: root.themeTransition + themeTransition: root.themeTransition + targetObj: root + duration: 750 + blackColor: root.themeTransitionBlackColor !== "" ? root.themeTransitionBlackColor : MoneroComponents.Style._b_defaultFontColor + whiteColor: root.themeTransitionWhiteColor !== "" ? root.themeTransitionWhiteColor : MoneroComponents.Style._w_defaultFontColor + } +} diff --git a/components/TextPlainArea.qml b/components/TextPlainArea.qml new file mode 100644 index 00000000..700e674f --- /dev/null +++ b/components/TextPlainArea.qml @@ -0,0 +1,48 @@ +import QtQuick 2.9 +import QtQuick.Controls 2.0 + +import "." as MoneroComponents + +TextArea { + id: textArea + property bool themeTransition: true + property string colorWhiteTheme: "" + property string colorBlackTheme: "" + color: MoneroComponents.Style.defaultFontColor + font.family: MoneroComponents.Style.fontRegular.name + font.pixelSize: 14 * scaleRatio + selectByMouse: false + wrapMode: Text.WordWrap; + textMargin: 0 + leftPadding: 0 + topPadding: 0 + readOnly: true + textFormat: TextEdit.PlainText + + states: [ + State { + name: "black"; + when: textArea.themeTransition && MoneroComponents.Style.blackTheme + PropertyChanges { + target: textArea + color: { + return textArea.colorBlackTheme ? textArea.colorBlackTheme : MoneroComponents.Style._b_defaultFontColor + } + } + }, State { + name: "white"; + when: textArea.themeTransition && !MoneroComponents.Style.blackTheme + PropertyChanges { + target: textArea + color: { + return textArea.colorWhiteTheme ? textArea.colorWhiteTheme : MoneroComponents.Style._w_defaultFontColor + } + } + } + ] + + transitions: Transition { + enabled: appWindow.themeTransition + ColorAnimation { properties: "color"; easing.type: Easing.InOutQuad; duration: 750 } + } +} diff --git a/components/TipItem.qml b/components/TipItem.qml index 6cb1a58f..2fe39597 100644 --- a/components/TipItem.qml +++ b/components/TipItem.qml @@ -26,9 +26,11 @@ // 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.Window 2.1 +import "../components" as MoneroComponents + Window { property alias text: content.text property alias containsMouse: tipArea.containsMouse @@ -55,10 +57,10 @@ Window { anchors.top: parent.bottom anchors.left: parent.left anchors.leftMargin: 5 - source: "../images/tip.png" + source: "qrc:///images/tip.png" } - Text { + MoneroComponents.TextPlain { id: content anchors.horizontalCenter: parent.horizontalCenter y: 6 diff --git a/components/TitleBar.qml b/components/TitleBar.qml index be1ef37c..e48feae8 100644 --- a/components/TitleBar.qml +++ b/components/TitleBar.qml @@ -26,304 +26,320 @@ // 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.5 +import QtQuick 2.9 import QtQuick.Window 2.0 -import QtQuick.Layouts 1.1 +import QtGraphicalEffects 1.0 +import QtQuick.Layouts 1.2 -Rectangle { - id: titleBar - - height: { - if(!customDecorations || isMobile){ - return 0; - } - - if(small) return 38 * scaleRatio; - else return 50 * scaleRatio; - } - y: -height - z: 1 +import FontAwesome 1.0 +import "." as MoneroComponents +import "effects/" as MoneroEffects - property string title +Rectangle { + id: root property int mouseX: 0 - property bool containsMouse: false property bool basicButtonVisible: false property bool customDecorations: persistentSettings.customDecorations - property bool showWhatIsButton: true - property bool showMinimizeButton: false - property bool showMaximizeButton: false + property bool showMinimizeButton: true + property bool showMaximizeButton: true property bool showCloseButton: true - property bool showMoneroLogo: false - property bool small: false - property alias titleBarGradientImageOpacity: titleBarGradientImage.opacity - property bool orange: false - property string buttonHoverColor: "#262626" - property string buttonHoverColorOrange: "#44FFFFFF" + + height: { + if(!persistentSettings.customDecorations || isMobile) return 0; + return 50 * scaleRatio; + } + + z: 1 + color: "transparent" signal closeClicked signal maximizeClicked signal minimizeClicked + signal languageClicked signal goToBasicVersion(bool yes) - Item { - // Background gradient - width: parent.width - height: parent.height - z: parent.z + 1 - - Image { - id: titleBarGradientImage - visible: !titleBar.orange - anchors.fill: parent - height: titleBar.height - width: titleBar.width - source: "../images/titlebarGradient.jpg" - } - - Rectangle { - visible: titleBar.orange - width: parent.width - height: parent.height - color: "#ff6600" - } - } - - Item { - id: titlebarlogo - width: 125 - height: parent.height - anchors.centerIn: parent - visible: customDecorations - z: parent.z + 1 - - Image { - visible: !isMobile && showMoneroLogo && !titleBar.orange - anchors.left: parent.left - anchors.top: parent.top - anchors.topMargin: 11 - width: 125 - height: 28 - source: "../images/titlebarLogo.png" + state: "default" + states: [ + State { + name: "default"; + PropertyChanges { target: btnSidebarCollapse; visible: true} + PropertyChanges { target: btnLanguageToggle; visible: true} + }, State { + // show only theme switcher and window controls + name: "essentials"; + PropertyChanges { target: btnSidebarCollapse; visible: false} + PropertyChanges { target: btnLanguageToggle; visible: false} } + ] - Image { - visible: !isMobile && showMoneroLogo && titleBar.orange - anchors.left: parent.left - anchors.top: parent.top - anchors.topMargin: 11 - width: 132 - height: 22 - source: "../images/moneroLogo_white.png" - } - } - - Label { - id: titleLabel - visible: !showMoneroLogo && customDecorations && titleBar.title !== '' - anchors.centerIn: parent - fontSize: 18 - text: titleBar.title - z: parent.z + 1 + MoneroEffects.GradientBackground { + anchors.fill: parent + duration: 300 + fallBackColor: MoneroComponents.Style.middlePanelBackgroundColor + initialStartColor: MoneroComponents.Style.titleBarBackgroundGradientStart + initialStopColor: MoneroComponents.Style.titleBarBackgroundGradientStop + blackColorStart: MoneroComponents.Style._b_titleBarBackgroundGradientStart + blackColorStop: MoneroComponents.Style._b_titleBarBackgroundGradientStop + whiteColorStart: MoneroComponents.Style._w_titleBarBackgroundGradientStart + whiteColorStop: MoneroComponents.Style._w_titleBarBackgroundGradientStop + start: Qt.point(width, 0) + end: Qt.point(0, 0) } RowLayout { - anchors.left: parent.left - anchors.top: parent.top - width: 40 - height: parent.height - spacing: 0 z: parent.z + 2 + spacing: 0 + anchors.fill: parent + // collapse sidebar Rectangle { + id: btnSidebarCollapse + visible: root.basicButtonVisible + color: "transparent" + Layout.preferredWidth: parent.height Layout.preferredHeight: parent.height - Layout.preferredWidth: Layout.preferredHeight - - id: goToBasicVersionButton - property bool containsMouse: titleBar.mouseX >= x && titleBar.mouseX <= x + width - property bool checked: false - color: "transparent" - height: titleBar.height - width: height - visible: !titleBar.orange && titleBar.basicButtonVisible - Image { - width: 14 + MoneroEffects.ImageMask { + anchors.verticalCenter: parent.verticalCenter + anchors.horizontalCenter: parent.horizontalCenter height: 14 - anchors.centerIn: parent - source: "../images/expand.png" + width: 14 + image: MoneroComponents.Style.titleBarExpandSource + color: MoneroComponents.Style.defaultFontColor + fontAwesomeFallbackIcon: FontAwesome.cube + fontAwesomeFallbackSize: 14 + fontAwesomeFallbackOpacity: MoneroComponents.Style.blackTheme ? 1.0 : 0.9 + opacity: 0.75 } MouseArea { - id: basicMouseArea - hoverEnabled: true anchors.fill: parent + hoverEnabled: true cursorShape: Qt.PointingHandCursor - onEntered: { goToBasicVersionButton.color = titleBar.orange ? titleBar.buttonHoverColorOrange : titleBar.buttonHoverColor } - onExited: goToBasicVersionButton.color = "transparent"; - onClicked: { - releaseFocus() - parent.checked = !parent.checked - titleBar.goToBasicVersion(leftPanel.visible) - } + onEntered: parent.color = MoneroComponents.Style.titleBarButtonHoverColor + onExited: parent.color = "transparent" + onClicked: root.goToBasicVersion(leftPanel.visible) } } // language selection Rectangle { + id: btnLanguageToggle + color: "transparent" + Layout.preferredWidth: parent.height Layout.preferredHeight: parent.height - Layout.preferredWidth: Layout.preferredHeight - visible: !titleBar.orange && persistentSettings.customDecorations - - id: languageSelection - property bool containsMouse: titleBar.mouseX >= x && titleBar.mouseX <= x + width - property bool checked: false - color: "transparent" - height: titleBar.height - width: height - z: parent.z + 2 - Image { - width: 14 - height: 14 - anchors.centerIn: parent - source: "../images/langFlagGrey.png" + Text { + text: FontAwesome.globe + font.family: FontAwesome.fontFamily + font.pixelSize: 16 * scaleRatio + color: MoneroComponents.Style.defaultFontColor + anchors.verticalCenter: parent.verticalCenter + anchors.horizontalCenter: parent.horizontalCenter + opacity: 0.75 } MouseArea { + anchors.fill: parent hoverEnabled: true + cursorShape: Qt.PointingHandCursor + onEntered: parent.color = MoneroComponents.Style.titleBarButtonHoverColor + onExited: parent.color = "transparent" + onClicked: root.languageClicked() + } + } + + // switch theme + Rectangle { + color: "transparent" + Layout.preferredWidth: parent.height + Layout.preferredHeight: parent.height + + Text { + text: MoneroComponents.Style.blackTheme ? FontAwesome.lightbulbO : FontAwesome.moonO + font.family: FontAwesome.fontFamily + font.pixelSize: 16 * scaleRatio + color: MoneroComponents.Style.defaultFontColor + anchors.verticalCenter: parent.verticalCenter + anchors.horizontalCenter: parent.horizontalCenter + opacity: 0.75 + } + + MouseArea { anchors.fill: parent + hoverEnabled: true cursorShape: Qt.PointingHandCursor - onEntered: parent.color = "#262626"; - onExited: parent.color = "transparent"; + onEntered: parent.color = MoneroComponents.Style.titleBarButtonHoverColor + onExited: parent.color = "transparent" onClicked: { - releaseFocus(); - appWindow.toggleLanguageView(); + MoneroComponents.Style.blackTheme = !MoneroComponents.Style.blackTheme; + persistentSettings.blackTheme = MoneroComponents.Style.blackTheme; } } } - } - Row { - id: row - anchors.right: parent.right - anchors.top: parent.top - anchors.bottom: parent.bottom - visible: parent.customDecorations - z: parent.z + 2 + Item { + // make dummy space when hiding buttons when titlebar + // state is 'essentials' in order for the + // monero logo to still be centered + Layout.preferredWidth: parent.height * 2 // amount of buttons we hide + Layout.preferredHeight: parent.height + visible: root.state == "essentials" + } + // monero logo + Item { + Layout.fillWidth: true + Layout.preferredHeight: parent.height + + Image { + id: imgLogo + width: 125 + height: 28 + + anchors.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter + + source: MoneroComponents.Style.titleBarLogoSource + visible: { + if(!isOpenGL) return true; + if(!MoneroComponents.Style.blackTheme) return true; + return false; + } + } + + Colorize { + visible: isOpenGL && MoneroComponents.Style.blackTheme + anchors.fill: imgLogo + source: imgLogo + saturation: 0.0 + } + } + + // minimize Rectangle { - id: minimizeButton - visible: showMinimizeButton - anchors.top: parent.top - anchors.bottom: parent.bottom - width: 42 color: "transparent" + visible: root.showMinimizeButton + Layout.preferredWidth: parent.height + Layout.preferredHeight: parent.height - Image { - anchors.centerIn: parent - source: "../images/minimize.png" + MoneroEffects.ImageMask { + anchors.bottom: parent.bottom + anchors.bottomMargin: 18 + anchors.horizontalCenter: parent.horizontalCenter + height: 3 + width: 15 + image: MoneroComponents.Style.titleBarMinimizeSource + color: MoneroComponents.Style.defaultFontColor + fontAwesomeFallbackIcon: FontAwesome.minus + fontAwesomeFallbackSize: 18 + fontAwesomeFallbackOpacity: MoneroComponents.Style.blackTheme ? 0.8 : 0.6 + opacity: 0.75 } MouseArea { - id: minimizeArea anchors.fill: parent hoverEnabled: true cursorShape: Qt.PointingHandCursor - onEntered: { - if(titleBar.orange){ - minimizeButton.color = titleBar.buttonHoverColorOrange; - } else { - minimizeButton.color = titleBar.buttonHoverColor; - } - } - onExited: minimizeButton.color = "transparent"; - onClicked: minimizeClicked(); + onEntered: parent.color = MoneroComponents.Style.titleBarButtonHoverColor + onExited: parent.color = "transparent" + onClicked: root.minimizeClicked(); } } + // maximize Rectangle { - id: maximizeButton - visible: showMaximizeButton - anchors.top: parent.top - anchors.bottom: parent.bottom - width: 42 - color: "transparent"; + id: test + visible: root.showMaximizeButton + color: "transparent" + Layout.preferredWidth: parent.height + Layout.preferredHeight: parent.height Image { - anchors.centerIn: parent - height: 16 - width: 16 - source: appWindow.visibility === Window.FullScreen ? "../images/backToWindowIcon.png" : - "../images/fullscreen.png" + anchors.verticalCenter: parent.verticalCenter + anchors.horizontalCenter: parent.horizontalCenter + source: MoneroComponents.Style.titleBarFullscreenSource + sourceSize.width: 16 + sourceSize.height: 16 + smooth: true + mipmap: true + opacity: 0.75 + rotation: appWindow.visibility === Window.FullScreen ? 180 : 0 } MouseArea { - id: maximizeArea + id: buttonArea anchors.fill: parent hoverEnabled: true cursorShape: Qt.PointingHandCursor - onEntered: { - if(titleBar.orange){ - maximizeButton.color = titleBar.buttonHoverColorOrange; - } else { - maximizeButton.color = titleBar.buttonHoverColor; - } - } - onExited: maximizeButton.color = "transparent"; - onClicked: maximizeClicked(); + onEntered: parent.color = MoneroComponents.Style.titleBarButtonHoverColor + onExited: parent.color = "transparent" + onClicked: root.maximizeClicked(); } } + // close Rectangle { - id: closeButton - visible: showCloseButton - anchors.top: parent.top - anchors.bottom: parent.bottom - width: 42 - color: containsMouse ? "#E04343" : "#00000000" + visible: root.showCloseButton + color: "transparent" + Layout.preferredWidth: parent.height + Layout.preferredHeight: parent.height - Image { - anchors.centerIn: parent - width: 16 + MoneroEffects.ImageMask { + anchors.verticalCenter: parent.verticalCenter + anchors.horizontalCenter: parent.horizontalCenter height: 16 - source: "../images/close.png" + width: 16 + image: MoneroComponents.Style.titleBarCloseSource + color: MoneroComponents.Style.defaultFontColor + fontAwesomeFallbackIcon: FontAwesome.timesRectangle + fontAwesomeFallbackSize: 18 + fontAwesomeFallbackOpacity: MoneroComponents.Style.blackTheme ? 0.8 : 0.6 + opacity: 0.75 } MouseArea { anchors.fill: parent - onClicked: closeClicked(); hoverEnabled: true cursorShape: Qt.PointingHandCursor - onEntered: { - if(titleBar.orange){ - closeButton.color = titleBar.buttonHoverColorOrange; - } else { - closeButton.color = titleBar.buttonHoverColor; - } - } - onExited: closeButton.color = "transparent"; + onEntered: parent.color = MoneroComponents.Style.titleBarButtonHoverColor + onExited: parent.color = "transparent" + onClicked: root.closeClicked(); } } } - // window borders Rectangle { - visible: !titleBar.orange + z: parent.z + 3 anchors.bottom: parent.bottom - anchors.right: parent.right anchors.left: parent.left - height: 1 - color: "#2F2F2F" - z: parent.z + 1 + anchors.right: parent.right + height: MoneroComponents.Style.blackTheme ? 1 : 1 + color: MoneroComponents.Style.titleBarBackgroundBorderColor + + MoneroEffects.ColorTransition { + targetObj: parent + blackColor: MoneroComponents.Style._b_titleBarBackgroundBorderColor + whiteColor: MoneroComponents.Style._w_titleBarBackgroundBorderColor + } } - Rectangle { - visible: titleBar.small && !titleBar.orange - anchors.top: parent.top - anchors.right: parent.right - anchors.left: parent.left - height: 1 - color: "#2F2F2F" - z: parent.z + 1 + MouseArea { + enabled: persistentSettings.customDecorations + property var previousPosition + anchors.fill: parent + propagateComposedEvents: true + onPressed: previousPosition = globalCursor.getPosition() + onPositionChanged: { + if (pressedButtons == Qt.LeftButton) { + var pos = globalCursor.getPosition() + var dx = pos.x - previousPosition.x + var dy = pos.y - previousPosition.y + + appWindow.x += dx + appWindow.y += dy + previousPosition = pos + } + } } } diff --git a/components/WarningBox.qml b/components/WarningBox.qml index bc85975c..9c7a1a91 100644 --- a/components/WarningBox.qml +++ b/components/WarningBox.qml @@ -1,4 +1,4 @@ -import QtQuick 2.7 +import QtQuick 2.9 import QtQuick.Layouts 1.1 import QtQuick.Controls 2.0 @@ -13,7 +13,7 @@ Rectangle { Layout.fillWidth: true Layout.preferredHeight: warningLayout.height - color: "#09FFFFFF" + color: MoneroComponents.Style.titleBarButtonHoverColor radius: 4 border.color: MoneroComponents.Style.inputBorderColorInActive border.width: 1 @@ -34,7 +34,7 @@ Rectangle { Layout.leftMargin: 18 * scaleRatio Layout.topMargin: 12 * scaleRatio Layout.bottomMargin: 12 * scaleRatio - source: "../images/warning.png" + source: "qrc:///images/warning.png" } TextArea { @@ -55,8 +55,8 @@ Rectangle { readOnly: true onLinkActivated: root.linkActivated(); - selectionColor: MoneroComponents.Style.dimmedFontColor - selectedTextColor: MoneroComponents.Style.defaultFontColor + selectionColor: MoneroComponents.Style.textSelectionColor + selectedTextColor: MoneroComponents.Style.textSelectedColor } } } diff --git a/components/effects/ColorTransition.qml b/components/effects/ColorTransition.qml new file mode 100644 index 00000000..b73af906 --- /dev/null +++ b/components/effects/ColorTransition.qml @@ -0,0 +1,58 @@ +// Copyright (c) 2014-2019, The Monero Project +// +// All rights reserved. +// +// Redistribution and use in source and binary forms, with or without modification, are +// permitted provided that the following conditions are met: +// +// 1. Redistributions of source code must retain the above copyright notice, this list of +// conditions and the following disclaimer. +// +// 2. Redistributions in binary form must reproduce the above copyright notice, this list +// of conditions and the following disclaimer in the documentation and/or other +// materials provided with the distribution. +// +// 3. Neither the name of the copyright holder nor the names of its contributors may be +// used to endorse or promote products derived from this software without specific +// prior written permission. +// +// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY +// EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF +// MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL +// THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, +// PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS +// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, +// 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.9 +import QtGraphicalEffects 1.0 + +import "../" as MoneroComponents + +Item { + id: root + property var targetObj + property string blackColor: "" + property string whiteColor: "" + property int duration: 300 + property bool themeTransition: true + + states: [ + State { + name: "black"; + when: MoneroComponents.Style.blackTheme && root.themeTransition + PropertyChanges { target: root.targetObj; color: root.blackColor} + }, State { + name: "white"; + when: !MoneroComponents.Style.blackTheme && root.themeTransition + PropertyChanges { target: root.targetObj; color: root.whiteColor} + } + ] + + transitions: Transition { + enabled: appWindow.themeTransition + ColorAnimation { properties: "color"; easing.type: Easing.InOutQuad; duration: root.duration } + } +} diff --git a/components/effects/GradientBackground.qml b/components/effects/GradientBackground.qml new file mode 100644 index 00000000..bb106896 --- /dev/null +++ b/components/effects/GradientBackground.qml @@ -0,0 +1,107 @@ +// Copyright (c) 2014-2019, The Monero Project +// +// All rights reserved. +// +// Redistribution and use in source and binary forms, with or without modification, are +// permitted provided that the following conditions are met: +// +// 1. Redistributions of source code must retain the above copyright notice, this list of +// conditions and the following disclaimer. +// +// 2. Redistributions in binary form must reproduce the above copyright notice, this list +// of conditions and the following disclaimer in the documentation and/or other +// materials provided with the distribution. +// +// 3. Neither the name of the copyright holder nor the names of its contributors may be +// used to endorse or promote products derived from this software without specific +// prior written permission. +// +// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY +// EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF +// MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL +// THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, +// PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS +// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, +// 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.9 +import QtGraphicalEffects 1.0 + +import "../" as MoneroComponents + +Item { + id: root + property string fallBackColor: "" + property string blackColorStart: "" + property string blackColorStop: "" + property string whiteColorStart: "" + property string whiteColorStop: "" + property string initialStartColor: "" + property string initialStopColor: "" + property double posStart: 0.1 + property double posStop: 1.0 + property int duration: 300 + property variant start + property variant end + anchors.fill: parent + + // background software renderer + Rectangle { + visible: !isOpenGL + anchors.fill: parent + color: root.fallBackColor + } + + // background opengl + LinearGradient { + visible: isOpenGL + anchors.fill: parent + start: root.start + end: root.end + gradient: Gradient { + GradientStop { + id: gradientStart + position: root.posStart + color: root.initialStartColor + } + GradientStop { + id: gradientStop + position: root.posStop + color: root.initialStopColor + } + } + + states: [ + State { + name: "black"; + when: isOpenGL && MoneroComponents.Style.blackTheme + PropertyChanges { + target: gradientStart + color: root.blackColorStart + } + PropertyChanges { + target: gradientStop + color: root.blackColorStop + } + }, State { + name: "white"; + when: isOpenGL && !MoneroComponents.Style.blackTheme + PropertyChanges { + target: gradientStart + color: root.whiteColorStart + } + PropertyChanges { + target: gradientStop + color: root.whiteColorStop + } + } + ] + + transitions: Transition { + enabled: appWindow.themeTransition + ColorAnimation { properties: "color"; easing.type: Easing.InOutQuad; duration: root.duration } + } + } +} diff --git a/components/effects/ImageMask.qml b/components/effects/ImageMask.qml new file mode 100644 index 00000000..df24f738 --- /dev/null +++ b/components/effects/ImageMask.qml @@ -0,0 +1,84 @@ +// Copyright (c) 2014-2019, The Monero Project +// +// All rights reserved. +// +// Redistribution and use in source and binary forms, with or without modification, are +// permitted provided that the following conditions are met: +// +// 1. Redistributions of source code must retain the above copyright notice, this list of +// conditions and the following disclaimer. +// +// 2. Redistributions in binary form must reproduce the above copyright notice, this list +// of conditions and the following disclaimer in the documentation and/or other +// materials provided with the distribution. +// +// 3. Neither the name of the copyright holder nor the names of its contributors may be +// used to endorse or promote products derived from this software without specific +// prior written permission. +// +// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY +// EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF +// MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL +// THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, +// PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS +// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, +// 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.9 +import QtGraphicalEffects 1.0 + +import "../" as MoneroComponents +import FontAwesome 1.0 + +Item { + // Use this component to color+opacity change images with transparency (svg/png) + // Does not work in low graphics mode, use fontAwesome fallback option. + + id: root + property string image: "" + property string color: "" + property bool fontAwesomeFallbackEnabled: true + property var fontAwesomeFallbackIcon: "" + property int fontAwesomeFallbackSize: 16 + property double fontAwesomeFallbackOpacity: 0.8 + property string fontAwesomeFallbackColor: MoneroComponents.Style.defaultFontColor + + property alias fontAwesomeFallback: fontAwesomeFallback + property alias svgMask: svgMask + property alias imgMockColor: imgMockColor + + width: 0 + height: 0 + + Image { + id: svgMask + source: root.image + sourceSize.width: root.width + sourceSize.height: root.height + smooth: true + mipmap: true + visible: false + } + + ColorOverlay { + id: imgMockColor + anchors.fill: root + source: svgMask + color: root.color + visible: isOpenGL + } + + Text { + id: fontAwesomeFallback + visible: !isOpenGL && root.fontAwesomeFallback + text: !isOpenGL ? root.fontAwesomeFallbackIcon : "" + font.family: FontAwesome.fontFamily + font.pixelSize: root.fontAwesomeFallbackSize + color: root.fontAwesomeFallbackColor + anchors.verticalCenter: parent.verticalCenter + anchors.horizontalCenter: parent.horizontalCenter + opacity: root.fontAwesomeFallbackOpacity + } +} |