monero-project/monero-gui
monero-project/monero-gui
1
0
Fork 0
mirror of https://github.com/monero-project/monero-gui.git synced 2024-11-16 15:58:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

components mobile scaling

Browse source
This commit is contained in:
Jaquee 2017-08-07 15:47:56 +02:00
parent 66bb3fe7ac
commit 9e0db8f4ff
12 changed files with 124 additions and 125 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
components/Label.qml
View file

@ -35,19 +35,21 @@ Item {
property alias color: label.color
property alias textFormat: label.textFormat
property string tipText: ""
property int fontSize: 12
property int fontSize: 16 * scaleRatio
property alias wrapMode: label.wrapMode
property alias horizontalAlignment: label.horizontalAlignment
signal linkActivated()
width: icon.x + icon.width
height: icon.height
width: icon.x + icon.width * scaleRatio
height: icon.height * scaleRatio
Layout.topMargin: 10 * scaleRatio
Text {
id: label
anchors.bottom: parent.bottom
anchors.bottomMargin: 2
anchors.bottomMargin: 2 * scaleRatio
anchors.left: parent.left
font.family: "Arial"
font.pixelSize: parent.fontSize
font.pixelSize: fontSize
color: "#555555"
onLinkActivated: item.linkActivated()
}
@ -56,7 +58,7 @@ Item {
id: icon
anchors.verticalCenter: parent.verticalCenter
anchors.left: label.right
anchors.leftMargin: 5
anchors.leftMargin: 5 * scaleRatio
source: "../images/whatIsIcon.png"
visible: appWindow.whatIsEnable
}

12
components/LineEdit.qml
View file

@ -36,13 +36,13 @@ Item {
property alias readOnly : input.readOnly
property alias cursorPosition: input.cursorPosition
property alias echoMode: input.echoMode
property int fontSize: 18
property int fontSize: 18 * scaleRatio
property bool error: false
signal editingFinished()
signal accepted();
signal textUpdated();
height: 37
height: 37 * scaleRatio
function getColor(error) {
if (error)
@ -53,14 +53,14 @@ Item {
Rectangle {
anchors.fill: parent
anchors.bottomMargin: 1
anchors.bottomMargin: 1 * scaleRatio
color: "#DBDBDB"
//radius: 4
}
Rectangle {
anchors.fill: parent
anchors.topMargin: 1
anchors.topMargin: 1 * scaleRatio
color: getColor(error)
//radius: 4
}
@ -68,8 +68,8 @@ Item {
Input {
id: input
anchors.fill: parent
anchors.leftMargin: 4
anchors.rightMargin: 30
anchors.leftMargin: 4 * scaleRatio
anchors.rightMargin: 30 * scaleRatio
font.pixelSize: parent.fontSize
onEditingFinished: item.editingFinished()
onAccepted: item.accepted();

18
components/MenuButton.qml
View file

@ -42,7 +42,7 @@ Rectangle {
var offset = 0
var item = button
while (item.under) {
offset += 20
offset += 20 * scaleRatio
item = item.under
}
return offset
@ -50,7 +50,7 @@ Rectangle {
color: checked ? "#FFFFFF" : "#1C1C1C"
property bool present: !under || under.checked || checked || under.numSelectedChildren > 0
height: present ? ((appWindow.height >= 800) ? 64 : 52) : 0
height: present ? ((appWindow.height >= 800) ? 64 * scaleRatio : 52 * scaleRatio ) : 0
transform: Scale {
yScale: button.present ? 1 : 0
@ -76,18 +76,18 @@ Rectangle {
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.leftMargin: parent.getOffset()
width: 50
width: 50 * scaleRatio
Rectangle {
id: dot
anchors.centerIn: parent
width: 16
width: 16 * scaleRatio
height: width
radius: height / 2
Rectangle {
anchors.centerIn: parent
width: 12
width: 12 * scaleRatio
height: width
radius: height / 2
color: "#1C1C1C"
@ -98,7 +98,7 @@ Rectangle {
Text {
id: symbolText
anchors.centerIn: parent
font.pixelSize: 11
font.pixelSize: 11 * scaleRatio
font.bold: true
color: button.checked || buttonArea.containsMouse ? "#FFFFFF" : dot.color
visible: appWindow.ctrlPressed
@ -117,7 +117,7 @@ Rectangle {
Image {
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
anchors.rightMargin: 20
anchors.rightMargin: 20 * scaleRatio
anchors.leftMargin: parent.getOffset()
source: "../images/menuIndicator.png"
}
@ -126,9 +126,9 @@ Rectangle {
id: label
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.leftMargin: parent.getOffset() + 50
anchors.leftMargin: parent.getOffset() + 50 * scaleRatio
font.family: "Arial"
font.pixelSize: 18
font.pixelSize: 18 * scaleRatio
color: parent.checked ? "#000000" : "#FFFFFF"
}

42
components/MobileHeader.qml
View file

@ -10,17 +10,16 @@ Rectangle {
anchors.leftMargin: 1
anchors.rightMargin: 1
Layout.fillWidth: true
Layout.preferredHeight: 64
Layout.preferredHeight: 64 * scaleRatio
color: "#FFFFFF"
// visible: basicMode
Image {
id: logo
visible: appWindow.width > 460
visible: appWindow.width > 460 * scaleRatio
anchors.verticalCenter: parent.verticalCenter
anchors.verticalCenterOffset: -5
anchors.left: parent.left
anchors.leftMargin: appWindow.persistentSettings.customDecorations ? 20 : 40
anchors.leftMargin: 50 * scaleRatio
source: "../images/moneroLogo2.png"
}
@ -28,9 +27,8 @@ Rectangle {
id: icon
visible: !logo.visible
anchors.verticalCenter: parent.verticalCenter
// anchors.verticalCenterOffset: -5
anchors.left: parent.left
anchors.leftMargin: appWindow.persistentSettings.customDecorations ? 20 : 40
anchors.leftMargin: 40 * scaleRatio
source: "../images/moneroIcon.png"
}
@ -38,16 +36,16 @@ Rectangle {
anchors.verticalCenter: parent.verticalCenter
anchors.top: parent.top
anchors.right: parent.right
anchors.topMargin: 10
width: 256
anchors.topMargin: 10 * scaleRatio
width: 256 * scaleRatio
columns: 3
Text {
id: balanceLabel
width: 116
height: 20
width: 116 * scaleRatio
height: 20 * scaleRatio
font.family: "Arial"
font.pixelSize: 12
font.pixelSize: 12 * scaleRatio
font.letterSpacing: -1
elide: Text.ElideRight
horizontalAlignment: Text.AlignLeft
@ -58,10 +56,10 @@ Rectangle {
Text {
id: balanceText
width: 110
height: 20
width: 110 * scaleRatio
height: 20 * scaleRatio
font.family: "Arial"
font.pixelSize: 18
font.pixelSize: 18 * scaleRatio
font.letterSpacing: -1
elide: Text.ElideRight
horizontalAlignment: Text.AlignLeft
@ -71,8 +69,8 @@ Rectangle {
}
Item {
height: 20
width: 20
height: 20 * scaleRatio
width: 20 * scaleRatio
Image {
anchors.verticalCenter: parent.verticalCenter
@ -82,10 +80,10 @@ Rectangle {
}
Text {
width: 116
height: 20
width: 116 * scaleRatio
height: 20 * scaleRatio
font.family: "Arial"
font.pixelSize: 12
font.pixelSize: 12 * scaleRatio
font.letterSpacing: -1
elide: Text.ElideRight
horizontalAlignment: Text.AlignLeft
@ -96,10 +94,10 @@ Rectangle {
Text {
id: availableBalanceText
width: 110
height: 20
width: 110 * scaleRatio
height: 20 * scaleRatio
font.family: "Arial"
font.pixelSize: 14
font.pixelSize: 14 * scaleRatio
font.letterSpacing: -1
elide: Text.ElideRight
horizontalAlignment: Text.AlignLeft

63
components/NetworkStatusItem.qml
View file

@ -60,37 +60,44 @@ Row {
return qsTr("Invalid connection status")
}
Item {
id: iconItem
anchors.bottom: parent.bottom
width: 50
height: 50
Image {
anchors.centerIn: parent
source: getConnectionStatusImage(item.connected)
color: "#1C1C1C"
Row {
height: 60 * scaleRatio
Item {
id: iconItem
anchors.bottom: parent.bottom
width: 50 * scaleRatio
height: 50 * scaleRatio
Image {
anchors.centerIn: parent
source: getConnectionStatusImage(item.connected)
}
}
Column {
anchors.bottom: parent.bottom
height: 53 * scaleRatio
spacing: 3 * scaleRatio
Text {
anchors.left: parent.left
font.family: "Arial"
font.pixelSize: 12 * scaleRatio
color: "#545454"
text: qsTr("Network status") + translationManager.emptyString
}
Text {
anchors.left: parent.left
font.family: "Arial"
font.pixelSize: 18 * scaleRatio
color: getConnectionStatusColor(item.connected)
text: getConnectionStatusString(item.connected) + translationManager.emptyString
}
}
}
Column {
anchors.bottom: parent.bottom
height: 53
spacing: 3
Text {
anchors.left: parent.left
font.family: "Arial"
font.pixelSize: 12
color: "#545454"
text: qsTr("Network status") + translationManager.emptyString
}
Text {
anchors.left: parent.left
font.family: "Arial"
font.pixelSize: 18
color: getConnectionStatusColor(item.connected)
text: getConnectionStatusString(item.connected) + translationManager.emptyString
}
}
}

18
components/PasswordDialog.qml
View file

@ -53,8 +53,8 @@ Window {
}
// TODO: implement without hardcoding sizes
width: 480
height: walletName ? 240 : 200
// width: isMobile ? screenWidth : 480
// height: isMobile ? screenHeight - mobileHeader.height : walletName ? 240 : 200
// Make window draggable
MouseArea {
@ -68,7 +68,7 @@ Window {
ColumnLayout {
id: mainLayout
spacing: 10
anchors { fill: parent; margins: 35 }
anchors { fill: parent; margins: 35 * scaleRatio }
ColumnLayout {
id: column
@ -81,20 +81,20 @@ Window {
Layout.columnSpan: 2
Layout.fillWidth: true
horizontalAlignment: Text.AlignHCenter
font.pixelSize: 24
font.pixelSize: 24 * scaleRatio
font.family: "Arial"
color: "#555555"
}
TextField {
id : passwordInput
focus: true
Layout.fillWidth: true
Layout.alignment: Qt.AlignHCenter
Layout.maximumWidth: 400 * scaleRatio
horizontalAlignment: TextInput.AlignHCenter
verticalAlignment: TextInput.AlignVCenter
font.family: "Arial"
font.pixelSize: 32
font.pixelSize: 32 * scaleRatio
echoMode: TextInput.Password
KeyNavigation.tab: okButton
@ -142,13 +142,11 @@ Window {
// Ok/Cancel buttons
RowLayout {
id: buttons
spacing: 60
spacing: 60 * scaleRatio
Layout.alignment: Qt.AlignHCenter
MoneroComponents.StandardButton {
id: cancelButton
width: 120
fontSize: 14
shadowReleasedColor: "#FF4304"
shadowPressedColor: "#B32D00"
releasedColor: "#FF6C3C"
@ -162,8 +160,6 @@ Window {
}
MoneroComponents.StandardButton {
id: okButton
width: 120
fontSize: 14
shadowReleasedColor: "#FF4304"
shadowPressedColor: "#B32D00"
releasedColor: "#FF6C3C"

12
components/ProcessingSplash.qml
View file

@ -38,8 +38,8 @@ Window {
property alias messageText: messageTitle.text
property alias heightProgressText : heightProgress.text
width: 200
height: 100
width: 200 * scaleRatio
height: 100 * scaleRatio
opacity: 0.7
ColumnLayout {
@ -49,8 +49,8 @@ Window {
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
anchors.leftMargin: 30
anchors.rightMargin: 30
anchors.leftMargin: 30 * scaleRatio
anchors.rightMargin: 30 * scaleRatio
BusyIndicator {
running: parent.visible
@ -61,7 +61,7 @@ Window {
id: messageTitle
text: "Please wait..."
font {
pixelSize: 22
pixelSize: 22 * scaleRatio
}
horizontalAlignment: Text.AlignHCenter
Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
@ -72,7 +72,7 @@ Window {
Text {
id: heightProgress
font {
pixelSize: 18
pixelSize: 18 * scaleRatio
}
horizontalAlignment: Text.AlignHCenter
Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter

6
components/StandardButton.qml
View file

@ -31,19 +31,19 @@ import QtQuick.Layouts 1.1
Item {
id: button
height: 37
height: 37 * scaleRatio
property string shadowPressedColor
property string shadowReleasedColor
property string pressedColor
property string releasedColor
property string icon: ""
property string textColor: "#FFFFFF"
property int fontSize: 12
property int fontSize: 12 * scaleRatio
property alias text: label.text
signal clicked()
// Dynamic label width
Layout.minimumWidth: (label.contentWidth > 80)? label.contentWidth + 20 : 100
Layout.minimumWidth: (label.contentWidth + 10 * scaleRatio) // (label.contentWidth > 80)? label.contentWidth + 20 : 100
Rectangle {
anchors.left: parent.left

12
components/StandardDialog.qml
View file

@ -68,8 +68,8 @@ Window {
}
// TODO: implement without hardcoding sizes
width: 480
height: 280
width: isMobile ? screenWidth : 480
height: isMobile ? screenHeight : 280
ColumnLayout {
id: mainLayout
@ -84,7 +84,7 @@ Window {
Label {
id: dialogTitle
horizontalAlignment: Text.AlignHCenter
font.pixelSize: 32
font.pixelSize: 32 * scaleRatio
font.family: "Arial"
color: "#555555"
}
@ -99,7 +99,7 @@ Window {
font.family: "Arial"
textFormat: TextEdit.AutoText
readOnly: true
font.pixelSize: 12
font.pixelSize: 12 * scaleRatio
}
}
@ -111,8 +111,6 @@ Window {
MoneroComponents.StandardButton {
id: cancelButton
width: 120
fontSize: 14
shadowReleasedColor: "#FF4304"
shadowPressedColor: "#B32D00"
releasedColor: "#FF6C3C"
@ -126,8 +124,6 @@ Window {
MoneroComponents.StandardButton {
id: okButton
width: 120
fontSize: 14
shadowReleasedColor: "#FF4304"
shadowPressedColor: "#B32D00"
releasedColor: "#FF6C3C"

46
components/StandardDropdown.qml
View file

@ -38,7 +38,7 @@ Item {
property string textColor: "#FFFFFF"
property alias currentIndex: column.currentIndex
property bool expanded: false
height: 37
height: 37 * scaleRatio
onExpandedChanged: if(expanded) appWindow.currentItem = dropdown
function hide() { dropdown.expanded = false }
@ -59,7 +59,7 @@ Item {
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
height: 37
height: 37 * scaleRatio
Rectangle {
anchors.left: parent.left
@ -82,8 +82,8 @@ Item {
Rectangle {
anchors.left: parent.left
anchors.bottom: parent.bottom
height: 3
width: 3
height: 3 * scaleRatio
width: 3 * scaleRatio
color: dropdown.pressedColor
visible: dropdown.expanded || droplist.height > 0
}
@ -91,8 +91,8 @@ Item {
Rectangle {
anchors.right: parent.right
anchors.bottom: parent.bottom
height: 3
width: 3
height: 3 * scaleRatio
width: 3 * scaleRatio
color: dropdown.pressedColor
visible: dropdown.expanded || droplist.height > 0
}
@ -101,11 +101,11 @@ Item {
id: firstColText
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.leftMargin: 12
anchors.leftMargin: 12 * scaleRatio
elide: Text.ElideRight
font.family: "Arial"
font.bold: true
font.pixelSize: 12
font.pixelSize: 12 * scaleRatio
color: "#FFFFFF"
text: column.currentIndex < repeater.model.rowCount() ? qsTr(repeater.model.get(column.currentIndex).column1) + translationManager.emptyString : ""
}
@ -114,10 +114,10 @@ Item {
id: secondColText
anchors.verticalCenter: parent.verticalCenter
anchors.right: separator.left
anchors.rightMargin: 12
anchors.rightMargin: 12 * scaleRatio
width: dropdown.expanded ? w : (separator.x - 12) - (firstColText.x + firstColText.width + 5)
font.family: "Arial"
font.pixelSize: 12
font.pixelSize: 12 * scaleRatio
color: "#FFFFFF"
text: column.currentIndex < repeater.model.rowCount() ? qsTr(repeater.model.get(column.currentIndex).column2) + translationManager.emptyString : ""
@ -129,7 +129,7 @@ Item {
id: separator
anchors.right: dropIndicator.left
anchors.verticalCenter: parent.verticalCenter
height: 18
height: 18 * scaleRatio
width: 1
color: "#FFFFFF"
}
@ -139,12 +139,12 @@ Item {
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.right: parent.right
width: 32
width: 32 * scaleRatio
Image {
anchors.centerIn: parent
source: "../images/whiteDropIndicator.png"
rotation: dropdown.expanded ? 180 : 0
rotation: dropdown.expanded ? 180 * scaleRatio : 0
}
}
@ -168,14 +168,14 @@ Item {
Rectangle {
anchors.left: parent.left
anchors.top: parent.top
width: 3; height: 3
width: 3 * scaleRatio; height: 3 * scaleRatio
color: dropdown.pressedColor
}
Rectangle {
anchors.right: parent.right
anchors.top: parent.top
width: 3; height: 3
width: 3 * scaleRatio; height: 3 * scaleRatio
color: dropdown.pressedColor
}
@ -209,7 +209,7 @@ Item {
delegate: Rectangle {
anchors.left: parent.left
anchors.right: parent.right
height: 30
height: 30 * scaleRatio
//radius: index === repeater.count - 1 ? 4 : 0
color: itemArea.containsMouse || index === column.currentIndex || itemArea.containsMouse ? dropdown.releasedColor : dropdown.pressedColor
@ -217,11 +217,11 @@ Item {
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.right: col2Text.left
anchors.leftMargin: 12
anchors.rightMargin: column2.length > 0 ? 12 : 0
anchors.leftMargin: 12 * scaleRatio
anchors.rightMargin: column2.length > 0 ? 12 * scaleRatio: 0
font.family: "Arial"
font.bold: true
font.pixelSize: 12
font.pixelSize: 12 * scaleRatio
color: "#FFFFFF"
text: qsTr(column1) + translationManager.emptyString
}
@ -230,9 +230,9 @@ Item {
id: col2Text
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
anchors.rightMargin: 45
anchors.rightMargin: 45 * scaleRatio
font.family: "Arial"
font.pixelSize: 12
font.pixelSize: 12 * scaleRatio
color: "#FFFFFF"
text: column2
}
@ -240,14 +240,14 @@ Item {
Rectangle {
anchors.left: parent.left
anchors.top: parent.top
width: 3; height: 3
width: 3 * scaleRatio; height: 3 * scaleRatio
color: parent.color
}
Rectangle {
anchors.right: parent.right
anchors.top: parent.top
width: 3; height: 3
width: 3 * scaleRatio; height: 3 * scaleRatio
color: parent.color
}

2
components/TickDelegate.qml
View file

@ -49,7 +49,7 @@ Item {
anchors.bottomMargin: 2
font.family: "Arial"
font.bold: true
font.pixelSize: 12
font.pixelSize: 12 * scaleRatio
color: "#4A4949"
text: {
if(currentIndex === 0) return qsTr("Normal") + translationManager.emptyString

4
components/TitleBar.qml
View file

@ -37,7 +37,7 @@ Rectangle {
property alias basicButtonVisible: goToBasicVersionButton.visible
property bool customDecorations: true
signal goToBasicVersion(bool yes)
height: customDecorations ? 30 : 0
height: customDecorations && !isMobile ? 30 : 0
y: -height
property string title
property alias maximizeButtonVisible: maximizeButton.visible
@ -59,7 +59,7 @@ Rectangle {
anchors.top: parent.top
anchors.left: parent.left
color: basicMouseArea.containsMouse || !leftPanel.visible ? "#FFE00A" : "#000000"
height: 30
height: 30 * scaleRatio
width: height
visible: isMobile