Skip to content

Commit

Permalink
[QgsQuick] Feature form improvements
Browse files Browse the repository at this point in the history 
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
@wonder-sk
vsklencar authored and wonder-sk committed Feb 13, 2019
1 parent fc8fd1e commit 78639f0
Show file tree
Hide file tree
Showing 10 changed files with 353 additions and 157 deletions.
1 change: 1 addition & 0 deletions src/quickgui/images/ic_camera.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions src/quickgui/images/images.qrc
View file
Expand Up @@ -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>
26 changes: 24 additions & 2 deletions src/quickgui/plugin/editor/qgsquickcheckbox.qml
View file
Expand Up @@ -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
Expand All @@ -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()
Expand Down
244 changes: 157 additions & 87 deletions src/quickgui/plugin/editor/qgsquickdatetime.qml
View file
Expand Up @@ -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
Expand All @@ -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.