Skip to content

Commit

Permalink
New design and logic of notifications (#2863)
Browse files Browse the repository at this point in the history
* New design and logic of notifications
---------

Co-authored-by: Tomas Mizera <[email protected]>
  • Loading branch information
iiLubos and tomasMizera authored Nov 14, 2023
1 parent 9c78c3f commit efa25fe
Show file tree
Hide file tree
Showing 17 changed files with 824 additions and 120 deletions.
4 changes: 4 additions & 0 deletions app/icons/Close.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 10 additions & 0 deletions app/icons/Waiting.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions app/icons/icons.qrc
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@
<file>CloseButton.svg</file>
<file>UploadImage.svg</file>
<file>ReachedDataLimitImage.svg</file>
<file>Close.svg</file>
<file>Waiting.svg</file>
<file>Delete.svg</file>
<file>Done.svg</file>
<file>Edit.svg</file>
Expand Down
6 changes: 6 additions & 0 deletions app/qmlV2/Style.js
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,8 @@ const arrowDownIcon = "qrc:/Arrow Down.svg"
const qrCodeIcon = "qrc:/QR Code.svg"
const checkmarkIcon = "qrc:/Checkmark.svg"
const closeButtonIcon = "qrc:/CloseButton.svg"
const closeIcon = "qrc:/Close.svg"
const waitingIcon = "qrc:/Waiting.svg"
const deleteIcon = "qrc:/Delete.svg"
const doneIcon = "qrc:/Done.svg"
const editIcon = "qrc:/Edit.svg"
Expand All @@ -82,6 +84,10 @@ const ReachedDataLimitImage = "qrc:/ReachedDataLimitImage.svg"
// Spacing
const commonSpacing = 20 * __dp

// Notification
const notificationRadius = 12 * __dp
const notificationSpace = 3 * __dp

// Toolbar
const toolbarHeight = 89 * __dp
const minimumToolbarButtonWidth = 100 * __dp
Expand Down
140 changes: 140 additions & 0 deletions app/qmlV2/component/MMButtonInput.qml
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
/***************************************************************************
* *
* This program is free software; you can redistribute it and/or modify *
* it under the terms of the GNU General Public License as published by *
* the Free Software Foundation; either version 2 of the License, or *
* (at your option) any later version. *
* *
***************************************************************************/

import QtQuick
import QtQuick.Controls
import QtQuick.Controls.Basic
import "../Style.js" as Style

Item {
id: control

property alias text: textField.text
property alias placeholderText: textField.placeholderText
property url iconSource: ""
required property string buttonText
property string warningMsg
property string errorMsg

signal clicked

width: 280 * __dp
height: rect.height + messageItem.height

Item {
id: messageItem

width: parent.width
anchors.left: parent.left
anchors.top: rect.bottom
anchors.topMargin: 6 * __dp
height: msgRow.height

Row {
id: msgRow

spacing: 4 * __dp

MMIcon {
id: msgIcon

source: visible ? Style.errorIcon : ""
color: errorMsg.length > 0 ? Style.negative : Style.warning
visible: errorMsg.length > 0 || warningMsg.length > 0
}
Text {
text: errorMsg.length > 0 ? errorMsg : warningMsg
font: Qt.font(Style.t4)
wrapMode: Text.WordWrap
width: messageItem.width - msgRow.spacing - msgIcon.width
visible: errorMsg.length > 0 || warningMsg.length > 0
}
}
}

Rectangle {
id: rect

height: 40 * __dp
width: parent.width
color: (errorMsg.length > 0 || warningMsg.length > 0) ? Style.errorBgInputColor : Style.white
border.color: errorMsg.length > 0 ? Style.negative : warningMsg.length > 0 ? Style.warning : Style.forest
border.width: enabled ? (textField.activeFocus ? 2*__dp : textField.hovered ? 1*__dp : 0) : 0
radius: parent.height

Row {
id: row

anchors.verticalCenter: parent.verticalCenter
leftPadding: 10 * __dp

MMIcon {
id: leftIcon

source: control.iconSource
color: errorMsg.length > 0 ? Style.negative :
warningMsg.length > 0 ? Style.warning :
control.enabled ? Style.forest : Style.mediumGreen
height: rect.height
}

TextField {
id: textField

y: 2 * __dp
width: control.width - 2 * row.leftPadding
- (leftIcon.visible ? leftIcon.width : 0)
- (button.visible ? button.width : 0)
height: rect.height - 4 * __dp
color: control.enabled ? Style.night : Style.mediumGreen
placeholderTextColor: Style.night_6
font: Qt.font(Style.p5)
hoverEnabled: true
anchors.verticalCenter: parent.verticalCenter
background: Rectangle {
color: Style.transparent
}
}

Button {
id: button

anchors.verticalCenter: parent.verticalCenter

contentItem: Text {
anchors.centerIn: button
font: Qt.font(Style.t5)
text: control.buttonText
leftPadding: 2 * __dp
rightPadding: 2 * __dp
topPadding: 2 * __dp
bottomPadding: 2 * __dp
color: Style.deepOcean
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}

background: Rectangle {
color: button.enabled ? Style.grass : Style.mediumGreen
radius: height / 2
}

onClicked: control.clicked()
}
}
}

// add whole text to clipboard
function textToClipboard() {
textField.selectAll()
textField.copy()
textField.deselect()
}
}
73 changes: 9 additions & 64 deletions app/qmlV2/component/MMInput.qml
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,9 @@ import "../Style.js" as Style
Item {
id: control

enum Type { Normal, Password, Search, Calendar, Scan, CopyButton }

property int type: MMInput.Type.Normal
property alias text: textField.text
property alias placeholderText: textField.placeholderText
property url iconSource: ""
property string warningMsg
property string errorMsg

Expand Down Expand Up @@ -63,10 +61,8 @@ Item {
height: 40 * __dp
width: parent.width
color: (errorMsg.length > 0 || warningMsg.length > 0) ? Style.errorBgInputColor : Style.white
border.color: (textField.activeFocus || textField.hovered) ? (errorMsg.length > 0 ? Style.negative :
warningMsg.length > 0 ? Style.warning :
Style.forest) : "transparent"
border.width: enabled ? (textField.activeFocus ? 2*__dp : 1*__dp) : 0
border.color: errorMsg.length > 0 ? Style.negative : warningMsg.length > 0 ? Style.warning : Style.forest
border.width: enabled ? (textField.activeFocus ? 2*__dp : textField.hovered ? 1*__dp : 0) : 0
radius: parent.height

Row {
Expand All @@ -78,14 +74,11 @@ Item {
MMIcon {
id: leftIcon

source: control.type === MMInput.Type.Search ? Style.searchIcon :
control.type === MMInput.Type.Calendar ? Style.calendarIcon : ""
source: control.iconSource
color: errorMsg.length > 0 ? Style.negative :
warningMsg.length > 0 ? Style.warning :
control.enabled ? Style.forest : Style.mediumGreen
width: height
height: rect.height
visible: control.type === MMInput.Type.Search || control.type === MMInput.Type.Calendar
}

TextField {
Expand All @@ -94,81 +87,33 @@ Item {
y: 2 * __dp
width: control.width - 2 * row.leftPadding
- (leftIcon.visible ? leftIcon.width : 0)
- (rightIcon.visible ? rightIcon.width : 0)
- (button.visible ? button.width : 0)
- (clearButton.visible ? clearButton.width : 0)
height: rect.height - 4 * __dp
color: control.enabled ? Style.night : Style.mediumGreen
placeholderTextColor: Style.night_6
font: Qt.font(Style.p5)
hoverEnabled: true
anchors.verticalCenter: parent.verticalCenter
echoMode: (control.type === MMInput.Type.Password && !rightIcon.pressed) ? TextInput.Password : TextInput.Normal
background: Rectangle {
color: Style.transparent
}
}

MMIcon {
id: rightIcon
id: clearButton

property bool pressed: false
source: control.type === MMInput.Type.Password ? (pressed ? Style.hideIcon : Style.showIcon) :
control.type === MMInput.Type.Scan ? Style.qrCodeIcon :
(textField.activeFocus && textField.text.length>0) ? Style.xMarkIcon : ""
source: Style.xMarkIcon
color: control.enabled ? Style.forest : Style.mediumGreen
width: visible ? height : 0
height: rect.height
visible: control.type === MMInput.Type.Password ||
control.type === MMInput.Type.Scan ||
((control.type !== MMInput.Type.CopyButton) && textField.activeFocus && textField.text.length>0)
visible: textField.activeFocus && textField.text.length>0

MouseArea {
anchors.fill: parent
onClicked: click()

function click() {
if(control.type === MMInput.Type.Password) {
rightIcon.pressed = !rightIcon.pressed
}
else if(textField.activeFocus && textField.text.length>0) {
textField.text = ""
}
}
onClicked: textField.text = ""
}
}

Button {
id: button

visible: control.type === MMInput.Type.CopyButton
anchors.verticalCenter: parent.verticalCenter

contentItem: Text {
anchors.centerIn: button
font: Qt.font(Style.t5)
text: qsTr("Copy")
leftPadding: 2 * __dp
rightPadding: 2 * __dp
topPadding: 2 * __dp
bottomPadding: 2 * __dp
color: Style.deepOcean
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}

background: Rectangle {
color: button.enabled ? Style.grass : Style.mediumGreen
radius: height / 2
}

onClicked: {
textField.selectAll()
textField.copy()
textField.deselect()
}
}

}
}
}
Loading

1 comment on commit efa25fe

@inputapp-bot
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

iOS - version 23.11.488111 just submitted!

Please sign in to comment.