Skip to content
Snippets Groups Projects
Commit a811b966 authored by Ming Rui Zhang's avatar Ming Rui Zhang
Browse files

materialLineEdit: ui simplification

materialLineEdit should be a rather simple component and
any futher changes should be in another component such as
UsernameLineEdit.

Change-Id: I7d284c6fa87653468e64fd42874f8042a58d99cf
parent 37fd2514
No related branches found
No related tags found
No related merge requests found
/*
* Copyright (C) 2020 by Savoir-faire Linux
* Copyright (C) 2021 by Savoir-faire Linux
* Author: Sébastien blin <sebastien.blin@savoirfairelinux.com>
* Author: Mingrui Zhang <mingrui.zhang@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
......@@ -18,69 +19,33 @@
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
import QtGraphicalEffects 1.14
import net.jami.Constants 1.0
TextField {
id: root
enum BorderColorMode {
NORMAL,
SEARCHING,
RIGHT,
ERROR
}
property int fieldLayoutWidth: 256
property int fieldLayoutHeight: 48
property bool layoutFillwidth: false
property int borderColorMode: MaterialLineEdit.NORMAL
property var iconSource: ""
property var backgroundColor: JamiTheme.editBackgroundColor
property var borderColor: JamiTheme.greyBorderColor
property bool loseFocusWhenEnterPressed: false
signal imageClicked
onBorderColorModeChanged: {
if (!enabled)
borderColor = "transparent"
if (readOnly)
iconSource = ""
switch(borderColorMode){
case MaterialLineEdit.SEARCHING:
iconSource = JamiResources.jami_rolling_spinner_gif
borderColor = JamiTheme.greyBorderColor
break
case MaterialLineEdit.NORMAL:
iconSource = ""
borderColor = JamiTheme.greyBorderColor
break
case MaterialLineEdit.RIGHT:
iconSource = JamiResources.round_check_circle_24dp_svg
borderColor = "green"
break
case MaterialLineEdit.ERROR:
iconSource = JamiResources.round_error_24dp_svg
borderColor = "red"
break
}
}
padding: JamiTheme.materialLineEditPadding
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
wrapMode: Text.Wrap
readOnly: false
selectByMouse: true
selectionColor: JamiTheme.placeHolderTextFontColor
font.pointSize: 10
padding: 16
font.pointSize: JamiTheme.materialLineEditPointSize
font.kerning: true
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
color: JamiTheme.textColor
LineEditContextMenu {
......@@ -90,53 +55,6 @@ TextField {
selectOnly: readOnly
}
Image {
id: lineEditImage
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
anchors.rightMargin: 16
width: 24
height: 24
visible: borderColorMode !== MaterialLineEdit.SEARCHING
source: borderColorMode === MaterialLineEdit.SEARCHING ? "" : iconSource
layer {
enabled: true
effect: ColorOverlay {
id: overlay
color: borderColor
}
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
acceptedButtons: Qt.LeftButton
enabled: borderColorMode === MaterialLineEdit.RIGHT
onReleased: {
imageClicked()
}
}
}
AnimatedImage {
anchors.left: lineEditImage.left
anchors.verticalCenter: parent.verticalCenter
width: 24
height: 24
source: borderColorMode !== MaterialLineEdit.SEARCHING ? "" : iconSource
playing: true
paused: false
fillMode: Image.PreserveAspectFit
mipmap: true
visible: borderColorMode === MaterialLineEdit.SEARCHING
}
background: Rectangle {
anchors.fill: parent
......
......@@ -42,8 +42,6 @@ BaseDialog {
purpose = purposeIn
path = exportPathIn
currentPasswordEdit.clear()
passwordEdit.borderColorMode = MaterialLineEdit.NORMAL
confirmPasswordEdit.borderColorMode = MaterialLineEdit.NORMAL
passwordEdit.clear()
confirmPasswordEdit.clear()
validatePassword()
......
/*
* Copyright (C) 2020 by Savoir-faire Linux
* Copyright (C) 2021 by Savoir-faire Linux
* Author: Mingrui Zhang <mingrui.zhang@savoirfairelinux.com>
*
* This program is free software; you can redistribute it and/or modify
......@@ -18,8 +18,10 @@
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtGraphicalEffects 1.14
import net.jami.Models 1.0
import net.jami.Constants 1.0
MaterialLineEdit {
id: root
......@@ -33,6 +35,11 @@ MaterialLineEdit {
}
property int nameRegistrationState: UsernameLineEdit.NameRegistrationState.BLANK
property var __iconSource: ""
selectByMouse: true
font.pointSize: JamiTheme.usernameLineEditPointSize
font.kerning: true
Connections {
id: registeredNameFoundConnection
......@@ -63,7 +70,7 @@ MaterialLineEdit {
id: lookupTimer
repeat: false
interval: 200
interval: JamiTheme.usernameLineEditlookupInterval
onTriggered: {
if (text.length !== 0 && readOnly === false) {
......@@ -75,21 +82,66 @@ MaterialLineEdit {
}
}
selectByMouse: true
font.pointSize: 9
font.kerning: true
Image {
id: lineEditImage
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
anchors.rightMargin: 16
width: 24
height: 24
visible: nameRegistrationState !== UsernameLineEdit.NameRegistrationState.SEARCHING
source: nameRegistrationState === UsernameLineEdit.NameRegistrationState.SEARCHING ?
"" : __iconSource
layer {
enabled: true
effect: ColorOverlay {
id: overlay
color: borderColor
}
}
}
AnimatedImage {
anchors.left: lineEditImage.left
anchors.verticalCenter: parent.verticalCenter
width: 24
height: 24
source: nameRegistrationState !== UsernameLineEdit.NameRegistrationState.SEARCHING ?
"" : __iconSource
playing: true
paused: false
fillMode: Image.PreserveAspectFit
mipmap: true
visible: nameRegistrationState === UsernameLineEdit.NameRegistrationState.SEARCHING
}
borderColorMode: {
switch (nameRegistrationState){
onNameRegistrationStateChanged: {
if (!enabled)
borderColor = "transparent"
switch(nameRegistrationState){
case UsernameLineEdit.NameRegistrationState.SEARCHING:
__iconSource = JamiResources.jami_rolling_spinner_gif
borderColor = JamiTheme.greyBorderColor
break
case UsernameLineEdit.NameRegistrationState.BLANK:
return MaterialLineEdit.NORMAL
__iconSource = ""
borderColor = JamiTheme.greyBorderColor
break
case UsernameLineEdit.NameRegistrationState.FREE:
__iconSource = JamiResources.round_check_circle_24dp_svg
borderColor = "green"
break
case UsernameLineEdit.NameRegistrationState.INVALID:
case UsernameLineEdit.NameRegistrationState.TAKEN:
return MaterialLineEdit.ERROR
case UsernameLineEdit.NameRegistrationState.FREE:
return MaterialLineEdit.RIGHT
case UsernameLineEdit.NameRegistrationState.SEARCHING:
return MaterialLineEdit.SEARCHING
__iconSource = JamiResources.round_error_24dp_svg
borderColor = "red"
break
}
}
......
......@@ -310,6 +310,14 @@ Item {
property real welcomeLogoHeight: 110
property real wizardButtonWidth: 400
// MaterialLineEdit
property real materialLineEditPointSize: 10
property real materialLineEditPadding: 16
// UsernameLineEdit
property real usernameLineEditPointSize: 9
property real usernameLineEditlookupInterval: 200
// Main application spec
property real mainViewMinWidth: 332
property real mainViewMinHeight: 500
......
......@@ -154,8 +154,6 @@ BaseDialog {
placeholderText: JamiStrings.enterCurrentPassword
borderColorMode: MaterialLineEdit.NORMAL
onTextChanged: {
btnConfirm.enabled = text.length > 0
}
......
......@@ -76,7 +76,6 @@ BaseDialog {
echoMode: TextInput.Password
placeholderText: JamiStrings.enterCurrentPassword
borderColorMode: MaterialLineEdit.NORMAL
onTextChanged: {
btnRemove.enabled = text.length > 0
......
......@@ -108,8 +108,6 @@ Rectangle {
font.pointSize: JamiTheme.textFontSize
font.kerning: true
borderColorMode: MaterialLineEdit.NORMAL
KeyNavigation.tab: usernameManagerEdit
KeyNavigation.up: {
if (backButton.visible)
......@@ -150,8 +148,6 @@ Rectangle {
font.pointSize: JamiTheme.textFontSize
font.kerning: true
borderColorMode: MaterialLineEdit.NORMAL
KeyNavigation.tab: passwordManagerEdit
KeyNavigation.up: accountManagerEdit
KeyNavigation.down: KeyNavigation.tab
......@@ -175,7 +171,6 @@ Rectangle {
font.kerning: true
echoMode: TextInput.Password
borderColorMode: MaterialLineEdit.NORMAL
KeyNavigation.tab: {
if (connectBtn.enabled)
......
......@@ -182,7 +182,6 @@ Rectangle {
font.kerning: true
echoMode: TextInput.Password
borderColorMode: MaterialLineEdit.NORMAL
KeyNavigation.tab: {
if (connectBtn.enabled)
......
......@@ -97,7 +97,6 @@ Rectangle {
font.kerning: true
echoMode: TextInput.Password
borderColorMode: MaterialLineEdit.NORMAL
KeyNavigation.tab: pinFromDevice
KeyNavigation.up: {
......@@ -146,8 +145,6 @@ Rectangle {
font.pointSize: JamiTheme.textFontSize
font.kerning: true
borderColorMode: MaterialLineEdit.NORMAL
KeyNavigation.tab: {
if (connectBtn.enabled)
return connectBtn
......
......@@ -146,8 +146,6 @@ Rectangle {
font.pointSize: JamiTheme.textFontSize
font.kerning: true
borderColorMode: MaterialLineEdit.NORMAL
fieldLayoutWidth: saveProfileBtn.width
KeyNavigation.tab: saveProfileBtn
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment