diff --git a/LeftPanel.qml b/LeftPanel.qml index c48f62d1..6cb6059e 100644 --- a/LeftPanel.qml +++ b/LeftPanel.qml @@ -1,4 +1,4 @@ -// Copyright (c) 2014-2018, The Monero Project +// Copyright (c) 2014-2019, The Monero Project // // All rights reserved. // @@ -26,13 +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.2 +import QtQuick 2.9 import QtQuick.Layouts 1.1 import QtGraphicalEffects 1.0 import moneroComponents.Wallet 1.0 import moneroComponents.NetworkType 1.0 import moneroComponents.Clipboard 1.0 + import "components" as MoneroComponents +import "components/effects/" as MoneroEffects Rectangle { id: panel @@ -86,13 +88,18 @@ Rectangle { anchors.bottom: parent.bottom anchors.top: parent.top - Image { - anchors.left: parent.left - anchors.right: parent.right - anchors.top: parent.top - height: panel.height - source: "images/leftPanelBg.jpg" - z: 1 + MoneroEffects.GradientBackground { + anchors.fill: parent + fallBackColor: MoneroComponents.Style.middlePanelBackgroundColor + initialStartColor: MoneroComponents.Style.leftPanelBackgroundGradientStart + initialStopColor: MoneroComponents.Style.leftPanelBackgroundGradientStop + blackColorStart: MoneroComponents.Style._b_leftPanelBackgroundGradientStart + blackColorStop: MoneroComponents.Style._b_leftPanelBackgroundGradientStop + whiteColorStart: MoneroComponents.Style._w_leftPanelBackgroundGradientStart + whiteColorStop: MoneroComponents.Style._w_leftPanelBackgroundGradientStop + posStart: 0.6 + start: Qt.point(0, 0) + end: Qt.point(height, width) } // card with monero logo @@ -107,7 +114,6 @@ Rectangle { anchors.topMargin: (persistentSettings.customDecorations)? 50 : 0 RowLayout { - visible: true Item { anchors.left: parent.left anchors.top: parent.top @@ -118,12 +124,27 @@ Rectangle { width: 260 * scaleRatio Image { - width: 260; height: 170 + id: card + visible: !isOpenGL || MoneroComponents.Style.blackTheme + width: 260 + height: 170 fillMode: Image.PreserveAspectFit - source: "images/card-background.png" + source: "qrc:///images/card-background.png" } - Text { + DropShadow { + visible: isOpenGL && !MoneroComponents.Style.blackTheme + anchors.fill: card + horizontalOffset: 3 + verticalOffset: 3 + radius: 10.0 + samples: 15 + color: "#3B000000" + source: card + cached: true + } + + MoneroComponents.TextPlain { id: testnetLabel visible: persistentSettings.nettype != NetworkType.MAINNET text: (persistentSettings.nettype == NetworkType.TESTNET ? qsTr("Testnet") : qsTr("Stagenet")) + translationManager.emptyString @@ -134,9 +155,10 @@ Rectangle { font.bold: true font.pixelSize: 12 color: "#f33434" + themeTransition: false } - Text { + MoneroComponents.TextPlain { id: viewOnlyLabel visible: viewOnly text: qsTr("View Only") + translationManager.emptyString @@ -147,6 +169,7 @@ Rectangle { font.pixelSize: 12 font.bold: true color: "#ff9323" + themeTransition: false } Rectangle { @@ -164,7 +187,7 @@ Rectangle { anchors.horizontalCenter: parent.horizontalCenter height: 16 * scaleRatio width: 13 * scaleRatio - source: "../images/logout.png" + source: "qrc:///images/logout.png" } MouseArea{ @@ -190,9 +213,10 @@ Rectangle { height: 490 * scaleRatio width: 50 * scaleRatio - Text { + MoneroComponents.TextPlain { visible: !isMobile id: balanceText + themeTransition: false anchors.left: parent.left anchors.leftMargin: 20 anchors.top: parent.top @@ -228,9 +252,10 @@ Rectangle { } } - Text { + MoneroComponents.TextPlain { id: unlockedBalanceText visible: true + themeTransition: false anchors.left: parent.left anchors.leftMargin: 20 anchors.top: parent.top @@ -270,17 +295,20 @@ Rectangle { id: unlockedBalanceLabel visible: true text: qsTr("Unlocked balance") + translationManager.emptyString + color: "white" fontSize: 14 anchors.left: parent.left anchors.leftMargin: 20 anchors.top: parent.top anchors.topMargin: 110 + themeTransition: false } MoneroComponents.Label { visible: !isMobile id: balanceLabel text: qsTr("Balance") + translationManager.emptyString + color: "white" fontSize: 14 anchors.left: parent.left anchors.leftMargin: 20 @@ -288,6 +316,7 @@ Rectangle { anchors.topMargin: 60 elide: Text.ElideRight textWidth: 238 + themeTransition: false } Item { //separator anchors.left: parent.left @@ -307,7 +336,6 @@ Rectangle { anchors.top: (isMobile)? parent.top : column1.bottom color: "transparent" - Flickable { id:flicker contentHeight: menuColumn.height @@ -317,7 +345,6 @@ Rectangle { clip: true Column { - id: menuColumn anchors.left: parent.left anchors.right: parent.right @@ -326,12 +353,10 @@ Rectangle { property var previousButton: transferButton // top border - Rectangle { + MoneroComponents.MenuButtonDivider { anchors.left: parent.left anchors.right: parent.right anchors.leftMargin: 16 - color: "#313131" - height: 1 } // ------------- Account tab --------------- @@ -349,13 +374,11 @@ Rectangle { } } - Rectangle { + MoneroComponents.MenuButtonDivider { visible: accountButton.present anchors.left: parent.left anchors.right: parent.right anchors.leftMargin: 16 - color: "#313131" - height: 1 } // ------------- Transfer tab --------------- @@ -373,13 +396,11 @@ Rectangle { } } - Rectangle { + MoneroComponents.MenuButtonDivider { visible: transferButton.present anchors.left: parent.left anchors.right: parent.right anchors.leftMargin: 16 - color: "#313131" - height: 1 } // ------------- AddressBook tab --------------- @@ -399,13 +420,11 @@ Rectangle { } } - Rectangle { + MoneroComponents.MenuButtonDivider { visible: addressBookButton.present anchors.left: parent.left anchors.right: parent.right anchors.leftMargin: 16 - color: "#313131" - height: 1 } // ------------- Receive tab --------------- @@ -422,13 +441,12 @@ Rectangle { panel.receiveClicked() } } - Rectangle { + + MoneroComponents.MenuButtonDivider { visible: receiveButton.present anchors.left: parent.left anchors.right: parent.right anchors.leftMargin: 16 - color: "#313131" - height: 1 } // ------------- Merchant tab --------------- @@ -449,13 +467,11 @@ Rectangle { } } - Rectangle { + MoneroComponents.MenuButtonDivider { visible: merchantButton.present && appWindow.walletMode >= 2 anchors.left: parent.left anchors.right: parent.right anchors.leftMargin: 16 - color: "#313131" - height: 1 } // ------------- History tab --------------- @@ -473,13 +489,12 @@ Rectangle { panel.historyClicked() } } - Rectangle { + + MoneroComponents.MenuButtonDivider { visible: historyButton.present anchors.left: parent.left anchors.right: parent.right anchors.leftMargin: 16 - color: "#313131" - height: 1 } // ------------- Advanced tab --------------- @@ -497,13 +512,11 @@ Rectangle { } } - Rectangle { + MoneroComponents.MenuButtonDivider { visible: advancedButton.present && appWindow.walletMode >= 2 anchors.left: parent.left anchors.right: parent.right anchors.leftMargin: 16 - color: "#313131" - height: 1 } // ------------- Mining tab --------------- @@ -523,14 +536,13 @@ Rectangle { } } - Rectangle { + MoneroComponents.MenuButtonDivider { visible: miningButton.present && appWindow.walletMode >= 2 anchors.left: parent.left anchors.right: parent.right anchors.leftMargin: 16 - color: miningButton.checked || settingsButton.checked ? "#1C1C1C" : "#313131" - height: 1 } + // ------------- TxKey tab --------------- MoneroComponents.MenuButton { id: txkeyButton @@ -547,14 +559,14 @@ Rectangle { panel.txkeyClicked() } } - Rectangle { + + MoneroComponents.MenuButtonDivider { visible: txkeyButton.present && appWindow.walletMode >= 2 anchors.left: parent.left anchors.right: parent.right anchors.leftMargin: 16 - color: "#313131" - height: 1 } + // ------------- Shared RingDB tab --------------- MoneroComponents.MenuButton { id: sharedringdbButton @@ -571,16 +583,14 @@ Rectangle { panel.sharedringdbClicked() } } - Rectangle { + + MoneroComponents.MenuButtonDivider { visible: sharedringdbButton.present && appWindow.walletMode >= 2 anchors.left: parent.left anchors.right: parent.right anchors.leftMargin: 16 - color: "#313131" - height: 1 } - // ------------- Sign/verify tab --------------- MoneroComponents.MenuButton { id: signButton @@ -597,14 +607,14 @@ Rectangle { panel.signClicked() } } - Rectangle { + + MoneroComponents.MenuButtonDivider { visible: signButton.present && appWindow.walletMode >= 2 anchors.left: parent.left anchors.right: parent.right anchors.leftMargin: 16 - color: "#313131" - height: 1 } + // ------------- Settings tab --------------- MoneroComponents.MenuButton { id: settingsButton @@ -619,14 +629,14 @@ Rectangle { panel.settingsClicked() } } - Rectangle { + + MoneroComponents.MenuButtonDivider { visible: settingsButton.present anchors.left: parent.left anchors.right: parent.right anchors.leftMargin: 16 - color: "#313131" - height: 1 } + // ------------- Sign/verify tab --------------- MoneroComponents.MenuButton { id: keysButton @@ -643,13 +653,12 @@ Rectangle { panel.keysClicked() } } - Rectangle { - visible: settingsButton.present && appWindow.walletMode >= 2 + + MoneroComponents.MenuButtonDivider { + visible: settingsButton.present && settingsButton.checked && appWindow.walletMode >= 2 anchors.left: parent.left anchors.right: parent.right anchors.leftMargin: 16 - color: "#313131" - height: 1 } } // Column @@ -697,16 +706,5 @@ Rectangle { visible: networkStatus.connected height: 62 * scaleRatio } - } // menuRect - - - - // indicate disabled state -// Desaturate { -// anchors.fill: parent -// source: parent -// desaturation: panel.enabled ? 0.0 : 1.0 -// } - - + } } diff --git a/MiddlePanel.qml b/MiddlePanel.qml index 3643740b..015e53a8 100644 --- a/MiddlePanel.qml +++ b/MiddlePanel.qml @@ -28,18 +28,18 @@ import QtQml 2.0 -import QtQuick 2.2 +import QtQuick 2.9 import QtQuick.Controls 2.0 import QtQuick.Controls 1.4 import QtQuick.Layouts 1.1 import QtGraphicalEffects 1.0 import moneroComponents.Wallet 1.0 -import "components" as MoneroComponents import "./pages" import "./pages/settings" import "./pages/merchant" -import "components" as MoneroComponents +import "./components" as MoneroComponents +import "./components/effects/" as MoneroEffects Rectangle { id: root @@ -54,7 +54,6 @@ Rectangle { property int minHeight: (appWindow.height > 800) ? appWindow.height : 800 * scaleRatio property alias contentHeight: mainFlickable.contentHeight property alias flickable: mainFlickable -// property int headerHeight: header.height property Transfer transferView: Transfer { } property Receive receiveView: Receive { } @@ -82,10 +81,18 @@ Rectangle { anchors.fill: parent } - Image { - anchors.fill: parent + MoneroEffects.GradientBackground { visible: currentView !== merchantView - source: "../images/middlePanelBg.jpg" + 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) } onCurrentViewChanged: { @@ -249,11 +256,28 @@ Rectangle { // border Rectangle { + id: borderLeft + visible: middlePanel.state !== "Merchant" anchors.top: styledRow.bottom anchors.bottom: parent.bottom anchors.left: parent.left width: 1 - color: "#313131" + color: MoneroComponents.Style.appWindowBorderColor + + MoneroEffects.ColorTransition { + targetObj: parent + blackColor: MoneroComponents.Style._b_appWindowBorderColor + whiteColor: MoneroComponents.Style._w_appWindowBorderColor + } + } + + // border shadow + Image { + source: "qrc:///images/middlePanelShadow.png" + width: 12 + anchors.top: parent.top + anchors.bottom: parent.bottom + anchors.left: borderLeft.right } /* connect "payment" click */ diff --git a/RightPanel.qml b/RightPanel.qml index 03635409..43bca34c 100644 --- a/RightPanel.qml +++ b/RightPanel.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.2 +import QtQuick 2.9 import QtQuick.Controls 1.2 import QtQuick.Controls.Styles 1.2 import QtGraphicalEffects 1.0 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 = '', + trMiddle = '', + trEnd = ""; + + return '' + + (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 : "") + + "
" + + 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 +MoneroEffects.ImageMask { + id: button + z: 666 + color: MoneroComponents.Style.defaultFontColor + image: "" signal clicked(var mouse) - id: button - width: parent.height - height: parent.height - anchors.right: parent.right - anchors.top: parent.top - anchors.bottom: parent.bottom - - Image { - id: buttonImage - source: "" - x : (parent.width - width) / 2 - y : (parent.height - height) / 2 - z: 100 - } - 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("Copy address to clipboard") + translationManager.emptyString + property string stringSend: qsTr("Send to this address") + translationManager.emptyString + property string stringFind: qsTr("Find similar transactions") + translationManager.emptyString + property string stringRemove: qsTr("Remove from address book") + 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 + +import FontAwesome 1.0 +import "." as MoneroComponents +import "effects/" as MoneroEffects Rectangle { - id: titleBar - - height: { - if(!customDecorations || isMobile){ - return 0; - } - - if(small) return 38 * scaleRatio; - else return 50 * scaleRatio; - } - y: -height - z: 1 - - property string title + 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" + 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} } + ] - 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" - } - - 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 { - 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" - } - - MouseArea { - hoverEnabled: true - anchors.fill: parent - cursorShape: Qt.PointingHandCursor - onEntered: parent.color = "#262626"; - onExited: parent.color = "transparent"; - onClicked: { - releaseFocus(); - appWindow.toggleLanguageView(); - } - } - } - } - - Row { - id: row - anchors.right: parent.right - anchors.top: parent.top - anchors.bottom: parent.bottom - visible: parent.customDecorations - z: parent.z + 2 - - Rectangle { - id: minimizeButton - visible: showMinimizeButton - anchors.top: parent.top - anchors.bottom: parent.bottom - width: 42 + id: btnLanguageToggle color: "transparent" + Layout.preferredWidth: parent.height + Layout.preferredHeight: parent.height - Image { - anchors.centerIn: parent - source: "../images/minimize.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 { - 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.languageClicked() } } + // switch theme Rectangle { - id: maximizeButton - visible: showMaximizeButton - anchors.top: parent.top - anchors.bottom: parent.bottom - width: 42 - color: "transparent"; + 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" + 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 { - id: maximizeArea anchors.fill: parent hoverEnabled: true cursorShape: Qt.PointingHandCursor - onEntered: { - if(titleBar.orange){ - maximizeButton.color = titleBar.buttonHoverColorOrange; - } else { - maximizeButton.color = titleBar.buttonHoverColor; - } + onEntered: parent.color = MoneroComponents.Style.titleBarButtonHoverColor + onExited: parent.color = "transparent" + onClicked: { + MoneroComponents.Style.blackTheme = !MoneroComponents.Style.blackTheme; + persistentSettings.blackTheme = MoneroComponents.Style.blackTheme; } - onExited: maximizeButton.color = "transparent"; - onClicked: maximizeClicked(); } } - Rectangle { - id: closeButton - visible: showCloseButton - anchors.top: parent.top - anchors.bottom: parent.bottom - width: 42 - color: containsMouse ? "#E04343" : "#00000000" + 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 { - anchors.centerIn: parent - width: 16 - height: 16 - source: "../images/close.png" + 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 { + color: "transparent" + visible: root.showMinimizeButton + Layout.preferredWidth: parent.height + Layout.preferredHeight: parent.height + + 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 { 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.minimizeClicked(); + } + } + + // maximize + Rectangle { + id: test + visible: root.showMaximizeButton + color: "transparent" + Layout.preferredWidth: parent.height + Layout.preferredHeight: parent.height + + Image { + 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: buttonArea + anchors.fill: parent + hoverEnabled: true + cursorShape: Qt.PointingHandCursor + onEntered: parent.color = MoneroComponents.Style.titleBarButtonHoverColor + onExited: parent.color = "transparent" + onClicked: root.maximizeClicked(); + } + } + + // close + Rectangle { + visible: root.showCloseButton + color: "transparent" + Layout.preferredWidth: parent.height + Layout.preferredHeight: parent.height + + MoneroEffects.ImageMask { + anchors.verticalCenter: parent.verticalCenter + anchors.horizontalCenter: parent.horizontalCenter + height: 16 + 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 + hoverEnabled: true + cursorShape: Qt.PointingHandCursor + 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 + } +} diff --git a/fonts/FontAwesome/FontAwesome.qml b/fonts/FontAwesome/FontAwesome.qml index 6d978cf6..136f8a6d 100644 --- a/fonts/FontAwesome/FontAwesome.qml +++ b/fonts/FontAwesome/FontAwesome.qml @@ -1,5 +1,5 @@ pragma Singleton -import QtQuick 2.0 +import QtQuick 2.9 Object { diff --git a/fonts/FontAwesome/Object.qml b/fonts/FontAwesome/Object.qml index 3e2c6cf2..8e4738d5 100644 --- a/fonts/FontAwesome/Object.qml +++ b/fonts/FontAwesome/Object.qml @@ -1,4 +1,4 @@ -import QtQuick 2.0 +import QtQuick 2.9 QtObject { id: object diff --git a/images/arrow-right-in-circle-outline-medium-white.svg b/images/arrow-right-in-circle-outline-medium-white.svg new file mode 100644 index 00000000..256b2ddd --- /dev/null +++ b/images/arrow-right-in-circle-outline-medium-white.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/images/check-white.svg b/images/check-white.svg new file mode 100644 index 00000000..179be07c --- /dev/null +++ b/images/check-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/clipboard.png b/images/clipboard.png deleted file mode 100755 index 8ab3d8de..00000000 Binary files a/images/clipboard.png and /dev/null differ diff --git a/images/clipboard@2x.png b/images/clipboard@2x.png deleted file mode 100755 index 02e2ec6d..00000000 Binary files a/images/clipboard@2x.png and /dev/null differ diff --git a/images/close.png b/images/close.png deleted file mode 100644 index 3371918d..00000000 Binary files a/images/close.png and /dev/null differ diff --git a/images/close.svg b/images/close.svg new file mode 100644 index 00000000..a06c9bb0 --- /dev/null +++ b/images/close.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/images/close@2x.png b/images/close@2x.png deleted file mode 100755 index ad41e91a..00000000 Binary files a/images/close@2x.png and /dev/null differ diff --git a/images/collapseRightPanel.png b/images/collapseRightPanel.png deleted file mode 100644 index b099c073..00000000 Binary files a/images/collapseRightPanel.png and /dev/null differ diff --git a/images/copy.svg b/images/copy.svg new file mode 100644 index 00000000..c8c6c34d --- /dev/null +++ b/images/copy.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/images/copyToClipboard.png b/images/copyToClipboard.png deleted file mode 100644 index 69774fb0..00000000 Binary files a/images/copyToClipboard.png and /dev/null differ diff --git a/images/dropdownCopy.png b/images/dropdownCopy.png deleted file mode 100644 index 134fb0d5..00000000 Binary files a/images/dropdownCopy.png and /dev/null differ diff --git a/images/dropdownCopy@2x.png b/images/dropdownCopy@2x.png deleted file mode 100644 index aba6a2ce..00000000 Binary files a/images/dropdownCopy@2x.png and /dev/null differ diff --git a/images/edit.svg b/images/edit.svg new file mode 100644 index 00000000..43d36a47 --- /dev/null +++ b/images/edit.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/images/editIcon.png b/images/editIcon.png deleted file mode 100644 index 6dfca388..00000000 Binary files a/images/editIcon.png and /dev/null differ diff --git a/images/editIcon@2x.png b/images/editIcon@2x.png deleted file mode 100644 index d6f5118c..00000000 Binary files a/images/editIcon@2x.png and /dev/null differ diff --git a/images/expand.png b/images/expand.png deleted file mode 100644 index db644f49..00000000 Binary files a/images/expand.png and /dev/null differ diff --git a/images/expand@2x.png b/images/expand@2x.png deleted file mode 100755 index 70e3ba41..00000000 Binary files a/images/expand@2x.png and /dev/null differ diff --git a/images/fullscreen.png b/images/fullscreen.png deleted file mode 100644 index 0b989cec..00000000 Binary files a/images/fullscreen.png and /dev/null differ diff --git a/images/fullscreen.svg b/images/fullscreen.svg new file mode 100644 index 00000000..25280d24 --- /dev/null +++ b/images/fullscreen.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/images/fullscreen@2x.png b/images/fullscreen@2x.png deleted file mode 100755 index 7d11b471..00000000 Binary files a/images/fullscreen@2x.png and /dev/null differ diff --git a/images/middlePanelShadow.png b/images/middlePanelShadow.png new file mode 100644 index 00000000..db89a0d5 Binary files /dev/null and b/images/middlePanelShadow.png differ diff --git a/images/minimize.png b/images/minimize.png deleted file mode 100644 index 4347c558..00000000 Binary files a/images/minimize.png and /dev/null differ diff --git a/images/minimize.svg b/images/minimize.svg new file mode 100644 index 00000000..33359a0d --- /dev/null +++ b/images/minimize.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/minimize@2x.png b/images/minimize@2x.png deleted file mode 100755 index 6a98596f..00000000 Binary files a/images/minimize@2x.png and /dev/null differ diff --git a/images/rename.png b/images/rename.png deleted file mode 100755 index 25a9bf64..00000000 Binary files a/images/rename.png and /dev/null differ diff --git a/images/rename@2x.png b/images/rename@2x.png deleted file mode 100755 index 308a2809..00000000 Binary files a/images/rename@2x.png and /dev/null differ diff --git a/images/right.png b/images/right.png deleted file mode 100644 index b20a03b6..00000000 Binary files a/images/right.png and /dev/null differ diff --git a/images/right.svg b/images/right.svg new file mode 100644 index 00000000..3087e689 --- /dev/null +++ b/images/right.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/right@2x.png b/images/right@2x.png deleted file mode 100755 index 50bbae73..00000000 Binary files a/images/right@2x.png and /dev/null differ diff --git a/images/settings_local.png b/images/settings_local.png deleted file mode 100644 index 6d25a9e3..00000000 Binary files a/images/settings_local.png and /dev/null differ diff --git a/images/settings_local.svg b/images/settings_local.svg new file mode 100644 index 00000000..2159cd2a --- /dev/null +++ b/images/settings_local.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/images/settings_local@2x.png b/images/settings_local@2x.png deleted file mode 100755 index 8679878a..00000000 Binary files a/images/settings_local@2x.png and /dev/null differ diff --git a/images/settings_navbar_side.png b/images/settings_navbar_side.png deleted file mode 100755 index b57695fb..00000000 Binary files a/images/settings_navbar_side.png and /dev/null differ diff --git a/images/settings_navbar_side_active.png b/images/settings_navbar_side_active.png deleted file mode 100755 index ec711852..00000000 Binary files a/images/settings_navbar_side_active.png and /dev/null differ diff --git a/images/settings_remote.png b/images/settings_remote.png deleted file mode 100644 index ed7087de..00000000 Binary files a/images/settings_remote.png and /dev/null differ diff --git a/images/settings_remote.svg b/images/settings_remote.svg new file mode 100644 index 00000000..d7fc5f54 --- /dev/null +++ b/images/settings_remote.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/images/settings_remote@2x.png b/images/settings_remote@2x.png deleted file mode 100755 index 462af75f..00000000 Binary files a/images/settings_remote@2x.png and /dev/null differ diff --git a/images/sidebar.svg b/images/sidebar.svg new file mode 100644 index 00000000..c475bc66 --- /dev/null +++ b/images/sidebar.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/images/themes/white/Monero-Logo.svg b/images/themes/white/Monero-Logo.svg new file mode 100644 index 00000000..ad4d4154 --- /dev/null +++ b/images/themes/white/Monero-Logo.svg @@ -0,0 +1,65 @@ + + + + diff --git a/images/themes/white/close.svg b/images/themes/white/close.svg new file mode 100644 index 00000000..a888809d --- /dev/null +++ b/images/themes/white/close.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/images/themes/white/expand.svg b/images/themes/white/expand.svg new file mode 100644 index 00000000..065fbbe4 --- /dev/null +++ b/images/themes/white/expand.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/images/themes/white/fullscreen.svg b/images/themes/white/fullscreen.svg new file mode 100644 index 00000000..d732d086 --- /dev/null +++ b/images/themes/white/fullscreen.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/images/themes/white/leftPanelBg.jpg b/images/themes/white/leftPanelBg.jpg new file mode 100755 index 00000000..d3fc1ee5 Binary files /dev/null and b/images/themes/white/leftPanelBg.jpg differ diff --git a/images/themes/white/middlePanelBg.jpg b/images/themes/white/middlePanelBg.jpg new file mode 100755 index 00000000..a0cfebca Binary files /dev/null and b/images/themes/white/middlePanelBg.jpg differ diff --git a/images/themes/white/minimize.svg b/images/themes/white/minimize.svg new file mode 100644 index 00000000..16d66987 --- /dev/null +++ b/images/themes/white/minimize.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/themes/white/question.svg b/images/themes/white/question.svg new file mode 100644 index 00000000..fce612d6 --- /dev/null +++ b/images/themes/white/question.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/images/themes/white/titlebarLogo.png b/images/themes/white/titlebarLogo.png new file mode 100644 index 00000000..af86b716 Binary files /dev/null and b/images/themes/white/titlebarLogo.png differ diff --git a/images/themes/white/titlebarLogo@2x.png b/images/themes/white/titlebarLogo@2x.png new file mode 100755 index 00000000..fedc59f7 Binary files /dev/null and b/images/themes/white/titlebarLogo@2x.png differ diff --git a/images/titlebarGradient.jpg b/images/titlebarGradient.jpg deleted file mode 100755 index 34b35316..00000000 Binary files a/images/titlebarGradient.jpg and /dev/null differ diff --git a/main.cpp b/main.cpp index 77791cc7..79c48abf 100644 --- a/main.cpp +++ b/main.cpp @@ -74,6 +74,8 @@ bool isIOS = false; bool isAndroid = false; bool isWindows = false; bool isDesktop = false; +bool isOpenGL = true; +bool isLinux = false; int main(int argc, char *argv[]) { @@ -87,8 +89,14 @@ int main(int argc, char *argv[]) #endif #ifdef Q_OS_WIN bool isWindows = true; +#elif defined(Q_OS_LINUX) + bool isLinux = true; #endif + // detect low graphics mode (start-low-graphics-mode.bat) + if(qgetenv("QMLSCENE_DEVICE") == "softwarecontext") + isOpenGL = false; + // disable "QApplication: invalid style override passed" warning if (isDesktop) putenv((char*)"QT_STYLE_OVERRIDE=fusion"); #ifdef Q_OS_LINUX @@ -269,6 +277,8 @@ int main(int argc, char *argv[]) engine.rootContext()->setContextProperty("isWindows", isWindows); engine.rootContext()->setContextProperty("isIOS", isIOS); engine.rootContext()->setContextProperty("isAndroid", isAndroid); + engine.rootContext()->setContextProperty("isOpenGL", isOpenGL); + engine.rootContext()->setContextProperty("isLinux", isLinux); engine.rootContext()->setContextProperty("screenWidth", geo.width()); engine.rootContext()->setContextProperty("screenHeight", geo.height()); diff --git a/main.qml b/main.qml index 229979e5..38700ec4 100644 --- a/main.qml +++ b/main.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.2 +import QtQuick 2.9 import QtQuick.Window 2.0 import QtQuick.Controls 1.1 import QtQuick.Controls.Styles 1.1 @@ -39,6 +39,8 @@ import moneroComponents.NetworkType 1.0 import "components" import "components" as MoneroComponents +import "components/effects" as MoneroEffects +import "pages/merchant" as MoneroMerchant import "wizard" import "js/Utils.js" as Utils import "js/Windows.js" as Windows @@ -87,6 +89,8 @@ ApplicationWindow { property alias viewState: rootItem.state property string prevSplashText; property bool splashDisplayedBeforeButtonRequest; + property int appEpoch: Math.floor((new Date).getTime() / 1000) + property bool themeTransition: false property string remoteNodeService: { // support user-defined remote node aggregators @@ -1019,12 +1023,22 @@ ApplicationWindow { splash.messageText = message splash.heightProgressText = "" } - splash.show() + + leftPanel.enabled = false; + middlePanel.enabled = false; + titleBar.enabled = false; + inactiveOverlay.visible = true; + splash.show(); } function hideProcessingSplash() { console.log("Hiding processing splash") - splash.close() + splash.close(); + + leftPanel.enabled = true + middlePanel.enabled = true + titleBar.enabled = true + inactiveOverlay.visible = false; } // close wallet and show wizard @@ -1056,9 +1070,9 @@ ApplicationWindow { objectName: "appWindow" visible: true -// width: screenWidth //rightPanelExpanded ? 1269 : 1269 - 300 -// height: 900 //300//maxWindowHeight; - color: "#FFFFFF" + width: screenWidth > 980 ? 980 : 800 + height: screenHeight > maxWindowHeight ? maxWindowHeight : 700 + color: MoneroComponents.Style.appWindowBackgroundColor flags: persistentSettings.customDecorations ? Windows.flagsCustomDecorations : Windows.flags onWidthChanged: x -= 0 @@ -1163,6 +1177,11 @@ ApplicationWindow { property string remoteNodeService: "" property int lockOnUserInActivityInterval: 10 // minutes property bool showPid: false + property bool blackTheme: false + + Component.onCompleted: { + MoneroComponents.Style.blackTheme = persistentSettings.blackTheme + } } // Information dialog @@ -1371,15 +1390,9 @@ ApplicationWindow { PropertyChanges { target: rightPanel; visible: false } PropertyChanges { target: middlePanel; visible: false } PropertyChanges { target: wizard; visible: true } - PropertyChanges { target: appWindow; width: (screenWidth < 969 || isAndroid || isIOS)? screenWidth : 969 } //rightPanelExpanded ? 1269 : 1269 - 300; - PropertyChanges { target: appWindow; height: maxWindowHeight; } PropertyChanges { target: resizeArea; visible: true } -// PropertyChanges { target: frameArea; blocked: true } PropertyChanges { target: mobileHeader; visible: false } - PropertyChanges { target: titleBar; basicButtonVisible: false } - PropertyChanges { target: titleBar; showMaximizeButton: true } - PropertyChanges { target: titleBar; visible: true } - PropertyChanges { target: titleBar; title: qsTr("Monero") + translationManager.emptyString } + PropertyChanges { target: titleBar; state: "essentials" } }, State { name: "normal" PropertyChanges { target: leftPanel; visible: (isMobile)? false : true } @@ -1387,14 +1400,8 @@ ApplicationWindow { PropertyChanges { target: middlePanel; visible: true } PropertyChanges { target: titleBar; basicButtonVisible: true } PropertyChanges { target: wizard; visible: false } - PropertyChanges { target: appWindow; width: (screenWidth < 969 || isAndroid || isIOS)? screenWidth : 969 } //rightPanelExpanded ? 1269 : 1269 - 300; - PropertyChanges { target: appWindow; height: maxWindowHeight; } PropertyChanges { target: resizeArea; visible: true } - PropertyChanges { target: titleBar; showMaximizeButton: true } -// PropertyChanges { target: frameArea; blocked: true } - PropertyChanges { target: titleBar; visible: true } -// PropertyChanges { target: titleBar; y: 0 } - PropertyChanges { target: titleBar; title: qsTr("Monero") + translationManager.emptyString } + PropertyChanges { target: titleBar; state: "default" } PropertyChanges { target: mobileHeader; visible: isMobile ? true : false } } ] @@ -1552,12 +1559,6 @@ ApplicationWindow { state: "Transfer" } - TipItem { - id: tipItem - text: qsTr("send to the same destination") + translationManager.emptyString - visible: false - } - SequentialAnimation { id: goToBasicAnimation // PropertyAction { @@ -1674,21 +1675,20 @@ ApplicationWindow { id: resizeArea enabled: persistentSettings.customDecorations hoverEnabled: true + cursorShape: persistentSettings.customDecorations ? Qt.PointingHandCursor : Qt.ArrowCursor anchors.right: parent.right anchors.bottom: parent.bottom - height: 30 - width: 30 + height: 34 + width: 34 - Rectangle { - anchors.fill: parent - color: parent.containsMouse || parent.pressed ? "#111111" : "transparent" - } - - Image { + MoneroEffects.ImageMask { anchors.centerIn: parent visible: persistentSettings.customDecorations - source: parent.containsMouse || parent.pressed ? "images/resizeHovered.png" : - "images/resize.png" + image: "qrc:///images/resize.png" + color: MoneroComponents.Style.defaultFontColor + width: 12 + height: 12 + opacity: (parent.containsMouse || parent.pressed) ? 0.5 : 1.0 } property var previousPosition @@ -1717,19 +1717,12 @@ ApplicationWindow { TitleBar { id: titleBar - x: 0 - y: 0 + visible: persistentSettings.customDecorations && middlePanel.state !== "Merchant" anchors.left: parent.left anchors.right: parent.right - showMinimizeButton: true - showMaximizeButton: true - showWhatIsButton: false - showMoneroLogo: true onCloseClicked: appWindow.close(); - onMaximizeClicked: { - appWindow.visibility = appWindow.visibility !== Window.Maximized ? Window.Maximized : - Window.Windowed - } + onLanguageClicked: appWindow.toggleLanguageView(); + onMaximizeClicked: appWindow.visibility = appWindow.visibility !== Window.Maximized ? Window.Maximized : Window.Windowed onMinimizeClicked: appWindow.visibility = Window.Minimized onGoToBasicVersion: { if (yes) { @@ -1740,25 +1733,16 @@ ApplicationWindow { goToProAnimation.start() } } + } - 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 - } - } - } + MoneroMerchant.MerchantTitlebar { + id: titleBarOrange + visible: middlePanel.state === "Merchant" + anchors.left: parent.left + anchors.right: parent.right + onCloseClicked: appWindow.close(); + onMaximizeClicked: appWindow.visibility = appWindow.visibility !== Window.Maximized ? Window.Maximized : Window.Windowed + onMinimizeClicked: appWindow.visibility = Window.Minimized } // new ToolTip @@ -1776,10 +1760,10 @@ ApplicationWindow { anchors.top: parent.bottom anchors.right: parent.right anchors.rightMargin: 5 - source: "../images/tip.png" + source: "qrc:///images/tip.png" } - Text { + MoneroComponents.TextPlain { id: content anchors.horizontalCenter: parent.horizontalCenter y: 6 @@ -1823,6 +1807,15 @@ ApplicationWindow { onTriggered: checkInUserActivity() } + Timer { + // enables theme transition animations after 500ms + id: appThemeTransition + running: true + repeat: false + interval: 500 + onTriggered: appWindow.themeTransition = true; + } + function checkSimpleModeConnection(){ // auto-connection mechanism for simple mode if(persistentSettings.nettype != NetworkType.MAINNET) return; @@ -1875,14 +1868,15 @@ ApplicationWindow { anchors.bottom: parent.bottom width: statusMessageText.contentWidth + 20 * scaleRatio anchors.horizontalCenter: parent.horizontalCenter - color: "black" + color: MoneroComponents.Style.blackTheme ? "black" : "white" height: 40 * scaleRatio - Text { + MoneroComponents.TextPlain { id: statusMessageText anchors.fill: parent anchors.margins: 10 * scaleRatio font.pixelSize: 14 * scaleRatio - color: "white" + color: MoneroComponents.Style.defaultFontColor + themeTransition: false } } @@ -1979,15 +1973,6 @@ ApplicationWindow { onTriggered: checkUpdates() } - function titlebarToggleOrange(flag){ - // toggle titlebar orange style - if(flag !== undefined){ - titleBar.orange = flag; - } else { - titleBar.orange = !titleBar.orange; - } - } - function releaseFocus() { // Workaround to release focus from textfield when scrolling (https://bugreports.qt.io/browse/QTBUG-34867) if(isAndroid) { @@ -2066,13 +2051,84 @@ ApplicationWindow { } } - // background gradient Rectangle { id: inactiveOverlay visible: false anchors.fill: parent - color: "black" - opacity: 0.8 + anchors.topMargin: titleBar.height + color: MoneroComponents.Style.blackTheme ? "black" : "white" + opacity: MoneroComponents.Style.blackTheme ? 0.8 : 0.9 + + MoneroEffects.ColorTransition { + targetObj: parent + blackColor: "black" + whiteColor: "white" + } + } + + // borders on white theme + linux + Rectangle { + visible: isLinux && !MoneroComponents.Style.blackTheme && middlePanel.state !== "Merchant" + z: parent.z + 1 + anchors.left: parent.left + anchors.top: parent.top + anchors.bottom: parent.bottom + width: 1 + color: MoneroComponents.Style.appWindowBorderColor + + MoneroEffects.ColorTransition { + targetObj: parent + blackColor: MoneroComponents.Style._b_appWindowBorderColor + whiteColor: MoneroComponents.Style._w_appWindowBorderColor + } + } + + Rectangle { + visible: isLinux && !MoneroComponents.Style.blackTheme && middlePanel.state !== "Merchant" + z: parent.z + 1 + anchors.right: parent.right + anchors.top: parent.top + anchors.bottom: parent.bottom + width: 1 + color: MoneroComponents.Style.appWindowBorderColor + + MoneroEffects.ColorTransition { + targetObj: parent + blackColor: MoneroComponents.Style._b_appWindowBorderColor + whiteColor: MoneroComponents.Style._w_appWindowBorderColor + } + } + + Rectangle { + visible: isLinux && !MoneroComponents.Style.blackTheme && middlePanel.state !== "Merchant" + z: parent.z + 1 + anchors.right: parent.right + anchors.top: parent.top + anchors.left: parent.left + height: 1 + color: MoneroComponents.Style.appWindowBorderColor + + MoneroEffects.ColorTransition { + targetObj: parent + blackColor: MoneroComponents.Style._b_appWindowBorderColor + whiteColor: MoneroComponents.Style._w_appWindowBorderColor + } + } + + Rectangle { + visible: isLinux && !MoneroComponents.Style.blackTheme && middlePanel.state !== "Merchant" + z: parent.z + 1 + anchors.right: parent.right + anchors.bottom: parent.bottom + anchors.left: parent.left + height: 1 + color: MoneroComponents.Style.appWindowBorderColor + + MoneroEffects.ColorTransition { + targetObj: parent + blackColor: MoneroComponents.Style._b_appWindowBorderColor + whiteColor: MoneroComponents.Style._w_appWindowBorderColor + } } // @TODO: QML type 'Drawer' has issues with buildbot; debug after Qt 5.9 migration diff --git a/monero-wallet-gui.pro b/monero-wallet-gui.pro index e8efdb76..c06dcb3c 100644 --- a/monero-wallet-gui.pro +++ b/monero-wallet-gui.pro @@ -105,6 +105,7 @@ CONFIG(DISABLE_PASS_STRENGTH_METER) { lupdate_only { SOURCES = *.qml \ components/*.qml \ + components/effects/*.qml \ pages/*.qml \ pages/settings/*.qml \ pages/merchant/*.qml \ diff --git a/pages/Account.qml b/pages/Account.qml index 00ac4919..0185b80c 100644 --- a/pages/Account.qml +++ b/pages/Account.qml @@ -26,13 +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.Controls.Styles 1.4 import QtQuick.Layouts 1.1 import QtQuick.Dialogs 1.2 import "../components" as MoneroComponents +import "../components/effects/" as MoneroEffects + import moneroComponents.Clipboard 1.0 import moneroComponents.Wallet 1.0 import moneroComponents.WalletManager 1.0 @@ -84,32 +86,32 @@ Rectangle { RowLayout { Layout.topMargin: 22 * scaleRatio - Text { + + MoneroComponents.TextPlain { text: qsTr("Total balance: ") + translationManager.emptyString Layout.fillWidth: true - color: "#757575" + color: MoneroComponents.Style.defaultFontColor font.pixelSize: 14 font.family: MoneroComponents.Style.fontRegular.name } - Text { + + MoneroComponents.TextPlain { id: balanceAll font.family: MoneroComponents.Style.fontRegular.name font.pixelSize: 14 - color: MoneroComponents.Style.white + color: MoneroComponents.Style.dimmedFontColor + themeTransition: false + MouseArea { hoverEnabled: true anchors.fill: parent cursorShape: Qt.PointingHandCursor - onEntered: { - parent.color = MoneroComponents.Style.orange - } - onExited: { - parent.color = MoneroComponents.Style.white - } + onEntered: parent.color = MoneroComponents.Style.orange + onExited: parent.color = MoneroComponents.Style.defaultFontColor onClicked: { - console.log("Copied to clipboard"); - clipboard.setText(parent.text); - appWindow.showStatusMessage(qsTr("Copied to clipboard"),3) + console.log("Copied to clipboard"); + clipboard.setText(parent.text); + appWindow.showStatusMessage(qsTr("Copied to clipboard"),3) } } } @@ -117,32 +119,33 @@ Rectangle { RowLayout { Layout.topMargin: 10 * scaleRatio - Text { + + MoneroComponents.TextPlain { text: qsTr("Total unlocked balance: ") + translationManager.emptyString Layout.fillWidth: true - color: "#757575" + color: MoneroComponents.Style.defaultFontColor font.pixelSize: 14 font.family: MoneroComponents.Style.fontRegular.name + themeTransition: false } - Text { + + MoneroComponents.TextPlain { id: unlockedBalanceAll font.family: MoneroComponents.Style.fontRegular.name font.pixelSize: 14 - color: MoneroComponents.Style.white + color: MoneroComponents.Style.dimmedFontColor + themeTransition: false + MouseArea { hoverEnabled: true anchors.fill: parent cursorShape: Qt.PointingHandCursor - onEntered: { - parent.color = MoneroComponents.Style.orange - } - onExited: { - parent.color = MoneroComponents.Style.white - } + onEntered: parent.color = MoneroComponents.Style.orange + onExited: parent.color = MoneroComponents.Style.defaultFontColor onClicked: { - console.log("Copied to clipboard"); - clipboard.setText(parent.text); - appWindow.showStatusMessage(qsTr("Copied to clipboard"),3) + console.log("Copied to clipboard"); + clipboard.setText(parent.text); + appWindow.showStatusMessage(qsTr("Copied to clipboard"),3) } } } @@ -174,19 +177,27 @@ Rectangle { anchors.fill: parent clip: true boundsBehavior: ListView.StopAtBounds + delegate: Rectangle { id: tableItem2 height: subaddressAccountListRow.subaddressAccountListItemHeight width: parent.width Layout.fillWidth: true color: "transparent" + Rectangle { + color: MoneroComponents.Style.appWindowBorderColor anchors.right: parent.right anchors.left: parent.left anchors.top: parent.top height: 1 - color: "#404040" visible: index !== 0 + + MoneroEffects.ColorTransition { + targetObj: parent + blackColor: MoneroComponents.Style._b_appWindowBorderColor + whiteColor: MoneroComponents.Style._w_appWindowBorderColor + } } Rectangle { @@ -197,18 +208,19 @@ Rectangle { MoneroComponents.Label { id: idLabel - color: index === appWindow.current_subaddress_account_table_index ? "white" : "#757575" + color: index === appWindow.current_subaddress_account_table_index ? MoneroComponents.Style.defaultFontColor : "#757575" anchors.verticalCenter: parent.verticalCenter anchors.left: parent.left anchors.leftMargin: 6 * scaleRatio fontSize: 14 * scaleRatio fontBold: true text: "#" + index + themeTransition: false } MoneroComponents.Label { id: nameLabel - color: "#a5a5a5" + color: MoneroComponents.Style.dimmedFontColor anchors.verticalCenter: parent.verticalCenter anchors.left: idLabel.right anchors.leftMargin: 6 * scaleRatio @@ -217,22 +229,24 @@ Rectangle { text: label elide: Text.ElideRight textWidth: addressLabel.x - nameLabel.x - 1 + themeTransition: false } MoneroComponents.Label { id: addressLabel - color: "white" + color: MoneroComponents.Style.defaultFontColor anchors.verticalCenter: parent.verticalCenter anchors.left: balanceLabel.left anchors.leftMargin: (mainLayout.width < 510 ? -70 : -125) * scaleRatio fontSize: 14 * scaleRatio fontBold: true text: TxUtils.addressTruncate(address, mainLayout.width < 510 ? 3 : 6) + themeTransition: false } MoneroComponents.Label { id: balanceLabel - color: "white" + color: MoneroComponents.Style.defaultFontColor anchors.verticalCenter: parent.verticalCenter anchors.left: parent.right anchors.leftMargin: (mainLayout.width < 510 ? -120 : -180) * scaleRatio @@ -240,49 +254,55 @@ Rectangle { fontBold: true text: qsTr("Balance: ") + balance elide: mainLayout.width < 510 ? Text.ElideRight : Text.ElideNone - textWidth: 120 + textWidth: 120 + themeTransition: false } MouseArea { cursorShape: Qt.PointingHandCursor anchors.fill: parent hoverEnabled: true - onEntered: { - tableItem2.color = "#26FFFFFF" - } - onExited: { - tableItem2.color = "transparent" - } + onEntered: tableItem2.color = MoneroComponents.Style.titleBarButtonHoverColor + onExited: tableItem2.color = "transparent" onClicked: { - if (index == subaddressAccountListView.currentIndex && selectAndSend) { + if (index == subaddressAccountListView.currentIndex && selectAndSend) appWindow.showPageRequest("Transfer"); - } subaddressAccountListView.currentIndex = index; } } } - MoneroComponents.IconButton { - id: renameButton - imageSource: "../images/editIcon.png" + RowLayout { + anchors.verticalCenter: parent.verticalCenter anchors.right: parent.right - anchors.rightMargin: 30 * scaleRatio - anchors.topMargin: 1 * scaleRatio + anchors.rightMargin: 6 + height: 21 + spacing: 10 - onClicked: { - renameSubaddressAccountLabel(index); + MoneroComponents.IconButton { + id: renameButton + image: "qrc:///images/edit.svg" + color: MoneroComponents.Style.defaultFontColor + opacity: 0.5 + Layout.preferredWidth: 23 + Layout.preferredHeight: 21 + + onClicked: pageAccount.renameSubaddressAccountLabel(index); } - } - MoneroComponents.IconButton { - id: copyButton - imageSource: "../images/dropdownCopy.png" - anchors.right: parent.right + MoneroComponents.IconButton { + id: copyButton + image: "qrc:///images/copy.svg" + color: MoneroComponents.Style.defaultFontColor + opacity: 0.5 + Layout.preferredWidth: 16 + Layout.preferredHeight: 21 - onClicked: { - console.log("Address copied to clipboard"); - clipboard.setText(address); - appWindow.showStatusMessage(qsTr("Address copied to clipboard"),3); + onClicked: { + console.log("Address copied to clipboard"); + clipboard.setText(address); + appWindow.showStatusMessage(qsTr("Address copied to clipboard"),3); + } } } } @@ -302,9 +322,15 @@ Rectangle { } Rectangle { - color: "#404040" + color: MoneroComponents.Style.appWindowBorderColor Layout.fillWidth: true height: 1 + + MoneroEffects.ColorTransition { + targetObj: parent + blackColor: MoneroComponents.Style._b_appWindowBorderColor + whiteColor: MoneroComponents.Style._w_appWindowBorderColor + } } MoneroComponents.CheckBox { diff --git a/pages/AddressBook.qml b/pages/AddressBook.qml index 19ff9c95..e605a5a7 100644 --- a/pages/AddressBook.qml +++ b/pages/AddressBook.qml @@ -26,11 +26,14 @@ // 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.Layouts 1.1 import QtQuick.Dialogs 1.2 + import "../components" as MoneroComponents +import "../components/effects/" as MoneroEffects + import "../js/TxUtils.js" as TxUtils import moneroComponents.AddressBook 1.0 import moneroComponents.AddressBookModel 1.0 @@ -89,7 +92,7 @@ Rectangle { TextArea { Layout.fillWidth: true - color: MoneroComponents.Style.greyFontColor + color: MoneroComponents.Style.dimmedFontColor font.family: MoneroComponents.Style.fontRegular.name font.pixelSize: 16 * scaleRatio horizontalAlignment: TextInput.AlignLeft @@ -159,11 +162,17 @@ Rectangle { } Rectangle { + color: MoneroComponents.Style.appWindowBorderColor anchors.right: parent.right anchors.left: parent.left anchors.top: parent.top height: 1 - color: MoneroComponents.Style.grey + + MoneroEffects.ColorTransition { + targetObj: parent + blackColor: MoneroComponents.Style._b_appWindowBorderColor + whiteColor: MoneroComponents.Style._w_appWindowBorderColor + } } Rectangle { @@ -206,41 +215,52 @@ Rectangle { } } - MoneroComponents.IconButton { - id: sendToButton - imageSource: "../images/arrow-right-in-circle.png" - image.opacity: 0.5 + RowLayout { + anchors.verticalCenter: parent.verticalCenter anchors.right: parent.right - anchors.rightMargin: 63 * scaleRatio - onClicked: { - doSend(); + anchors.rightMargin: 6 + height: 21 + spacing: 10 + + MoneroComponents.IconButton { + id: sendToButton + image: "qrc:///images/arrow-right-in-circle-outline-medium-white.svg" + color: MoneroComponents.Style.defaultFontColor + opacity: 0.5 + Layout.preferredWidth: 20 + Layout.preferredHeight: 20 + onClicked: { + doSend(); + } } - } - MoneroComponents.IconButton { - id: renameButton - imageSource: "../images/rename.png" - image.opacity: 0.5 - anchors.right: parent.right - anchors.rightMargin: 30 * scaleRatio - anchors.topMargin: 1 * scaleRatio + MoneroComponents.IconButton { + id: renameButton + image: "qrc:///images/edit.svg" + color: MoneroComponents.Style.defaultFontColor + opacity: 0.5 + Layout.preferredWidth: 23 + Layout.preferredHeight: 21 - onClicked: { - addressBookListView.currentIndex = index; - root.showEditAddress(address, description); + onClicked: { + addressBookListView.currentIndex = index; + root.showEditAddress(address, description); + } } - } - MoneroComponents.IconButton { - id: copyButton - imageSource: "../images/clipboard.png" - image.opacity: 0.5 - anchors.right: parent.right + MoneroComponents.IconButton { + id: copyButton + image: "qrc:///images/copy.svg" + Layout.preferredWidth: 16 + Layout.preferredHeight: 21 + color: MoneroComponents.Style.defaultFontColor + opacity: 0.5 - onClicked: { - console.log("Address copied to clipboard"); - clipboard.setText(address); - appWindow.showStatusMessage(qsTr("Address copied to clipboard"),3); + onClicked: { + console.log("Address copied to clipboard"); + clipboard.setText(address); + appWindow.showStatusMessage(qsTr("Address copied to clipboard"), 3); + } } } } @@ -248,9 +268,16 @@ Rectangle { } Rectangle { - color: MoneroComponents.Style.grey + id: border2 + color: MoneroComponents.Style.appWindowBorderColor Layout.fillWidth: true height: 1 + + MoneroEffects.ColorTransition { + targetObj: border2 + blackColor: MoneroComponents.Style._b_appWindowBorderColor + whiteColor: MoneroComponents.Style._w_appWindowBorderColor + } } MoneroComponents.CheckBox { @@ -306,6 +333,7 @@ Rectangle { addressLine.text = clipboardText; } } + inlineButton.text: FontAwesome.qrcode inlineButton.fontPixelSize: 22 inlineButton.fontFamily: FontAwesome.fontFamily diff --git a/pages/History.qml b/pages/History.qml index 8acd423d..7794a4f7 100644 --- a/pages/History.qml +++ b/pages/History.qml @@ -29,6 +29,7 @@ import QtQuick 2.0 import QtQuick.Layouts 1.1 import QtQuick.Dialogs 1.2 +import QtGraphicalEffects 1.0 import moneroComponents.Wallet 1.0 import moneroComponents.WalletManager 1.0 import moneroComponents.TransactionHistory 1.0 @@ -36,6 +37,8 @@ import moneroComponents.TransactionInfo 1.0 import moneroComponents.TransactionHistoryModel 1.0 import moneroComponents.Clipboard 1.0 import FontAwesome 1.0 + +import "../components/effects/" as MoneroEffects import "../components" as MoneroComponents import "../js/Utils.js" as Utils import "../js/TxUtils.js" as TxUtils @@ -96,7 +99,7 @@ Rectangle { Layout.preferredHeight: 15 spacing: 8 * scaleRatio - Text { + MoneroComponents.TextPlain { Layout.alignment: Qt.AlignVCenter font.family: MoneroComponents.Style.fontRegular.name font.pixelSize: 15 * scaleRatio @@ -113,12 +116,16 @@ Rectangle { } } - Image { + MoneroEffects.ImageMask { + id: sortCollapsedIcon Layout.alignment: Qt.AlignVCenter height: 8 * scaleRatio width: 12 * scaleRatio - source: "../images/whiteDropIndicator.png" - rotation: parent.collapsed ? 0 : 180 + image: "qrc:///images/whiteDropIndicator.png" + fontAwesomeFallbackIcon: FontAwesome.arrowDown + fontAwesomeFallbackSize: 14 + rotation: sortAndFilter.collapsed ? 0 : 180 + color: MoneroComponents.Style.defaultFontColor MouseArea { anchors.fill: parent @@ -215,7 +222,7 @@ Rectangle { Layout.preferredWidth: childrenRect.width + 38 * scaleRatio Layout.preferredHeight: 20 - Text { + MoneroComponents.TextPlain { font.family: MoneroComponents.Style.fontRegular.name font.pixelSize: 15 * scaleRatio text: qsTr("Sort by") + ":" @@ -235,21 +242,25 @@ Rectangle { clip: true anchors.fill: parent - Text { + MoneroComponents.TextPlain { id: sortBlockheightText font.family: MoneroComponents.Style.fontRegular.name font.pixelSize: 15 * scaleRatio text: qsTr("Blockheight") + translationManager.emptyString color: root.sortBy === "blockheight" ? MoneroComponents.Style.defaultFontColor : MoneroComponents.Style.dimmedFontColor anchors.verticalCenter: parent.verticalCenter + themeTransition: false } - Image { + MoneroEffects.ImageMask { height: 8 * scaleRatio width: 12 * scaleRatio visible: root.sortBy === "blockheight" ? true : false - opacity: root.sortBy === "blockheight" ? 1 : 0.6 - source: "../images/whiteDropIndicator.png" + opacity: root.sortBy === "blockheight" ? 1 : 0.2 + image: "qrc:///images/whiteDropIndicator.png" + fontAwesomeFallbackIcon: FontAwesome.arrowDown + fontAwesomeFallbackSize: 14 + color: MoneroComponents.Style.defaultFontColor rotation: { if(root.sortBy === "blockheight"){ return root.sortDirection ? 0 : 180 @@ -291,21 +302,25 @@ Rectangle { clip: true anchors.fill: parent - Text { + MoneroComponents.TextPlain { id: sortDateText font.family: MoneroComponents.Style.fontRegular.name font.pixelSize: 15 * scaleRatio text: qsTr("Date") + translationManager.emptyString color: root.sortBy === "timestamp" ? MoneroComponents.Style.defaultFontColor : MoneroComponents.Style.dimmedFontColor + themeTransition: false anchors.verticalCenter: parent.verticalCenter } - Image { + MoneroEffects.ImageMask { height: 8 * scaleRatio width: 12 * scaleRatio visible: root.sortBy === "timestamp" ? true : false - opacity: root.sortBy === "timestamp" ? 1 : 0.6 - source: "../images/whiteDropIndicator.png" + opacity: root.sortBy === "timestamp" ? 1 : 0.2 + image: "qrc:///images/whiteDropIndicator.png" + fontAwesomeFallbackIcon: FontAwesome.arrowDown + fontAwesomeFallbackSize: 14 + color: MoneroComponents.Style.defaultFontColor rotation: { if(root.sortBy === "timestamp"){ return root.sortDirection ? 0 : 180 @@ -347,21 +362,25 @@ Rectangle { clip: true anchors.fill: parent - Text { + MoneroComponents.TextPlain { id: sortAmountText font.family: MoneroComponents.Style.fontRegular.name font.pixelSize: 15 * scaleRatio text: qsTr("Amount") + translationManager.emptyString color: root.sortBy === "amount" ? MoneroComponents.Style.defaultFontColor : MoneroComponents.Style.dimmedFontColor + themeTransition: false anchors.verticalCenter: parent.verticalCenter } - Image { + MoneroEffects.ImageMask { height: 8 * scaleRatio width: 12 * scaleRatio visible: root.sortBy === "amount" ? true : false - opacity: root.sortBy === "amount" ? 1 : 0.6 - source: "../images/whiteDropIndicator.png" + opacity: root.sortBy === "amount" ? 1 : 0.2 + image: "qrc:///images/whiteDropIndicator.png" + fontAwesomeFallbackIcon: FontAwesome.arrowDown + fontAwesomeFallbackSize: 14 + color: MoneroComponents.Style.defaultFontColor rotation: { if(root.sortBy === "amount"){ return root.sortDirection ? 0 : 180 @@ -397,7 +416,7 @@ Rectangle { visible: !sortAndFilter.collapsed Layout.preferredHeight: 20 - Text { + MoneroComponents.TextPlain { // status message font.family: MoneroComponents.Style.fontRegular.name font.pixelSize: 15 * scaleRatio @@ -424,7 +443,7 @@ Rectangle { Layout.preferredWidth: childrenRect.width + 2 * scaleRatio Layout.preferredHeight: 20 - Text { + MoneroComponents.TextPlain { font.family: MoneroComponents.Style.fontRegular.name font.pixelSize: 15 * scaleRatio text: qsTr("Page") + ":" @@ -439,10 +458,10 @@ Rectangle { Layout.leftMargin: 4 * scaleRatio Layout.preferredHeight: 20 * scaleRatio - Text { + MoneroComponents.TextPlain { id: paginationText text: root.txPage + "/" + Math.ceil(root.txCount / root.txMax) - color: "white" + color: MoneroComponents.Style.defaultFontColor anchors.verticalCenter: parent.verticalCenter MouseArea { @@ -480,15 +499,19 @@ Rectangle { Layout.preferredWidth: 18 * scaleRatio Layout.preferredHeight: 20 * scaleRatio color: "transparent" - opacity: enabled ? 1.0 : 0.6 + opacity: enabled ? 1.0 : 0.2 enabled: false - Image { + MoneroEffects.ImageMask { + id: prevIcon anchors.verticalCenter: parent.verticalCenter anchors.left: parent.left height: 8 * scaleRatio width: 12 * scaleRatio - source: "../images/whiteDropIndicator.png" + image: "qrc:///images/whiteDropIndicator.png" + fontAwesomeFallbackIcon: FontAwesome.arrowDown + fontAwesomeFallbackSize: 14 + color: MoneroComponents.Style.defaultFontColor rotation: 90 } @@ -508,16 +531,20 @@ Rectangle { Layout.preferredWidth: 18 * scaleRatio Layout.preferredHeight: 20 * scaleRatio color: "transparent" - opacity: enabled ? 1.0 : 0.6 + opacity: enabled ? 1.0 : 0.2 enabled: false - Image { + MoneroEffects.ImageMask { + id: nextIcon anchors.verticalCenter: parent.verticalCenter anchors.right: parent.right height: 8 * scaleRatio width: 12 * scaleRatio - source: "../images/whiteDropIndicator.png" + image: "qrc:///images/whiteDropIndicator.png" + fontAwesomeFallbackIcon: FontAwesome.arrowDown + fontAwesomeFallbackSize: 14 rotation: 270 + color: MoneroComponents.Style.defaultFontColor } MouseArea { @@ -550,7 +577,10 @@ Rectangle { if(isout && delegate.address !== "") return 320; return 220; } - color: collapsed ? "#06FFFFFF" : "transparent" + color: { + if(!collapsed) return "transparent" + return MoneroComponents.Style.blackTheme ? "#06FFFFFF" : "#04000000" + } Rectangle { anchors.top: parent.top @@ -601,12 +631,14 @@ Rectangle { Layout.fillWidth: true Layout.preferredHeight: 20 - Text { + MoneroComponents.TextPlain { font.family: MoneroComponents.Style.fontRegular.name font.pixelSize: 15 * scaleRatio - text: (isout ? qsTr("Sent") : qsTr("Received")) + translationManager.emptyString - color: "#C0C0C0" + text: isout ? qsTr("Sent") : qsTr("Received") + translationManager.emptyString + color: MoneroComponents.Style.historyHeaderTextColor anchors.verticalCenter: parent.verticalCenter + themeTransitionBlackColor: MoneroComponents.Style._b_historyHeaderTextColor + themeTransitionWhiteColor: MoneroComponents.Style._w_historyHeaderTextColor } } @@ -615,7 +647,7 @@ Rectangle { Layout.fillWidth: true Layout.preferredHeight: 20 - Text { + MoneroComponents.TextPlain { font.family: MoneroComponents.Style.fontRegular.name font.pixelSize: 15 * scaleRatio text: _amount + " XMR" @@ -649,11 +681,13 @@ Rectangle { Layout.fillWidth: true Layout.preferredHeight: 20 - Text { + MoneroComponents.TextPlain { font.family: MoneroComponents.Style.fontRegular.name font.pixelSize: 15 * scaleRatio - text: (isout ? qsTr("Fee") : confirmationsRequired === 60 ? qsTr("Mined") : qsTr("Fee")) + translationManager.emptyString - color: "#C0C0C0" + text: isout ? qsTr("Fee") : confirmationsRequired === 60 ? qsTr("Mined") : qsTr("Fee") + translationManager.emptyString + color: MoneroComponents.Style.historyHeaderTextColor + themeTransitionBlackColor: MoneroComponents.Style._b_historyHeaderTextColor + themeTransitionWhiteColor: MoneroComponents.Style._w_historyHeaderTextColor anchors.verticalCenter: parent.verticalCenter } } @@ -663,7 +697,7 @@ Rectangle { Layout.fillWidth: true Layout.preferredHeight: 20 - Text { + MoneroComponents.TextPlain { font.family: MoneroComponents.Style.fontRegular.name font.pixelSize: 15 * scaleRatio text: { @@ -708,11 +742,13 @@ Rectangle { Layout.fillWidth: true Layout.preferredHeight: 20 - Text { + MoneroComponents.TextPlain { font.family: MoneroComponents.Style.fontRegular.name font.pixelSize: 15 * scaleRatio text: qsTr("Blockheight") + translationManager.emptyString - color: "#C0C0C0" + color: MoneroComponents.Style.historyHeaderTextColor + themeTransitionBlackColor: MoneroComponents.Style._b_historyHeaderTextColor + themeTransitionWhiteColor: MoneroComponents.Style._w_historyHeaderTextColor anchors.verticalCenter: parent.verticalCenter } } @@ -722,7 +758,7 @@ Rectangle { Layout.fillWidth: true Layout.preferredHeight: 20 - Text { + MoneroComponents.TextPlain { font.family: MoneroComponents.Style.fontRegular.name font.pixelSize: 14 * scaleRatio text: blockheight > 0 ? blockheight : qsTr('Pending') + translationManager.emptyString; @@ -757,11 +793,13 @@ Rectangle { Layout.fillWidth: true Layout.preferredHeight: 20 - Text { + MoneroComponents.TextPlain { font.family: MoneroComponents.Style.fontRegular.name font.pixelSize: 15 * scaleRatio text: qsTr("Confirmations") + translationManager.emptyString - color: "#C0C0C0" + color: MoneroComponents.Style.historyHeaderTextColor + themeTransitionBlackColor: MoneroComponents.Style._b_historyHeaderTextColor + themeTransitionWhiteColor: MoneroComponents.Style._w_historyHeaderTextColor anchors.verticalCenter: parent.verticalCenter } } @@ -771,7 +809,7 @@ Rectangle { Layout.fillWidth: true Layout.preferredHeight: 20 - Text { + MoneroComponents.TextPlain { property bool confirmed: confirmations < confirmationsRequired ? false : true font.family: MoneroComponents.Style.fontRegular.name font.pixelSize: 15 * scaleRatio @@ -812,11 +850,13 @@ Rectangle { Layout.fillWidth: true Layout.preferredHeight: 20 - Text { + MoneroComponents.TextPlain { font.family: MoneroComponents.Style.fontRegular.name font.pixelSize: 15 * scaleRatio - text: qsTr("Date") + translationManager.emptyString - color: "#C0C0C0" + text: qsTr("Date") + color: MoneroComponents.Style.historyHeaderTextColor + themeTransitionBlackColor: MoneroComponents.Style._b_historyHeaderTextColor + themeTransitionWhiteColor: MoneroComponents.Style._w_historyHeaderTextColor anchors.verticalCenter: parent.verticalCenter } } @@ -826,7 +866,7 @@ Rectangle { Layout.fillWidth: true Layout.preferredHeight: 20 - Text { + MoneroComponents.TextPlain { font.family: MoneroComponents.Style.fontRegular.name font.pixelSize: 15 * scaleRatio text: persistentSettings.historyHumanDates ? dateHuman : date + " " + time @@ -867,6 +907,9 @@ Rectangle { anchors.fill: parent hoverEnabled: true z: parent.z + 1 + + onEntered: parent.opacity = 0.8; + onExited: parent.opacity = 1.0; } } @@ -894,6 +937,9 @@ Rectangle { anchors.fill: parent hoverEnabled: true z: parent.z + 1 + + onEntered: parent.opacity = 0.8; + onExited: parent.opacity = 1.0; } } } @@ -910,11 +956,13 @@ Rectangle { Layout.fillWidth: true Layout.preferredHeight: 20 - Text { + MoneroComponents.TextPlain { font.family: MoneroComponents.Style.fontRegular.name font.pixelSize: 15 * scaleRatio text: qsTr("Description") + translationManager.emptyString - color: "#C0C0C0" + color: MoneroComponents.Style.historyHeaderTextColor + themeTransitionBlackColor: MoneroComponents.Style._b_historyHeaderTextColor + themeTransitionWhiteColor: MoneroComponents.Style._w_historyHeaderTextColor anchors.verticalCenter: parent.verticalCenter } } @@ -924,7 +972,7 @@ Rectangle { Layout.fillWidth: true Layout.preferredHeight: 20 - Text { + MoneroComponents.TextPlain { id: txNoteText font.family: MoneroComponents.Style.fontRegular.name font.pixelSize: 15 * scaleRatio @@ -941,26 +989,25 @@ Rectangle { } } - Image { + MoneroEffects.ImageMask { anchors.top: parent.top anchors.left: txNoteText.right anchors.leftMargin: 12 * scaleRatio - source: "../images/editIcon.png" - opacity: 1 - width: 18 - height: 18 + image: "qrc:///images/edit.svg" + fontAwesomeFallbackIcon: FontAwesome.pencilSquare + fontAwesomeFallbackSize: 22 + color: MoneroComponents.Style.defaultFontColor + opacity: 0.75 + width: 23 + height: 21 MouseArea { id: txNoteArea state: "set_tx_note" anchors.fill: parent hoverEnabled: true - onEntered: { - parent.opacity = 0.7; - } - onExited: { - parent.opacity = 1.0; - } + onEntered: parent.opacity = 0.4; + onExited: parent.opacity = 0.75; cursorShape: Qt.PointingHandCursor } } @@ -977,11 +1024,13 @@ Rectangle { Layout.fillWidth: true Layout.preferredHeight: 20 - Text { + MoneroComponents.TextPlain { font.family: MoneroComponents.Style.fontRegular.name font.pixelSize: 15 * scaleRatio text: qsTr("Transaction ID") + translationManager.emptyString - color: "#C0C0C0" + color: MoneroComponents.Style.historyHeaderTextColor + themeTransitionBlackColor: MoneroComponents.Style._b_historyHeaderTextColor + themeTransitionWhiteColor: MoneroComponents.Style._w_historyHeaderTextColor anchors.verticalCenter: parent.verticalCenter } } @@ -991,7 +1040,7 @@ Rectangle { Layout.fillWidth: true Layout.preferredHeight: 20 - Text { + MoneroComponents.TextPlain { font.family: MoneroComponents.Style.fontRegular.name font.pixelSize: 15 * scaleRatio text: hash @@ -1019,11 +1068,13 @@ Rectangle { Layout.fillWidth: true Layout.preferredHeight: 20 - Text { + MoneroComponents.TextPlain { font.family: MoneroComponents.Style.fontRegular.name font.pixelSize: 15 * scaleRatio text: qsTr("Transaction key") + translationManager.emptyString - color: "#C0C0C0" + color: MoneroComponents.Style.historyHeaderTextColor + themeTransitionBlackColor: MoneroComponents.Style._b_historyHeaderTextColor + themeTransitionWhiteColor: MoneroComponents.Style._w_historyHeaderTextColor anchors.verticalCenter: parent.verticalCenter } } @@ -1033,7 +1084,7 @@ Rectangle { Layout.fillWidth: true Layout.preferredHeight: 20 - Text { + MoneroComponents.TextPlain { font.family: MoneroComponents.Style.fontRegular.name font.pixelSize: 15 * scaleRatio text: { @@ -1067,11 +1118,13 @@ Rectangle { Layout.fillWidth: true Layout.preferredHeight: 20 - Text { + MoneroComponents.TextPlain { font.family: MoneroComponents.Style.fontRegular.name font.pixelSize: 15 * scaleRatio text: qsTr("Address sent to") + translationManager.emptyString - color: "#C0C0C0" + color: MoneroComponents.Style.historyHeaderTextColor + themeTransitionBlackColor: MoneroComponents.Style._b_historyHeaderTextColor + themeTransitionWhiteColor: MoneroComponents.Style._w_historyHeaderTextColor anchors.verticalCenter: parent.verticalCenter } } @@ -1082,7 +1135,7 @@ Rectangle { Layout.fillWidth: true Layout.preferredHeight: 20 - Text { + MoneroComponents.TextPlain { font.family: MoneroComponents.Style.fontRegular.name font.pixelSize: 15 * scaleRatio text: { @@ -1164,15 +1217,16 @@ Rectangle { color: "transparent" - Image { + MoneroEffects.ImageMask { + id: collapsedIcon anchors.top: parent.top anchors.topMargin: 24 * scaleRatio anchors.horizontalCenter: parent.horizontalCenter - height: 8 * scaleRatio width: 12 * scaleRatio - source: "../images/whiteDropIndicator.png" + image: "qrc:///images/whiteDropIndicator.png" rotation: delegate.collapsed ? 180 : 0 + color: MoneroComponents.Style.defaultFontColor } } @@ -1181,7 +1235,13 @@ Rectangle { anchors.right: parent.right anchors.top: parent.top height: 1 - color: "#2b2b2b" + color: MoneroComponents.Style.appWindowBorderColor + + MoneroEffects.ColorTransition { + targetObj: parent + blackColor: MoneroComponents.Style._b_appWindowBorderColor + whiteColor: MoneroComponents.Style._w_appWindowBorderColor + } } Rectangle { @@ -1189,7 +1249,13 @@ Rectangle { anchors.right: parent.right anchors.top: parent.bottom height: 1 - color: "#2b2b2b" + color: MoneroComponents.Style.appWindowBorderColor + + MoneroEffects.ColorTransition { + targetObj: parent + blackColor: MoneroComponents.Style._b_appWindowBorderColor + whiteColor: MoneroComponents.Style._w_appWindowBorderColor + } } } } @@ -1201,7 +1267,7 @@ Rectangle { Layout.leftMargin: sideMargin Layout.rightMargin: sideMargin - Text { + MoneroComponents.TextPlain { // status message Layout.fillWidth: true Layout.alignment: Qt.AlignHCenter @@ -1209,6 +1275,8 @@ Rectangle { font.pixelSize: 15 * scaleRatio text: root.historyStatusMessage; color: MoneroComponents.Style.dimmedFontColor + themeTransitionBlackColor: MoneroComponents.Style._b_dimmedFontColor + themeTransitionWhiteColor: MoneroComponents.Style._w_dimmedFontColor } } diff --git a/pages/Keys.qml b/pages/Keys.qml index 9baa5ce8..e46b038d 100644 --- a/pages/Keys.qml +++ b/pages/Keys.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.Controls.Styles 1.4 import QtQuick.Layouts 1.1 @@ -92,7 +92,7 @@ Rectangle { addressValidation: false readOnly: true wrapMode: Text.WordWrap - fontColor: "white" + fontColor: MoneroComponents.Style.defaultFontColor } } @@ -208,7 +208,7 @@ Rectangle { fillMode: Image.PreserveAspectFit } - Text { + MoneroComponents.TextPlain { Layout.fillWidth: true font.bold: true font.pixelSize: 16 * scaleRatio diff --git a/pages/Mining.qml b/pages/Mining.qml index 89710d9f..db980888 100644 --- a/pages/Mining.qml +++ b/pages/Mining.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 QtQuick.Dialogs 1.2 import "../components" as MoneroComponents @@ -65,7 +65,7 @@ Rectangle { visible: walletManager.isDaemonLocal(appWindow.currentDaemonAddress) && !appWindow.daemonSynced } - Text { + MoneroComponents.TextPlain { id: soloMainLabel text: qsTr("Mining with your computer helps strengthen the Monero network. The more that people mine, the harder it is for the network to be attacked, and every little bit helps.

Mining also gives you a small chance to earn some Monero. Your computer will create hashes looking for block solutions. If you find a block, you will get the associated reward. Good luck!") + translationManager.emptyString wrapMode: Text.Wrap @@ -112,7 +112,7 @@ Rectangle { validator: IntValidator { bottom: 1; top: idealThreadCount } } - Text { + MoneroComponents.TextPlain { id: numAvailableThreadsText text: qsTr("Max # of CPU threads available for mining: ") + idealThreadCount + translationManager.emptyString wrapMode: Text.WordWrap diff --git a/pages/Receive.qml b/pages/Receive.qml index f0392a55..e31a79d7 100644 --- a/pages/Receive.qml +++ b/pages/Receive.qml @@ -26,13 +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.Controls.Styles 1.4 import QtQuick.Layouts 1.1 import QtQuick.Dialogs 1.2 import "../components" as MoneroComponents +import "../components/effects/" as MoneroEffects + import moneroComponents.Clipboard 1.0 import moneroComponents.Wallet 1.0 import moneroComponents.WalletManager 1.0 @@ -113,8 +115,14 @@ Rectangle { anchors.left: parent.left anchors.top: parent.top height: 1 - color: "#404040" + color: MoneroComponents.Style.appWindowBorderColor visible: index !== 0 + + MoneroEffects.ColorTransition { + targetObj: parent + blackColor: MoneroComponents.Style._b_appWindowBorderColor + whiteColor: MoneroComponents.Style._w_appWindowBorderColor + } } Rectangle { @@ -125,18 +133,19 @@ Rectangle { MoneroComponents.Label { id: idLabel - color: index === appWindow.current_subaddress_table_index ? "white" : "#757575" + color: index === appWindow.current_subaddress_table_index ? MoneroComponents.Style.defaultFontColor : "#757575" anchors.verticalCenter: parent.verticalCenter anchors.left: parent.left anchors.leftMargin: 6 * scaleRatio fontSize: 14 * scaleRatio fontBold: true text: "#" + index + themeTransition: false } MoneroComponents.Label { id: nameLabel - color: "#a5a5a5" + color: MoneroComponents.Style.dimmedFontColor anchors.verticalCenter: parent.verticalCenter anchors.left: idLabel.right anchors.leftMargin: 6 * scaleRatio @@ -145,42 +154,42 @@ Rectangle { text: label elide: Text.ElideRight textWidth: addressLabel.x - nameLabel.x - 1 + themeTransition: false } MoneroComponents.Label { id: addressLabel - color: "white" + color: MoneroComponents.Style.defaultFontColor anchors.verticalCenter: parent.verticalCenter anchors.left: parent.right anchors.leftMargin: (mainLayout.width < 510 ? -130 : -190) * scaleRatio fontSize: 14 * scaleRatio fontBold: true text: TxUtils.addressTruncate(address, mainLayout.width < 510 ? 6 : 10) + themeTransition: false } MouseArea { cursorShape: Qt.PointingHandCursor anchors.fill: parent hoverEnabled: true - onEntered: { - tableItem2.color = "#26FFFFFF" - } - onExited: { - tableItem2.color = "transparent" - } - onClicked: { - subaddressListView.currentIndex = index; - } + onEntered: tableItem2.color = MoneroComponents.Style.titleBarButtonHoverColor + onExited: tableItem2.color = "transparent" + onClicked: subaddressListView.currentIndex = index; } } MoneroComponents.IconButton { id: renameButton - imageSource: "../images/editIcon.png" + image: "qrc:///images/edit.svg" + color: MoneroComponents.Style.defaultFontColor + opacity: 0.5 anchors.verticalCenter: parent.verticalCenter anchors.right: parent.right anchors.rightMargin: 30 * scaleRatio anchors.topMargin: 1 * scaleRatio + width: 23 + height: 21 visible: index !== 0 onClicked: { @@ -190,10 +199,13 @@ Rectangle { MoneroComponents.IconButton { id: copyButton - imageSource: "../images/dropdownCopy.png" + image: "qrc:///images/copy.svg" + color: MoneroComponents.Style.defaultFontColor + opacity: 0.5 anchors.verticalCenter: parent.verticalCenter - anchors.top: undefined anchors.right: parent.right + width: 16 + height: 21 onClicked: { console.log("Address copied to clipboard"); @@ -214,9 +226,15 @@ Rectangle { } Rectangle { - color: "#404040" + color: MoneroComponents.Style.appWindowBorderColor Layout.fillWidth: true height: 1 + + MoneroEffects.ColorTransition { + targetObj: parent + blackColor: MoneroComponents.Style._b_appWindowBorderColor + whiteColor: MoneroComponents.Style._w_appWindowBorderColor + } } MoneroComponents.CheckBox { @@ -249,7 +267,7 @@ Rectangle { Rectangle { id: qrContainer - color: "white" + color: MoneroComponents.Style.blackTheme ? "white" : "transparent" Layout.fillWidth: true Layout.maximumWidth: parent.qrSize Layout.preferredHeight: width @@ -276,12 +294,12 @@ Rectangle { spacing: parent.spacing MoneroComponents.StandardButton { - rightIcon: "../images/download-white.png" + rightIcon: "qrc:///images/download-white.png" onClicked: qrFileDialog.open() } MoneroComponents.StandardButton { - rightIcon: "../images/external-link-white.png" + rightIcon: "qrc:///images/external-link-white.png" onClicked: { clipboard.setText(TxUtils.makeQRCodeString(appWindow.current_address)); appWindow.showStatusMessage(qsTr("Copied to clipboard") + translationManager.emptyString, 3); diff --git a/pages/SharedRingDB.qml b/pages/SharedRingDB.qml index d4d5f687..4a353879 100644 --- a/pages/SharedRingDB.qml +++ b/pages/SharedRingDB.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.Controls.Styles 1.4 import QtQuick.Layouts 1.1 @@ -100,7 +100,7 @@ Rectangle { text: qsTr("Shared RingDB") + translationManager.emptyString } - Text { + MoneroComponents.TextPlain { text: qsTr("This page allows you to interact with the shared ring database. " + "This database is meant for use by Monero wallets as well as wallets from Monero clones which reuse the Monero keys.") + translationManager.emptyString wrapMode: Text.Wrap @@ -134,7 +134,7 @@ Rectangle { } } - Text { + MoneroComponents.TextPlain { textFormat: Text.RichText font.family: MoneroComponents.Style.fontRegular.name font.pixelSize: 14 * scaleRatio @@ -272,7 +272,7 @@ Rectangle { } } - Text { + MoneroComponents.TextPlain { textFormat: Text.RichText font.family: MoneroComponents.Style.fontRegular.name font.pixelSize: 14 * scaleRatio @@ -374,8 +374,6 @@ Rectangle { id: segregatePreForkOutputs checked: persistentSettings.segregatePreForkOutputs text: qsTr("I intend to spend on key-reusing fork(s)") + translationManager.emptyString - checkedIcon: "../images/checkedIcon-black.png" - uncheckedIcon: "../images/uncheckedIcon.png" onClicked: { persistentSettings.segregatePreForkOutputs = segregatePreForkOutputs.checked if (appWindow.currentWallet) { @@ -388,8 +386,6 @@ Rectangle { id: keyReuseMitigation2 checked: persistentSettings.keyReuseMitigation2 text: qsTr("I might want to spend on key-reusing fork(s)") + translationManager.emptyString - checkedIcon: "../images/checkedIcon-black.png" - uncheckedIcon: "../images/uncheckedIcon.png" onClicked: { persistentSettings.keyReuseMitigation2 = keyReuseMitigation2.checked if (appWindow.currentWallet) { @@ -402,23 +398,24 @@ Rectangle { id: setRingRelative checked: true text: qsTr("Relative") + translationManager.emptyString - checkedIcon: "../images/checkedIcon-black.png" - uncheckedIcon: "../images/uncheckedIcon.png" } } - RowLayout { + GridLayout { id: segregationHeightRow - Layout.topMargin: 17 * scaleRatio Layout.fillWidth: true + Layout.topMargin: 17 * scaleRatio + columns: (isMobile) ? 1 : 2 + columnSpacing: 32 * scaleRatio MoneroComponents.LineEdit { id: segregationHeightLine + property bool edited: false Layout.fillWidth: true placeholderFontSize: 16 * scaleRatio labelFontSize: 14 * scaleRatio - labelText: qsTr("Segregation height:") + translationManager.emptyString + labelText: qsTr("Set segregation height:") + translationManager.emptyString validator: IntValidator { bottom: 0 } readOnly: false onEditingFinished: { @@ -426,8 +423,15 @@ Rectangle { if (appWindow.currentWallet) { appWindow.currentWallet.segregationHeight(segregationHeightLine.text) } + + // @TODO: LineEdit should visually be able show that an action + // has been completed due to modification of the text } } + + Item { + Layout.fillWidth: true + } } } diff --git a/pages/Sign.qml b/pages/Sign.qml index a077ee92..9d26bcd0 100644 --- a/pages/Sign.qml +++ b/pages/Sign.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.Controls.Styles 1.4 import QtQuick.Layouts 1.1 @@ -101,7 +101,7 @@ Rectangle { text: qsTr("Sign/verify") + translationManager.emptyString } - Text { + MoneroComponents.TextPlain { text: qsTr("This page lets you sign/verify a message (or file contents) with your address.") + translationManager.emptyString wrapMode: Text.Wrap Layout.fillWidth: true @@ -114,7 +114,7 @@ Rectangle { id: modeRow Layout.fillWidth: true - Text { + MoneroComponents.TextPlain { id: modeText Layout.fillWidth: true Layout.topMargin: 12 * scaleRatio diff --git a/pages/Transfer.qml b/pages/Transfer.qml index 4fcf193d..b4563c7c 100644 --- a/pages/Transfer.qml +++ b/pages/Transfer.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 QtQuick.Dialogs 1.2 import moneroComponents.Clipboard 1.0 @@ -196,10 +196,6 @@ Rectangle { Layout.fillWidth: true id: priorityDropdown Layout.topMargin: 5 * scaleRatio - shadowReleasedColor: "#FF4304" - shadowPressedColor: "#B32D00" - releasedColor: "#363636" - pressedColor: "#202020" currentIndex: 0 } } @@ -247,6 +243,7 @@ Rectangle { addressLine.text = clipboardText; } } + inlineButton.text: FontAwesome.qrcode inlineButton.fontPixelSize: 22 inlineButton.fontFamily: FontAwesome.fontFamily @@ -314,6 +311,8 @@ Rectangle { border: false checkedIcon: "qrc:///images/minus-white.png" uncheckedIcon: "qrc:///images/plus-white.png" + imgWidth: 12 * scaleRatio + imgHeight: 12 * scaleRatio fontSize: paymentIdLine.labelFontSize iconOnTheLeft: false Layout.fillWidth: true @@ -343,6 +342,8 @@ Rectangle { border: false checkedIcon: "qrc:///images/minus-white.png" uncheckedIcon: "qrc:///images/plus-white.png" + imgWidth: 12 * scaleRatio + imgHeight: 12 * scaleRatio fontSize: descriptionLine.labelFontSize iconOnTheLeft: false Layout.fillWidth: true @@ -381,8 +382,8 @@ Rectangle { RowLayout { StandardButton { id: sendButton - rightIcon: "../images/rightArrow.png" - rightIconInactive: "../images/rightArrowInactive.png" + rightIcon: "qrc:///images/rightArrow.png" + rightIconInactive: "qrc:///images/rightArrowInactive.png" Layout.topMargin: 4 * scaleRatio text: qsTr("Send") + translationManager.emptyString enabled: { diff --git a/pages/TxKey.qml b/pages/TxKey.qml index ee046b4b..4681df27 100644 --- a/pages/TxKey.qml +++ b/pages/TxKey.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.Controls.Styles 1.4 import QtQuick.Layouts 1.1 @@ -63,7 +63,7 @@ Rectangle { text: qsTr("Prove Transaction") + translationManager.emptyString } - Text { + MoneroComponents.TextPlain { Layout.fillWidth: true text: qsTr("Generate a proof of your incoming/outgoing payment by supplying the transaction ID, the recipient address and an optional message. \n" + "For the case of outgoing payments, you can get a 'Spend Proof' that proves the authorship of a transaction. In this case, you don't need to specify the recipient address.") + translationManager.emptyString @@ -123,7 +123,8 @@ Rectangle { // underline Rectangle { height: 1 - color: "#404040" + color: MoneroComponents.Style.dividerColor + opacity: MoneroComponents.Style.dividerOpacity Layout.fillWidth: true Layout.alignment: Qt.AlignHCenter anchors.bottomMargin: 3 * scaleRatio @@ -135,7 +136,7 @@ Rectangle { text: qsTr("Check Transaction") + translationManager.emptyString } - Text { + MoneroComponents.TextPlain { text: qsTr("Verify that funds were paid to an address by supplying the transaction ID, the recipient address, the message used for signing and the signature.\n" + "For the case with Spend Proof, you don't need to specify the recipient address.") + translationManager.emptyString wrapMode: Text.Wrap @@ -207,14 +208,14 @@ Rectangle { // underline Rectangle { height: 1 - color: "#404040" + color: MoneroComponents.Style.dividerColor + opacity: MoneroComponents.Style.dividerOpacity Layout.fillWidth: true Layout.alignment: Qt.AlignHCenter anchors.bottomMargin: 3 * scaleRatio - } - Text { + MoneroComponents.TextPlain { text: qsTr("If a payment had several transactions then each must be checked and the results combined.") + translationManager.emptyString wrapMode: Text.Wrap Layout.fillWidth: true diff --git a/pages/merchant/Merchant.qml b/pages/merchant/Merchant.qml index d364fdb5..e748a65c 100644 --- a/pages/merchant/Merchant.qml +++ b/pages/merchant/Merchant.qml @@ -1,4 +1,4 @@ -import QtQuick 2.7 +import QtQuick 2.9 import QtQuick.Layouts 1.1 import QtQuick.Controls 2.0 import QtGraphicalEffects 1.0 @@ -33,7 +33,6 @@ Item { property var hiddenAmounts: [] function onPageCompleted() { - appWindow.titlebarToggleOrange(); appWindow.hideMenu(); // prepare tracking @@ -53,8 +52,6 @@ Item { } function onPageClosed() { - appWindow.titlebarToggleOrange(); - // reset component objects timer.running = false root.enableTracking = false @@ -68,7 +65,7 @@ Item { anchors.left: parent.left anchors.right: parent.right height: 300 * scaleRatio - source: "../../images/merchant/bg.png" + source: "qrc:///images/merchant/bg.png" smooth: false } @@ -129,11 +126,12 @@ Item { Layout.preferredWidth: 10 * scaleRatio } - Text { + MoneroComponents.TextPlain { font.pixelSize: 16 * scaleRatio font.bold: true color: "#767676" text: qsTr("Sales") + translationManager.emptyString + themeTransition: false } Item { @@ -267,7 +265,7 @@ Item { width: (parent.width - qrImg.width) - (50 * scaleRatio) height: 32 * scaleRatio - Text { + MoneroComponents.TextPlain { anchors.verticalCenter: parent.verticalCenter anchors.horizontalCenter: parent.horizontalCenter font.pixelSize: 12 * scaleRatio @@ -275,6 +273,7 @@ Item { color: "white" text: "Currently selected address: " + addressLabel + " (Change)" textFormat: Text.RichText + themeTransition: false MouseArea { anchors.fill: parent @@ -291,13 +290,14 @@ Item { width: 220 * scaleRatio height: 32 * scaleRatio - Text { + MoneroComponents.TextPlain { anchors.verticalCenter: parent.verticalCenter anchors.horizontalCenter: parent.horizontalCenter font.pixelSize: 12 * scaleRatio font.bold: false color: "white" text: qsTr("(right-click, save as)") + translationManager.emptyString + themeTransition: false } } } @@ -336,11 +336,12 @@ Item { Layout.preferredWidth: 10 * scaleRatio } - Text { + MoneroComponents.TextPlain { font.pixelSize: 14 * scaleRatio font.bold: true color: "#767676" text: qsTr("Payment URL") + translationManager.emptyString + themeTransition: false } Item { @@ -356,7 +357,7 @@ Item { // Layout.fillHeight: true // color: "transparent" -// Text { +// MoneroComponents.TextPlain { // anchors.verticalCenter: parent.verticalCenter // anchors.right: parent.right // anchors.rightMargin: 20 * scaleRatio @@ -390,7 +391,7 @@ Item { color: "#d9d9d9" } - Text { + MoneroComponents.TextPlain { property string _color: "#767676" Layout.fillWidth: true Layout.margins: 20 * scaleRatio @@ -403,6 +404,7 @@ Item { font.bold: true color: _color text: TxUtils.makeQRCodeString(appWindow.current_address, amountToReceive.text) + themeTransition: false MouseArea { anchors.fill: parent @@ -446,17 +448,18 @@ Item { anchors.left: parent.left anchors.right: parent.right - Text { + MoneroComponents.TextPlain { font.pixelSize: 14 * scaleRatio font.bold: false color: "white" text: qsTr("Amount to receive") + " (XMR)" + themeTransition: false } Image { height: 28 * scaleRatio width: 220 * scaleRatio - source: "../../images/merchant/input_box.png" + source: "qrc:///images/merchant/input_box.png" TextField { id: amountToReceive @@ -496,7 +499,7 @@ Item { width: 220 * scaleRatio } - Text { + MoneroComponents.TextPlain { // @TODO: When we have XMR/USD rate avi. in the future. visible: false font.pixelSize: 14 * scaleRatio @@ -504,13 +507,14 @@ Item { color: "white" text: qsTr("Amount to receive") + " (USD)" opacity: 0.2 + themeTransition: false } Image { visible: false height: 28 * scaleRatio width: 220 * scaleRatio - source: "../../images/merchant/input_box.png" + source: "qrc:///images/merchant/input_box.png" opacity: 0.2 } } @@ -536,12 +540,13 @@ Item { } } - Text { + MoneroComponents.TextPlain { id: content font.pixelSize: 14 * scaleRatio font.bold: false color: "white" text: qsTr("Leave this page") + translationManager.emptyString + themeTransition: false MouseArea { anchors.fill: parent @@ -564,13 +569,14 @@ Item { width: 400 * scaleRatio radius: 5 - Text { + MoneroComponents.TextPlain { anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter font.pixelSize: 14 * scaleRatio font.bold: true color: MoneroComponents.Style.moneroGrey text: qsTr("The merchant page requires a larger window") + translationManager.emptyString + themeTransition: false } } diff --git a/pages/merchant/MerchantCheckbox.qml b/pages/merchant/MerchantCheckbox.qml index 7b2abc6b..7e498dfa 100644 --- a/pages/merchant/MerchantCheckbox.qml +++ b/pages/merchant/MerchantCheckbox.qml @@ -1,7 +1,8 @@ -import QtQuick 2.7 +import QtQuick 2.9 import QtQuick.Layouts 1.1 import QtGraphicalEffects 1.0 +import "../../components" as MoneroComponents RowLayout { id: root @@ -22,16 +23,17 @@ RowLayout { id: imageChecked visible: root.checked anchors.centerIn: parent - source: "../../images/uncheckedIcon.png" + source: "qrc:///images/uncheckedIcon.png" } } - Text { + MoneroComponents.TextPlain { id: content font.pixelSize: 14 * scaleRatio font.bold: false color: "white" text: "" + themeTransition: false } MouseArea { diff --git a/pages/merchant/MerchantTitlebar.qml b/pages/merchant/MerchantTitlebar.qml new file mode 100644 index 00000000..b16a4341 --- /dev/null +++ b/pages/merchant/MerchantTitlebar.qml @@ -0,0 +1,197 @@ +// 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 +import QtQuick.Window 2.0 +import QtGraphicalEffects 1.0 +import QtQuick.Layouts 1.2 + +import FontAwesome 1.0 +import "../../components/" as MoneroComponents +import "../../components/effects/" as MoneroEffects + +Rectangle { + id: root + property int mouseX: 0 + property bool customDecorations: persistentSettings.customDecorations + property bool showMinimizeButton: true + property bool showMaximizeButton: true + property bool showCloseButton: true + + height: { + if(!persistentSettings.customDecorations || isMobile) return 0; + return 50 * scaleRatio; + } + + z: 1 + color: "transparent" + + signal closeClicked + signal maximizeClicked + signal minimizeClicked + + Rectangle { + width: parent.width + height: parent.height + z: parent.z + 1 + color: "#ff6600" + } + + RowLayout { + z: parent.z + 2 + spacing: 0 + anchors.fill: parent + + Item { + Layout.preferredHeight: parent.height + Layout.preferredWidth: parent.height * 3 + } + + // monero logo + Item { + Layout.fillWidth: true + Layout.preferredHeight: parent.height + + Image { + id: imgLogo + width: 132 + height: 22 + + anchors.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter + + source: "qrc:///images/moneroLogo_white.png" + } + } + + // minimize + Rectangle { + color: "transparent" + visible: root.showMinimizeButton + Layout.preferredWidth: parent.height + Layout.preferredHeight: parent.height + + MoneroEffects.ImageMask { + anchors.bottom: parent.bottom + anchors.bottomMargin: 18 + anchors.horizontalCenter: parent.horizontalCenter + height: 3 + width: 15 + image: MoneroComponents.Style.titleBarMinimizeSource + color: "white" + opacity: 0.75 + } + + MouseArea { + anchors.fill: parent + hoverEnabled: true + cursorShape: Qt.PointingHandCursor + onEntered: parent.color = "#44FFFFFF" + onExited: parent.color = "transparent" + onClicked: root.minimizeClicked(); + } + } + + // maximize + Rectangle { + id: test + visible: root.showMaximizeButton + color: "transparent" + Layout.preferredWidth: parent.height + Layout.preferredHeight: parent.height + + Image { + anchors.verticalCenter: parent.verticalCenter + anchors.horizontalCenter: parent.horizontalCenter + source: MoneroComponents.Style._b_titleBarFullscreenSource + sourceSize.width: 16 + sourceSize.height: 16 + smooth: true + mipmap: true + opacity: 0.75 + rotation: appWindow.visibility === Window.FullScreen ? 180 : 0 + } + + MouseArea { + id: buttonArea + anchors.fill: parent + hoverEnabled: true + cursorShape: Qt.PointingHandCursor + onEntered: parent.color = "#44FFFFFF" + onExited: parent.color = "transparent" + onClicked: root.maximizeClicked(); + } + } + + // close + Rectangle { + visible: root.showCloseButton + color: "transparent" + Layout.preferredWidth: parent.height + Layout.preferredHeight: parent.height + + MoneroEffects.ImageMask { + anchors.verticalCenter: parent.verticalCenter + anchors.horizontalCenter: parent.horizontalCenter + height: 16 + width: 16 + image: MoneroComponents.Style._b_titleBarCloseSource + color: "white" + opacity: 0.75 + } + + MouseArea { + anchors.fill: parent + hoverEnabled: true + cursorShape: Qt.PointingHandCursor + onEntered: parent.color = "#44FFFFFF" + onExited: parent.color = "transparent" + onClicked: root.closeClicked(); + } + } + } + + 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/pages/merchant/MerchantTrackingList.qml b/pages/merchant/MerchantTrackingList.qml index a96b8be8..04268237 100644 --- a/pages/merchant/MerchantTrackingList.qml +++ b/pages/merchant/MerchantTrackingList.qml @@ -1,4 +1,4 @@ -import QtQuick 2.0 +import QtQuick 2.9 import QtQuick.Controls 2.0 import QtQuick.Controls.Styles 1.4 import QtQuick.Layouts 1.1 @@ -37,7 +37,7 @@ ListView { color: "#767676" textFormat: Text.RichText text: parent.message - selectionColor: MoneroComponents.Style.dimmedFontColor + selectionColor: MoneroComponents.Style.textSelectionColor selectByMouse: true readOnly: true onFocusChanged: {if(focus === false) deselect() } @@ -73,11 +73,11 @@ ListView { TextEdit { id: dateString anchors.verticalCenter: parent.verticalCenter - font.pixelSize: 12 * scaleRatio + font.pixelSize: 13 * scaleRatio font.bold: false color: "#707070" text: time_date + " (" + Utils.ago(time_epoch) + ") " - selectionColor: MoneroComponents.Style.dimmedFontColor + selectionColor: MoneroComponents.Style.textSelectionColor selectByMouse: true readOnly: true onFocusChanged: {if(focus === false) deselect() } @@ -126,7 +126,7 @@ ListView { font.bold: true color: hide_amount ? "#707070" : "#009F1E" text: hide_amount ? '-' : '+' + amount - selectionColor: MoneroComponents.Style.dimmedFontColor + selectionColor: MoneroComponents.Style.textSelectionColor selectByMouse: true readOnly: true onFocusChanged: {if(focus === false) deselect() } @@ -173,7 +173,7 @@ ListView { } } } - selectionColor: MoneroComponents.Style.dimmedFontColor + selectionColor: MoneroComponents.Style.textSelectionColor selectByMouse: true readOnly: true onFocusChanged: {if(focus === false) deselect() } @@ -199,7 +199,7 @@ ListView { anchors.horizontalCenter: parent.horizontalCenter Layout.preferredWidth: 12 * scaleRatio Layout.preferredHeight: 21 * scaleRatio - source: "../../images/merchant/arrow_right.png" + source: "qrc:///images/merchant/arrow_right.png" } MouseArea { diff --git a/pages/settings/Navbar.qml b/pages/settings/Navbar.qml index 6d58582c..b582c132 100644 --- a/pages/settings/Navbar.qml +++ b/pages/settings/Navbar.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.Controls.Styles 1.4 import QtQuick.Layouts 1.1 @@ -53,11 +53,12 @@ Rectangle { id: grid Layout.alignment: Qt.AlignHCenter columnSpacing: 0 - property string fontColor: "white" - property int fontSize: 13 * scaleRatio + property string fontColorActive: MoneroComponents.Style.blackTheme ? "white" : "white" + property string fontColorInActive: MoneroComponents.Style.blackTheme ? "white" : MoneroComponents.Style.dimmedFontColor + property int fontSize: 15 * scaleRatio property bool fontBold: true property var fontFamily: MoneroComponents.Style.fontRegular.name - property string borderColor: "#808080" + property string borderColor: MoneroComponents.Style.blackTheme ? "#808080" : "#B9B9B9" property int textMargin: { // left-right margins for a given cell if(isMobile){ @@ -68,20 +69,54 @@ Rectangle { return 64; } } - Image { + + Rectangle { + // navbar left side border + id: navBarLeft + property bool isActive: settingsStateView.state === "Wallet" Layout.preferredWidth: 2 Layout.preferredHeight: 32 - source: { - if(settingsStateView.state === "Wallet"){ - return "../../images/settings_navbar_side_active.png" - } else { - return "../../images/settings_navbar_side.png" + color: "transparent" + + Rectangle { + anchors.left: parent.left + anchors.verticalCenter: parent.verticalCenter + width: 1 + height: parent.height - 2 + color: grid.borderColor + } + + ColumnLayout { + anchors.top: parent.top + anchors.bottom: parent.bottom + anchors.right: parent.right + width: 1 + spacing: 0 + + Rectangle { + Layout.preferredHeight: 1 + Layout.preferredWidth: 1 + color: grid.borderColor + } + + Rectangle { + Layout.fillHeight: true + width: 1 + color: navBarLeft.isActive ? grid.borderColor : "transparent" + } + + Rectangle { + color: grid.borderColor + Layout.preferredHeight: 1 + Layout.preferredWidth: 1 } } } + ColumnLayout { // WALLET id: navWallet + property bool isActive: settingsStateView.state === "Wallet" Layout.preferredWidth: navWalletText.width + grid.textMargin Layout.minimumWidth: 72 * scaleRatio Layout.preferredHeight: 32 @@ -94,11 +129,11 @@ Rectangle { } Rectangle { - color: settingsStateView.state === "Wallet" ? grid.borderColor : "transparent" + color: parent.isActive ? grid.borderColor : "transparent" height: 30 * scaleRatio Layout.fillWidth: true - Text { + MoneroComponents.TextPlain { id: navWalletText anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter @@ -106,7 +141,8 @@ Rectangle { font.pixelSize: grid.fontSize font.bold: grid.fontBold text: qsTr("Wallet") + translationManager.emptyString - color: grid.fontColor + color: navWallet.isActive ? grid.fontColorActive : grid.fontColorInActive + themeTransition: false } MouseArea { @@ -132,6 +168,7 @@ Rectangle { ColumnLayout { // UI id: navUI + property bool isActive: settingsStateView.state === "UI" Layout.preferredWidth: navUIText.width + grid.textMargin Layout.preferredHeight: 32 Layout.minimumWidth: 72 * scaleRatio @@ -144,11 +181,11 @@ Rectangle { } Rectangle { - color: settingsStateView.state === "UI" ? grid.borderColor : "transparent" + color: parent.isActive ? grid.borderColor : "transparent" height: 30 * scaleRatio Layout.fillWidth: true - Text { + MoneroComponents.TextPlain { id: navUIText anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter @@ -156,7 +193,8 @@ Rectangle { font.pixelSize: grid.fontSize font.bold: grid.fontBold text: qsTr("Layout") + translationManager.emptyString - color: grid.fontColor + color: navUI.isActive ? grid.fontColorActive : grid.fontColorInActive + themeTransition: false } MouseArea { @@ -182,6 +220,7 @@ Rectangle { ColumnLayout { // NODE id: navNode + property bool isActive: settingsStateView.state === "Node" visible: appWindow.walletMode >= 2 Layout.preferredWidth: navNodeText.width + grid.textMargin Layout.preferredHeight: 32 @@ -195,11 +234,11 @@ Rectangle { } Rectangle { - color: settingsStateView.state === "Node" ? grid.borderColor : "transparent" + color: parent.isActive ? grid.borderColor : "transparent" height: 30 * scaleRatio Layout.fillWidth: true - Text { + MoneroComponents.TextPlain { id: navNodeText anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter @@ -207,7 +246,8 @@ Rectangle { font.pixelSize: grid.fontSize font.bold: grid.fontBold text: qsTr("Node") + translationManager.emptyString - color: grid.fontColor + color: navNode.isActive ? grid.fontColorActive : grid.fontColorInActive + themeTransition: false } MouseArea { @@ -234,6 +274,7 @@ Rectangle { ColumnLayout { // LOG id: navLog + property bool isActive: settingsStateView.state === "Log" visible: appWindow.walletMode >= 2 Layout.preferredWidth: navLogText.width + grid.textMargin Layout.preferredHeight: 32 @@ -247,11 +288,11 @@ Rectangle { } Rectangle { - color: settingsStateView.state === "Log" ? grid.borderColor : "transparent" + color: parent.isActive ? grid.borderColor : "transparent" height: 30 * scaleRatio Layout.fillWidth: true - Text { + MoneroComponents.TextPlain { id: navLogText anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter @@ -259,7 +300,8 @@ Rectangle { font.pixelSize: grid.fontSize font.bold: grid.fontBold text: qsTr("Log") + translationManager.emptyString - color: grid.fontColor + color: navLog.isActive ? grid.fontColorActive : grid.fontColorInActive + themeTransition: false } MouseArea { @@ -286,6 +328,7 @@ Rectangle { ColumnLayout { // INFO id: navInfo + property bool isActive: settingsStateView.state === "Info" Layout.preferredWidth: navInfoText.width + grid.textMargin Layout.preferredHeight: 32 Layout.minimumWidth: 72 * scaleRatio @@ -298,11 +341,11 @@ Rectangle { } Rectangle { - color: settingsStateView.state === "Info" ? grid.borderColor : "transparent" + color: parent.isActive ? grid.borderColor : "transparent" height: 30 * scaleRatio Layout.fillWidth: true - Text { + MoneroComponents.TextPlain { id: navInfoText anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter @@ -310,7 +353,8 @@ Rectangle { font.pixelSize: grid.fontSize font.bold: grid.fontBold text: qsTr("Info") + translationManager.emptyString - color: grid.fontColor + color: navInfo.isActive ? grid.fontColorActive : grid.fontColorInActive + themeTransition: false } MouseArea { @@ -328,19 +372,51 @@ Rectangle { Layout.fillWidth: true } } - Image { + + Rectangle { + // navbar right side border + id: navBarRight + property bool isActive: settingsStateView.state === "Info" Layout.preferredWidth: 2 Layout.preferredHeight: 32 - source: { - if(settingsStateView.state === "Info"){ - return "../../images/settings_navbar_side_active.png" - } else { - return "../../images/settings_navbar_side.png" - } - - } + color: "transparent" rotation: 180 + + Rectangle { + anchors.left: parent.left + anchors.verticalCenter: parent.verticalCenter + width: 1 + height: parent.height - 2 + color: grid.borderColor + } + + ColumnLayout { + anchors.top: parent.top + anchors.bottom: parent.bottom + anchors.right: parent.right + width: 1 + spacing: 0 + + Rectangle { + Layout.preferredHeight: 1 + Layout.preferredWidth: 1 + color: grid.borderColor + } + + Rectangle { + Layout.fillHeight: true + width: 1 + color: navBarRight.isActive ? grid.borderColor : "transparent" + } + + Rectangle { + color: grid.borderColor + Layout.preferredHeight: 1 + Layout.preferredWidth: 1 + } + } } + Rectangle { color: "transparent" Layout.fillWidth: true diff --git a/pages/settings/Settings.qml b/pages/settings/Settings.qml index 9f3d11cd..332fe25e 100644 --- a/pages/settings/Settings.qml +++ b/pages/settings/Settings.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.Controls.Styles 1.4 import QtQuick.Layouts 1.1 diff --git a/pages/settings/SettingsInfo.qml b/pages/settings/SettingsInfo.qml index 4e98463a..207e56cc 100644 --- a/pages/settings/SettingsInfo.qml +++ b/pages/settings/SettingsInfo.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.Layouts 1.1 import QtQuick.Controls 2.0 import QtQuick.Dialogs 1.2 @@ -71,6 +71,7 @@ Rectangle { MoneroComponents.TextBlock { font.pixelSize: 14 * scaleRatio + color: MoneroComponents.Style.dimmedFontColor text: Version.GUI_VERSION + " (Qt " + qtRuntimeVersion + ")" + translationManager.emptyString } @@ -100,6 +101,7 @@ Rectangle { MoneroComponents.TextBlock { font.pixelSize: 14 * scaleRatio + color: MoneroComponents.Style.dimmedFontColor text: Version.GUI_MONERO_VERSION + translationManager.emptyString } @@ -130,6 +132,7 @@ Rectangle { MoneroComponents.TextBlock { Layout.fillWidth: true Layout.maximumWidth: 360 * scaleRatio + color: MoneroComponents.Style.dimmedFontColor font.pixelSize: 14 * scaleRatio text: { var wallet_path = walletPath(); @@ -168,8 +171,8 @@ Rectangle { id: restoreHeightText Layout.fillWidth: true textFormat: Text.RichText + color: MoneroComponents.Style.dimmedFontColor font.pixelSize: 14 * scaleRatio - font.bold: true property var style: "" text: (currentWallet ? currentWallet.walletCreationHeight : "") + style + qsTr(" (Click to change)") + translationManager.emptyString onLinkActivated: { @@ -255,6 +258,7 @@ Rectangle { MoneroComponents.TextBlock { Layout.fillWidth: true + color: MoneroComponents.Style.dimmedFontColor font.pixelSize: 14 * scaleRatio text: walletLogPath } @@ -285,9 +289,41 @@ Rectangle { MoneroComponents.TextBlock { Layout.fillWidth: true + color: MoneroComponents.Style.dimmedFontColor font.pixelSize: 14 * scaleRatio text: walletModeString } + + Rectangle { + height: 1 + Layout.topMargin: 2 * scaleRatio + Layout.bottomMargin: 2 * scaleRatio + Layout.fillWidth: true + color: MoneroComponents.Style.dividerColor + opacity: MoneroComponents.Style.dividerOpacity + } + + Rectangle { + height: 1 + Layout.topMargin: 2 * scaleRatio + Layout.bottomMargin: 2 * scaleRatio + Layout.fillWidth: true + color: MoneroComponents.Style.dividerColor + opacity: MoneroComponents.Style.dividerOpacity + } + + MoneroComponents.TextBlock { + Layout.fillWidth: true + font.pixelSize: 14 * scaleRatio + text: qsTr("Graphics mode: ") + translationManager.emptyString + } + + MoneroComponents.TextBlock { + Layout.fillWidth: true + color: MoneroComponents.Style.dimmedFontColor + font.pixelSize: 14 * scaleRatio + text: isOpenGL ? "OpenGL" : "Low graphics mode" + } } // Copy info to clipboard @@ -311,6 +347,7 @@ Rectangle { data += "\nWallet log path: " + walletLogPath; data += "\nWallet mode: " + walletModeString; + data += "\nGraphics: " + isOpenGL ? "OpenGL" : "Low graphics mode"; console.log("Copied to clipboard"); clipboard.setText(data); diff --git a/pages/settings/SettingsLayout.qml b/pages/settings/SettingsLayout.qml index 7a294a2d..ab1919ee 100644 --- a/pages/settings/SettingsLayout.qml +++ b/pages/settings/SettingsLayout.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.Layouts 1.1 import QtQuick.Controls 2.0 import QtQuick.Dialogs 1.2 @@ -96,6 +96,16 @@ Rectangle { text: qsTr("Lock wallet on inactivity") + translationManager.emptyString } + MoneroComponents.CheckBox { + id: themeCheckbox + checked: !MoneroComponents.Style.blackTheme + text: qsTr("Light theme") + translationManager.emptyString + onClicked: { + MoneroComponents.Style.blackTheme = !MoneroComponents.Style.blackTheme; + persistentSettings.blackTheme = MoneroComponents.Style.blackTheme; + } + } + ColumnLayout { visible: userInActivityCheckbox.checked Layout.fillWidth: true @@ -131,7 +141,7 @@ Rectangle { width: parent.availableWidth height: implicitHeight radius: 2 - color: MoneroComponents.Style.grey + color: MoneroComponents.Style.progressBarBackgroundColor Rectangle { width: parent.visualPosition * parent.width diff --git a/pages/settings/SettingsLog.qml b/pages/settings/SettingsLog.qml index 1933ae93..b9d35865 100644 --- a/pages/settings/SettingsLog.qml +++ b/pages/settings/SettingsLog.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.Layouts 1.1 import QtQuick.Controls 2.0 @@ -60,7 +60,7 @@ Rectangle { // opacity: MoneroComponents.Style.dividerOpacity // } - Text { + MoneroComponents.TextPlain { Layout.bottomMargin: 2 * scaleRatio color: MoneroComponents.Style.defaultFontColor font.pixelSize: 18 * scaleRatio @@ -102,10 +102,6 @@ Rectangle { } Layout.fillWidth: true Layout.preferredWidth: logColumn.width - shadowReleasedColor: "#FF4304" - shadowPressedColor: "#B32D00" - releasedColor: "#363636" - pressedColor: "#202020" z: parent.z + 1 } @@ -129,7 +125,7 @@ Rectangle { } } - Text { + MoneroComponents.TextPlain { Layout.topMargin: 10 * scaleRatio Layout.bottomMargin: 2 * scaleRatio color: MoneroComponents.Style.defaultFontColor @@ -146,7 +142,7 @@ Rectangle { Rectangle { anchors.fill: parent color: "transparent" - border.color: MoneroComponents.Style.inputBorderColorActive + border.color: MoneroComponents.Style.inputBorderColorInActive border.width: 1 radius: 4 } @@ -158,7 +154,7 @@ Rectangle { TextArea.flickable: TextArea { id : consoleArea color: MoneroComponents.Style.defaultFontColor - selectionColor: MoneroComponents.Style.dimmedFontColor + selectionColor: MoneroComponents.Style.textSelectionColor textFormat: TextEdit.RichText selectByMouse: true selectByKeyboard: true @@ -172,11 +168,11 @@ Rectangle { } 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 @@ -196,7 +192,7 @@ Rectangle { timeZoneName: undefined }); - var _timestamp = log_color("[" + timestamp + "]", "#FFFFFF"); + var _timestamp = log_color("[" + timestamp + "]", MoneroComponents.Style.defaultFontColor); var _msg = log_color(msg, color); consoleArea.append(_timestamp + " " + _msg); diff --git a/pages/settings/SettingsNode.qml b/pages/settings/SettingsNode.qml index 81386674..8159ea87 100644 --- a/pages/settings/SettingsNode.qml +++ b/pages/settings/SettingsNode.qml @@ -26,10 +26,13 @@ // 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.Layouts 1.1 import QtQuick.Controls 2.0 +import FontAwesome 1.0 + import "../../components" as MoneroComponents +import "../../components/effects" as MoneroEffects Rectangle{ color: "transparent" @@ -73,7 +76,7 @@ Rectangle{ Layout.fillHeight: true anchors.top: parent.top anchors.bottom: parent.bottom - color: "white" + color: MoneroComponents.Style.blackTheme ? "white" : "darkgrey" width: 2 } @@ -93,21 +96,27 @@ Rectangle{ anchors.leftMargin: 16 * scaleRatio anchors.verticalCenter: parent.verticalCenter - Image{ + MoneroEffects.ImageMask { height: 27 width: 27 anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter - source: "../../images/settings_local.png" + fontAwesomeFallbackIcon: FontAwesome.shield + fontAwesomeFallbackSize: 26 + image: "qrc:///images/settings_local.svg" + + color: MoneroComponents.Style.defaultFontColor + opacity: MoneroComponents.Style.blackTheme ? 1.0 : 0.8 } } - Text { + MoneroComponents.TextPlain { id: localNodeHeader anchors.left: localNodeIcon.right anchors.leftMargin: 14 * scaleRatio anchors.top: parent.top - color: "white" + color: MoneroComponents.Style.defaultFontColor + opacity: MoneroComponents.Style.blackTheme ? 1.0 : 0.8 font.bold: true font.family: MoneroComponents.Style.fontRegular.name font.pixelSize: 16 * scaleRatio @@ -173,7 +182,7 @@ Rectangle{ Layout.fillHeight: true anchors.top: parent.top anchors.bottom: parent.bottom - color: "white" + color: MoneroComponents.Style.blackTheme ? "white" : "darkgrey" width: 2 } @@ -193,21 +202,26 @@ Rectangle{ anchors.leftMargin: 16 * scaleRatio anchors.verticalCenter: parent.verticalCenter - Image{ - height: 27 + MoneroEffects.ImageMask { + height: 29 width: 22 anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter - source: "../../images/settings_remote.png" + fontAwesomeFallbackIcon: FontAwesome.cloudDownload + fontAwesomeFallbackSize: 26 + image: "qrc:///images/settings_remote.svg" + color: MoneroComponents.Style.defaultFontColor + opacity: MoneroComponents.Style.blackTheme ? 1.0 : 0.8 } } - Text { + MoneroComponents.TextPlain { id: remoteNodeHeader anchors.left: remoteNodeIcon.right anchors.leftMargin: 14 * scaleRatio anchors.top: parent.top - color: "white" + color: MoneroComponents.Style.defaultFontColor + opacity: MoneroComponents.Style.blackTheme ? 1.0 : 0.8 font.bold: true font.family: MoneroComponents.Style.fontRegular.name font.pixelSize: 16 * scaleRatio @@ -282,12 +296,6 @@ Rectangle{ MoneroComponents.RemoteNodeEdit { id: remoteNodeEdit Layout.minimumWidth: 100 * scaleRatio - - lineEditBackgroundColor: "transparent" - lineEditFontColor: "white" - lineEditFontBold: false - lineEditBorderColor: Qt.rgba(255, 255, 255, 0.35) - labelFontSize: 14 * scaleRatio placeholderFontSize: 15 * scaleRatio daemonAddrLabelText: qsTr("Address") @@ -436,14 +444,6 @@ Rectangle{ id: bootstrapNodeEdit Layout.minimumWidth: 100 * scaleRatio Layout.bottomMargin: 20 * scaleRatio - - lineEditBackgroundColor: "transparent" - lineEditFontColor: "white" - lineEditBorderColor: MoneroComponents.Style.inputBorderColorActive - placeholderFontSize: 15 * scaleRatio - labelFontSize: 14 * scaleRatio - lineEditFontBold: false - lineEditFontSize: 15 * scaleRatio daemonAddrLabelText: qsTr("Bootstrap Address") daemonPortLabelText: qsTr("Bootstrap Port") diff --git a/pages/settings/SettingsWallet.qml b/pages/settings/SettingsWallet.qml index cd1b17cc..92482ef5 100644 --- a/pages/settings/SettingsWallet.qml +++ b/pages/settings/SettingsWallet.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.Layouts 1.1 import QtQuick.Controls 2.0 import QtQuick.Dialogs 1.2 @@ -69,39 +69,27 @@ Rectangle { Layout.alignment: Qt.AlignVCenter spacing: 0 - Text { + MoneroComponents.TextPlain { Layout.fillWidth: true Layout.preferredHeight: 20 * scaleRatio Layout.topMargin: 8 * scaleRatio - color: "white" + color: MoneroComponents.Style.defaultFontColor + opacity: MoneroComponents.Style.blackTheme ? 1.0 : 0.8 font.bold: true font.family: MoneroComponents.Style.fontRegular.name font.pixelSize: 16 * scaleRatio text: qsTr("Close this wallet") + translationManager.emptyString } - TextArea { - Layout.fillWidth: true + MoneroComponents.TextPlainArea { color: MoneroComponents.Style.dimmedFontColor - font.family: MoneroComponents.Style.fontRegular.name - font.pixelSize: 14 * scaleRatio - horizontalAlignment: TextInput.AlignLeft - selectByMouse: false - wrapMode: Text.WordWrap; - textMargin: 0 - leftPadding: 0 - topPadding: 0 - text: qsTr("Logs out of this wallet.") + translationManager.emptyString + colorBlackTheme: MoneroComponents.Style._b_dimmedFontColor + colorWhiteTheme: MoneroComponents.Style._w_dimmedFontColor width: parent.width - readOnly: true - - // @TODO: Legacy. Remove after Qt 5.8. - // https://stackoverflow.com/questions/41990013 - MouseArea { - anchors.fill: parent - enabled: false - } - } + Layout.fillWidth: true + horizontalAlignment: TextInput.AlignLeft + text: qsTr("Logs out of this wallet.") + translationManager.emptyString + } } MoneroComponents.StandardButton { @@ -138,39 +126,27 @@ Rectangle { Layout.alignment: Qt.AlignVCenter spacing: 0 - Text { + MoneroComponents.TextPlain { Layout.fillWidth: true Layout.preferredHeight: 20 * scaleRatio Layout.topMargin: 8 * scaleRatio - color: "white" + color: MoneroComponents.Style.defaultFontColor + opacity: MoneroComponents.Style.blackTheme ? 1.0 : 0.8 font.bold: true font.family: MoneroComponents.Style.fontRegular.name font.pixelSize: 16 * scaleRatio text: qsTr("Create a view-only wallet") + translationManager.emptyString } - TextArea { - Layout.fillWidth: true + MoneroComponents.TextPlainArea { color: MoneroComponents.Style.dimmedFontColor - font.family: MoneroComponents.Style.fontRegular.name - font.pixelSize: 14 * scaleRatio - horizontalAlignment: TextInput.AlignLeft - selectByMouse: false - wrapMode: Text.WordWrap; - textMargin: 0 - leftPadding: 0 - topPadding: 0 - text: qsTr("Creates a new wallet that can only view and initiate transactions, but requires a spendable wallet to sign transactions before sending.") + translationManager.emptyString + colorBlackTheme: MoneroComponents.Style._b_dimmedFontColor + colorWhiteTheme: MoneroComponents.Style._w_dimmedFontColor width: parent.width - readOnly: true - - // @TODO: Legacy. Remove after Qt 5.8. - // https://stackoverflow.com/questions/41990013 - MouseArea { - anchors.fill: parent - enabled: false - } - } + Layout.fillWidth: true + horizontalAlignment: TextInput.AlignLeft + text: qsTr("Creates a new wallet that can only view and initiate transactions, but requires a spendable wallet to sign transactions before sending.") + translationManager.emptyString + } } MoneroComponents.StandardButton { @@ -215,39 +191,27 @@ Rectangle { Layout.alignment: Qt.AlignVCenter spacing: 0 - Text { + MoneroComponents.TextPlain { Layout.fillWidth: true Layout.preferredHeight: 20 * scaleRatio Layout.topMargin: 8 * scaleRatio - color: "white" + color: MoneroComponents.Style.defaultFontColor + opacity: MoneroComponents.Style.blackTheme ? 1.0 : 0.8 font.bold: true font.family: MoneroComponents.Style.fontRegular.name font.pixelSize: 16 * scaleRatio text: qsTr("Show seed & keys") + translationManager.emptyString } - TextArea { - Layout.fillWidth: true + MoneroComponents.TextPlainArea { color: MoneroComponents.Style.dimmedFontColor - font.family: MoneroComponents.Style.fontRegular.name - font.pixelSize: 14 * scaleRatio - horizontalAlignment: TextInput.AlignLeft - selectByMouse: false - wrapMode: Text.WordWrap; - textMargin: 0 * scaleRatio - leftPadding: 0 - topPadding: 0 - text: qsTr("Store this information safely to recover your wallet in the future.") + translationManager.emptyString + colorBlackTheme: MoneroComponents.Style._b_dimmedFontColor + colorWhiteTheme: MoneroComponents.Style._w_dimmedFontColor width: parent.width - readOnly: true - - // @TODO: Legacy. Remove after Qt 5.8. - // https://stackoverflow.com/questions/41990013 - MouseArea { - anchors.fill: parent - enabled: false - } - } + Layout.fillWidth: true + horizontalAlignment: TextInput.AlignLeft + text: qsTr("Store this information safely to recover your wallet in the future.") + translationManager.emptyString + } } MoneroComponents.StandardButton { @@ -281,39 +245,27 @@ Rectangle { Layout.alignment: Qt.AlignVCenter spacing: 0 - Text { + MoneroComponents.TextPlain { Layout.fillWidth: true Layout.preferredHeight: 20 * scaleRatio Layout.topMargin: 8 * scaleRatio - color: "white" + color: MoneroComponents.Style.defaultFontColor + opacity: MoneroComponents.Style.blackTheme ? 1.0 : 0.8 font.bold: true font.family: MoneroComponents.Style.fontRegular.name font.pixelSize: 16 * scaleRatio text: qsTr("Rescan wallet balance") + translationManager.emptyString } - TextArea { - Layout.fillWidth: true + MoneroComponents.TextPlainArea { color: MoneroComponents.Style.dimmedFontColor - font.family: MoneroComponents.Style.fontRegular.name - font.pixelSize: 14 * scaleRatio - horizontalAlignment: TextInput.AlignLeft - selectByMouse: false - wrapMode: Text.WordWrap; - textMargin: 0 - leftPadding: 0 - topPadding: 0 - text: qsTr("Use this feature if you think the shown balance is not accurate.") + translationManager.emptyString + colorBlackTheme: MoneroComponents.Style._b_dimmedFontColor + colorWhiteTheme: MoneroComponents.Style._w_dimmedFontColor width: parent.width - readOnly: true - - // @TODO: Legacy. Remove after Qt 5.8. - // https://stackoverflow.com/questions/41990013 - MouseArea { - anchors.fill: parent - enabled: false - } - } + Layout.fillWidth: true + horizontalAlignment: TextInput.AlignLeft + text: qsTr("Use this feature if you think the shown balance is not accurate.") + translationManager.emptyString + } } MoneroComponents.StandardButton { @@ -359,39 +311,27 @@ Rectangle { Layout.alignment: Qt.AlignVCenter spacing: 0 - Text { + MoneroComponents.TextPlain { Layout.fillWidth: true Layout.preferredHeight: 20 * scaleRatio Layout.topMargin: 8 * scaleRatio - color: "white" + color: MoneroComponents.Style.defaultFontColor + opacity: MoneroComponents.Style.blackTheme ? 1.0 : 0.8 font.bold: true font.family: MoneroComponents.Style.fontRegular.name font.pixelSize: 16 * scaleRatio text: qsTr("Change wallet password") + translationManager.emptyString } - TextArea { - Layout.fillWidth: true + MoneroComponents.TextPlainArea { color: MoneroComponents.Style.dimmedFontColor - font.family: MoneroComponents.Style.fontRegular.name - font.pixelSize: 14 * scaleRatio - horizontalAlignment: TextInput.AlignLeft - selectByMouse: false - wrapMode: Text.WordWrap; - textMargin: 0 - leftPadding: 0 - topPadding: 0 - text: qsTr("Change the password of your wallet.") + translationManager.emptyString + colorBlackTheme: MoneroComponents.Style._b_dimmedFontColor + colorWhiteTheme: MoneroComponents.Style._w_dimmedFontColor width: parent.width - readOnly: true - - // @TODO: Legacy. Remove after Qt 5.8. - // https://stackoverflow.com/questions/41990013 - MouseArea { - anchors.fill: parent - enabled: false - } - } + Layout.fillWidth: true + horizontalAlignment: TextInput.AlignLeft + text: qsTr("Change the password of your wallet.") + translationManager.emptyString + } } MoneroComponents.StandardButton { diff --git a/qml.qrc b/qml.qrc index c3ec2223..cbd65822 100644 --- a/qml.qrc +++ b/qml.qrc @@ -30,6 +30,7 @@ components/TipItem.qml images/tip.png components/Scroll.qml + components/MenuButtonDivider.qml images/moneroIcon.png components/StandardDropdown.qml images/whiteDropIndicator.png @@ -41,10 +42,7 @@ images/prevMonth.png images/prevMonth@2x.png components/TitleBar.qml - images/collapseRightPanel.png images/expandRightPanel.png - images/dropdownCopy.png - images/dropdownCopy@2x.png images/moneroLogo2.png components/PrivacyLevelSmall.qml images/resize.png @@ -55,7 +53,6 @@ images/nextPage@2x.png images/openAccount.png images/recoverWallet.png - images/copyToClipboard.png lang/languages.xml lang/flags/bd.png lang/flags/bg.png @@ -103,6 +100,7 @@ pages/Receive.qml pages/TxKey.qml pages/SharedRingDB.qml + components/effects/ImageMask.qml components/IconButton.qml components/PassphraseDialog.qml components/PasswordDialog.qml @@ -122,24 +120,14 @@ components/RemoteNodeEdit.qml pages/Keys.qml images/appicon.ico - images/right.png - images/right@2x.png images/card-background.png images/card-background@2x.png - images/minimize.png - images/minimize@2x.png - images/fullscreen.png - images/fullscreen@2x.png - images/close.png - images/close@2x.png images/moneroLogo_white.png images/question.png images/question@2x.png - images/expand.png - images/expand@2x.png - images/titlebarGradient.jpg images/titlebarLogo.png images/titlebarLogo@2x.png + pages/merchant/MerchantTitlebar.qml images/menuButtonGradient.png fonts/Roboto-Medium.ttf fonts/Roboto-Regular.ttf @@ -154,16 +142,13 @@ components/InlineButton.qml images/lightning.png images/lightning@2x.png - images/leftPanelBg.jpg images/logout.png images/logout@2x.png images/moneroIcon-28x28.png images/moneroIcon-28x28@2x.png images/lightning-white.png images/lightning-white@2x.png - images/middlePanelBg.jpg components/InputMulti.qml - images/checkedIcon-black.png components/LineEditMulti.qml components/LabelButton.qml components/LabelSubheader.qml @@ -173,6 +158,8 @@ images/rightArrow@2x.png images/historyBorderRadius.png components/CheckBox2.qml + components/TextPlain.qml + components/TextPlainArea.qml js/TxUtils.js images/warning.png images/warning@2x.png @@ -181,8 +168,6 @@ js/Windows.js js/Utils.js components/RadioButton.qml - images/editIcon.png - images/editIcon@2x.png pages/settings/Settings.qml pages/settings/SettingsWallet.qml pages/settings/SettingsNode.qml @@ -190,12 +175,8 @@ pages/settings/SettingsLayout.qml pages/settings/SettingsInfo.qml pages/settings/Navbar.qml - images/settings_remote.png - images/settings_remote@2x.png - images/settings_navbar_side.png - images/settings_navbar_side_active.png - images/settings_local.png - images/settings_local@2x.png + images/settings_local.svg + images/settings_remote.svg components/WarningBox.qml images/miningxmr.png images/miningxmr@2x.png @@ -261,9 +242,26 @@ wizard/WizardOpenWallet1.qml images/arrow-right-in-circle.png images/arrow-right-in-circle@2x.png - images/rename.png - images/rename@2x.png - images/clipboard.png - images/clipboard@2x.png + images/themes/white/leftPanelBg.jpg + images/themes/white/middlePanelBg.jpg + images/right.svg + images/middlePanelShadow.png + images/themes/white/titlebarLogo@2x.png + images/themes/white/titlebarLogo.png + images/sidebar.svg + images/fullscreen.svg + images/close.svg + images/minimize.svg + images/themes/white/close.svg + images/themes/white/fullscreen.svg + images/themes/white/minimize.svg + images/themes/white/question.svg + images/themes/white/expand.svg + components/effects/ColorTransition.qml + components/effects/GradientBackground.qml + images/check-white.svg + images/copy.svg + images/edit.svg + images/arrow-right-in-circle-outline-medium-white.svg diff --git a/wizard/WizardAskPassword.qml b/wizard/WizardAskPassword.qml index 7455baf4..0b73ac7a 100644 --- a/wizard/WizardAskPassword.qml +++ b/wizard/WizardAskPassword.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.Layouts 1.2 import QtQuick.Controls 2.0 @@ -113,7 +113,7 @@ ColumnLayout { font.pixelSize: 13 * scaleRatio font.bold: true color: MoneroComponents.Style.defaultFontColor - height:18 * scaleRatio + height: 18 * scaleRatio passwordCharacter: "*" } @@ -123,7 +123,7 @@ ColumnLayout { Layout.preferredHeight: 8 radius: 8 * scaleRatio - color: "#333333" // progressbar bg + color: MoneroComponents.Style.progressBarBackgroundColor Rectangle { id: fillRect @@ -134,17 +134,16 @@ ColumnLayout { property int maxWidth: bar.width * scaleRatio width: (maxWidth * root.passwordFill) / 100 radius: 8 - color: "#FA6800" + color: MoneroComponents.Style.orange } Rectangle { - color:"#333" + color: MoneroComponents.Style.defaultFontColor anchors.bottom: parent.bottom anchors.left: parent.left anchors.leftMargin: 8 * scaleRatio } } - } ColumnLayout { @@ -179,21 +178,21 @@ ColumnLayout { font.family: MoneroComponents.Style.fontLight.name font.pixelSize: 15 * scaleRatio color: MoneroComponents.Style.defaultFontColor - selectionColor: MoneroComponents.Style.dimmedFontColor - selectedTextColor: MoneroComponents.Style.defaultFontColor + selectionColor: MoneroComponents.Style.textSelectionColor + selectedTextColor: MoneroComponents.Style.textSelectedColor text: walletOptionsPassword background: Rectangle { radius: 4 - border.color: Qt.rgba(255, 255, 255, 0.35) + border.color: MoneroComponents.Style.inputBorderColorActive border.width: 1 color: "transparent" Image { width: 12 * scaleRatio height: 16 * scaleRatio - source: "../images/lockIcon.png" + source: "qrc:///images/lockIcon.png" anchors.verticalCenter: parent.verticalCenter anchors.right: parent.right anchors.rightMargin: 20 @@ -234,21 +233,21 @@ ColumnLayout { font.family: MoneroComponents.Style.fontLight.name font.pixelSize: 15 * scaleRatio color: MoneroComponents.Style.defaultFontColor - selectionColor: MoneroComponents.Style.dimmedFontColor - selectedTextColor: MoneroComponents.Style.defaultFontColor + selectionColor: MoneroComponents.Style.textSelectionColor + selectedTextColor: MoneroComponents.Style.textSelectedColor text: walletOptionsPassword background: Rectangle { radius: 4 - border.color: Qt.rgba(255, 255, 255, 0.35) + border.color: MoneroComponents.Style.inputBorderColorActive border.width: 1 color: "transparent" Image { width: 12 height: 16 - source: "../images/lockIcon.png" + source: "qrc:///images/lockIcon.png" anchors.verticalCenter: parent.verticalCenter anchors.right: parent.right anchors.rightMargin: 20 diff --git a/wizard/WizardController.qml b/wizard/WizardController.qml index 1bb76a25..76b9d923 100644 --- a/wizard/WizardController.qml +++ b/wizard/WizardController.qml @@ -27,18 +27,20 @@ // THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. import QtQml 2.0 -import QtQuick 2.7 +import QtQuick 2.9 import QtQuick.Controls 2.0 import QtQuick.Controls 1.4 -import QtQuick.Layouts 1.1 -import QtQuick.Dialogs 1.2 import QtGraphicalEffects 1.0 +import QtQuick.Controls.Styles 1.4 +import QtQuick.Layouts 1.2 +import QtQuick.Dialogs 1.2 import moneroComponents.Wallet 1.0 import "../js/Wizard.js" as Wizard import "../js/Windows.js" as Windows import "../js/Utils.js" as Utils import "../components" as MoneroComponents +import "../components/effects/" as MoneroEffects import "../pages" Rectangle { @@ -119,11 +121,6 @@ Rectangle { } } - Image { - opacity: 1.0 - anchors.fill: parent - source: "../images/middlePanelBg.jpg" - } Rectangle { id: wizardStateView @@ -247,6 +244,19 @@ Rectangle { } ] + MoneroEffects.GradientBackground { + anchors.fill: parent + fallBackColor: MoneroComponents.Style.middlePanelBackgroundColor + initialStartColor: MoneroComponents.Style.wizardBackgroundGradientStart + initialStopColor: MoneroComponents.Style.middlePanelBackgroundGradientStop + blackColorStart: MoneroComponents.Style._b_wizardBackgroundGradientStart + blackColorStop: MoneroComponents.Style._b_middlePanelBackgroundGradientStop + whiteColorStart: MoneroComponents.Style._w_wizardBackgroundGradientStart + whiteColorStop: MoneroComponents.Style._w_middlePanelBackgroundGradientStop + start: Qt.point(0, 0) + end: Qt.point(height, width) + } + Flickable { id: wizardFlickable anchors.fill: parent diff --git a/wizard/WizardCreateDevice1.qml b/wizard/WizardCreateDevice1.qml index ce2a6c4a..b8ec9f7c 100644 --- a/wizard/WizardCreateDevice1.qml +++ b/wizard/WizardCreateDevice1.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.Dialogs 1.2 import QtQuick.Layouts 1.2 import QtQuick.Controls 2.0 @@ -156,8 +156,6 @@ Rectangle { dataModel: deviceNameModel Layout.fillWidth: true Layout.topMargin: 6 * scaleRatio - releasedColor: "#363636" - pressedColor: "#202020" } } } @@ -171,8 +169,8 @@ Rectangle { color: MoneroComponents.Style.errorColor font.pixelSize: 16 * scaleRatio - selectionColor: MoneroComponents.Style.dimmedFontColor - selectedTextColor: MoneroComponents.Style.defaultFontColor + selectionColor: MoneroComponents.Style.textSelectionColor + selectedTextColor: MoneroComponents.Style.textSelectedColor selectByMouse: true wrapMode: Text.WordWrap diff --git a/wizard/WizardCreateWallet1.qml b/wizard/WizardCreateWallet1.qml index 4906f954..c67f2101 100644 --- a/wizard/WizardCreateWallet1.qml +++ b/wizard/WizardCreateWallet1.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.Dialogs 1.2 import QtQuick.Layouts 1.2 import QtQuick.Controls 2.0 diff --git a/wizard/WizardCreateWallet2.qml b/wizard/WizardCreateWallet2.qml index 6a3d3284..f3dd60bc 100644 --- a/wizard/WizardCreateWallet2.qml +++ b/wizard/WizardCreateWallet2.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.Layouts 1.2 import QtQuick.Controls 2.0 diff --git a/wizard/WizardCreateWallet3.qml b/wizard/WizardCreateWallet3.qml index 0c3a8e99..f6113ecf 100644 --- a/wizard/WizardCreateWallet3.qml +++ b/wizard/WizardCreateWallet3.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.Layouts 1.2 import QtQuick.Controls 2.0 diff --git a/wizard/WizardCreateWallet4.qml b/wizard/WizardCreateWallet4.qml index 15269703..3d0f1958 100644 --- a/wizard/WizardCreateWallet4.qml +++ b/wizard/WizardCreateWallet4.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.Layouts 1.2 import QtQuick.Controls 2.0 diff --git a/wizard/WizardDaemonSettings.qml b/wizard/WizardDaemonSettings.qml index 3d672747..74290aac 100644 --- a/wizard/WizardDaemonSettings.qml +++ b/wizard/WizardDaemonSettings.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.Dialogs 1.2 import QtQuick.Layouts 1.2 import QtQuick.Controls 2.0 @@ -105,8 +105,8 @@ ColumnLayout { } } - selectionColor: MoneroComponents.Style.dimmedFontColor - selectedTextColor: MoneroComponents.Style.defaultFontColor + selectionColor: MoneroComponents.Style.textSelectionColor + selectedTextColor: MoneroComponents.Style.textSelectedColor selectByMouse: true wrapMode: Text.WordWrap @@ -133,8 +133,8 @@ ColumnLayout { } } - selectionColor: MoneroComponents.Style.dimmedFontColor - selectedTextColor: MoneroComponents.Style.defaultFontColor + selectionColor: MoneroComponents.Style.textSelectionColor + selectedTextColor: MoneroComponents.Style.textSelectedColor selectByMouse: true wrapMode: Text.WordWrap @@ -153,16 +153,8 @@ ColumnLayout { MoneroComponents.RemoteNodeEdit { id: bootstrapNodeEdit Layout.minimumWidth: 300 * scaleRatio - //labelText: qsTr("Bootstrap node (leave blank if not wanted)") + translationManager.emptyString - lineEditBackgroundColor: "transparent" - lineEditFontColor: MoneroComponents.Style.defaultFontColor - lineEditFontBold: false - lineEditBorderColor: Qt.rgba(255, 255, 255, 0.35) - labelFontSize: 14 * scaleRatio - placeholderFontSize: 15 * scaleRatio - daemonAddrText: persistentSettings.bootstrapNodeAddress.split(":")[0].trim() daemonPortText: { var node_split = persistentSettings.bootstrapNodeAddress.split(":"); @@ -203,13 +195,6 @@ ColumnLayout { property var rna: persistentSettings.remoteNodeAddress daemonAddrText: rna.search(":") != -1 ? rna.split(":")[0].trim() : "" daemonPortText: rna.search(":") != -1 ? (rna.split(":")[1].trim() == "") ? appWindow.getDefaultDaemonRpcPort(persistentSettings.nettype) : persistentSettings.remoteNodeAddress.split(":")[1] : "" - - lineEditBackgroundColor: "transparent" - lineEditFontColor: MoneroComponents.Style.defaultFontColor - lineEditFontBold: false - lineEditBorderColor: Qt.rgba(255, 255, 255, 0.35) - labelFontSize: 14 * scaleRatio - placeholderFontSize: 15 * scaleRatio } } } diff --git a/wizard/WizardHeader.qml b/wizard/WizardHeader.qml index 7c27413f..6e984812 100644 --- a/wizard/WizardHeader.qml +++ b/wizard/WizardHeader.qml @@ -30,7 +30,7 @@ import "../js/Wizard.js" as Wizard import "../components" import "../components" as MoneroComponents -import QtQuick 2.7 +import QtQuick 2.9 import QtQuick.Layouts 1.2 import QtQuick.Controls 2.0 @@ -46,6 +46,7 @@ ColumnLayout { Layout.fillWidth: true font.family: MoneroComponents.Style.fontRegular.name color: MoneroComponents.Style.defaultFontColor + opacity: MoneroComponents.Style.blackTheme ? 1.0 : 0.8 font.pixelSize: { if(wizardController.layoutScale === 2 ){ return 34 * scaleRatio; @@ -54,8 +55,8 @@ ColumnLayout { } } - selectionColor: MoneroComponents.Style.dimmedFontColor - selectedTextColor: MoneroComponents.Style.defaultFontColor + selectionColor: MoneroComponents.Style.textSelectionColor + selectedTextColor: MoneroComponents.Style.textSelectedColor selectByMouse: true wrapMode: Text.WordWrap @@ -83,8 +84,8 @@ ColumnLayout { } } - selectionColor: MoneroComponents.Style.dimmedFontColor - selectedTextColor: MoneroComponents.Style.defaultFontColor + selectionColor: MoneroComponents.Style.textSelectionColor + selectedTextColor: MoneroComponents.Style.textSelectedColor selectByMouse: true wrapMode: Text.WordWrap diff --git a/wizard/WizardHome.qml b/wizard/WizardHome.qml index 655a53e2..3243a5eb 100644 --- a/wizard/WizardHome.qml +++ b/wizard/WizardHome.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.Dialogs 1.2 import QtQuick.Layouts 1.2 import QtQuick.Controls 2.0 @@ -64,7 +64,7 @@ Rectangle { WizardMenuItem { headerText: qsTr("Create a new wallet") + translationManager.emptyString bodyText: qsTr("Choose this option if this is your first time using Monero.") + translationManager.emptyString - imageIcon: "../images/create-wallet.png" + imageIcon: "qrc:///images/create-wallet.png" onMenuClicked: { wizardController.restart(); @@ -85,7 +85,7 @@ Rectangle { WizardMenuItem { headerText: qsTr("Create a new wallet from hardware") + translationManager.emptyString bodyText: qsTr("Connect your hardware wallet to create a new Monero wallet.") + translationManager.emptyString - imageIcon: "../images/restore-wallet-from-hardware.png" + imageIcon: "qrc:///images/restore-wallet-from-hardware.png" onMenuClicked: { wizardController.restart(); @@ -105,7 +105,7 @@ Rectangle { WizardMenuItem { headerText: qsTr("Open a wallet from file") + translationManager.emptyString bodyText: qsTr("Import an existing .keys wallet file from your computer.") + translationManager.emptyString - imageIcon: "../images/open-wallet-from-file.png" + imageIcon: "qrc:///images/open-wallet-from-file.png" onMenuClicked: { wizardStateView.state = "wizardOpenWallet1" @@ -124,7 +124,7 @@ Rectangle { WizardMenuItem { headerText: qsTr("Restore wallet from keys or mnemonic seed") + translationManager.emptyString bodyText: qsTr("Enter your private keys or 25-word mnemonic seed to restore your wallet.") + translationManager.emptyString - imageIcon: "../images/restore-wallet.png" + imageIcon: "qrc:///images/restore-wallet.png" onMenuClicked: { wizardController.restart(); @@ -185,10 +185,6 @@ Rectangle { dataModel: networkTypeModel Layout.fillWidth: true Layout.topMargin: 41 - shadowReleasedColor: "#FF4304" - shadowPressedColor: "#B32D00" - releasedColor: "#363636" - pressedColor: "#202020" onChanged: { var item = dataModel.get(currentIndex).nettype.toLowerCase(); diff --git a/wizard/WizardLang.qml b/wizard/WizardLang.qml index 44bcb187..ad42bd71 100644 --- a/wizard/WizardLang.qml +++ b/wizard/WizardLang.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.Dialogs 1.2 import QtQuick.Layouts 1.2 import QtQuick.XmlListModel 2.0 @@ -34,6 +34,7 @@ import QtQuick.Controls 2.0 import "../js/Wizard.js" as Wizard import "../components" as MoneroComponents +import "../components/effects/" as MoneroEffects Rectangle { id: langScreen @@ -49,9 +50,17 @@ Rectangle { } } - Image { + MoneroEffects.GradientBackground { anchors.fill: parent - source: "../images/middlePanelBg.jpg" + fallBackColor: MoneroComponents.Style.middlePanelBackgroundColor + initialStartColor: MoneroComponents.Style.wizardBackgroundGradientStart + initialStopColor: MoneroComponents.Style.middlePanelBackgroundGradientStop + blackColorStart: MoneroComponents.Style._b_wizardBackgroundGradientStart + blackColorStop: MoneroComponents.Style._b_middlePanelBackgroundGradientStop + whiteColorStart: MoneroComponents.Style._w_wizardBackgroundGradientStart + whiteColorStop: MoneroComponents.Style._w_middlePanelBackgroundGradientStop + start: Qt.point(0, 0) + end: Qt.point(height, width) } ColumnLayout { @@ -73,8 +82,8 @@ Rectangle { } } - selectionColor: MoneroComponents.Style.dimmedFontColor - selectedTextColor: MoneroComponents.Style.defaultFontColor + selectionColor: MoneroComponents.Style.textSelectionColor + selectedTextColor: MoneroComponents.Style.textSelectedColor selectByMouse: true wrapMode: Text.WordWrap @@ -101,8 +110,8 @@ Rectangle { } } - selectionColor: MoneroComponents.Style.dimmedFontColor - selectedTextColor: MoneroComponents.Style.defaultFontColor + selectionColor: MoneroComponents.Style.textSelectionColor + selectedTextColor: MoneroComponents.Style.textSelectedColor selectByMouse: true wrapMode: Text.WordWrap @@ -159,7 +168,7 @@ Rectangle { height: parent.height width: langText.width + 22 * scaleRatio - Text { + MoneroComponents.TextPlain { id: langText font.bold: true font.pixelSize: 14 * scaleRatio diff --git a/wizard/WizardLanguage.qml b/wizard/WizardLanguage.qml index 49319a15..f6db921d 100644 --- a/wizard/WizardLanguage.qml +++ b/wizard/WizardLanguage.qml @@ -26,25 +26,21 @@ // 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.Layouts 1.2 import QtQuick.Controls 2.0 import "../components" import "../components" as MoneroComponents +import "../components/effects/" as MoneroEffects import "../version.js" as Version Rectangle { Layout.fillWidth: true - color: "black" + color: "transparent" property string viewName: "wizardLanguage" - Image { - anchors.fill: parent - source: "../images/middlePanelBg.jpg" - } - ColumnLayout { id: root anchors.top: parent.top @@ -89,7 +85,7 @@ Rectangle { Image { id: globe - source: "../images/world-flags-globe.png" + source: "qrc:///images/world-flags-globe.png" opacity: 0 property bool small: appWindow.width < 700 ? true : false property int size: { @@ -190,7 +186,7 @@ Rectangle { } } - Text { + MoneroComponents.TextPlain { id: versionText opacity: 0 anchors.horizontalCenter: parent.horizontalCenter diff --git a/wizard/WizardMenuItem.qml b/wizard/WizardMenuItem.qml index 1ca2e1fb..1649c8aa 100644 --- a/wizard/WizardMenuItem.qml +++ b/wizard/WizardMenuItem.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.7 +import QtQuick 2.9 import QtQuick.Dialogs 1.2 import QtQuick.Layouts 1.2 +import QtGraphicalEffects 1.0 import QtQuick.Controls 2.0 import "../components" as MoneroComponents @@ -49,11 +50,24 @@ RowLayout { Image { id: icon + visible: !isOpenGL || MoneroComponents.Style.blackTheme anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter source: "" } + DropShadow { + visible: isOpenGL && !MoneroComponents.Style.blackTheme + anchors.fill: icon + horizontalOffset: 3 + verticalOffset: 3 + radius: 10.0 + samples: 15 + color: "#1E000000" + source: icon + cached: true + } + MouseArea { cursorShape: Qt.PointingHandCursor anchors.fill: parent @@ -68,12 +82,13 @@ RowLayout { Layout.fillWidth: true spacing: 0 - Text { + MoneroComponents.TextPlain { id: header Layout.fillWidth: true leftPadding: parent.leftPadding topPadding: 0 color: MoneroComponents.Style.defaultFontColor + opacity: MoneroComponents.Style.blackTheme ? 1.0 : 0.8 font.bold: true font.family: MoneroComponents.Style.fontRegular.name font.pixelSize: { @@ -93,7 +108,7 @@ RowLayout { } } - Text { + MoneroComponents.TextPlain { id: body Layout.fillWidth: true color: MoneroComponents.Style.dimmedFontColor @@ -106,7 +121,8 @@ RowLayout { } } topPadding: 4 * scaleRatio - wrapMode: Text.WordWrap; + wrapMode: Text.WordWrap + themeTransition: false MouseArea { cursorShape: Qt.PointingHandCursor diff --git a/wizard/WizardModeBootstrap.qml b/wizard/WizardModeBootstrap.qml index 5f9c70b9..11c07ae8 100644 --- a/wizard/WizardModeBootstrap.qml +++ b/wizard/WizardModeBootstrap.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.Layouts 1.2 import QtQuick.Controls 2.0 @@ -66,7 +66,7 @@ Rectangle { Layout.topMargin: 10 * scaleRatio Layout.fillWidth: true - Text { + MoneroComponents.TextPlain { text: qsTr("This mode will use a remote node whilst also syncing the blockchain. This is different from the first menu option (Simple mode), since it will only use the remote node until the blockchain is fully synced locally. It is a reasonable tradeoff for most people who care about privacy but also want the convenience of an automatic fallback option.") + translationManager.emptyString wrapMode: Text.Wrap Layout.topMargin: 14 * scaleRatio @@ -77,7 +77,7 @@ Rectangle { color: MoneroComponents.Style.lightGreyFontColor } - Text { + MoneroComponents.TextPlain { text: qsTr("Temporary use of remote nodes is useful in order to use Monero immediately (hence the name bootstrap), however be aware that when using remote nodes (including with the bootstrap setting), nodes could track your IP address, track your \"restore height\" and associated block request data, and send you inaccurate information to learn more about transactions you make.") + translationManager.emptyString wrapMode: Text.Wrap Layout.topMargin: 8 * scaleRatio @@ -94,7 +94,7 @@ Rectangle { text: qsTr("Remain aware of these limitations. Users who prioritize privacy and decentralization must use a full node instead.") + translationManager.emptyString } - Text { + MoneroComponents.TextPlain { text: qsTr("For enhanced node performance you may specify your region:") + translationManager.emptyString wrapMode: Text.Wrap Layout.topMargin: 8 * scaleRatio @@ -117,10 +117,6 @@ Rectangle { id: regionDropdown Layout.fillWidth: true dataModel: regionModel - shadowReleasedColor: "#FF4304" - shadowPressedColor: "#B32D00" - releasedColor: "#363636" - pressedColor: "#202020" currentIndex: 0 onChanged: { diff --git a/wizard/WizardModeRemoteNodeWarning.qml b/wizard/WizardModeRemoteNodeWarning.qml index b578d480..2f84b227 100644 --- a/wizard/WizardModeRemoteNodeWarning.qml +++ b/wizard/WizardModeRemoteNodeWarning.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.Layouts 1.2 import QtQuick.Controls 2.0 @@ -66,8 +66,10 @@ Rectangle { Layout.topMargin: 10 * scaleRatio Layout.fillWidth: true - Text { + MoneroComponents.TextPlain { text: qsTr("This mode is ideal for managing small amounts of Monero. You have access to basic features for making and managing transactions. It will automatically connect to the Monero network so you can start using Monero immediately.") + translationManager.emptyString + themeTransitionBlackColor: MoneroComponents.Style._b_lightGreyFontColor + themeTransitionWhiteColor: MoneroComponents.Style._w_lightGreyFontColor wrapMode: Text.Wrap Layout.topMargin: 14 * scaleRatio Layout.fillWidth: true @@ -77,8 +79,10 @@ Rectangle { color: MoneroComponents.Style.lightGreyFontColor } - Text { + MoneroComponents.TextPlain { text: qsTr("Remote nodes are useful if you are not able/don't want to download the whole blockchain, but be advised that malicious remote nodes could compromise some privacy. They could track your IP address, track your \"restore height\" and associated block request data, and send you inaccurate information to learn more about transactions you make.") + translationManager.emptyString + themeTransitionBlackColor: MoneroComponents.Style._b_lightGreyFontColor + themeTransitionWhiteColor: MoneroComponents.Style._w_lightGreyFontColor wrapMode: Text.Wrap Layout.topMargin: 8 * scaleRatio Layout.fillWidth: true @@ -88,13 +92,13 @@ Rectangle { color: MoneroComponents.Style.lightGreyFontColor } - MoneroComponents.WarningBox{ + MoneroComponents.WarningBox { Layout.topMargin: 14 * scaleRatio Layout.bottomMargin: 6 * scaleRatio text: qsTr("Remain aware of these limitations. Users who prioritize privacy and decentralization must use a full node instead.") + translationManager.emptyString } - Text { + MoneroComponents.TextPlain { text: qsTr("For enhanced node performance you may specify your region:") + translationManager.emptyString wrapMode: Text.Wrap Layout.topMargin: 8 * scaleRatio @@ -117,10 +121,6 @@ Rectangle { id: regionDropdown Layout.fillWidth: true dataModel: regionModel - shadowReleasedColor: "#FF4304" - shadowPressedColor: "#B32D00" - releasedColor: "#363636" - pressedColor: "#202020" currentIndex: 0 onChanged: { diff --git a/wizard/WizardModeSelection.qml b/wizard/WizardModeSelection.qml index dddc4b9b..4f6176f4 100644 --- a/wizard/WizardModeSelection.qml +++ b/wizard/WizardModeSelection.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.Dialogs 1.2 import QtQuick.Layouts 1.2 import QtQuick.Controls 2.0 @@ -72,7 +72,7 @@ Rectangle { } } - imageIcon: "../images/remote-node.png" + imageIcon: "qrc:///images/remote-node.png" onMenuClicked: { if(appWindow.persistentSettings.nettype == 0){ @@ -101,7 +101,7 @@ Rectangle { return "Available on mainnet."; } } - imageIcon: "../images/local-node.png" + imageIcon: "qrc:///images/local-node.png" onMenuClicked: { if(appWindow.persistentSettings.nettype == 0){ @@ -123,7 +123,7 @@ Rectangle { WizardMenuItem { headerText: qsTr("Advanced mode") + translationManager.emptyString bodyText: qsTr("Includes extra features like mining and message verification. The blockchain is downloaded to your computer.") + translationManager.emptyString - imageIcon: "../images/local-node-full.png" + imageIcon: "qrc:///images/local-node-full.png" onMenuClicked: { appWindow.changeWalletMode(2); diff --git a/wizard/WizardNav.qml b/wizard/WizardNav.qml index ac84ee36..f30098b8 100644 --- a/wizard/WizardNav.qml +++ b/wizard/WizardNav.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.Layouts 1.2 import QtQuick.Controls 2.0 diff --git a/wizard/WizardNavProgressDot.qml b/wizard/WizardNavProgressDot.qml index 464429d5..3444a373 100644 --- a/wizard/WizardNavProgressDot.qml +++ b/wizard/WizardNavProgressDot.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.Layouts 1.2 import QtQuick.Controls 2.0 @@ -37,7 +37,7 @@ Rectangle { Layout.preferredWidth: 30 * scaleRatio Layout.fillHeight: true property string activeColor: MoneroComponents.Style.defaultFontColor - property string inactiveColor: "#333333" + property string inactiveColor: MoneroComponents.Style.progressBarBackgroundColor color: "transparent" Rectangle { diff --git a/wizard/WizardOpenWallet1.qml b/wizard/WizardOpenWallet1.qml index d0b8d092..625a6cec 100644 --- a/wizard/WizardOpenWallet1.qml +++ b/wizard/WizardOpenWallet1.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.Dialogs 1.2 import QtQuick.Layouts 1.2 import QtQuick.Controls 2.0 @@ -92,7 +92,7 @@ Rectangle { columnSpacing: 20 * scaleRatio columns: 2 - Text { + MoneroComponents.TextPlain { text: qsTr("Most recent wallets") + translationManager.emptyString font.family: MoneroComponents.Style.fontLight.name font.pixelSize: 16 * scaleRatio @@ -145,7 +145,7 @@ Rectangle { anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter fillMode: Image.PreserveAspectFit - source: "../images/open-wallet-from-file.png" + source: "qrc:///images/open-wallet-from-file.png" } } @@ -161,8 +161,8 @@ Rectangle { color: MoneroComponents.Style.defaultFontColor font.pixelSize: 18 * scaleRatio - selectionColor: MoneroComponents.Style.dimmedFontColor - selectedTextColor: MoneroComponents.Style.defaultFontColor + selectionColor: MoneroComponents.Style.textSelectionColor + selectedTextColor: MoneroComponents.Style.textSelectedColor selectByMouse: false wrapMode: Text.WordWrap diff --git a/wizard/WizardRestoreWallet1.qml b/wizard/WizardRestoreWallet1.qml index 7919cb32..3dc356c1 100644 --- a/wizard/WizardRestoreWallet1.qml +++ b/wizard/WizardRestoreWallet1.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.Layouts 1.2 import QtQuick.Controls 2.0 @@ -183,13 +183,13 @@ Rectangle { font.family: MoneroComponents.Style.fontRegular.name font.pixelSize: 16 * scaleRatio - selectionColor: MoneroComponents.Style.dimmedFontColor - selectedTextColor: MoneroComponents.Style.defaultFontColor + selectionColor: MoneroComponents.Style.textSelectionColor + selectedTextColor: MoneroComponents.Style.textSelectedColor wrapMode: TextInput.Wrap selectByMouse: true - Text { + MoneroComponents.TextPlain { id: memoTextPlaceholder opacity: 0.35 anchors.fill:parent diff --git a/wizard/WizardRestoreWallet2.qml b/wizard/WizardRestoreWallet2.qml index bf569cdf..80784665 100644 --- a/wizard/WizardRestoreWallet2.qml +++ b/wizard/WizardRestoreWallet2.qml @@ -29,7 +29,7 @@ import "../js/Wizard.js" as Wizard import "../components" as MoneroComponents -import QtQuick 2.7 +import QtQuick 2.9 import QtQuick.Layouts 1.2 import QtQuick.Controls 2.0 diff --git a/wizard/WizardRestoreWallet3.qml b/wizard/WizardRestoreWallet3.qml index 26c10c6d..6acb0249 100644 --- a/wizard/WizardRestoreWallet3.qml +++ b/wizard/WizardRestoreWallet3.qml @@ -29,7 +29,7 @@ import "../js/Wizard.js" as Wizard import "../components" as MoneroComponents -import QtQuick 2.7 +import QtQuick 2.9 import QtQuick.Layouts 1.2 import QtQuick.Controls 2.0 diff --git a/wizard/WizardRestoreWallet4.qml b/wizard/WizardRestoreWallet4.qml index d141bf04..136c6ddd 100644 --- a/wizard/WizardRestoreWallet4.qml +++ b/wizard/WizardRestoreWallet4.qml @@ -28,7 +28,7 @@ import "../components" as MoneroComponents -import QtQuick 2.7 +import QtQuick 2.9 import QtQuick.Layouts 1.2 import QtQuick.Controls 2.0 diff --git a/wizard/WizardSummary.qml b/wizard/WizardSummary.qml index e3e576e4..8ee5ae77 100644 --- a/wizard/WizardSummary.qml +++ b/wizard/WizardSummary.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.Layouts 1.2 import QtQuick.Controls 2.0 import moneroComponents.NetworkType 1.0 diff --git a/wizard/WizardSummaryItem.qml b/wizard/WizardSummaryItem.qml index 4da30a40..4e3f3510 100644 --- a/wizard/WizardSummaryItem.qml +++ b/wizard/WizardSummaryItem.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.Layouts 1.2 import QtQuick.Controls 2.0 diff --git a/wizard/WizardWalletInput.qml b/wizard/WizardWalletInput.qml index 895dec00..d67dfcd1 100644 --- a/wizard/WizardWalletInput.qml +++ b/wizard/WizardWalletInput.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.Dialogs 1.2 import QtQuick.Layouts 1.2 import QtQuick.Controls 2.0