From a8378ab262bba1ab3c5cb673434f69f750d2d4d8 Mon Sep 17 00:00:00 2001
From: Ming Rui Zhang <mingrui.zhang@savoirfairelinux.com>
Date: Fri, 2 Apr 2021 09:41:55 -0400
Subject: [PATCH] contactsearch: add convenient button for clearing search
result
- Changed radius
- Added preferred width for side panel to fully show
contact search bar placeholder text by default (English)
Gitlab: #321
Change-Id: I2c26ebc34812db41f5d50408e2e092bf0a99f76d
---
src/constant/JamiStrings.qml | 5 +-
src/constant/JamiTheme.qml | 5 +-
src/mainview/MainView.qml | 31 ++++++------
src/mainview/components/ContactSearchBar.qml | 53 ++++++++++++++------
4 files changed, 62 insertions(+), 32 deletions(-)
diff --git a/src/constant/JamiStrings.qml b/src/constant/JamiStrings.qml
index 00ae1aa97..11943dbd3 100644
--- a/src/constant/JamiStrings.qml
+++ b/src/constant/JamiStrings.qml
@@ -395,7 +395,10 @@ Item {
property string createNewJA: qsTr("Create a Jami account")
property string aboutJami: qsTr("About Jami")
- // Smart list context menu
+ // SmartList
+ property string clearText: qsTr("Clear Text")
+
+ // SmartList context menu
property string declineContactRequest: qsTr("Decline contact request")
property string acceptContactRequest: qsTr("Accept contact request")
diff --git a/src/constant/JamiTheme.qml b/src/constant/JamiTheme.qml
index 11ec57391..1c0863b0c 100644
--- a/src/constant/JamiTheme.qml
+++ b/src/constant/JamiTheme.qml
@@ -166,6 +166,7 @@ Item {
property int menuFontSize: 12
property int headerFontSize: 13
property int titleFontSize: 16
+ property int lineEditRadius: 4
property int maximumWidthSettingsView: 600
property int settingsHeaderpreferredHeight: 64
@@ -179,13 +180,13 @@ Item {
property int pluginHandlersPopupViewDelegateHeight: 50
// main application spec
- property int mainViewMinWidth: 460
+ property int mainViewMinWidth: 300
property int mainViewMinHeight: 400
property int wizardViewMinWidth: 500
property int wizardViewMinHeight: 600
- property int mainViewPreferredWidth: 650
+ property int mainViewPreferredWidth: 725
property int mainViewPreferredHeight: 600
function setTheme(dark) {
diff --git a/src/mainview/MainView.qml b/src/mainview/MainView.qml
index 73c71374f..4e678e5a9 100644
--- a/src/mainview/MainView.qml
+++ b/src/mainview/MainView.qml
@@ -41,12 +41,13 @@ Rectangle {
property var containerWindow: ""
- property int sidePanelViewStackPreferredWidth: 250
- property int mainViewStackPreferredWidth: 250
+ property int sidePanelViewStackMinimumWidth: 300
+ property int mainViewStackPreferredWidth: 425
property int settingsViewPreferredWidth: 460
property int onWidthChangedTriggerDistance: 5
property bool sidePanelOnly: (!mainViewStack.visible) && sidePanelViewStack.visible
+ property int previousWidth: width
// To calculate tab bar bottom border hidden rect left margin.
property int tabBarLeftMargin: 8
@@ -161,7 +162,7 @@ Rectangle {
sidePanelViewStack.push(settingsMenu, StackView.Immediate)
var windowCurrentMinimizedSize = settingsViewPreferredWidth
- + sidePanelViewStackPreferredWidth + onWidthChangedTriggerDistance
+ + sidePanelViewStackMinimumWidth + onWidthChangedTriggerDistance
if (containerWindow.width < windowCurrentMinimizedSize)
containerWindow.width = windowCurrentMinimizedSize
}
@@ -289,9 +290,10 @@ Rectangle {
Rectangle {
id: mainViewSidePanelRect
- SplitView.minimumWidth: sidePanelViewStackPreferredWidth
- SplitView.maximumWidth: (sidePanelOnly ? splitView.width :
- splitView.width - sidePanelViewStackPreferredWidth)
+ SplitView.minimumWidth: sidePanelViewStackMinimumWidth
+ SplitView.maximumWidth: (sidePanelOnly ?
+ splitView.width :
+ splitView.width - sidePanelViewStackMinimumWidth)
SplitView.fillHeight: true
color: JamiTheme.backgroundColor
@@ -352,8 +354,9 @@ Rectangle {
SplitView.maximumWidth: sidePanelOnly ?
splitView.width :
- splitView.width - sidePanelViewStackPreferredWidth
- SplitView.minimumWidth: sidePanelViewStackPreferredWidth
+ splitView.width - sidePanelViewStackMinimumWidth
+ SplitView.preferredWidth: mainViewStackPreferredWidth
+ SplitView.minimumWidth: sidePanelViewStackMinimumWidth
SplitView.fillHeight: true
clip: true
@@ -493,8 +496,10 @@ Rectangle {
onWidthChanged: {
// Hide unnecessary stackview when width is changed.
- var widthToCompare = sidePanelViewStackPreferredWidth +
- (inSettingsView ? settingsViewPreferredWidth : mainViewStackPreferredWidth)
+ var widthToCompare = previousWidth < mainView.width ?
+ sidePanelViewStackMinimumWidth :
+ (sidePanelViewStackMinimumWidth +
+ (inSettingsView ? settingsViewPreferredWidth : mainViewStackPreferredWidth))
if (mainView.width < widthToCompare - onWidthChangedTriggerDistance
&& mainViewStack.visible) {
@@ -512,8 +517,6 @@ Rectangle {
}
else if (inWelcomeViewStack)
recursionStackViewItemMove(mainViewStack, sidePanelViewStack)
-
- mainView.update()
} else if (mainView.width >= widthToCompare + onWidthChangedTriggerDistance
&& !mainViewStack.visible) {
mainViewStack.visible = true
@@ -532,9 +535,9 @@ Rectangle {
if (currentAccountIsCalling())
pushCallStackView()
}
-
- mainView.update()
}
+
+ previousWidth = mainView.width
}
AboutPopUp {
diff --git a/src/mainview/components/ContactSearchBar.qml b/src/mainview/components/ContactSearchBar.qml
index 96aba4723..5e05c0421 100644
--- a/src/mainview/components/ContactSearchBar.qml
+++ b/src/mainview/components/ContactSearchBar.qml
@@ -24,8 +24,12 @@ import QtGraphicalEffects 1.14
import net.jami.Models 1.0
import net.jami.Constants 1.0
+import "../../commoncomponents"
+
Rectangle {
- id: contactSearchBarRect
+ id: root
+
+ property int itemMargin: 8
signal contactSearchBarTextChanged(string text)
signal returnPressedWhileSearching
@@ -35,7 +39,7 @@ Rectangle {
fakeFocus.forceActiveFocus()
}
- radius: height / 2
+ radius: JamiTheme.lineEditRadius
color: JamiTheme.secondaryBackgroundColor
FocusScope {
@@ -45,12 +49,12 @@ Rectangle {
Image {
id: searchIconImage
- anchors.verticalCenter: contactSearchBarRect.verticalCenter
- anchors.left: contactSearchBarRect.left
- anchors.leftMargin: 8
+ anchors.verticalCenter: root.verticalCenter
+ anchors.left: root.left
+ anchors.leftMargin: itemMargin
- width: 20
- height: 20
+ width: 16
+ height: 16
fillMode: Image.PreserveAspectFit
mipmap: true
@@ -65,15 +69,18 @@ Rectangle {
TextField {
id: contactSearchBar
- color: JamiTheme.textColor
- anchors.verticalCenter: contactSearchBarRect.verticalCenter
+ anchors.verticalCenter: root.verticalCenter
anchors.left: searchIconImage.right
- width: contactSearchBarRect.width - searchIconImage.width - 10
- height: contactSearchBarRect.height - 5
+ width: root.width - searchIconImage.width - clearTextButton.width - itemMargin * 2
+ height: root.height - 5
+
+ color: JamiTheme.textColor
font.pointSize: JamiTheme.textFontSize
+ font.kerning: true
+
selectByMouse: true
selectionColor: JamiTheme.contactSearchBarPlaceHolderTextFontColor
@@ -86,10 +93,26 @@ Rectangle {
color: "transparent"
}
- onTextChanged: {
- contactSearchBarRect.contactSearchBarTextChanged(
- contactSearchBar.text)
- }
+ onTextChanged: root.contactSearchBarTextChanged(contactSearchBar.text)
+ }
+
+ PushButton {
+ id: clearTextButton
+
+ anchors.verticalCenter: root.verticalCenter
+ anchors.left: contactSearchBar.right
+
+ preferredSize: 16
+
+ visible: contactSearchBar.text.length
+
+ normalColor: root.color
+ imageColor: JamiTheme.primaryForegroundColor
+
+ source: "qrc:/images/icons/ic_clear_24px.svg"
+ toolTipText: JamiStrings.clearText
+
+ onClicked: contactSearchBar.clear()
}
Shortcut {
--
GitLab