Skip to content

Commit

Permalink
Merge pull request #41 from antseppa/scalability
Browse files Browse the repository at this point in the history 
[fingerterm] Implemented scalable UI layout
  • Loading branch information
@antseppa
antseppa committed Jan 8, 2015
2 parents 4abb472 + d5dcbe6 commit 1dd8a6b
Show file tree
Hide file tree
Showing 8 changed files with 169 additions and 137 deletions.
10 changes: 5 additions & 5 deletions qml/Button.qml
View file
Expand Up @@ -33,12 +33,12 @@ Rectangle {
color: highlighted ? "#606060" : "#202020"
border.color: "#303030"
border.width: 1
radius: 5
radius: window.radiusSmall
z: 0
clip: true

width: 180
height: 68
width: window.buttonWidthLarge
height: window.buttonHeightLarge

onHighlightedChanged: {
if(highlighted)
Expand All @@ -51,7 +51,7 @@ Rectangle {
// decoration for user-defined command buttons
visible: isShellCommand
anchors.fill: parent
font.pointSize: 46
font.pointSize: 46*window.pixelRatio
text: "$"
color: "#305030"
}
Expand All @@ -60,7 +60,7 @@ Rectangle {
text: button.text
color: button.enabled ? button.textColor : "#606060"
anchors.centerIn: parent
font.pointSize: util.uiFontSize();
font.pointSize: window.uiFontSize
}

MouseArea {
Expand Down
11 changes: 6 additions & 5 deletions qml/Key.qml
View file
Expand Up @@ -39,11 +39,11 @@ Rectangle {
property int pressMouseX: 0

width: window.width/12 // some default
height: window.height/8 < 55 ? window.height/8 : 55
height: window.height/8 < 55*window.pixelRatio ? window.height/8 : 55*window.pixelRatio
color: label=="" ? "transparent" : keyboard.keyBgColor
border.color: label=="" ? "transparent" : keyboard.keyBorderColor
border.width: 1
radius: 5
radius: window.radiusSmall

property bool shiftActive: (keyboard.keyModifiers & Qt.ShiftModifier) && !sticky

Expand All @@ -52,12 +52,13 @@ Rectangle {
anchors.centerIn: parent
opacity: key.labelOpacity
source: { if(key.label.length>1 && key.label.charAt(0)==':') return "qrc:/icons/"+key.label.substring(1)+".png"; else return ""; }
scale: window.pixelRatio
}

Column {
visible: keyImage.source == ""
anchors.centerIn: parent
spacing: -17
spacing: -17*window.pixelRatio

Text {
id: keyAltLabel
Expand All @@ -71,7 +72,7 @@ Rectangle {
opacity: key.labelOpacity * (highlighted ? 1.0 : 0.2)
Behavior on opacity { NumberAnimation { duration: 100 } }

font.pointSize: (highlighted ? 24 : 14) * (text.length > 1 ? 0.5 : 1.0)
font.pointSize: (highlighted ? window.fontSizeLarge : window.fontSizeSmall) * (text.length > 1 ? 0.5 : 1.0)
Behavior on font.pointSize { NumberAnimation { duration: 100 } }
}

Expand All @@ -98,7 +99,7 @@ Rectangle {
opacity: key.labelOpacity * (highlighted ? 1.0 : 0.2)
Behavior on opacity { NumberAnimation { duration: 100 } }

font.pointSize: (highlighted ? 24 : 14) * (text.length > 1 ? 0.5 : 1.0)
font.pointSize: (highlighted ? window.fontSizeLarge : window.fontSizeSmall) * (text.length > 1 ? 0.5 : 1.0)
Behavior on font.pointSize { NumberAnimation { duration: 100 } }
}
}
Expand Down
24 changes: 12 additions & 12 deletions qml/LayoutWindow.qml
View file
Expand Up @@ -32,7 +32,7 @@ Rectangle {
y: -(height+1)
border.color: "#c0c0c0"
border.width: 1
radius: 10
radius: window.radiusMedium

MouseArea {
// event eater
Expand All @@ -44,28 +44,28 @@ Rectangle {
Rectangle {
color: currentLayout === modelData ? "#909090" : "#404040"
width: parent.width
height: selectButton.height+4
height: selectButton.height+4*window.pixelRatio
border.width: 1
border.color: "#ffffff"
radius: 5
radius: window.radiusSmall
clip: true

Text {
text: modelData
color: "#ffffff"
anchors.verticalCenter: parent.verticalCenter
x: 8
x: 8*window.pixelRatio
width: selectButton.x - x
font.pointSize: util.uiFontSize();
font.pointSize: window.uiFontSize
elide: Text.ElideRight
}
Button {
id: selectButton
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
text: "Select"
width: 70
anchors.rightMargin: 5
width: 70*window.pixelRatio
anchors.rightMargin: window.paddingSmall
onClicked: {
util.setSettingsValue("ui/keyboardLayout", modelData);
vkb.reloadLayout();
Expand All @@ -82,23 +82,23 @@ Rectangle {
anchors.top: parent.top
color: "#ffffff"
text: "Keyboard layout"
font.pointSize: util.uiFontSize() + 4;
font.pointSize: window.uiFontSize + 4*window.pixelRatio;
}

ListView {
anchors.fill: parent
anchors.topMargin: titleText.height + 4
anchors.topMargin: titleText.height + 4*window.pixelRatio
delegate: listDelegate
model: layoutWindow.layouts
spacing: 5
anchors.margins: 5
spacing: window.paddingSmall
anchors.margins: window.paddingSmall
clip: true
}

Button {
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: parent.bottom
anchors.bottomMargin: 10
anchors.bottomMargin: window.paddingMedium
text: "Back"
onClicked: {
layoutWindow.state = ""
Expand Down
12 changes: 6 additions & 6 deletions qml/Lineview.qml
View file
Expand Up @@ -22,7 +22,7 @@ import QtQuick 2.0
Rectangle {
id: lineView
property variant lines: [""]
property int fontPointSize: util.settingsValue("ui/fontSize");
property int fontPointSize: util.settingsValue("ui/fontSize")*window.pixelRatio;
property int cursorX: 1
property int cursorWidth: 10
property int cursorHeight: 10
Expand All @@ -31,7 +31,7 @@ Rectangle {
color: "#404040"
border.width: 2
border.color: "#909090"
radius: 5
radius: window.radiusSmall
height: 0
width: parent.width

Expand Down Expand Up @@ -59,8 +59,8 @@ Rectangle {
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.right: parent.right
anchors.leftMargin: 2
anchors.rightMargin: 2
anchors.leftMargin: 2*window.pixelRatio
anchors.rightMargin: 2*window.pixelRatio
Repeater {
model: lines
delegate:
Expand All @@ -82,7 +82,7 @@ Rectangle {
}
onHeightChanged: {
if(lineView.visible)
lineView.height = height+8
lineView.height = height+8*window.pixelRatio
setPosition(vkb.active)
}
}
Expand All @@ -102,7 +102,7 @@ Rectangle {
if(vkbActive && util.settingsValue("ui/vkbShowMethod")!=="move") {
y = 0;
} else {
y = -(height+5)
y = -(height+window.paddingSmall)
}
}
}
39 changes: 33 additions & 6 deletions qml/Main.qml
View file
Expand Up @@ -42,10 +42,35 @@ PageStackWindow {
Rectangle {
property string fgcolor: "black"
property string bgcolor: "#000000"
property int fontSize: 14
property int fontSize: 14*pixelRatio

property int fadeOutTime: 80
property int fadeInTime: 350
property real pixelRatio: pageStackWindow.width / 540

// layout constants
property int buttonWidthSmall: 60*pixelRatio
property int buttonWidthLarge: 180*pixelRatio
property int buttonWidthHalf: 90*pixelRatio

property int buttonHeightSmall: 48*pixelRatio
property int buttonHeightLarge: 68*pixelRatio

property int headerHeight: 20*pixelRatio

property int radiusSmall: 5*pixelRatio
property int radiusMedium: 10*pixelRatio
property int radiusLarge: 15*pixelRatio

property int paddingSmall: 5*pixelRatio
property int paddingMedium: 10*pixelRatio

property int fontSizeSmall: 14*pixelRatio
property int fontSizeLarge: 24*pixelRatio

property int uiFontSize: util.uiFontSize()*pixelRatio

property int scrollBarWidth: 6*window.pixelRatio

anchors.fill: parent

Expand Down Expand Up @@ -190,8 +215,8 @@ PageStackWindow {
x: window.width - width
y: 0
z: 1
width: menuImg.width + 60
height: menuImg.height + 30
width: menuImg.width + 60*window.pixelRatio
height: menuImg.height + 30*window.pixelRatio
color: "transparent"
opacity: 0.5
Image {
Expand All @@ -200,6 +225,7 @@ PageStackWindow {
source: "qrc:/icons/menu.png"
height: sourceSize.height
width: sourceSize.width
scale: window.pixelRatio
}
MouseArea {
anchors.fill: parent
Expand All @@ -216,6 +242,7 @@ PageStackWindow {
anchors.bottom: parent.bottom
visible: textrender.showBufferScrollIndicator
z: 5
scale: window.pixelRatio
}

MenuFingerterm {
Expand Down Expand Up @@ -302,7 +329,7 @@ PageStackWindow {
z: 100
opacity: 0
text: ""
font.pointSize: 40
font.pointSize: 40*window.pixelRatio
Behavior on opacity {
id: textNotifyAnim
NumberAnimation { duration: 500; }
Expand All @@ -319,12 +346,12 @@ PageStackWindow {
z: 200
width: 0
height: 0
radius: 5
radius: window.radiusSmall
color: "#ffffff"
property string label: ""
Text {
color: "#000000"
font.pointSize: 34
font.pointSize: 34*window.pixelRatio
anchors.centerIn: parent
text: visualKeyFeedbackRect.label
}
Expand Down

0 comments on commit 1dd8a6b

Please sign in to comment.