Revision control
Copy as Markdown
// Copyright (C) 2016 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only
import QtQuick
import QtQuick.VirtualKeyboard
import QtQuick.VirtualKeyboard.Styles
KeyboardStyle {
id: currentStyle
readonly property bool compactSelectionList: [InputEngine.InputMode.Pinyin, InputEngine.InputMode.Cangjie, InputEngine.InputMode.Zhuyin].indexOf(InputContext.inputEngine.inputMode) !== -1
readonly property string fontFamily: "Arial"
readonly property real keyBackgroundMargin: Math.round(8 * scaleHint)
readonly property real keyContentMargin: Math.round(40 * scaleHint)
readonly property real keyIconScale: scaleHint * 0.8
readonly property string resourcePrefix: "qrc:/qt-project.org/imports/QtQuick/VirtualKeyboard/Styles/Builtin/default/"
readonly property string inputLocale: InputContext.locale
property color primaryColor: "#263238"
property color primaryLightColor: "#4f5b62"
property color primaryDarkColor: "#000a12"
property color textOnPrimaryColor: "#ffffff"
property color secondaryColor: "#01579b"
property color secondaryLightColor: "#4f83cc"
property color secondaryDarkColor: "#002f6c"
property color textOnSecondaryColor: "#ffffff"
property color keyboardBackgroundColor: primaryColor
property color normalKeyBackgroundColor: primaryDarkColor
property color highlightedKeyBackgroundColor: primaryLightColor
property color capsLockKeyAccentColor: secondaryColor
property color modeKeyAccentColor: textOnPrimaryColor
property color keyTextColor: textOnPrimaryColor
property color keySmallTextColor: textOnPrimaryColor
property color popupBackgroundColor: secondaryColor
property color popupBorderColor: secondaryLightColor
property color popupTextColor: textOnSecondaryColor
property color popupHighlightColor: secondaryLightColor
property color selectionListTextColor: textOnPrimaryColor
property color selectionListSeparatorColor: primaryLightColor
property color selectionListBackgroundColor: primaryColor
property color navigationHighlightColor: "yellow"
property real inputLocaleIndicatorOpacity: 1.0
property Timer inputLocaleIndicatorHighlightTimer: Timer {
interval: 1000
onTriggered: inputLocaleIndicatorOpacity = 0.5
}
onInputLocaleChanged: {
inputLocaleIndicatorOpacity = 1.0
inputLocaleIndicatorHighlightTimer.restart()
}
property Component component_settingsIcon: Component {
Image {
sourceSize.width: 80 * keyIconScale
sourceSize.height: 80 * keyIconScale
smooth: false
source: resourcePrefix + "images/settings-fff.svg"
}
}
keyboardDesignWidth: 2560
keyboardDesignHeight: 800
keyboardRelativeLeftMargin: 6 / keyboardDesignWidth
keyboardRelativeRightMargin: 6 / keyboardDesignWidth
keyboardRelativeTopMargin: 6 / keyboardDesignHeight
keyboardRelativeBottomMargin: 6 / keyboardDesignHeight
keyboardBackground: Rectangle {
color: keyboardBackgroundColor
}
keyPanel: KeyPanel {
id: keyPanel
Rectangle {
id: keyBackground
radius: 5
color: control && control.highlighted ? highlightedKeyBackgroundColor : normalKeyBackgroundColor
anchors.fill: keyPanel
anchors.margins: keyBackgroundMargin
Text {
id: keySmallText
text: control.smallText
visible: control.smallTextVisible
color: keySmallTextColor
anchors.right: parent.right
anchors.top: parent.top
anchors.margins: keyContentMargin / 3
font {
family: fontFamily
weight: Font.Normal
pixelSize: 60 * scaleHint
capitalization: control.uppercased ? Font.AllUppercase : Font.MixedCase
}
}
Loader {
id: loader_settingsIcon
anchors.right: parent.right
anchors.top: parent.top
anchors.margins: keyContentMargin / 3
}
Text {
id: keyText
text: control.displayText
color: keyTextColor
horizontalAlignment: Text.AlignHCenter
verticalAlignment: control.displayText.length > 1 ? Text.AlignVCenter : Text.AlignBottom
anchors.fill: parent
anchors.leftMargin: keyContentMargin
anchors.topMargin: keyContentMargin
anchors.rightMargin: keyContentMargin
anchors.bottomMargin: keyContentMargin
font {
family: fontFamily
weight: Font.Normal
pixelSize: 60 * scaleHint
capitalization: control.uppercased ? Font.AllUppercase : Font.MixedCase
}
}
states: [
State {
when: control.smallText === "\u2699" && control.smallTextVisible
PropertyChanges {
target: keySmallText
visible: false
}
PropertyChanges {
target: loader_settingsIcon
sourceComponent: component_settingsIcon
}
}
]
}
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 {
id: backspaceKeyPanel
Rectangle {
id: backspaceKeyBackground
radius: 5
color: control && control.highlighted ? highlightedKeyBackgroundColor : normalKeyBackgroundColor
anchors.fill: backspaceKeyPanel
anchors.margins: keyBackgroundMargin
Image {
id: backspaceKeyIcon
anchors.centerIn: parent
sourceSize.height: 88 * keyIconScale
smooth: false
source: resourcePrefix + "images/backspace-fff.svg"
}
}
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 {
id: languageKeyPanel
Rectangle {
id: languageKeyBackground
radius: 5
color: control && control.highlighted ? highlightedKeyBackgroundColor : normalKeyBackgroundColor
anchors.fill: languageKeyPanel
anchors.margins: keyBackgroundMargin
Image {
id: languageKeyIcon
anchors.centerIn: parent
sourceSize.height: 127 * keyIconScale
smooth: false
source: resourcePrefix + "images/globe-fff.svg"
}
}
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 {
id: enterKeyPanel
Rectangle {
id: enterKeyBackground
radius: 5
color: control && control.highlighted ? highlightedKeyBackgroundColor : normalKeyBackgroundColor
anchors.fill: enterKeyPanel
anchors.margins: keyBackgroundMargin
Image {
id: enterKeyIcon
visible: enterKeyText.text.length === 0
anchors.centerIn: parent
readonly property size enterKeyIconSize: {
switch (control.actionId) {
case EnterKeyAction.Go:
case EnterKeyAction.Send:
case EnterKeyAction.Next:
case EnterKeyAction.Done:
return Qt.size(170, 119)
case EnterKeyAction.Search:
return Qt.size(148, 148)
default:
return Qt.size(211, 80)
}
}
sourceSize.height: enterKeyIconSize.height * keyIconScale
smooth: false
source: {
switch (control.actionId) {
case EnterKeyAction.Go:
case EnterKeyAction.Send:
case EnterKeyAction.Next:
case EnterKeyAction.Done:
return resourcePrefix + "images/check-fff.svg"
case EnterKeyAction.Search:
return resourcePrefix + "images/search-fff.svg"
default:
return resourcePrefix + "images/enter-fff.svg"
}
}
}
Text {
id: enterKeyText
visible: text.length !== 0
text: control.actionId !== EnterKeyAction.None ? control.displayText : ""
clip: true
fontSizeMode: Text.HorizontalFit
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
color: keyTextColor
font {
family: fontFamily
weight: Font.Normal
pixelSize: 50 * 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.2
}
}
]
}
hideKeyPanel: KeyPanel {
id: hideKeyPanel
Rectangle {
id: hideKeyBackground
radius: 5
color: control && control.highlighted ? highlightedKeyBackgroundColor : normalKeyBackgroundColor
anchors.fill: hideKeyPanel
anchors.margins: keyBackgroundMargin
Image {
id: hideKeyIcon
anchors.centerIn: parent
sourceSize.height: 127 * keyIconScale
smooth: false
source: resourcePrefix + "images/hidekeyboard-fff.svg"
}
}
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 {
id: shiftKeyPanel
Rectangle {
id: shiftKeyBackground
radius: 5
color: control && control.highlighted ? highlightedKeyBackgroundColor : normalKeyBackgroundColor
anchors.fill: shiftKeyPanel
anchors.margins: keyBackgroundMargin
Image {
id: shiftKeyIcon
anchors.centerIn: parent
sourceSize.height: 134 * keyIconScale
smooth: false
source: resourcePrefix + "images/shift-fff.svg"
}
states: [
State {
name: "capsLockActive"
when: InputContext.capsLockActive
PropertyChanges {
target: shiftKeyBackground
color: capsLockKeyAccentColor
}
PropertyChanges {
target: shiftKeyIcon
source: resourcePrefix + "images/shift-c5d6b6.svg"
}
},
State {
name: "shiftActive"
when: InputContext.shiftActive
PropertyChanges {
target: shiftKeyIcon
source: resourcePrefix + "images/shift-80c342.svg"
}
}
]
}
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 {
id: spaceKeyPanel
Rectangle {
id: spaceKeyBackground
radius: 5
color: control && control.highlighted ? highlightedKeyBackgroundColor : normalKeyBackgroundColor
anchors.fill: spaceKeyPanel
anchors.margins: keyBackgroundMargin
Text {
id: spaceKeyText
text: Qt.locale(InputContext.locale).nativeLanguageName
color: keyTextColor
opacity: inputLocaleIndicatorOpacity
Behavior on opacity { PropertyAnimation { duration: 250 } }
anchors.centerIn: parent
font {
family: fontFamily
weight: Font.Normal
pixelSize: 60 * scaleHint
}
}
}
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 {
id: symbolKeyPanel
Rectangle {
id: symbolKeyBackground
radius: 5
color: control && control.highlighted ? highlightedKeyBackgroundColor : normalKeyBackgroundColor
anchors.fill: symbolKeyPanel
anchors.margins: keyBackgroundMargin
Text {
id: symbolKeyText
text: control.displayText
color: keyTextColor
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
anchors.fill: parent
anchors.margins: keyContentMargin
font {
family: fontFamily
weight: Font.Normal
pixelSize: 60 * 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
}
}
]
}
modeKeyPanel: KeyPanel {
id: modeKeyPanel
Rectangle {
id: modeKeyBackground
radius: 5
color: control && control.highlighted ? highlightedKeyBackgroundColor : normalKeyBackgroundColor
anchors.fill: modeKeyPanel
anchors.margins: keyBackgroundMargin
Text {
id: modeKeyText
text: control.displayText
color: keyTextColor
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
anchors.fill: parent
anchors.margins: keyContentMargin
font {
family: fontFamily
weight: Font.Normal
pixelSize: 60 * scaleHint
capitalization: Font.AllUppercase
}
}
Rectangle {
id: modeKeyIndicator
implicitHeight: parent.height * 0.1
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
anchors.leftMargin: parent.width * 0.4
anchors.rightMargin: parent.width * 0.4
anchors.bottomMargin: parent.height * 0.12
color: modeKeyAccentColor
radius: 3
visible: control.mode
}
}
states: [
State {
name: "pressed"
when: control.pressed
PropertyChanges {
target: modeKeyBackground
opacity: 0.80
}
PropertyChanges {
target: modeKeyText
opacity: 0.6
}
},
State {
name: "disabled"
when: !control.enabled
PropertyChanges {
target: modeKeyBackground
opacity: 0.8
}
PropertyChanges {
target: modeKeyText
opacity: 0.2
}
}
]
}
handwritingKeyPanel: KeyPanel {
id: handwritingKeyPanel
Rectangle {
id: hwrKeyBackground
radius: 5
color: control && control.highlighted ? highlightedKeyBackgroundColor : normalKeyBackgroundColor
anchors.fill: handwritingKeyPanel
anchors.margins: keyBackgroundMargin
Image {
id: hwrKeyIcon
anchors.centerIn: parent
sourceSize.height: 127 * keyIconScale
smooth: false
source: resourcePrefix + (keyboard.handwritingMode ? "images/textmode-fff.svg" : "images/handwriting-fff.svg")
}
}
states: [
State {
name: "pressed"
when: control.pressed
PropertyChanges {
target: hwrKeyBackground
opacity: 0.80
}
PropertyChanges {
target: hwrKeyIcon
opacity: 0.6
}
},
State {
name: "disabled"
when: !control.enabled
PropertyChanges {
target: hwrKeyBackground
opacity: 0.8
}
PropertyChanges {
target: hwrKeyIcon
opacity: 0.2
}
}
]
}
characterPreviewMargin: 0
characterPreviewDelegate: Item {
property string text
property string flickLeft
property string flickTop
property string flickRight
property string flickBottom
readonly property bool flickKeysSet: flickLeft || flickTop || flickRight || flickBottom
readonly property bool flickKeysVisible: text && flickKeysSet &&
text !== flickLeft && text !== flickTop && text !== flickRight && text !== flickBottom
id: characterPreview
Rectangle {
id: characterPreviewBackground
anchors.fill: parent
color: popupBackgroundColor
radius: 5
readonly property int largeTextHeight: Math.round(height / 3 * 2)
readonly property int smallTextHeight: Math.round(height / 3)
readonly property int smallTextMargin: Math.round(3 * scaleHint)
Text {
id: characterPreviewText
color: popupTextColor
text: characterPreview.text
fontSizeMode: Text.VerticalFit
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
height: characterPreviewBackground.largeTextHeight
font {
family: fontFamily
weight: Font.Normal
pixelSize: 82 * scaleHint
}
}
Text {
color: popupTextColor
text: characterPreview.flickLeft
visible: characterPreview.flickKeysVisible
opacity: 0.8
fontSizeMode: Text.VerticalFit
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
anchors.left: parent.left
anchors.leftMargin: characterPreviewBackground.smallTextMargin
anchors.verticalCenter: parent.verticalCenter
height: characterPreviewBackground.smallTextHeight
font {
family: fontFamily
weight: Font.Normal
pixelSize: 62 * scaleHint
}
}
Text {
color: popupTextColor
text: characterPreview.flickTop
visible: characterPreview.flickKeysVisible
opacity: 0.8
fontSizeMode: Text.VerticalFit
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
anchors.top: parent.top
anchors.topMargin: characterPreviewBackground.smallTextMargin
anchors.horizontalCenter: parent.horizontalCenter
height: characterPreviewBackground.smallTextHeight
font {
family: fontFamily
weight: Font.Normal
pixelSize: 62 * scaleHint
}
}
Text {
color: popupTextColor
text: characterPreview.flickRight
visible: characterPreview.flickKeysVisible
opacity: 0.8
fontSizeMode: Text.VerticalFit
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
anchors.right: parent.right
anchors.rightMargin: characterPreviewBackground.smallTextMargin
anchors.verticalCenter: parent.verticalCenter
height: characterPreviewBackground.smallTextHeight
font {
family: fontFamily
weight: Font.Normal
pixelSize: 62 * scaleHint
}
}
Text {
color: popupTextColor
text: characterPreview.flickBottom
visible: characterPreview.flickKeysVisible
opacity: 0.8
fontSizeMode: Text.VerticalFit
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
anchors.bottom: parent.bottom
anchors.bottomMargin: characterPreviewBackground.smallTextMargin
anchors.horizontalCenter: parent.horizontalCenter
height: characterPreviewBackground.smallTextHeight
font {
family: fontFamily
weight: Font.Normal
pixelSize: 62 * scaleHint
}
}
states: State {
name: "flickKeysVisible"
when: characterPreview.flickKeysVisible
PropertyChanges {
target: characterPreviewText
height: characterPreviewBackground.smallTextHeight
}
}
}
}
alternateKeysListItemWidth: 120 * scaleHint
alternateKeysListItemHeight: 170 * scaleHint
alternateKeysListDelegate: Item {
id: alternateKeysListItem
width: alternateKeysListItemWidth
height: alternateKeysListItemHeight
Text {
id: listItemText
text: model.text
color: popupTextColor
opacity: 0.8
font {
family: fontFamily
weight: Font.Normal
pixelSize: 60 * scaleHint
}
anchors.centerIn: parent
}
states: State {
name: "current"
when: alternateKeysListItem.ListView.isCurrentItem
PropertyChanges {
target: listItemText
opacity: 1
}
}
}
alternateKeysListHighlight: Rectangle {
color: popupHighlightColor
radius: 5
}
alternateKeysListBackground: Item {
Rectangle {
readonly property real margin: 20 * scaleHint
x: -margin
y: -margin
width: parent.width + 2 * margin
height: parent.height + 2 * margin
radius: 5
color: popupBackgroundColor
border {
width: 1
color: popupBorderColor
}
}
}
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((compactSelectionList ? 50 : 140) * scaleHint)
anchors.verticalCenter: parent.verticalCenter
text: decorateText(display, wordCompletionLength)
color: selectionListTextColor
opacity: 0.9
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: selectionListSeparatorColor
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.left
}
states: State {
name: "current"
when: selectionListItem.ListView.isCurrentItem
PropertyChanges {
target: selectionListLabel
opacity: 1
}
}
}
selectionListBackground: Rectangle {
color: selectionListBackgroundColor
}
selectionListAdd: Transition {
NumberAnimation { property: "y"; from: wordCandidateView.height; duration: 200 }
NumberAnimation { property: "opacity"; from: 0; to: 1; duration: 200 }
}
selectionListRemove: Transition {
NumberAnimation { property: "y"; to: -wordCandidateView.height; duration: 200 }
NumberAnimation { property: "opacity"; to: 0; duration: 200 }
}
navigationHighlight: Rectangle {
color: "transparent"
border.color: navigationHighlightColor
border.width: 5
}
traceInputKeyPanelDelegate: TraceInputKeyPanel {
id: traceInputKeyPanel
traceMargins: keyBackgroundMargin
Rectangle {
id: traceInputKeyPanelBackground
radius: 5
color: normalKeyBackgroundColor
anchors.fill: traceInputKeyPanel
anchors.margins: keyBackgroundMargin
Text {
id: hwrInputModeIndicator
visible: control.patternRecognitionMode === InputEngine.PatternRecognitionMode.Handwriting
text: {
switch (InputContext.inputEngine.inputMode) {
case InputEngine.InputMode.Numeric:
if (["ar", "fa"].indexOf(InputContext.locale.substring(0, 2)) !== -1)
return "\u0660\u0661\u0662"
// Fallthrough
case InputEngine.InputMode.Dialable:
return "123"
case InputEngine.InputMode.Greek:
return "ΑΒΓ"
case InputEngine.InputMode.Cyrillic:
return "АБВ"
case InputEngine.InputMode.Arabic:
if (InputContext.locale.substring(0, 2) === "fa")
return "\u0627\u200C\u0628\u200C\u067E"
return "\u0623\u200C\u0628\u200C\u062C"
case InputEngine.InputMode.Hebrew:
return "\u05D0\u05D1\u05D2"
case InputEngine.InputMode.ChineseHandwriting:
return "中文"
case InputEngine.InputMode.JapaneseHandwriting:
return "日本語"
case InputEngine.InputMode.KoreanHandwriting:
return "한국어"
case InputEngine.InputMode.Thai:
return "กขค"
default:
return "Abc"
}
}
color: keyTextColor
anchors.left: parent.left
anchors.top: parent.top
anchors.margins: keyContentMargin
font {
family: fontFamily
weight: Font.Normal
pixelSize: 44 * scaleHint
capitalization: {
if (InputContext.capsLockActive)
return Font.AllUppercase
if (InputContext.shiftActive)
return Font.MixedCase
return Font.AllLowercase
}
}
}
}
Canvas {
id: traceInputKeyGuideLines
anchors.fill: traceInputKeyPanelBackground
opacity: 0.1
onPaint: {
var ctx = getContext("2d")
ctx.lineWidth = 1
ctx.strokeStyle = Qt.rgba(0xFF, 0xFF, 0xFF)
ctx.clearRect(0, 0, width, height)
var i
var margin = Math.round(30 * scaleHint)
if (control.horizontalRulers) {
for (i = 0; i < control.horizontalRulers.length; i++) {
ctx.beginPath()
var y = Math.round(control.horizontalRulers[i])
var rightMargin = Math.round(width - margin)
if (i + 1 === control.horizontalRulers.length) {
ctx.moveTo(margin, y)
ctx.lineTo(rightMargin, y)
} else {
var dashLen = Math.round(20 * scaleHint)
for (var dash = margin, dashCount = 0;
dash < rightMargin; dash += dashLen, dashCount++) {
if ((dashCount & 1) === 0) {
ctx.moveTo(dash, y)
ctx.lineTo(Math.min(dash + dashLen, rightMargin), y)
}
}
}
ctx.stroke()
}
}
if (control.verticalRulers) {
for (i = 0; i < control.verticalRulers.length; i++) {
ctx.beginPath()
ctx.moveTo(control.verticalRulers[i], margin)
ctx.lineTo(control.verticalRulers[i], Math.round(height - margin))
ctx.stroke()
}
}
}
Connections {
target: control
function onHorizontalRulersChanged() { traceInputKeyGuideLines.requestPaint() }
function onVerticalRulersChanged() { traceInputKeyGuideLines.requestPaint() }
}
}
}
traceCanvasDelegate: TraceCanvas {
id: traceCanvas
onAvailableChanged: {
if (!available)
return
var ctx = getContext("2d")
if (parent.canvasType === "fullscreen") {
ctx.lineWidth = 10
ctx.strokeStyle = Qt.rgba(0, 0, 0)
} else {
ctx.lineWidth = 10 * scaleHint
ctx.strokeStyle = Qt.rgba(0xFF, 0xFF, 0xFF)
}
ctx.lineCap = "round"
ctx.fillStyle = ctx.strokeStyle
}
autoDestroyDelay: 800
onTraceChanged: if (trace === null) opacity = 0
Behavior on opacity { PropertyAnimation { easing.type: Easing.OutCubic; duration: 150 } }
}
popupListDelegate: SelectionListItem {
property real cursorAnchor: popupListLabel.x + popupListLabel.width
id: popupListItem
width: popupListLabel.width + popupListLabel.anchors.leftMargin * 2
height: popupListLabel.height + popupListLabel.anchors.topMargin * 2
Text {
id: popupListLabel
anchors.left: parent.left
anchors.top: parent.top
anchors.leftMargin: popupListLabel.height / 2
anchors.topMargin: popupListLabel.height / 3
text: decorateText(display, wordCompletionLength)
color: popupTextColor
opacity: 0.8
font {
family: fontFamily
weight: Font.Normal
pixelSize: InputMethod.cursorRectangle.height * 0.8
}
function decorateText(text, wordCompletionLength) {
if (wordCompletionLength > 0) {
return text.slice(0, -wordCompletionLength) + '<u>' + text.slice(-wordCompletionLength) + '</u>'
}
return text
}
}
states: State {
name: "current"
when: popupListItem.ListView.isCurrentItem
PropertyChanges {
target: popupListLabel
opacity: 1.0
}
}
}
popupListBackground: Item {
Rectangle {
width: parent.width
height: parent.height
color: popupBackgroundColor
border {
width: 1
color: popupBorderColor
}
}
}
popupListAdd: Transition {
NumberAnimation { property: "opacity"; from: 0; to: 1.0; duration: 200 }
}
popupListRemove: Transition {
NumberAnimation { property: "opacity"; to: 0; duration: 200 }
}
languagePopupListEnabled: true
languageListDelegate: SelectionListItem {
id: languageListItem
width: languageNameTextMetrics.width * 17
height: languageNameTextMetrics.height + languageListLabel.anchors.topMargin + languageListLabel.anchors.bottomMargin
Text {
id: languageListLabel
anchors.left: parent.left
anchors.top: parent.top
anchors.leftMargin: languageNameTextMetrics.height / 2
anchors.rightMargin: anchors.leftMargin
anchors.topMargin: languageNameTextMetrics.height / 3
anchors.bottomMargin: anchors.topMargin
text: languageNameFormatter.elidedText
color: popupTextColor
opacity: 0.8
font {
family: fontFamily
weight: Font.Normal
pixelSize: 44 * scaleHint
}
}
TextMetrics {
id: languageNameTextMetrics
font {
family: fontFamily
weight: Font.Normal
pixelSize: 44 * scaleHint
}
text: "X"
}
TextMetrics {
id: languageNameFormatter
font {
family: fontFamily
weight: Font.Normal
pixelSize: 44 * scaleHint
}
elide: Text.ElideRight
elideWidth: languageListItem.width - languageListLabel.anchors.leftMargin - languageListLabel.anchors.rightMargin
text: displayName
}
states: State {
name: "current"
when: languageListItem.ListView.isCurrentItem
PropertyChanges {
target: languageListLabel
opacity: 1
}
}
}
languageListHighlight: Rectangle {
color: popupHighlightColor
radius: 5
}
languageListBackground: Rectangle {
color: popupBackgroundColor
border {
width: 1
color: popupBorderColor
}
}
languageListAdd: Transition {
NumberAnimation { property: "opacity"; from: 0; to: 1.0; duration: 200 }
}
languageListRemove: Transition {
NumberAnimation { property: "opacity"; to: 0; duration: 200 }
}
selectionHandle: Image {
sourceSize.width: 20
source: resourcePrefix + "images/selectionhandle-bottom.svg"
}
fullScreenInputContainerBackground: Item {
clip: true
Rectangle {
y: border.width
color: selectionListBackgroundColor
width: parent.width
height: parent.height
}
}
fullScreenInputBackground: Item {
}
fullScreenInputMargins: Math.round(30 * scaleHint)
fullScreenInputPadding: 0
fullScreenInputCursor: Rectangle {
width: 1
color: selectionListTextColor
visible: parent.blinkStatus
}
fullScreenInputColor: selectionListTextColor
fullScreenInputFont.pixelSize: 44 * scaleHint
functionPopupListDelegate: Item {
id: functionPopupListItem
readonly property real iconMargin: 40 * scaleHint
readonly property real iconWidth: 144 * keyIconScale
readonly property real iconHeight: 144 * keyIconScale
width: iconWidth + 2 * iconMargin
height: iconHeight + 2 * iconMargin
Image {
id: functionIcon
anchors.centerIn: parent
sourceSize.height: iconHeight
smooth: false
source: {
switch (keyboardFunction) {
case QtVirtualKeyboard.KeyboardFunction.HideInputPanel:
return resourcePrefix + "images/hidekeyboard-fff.svg"
case QtVirtualKeyboard.KeyboardFunction.ChangeLanguage:
return resourcePrefix + "images/globe-fff.svg"
case QtVirtualKeyboard.KeyboardFunction.ToggleHandwritingMode:
return resourcePrefix + (keyboard.handwritingMode ? "images/textmode-fff.svg" : "images/handwriting-fff.svg")
}
}
}
}
functionPopupListBackground: Item {
Rectangle {
readonly property real backgroundMargin: 20 * scaleHint
x: -backgroundMargin
y: -backgroundMargin
width: parent.width + 2 * backgroundMargin
height: parent.height + 2 * backgroundMargin
radius: 5
color: popupBackgroundColor
border {
width: 1
color: popupBorderColor
}
}
}
functionPopupListHighlight: Rectangle {
color: popupHighlightColor
radius: 5
}
}