imports/agl-demo-controls/Key.qml

   1 /*
   2  * Copyright (C) 2016 The Qt Company Ltd.
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  *      http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13  * See the License for the specific language governing permissions and
  14  * limitations under the License.
  15  */
  16
  17 import QtQuick 2.6
  18
  19 MouseArea {
  20     id: root
  21     implicitWidth: 50
  22     implicitHeight: 80
  23     property string text
  24     property alias image: image.source
  25     property bool checkable: false
  26     property bool checked: false
  27     property bool capital: false
  28
  29     onClicked: {
  30         if (checkable) {
  31             checked = !checked
  32         } else {
  33             if (label.text.length === 1)
  34                 insert(label.text)
  35         }
  36     }
  37
  38     function clearSelctedText() {
  39         var input = keyboard.target
  40         if (input.selectedText.length > 0) {
  41             input.remove(input.selectionStart, input.selectionEnd)
  42             return true
  43         }
  44         return false
  45     }
  46
  47     function insert(text) {
  48         clearSelctedText()
  49         var input = keyboard.target
  50         keyboard.target.insert(input.cursorPosition, text)
  51     }
  52
  53     Rectangle {
  54         anchors.fill: parent
  55         border.width: 2
  56         border.color: 'white'
  57         smooth: true
  58         radius: root.height / 10
  59         color: 'gray'
  60         Rectangle {
  61             anchors.fill: parent
  62             radius: parent.radius
  63             opacity: root.pressed || root.checked ? 0 : 0.5
  64             gradient: Gradient {
  65                 GradientStop {
  66                     position: 0.0
  67                     color: 'transparent'
  68                 }
  69                 GradientStop {
  70                     position: 1.0
  71                     color: '#66FF99'
  72                 }
  73             }
  74         }
  75     }
  76
  77     Text {
  78         id: label
  79         anchors.centerIn: parent
  80         color: 'white'
  81         font.pixelSize: root.height / 2
  82         text: root.capital ? root.text.toUpperCase() : root.text.toLowerCase()
  83     }
  84
  85     Image {
  86         id: image
  87         anchors.centerIn: parent
  88         scale: 0.8
  89     }
  90 }