From 73315e3390c53c596822bbfeaeb69362d15c91fd Mon Sep 17 00:00:00 2001 From: "Anthony J. Thibault" Date: Tue, 6 Sep 2016 17:07:41 -0700 Subject: [PATCH] Punctuation mode now works --- interface/resources/qml/controls/Key.qml | 10 + interface/resources/qml/controls/Keyboard.qml | 41 ++- .../qml/controls/KeyboardPunctuation.qml | 324 ++++++++++++++++++ interface/resources/qml/controls/WebView.qml | 27 +- 4 files changed, 382 insertions(+), 20 deletions(-) create mode 100644 interface/resources/qml/controls/KeyboardPunctuation.qml diff --git a/interface/resources/qml/controls/Key.qml b/interface/resources/qml/controls/Key.qml index bf018290f7..164b5c2f5b 100644 --- a/interface/resources/qml/controls/Key.qml +++ b/interface/resources/qml/controls/Key.qml @@ -7,6 +7,7 @@ Item { property string glyph: "a" property bool toggle: false // does this button have the toggle behaivor? property bool toggled: false // is this button currently toggled? + property alias mouseArea: mouseArea1 MouseArea { id: mouseArea1 @@ -14,6 +15,15 @@ Item { anchors.fill: parent hoverEnabled: true + function resetToggledMode(mode) { + toggled: mode + if (toggled) { + keyItem.state = "mouseDepressed" + } else { + keyItem.state = "" + } + } + onCanceled: { if (toggled) { keyItem.state = "mouseDepressed" diff --git a/interface/resources/qml/controls/Keyboard.qml b/interface/resources/qml/controls/Keyboard.qml index 55310a815e..cfa5e857a4 100644 --- a/interface/resources/qml/controls/Keyboard.qml +++ b/interface/resources/qml/controls/Keyboard.qml @@ -3,6 +3,13 @@ import QtQuick 2.0 Item { id: keyboardBase height: 200 + property alias shiftKey: key27 + property bool shiftMode: false + + function resetShiftMode(mode) { + shiftMode = mode + key23.resetToggledMode(mode) + } function toUpper(str) { if (str === ",") { @@ -28,6 +35,21 @@ Item { } } + onShiftModeChanged: { + var i, j; + for (i = 0; i < column1.children.length; i++) { + var row = column1.children[i]; + for (j = 0; j < row.children.length; j++) { + var key = row.children[j]; + if (shiftMode) { + key.glyph = keyboardBase.toUpper(key.glyph); + } else { + key.glyph = keyboardBase.toLower(key.glyph); + } + } + } + } + Rectangle { id: leftRect y: 0 @@ -211,18 +233,7 @@ Item { glyph: "⇪" toggle: true onToggledChanged: { - var i, j; - for (i = 0; i < column1.children.length; i++) { - var row = column1.children[i]; - for (j = 0; j < row.children.length; j++) { - var key = row.children[j]; - if (toggled) { - key.glyph = keyboardBase.toUpper(key.glyph); - } else { - key.glyph = keyboardBase.toLower(key.glyph); - } - } - } + shiftMode = toggled; } } @@ -299,6 +310,9 @@ Item { id: key30 width: 44 glyph: "⁂" + mouseArea.onClicked: { + keyboardBase.parent.punctuationMode = true + } } Key { @@ -317,9 +331,6 @@ Item { id: key35 x: 343 width: 43 - antialiasing: false - scale: 1 - transformOrigin: Item.Center glyph: "⇨" } diff --git a/interface/resources/qml/controls/KeyboardPunctuation.qml b/interface/resources/qml/controls/KeyboardPunctuation.qml new file mode 100644 index 0000000000..6fef366772 --- /dev/null +++ b/interface/resources/qml/controls/KeyboardPunctuation.qml @@ -0,0 +1,324 @@ +import QtQuick 2.0 + +Item { + id: keyboardBase + height: 200 + Rectangle { + id: leftRect + y: 0 + height: 200 + color: "#252525" + anchors.right: keyboardRect.left + anchors.rightMargin: 0 + anchors.bottom: parent.bottom + anchors.bottomMargin: 0 + anchors.left: parent.left + anchors.leftMargin: 0 + } + + Rectangle { + id: keyboardRect + x: 206 + y: 0 + width: 480 + height: 200 + color: "#252525" + anchors.horizontalCenter: parent.horizontalCenter + anchors.bottom: parent.bottom + anchors.bottomMargin: 0 + + Column { + id: column1 + width: 480 + height: 200 + + Row { + id: row1 + width: 480 + height: 50 + anchors.left: parent.left + anchors.leftMargin: 0 + + Key { + id: key1 + width: 43 + glyph: "1" + } + + Key { + id: key2 + width: 43 + glyph: "2" + } + + Key { + id: key3 + width: 43 + glyph: "3" + } + + Key { + id: key4 + width: 43 + glyph: "4" + } + + Key { + id: key5 + width: 43 + glyph: "5" + } + + Key { + id: key6 + width: 43 + glyph: "6" + } + + Key { + id: key7 + width: 43 + glyph: "7" + } + + Key { + id: key8 + width: 43 + glyph: "8" + } + + Key { + id: key9 + width: 43 + glyph: "9" + } + + Key { + id: key10 + width: 43 + glyph: "0" + } + + Key { + id: key28 + width: 50 + glyph: "←" + } + } + + Row { + id: row2 + width: 480 + height: 50 + anchors.left: parent.left + anchors.leftMargin: 0 + + Key { + id: key11 + width: 43 + glyph: "!" + } + + Key { + id: key12 + width: 43 + glyph: "@" + } + + Key { + id: key13 + width: 43 + glyph: "#" + } + + Key { + id: key14 + width: 43 + glyph: "$" + } + + Key { + id: key15 + width: 43 + glyph: "%" + } + + Key { + id: key16 + width: 43 + glyph: "^" + } + + Key { + id: key17 + width: 43 + glyph: "&" + } + + Key { + id: key18 + width: 43 + glyph: "*" + } + + Key { + id: key19 + width: 43 + glyph: "(" + } + + Key { + id: key32 + width: 43 + glyph: ")" + } + + Key { + id: key37 + width: 50 + glyph: "⏎" + } + } + + Row { + id: row3 + width: 480 + height: 50 + anchors.left: parent.left + anchors.leftMargin: 4 + + Key { + id: key27 + width: 43 + glyph: "=" + } + + Key { + id: key20 + width: 43 + glyph: "+" + } + + Key { + id: key21 + width: 43 + glyph: "-" + } + + Key { + id: key22 + width: 43 + glyph: "_" + } + + Key { + id: key23 + width: 43 + glyph: ";" + } + + Key { + id: key24 + width: 43 + glyph: ":" + } + + Key { + id: key25 + width: 43 + glyph: "'" + } + + Key { + id: key26 + width: 43 + glyph: "\"" + } + + Key { + id: key31 + width: 43 + glyph: "<" + } + + Key { + id: key33 + width: 43 + glyph: ">" + } + + Key { + id: key36 + width: 43 + glyph: "?" + } + + } + + Row { + id: row4 + width: 480 + height: 50 + anchors.left: parent.left + anchors.leftMargin: 19 + + Key { + id: key30 + width: 65 + glyph: "abc" + mouseArea.onClicked: { + keyboardBase.parent.punctuationMode = false + } + } + + Key { + id: key29 + width: 285 + glyph: " " + } + + Key { + id: key34 + width: 43 + glyph: "⇦" + } + + Key { + id: key35 + x: 343 + width: 43 + glyph: "⇨" + } + + } + } + } + + Rectangle { + id: rightRect + y: 280 + height: 200 + color: "#252525" + border.width: 0 + anchors.left: keyboardRect.right + anchors.leftMargin: 0 + anchors.right: parent.right + anchors.rightMargin: 0 + anchors.bottom: parent.bottom + anchors.bottomMargin: 0 + } + + Rectangle { + id: rectangle1 + color: "#ffffff" + anchors.bottom: keyboardRect.top + anchors.bottomMargin: 0 + anchors.left: parent.left + anchors.leftMargin: 0 + anchors.right: parent.right + anchors.rightMargin: 0 + anchors.top: parent.top + anchors.topMargin: 0 + } + +} diff --git a/interface/resources/qml/controls/WebView.qml b/interface/resources/qml/controls/WebView.qml index d958e1c774..a49501bf83 100644 --- a/interface/resources/qml/controls/WebView.qml +++ b/interface/resources/qml/controls/WebView.qml @@ -6,6 +6,7 @@ Item { property alias url: root.url property alias eventBridge: eventBridgeWrapper.eventBridge property bool keyboardRaised: false + property bool punctuationMode: false QtObject { id: eventBridgeWrapper @@ -18,7 +19,7 @@ Item { x: 0 y: 0 width: parent.width - height: keyboardRaised ? parent.height - keyboard.height : parent.height + height: keyboardRaised ? parent.height - keyboard1.height : parent.height // creates a global EventBridge object. WebEngineScript { @@ -80,6 +81,8 @@ Item { onLoadingChanged: { keyboardRaised = false; + punctuationMode = false; + keyboard1.resetShiftMode(false); // Required to support clicking on "hifi://" links if (WebEngineView.LoadStartedStatus == loadRequest.status) { @@ -105,13 +108,27 @@ Item { //profile: desktop.browserProfile } - // virtual keyboard + // virtual keyboard, letters Keyboard { - id: keyboard + id: keyboard1 y: keyboardRaised ? parent.height : 0 height: keyboardRaised ? 200 : 0 - visible: keyboardRaised - enabled: keyboardRaised + visible: keyboardRaised && !punctuationMode + enabled: keyboardRaised && !punctuationMode + anchors.right: parent.right + anchors.rightMargin: 0 + anchors.left: parent.left + anchors.leftMargin: 0 + anchors.bottom: parent.bottom + anchors.bottomMargin: 0 + } + + KeyboardPunctuation { + id: keyboard2 + y: keyboardRaised ? parent.height : 0 + height: keyboardRaised ? 200 : 0 + visible: keyboardRaised && punctuationMode + enabled: keyboardRaised && punctuationMode anchors.right: parent.right anchors.rightMargin: 0 anchors.left: parent.left