Skip to content
Permalink
Browse files

[QgsQuick] Feature form improvements

Changes are related to following widgets used in the FeatureForm:

Checkbox:
* fixed old import of QgsQuick
* changed indicator of a checkbox to be able to apply styles

DateTime:
* fixed wrong behaviour of the widget if a value is undefined
* replaced label with textfield with formatting options (ported from QField)

ExternalResources:
* fixed pixalation of icons
* added new icon without alternative border to be able to put color overlay on it
* fixed broken layout of icons

ValueMap
* updated way how to read option values from field config/setup (ported from QField, related to changes of the field config since QGIS 3.x)

TextEdit:
* Unified styling of the widgets - added some padding, changed background, height

Fields style added to QgsFeatureFormStyle
Added "fields" style object to customize some properties (e.g color, height, radius) of editor widgets. Due to new style options also widgets have been updated.
  • Loading branch information
vsklencar authored and wonder-sk committed Feb 13, 2019
1 parent fc8fd1e commit 78639f0323d7b75827029f341dd18bf8c217cfcf
@@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M4,4H7L9,2H15L17,4H20C21.1,4 22,4.9 22,6V18C22,19.1 21.1,20 20,20H4C2.9,20 2,19.1 2,18V6C2,4.9 2.9,4 4,4M12,7C9.24,7 7,9.24 7,12C7,14.76 9.24,17 12,17C14.76,17 17,14.76 17,12C17,9.24 14.76,7 12,7M12,9C13.66,9 15,10.34 15,12C15,13.66 13.66,15 12,15C10.34,15 9,13.66 9,12C9,10.34 10.34,9 12,9Z" /></svg>
@@ -9,5 +9,6 @@
<file>ic_navigation_black.svg</file>
<file>ic_photo_notavailable_white.svg</file>
<file>ic_save_white.svg</file>
<file>ic_camera.svg</file>
</qresource>
</RCC>
@@ -15,7 +15,7 @@

import QtQuick 2.0
import QtQuick.Controls 2.2
import QgisQuick 0.1 as QgsQuick
import QgsQuick 0.1 as QgsQuick

/**
* Checkbox for QGIS Attribute Form
@@ -30,12 +30,34 @@ Item {
right: parent.right
left: parent.left
}
id: fieldItem

CheckBox {
property var currentValue: value

height: customStyle.height
id: checkBox
leftPadding: 0
checked: value == config['CheckedState']

indicator: Rectangle {
implicitWidth: customStyle.height
implicitHeight: customStyle.height
radius: customStyle.cornerRadius
border.color: checkBox.activeFocus ? customStyle.fontColor : "grey"
border.width: 1
Rectangle {
visible: checkBox.checked
color: customStyle.fontColor
radius: customStyle.cornerRadius
anchors.margins: 4
anchors.fill: parent
}

MouseArea {
anchors.fill: parent
onClicked: checkBox.currentValue = !checkBox.currentValue
}
}
onCheckedChanged: {
valueChanged( checked ? config['CheckedState'] : config['UncheckedState'], false )
forceActiveFocus()
@@ -13,8 +13,8 @@
* *
***************************************************************************/

