diff --git a/resources/icons/chevron_right_black_24dp.svg b/resources/icons/chevron_right_black_24dp.svg
new file mode 100644
index 0000000000000000000000000000000000000000..c33dc8a37c7664a83a5e6ae2099f98ff46f49449
--- /dev/null
+++ b/resources/icons/chevron_right_black_24dp.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
\ No newline at end of file
diff --git a/src/app/constant/JamiTheme.qml b/src/app/constant/JamiTheme.qml
index 95c941797095451ebc7957985c464c4599d0259b..d6dadc3c96eec803bd07048f6905bd9ad6f3cb74 100644
--- a/src/app/constant/JamiTheme.qml
+++ b/src/app/constant/JamiTheme.qml
@@ -142,6 +142,10 @@ Item {
property color comboboxBorderColor: darkTheme ? tintedBlue : Qt.rgba(0, 0.34, 0.6, 0.36)
property color comboboxTextColorHovered: darkTheme ? "#03B9E9" : tintedBlue
+ //Spinbox
+ property color spinboxBackgroundColor: darkTheme ? editBackgroundColor : selectedColor
+ property color spinboxBorderColor: darkTheme ? tintedBlue : Qt.rgba(0, 0.34, 0.6, 0.36)
+
// Call buttons
property color acceptButtonGreen: "#4caf50"
property color acceptButtonHoverGreen: "#5db761"
diff --git a/src/app/settingsview/components/AdvancedConnectivitySettings.qml b/src/app/settingsview/components/AdvancedConnectivitySettings.qml
index 69f516a2c4aefcdb057de8bf079bd10207baaaa5..b51a9d7dca8412e943b46772287671ad52c0a864 100644
--- a/src/app/settingsview/components/AdvancedConnectivitySettings.qml
+++ b/src/app/settingsview/components/AdvancedConnectivitySettings.qml
@@ -85,11 +85,6 @@ ColumnLayout {
valueField: CurrentAccount.localPort
- onInputAcceptableChanged: {
- if (!inputAcceptable && valueField.length !== 0)
- valueField = Qt.binding(function() { return CurrentAccount.localPort })
- }
-
onNewValue: CurrentAccount.localPort = valueField
}
diff --git a/src/app/settingsview/components/AdvancedPublicAddressSettings.qml b/src/app/settingsview/components/AdvancedPublicAddressSettings.qml
index 62769c4292f9cf8a768705ea87aab5c680e275e8..fec002c50b9a104f7236f7d4e6fa9f56bac96ae9 100644
--- a/src/app/settingsview/components/AdvancedPublicAddressSettings.qml
+++ b/src/app/settingsview/components/AdvancedPublicAddressSettings.qml
@@ -101,11 +101,6 @@ ColumnLayout {
valueField: CurrentAccount.publishedPort
- onInputAcceptableChanged: {
- if (!inputAcceptable && valueField.length !== 0)
- valueField = Qt.binding(function() { return CurrentAccount.publishedPort })
- }
-
onNewValue: CurrentAccount.publishedPort = valueField
}
}
diff --git a/src/app/settingsview/components/AdvancedSDPSettings.qml b/src/app/settingsview/components/AdvancedSDPSettings.qml
index 916ec857bf73b470901049a200e06536dcfd5bf4..c98dbca9af26672bb0609b76522034a2cb6e1700 100644
--- a/src/app/settingsview/components/AdvancedSDPSettings.qml
+++ b/src/app/settingsview/components/AdvancedSDPSettings.qml
@@ -62,11 +62,6 @@ ColumnLayout {
valueField: CurrentAccount.audioPortMin_Audio
- onInputAcceptableChanged: {
- if (!inputAcceptable && valueField.length !== 0)
- valueField = Qt.binding(function() { return CurrentAccount.audioPortMin_Audio })
- }
-
onNewValue: CurrentAccount.audioPortMin_Audio = valueField
}
@@ -80,11 +75,6 @@ ColumnLayout {
valueField: CurrentAccount.audioPortMax_Audio
- onInputAcceptableChanged: {
- if (!inputAcceptable && valueField.length !== 0)
- valueField = Qt.binding(function() { return CurrentAccount.audioPortMax_Audio })
- }
-
onNewValue: CurrentAccount.audioPortMax_Audio = valueField
}
@@ -98,11 +88,6 @@ ColumnLayout {
valueField: CurrentAccount.videoPortMin_Video
- onInputAcceptableChanged: {
- if (!inputAcceptable && valueField.length !== 0)
- valueField = Qt.binding(function() { return CurrentAccount.videoPortMin_Video })
- }
-
onNewValue: CurrentAccount.videoPortMin_Video = valueField
}
@@ -116,11 +101,6 @@ ColumnLayout {
valueField: CurrentAccount.videoPortMax_Video
- onInputAcceptableChanged: {
- if (!inputAcceptable && valueField.length !== 0)
- valueField = Qt.binding(function() { return CurrentAccount.videoPortMax_Video })
- }
-
onNewValue: CurrentAccount.videoPortMax_Video = valueField
}
}
diff --git a/src/app/settingsview/components/AdvancedSIPSecuritySettings.qml b/src/app/settingsview/components/AdvancedSIPSecuritySettings.qml
index 33ae056979f09d8152db69bee08f29eb66109702..61f5019239f9ad32b34ab1f59de7c067d24df3d7 100644
--- a/src/app/settingsview/components/AdvancedSIPSecuritySettings.qml
+++ b/src/app/settingsview/components/AdvancedSIPSecuritySettings.qml
@@ -306,11 +306,6 @@ ColumnLayout {
valueField: CurrentAccount.negotiationTimeoutSec_TLS
- onInputAcceptableChanged: {
- if (!inputAcceptable && valueField.length !== 0)
- valueField = Qt.binding(function() { return CurrentAccount.negotiationTimeoutSec_TLS })
- }
-
onNewValue: CurrentAccount.negotiationTimeoutSec_TLS = valueField
}
}
diff --git a/src/app/settingsview/components/SettingSpinBox.qml b/src/app/settingsview/components/SettingSpinBox.qml
index 0c4329853428b97252dca17f3817762ec000f580..7de1a8cea42213c14cccb9372ca31cae8dc00679 100644
--- a/src/app/settingsview/components/SettingSpinBox.qml
+++ b/src/app/settingsview/components/SettingSpinBox.qml
@@ -1,6 +1,7 @@
/*
* Copyright (C) 2020-2022 Savoir-faire Linux Inc.
* Author: Aline Gondim Santos <aline.gondimsantos@savoirfairelinux.com>
+ * Author: Fadi Shehadeh <fadi.shehadeh@savoirfairelinux.com>
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
@@ -30,12 +31,12 @@ RowLayout {
id: root
property alias title: title.text
- property alias enabled: textField.enabled
- property alias bottomValue: textFieldValidator.bottom
- property alias topValue: textFieldValidator.top
- property alias valueField: textField.text
+ property alias enabled: spinbox.enabled
+ property alias bottomValue: spinbox.from
+ property alias topValue: spinbox.to
+ property alias valueField: spinbox.value
property alias tooltipText: toolTip.text
- property alias inputAcceptable: textField.acceptableInput
+ property alias step: spinbox.stepSize
property string borderColor: JamiTheme.greyBorderColor
property int itemWidth
@@ -56,8 +57,11 @@ RowLayout {
verticalAlignment: Text.AlignVCenter
}
- TextField {
- id: textField
+ SpinBox {
+ id: spinbox
+
+ wheelEnabled: true
+ hoverEnabled: true
Layout.preferredWidth: root.itemWidth
Layout.preferredHeight: JamiTheme.preferredFieldHeight
@@ -65,34 +69,94 @@ RowLayout {
font.pointSize: JamiTheme.buttonFontSize
font.kerning: true
- validator: IntValidator {
- id: textFieldValidator
+ onValueChanged: newValue()
+
+ Keys.onPressed: function (keyEvent) {
+
+ if (keyEvent.key === Qt.Key_Enter ||
+ keyEvent.key === Qt.Key_Return) {
+ textInput.focus = false
+ spinbox.value = textInput.text
+ keyEvent.accepted = true
+ }
}
- color: JamiTheme.textColor
- hoverEnabled: true
+ contentItem: TextInput {
+ id: textInput
+
+ text: spinbox.textFromValue(spinbox.value, spinbox.locale)
+ color : JamiTheme.textColor
+ horizontalAlignment: Qt.AlignHCenter
+ verticalAlignment: Qt.AlignVCenter
+ inputMethodHints : Qt.ImhDigitsOnly
+ validator: spinbox.validator
+ }
background: Rectangle {
- border.color: enabled ? root.borderColor : JamiTheme.transparentColor
- color: JamiTheme.editBackgroundColor
+ border.color: JamiTheme.spinboxBorderColor
+ color: JamiTheme.transparentColor
radius: JamiTheme.primaryRadius
}
- onEditingFinished: newValue()
+ MaterialToolTip {
+ id: toolTip
+ parent: spinbox
+ visible: spinbox.hovered && (root.tooltipText.length > 0)
+ delay: Qt.styleHints.mousePressAndHoldInterval
+ }
+
+ height: down.implicitIndicatorHeight
- Keys.onPressed: {
- if (event.key === Qt.Key_Enter ||
- event.key === Qt.Key_Return) {
- textField.focus = false
- event.accepted = true
+ up.indicator: Rectangle {
+
+ width: parent.width / 8
+ radius : 4
+ anchors {
+ top : parent.top
+ bottom : parent.bottom
+ right: parent.right
+ margins: 1
+ }
+
+ color: spinbox.up.pressed || spinbox.up.hovered ? JamiTheme.spinboxBorderColor : JamiTheme.transparentColor
+
+ ResponsiveImage {
+
+ containerHeight: 6
+ containerWidth: 10
+ width: 20
+ height: 20
+ color: JamiTheme.primaryForegroundColor
+ anchors.verticalCenter: parent.verticalCenter
+ anchors.horizontalCenter: parent.horizontalCenter
+ source: JamiResources.chevron_right_black_24dp_svg
}
}
- MaterialToolTip {
- id: toolTip
- parent: textField
- visible: textField.hovered && (root.tooltipText.length > 0)
- delay: Qt.styleHints.mousePressAndHoldInterval
+ down.indicator: Rectangle {
+
+ width: parent.width / 8
+ radius : 4
+ anchors {
+ top : parent.top
+ bottom : parent.bottom
+ left: parent.left
+ margins: 1
+ }
+
+ color: spinbox.down.pressed || spinbox.down.hovered ? JamiTheme.spinboxBorderColor : JamiTheme.transparentColor
+
+ ResponsiveImage {
+
+ containerHeight: 6
+ containerWidth: 10
+ width: 20
+ height: 20
+ color: JamiTheme.primaryForegroundColor
+ anchors.verticalCenter: parent.verticalCenter
+ anchors.horizontalCenter: parent.horizontalCenter
+ source: JamiResources.chevron_left_black_24dp_svg
+ }
}
}
}
diff --git a/src/app/settingsview/components/SystemSettings.qml b/src/app/settingsview/components/SystemSettings.qml
index a1d75222a20111e965405d14dcda6b54a18af5fb..00dd39d0c4708e8db0af911fcb6cdb806f997534 100644
--- a/src/app/settingsview/components/SystemSettings.qml
+++ b/src/app/settingsview/components/SystemSettings.qml
@@ -251,16 +251,12 @@ ColumnLayout {
tooltipText: JamiStrings.changeTextSize
itemWidth: root.itemWidth
- valueField: Math.round(UtilsAdapter.getAppValue(Settings.BaseZoom) * 100.0)
-
- onNewValue: {
- // here, avoid validator cause it can be painful for the user to change
- // values by modifying the whole field.
- if (valueField < 10)
- valueField = 10
- else if (valueField > 200)
- valueField = 200
- UtilsAdapter.setAppValue(Settings.BaseZoom, Math.round(valueField / 100.0))
- }
+ bottomValue: 50
+ topValue: 200
+ step: 10
+
+ valueField: UtilsAdapter.getAppValue(Settings.BaseZoom) * 100.0
+
+ onNewValue: UtilsAdapter.setAppValue(Settings.BaseZoom, valueField / 100.0)
}
}