Restructure and rename.

This restructures the repo to match other Qt modules, like the
Enterprise Controls. It also renames the plugin and usages of its name
in the documentation so that the abbreviated "VKB" is not used
anywhere.

Change-Id: I5de3fc67846a50438e52f4be057abfa0d9be0d91
Reviewed-by: Frederik Gladhorn <frederik.gladhorn@digia.com>

37 files changed, 1258 insertions, 0 deletions

diff --git a/src/virtualkeyboard/content/styles/default/fonts/OpenSans-Regular.ttf b/src/virtualkeyboard/content/styles/default/fonts/OpenSans-Regular.ttf
new file mode 100755
index 00000000..db433349
--- /dev/null
+++ b/src/virtualkeyboard/content/styles/default/fonts/OpenSans-Regular.ttf
diff --git a/src/virtualkeyboard/content/styles/default/fonts/OpenSans-Semibold.ttf b/src/virtualkeyboard/content/styles/default/fonts/OpenSans-Semibold.ttf
new file mode 100755
index 00000000..1a7679e3
--- /dev/null
+++ b/src/virtualkeyboard/content/styles/default/fonts/OpenSans-Semibold.ttf
diff --git a/src/virtualkeyboard/content/styles/default/images/backspace.png b/src/virtualkeyboard/content/styles/default/images/backspace.png
new file mode 100755
index 00000000..0a33e95f
--- /dev/null
+++ b/src/virtualkeyboard/content/styles/default/images/backspace.png
diff --git a/src/virtualkeyboard/content/styles/default/images/enter.png b/src/virtualkeyboard/content/styles/default/images/enter.png
new file mode 100755
index 00000000..03335a0f
--- /dev/null
+++ b/src/virtualkeyboard/content/styles/default/images/enter.png
diff --git a/src/virtualkeyboard/content/styles/default/images/globe.png b/src/virtualkeyboard/content/styles/default/images/globe.png
new file mode 100755
index 00000000..93da92f4
--- /dev/null
+++ b/src/virtualkeyboard/content/styles/default/images/globe.png
diff --git a/src/virtualkeyboard/content/styles/default/images/hidekeyboard.png b/src/virtualkeyboard/content/styles/default/images/hidekeyboard.png
new file mode 100755
index 00000000..ca515036
--- /dev/null
+++ b/src/virtualkeyboard/content/styles/default/images/hidekeyboard.png
diff --git a/src/virtualkeyboard/content/styles/default/images/shift.png b/src/virtualkeyboard/content/styles/default/images/shift.png
new file mode 100755
index 00000000..ae5ad0b7
--- /dev/null
+++ b/src/virtualkeyboard/content/styles/default/images/shift.png
diff --git a/src/virtualkeyboard/content/styles/default/style.qml b/src/virtualkeyboard/content/styles/default/style.qml
new file mode 100644
index 00000000..92376ad1
--- /dev/null
+++ b/src/virtualkeyboard/content/styles/default/style.qml
@@ -0,0 +1,548 @@
+/****************************************************************************
+**
+** Copyright (C) 2013 Digia Plc
+** All rights reserved.
+** For any questions to Digia, please use contact form at http://qt.digia.com
+**
+** This file is part of the Qt Quick Enterprise Controls add-on.
+**
+** Licensees holding valid Qt Enterprise licenses may use this file in
+** accordance with the Qt Enterprise License Agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and Digia.
+**
+** If you have questions regarding the use of this file, please use
+** contact form at http://qt.digia.com
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import QtQuick.Enterprise.VirtualKeyboard.Styles 1.0
+
+KeyboardStyle {
+    readonly property string fontFamily: openSansRegular.name
+    readonly property real keyBackgroundMargin: Math.round(13 * scaleHint)
+    readonly property real keyContentMargin: Math.round(45 * scaleHint)
+
+    property var openSansRegular: FontLoader {
+        source: "qrc:/fonts/OpenSans-Regular.ttf"
+    }
+    property var openSansSemibold: FontLoader {
+        source: "qrc:/fonts/OpenSans-Semibold.ttf"
+    }
+
+    keyboardDesignWidth: 2560
+    keyboardDesignHeight: 800
+    keyboardRelativeLeftMargin: 114 / keyboardDesignWidth
+    keyboardRelativeRightMargin: 114 / keyboardDesignWidth
+    keyboardRelativeTopMargin: 13 / keyboardDesignHeight
+    keyboardRelativeBottomMargin: 86 / keyboardDesignHeight
+
+    keyboardBackground: Rectangle {
+        color: "black"
+    }
+
+    keyPanel: KeyPanel {
+        Rectangle {
+            id: keyBackground
+            radius: 5
+            color: "#35322f"
+            anchors.fill: parent
+            anchors.margins: keyBackgroundMargin
+            Text {
+                id: keyText
+                text: control.displayText
+                color: "white"
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignVCenter
+                anchors.fill: parent
+                anchors.margins: keyContentMargin
+                font {
+                    family: fontFamily
+                    weight: Font.DemiBold
+                    pixelSize: 52 * scaleHint
+                    capitalization: control.uppercased ? Font.AllUppercase : Font.MixedCase
+                }
+            }
+        }
+        states: [
+            State {
+                name: "pressed"
+                when: control.pressed
+                PropertyChanges {
+                    target: keyBackground
+                    opacity: 0.75
+                }
+                PropertyChanges {
+                    target: keyText
+                    opacity: 0.5
+                }
+            },
+            State {
+                name: "disabled"
+                when: !control.enabled
+                PropertyChanges {
+                    target: keyBackground
+                    opacity: 0.75
+                }
+                PropertyChanges {
+                    target: keyText
+                    opacity: 0.05
+                }
+            }
+        ]
+    }
+
+    backspaceKeyPanel: KeyPanel {
+        Rectangle {
+            id: backspaceKeyBackground
+            radius: 5
+            color: "#1e1b18"
+            anchors.fill: parent
+            anchors.margins: keyBackgroundMargin
+            KeyIcon {
+                id: backspaceKeyIcon
+                source: "qrc:/images/backspace.png"
+                color: "#868482"
+                anchors.fill: parent
+                anchors.margins: keyContentMargin
+            }
+        }
+        states: [
+            State {
+                name: "pressed"
+                when: control.pressed
+                PropertyChanges {
+                    target: backspaceKeyBackground
+                    opacity: 0.80
+                }
+                PropertyChanges {
+                    target: backspaceKeyIcon
+                    opacity: 0.6
+                }
+            },
+            State {
+                name: "disabled"
+                when: !control.enabled
+                PropertyChanges {
+                    target: backspaceKeyBackground
+                    opacity: 0.8
+                }
+                PropertyChanges {
+                    target: backspaceKeyIcon
+                    opacity: 0.2
+                }
+            }
+        ]
+    }
+
+    languageKeyPanel: KeyPanel {
+        Rectangle {
+            id: languageKeyBackground
+            radius: 5
+            color: "#35322f"
+            anchors.fill: parent
+            anchors.margins: keyBackgroundMargin
+            KeyIcon {
+                id: languageKeyIcon
+                source: "qrc:/images/globe.png"
+                color: "#868482"
+                anchors.fill: parent
+                anchors.margins: keyContentMargin
+            }
+        }
+        states: [
+            State {
+                name: "pressed"
+                when: control.pressed
+                PropertyChanges {
+                    target: languageKeyBackground
+                    opacity: 0.80
+                }
+                PropertyChanges {
+                    target: languageKeyIcon
+                    opacity: 0.75
+                }
+            },
+            State {
+                name: "disabled"
+                when: !control.enabled
+                PropertyChanges {
+                    target: languageKeyBackground
+                    opacity: 0.8
+                }
+                PropertyChanges {
+                    target: languageKeyIcon
+                    opacity: 0.2
+                }
+            }
+        ]
+    }
+
+    enterKeyPanel: KeyPanel {
+        Rectangle {
+            id: enterKeyBackground
+            radius: 5
+            color: "#1e1b18"
+            anchors.fill: parent
+            anchors.margins: keyBackgroundMargin
+            KeyIcon {
+                id: enterKeyIcon
+                visible: control.displayText.length === 0
+                source: "qrc:/images/enter.png"
+                color: "#868482"
+                anchors.fill: parent
+                anchors.topMargin: Math.round(50 * scaleHint)
+                anchors.bottomMargin: Math.round(50 * scaleHint)
+                anchors.leftMargin: Math.round(150 * scaleHint)
+                anchors.rightMargin: Math.round(85 * scaleHint)
+            }
+            Text {
+                id: enterKeyText
+                visible: control.displayText.length !== 0
+                text: control.displayText
+                clip: true
+                fontSizeMode: Text.HorizontalFit
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignVCenter
+                color: "#80c342"
+                font {
+                    family: fontFamily
+                    weight: Font.DemiBold
+                    pixelSize: 44 * scaleHint
+                    capitalization: Font.AllUppercase
+                }
+                anchors.fill: parent
+                anchors.margins: Math.round(42 * scaleHint)
+            }
+        }
+        states: [
+            State {
+                name: "pressed"
+                when: control.pressed
+                PropertyChanges {
+                    target: enterKeyBackground
+                    opacity: 0.80
+                }
+                PropertyChanges {
+                    target: enterKeyIcon
+                    opacity: 0.6
+                }
+                PropertyChanges {
+                    target: enterKeyText
+                    opacity: 0.6
+                }
+            },
+            State {
+                name: "disabled"
+                when: !control.enabled
+                PropertyChanges {
+                    target: enterKeyBackground
+                    opacity: 0.8
+                }
+                PropertyChanges {
+                    target: enterKeyIcon
+                    opacity: 0.2
+                }
+                PropertyChanges {
+                    target: enterKeyText
+                    opacity: 0.05
+                }
+            }
+        ]
+    }
+
+    hideKeyPanel: KeyPanel {
+        Rectangle {
+            id: hideKeyBackground
+            radius: 5
+            color: "#1e1b18"
+            anchors.fill: parent
+            anchors.margins: keyBackgroundMargin
+            KeyIcon {
+                id: hideKeyIcon
+                source: "qrc:/images/hidekeyboard.png"
+                color: "#868482"
+                anchors.fill: parent
+                anchors.margins: keyContentMargin
+            }
+        }
+        states: [
+            State {
+                name: "pressed"
+                when: control.pressed
+                PropertyChanges {
+                    target: hideKeyBackground
+                    opacity: 0.80
+                }
+                PropertyChanges {
+                    target: hideKeyIcon
+                    opacity: 0.6
+                }
+            },
+            State {
+                name: "disabled"
+                when: !control.enabled
+                PropertyChanges {
+                    target: hideKeyBackground
+                    opacity: 0.8
+                }
+                PropertyChanges {
+                    target: hideKeyIcon
+                    opacity: 0.2
+                }
+            }
+        ]
+    }
+
+    shiftKeyPanel: KeyPanel {
+        Rectangle {
+            id: shiftKeyBackground
+            radius: 5
+            color: "#1e1b18"
+            anchors.fill: parent
+            anchors.margins: keyBackgroundMargin
+            KeyIcon {
+                id: shiftKeyIcon
+                source: "qrc:/images/shift.png"
+                color: "#868482"
+                anchors.fill: parent
+                anchors.margins: keyContentMargin
+            }
+            states: [
+                State {
+                    name: "capslock"
+                    when: control.capsLock
+                    PropertyChanges {
+                        target: shiftKeyBackground
+                        color: "#5a892e"
+                    }
+                    PropertyChanges {
+                        target: shiftKeyIcon
+                        color: "#c5d6b6"
+                    }
+                },
+                State {
+                    name: "shift"
+                    when: control.shift
+                    PropertyChanges {
+                        target: shiftKeyIcon
+                        color: "#80c342"
+                    }
+                }
+            ]
+        }
+        states: [
+            State {
+                name: "pressed"
+                when: control.pressed
+                PropertyChanges {
+                    target: shiftKeyBackground
+                    opacity: 0.80
+                }
+                PropertyChanges {
+                    target: shiftKeyIcon
+                    opacity: 0.6
+                }
+            },
+            State {
+                name: "disabled"
+                when: !control.enabled
+                PropertyChanges {
+                    target: shiftKeyBackground
+                    opacity: 0.8
+                }
+                PropertyChanges {
+                    target: shiftKeyIcon
+                    opacity: 0.2
+                }
+            }
+        ]
+    }
+
+    spaceKeyPanel: KeyPanel {
+        Rectangle {
+            id: spaceKeyBackground
+            radius: 5
+            color: "#35322f"
+            anchors.fill: parent
+            anchors.margins: keyBackgroundMargin
+        }
+        states: [
+            State {
+                name: "pressed"
+                when: control.pressed
+                PropertyChanges {
+                    target: spaceKeyBackground
+                    opacity: 0.80
+                }
+            },
+            State {
+                name: "disabled"
+                when: !control.enabled
+                PropertyChanges {
+                    target: spaceKeyBackground
+                    opacity: 0.8
+                }
+            }
+        ]
+    }
+
+    symbolKeyPanel: KeyPanel {
+        Rectangle {
+            id: symbolKeyBackground
+            radius: 5
+            color: "#1e1b18"
+            anchors.fill: parent
+            anchors.margins: keyBackgroundMargin
+            Text {
+                id: symbolKeyText
+                text: control.displayText
+                color: "white"
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignVCenter
+                anchors.fill: parent
+                anchors.margins: keyContentMargin
+                font {
+                    family: fontFamily
+                    weight: Font.DemiBold
+                    pixelSize: 44 * scaleHint
+                    capitalization: Font.AllUppercase
+                }
+            }
+        }
+        states: [
+            State {
+                name: "pressed"
+                when: control.pressed
+                PropertyChanges {
+                    target: symbolKeyBackground
+                    opacity: 0.80
+                }
+                PropertyChanges {
+                    target: symbolKeyText
+                    opacity: 0.6
+                }
+            },
+            State {
+                name: "disabled"
+                when: !control.enabled
+                PropertyChanges {
+                    target: symbolKeyBackground
+                    opacity: 0.8
+                }
+                PropertyChanges {
+                    target: symbolKeyText
+                    opacity: 0.2
+                }
+            }
+        ]
+    }
+
+    characterPreviewMargin: 0
+    characterPreviewDelegate: Item {
+        property string text
+        id: characterPreview
+        Rectangle {
+            id: characterPreviewBackground
+            anchors.fill: parent
+            color: "#5d5b59"
+            radius: 5
+            Text {
+                id: characterPreviewText
+                color: "white"
+                text: characterPreview.text
+                fontSizeMode: Text.HorizontalFit
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignVCenter
+                anchors.fill: parent
+                anchors.margins: Math.round(48 * scaleHint)
+                font {
+                    family: fontFamily
+                    weight: Font.DemiBold
+                    pixelSize: 82 * scaleHint
+                }
+            }
+        }
+    }
+
+    alternateKeysListItemWidth: 99 * scaleHint
+    alternateKeysListItemHeight: 150 * scaleHint
+    alternateKeysListDelegate: Item {
+        id: alternateKeysListItem
+        width: alternateKeysListItemWidth
+        height: alternateKeysListItemHeight
+        Text {
+            id: listItemText
+            text: model.text
+            color: "#868482"
+            font {
+                family: fontFamily
+                weight: Font.DemiBold
+                pixelSize: 52 * scaleHint
+            }
+            anchors.centerIn: parent
+        }
+        states: State {
+            name: "current"
+            when: alternateKeysListItem.ListView.isCurrentItem
+            PropertyChanges {
+                target: listItemText
+                color: "white"
+            }
+        }
+    }
+    alternateKeysListHighlight: Rectangle {
+        color: "#5d5b59"
+        radius: 5
+    }
+    alternateKeysListBackground: Rectangle {
+        color: "#1e1b18"
+        radius: 5
+    }
+
+    selectionListHeight: 85 * scaleHint
+    selectionListDelegate: SelectionListItem {
+        id: selectionListItem
+        width: Math.round(selectionListLabel.width + selectionListLabel.anchors.leftMargin * 2)
+        Text {
+            id: selectionListLabel
+            anchors.left: parent.left
+            anchors.leftMargin: Math.round(140 * scaleHint)
+            anchors.verticalCenter: parent.verticalCenter
+            text: decorateText(display, wordCompletionLength)
+            color: "#80c342"
+            font {
+                family: fontFamily
+                weight: Font.Normal
+                pixelSize: 44 * scaleHint
+            }
+            function decorateText(text, wordCompletionLength) {
+                if (wordCompletionLength > 0) {
+                    return text.slice(0, -wordCompletionLength) + '<u>' + text.slice(-wordCompletionLength) + '</u>'
+                }
+                return text
+            }
+        }
+        Rectangle {
+            id: selectionListSeparator
+            width: 4 * scaleHint
+            height: 36 * scaleHint
+            radius: 2
+            color: "#35322f"
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.right: parent.left
+        }
+        states: State {
+            name: "current"
+            when: selectionListItem.ListView.isCurrentItem
+            PropertyChanges {
+                target: selectionListLabel
+                color: "white"
+            }
+        }
+    }
+    selectionListBackground: Rectangle {
+        color: "#1e1b18"
+    }
+}
diff --git a/src/virtualkeyboard/content/styles/default/style.qrc b/src/virtualkeyboard/content/styles/default/style.qrc
new file mode 100644
index 00000000..c7051c42
--- /dev/null
+++ b/src/virtualkeyboard/content/styles/default/style.qrc
@@ -0,0 +1,12 @@
+<RCC>
+    <qresource prefix="/">
+        <file>style.qml</file>
+        <file>fonts/OpenSans-Regular.ttf</file>
+        <file>fonts/OpenSans-Semibold.ttf</file>
+        <file>images/backspace.png</file>
+        <file>images/enter.png</file>
+        <file>images/hidekeyboard.png</file>
+        <file>images/shift.png</file>
+        <file>images/globe.png</file>
+    </qresource>
+</RCC>
diff --git a/src/virtualkeyboard/content/styles/retro/fonts/Courier Prime Bold.ttf b/src/virtualkeyboard/content/styles/retro/fonts/Courier Prime Bold.ttf
new file mode 100644
index 00000000..1b0888c2
--- /dev/null
+++ b/src/virtualkeyboard/content/styles/retro/fonts/Courier Prime Bold.ttf
diff --git a/src/virtualkeyboard/content/styles/retro/fonts/Courier Prime.ttf b/src/virtualkeyboard/content/styles/retro/fonts/Courier Prime.ttf
new file mode 100644
index 00000000..db4e6c14
--- /dev/null
+++ b/src/virtualkeyboard/content/styles/retro/fonts/Courier Prime.ttf
diff --git a/src/virtualkeyboard/content/styles/retro/images/backspace.png b/src/virtualkeyboard/content/styles/retro/images/backspace.png
new file mode 100755
index 00000000..0a33e95f
--- /dev/null
+++ b/src/virtualkeyboard/content/styles/retro/images/backspace.png
diff --git a/src/virtualkeyboard/content/styles/retro/images/enter.png b/src/virtualkeyboard/content/styles/retro/images/enter.png
new file mode 100755
index 00000000..03335a0f
--- /dev/null
+++ b/src/virtualkeyboard/content/styles/retro/images/enter.png
diff --git a/src/virtualkeyboard/content/styles/retro/images/globe.png b/src/virtualkeyboard/content/styles/retro/images/globe.png
new file mode 100755
index 00000000..93da92f4
--- /dev/null
+++ b/src/virtualkeyboard/content/styles/retro/images/globe.png
diff --git a/src/virtualkeyboard/content/styles/retro/images/hidekeyboard.png b/src/virtualkeyboard/content/styles/retro/images/hidekeyboard.png
new file mode 100755
index 00000000..ca515036
--- /dev/null
+++ b/src/virtualkeyboard/content/styles/retro/images/hidekeyboard.png
diff --git a/src/virtualkeyboard/content/styles/retro/images/key154px_black.png b/src/virtualkeyboard/content/styles/retro/images/key154px_black.png
new file mode 100755
index 00000000..d9bf8e72
--- /dev/null
+++ b/src/virtualkeyboard/content/styles/retro/images/key154px_black.png
diff --git a/src/virtualkeyboard/content/styles/retro/images/key154px_black_long.png b/src/virtualkeyboard/content/styles/retro/images/key154px_black_long.png
new file mode 100755
index 00000000..492c718a
--- /dev/null
+++ b/src/virtualkeyboard/content/styles/retro/images/key154px_black_long.png
diff --git a/src/virtualkeyboard/content/styles/retro/images/key154px_capslock.png b/src/virtualkeyboard/content/styles/retro/images/key154px_capslock.png
new file mode 100755
index 00000000..7cb0bd4a
--- /dev/null
+++ b/src/virtualkeyboard/content/styles/retro/images/key154px_capslock.png
diff --git a/src/virtualkeyboard/content/styles/retro/images/key154px_capslock_long.png b/src/virtualkeyboard/content/styles/retro/images/key154px_capslock_long.png
new file mode 100755
index 00000000..429d4bb5
--- /dev/null
+++ b/src/virtualkeyboard/content/styles/retro/images/key154px_capslock_long.png
diff --git a/src/virtualkeyboard/content/styles/retro/images/key154px_colorA.png b/src/virtualkeyboard/content/styles/retro/images/key154px_colorA.png
new file mode 100755
index 00000000..778384cd
--- /dev/null
+++ b/src/virtualkeyboard/content/styles/retro/images/key154px_colorA.png
diff --git a/src/virtualkeyboard/content/styles/retro/images/key154px_colorA_long.png b/src/virtualkeyboard/content/styles/retro/images/key154px_colorA_long.png
new file mode 100755
index 00000000..e1b6e5b8
--- /dev/null
+++ b/src/virtualkeyboard/content/styles/retro/images/key154px_colorA_long.png
diff --git a/src/virtualkeyboard/content/styles/retro/images/key154px_colorB.png b/src/virtualkeyboard/content/styles/retro/images/key154px_colorB.png
new file mode 100755
index 00000000..cef9fd29
--- /dev/null
+++ b/src/virtualkeyboard/content/styles/retro/images/key154px_colorB.png
diff --git a/src/virtualkeyboard/content/styles/retro/images/key154px_shiftcase.png b/src/virtualkeyboard/content/styles/retro/images/key154px_shiftcase.png
new file mode 100755
index 00000000..58bf8282
--- /dev/null
+++ b/src/virtualkeyboard/content/styles/retro/images/key154px_shiftcase.png
diff --git a/src/virtualkeyboard/content/styles/retro/images/key154px_shiftcase_long.png b/src/virtualkeyboard/content/styles/retro/images/key154px_shiftcase_long.png
new file mode 100755
index 00000000..bfcba5fd
--- /dev/null
+++ b/src/virtualkeyboard/content/styles/retro/images/key154px_shiftcase_long.png
diff --git a/src/virtualkeyboard/content/styles/retro/images/key156px_black_long.png b/src/virtualkeyboard/content/styles/retro/images/key156px_black_long.png
new file mode 100755
index 00000000..a22109bd
--- /dev/null
+++ b/src/virtualkeyboard/content/styles/retro/images/key156px_black_long.png
diff --git a/src/virtualkeyboard/content/styles/retro/images/key156px_black_medium_long.png b/src/virtualkeyboard/content/styles/retro/images/key156px_black_medium_long.png
new file mode 100755
index 00000000..8c92d3b1
--- /dev/null
+++ b/src/virtualkeyboard/content/styles/retro/images/key156px_black_medium_long.png
diff --git a/src/virtualkeyboard/content/styles/retro/images/key156px_colorA.png b/src/virtualkeyboard/content/styles/retro/images/key156px_colorA.png
new file mode 100755
index 00000000..6da57d60
--- /dev/null
+++ b/src/virtualkeyboard/content/styles/retro/images/key156px_colorA.png
diff --git a/src/virtualkeyboard/content/styles/retro/images/key156px_colorB.png b/src/virtualkeyboard/content/styles/retro/images/key156px_colorB.png
new file mode 100755
index 00000000..af0912e3
--- /dev/null
+++ b/src/virtualkeyboard/content/styles/retro/images/key156px_colorB.png
diff --git a/src/virtualkeyboard/content/styles/retro/images/key160px_black.png b/src/virtualkeyboard/content/styles/retro/images/key160px_black.png
new file mode 100755
index 00000000..565c4bf7
--- /dev/null
+++ b/src/virtualkeyboard/content/styles/retro/images/key160px_black.png
diff --git a/src/virtualkeyboard/content/styles/retro/images/key160px_colorA.png b/src/virtualkeyboard/content/styles/retro/images/key160px_colorA.png
new file mode 100755
index 00000000..e2125cf8
--- /dev/null
+++ b/src/virtualkeyboard/content/styles/retro/images/key160px_colorA.png
diff --git a/src/virtualkeyboard/content/styles/retro/images/key160px_colorB.png b/src/virtualkeyboard/content/styles/retro/images/key160px_colorB.png
new file mode 100755
index 00000000..9b543b05
--- /dev/null
+++ b/src/virtualkeyboard/content/styles/retro/images/key160px_colorB.png
diff --git a/src/virtualkeyboard/content/styles/retro/images/key_preview.png b/src/virtualkeyboard/content/styles/retro/images/key_preview.png
new file mode 100755
index 00000000..3e9e9557
--- /dev/null
+++ b/src/virtualkeyboard/content/styles/retro/images/key_preview.png
diff --git a/src/virtualkeyboard/content/styles/retro/images/shift.png b/src/virtualkeyboard/content/styles/retro/images/shift.png
new file mode 100755
index 00000000..ae5ad0b7
--- /dev/null
+++ b/src/virtualkeyboard/content/styles/retro/images/shift.png
diff --git a/src/virtualkeyboard/content/styles/retro/images/triangle_black.png b/src/virtualkeyboard/content/styles/retro/images/triangle_black.png
new file mode 100755
index 00000000..a45e733b
--- /dev/null
+++ b/src/virtualkeyboard/content/styles/retro/images/triangle_black.png
diff --git a/src/virtualkeyboard/content/styles/retro/images/triangle_highlight.png b/src/virtualkeyboard/content/styles/retro/images/triangle_highlight.png
new file mode 100755
index 00000000..34853263
--- /dev/null
+++ b/src/virtualkeyboard/content/styles/retro/images/triangle_highlight.png
diff --git a/src/virtualkeyboard/content/styles/retro/style.qml b/src/virtualkeyboard/content/styles/retro/style.qml
new file mode 100644
index 00000000..a33c9608
--- /dev/null
+++ b/src/virtualkeyboard/content/styles/retro/style.qml
@@ -0,0 +1,667 @@
+/****************************************************************************
+**
+** Copyright (C) 2013 Digia Plc
+** All rights reserved.
+** For any questions to Digia, please use contact form at http://qt.digia.com
+**
+** This file is part of the Qt Quick Enterprise Controls add-on.
+**
+** Licensees holding valid Qt Enterprise licenses may use this file in
+** accordance with the Qt Enterprise License Agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and Digia.
+**
+** If you have questions regarding the use of this file, please use
+** contact form at http://qt.digia.com
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import QtQuick.Enterprise.VirtualKeyboard.Styles 1.0
+
+KeyboardStyle {
+    readonly property string fontFamily: courierPrimeRegular.name
+    readonly property real keyBackgroundMargin: Math.round(9 * scaleHint)
+    readonly property real keyContentMargin: Math.round(50 * scaleHint)
+
+    property var courierPrimeRegular: FontLoader {
+        source: "qrc:/fonts/Courier Prime.ttf"
+    }
+    property var courierPrimeBold: FontLoader {
+        source: "qrc:/fonts/Courier Prime Bold.ttf"
+    }
+
+    keyboardDesignWidth: 2560
+    keyboardDesignHeight: 800
+    keyboardRelativeLeftMargin: 114 / keyboardDesignWidth
+    keyboardRelativeRightMargin: 114 / keyboardDesignWidth
+    keyboardRelativeTopMargin: 9 / keyboardDesignHeight
+    keyboardRelativeBottomMargin: 88 / keyboardDesignHeight
+
+    keyboardBackground: Rectangle {
+        gradient: Gradient {
+            GradientStop { position: 0.0; color: "#272727" }
+            GradientStop { position: 1.0; color: "black" }
+        }
+    }
+
+    keyPanel: KeyPanel {
+        Image {
+            id: keyBackground
+            source: "qrc:/images/key154px_colorA.png"
+            fillMode: Image.PreserveAspectFit
+            anchors.fill: parent
+            anchors.margins: keyBackgroundMargin
+            states: [
+                State {
+                    name: "key154px_colorB"
+                    when: ['q', 'r', 'y', 'p', 's', 'd', 'j', 'l', 'v', 'b', '\'',
+                        '1', '4', '6', '0', '#', '%', '+', ')', '>',
+                        '~', '·', '÷', '}', '€', '£', '§', ']', '«', '»'].indexOf(control.displayText.toLowerCase()) >= 0
+                    PropertyChanges {
+                        target: keyBackground
+                        source: "qrc:/images/key154px_colorB.png"
+                    }
+                },
+                State {
+                    name: "key154px_black"
+                    when: control.displayText.length > 1
+                    PropertyChanges {
+                        target: keyBackground
+                        source: "qrc:/images/key154px_black.png"
+                    }
+                }
+            ]
+        }
+        Text {
+            id: keyText
+            text: control.displayText
+            color: "#110b05"
+            anchors.centerIn: parent
+            anchors.verticalCenterOffset: 18 * scaleHint
+            font {
+                family: fontFamily
+                weight: Font.Bold
+                pixelSize: 82 * scaleHint
+                capitalization: control.uppercased ? Font.AllUppercase : Font.MixedCase
+            }
+            states: [
+                State {
+                    name: "fontB"
+                    when: control.displayText.length > 1
+                    PropertyChanges {
+                        target: keyText
+                        color: "#c5a96f"
+                        font.pixelSize: 74 * scaleHint
+                        font.letterSpacing: -10 * scaleHint
+                    }
+                }
+            ]
+        }
+        states: [
+            State {
+                name: "pressed"
+                when: control.pressed
+                PropertyChanges {
+                    target: keyBackground
+                    opacity: 0.70
+                }
+                PropertyChanges {
+                    target: keyText
+                    opacity: 0.75
+                }
+            },
+            State {
+                name: "disabled"
+                when: !control.enabled
+                PropertyChanges {
+                    target: keyBackground
+                    opacity: 0.30
+                }
+                PropertyChanges {
+                    target: keyText
+                    opacity: 0.50
+                }
+            }
+        ]
+    }
+
+    backspaceKeyPanel: KeyPanel {
+        BorderImage {
+            id: backspaceKeyBackground
+            source: "qrc:/images/key154px_black.png"
+            width: (parent.width - 2 * keyBackgroundMargin) / scale
+            height: sourceSize.height
+            anchors.centerIn: parent
+            border.left: 76
+            border.top: 76
+            border.right: 76
+            border.bottom: 76
+            horizontalTileMode: BorderImage.Stretch
+            scale: (parent.height - 2 * keyBackgroundMargin) / sourceSize.height
+        }
+        KeyIcon {
+            id: backspaceKeyIcon
+            source: "qrc:/images/backspace.png"
+            color: "#c5a96f"
+            anchors.fill: parent
+            anchors.margins: Math.round(keyContentMargin * 1.2)
+        }
+        states: [
+            State {
+                name: "pressed"
+                when: control.pressed
+                PropertyChanges {
+                    target: backspaceKeyBackground
+                    opacity: 0.70
+                }
+                PropertyChanges {
+                    target: backspaceKeyIcon
+                    opacity: 0.70
+                }
+            },
+            State {
+                name: "disabled"
+                when: !control.enabled
+                PropertyChanges {
+                    target: backspaceKeyBackground
+                    opacity: 0.20
+                }
+                PropertyChanges {
+                    target: backspaceKeyIcon
+                    opacity: 0.20
+                }
+            }
+        ]
+    }
+
+    languageKeyPanel: KeyPanel {
+        Image {
+            id: languageKeyBackground
+            source: "qrc:/images/key154px_colorB.png"
+            fillMode: Image.PreserveAspectFit
+            anchors.fill: parent
+            anchors.margins: keyBackgroundMargin
+        }
+        KeyIcon {
+            id: languageKeyIcon
+            source: "qrc:/images/globe.png"
+            color: "#110b05"
+            anchors.fill: parent
+            anchors.margins: keyContentMargin
+        }
+        states: [
+            State {
+                name: "pressed"
+                when: control.pressed
+                PropertyChanges {
+                    target: languageKeyBackground
+                    opacity: 0.70
+                }
+                PropertyChanges {
+                    target: languageKeyIcon
+                    opacity: 0.30
+                }
+            },
+            State {
+                name: "disabled"
+                when: !control.enabled
+                PropertyChanges {
+                    target: languageKeyBackground
+                    opacity: 0.75
+                }
+                PropertyChanges {
+                    target: languageKeyIcon
+                    opacity: 0.50
+                }
+            }
+        ]
+    }
+
+    enterKeyPanel: KeyPanel {
+        BorderImage {
+            id: enterKeyBackground
+            source: "qrc:/images/key154px_black.png"
+            width: (parent.width - 2 * keyBackgroundMargin) / scale
+            height: sourceSize.height
+            anchors.centerIn: parent
+            border.left: 76
+            border.top: 76
+            border.right: 76
+            border.bottom: 76
+            horizontalTileMode: BorderImage.Stretch
+            scale: (parent.height - 2 * keyBackgroundMargin) / sourceSize.height
+        }
+        KeyIcon {
+            id: enterKeyIcon
+            visible: control.displayText.length === 0
+            source: "qrc:/images/enter.png"
+            color: "#c5a96f"
+            anchors.fill: parent
+            anchors.topMargin: Math.round(59 * scaleHint)
+            anchors.bottomMargin: Math.round(59 * scaleHint)
+            anchors.leftMargin: Math.round(142 * scaleHint)
+            anchors.rightMargin: Math.round(59 * scaleHint)
+        }
+        Text {
+            id: enterKeyText
+            visible: control.displayText.length !== 0
+            text: control.displayText
+            clip: true
+            fontSizeMode: Text.HorizontalFit
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            anchors.fill: parent
+            anchors.leftMargin: keyContentMargin
+            anchors.topMargin: Math.round(60 * scaleHint)
+            anchors.rightMargin: keyContentMargin
+            anchors.bottomMargin: Math.round(30 * scaleHint)
+            color: "#c5a96f"
+            font {
+                family: fontFamily
+                weight: Font.Bold
+                pixelSize: 74 * scaleHint
+                capitalization: Font.AllUppercase
+            }
+        }
+        states: [
+            State {
+                name: "pressed"
+                when: control.pressed
+                PropertyChanges {
+                    target: enterKeyBackground
+                    opacity: 0.70
+                }
+                PropertyChanges {
+                    target: enterKeyIcon
+                    opacity: 0.70
+                }
+                PropertyChanges {
+                    target: enterKeyText
+                    opacity: 0.70
+                }
+            },
+            State {
+                name: "disabled"
+                when: !control.enabled
+                PropertyChanges {
+                    target: enterKeyBackground
+                    opacity: 0.20
+                }
+                PropertyChanges {
+                    target: enterKeyIcon
+                    opacity: 0.20
+                }
+                PropertyChanges {
+                    target: enterKeyText
+                    opacity: 0.20
+                }
+            }
+        ]
+    }
+
+    hideKeyPanel: KeyPanel {
+        BorderImage {
+            id: hideKeyBackground
+            source: "qrc:/images/key154px_black.png"
+            width: (parent.width - 2 * keyBackgroundMargin) / scale
+            height: sourceSize.height
+            anchors.centerIn: parent
+            border.left: 76
+            border.top: 76
+            border.right: 76
+            border.bottom: 76
+            horizontalTileMode: BorderImage.Stretch
+            scale: (parent.height - 2 * keyBackgroundMargin) / sourceSize.height
+        }
+        KeyIcon {
+            id: hideKeyIcon
+            source: "qrc:/images/hidekeyboard.png"
+            color: "#c5a96f"
+            anchors.fill: parent
+            anchors.margins: keyContentMargin
+        }
+        states: [
+            State {
+                name: "pressed"
+                when: control.pressed
+                PropertyChanges {
+                    target: hideKeyBackground
+                    opacity: 0.70
+                }
+                PropertyChanges {
+                    target: hideKeyIcon
+                    opacity: 0.70
+                }
+            },
+            State {
+                name: "disabled"
+                when: !control.enabled
+                PropertyChanges {
+                    target: hideKeyBackground
+                    opacity: 0.20
+                }
+                PropertyChanges {
+                    target: hideKeyIcon
+                    opacity: 0.20
+                }
+            }
+        ]
+    }
+
+    shiftKeyPanel: KeyPanel {
+        BorderImage {
+            id: shiftKeyBackground
+            source: "qrc:/images/key154px_black.png"
+            width: (parent.width - 2 * keyBackgroundMargin) / scale
+            height: sourceSize.height
+            anchors.centerIn: parent
+            border.left: 76
+            border.top: 76
+            border.right: 76
+            border.bottom: 76
+            horizontalTileMode: BorderImage.Stretch
+            scale: (parent.height - 2 * keyBackgroundMargin) / sourceSize.height
+            states: [
+                State {
+                    name: "capslock"
+                    when: control.capsLock
+                    PropertyChanges {
+                        target: shiftKeyBackground
+                        source: "qrc:/images/key154px_capslock.png"
+                    }
+                    PropertyChanges {
+                        target: shiftKeyIcon
+                        color: "#cd8865"
+                    }
+                },
+                State {
+                    name: "shift"
+                    when: control.shift
+                    PropertyChanges {
+                        target: shiftKeyBackground
+                        source: "qrc:/images/key154px_shiftcase.png"
+                    }
+                    PropertyChanges {
+                        target: shiftKeyIcon
+                        color: "#dc4f28"
+                    }
+                }
+            ]
+        }
+        KeyIcon {
+            id: shiftKeyIcon
+            source: "qrc:/images/shift.png"
+            color: "#c5a96f"
+            anchors.fill: parent
+            anchors.margins: keyContentMargin
+        }
+        states: [
+            State {
+                name: "pressed"
+                when: control.pressed
+                PropertyChanges {
+                    target: shiftKeyBackground
+                    opacity: 0.70
+                }
+                PropertyChanges {
+                    target: shiftKeyIcon
+                    opacity: 0.70
+                }
+            },
+            State {
+                name: "disabled"
+                when: !control.enabled
+                PropertyChanges {
+                    target: shiftKeyBackground
+                    opacity: 0.20
+                }
+                PropertyChanges {
+                    target: shiftKeyIcon
+                    opacity: 0.20
+                }
+            }
+        ]
+    }
+
+    spaceKeyPanel: KeyPanel {
+        BorderImage {
+            id: spaceKeyBackground
+            source: "qrc:/images/key154px_colorA.png"
+            width: (parent.width - 2 * keyBackgroundMargin) / scale
+            height: sourceSize.height
+            anchors.centerIn: parent
+            border.left: 76
+            border.top: 76
+            border.right: 76
+            border.bottom: 76
+            horizontalTileMode: BorderImage.Stretch
+            scale: (parent.height - 2 * keyBackgroundMargin) / sourceSize.height
+        }
+        states: [
+            State {
+                name: "pressed"
+                when: control.pressed
+                PropertyChanges {
+                    target: spaceKeyBackground
+                    opacity: 0.70
+                }
+            },
+            State {
+                name: "disabled"
+                when: !control.enabled
+                PropertyChanges {
+                    target: spaceKeyBackground
+                    opacity: 0.30
+                }
+            }
+        ]
+    }
+
+    symbolKeyPanel: KeyPanel {
+        BorderImage {
+            id: symbolKeyBackground
+            source: "qrc:/images/key154px_black.png"
+            width: (parent.width - 2 * keyBackgroundMargin) / scale
+            height: sourceSize.height
+            anchors.centerIn: parent
+            border.left: 76
+            border.top: 76
+            border.right: 76
+            border.bottom: 76
+            horizontalTileMode: BorderImage.Stretch
+            scale: (parent.height - 2 * keyBackgroundMargin) / sourceSize.height
+        }
+        Text {
+            id: symbolKeyText
+            text: control.displayText
+            color: "#c5a96f"
+            anchors.centerIn: parent
+            anchors.verticalCenterOffset: 12 * scaleHint
+            font {
+                family: fontFamily
+                weight: Font.DemiBold
+                pixelSize: 74 * scaleHint
+                letterSpacing: -5 * scaleHint
+                capitalization: Font.AllUppercase
+            }
+        }
+        states: [
+            State {
+                name: "pressed"
+                when: control.pressed
+                PropertyChanges {
+                    target: symbolKeyBackground
+                    opacity: 0.70
+                }
+                PropertyChanges {
+                    target: symbolKeyText
+                    opacity: 0.70
+                }
+            },
+            State {
+                name: "disabled"
+                when: !control.enabled
+                PropertyChanges {
+                    target: symbolKeyBackground
+                    opacity: 0.20
+                }
+                PropertyChanges {
+                    target: symbolKeyText
+                    opacity: 0.20
+                }
+            }
+        ]
+    }
+
+    characterPreviewMargin: Math.round(20 * scaleHint)
+    characterPreviewDelegate: Item {
+        property string text
+        id: characterPreview
+        Image {
+            id: characterPreviewBackground
+            source: "qrc:/images/key_preview.png"
+            fillMode: Image.PreserveAspectFit
+            anchors.fill: parent
+        }
+        Text {
+            id: characterPreviewText
+            color: "#c5a96f"
+            text: characterPreview.text
+            anchors.centerIn: characterPreviewBackground
+            anchors.verticalCenterOffset: 18 * scaleHint
+            font {
+                family: fontFamily
+                weight: Font.Bold
+                pixelSize: 85 * scaleHint
+            }
+            states: [
+                State {
+                    name: "fit"
+                    when: text.length > 1
+                    PropertyChanges {
+                        target: characterPreviewText
+                        font.letterSpacing: -10 * scaleHint
+                    }
+                }
+            ]
+        }
+    }
+
+    alternateKeysListItemWidth: Math.round(111 * scaleHint)
+    alternateKeysListItemHeight: Math.round(154 * scaleHint)
+    alternateKeysListBottomMargin: Math.round(15 * scaleHint)
+    alternateKeysListLeftMargin: Math.round(79 * scaleHint)
+    alternateKeysListRightMargin: Math.round(79 * scaleHint)
+    alternateKeysListDelegate: Item {
+        id: alternateKeysListItem
+        width: alternateKeysListItemWidth
+        height: alternateKeysListItemHeight
+        Text {
+            id: listItemText
+            text: model.text
+            color: "#868482"
+            font {
+                family: fontFamily
+                weight: Font.DemiBold
+                pixelSize: 52 * scaleHint
+                letterSpacing: -6 * scaleHint
+            }
+            anchors.centerIn: parent
+        }
+        states: State {
+            name: "current"
+            when: alternateKeysListItem.ListView.isCurrentItem
+            PropertyChanges {
+                target: listItemText
+                color: "white"
+            }
+        }
+    }
+    alternateKeysListHighlight: Item {
+        Rectangle {
+            anchors.fill: parent
+            anchors.topMargin: Math.round(8 * scaleHint)
+            anchors.bottomMargin: Math.round(8 * scaleHint)
+            gradient: Gradient {
+                GradientStop { position: 0.0; color: "#64462a" }
+                GradientStop { position: 0.18; color: "#a37648" }
+                GradientStop { position: 0.5; color: "#c4a47c" }
+                GradientStop { position: 0.82; color: "#a37648" }
+                GradientStop { position: 1.0; color: "#64462a" }
+            }
+        }
+    }
+    alternateKeysListBackground: Item {
+        property real currentItemOffset
+        property bool currentItemHighlight: false
+        BorderImage {
+            cache: false
+            source: "qrc:/images/key160px_black.png"
+            width: sourceSize.width + parent.width / scale
+            height: sourceSize.height
+            anchors.centerIn: parent
+            border.left: 79
+            border.top: 79
+            border.right: 79
+            border.bottom: 79
+            horizontalTileMode: BorderImage.Stretch
+            scale: parent.height / sourceSize.height
+        }
+        Image {
+            visible: currentItemOffset !== undefined
+            source: currentItemHighlight ? "qrc:/images/triangle_highlight.png" : "qrc:/images/triangle_black.png"
+            fillMode: Image.PreserveAspectFit
+            width: sourceSize.width * scaleHint
+            height: sourceSize.height * scaleHint
+            anchors.top: parent.bottom
+            anchors.topMargin: Math.round(-8 * scaleHint)
+            anchors.left: parent.left
+            anchors.leftMargin: Math.round(currentItemOffset - width / 2)
+        }
+    }
+
+    selectionListHeight: 85 * scaleHint
+    selectionListDelegate: SelectionListItem {
+        id: selectionListItem
+        width: Math.round(selectionListLabel.width + selectionListLabel.anchors.leftMargin * 2)
+        Text {
+            id: selectionListLabel
+            anchors.left: parent.left
+            anchors.leftMargin: Math.round(140 * scaleHint)
+            anchors.verticalCenter: parent.verticalCenter
+            text: decorateText(display, wordCompletionLength)
+            color: "white"
+            font {
+                family: fontFamily
+                weight: Font.Bold
+                pixelSize: 44 * scaleHint
+            }
+            function decorateText(text, wordCompletionLength) {
+                if (wordCompletionLength > 0) {
+                    return text.slice(0, -wordCompletionLength) + '<u>' + text.slice(-wordCompletionLength) + '</u>'
+                }
+                return text
+            }
+        }
+        Rectangle {
+            id: selectionListSeparator
+            width: 4 * scaleHint
+            height: 36 * scaleHint
+            color: "#35322f"
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.right: parent.left
+        }
+        states: State {
+            name: "current"
+            when: selectionListItem.ListView.isCurrentItem
+            PropertyChanges {
+                target: selectionListLabel
+                color: "#c5a96f"
+            }
+        }
+    }
+    selectionListBackground: Rectangle {
+        color: "#222222"
+    }
+}
diff --git a/src/virtualkeyboard/content/styles/retro/style.qrc b/src/virtualkeyboard/content/styles/retro/style.qrc
new file mode 100644
index 00000000..4d4c41c8
--- /dev/null
+++ b/src/virtualkeyboard/content/styles/retro/style.qrc
@@ -0,0 +1,31 @@
+<RCC>
+    <qresource prefix="/">
+        <file>style.qml</file>
+        <file>fonts/Courier Prime.ttf</file>
+        <file>fonts/Courier Prime Bold.ttf</file>
+        <file>images/key154px_black.png</file>
+        <file>images/key154px_black_long.png</file>
+        <file>images/key154px_capslock_long.png</file>
+        <file>images/key154px_capslock.png</file>
+        <file>images/key154px_colorA_long.png</file>
+        <file>images/key154px_colorA.png</file>
+        <file>images/key154px_colorB.png</file>
+        <file>images/key154px_shiftcase_long.png</file>
+        <file>images/key154px_shiftcase.png</file>
+        <file>images/key156px_black_long.png</file>
+        <file>images/key156px_black_medium_long.png</file>
+        <file>images/key156px_colorA.png</file>
+        <file>images/key156px_colorB.png</file>
+        <file>images/key160px_black.png</file>
+        <file>images/key160px_colorA.png</file>
+        <file>images/key160px_colorB.png</file>
+        <file>images/key_preview.png</file>
+        <file>images/triangle_black.png</file>
+        <file>images/triangle_highlight.png</file>
+        <file>images/backspace.png</file>
+        <file>images/enter.png</file>
+        <file>images/hidekeyboard.png</file>
+        <file>images/shift.png</file>
+        <file>images/globe.png</file>
+    </qresource>
+</RCC>