import QtQuick 2.0
import QtQuick.Controls 2.2
import QtQuick 2.11
import QtQuick.Controls 2.4
import QtQuick.Layouts 1.1
import QtQuick.Controls 1.4 as Controls1
import QgsQuick 0.1 as QgsQuick
@@ -25,101 +25,171 @@ import QgsQuick 0.1 as QgsQuick
* Do not use directly from Application QML
*/
Item {
signal valueChanged(var value, bool isNull)

height: childrenRect.height
anchors { right: parent.right; left: parent.left }

ColumnLayout {
id: main
property var currentValue: value

anchors { right: parent.right; left: parent.left }

Item {
anchors { right: parent.right; left: parent.left }
Layout.minimumHeight: 48 * QgsQuick.Utils.dp

Rectangle {
anchors.fill: parent
id: backgroundRect
border.color: "#17a81a"
border.width: 2
color: "#dddddd"
radius: 2
}
signal valueChanged(var value, bool isNull)

id: fieldItem
height: childrenRect.height
anchors {
left: parent.left
right: parent.right
rightMargin: 10 * QgsQuick.Utils.dp
}

Label {
id: label

anchors.fill: parent
verticalAlignment: Text.AlignVCenter
ColumnLayout {
id: main
property var isDateTimeType: field.type === Qt.DateTime || field.type === Qt.Date || field.type === Qt.Time
property var currentValue: isDateTimeType? value : Qt.formatDateTime(value, config['field_format'])

MouseArea {
anchors.fill: parent
onClicked: {
popup.open()
}
}
anchors { right: parent.right; left: parent.left }

Image {
source: QgsQuick.Utils.getThemeIcon("ic_clear_black")
anchors.left: parent.right
visible: main.currentValue !== undefined && config['allow_null']
Item {
Layout.fillWidth: true
Layout.minimumHeight: customStyle.height

TextField {
id: label

anchors.fill: parent
verticalAlignment: Text.AlignVCenter
font.pixelSize: customStyle.fontPixelSize
padding: 0
background: Rectangle {
radius: customStyle.cornerRadius

border.color: label.activeFocus ? customStyle.activeColor : customStyle.normalColor
border.width: label.activeFocus ? 2 : 1
color: customStyle.backgroundColor
}

inputMethodHints: Qt.ImhDigitsOnly

// this is a bit difficult to auto generate input mask out of date/time format using regex
// mainly because number of caracters is variable (e.g. "d": the day as number without a leading zero)
inputMask: if (config['display_format'] === "yyyy-MM-dd" ) { "9999-99-99;_" }
else if (config['display_format'] === "yyyy.MM.dd" ) { "9999.99.09;_" }
else if (config['display_format'] === "yyyy-MM-dd HH:mm:ss" ) { "9999-99-09 99:99:99;_" }
else if (config['display_format'] === "HH:mm:ss" ) { "99:99:99;_" }
else if (config['display_format'] === "HH:mm" ) { "99:99;_" }
else { "" }

text: {
if ( main.currentValue === undefined )
{
qsTr('(no date)')
}
else
{
if ( main.isDateTimeType )
{
Qt.formatDateTime(main.currentValue, config['display_format'])
}
else
{
var date = Date.fromLocaleString(Qt.locale(), main.currentValue, config['field_format'])
Qt.formatDateTime(date, config['display_format'])
}
}
}

MouseArea {
anchors.fill: parent
onClicked: {
main.currentValue = undefined
color: main.currentValue === undefined ? 'transparent' : customStyle.fontColor

MouseArea {
enabled: config['calendar_popup']
anchors.fill: parent
onClicked: {
popup.open()
}
}

onTextEdited: {
var date = Date.fromLocaleString(Qt.locale(), label.text, config['display_format'])
if ( date.toLocaleString() !== "" )
{
if ( main.isDateTimeType )
{
main.currentValue = date
}
else
{
main.currentValue = Qt.formatDateTime(date, config['field_format'])
}
valueChanged(main.currentValue, main.currentValue === undefined)
}
else
{
valueChanged(undefined, true)
}
}

onActiveFocusChanged: {
if (activeFocus) {
var mytext = label.text
var cur = label.cursorPosition
while ( cur > 0 )
{
if (!mytext.charAt(cur-1).match("[0-9]") )
break
cur--
}
label.cursorPosition = cur
}
}
}
}
}
}
}

Popup {
id: popup
modal: true
focus: true
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
parent: ApplicationWindow.overlay

ColumnLayout {

Controls1.Calendar {
id: calendar
selectedDate: main.currentValue
weekNumbersVisible: true
focus: false

onSelectedDateChanged: {
main.currentValue = selectedDate
}
Popup {
id: popup
modal: true
focus: true
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
parent: ApplicationWindow.overlay
x: (window.width - width) / 2
y: (window.height - height) / 2

ColumnLayout {

Controls1.Calendar {
id: calendar
selectedDate: main.currentValue || new Date()
weekNumbersVisible: true
focus: false

onSelectedDateChanged: {
if ( main.isDateTimeType )
{
main.currentValue = selectedDate
}
else
{
main.currentValue = Qt.formatDateTime(selectedDate, config['field_format'])
}
}
}

RowLayout {
Button {
text: qsTr( "Ok" )
Layout.fillWidth: true

onClicked: popup.close()
}
}
}
}

RowLayout {
Button {
text: qsTr( "Ok" )
Layout.fillWidth: true

onClicked: popup.close()
}
onCurrentValueChanged: {
valueChanged(main.currentValue, main.currentValue === undefined)
if (main.currentValue === undefined)
{
label.text = qsTr('(no date)')
label.color = customStyle.fontColor
}
else
{
label.color = customStyle.fontColor
label.text = new Date(value).toLocaleString(Qt.locale(), config['display_format'] )
}
}
}
}

onCurrentValueChanged: {
valueChanged(currentValue, main.currentValue === undefined)
if (main.currentValue === undefined)
{
label.text = qsTr('(no date)')
label.color = 'gray'
}
else
{
label.color = 'black'
label.text = new Date(value).toLocaleString(Qt.locale(), config['display_format'] )
}
}
}
}

0 comments on commit 78639f0

Please sign in to comment.
You can’t perform that action at this time.