From 3e06e3c55d16aa5b6a8bf549068df8b1152937c3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Braud?= Date: Mon, 11 Dec 2023 10:56:13 +0000 Subject: [PATCH] Ui colors and sizes --- Linphone/core/call/CallCore.cpp | 25 +- Linphone/core/call/CallCore.hpp | 7 + Linphone/model/call/CallModel.cpp | 6 +- Linphone/tool/Utils.cpp | 23 +- Linphone/tool/Utils.hpp | 2 + Linphone/view/App/CallsWindow.qml | 312 ++++++++++----- Linphone/view/App/Layout/LoginLayout.qml | 44 ++- Linphone/view/App/Layout/MainLayout.qml | 6 +- Linphone/view/App/Main.qml | 4 +- Linphone/view/Item/Button.qml | 26 +- Linphone/view/Item/Call/ContactsList.qml | 117 +++--- .../view/Item/Call/OngoingCallRightPanel.qml | 14 +- Linphone/view/Item/Carousel.qml | 13 +- Linphone/view/Item/CheckBox.qml | 18 +- Linphone/view/Item/ComboBox.qml | 54 +-- Linphone/view/Item/DigitInput.qml | 24 +- Linphone/view/Item/EffectImage.qml | 2 +- Linphone/view/Item/Form/LoginForm.qml | 15 +- Linphone/view/Item/NumericPad.qml | 76 ++-- Linphone/view/Item/PhoneNumberComboBox.qml | 149 ++++--- Linphone/view/Item/PhoneNumberInput.qml | 32 +- Linphone/view/Item/RadioButton.qml | 36 +- Linphone/view/Item/SearchBar.qml | 41 +- Linphone/view/Item/TabBar.qml | 14 +- Linphone/view/Item/Text.qml | 9 +- Linphone/view/Item/TextInput.qml | 31 +- Linphone/view/Item/ToolTip.qml | 6 +- Linphone/view/Item/VerticalTabBar.qml | 20 +- Linphone/view/Page/Login/LoginLayout.qml | 70 ---- Linphone/view/Page/Login/LoginPage.qml | 10 +- .../view/Page/Login/RegisterCheckingPage.qml | 45 ++- Linphone/view/Page/Login/RegisterPage.qml | 65 ++-- Linphone/view/Page/Login/SIPLoginPage.qml | 362 +++++++++--------- Linphone/view/Page/Login/SecurityModePage.qml | 22 +- Linphone/view/Page/Login/WelcomePage.qml | 101 ++--- Linphone/view/Page/Main/AbstractMainPage.qml | 26 +- Linphone/view/Page/Main/CallPage.qml | 48 ++- Linphone/view/Style/DefaultStyle.qml | 86 +---- 38 files changed, 1054 insertions(+), 907 deletions(-) delete mode 100644 Linphone/view/Page/Login/LoginLayout.qml diff --git a/Linphone/core/call/CallCore.cpp b/Linphone/core/call/CallCore.cpp index ef243b2a..5ac59fbb 100644 --- a/Linphone/core/call/CallCore.cpp +++ b/Linphone/core/call/CallCore.cpp @@ -44,7 +44,7 @@ CallCore::CallCore(const std::shared_ptr &call) : QObject(nullpt mCallModel->setSelf(mCallModel); mDuration = call->getDuration(); mMicrophoneMuted = call->getMicrophoneMuted(); - // mSpeakerMuted = call->getSpeakerMuted(); + mSpeakerMuted = call->getSpeakerMuted(); mCameraEnabled = call->cameraEnabled(); mDuration = call->getDuration(); mState = LinphoneEnums::fromLinphone(call->getState()); @@ -78,12 +78,12 @@ void CallCore::setSelf(QSharedPointer me) { mAccountModelConnection->makeConnectToModel(&CallModel::remoteVideoEnabledChanged, [this](bool enabled) { mAccountModelConnection->invokeToCore([this, enabled]() { setRemoteVideoEnabled(enabled); }); }); - // mAccountModelConnection->makeConnect(this, &CallCore::lSetSpeakerMuted, [this](bool isMuted) { - // mAccountModelConnection->invokeToModel([this, isMuted]() { mCallModel->setSpeakerMuted(isMuted); }); - // }); - // mAccountModelConnection->makeConnect(mCallModel.get(), &CallModel::speakerMutedChanged, [this](bool isMuted) { - // mAccountModelConnection->invokeToCore([this, isMuted]() { setSpeakerMuted(isMuted); }); - // }); + mAccountModelConnection->makeConnectToCore(&CallCore::lSetSpeakerMuted, [this](bool isMuted) { + mAccountModelConnection->invokeToModel([this, isMuted]() { mCallModel->setSpeakerMuted(isMuted); }); + }); + mAccountModelConnection->makeConnectToModel(&CallModel::speakerMutedChanged, [this](bool isMuted) { + mAccountModelConnection->invokeToCore([this, isMuted]() { setSpeakerMuted(isMuted); }); + }); mAccountModelConnection->makeConnectToCore(&CallCore::lSetCameraEnabled, [this](bool enabled) { mAccountModelConnection->invokeToModel([this, enabled]() { mCallModel->setCameraEnabled(enabled); }); }); @@ -207,6 +207,17 @@ void CallCore::setDuration(int duration) { } } +bool CallCore::getSpeakerMuted() const { + return mSpeakerMuted; +} + +void CallCore::setSpeakerMuted(bool isMuted) { + if (mSpeakerMuted != isMuted) { + mSpeakerMuted = isMuted; + emit speakerMutedChanged(); + } +} + bool CallCore::getMicrophoneMuted() const { return mMicrophoneMuted; } diff --git a/Linphone/core/call/CallCore.hpp b/Linphone/core/call/CallCore.hpp index 5475e643..30e0c8d1 100644 --- a/Linphone/core/call/CallCore.hpp +++ b/Linphone/core/call/CallCore.hpp @@ -37,6 +37,7 @@ class CallCore : public QObject, public AbstractObject { Q_PROPERTY(LinphoneEnums::CallState state READ getState NOTIFY stateChanged) Q_PROPERTY(QString lastErrorMessage READ getLastErrorMessage NOTIFY lastErrorMessageChanged) Q_PROPERTY(int duration READ getDuration NOTIFY durationChanged) + Q_PROPERTY(bool speakerMuted READ getSpeakerMuted WRITE lSetSpeakerMuted NOTIFY speakerMutedChanged) Q_PROPERTY(bool microphoneMuted READ getMicrophoneMuted WRITE lSetMicrophoneMuted NOTIFY microphoneMutedChanged) Q_PROPERTY(bool cameraEnabled READ getCameraEnabled WRITE lSetCameraEnabled NOTIFY cameraEnabledChanged) Q_PROPERTY(bool paused READ getPaused WRITE lSetPaused NOTIFY pausedChanged) @@ -70,6 +71,9 @@ public: int getDuration(); void setDuration(int duration); + bool getSpeakerMuted() const; + void setSpeakerMuted(bool isMuted); + bool getMicrophoneMuted() const; void setMicrophoneMuted(bool isMuted); @@ -97,6 +101,7 @@ signals: void lastErrorMessageChanged(); void peerAddressChanged(); void durationChanged(int duration); + void speakerMutedChanged(); void microphoneMutedChanged(); void cameraEnabledChanged(); void pausedChanged(); @@ -108,6 +113,7 @@ signals: void lAccept(bool withVideo); // Accept an incoming call void lDecline(); // Decline an incoming call void lTerminate(); // Hangup a call + void lSetSpeakerMuted(bool muted); void lSetMicrophoneMuted(bool isMuted); void lSetCameraEnabled(bool enabled); void lSetPaused(bool paused); @@ -144,6 +150,7 @@ private: QString mPeerAddress; bool mPeerSecured; int mDuration = 0; + bool mSpeakerMuted; bool mMicrophoneMuted; bool mCameraEnabled; bool mPaused = false; diff --git a/Linphone/model/call/CallModel.cpp b/Linphone/model/call/CallModel.cpp index 79294d7c..833c4c83 100644 --- a/Linphone/model/call/CallModel.cpp +++ b/Linphone/model/call/CallModel.cpp @@ -68,7 +68,6 @@ void CallModel::terminate() { mustBeInLinphoneThread(log().arg(Q_FUNC_INFO)); mMonitor->terminate(); } - void CallModel::setPaused(bool paused) { mustBeInLinphoneThread(log().arg(Q_FUNC_INFO)); if (paused) { @@ -83,9 +82,8 @@ void CallModel::setPaused(bool paused) { void CallModel::transferTo(const std::shared_ptr &address) { mustBeInLinphoneThread(log().arg(Q_FUNC_INFO)); if (mMonitor->transferTo(address) == -1) - qWarning() << log() - .arg(QStringLiteral("Unable to transfer: `%1`.")) - .arg(Utils::coreStringToAppString(address->asString())); + qWarning() + << log().arg(QStringLiteral("Unable to transfer: `%1`.")).arg(QString::fromStdString(address->asString())); } void CallModel::setMicrophoneMuted(bool isMuted) { diff --git a/Linphone/tool/Utils.cpp b/Linphone/tool/Utils.cpp index ef9447ac..d2b7cf61 100644 --- a/Linphone/tool/Utils.cpp +++ b/Linphone/tool/Utils.cpp @@ -100,6 +100,14 @@ VariantObject *Utils::createCall(const QString &sipAddress, void Utils::openCallsWindow(CallGui *call) { if (call) App::getInstance()->getCallsWindow(QVariant::fromValue(call))->show(); } + +QQuickWindow *Utils::getCallsWindow(CallGui *callGui) { + auto app = App::getInstance(); + auto window = app->getCallsWindow(QVariant::fromValue(callGui)); + window->show(); + return window; +} + void Utils::closeCallsWindow() { App::getInstance()->closeCallsWindow(); } @@ -168,17 +176,14 @@ QString Utils::formatElapsedTime(int seconds) { QString hours, min, sec; - if (h < 10 && h > 0) { - hours = "0" + QString::number(h); - } + if (h < 10 && h > 0) hours = "0"; + hours.append(QString::number(h)); - if (m < 10) { - min = "0" + QString::number(m); - } + if (m < 10) min = "0"; + min.append(QString::number(m)); - if (s < 10) { - sec = "0" + QString::number(s); - } + if (s < 10) sec = "0"; + sec.append(QString::number(s)); return (h == 0 ? "" : hours + ":") + min + ":" + sec; } diff --git a/Linphone/tool/Utils.hpp b/Linphone/tool/Utils.hpp index 89322c5c..a03f1cee 100644 --- a/Linphone/tool/Utils.hpp +++ b/Linphone/tool/Utils.hpp @@ -40,6 +40,7 @@ #endif // if defined(__GNUC__) && __GNUC__ >= 7 #endif // ifndef UTILS_NO_BREAK +class CallGui; class QQuickWindow; class VariantObject; class CallGui; @@ -57,6 +58,7 @@ public: const QString &prepareTransfertAddress = "", const QHash &headers = {}); Q_INVOKABLE static void openCallsWindow(CallGui *call); + Q_INVOKABLE static QQuickWindow *getCallsWindow(CallGui *callGui); Q_INVOKABLE static void closeCallsWindow(); Q_INVOKABLE static VariantObject *haveAccount(); Q_INVOKABLE static QString createAvatar(const QUrl &fileUrl); // Return the avatar path diff --git a/Linphone/view/App/CallsWindow.qml b/Linphone/view/App/CallsWindow.qml index 494ccac3..d06a039c 100644 --- a/Linphone/view/App/CallsWindow.qml +++ b/Linphone/view/App/CallsWindow.qml @@ -13,8 +13,6 @@ Window { property CallGui call - property bool isInContactList: false - property int callsCount: 0 onCallsCountChanged: console.log("calls count", callsCount) @@ -29,7 +27,6 @@ Window { endCall() } } - onClosing: { endCall() } @@ -69,12 +66,11 @@ Window { checkable: true background: Rectangle { anchors.fill: parent + RectangleTest{} color: bottomButton.enabled - ? bottomButton.checked - ? disabledIcon - ? DefaultStyle.grey_0 - : DefaultStyle.main2_400 - : bottomButton.pressed + ? disabledIcon + ? DefaultStyle.grey_500 + : bottomButton.pressed || bottomButton.checked ? DefaultStyle.main2_400 : DefaultStyle.grey_500 : DefaultStyle.grey_600 @@ -96,7 +92,7 @@ Window { modal: true closePolicy: Control.Popup.NoAutoClose anchors.centerIn: parent - padding: 20 + padding: 20 * DefaultStyle.dp background: Item { anchors.fill: parent @@ -106,12 +102,12 @@ Window { anchors.right: parent.right height: parent.height + 2 color: DefaultStyle.main1_500_main - radius: 15 + radius: 15 * DefaultStyle.dp } Rectangle { id: mainBackground anchors.fill: parent - radius: 15 + radius: 15 * DefaultStyle.dp } } contentItem: ColumnLayout { @@ -124,34 +120,40 @@ Window { } } } + Timer { + id: autoClosePopup + interval: 2000 + onTriggered: { + transferErrorPopup.close() + } + } Control.Popup { id: transferErrorPopup visible: mainWindow.call.core.transferState === LinphoneEnums.CallState.Error - modal: true + onVisibleChanged: if (visible) autoClosePopup.restart() closePolicy: Control.Popup.NoAutoClose x : parent.x + parent.width - width y : parent.y + parent.height - height - padding: 20 + rightMargin: 20 * DefaultStyle.dp + bottomMargin: 20 * DefaultStyle.dp + padding: 20 * DefaultStyle.dp background: Item { - anchors.fill: parent Rectangle { - anchors.top: parent.top anchors.left: parent.left anchors.right: parent.right - height: parent.height + 2 - color: DefaultStyle.danger_500 + height: parent.height + 2 * DefaultStyle.dp + color: DefaultStyle.danger_500main } Rectangle { id: transferErrorBackground anchors.fill: parent - radius: 15 } MultiEffect { anchors.fill: transferErrorBackground shadowEnabled: true shadowColor: DefaultStyle.grey_900 - shadowBlur: 10 + shadowBlur: 1 // shadowOpacity: 0.1 } } @@ -168,25 +170,25 @@ Window { Rectangle { anchors.fill: parent - color: DefaultStyle.ongoingCallWindowColor + color: DefaultStyle.grey_900 ColumnLayout { anchors.fill: parent - spacing: 5 - anchors.bottomMargin: 5 + spacing: 5 * DefaultStyle.dp + anchors.bottomMargin: 5 * DefaultStyle.dp Item { - Layout.margins: 10 + Layout.margins: 10 * DefaultStyle.dp Layout.fillWidth: true - Layout.minimumHeight: 25 + Layout.minimumHeight: 25 * DefaultStyle.dp RowLayout { anchors.verticalCenter: parent.verticalCenter - spacing: 10 + spacing: 10 * DefaultStyle.dp EffectImage { id: callStatusIcon image.fillMode: Image.PreserveAspectFit - image.width: 15 - image.height: 15 - image.sourceSize.width: 15 - image.sourceSize.height: 15 + image.width: 15 * DefaultStyle.dp + image.height: 15 * DefaultStyle.dp + image.sourceSize.width: 15 * DefaultStyle.dp + image.sourceSize.height: 15 * DefaultStyle.dp image.source: (mainWindow.call.core.state === LinphoneEnums.CallState.Paused || mainWindow.callState === LinphoneEnums.CallState.PausedByRemote) ? AppIcons.pause @@ -198,7 +200,7 @@ Window { : AppIcons.incomingCall colorizationColor: mainWindow.callState === LinphoneEnums.CallState.Paused || mainWindow.callState === LinphoneEnums.CallState.PausedByRemote || mainWindow.callState === LinphoneEnums.CallState.End - || mainWindow.callState === LinphoneEnums.CallState.Released ? DefaultStyle.danger_500 : undefined + || mainWindow.callState === LinphoneEnums.CallState.Released ? DefaultStyle.danger_500main : undefined } Text { id: callStatusText @@ -208,17 +210,24 @@ Window { ? qsTr("Appel mis en pause") : EnumsToStringCpp.dirToString(mainWindow.call.core.dir) + qsTr(" call") color: DefaultStyle.grey_0 - font.bold: true + font { + pixelSize: 22 * DefaultStyle.dp + weight: 800 * DefaultStyle.dp + } } Rectangle { visible: mainWindow.callState === LinphoneEnums.CallState.Connected || mainWindow.callState === LinphoneEnums.CallState.StreamsRunning Layout.preferredHeight: parent.height - Layout.preferredWidth: 2 + Layout.preferredWidth: 2 * DefaultStyle.dp } Text { text: UtilsCpp.formatElapsedTime(mainWindow.call.core.duration) color: DefaultStyle.grey_0 + font { + pixelSize: 22 * DefaultStyle.dp + weight: 800 * DefaultStyle.dp + } visible: mainWindow.callState === LinphoneEnums.CallState.Connected || mainWindow.callState === LinphoneEnums.CallState.StreamsRunning } @@ -226,29 +235,33 @@ Window { Control.Control { anchors.centerIn: parent - topPadding: 8 - bottomPadding: 8 - leftPadding: 10 - rightPadding: 10 + topPadding: 8 * DefaultStyle.dp + bottomPadding: 8 * DefaultStyle.dp + leftPadding: 10 * DefaultStyle.dp + rightPadding: 10 * DefaultStyle.dp visible: mainWindow.call.core.peerSecured onVisibleChanged: console.log("peer secured", mainWindow.call.core.peerSecured) background: Rectangle { anchors.fill: parent border.color: DefaultStyle.info_500_main - radius: 15 + radius: 15 * DefaultStyle.dp } contentItem: RowLayout { Image { source: AppIcons.trusted - Layout.preferredWidth: 15 - Layout.preferredHeight: 15 - sourceSize.width: 15 - sourceSize.height: 15 + Layout.preferredWidth: 24 * DefaultStyle.dp + Layout.preferredHeight: 24 * DefaultStyle.dp + sourceSize.width: 24 * DefaultStyle.dp + sourceSize.height: 24 * DefaultStyle.dp fillMode: Image.PreserveAspectFit } Text { text: "This call is completely secured" color: DefaultStyle.info_500_main + font { + pixelSize: 14 * DefaultStyle.dp + weight: 400 * DefaultStyle.dp + } } } } @@ -259,13 +272,13 @@ Window { Layout.fillWidth: true Layout.preferredWidth: 1059 * DefaultStyle.dp Layout.fillHeight: true - Layout.leftMargin: 10 - Layout.rightMargin: 10 + Layout.leftMargin: 10 * DefaultStyle.dp + Layout.rightMargin: 10 * DefaultStyle.dp Layout.alignment: Qt.AlignCenter background: Rectangle { anchors.fill: parent - color: DefaultStyle.ongoingCallBackgroundColor - radius: 15 + color: DefaultStyle.grey_600 * DefaultStyle.dp + radius: 15 * DefaultStyle.dp } contentItem: Item { anchors.fill: parent @@ -294,7 +307,7 @@ Window { ColumnLayout { anchors.horizontalCenter: parent.horizontalCenter anchors.top: parent.top - anchors.topMargin: 30 + anchors.topMargin: 30 * DefaultStyle.dp visible: mainWindow.callState == LinphoneEnums.CallState.OutgoingInit || mainWindow.callState == LinphoneEnums.CallState.OutgoingProgress || mainWindow.callState == LinphoneEnums.CallState.OutgoingRinging @@ -311,7 +324,7 @@ Window { color: DefaultStyle.grey_0 Layout.alignment: Qt.AlignHCenter horizontalAlignment: Text.AlignHCenter - font.pointSize: DefaultStyle.ongoingCallElapsedTimeSize + font.pointSize: 30 * DefaultStyle.dp Component.onCompleted: { secondsTimer.restart() } @@ -319,49 +332,23 @@ Window { } ColumnLayout { anchors.centerIn: parent - spacing: 2 - Sticker{ - Layout.fillHeight: true - Layout.fillWidth: true - call: mainWindow.call + spacing: 2 * DefaultStyle.dp + Avatar { + Layout.alignment: Qt.AlignCenter + // TODO : remove username when friend list ready + address: mainWindow.peerNameText + Layout.preferredWidth: 120 * DefaultStyle.dp + Layout.preferredHeight: 120 * DefaultStyle.dp } - // Avatar { - // Layout.alignment: Qt.AlignCenter - // visible: mainWindow.isInContactList - // image.source: AppIcons.avatar - // size: 100 - // } - // DefaultAvatar { - // id: defaultAvatar - // Layout.alignment: Qt.AlignCenter - // visible: !mainWindow.isInContactList - // initials:{ - // var usernameList = mainWindow.peerNameText.split(' ') - // for (var i = 0; i < usernameList.length; ++i) { - // initials += usernameList[i][0] - // } - // } - // Connections { - // target: mainWindow - // onPeerNameChanged: { - // defaultAvatar.initials = "" - // var usernameList = mainWindow.peerName.value.split(' ') - // for (var i = 0; i < usernameList.length; ++i) { - // defaultAvatar.initials += usernameList[i][0] - // } - // } - // } - // width: 100 - // height: 100 - // } Text { Layout.alignment: Qt.AlignCenter - Layout.topMargin: 15 + Layout.topMargin: 15 * DefaultStyle.dp visible: mainWindow.peerNameText.length > 0 text: mainWindow.peerNameText color: DefaultStyle.grey_0 font { - pointSize: DefaultStyle.ongoingCallNameSize + pixelSize: 22 * DefaultStyle.dp + weight: 300 * DefaultStyle.dp capitalization: Font.Capitalize } } @@ -369,7 +356,10 @@ Window { Layout.alignment: Qt.AlignCenter text: mainWindow.call.core.peerAddress color: DefaultStyle.grey_0 - font.pointSize: DefaultStyle.ongoingCallAddressSize + font { + pixelSize: 14 * DefaultStyle.dp + weight: 300 * DefaultStyle.dp + } } } } @@ -387,18 +377,21 @@ Window { text: qsTr(mainWindow.call.core.lastErrorMessage) Layout.alignment: Qt.AlignCenter color: DefaultStyle.grey_0 - font.pointSize: DefaultStyle.ongoingCallNameSize + font.pixelSize: 40 * DefaultStyle.dp } } } Text { anchors.left: parent.left anchors.bottom: parent.bottom - anchors.leftMargin: 10 - anchors.bottomMargin: 10 + anchors.leftMargin: 10 * DefaultStyle.dp + anchors.bottomMargin: 10 * DefaultStyle.dp text: mainWindow.peerNameText color: DefaultStyle.grey_0 - font.pointSize: DefaultStyle.ongoingCallAddressSize + font { + pixelSize: 14 * DefaultStyle.dp + weight: 500 * DefaultStyle.dp + } } } } @@ -407,31 +400,75 @@ Window { Layout.fillHeight: true Layout.preferredWidth: 393 * DefaultStyle.dp property int currentIndex: 0 - Layout.rightMargin: 10 + Layout.rightMargin: 10 * DefaultStyle.dp visible: false headerContent: StackLayout { currentIndex: rightPanel.currentIndex anchors.verticalCenter: parent.verticalCenter Text { - color: DefaultStyle.mainPageTitleColor + color: DefaultStyle.main2_700 text: qsTr("Transfert d'appel") font.bold: true } + Text { + color: DefaultStyle.main2_700 + text: qsTr("Dialer") + font.bold: true + } } contentItem: StackLayout { currentIndex: rightPanel.currentIndex ContactsList { Layout.fillWidth: true Layout.fillHeight: true - sideMargin: 10 - topMargin: 15 + sideMargin: 10 * DefaultStyle.dp + topMargin: 15 * DefaultStyle.dp groupCallVisible: false searchBarColor: DefaultStyle.grey_0 - searchBarBorderColor: DefaultStyle.callRightPanelSearchBarBorderColor + searchBarBorderColor: DefaultStyle.grey_200 onCallButtonPressed: (address) => { mainWindow.call.core.lTransferCall(address) } } + ColumnLayout { + Layout.fillWidth: true + Layout.fillHeight: true + SearchBar { + id: dialerTextInput + Layout.fillWidth: true + // Layout.maximumWidth: mainItem.width + color: DefaultStyle.grey_0 + borderColor: DefaultStyle.grey_200 + placeholderText: "" + numericPad: numPad + Component.onCompleted: numericPad.visible = true + numericPadButton.visible: false + } + Item { + Component.onCompleted: console.log("num pad", x, y, width, height) + Layout.fillWidth: true + Layout.preferredHeight: numPad.height + Layout.fillHeight: numPad.height + Layout.alignment: Qt.AlignBottom + visible: false + onVisibleChanged: { + console.log("visible cvhanged", visible) + if (visible) numPad.open() + else numPad.close() + } + NumericPad { + id: numPad + width: parent.width + visible: parent.visible + closeButtonVisible: false + onVisibleChanged: { + console.log("visible numpad", visible, parent.visible) + } + onOpened: console.log("open") + onClosed: console.log("close") + } + } + } } } } @@ -441,7 +478,7 @@ Window { columns: 3 Layout.alignment: Qt.AlignHCenter layoutDirection: Qt.LeftToRight - columnSpacing: 20 + columnSpacing: 20 * DefaultStyle.dp Connections { target: mainWindow onCallStateChanged: if (mainWindow.callState === LinphoneEnums.CallState.Connected || mainWindow.callState === LinphoneEnums.CallState.StreamsRunning) { @@ -468,7 +505,7 @@ Window { Layout.preferredHeight: 55 * DefaultStyle.dp background: Rectangle { anchors.fill: parent - color: DefaultStyle.danger_500 + color: DefaultStyle.danger_500main radius: 71 * DefaultStyle.dp } onClicked: mainWindow.endCall() @@ -504,7 +541,7 @@ Window { Layout.preferredWidth: 55 * DefaultStyle.dp Layout.preferredHeight: 55 * DefaultStyle.dp onClicked: { - rightPanel.visible = !rightPanel.visible + rightPanel.visible = true rightPanel.currentIndex = 0 } } @@ -527,7 +564,6 @@ Window { } BottomButton { - id: micButton enabledIcon: AppIcons.microphone disabledIcon: AppIcons.microphoneSlash checked: mainWindow.call.core.microphoneMuted @@ -535,13 +571,91 @@ Window { Layout.preferredHeight: 55 * DefaultStyle.dp onClicked: mainWindow.call.core.lSetMicrophoneMuted(!mainWindow.call.core.microphoneMuted) } + BottomButton { + id: moreOptionsButton + checkable: true + enabledIcon: AppIcons.verticalDots + Layout.preferredWidth: 55 * DefaultStyle.dp + Layout.preferredHeight: 55 * DefaultStyle.dp + onCheckedChanged: { + if (checked) moreOptionsMenu.open() + else moreOptionsMenu.close() + } + } + Popup { + id: moreOptionsMenu + x: moreOptionsButton.x + y: moreOptionsButton.y - height + padding: 20 * DefaultStyle.dp + + closePolicy: Control.Popup.CloseOnEscape + onClosed: moreOptionsButton.checked = false + + Connections { + target: rightPanel + onVisibleChanged: if (!rightPanel.visible) moreOptionsMenu.close() + } + + contentItem: ColumnLayout { + id: optionsList + spacing: 10 * DefaultStyle.dp + + Control.Button { + id: dialerButton + // width: 150 + Layout.fillWidth: true + height: 32 * DefaultStyle.dp + background: Item { + visible: false + } + contentItem: RowLayout { + Image { + width: 24 * DefaultStyle.dp + height: 24 * DefaultStyle.dp + source: AppIcons.dialer + } + Text { + text: qsTr("Dialer") + } + } + onClicked: { + rightPanel.visible = true + rightPanel.currentIndex = 1 + moreOptionsMenu.close() + } + } + Control.Button { + id: speakerButton + Layout.fillWidth: true + height: 32 * DefaultStyle.dp + checkable: true + background: Item { + visible: false + } + contentItem: RowLayout { + Image { + width: 24 * DefaultStyle.dp + height: 24 * DefaultStyle.dp + source: mainWindow.call.core.speakerMuted ? AppIcons.speakerSlash : AppIcons.speaker + } + Text { + text: mainWindow.call.core.speakerMuted ? qsTr("Activer le son") : qsTr("Désactiver le son") + } + + } + onClicked: { + mainWindow.call.core.lSetSpeakerMuted(!mainWindow.call.core.speakerMuted) + } + } + } + } } } } } Sticker{ - height: 100 - width: 100 + height: 100 * DefaultStyle.dp + width: 100 * DefaultStyle.dp anchors.right: parent.right anchors.bottom: parent.bottom visible: mainWindow.call.core.cameraEnabled diff --git a/Linphone/view/App/Layout/LoginLayout.qml b/Linphone/view/App/Layout/LoginLayout.qml index fec8700b..43e7fa29 100644 --- a/Linphone/view/App/Layout/LoginLayout.qml +++ b/Linphone/view/App/Layout/LoginLayout.qml @@ -12,23 +12,25 @@ Item { id: mainItem property alias titleContent : titleLayout.children property alias centerContent : centerLayout.children - ColumnLayout { - anchors.rightMargin: 30 - anchors.leftMargin: 80 + anchors.rightMargin: 40 * DefaultStyle.dp + anchors.leftMargin: 119 * DefaultStyle.dp anchors.top: parent.top anchors.left: parent.left anchors.right: parent.right anchors.bottom: bottomMountains.top - spacing: 20 - ColumnLayout { + spacing: 3 * DefaultStyle.dp + RowLayout { Layout.fillWidth: true - Layout.preferredHeight: 50 - Layout.topMargin: 18 - Layout.alignment: Qt.AlignRight | Qt.AlignTop + Layout.preferredHeight: 102 * DefaultStyle.dp + // Layout.topMargin: 18 + // Layout.alignment: Qt.AlignRight | Qt.AlignTop + Item { + Layout.fillWidth: true + } Control.Button { - Layout.alignment: Qt.AlignRight - Layout.bottomMargin: 20 + Layout.alignment: Qt.AlignRight | Qt.AlignVCenter + // Layout.bottomMargin: 20 background: Rectangle { color: "transparent" } @@ -36,12 +38,17 @@ Item { Image { fillMode: Image.PreserveAspectFit source: AppIcons.info + Layout.preferredWidth: 24 * DefaultStyle.dp + Layout.preferredHeight: 24 * DefaultStyle.dp } Text { Layout.alignment: Qt.AlignRight | Qt.AlignVCenter - text: "About" - font.pixelSize: 12 - color: DefaultStyle.aboutButtonTextColor + text: qsTr("À propos") + font { + pixelSize: 14 * DefaultStyle.dp + weight: 400 * DefaultStyle.dp + } + color: DefaultStyle.main2_500main } } onClicked: console.debug("[LoginLayout]User: open about popup") @@ -51,13 +58,16 @@ Item { RowLayout { id: titleLayout - Layout.bottomMargin: 20 + Layout.preferredHeight: 131 * DefaultStyle.dp + // Layout.bottomMargin: 20 } ColumnLayout { id: centerLayout Layout.fillHeight: true } - + Item { + Layout.fillHeight: true + } } RowLayout { @@ -66,8 +76,8 @@ Item { anchors.left: parent.left anchors.right: parent.right Image { - Layout.minimumHeight: 50 - Layout.preferredHeight: 80 + Layout.minimumHeight: 50 * DefaultStyle.dp + Layout.preferredHeight: 80 * DefaultStyle.dp Layout.fillWidth: true source: AppIcons.belledonne fillMode: Image.Stretch diff --git a/Linphone/view/App/Layout/MainLayout.qml b/Linphone/view/App/Layout/MainLayout.qml index 5c684ecc..d6ad780c 100644 --- a/Linphone/view/App/Layout/MainLayout.qml +++ b/Linphone/view/App/Layout/MainLayout.qml @@ -37,8 +37,8 @@ Item { id: topRow Layout.leftMargin: 25 * DefaultStyle.dp Layout.rightMargin: 41 * DefaultStyle.dp - TextInput { - fillWidth: true + SearchBar { + Layout.fillWidth: true placeholderText: qsTr("Rechercher un contact, appeler ou envoyer un message...") } Control.Button { @@ -60,7 +60,7 @@ Item { account: accountProxy.defaultAccount } onClicked: { - accountList.open() + accountList.open() } } Control.Button { diff --git a/Linphone/view/App/Main.qml b/Linphone/view/App/Main.qml index ce0a8aae..239e363e 100644 --- a/Linphone/view/App/Main.qml +++ b/Linphone/view/App/Main.qml @@ -15,9 +15,9 @@ Window { id: accountProxy onHaveAccountChanged: { if(haveAccount) - mainWindowStackView.replace(mainPage) + mainWindowStackView.replace(mainPage, StackView.Immediate) else - mainWindowStackView.replace(loginPage) + mainWindowStackView.replace(loginPage, StackView.Immediate) } } StackView { diff --git a/Linphone/view/Item/Button.qml b/Linphone/view/Item/Button.qml index fedc8ab4..c46e6cbd 100644 --- a/Linphone/view/Item/Button.qml +++ b/Linphone/view/Item/Button.qml @@ -7,23 +7,28 @@ Control.Button { id: mainItem property int capitalization property bool inversedColors: false - property int textSize: DefaultStyle.buttonTextSize - property bool boldText: true + property int textSize: 18 * DefaultStyle.dp + property int textWeight: 600 * DefaultStyle.dp property bool shadowEnabled: false hoverEnabled: true + leftPadding: 20 * DefaultStyle.dp + rightPadding: 20 * DefaultStyle.dp + topPadding: 11 * DefaultStyle.dp + bottomPadding: 11 * DefaultStyle.dp + background: Item { Rectangle { anchors.fill: parent id: buttonBackground - color: inversedColors + color: inversedColors ? mainItem.pressed - ? DefaultStyle.buttonPressedInversedBackground + ? DefaultStyle.grey_100 : DefaultStyle.grey_0 : mainItem.pressed - ? DefaultStyle.buttonPressedBackground + ? DefaultStyle.main1_500_main_darker : DefaultStyle.main1_500_main - radius: 24 + radius: 48 * DefaultStyle.dp border.color: inversedColors ? DefaultStyle.main1_500_main : DefaultStyle.grey_0 MouseArea { @@ -37,8 +42,9 @@ Control.Button { anchors.fill: buttonBackground source: buttonBackground shadowEnabled: mainItem.shadowEnabled - shadowColor: "black"//DefaultStyle.numericPadShadowColor - shadowHorizontalOffset: 1.0 + shadowColor: DefaultStyle.grey_1000 + shadowBlur: 1 + shadowOpacity: 0.1 } } @@ -49,8 +55,8 @@ Control.Button { text: mainItem.text color: inversedColors ? DefaultStyle.main1_500_main : DefaultStyle.grey_0 font { - bold: mainItem.boldText - pointSize: mainItem.textSize + pixelSize: mainItem.textSize + weight: mainItem.textWeight family: DefaultStyle.defaultFont capitalization: mainItem.capitalization } diff --git a/Linphone/view/Item/Call/ContactsList.qml b/Linphone/view/Item/Call/ContactsList.qml index cfc89659..9d651ea3 100644 --- a/Linphone/view/Item/Call/ContactsList.qml +++ b/Linphone/view/Item/Call/ContactsList.qml @@ -7,10 +7,10 @@ import Linphone Item { id: mainItem - property int sideMargin: 25 - property int topMargin: 5 + property int sideMargin: 25 * DefaultStyle.dp + property int topMargin: 5 * DefaultStyle.dp property bool groupCallVisible - property color searchBarColor: DefaultStyle.contactListSearchBarColor + property color searchBarColor: DefaultStyle.grey_100 property color searchBarBorderColor: "transparent" signal callButtonPressed(string address) clip: true @@ -25,7 +25,7 @@ Item { } contentItem: ColumnLayout { anchors.fill: parent - spacing: 10 + spacing: 10 * DefaultStyle.dp SearchBar { id: searchBar Layout.alignment: Qt.AlignTop @@ -46,18 +46,21 @@ Item { background: Rectangle { color: DefaultStyle.groupCallButtonColor anchors.fill: parent - radius: 50 + radius: 50 * DefaultStyle.dp } contentItem: RowLayout { Image { source: AppIcons.groupCall - Layout.preferredWidth: 35 - sourceSize.width: 35 + Layout.preferredWidth: 35 * DefaultStyle.dp + sourceSize.width: 35 * DefaultStyle.dp fillMode: Image.PreserveAspectFit } Text { text: "Appel de groupe" - font.bold: true + font { + pixelSize: 16 * DefaultStyle.dp + weight: 800 * DefaultStyle.dp + } } Item { Layout.fillWidth: true @@ -81,15 +84,15 @@ Item { Layout.fillWidth: true } Control.Button { - implicitWidth: 30 - implicitHeight: 30 + implicitWidth: 30 * DefaultStyle.dp + implicitHeight: 30 * DefaultStyle.dp background: Item { visible: false } contentItem: Image { source: AppIcons.phone - width: 20 - sourceSize.width: 20 + width: 20 * DefaultStyle.dp + sourceSize.width: 20 * DefaultStyle.dp fillMode: Image.PreserveAspectFit } onClicked: { @@ -97,50 +100,48 @@ Item { } } } - ColumnLayout { - ListView { - id: contactList - Layout.fillWidth: true - Layout.fillHeight: true - // call history - model: 30 - delegate: Item { - required property int index - width:contactList.width - height: 30 - RowLayout { + ListView { + id: contactList + Layout.fillWidth: true + Layout.fillHeight: true + // call history + model: 30 + delegate: Item { + required property int index + width:contactList.width + height: 30 * DefaultStyle.dp + RowLayout { + anchors.fill: parent + Image { + source: AppIcons.info + } + ColumnLayout { + Text { + text: "John Doe" + } + // RowLayout { + // Image { + // source: AppIcons.incomingCall + // } + // Text { + // text: "info sur l'appel" + // } + // } + } + Item { + Layout.fillWidth: true + } + } + MouseArea { + hoverEnabled: true + Rectangle { anchors.fill: parent - Image { - source: AppIcons.info - } - ColumnLayout { - Text { - text: "John Doe" - } - // RowLayout { - // Image { - // source: AppIcons.incomingCall - // } - // Text { - // text: "info sur l'appel" - // } - // } - } - Item { - Layout.fillWidth: true - } - } - MouseArea { - hoverEnabled: true - Rectangle { - anchors.fill: parent - opacity: 0.1 - radius: 15 - color: DefaultStyle.comboBoxHoverColor - visible: parent.containsMouse - } - onClicked: contactList.currentIndex = parent.index + opacity: 0.1 + radius: 15 * DefaultStyle.dp + color: DefaultStyle.main2_500main + visible: parent.containsMouse } + onClicked: contactList.currentIndex = parent.index } } } @@ -151,18 +152,14 @@ Item { anchors.bottom: parent.bottom anchors.left: parent.left anchors.right: parent.right - height: numPad.height + height: numPad.implicitHeight NumericPad { id: numPad - // anchors.centerIn: parent width: parent.width onLaunchCall: { var callVarObject = UtilsCpp.createCall(searchBar.text + "@sip.linphone.org") // TODO : auto completion instead of sip linphone - var windowComp = Qt.createComponent("OngoingCallPage.qml") - var callWindow = windowComp.createObject({callVarObject: callVarObject}) - callWindow.show() } } } -} \ No newline at end of file +} diff --git a/Linphone/view/Item/Call/OngoingCallRightPanel.qml b/Linphone/view/Item/Call/OngoingCallRightPanel.qml index 47bafd59..7b2563bd 100644 --- a/Linphone/view/Item/Call/OngoingCallRightPanel.qml +++ b/Linphone/view/Item/Call/OngoingCallRightPanel.qml @@ -10,8 +10,8 @@ Control.Page { background: Rectangle { width: mainItem.width height: mainItem.height - color: DefaultStyle.callRightPanelBackgroundColor - radius: 15 + color: DefaultStyle.grey_100 + radius: 15 * DefaultStyle.dp } header: Control.Control { @@ -22,7 +22,7 @@ Control.Page { width: pageHeader.width height: pageHeader.height color: DefaultStyle.grey_0 - radius: 15 + radius: 15 * DefaultStyle.dp Rectangle { y: pageHeader.height/2 height: pageHeader.height/2 @@ -33,7 +33,7 @@ Control.Page { contentItem: RowLayout { width: pageHeader.width height: pageHeader.height - anchors.leftMargin: 10 + anchors.leftMargin: 10 * DefaultStyle.dp anchors.left: pageHeader.left Item { id: header @@ -50,12 +50,12 @@ Control.Page { contentItem: Image { anchors.centerIn: closeButton source: AppIcons.closeX - width: 10 - sourceSize.width: 10 + width: 10 * DefaultStyle.dp + sourceSize.width: 10 * DefaultStyle.dp fillMode: Image.PreserveAspectFit } onClicked: mainItem.visible = false } } } -} \ No newline at end of file +} diff --git a/Linphone/view/Item/Carousel.qml b/Linphone/view/Item/Carousel.qml index c825036a..97de4a2f 100644 --- a/Linphone/view/Item/Carousel.qml +++ b/Linphone/view/Item/Carousel.qml @@ -6,14 +6,11 @@ import Linphone ColumnLayout { id: mainItem - required property list itemsList // Items count is needed when using a repeater for itemsList // which is part of the carouselStackLayout children list required property int itemsCount property int currentIndex: carouselStackLayout.currentIndex - property bool prevButtonVisible: true - property bool nextButtonVisible: true function goToSlide(index) { carouselStackLayout.goToSlideAtIndex(index) @@ -80,8 +77,6 @@ ColumnLayout { } RowLayout { id: carouselButtonsLayout - Layout.topMargin: 20 - Layout.bottomMargin: 20 Component { id: carouselButton @@ -91,10 +86,10 @@ ColumnLayout { signal buttonClicked(int index) background: Rectangle { - color: stackLayout.currentIndex == slideIndex ? DefaultStyle.main1_500_main : DefaultStyle.carouselLightGrayColor - radius: 15 - width: stackLayout.currentIndex == slideIndex ? 11 : 8 - height: 8 + color: stackLayout.currentIndex == slideIndex ? DefaultStyle.main1_500_main : DefaultStyle.main2_200 + radius: 15 * DefaultStyle.dp + width: stackLayout.currentIndex == slideIndex ? 11 * DefaultStyle.dp : 8 * DefaultStyle.dp + height: 8 * DefaultStyle.dp Behavior on width { NumberAnimation {duration: 100}} } onClicked: { diff --git a/Linphone/view/Item/CheckBox.qml b/Linphone/view/Item/CheckBox.qml index 47d0e2f3..19a04249 100644 --- a/Linphone/view/Item/CheckBox.qml +++ b/Linphone/view/Item/CheckBox.qml @@ -6,21 +6,19 @@ Control.CheckBox { id: mainItem indicator: Rectangle { - implicitWidth: 18 - implicitHeight: 18 + implicitWidth: 20 * DefaultStyle.dp + implicitHeight: 20 * DefaultStyle.dp x: (parent.width - width) / 2 y: (parent.height - height) / 2 - radius: 3 + radius: 3 * DefaultStyle.dp border.color: DefaultStyle.main1_500_main - border.width: DefaultStyle.checkboxBorderWidth + border.width: 2 * DefaultStyle.dp // color: mainItem.checked ? DefaultStyle.main1_500_main : "transparent" - - Text { + EffectImage { visible: mainItem.checked - text: "\u2714" - font.pointSize: 18 - color: DefaultStyle.main1_500_main - anchors.centerIn: parent + image.source: AppIcons.check + colorizationColor: DefaultStyle.main1_500_main + anchors.fill: parent } } } diff --git a/Linphone/view/Item/ComboBox.qml b/Linphone/view/Item/ComboBox.qml index 4f7ef007..c55ecd5e 100644 --- a/Linphone/view/Item/ComboBox.qml +++ b/Linphone/view/Item/ComboBox.qml @@ -6,7 +6,7 @@ import Linphone ColumnLayout { id: mainItem property string label: "" - property int backgroundWidth: 200 + property int backgroundWidth: 200 * DefaultStyle.dp // Usage : each item of the model list must be {text: ..., img: ...} property var modelList: [] readonly property string currentText: selectedItemText.text @@ -17,10 +17,10 @@ ColumnLayout { visible: label.length > 0 verticalAlignment: Text.AlignVCenter text: mainItem.label - color: combobox.activeFocus ? DefaultStyle.main1_500_main : DefaultStyle.formItemLabelColor + color: combobox.activeFocus ? DefaultStyle.main1_500_main : DefaultStyle.main2_600 font { - pointSize: DefaultStyle.formItemLabelSize - bold: true + pixelSize: 13 * DefaultStyle.dp + weight: 700 * DefaultStyle.dp } } @@ -30,10 +30,10 @@ ColumnLayout { width: mainItem.backgroundWidth background: Rectangle { implicitWidth: mainItem.backgroundWidth - implicitHeight: 30 - radius: 15 - color: combobox.enabled ? DefaultStyle.formItemBackgroundColor : DefaultStyle.formItemDisableBackgroundColor - border.color: combobox.enabled ? DefaultStyle.formItemBorderColor : DefaultStyle.formItemDisableColor + implicitHeight: 49 * DefaultStyle.dp + radius: 63 * DefaultStyle.dp + color: combobox.enabled ? DefaultStyle.grey_100 : DefaultStyle.grey_200 + border.color: combobox.enabled ? DefaultStyle.grey_200 : DefaultStyle.grey_400 } contentItem: Item { anchors.left: parent.left @@ -41,22 +41,22 @@ ColumnLayout { Image { id: selectedItemImg visible: source != "" - sourceSize.width: 20 - width: visible ? 20 : 0 + sourceSize.width: 20 * DefaultStyle.dp + width: visible ? 20 * DefaultStyle.dp : 0 fillMode: Image.PreserveAspectFit anchors.verticalCenter: parent.verticalCenter anchors.left: parent.left - anchors.leftMargin: visible ? 10 : 0 + anchors.leftMargin: visible ? 10 * DefaultStyle.dp : 0 } Text { id: selectedItemText - color: combobox.enabled ? DefaultStyle.defaultTextColor : DefaultStyle.formItemDisableColor + color: combobox.enabled ? DefaultStyle.main2_600 : DefaultStyle.grey_400 elide: Text.ElideRight anchors.left: selectedItemImg.right - anchors.leftMargin: selectedItemImg.visible ? 5 : 10 + anchors.leftMargin: selectedItemImg.visible ? 5 * DefaultStyle.dp : 10 * DefaultStyle.dp anchors.right: parent.right - anchors.rightMargin: 20 + anchors.rightMargin: 20 * DefaultStyle.dp anchors.verticalCenter: parent.verticalCenter } @@ -76,7 +76,7 @@ ColumnLayout { indicator: Image { id: indicImage anchors.right: parent.right - anchors.rightMargin: 10 + anchors.rightMargin: 10 * DefaultStyle.dp anchors.verticalCenter: parent.verticalCenter source: AppIcons.downArrow } @@ -86,7 +86,7 @@ ColumnLayout { y: combobox.height - 1 width: combobox.width implicitHeight: contentItem.implicitHeight - padding: 1 + padding: 1 * DefaultStyle.dp contentItem: ListView { id: listView @@ -97,8 +97,8 @@ ColumnLayout { highlightFollowsCurrentItem: true highlight: Rectangle { width: listView.width - color: DefaultStyle.comboBoxHighlightColor - radius: 15 + color: DefaultStyle.main2_300 + radius: 63 * DefaultStyle.dp y: listView.currentItem? listView.currentItem.y : 0 } @@ -111,12 +111,12 @@ ColumnLayout { Image { id: delegateImg visible: source != "" - width: visible ? 20 : 0 - sourceSize.width: 20 + width: visible ? 20 * DefaultStyle.dp : 0 + sourceSize.width: 20 * DefaultStyle.dp source: modelData.img ? modelData.img : "" fillMode: Image.PreserveAspectFit anchors.left: parent.left - anchors.leftMargin: visible ? 10 : 0 + anchors.leftMargin: visible ? 10 * DefaultStyle.dp : 0 anchors.verticalCenter: parent.verticalCenter } @@ -129,9 +129,9 @@ ColumnLayout { elide: Text.ElideRight anchors.verticalCenter: parent.verticalCenter anchors.left: delegateImg.right - anchors.leftMargin: delegateImg.visible ? 5 : 10 + anchors.leftMargin: delegateImg.visible ? 5 * DefaultStyle.dp : 10 * DefaultStyle.dp anchors.right: parent.right - anchors.rightMargin: 20 + anchors.rightMargin: 20 * DefaultStyle.dp } MouseArea { @@ -140,8 +140,8 @@ ColumnLayout { Rectangle { anchors.fill: parent opacity: 0.1 - radius: 15 - color: DefaultStyle.comboBoxHoverColor + radius: 63 * DefaultStyle.dp + color: DefaultStyle.main2_500main visible: parent.containsMouse } onPressed: { @@ -167,8 +167,8 @@ ColumnLayout { background: Rectangle { implicitWidth: mainItem.backgroundWidth - implicitHeight: 30 - radius: 15 + implicitHeight: 30 * DefaultStyle.dp + radius: 63 * DefaultStyle.dp } } } diff --git a/Linphone/view/Item/DigitInput.qml b/Linphone/view/Item/DigitInput.qml index 255f9b32..d4919df2 100644 --- a/Linphone/view/Item/DigitInput.qml +++ b/Linphone/view/Item/DigitInput.qml @@ -4,11 +4,15 @@ import Linphone Control.TextField { id: mainItem - property int inputSize: 60 - color: activeFocus ? DefaultStyle.main1_500_main : DefaultStyle.digitInputColor - rightPadding: inputSize / 4 - leftPadding: inputSize / 4 + property int inputSize: 100 * DefaultStyle.dp + color: activeFocus ? DefaultStyle.main1_500_main : DefaultStyle.main2_500main + rightPadding: width * 0.32 + leftPadding: width * 0.32 + topPadding: height * 0.2 + bottomPadding: height * 0.2 validator: IntValidator{bottom: 0; top: 9} + // horizontalAlignment: TextInput.AlignHCenter + // verticalAlignment: TextInput.AlignVCenter // just reserve the space for the background placeholderText: "0" @@ -16,12 +20,16 @@ Control.TextField { // horizontalAlignment: Control.TextField.AlignHCenter font.family: DefaultStyle.defaultFont - font.pointSize: inputSize / 1.5 + font.pixelSize: inputSize / 2 + font.weight: 300 * DefaultStyle.dp background: Rectangle { - // id: background - border.color: mainItem.activeFocus ? DefaultStyle.main1_500_main : DefaultStyle.digitInputColor - radius: mainItem.inputSize / 8 + id: background + border.width: Math.max(DefaultStyle.dp, 1) + border.color: mainItem.activeFocus ? DefaultStyle.main1_500_main : DefaultStyle.main2_500main + radius: mainItem.inputSize * 0.15 + width: mainItem.inputSize * 0.9 + height: mainItem.inputSize } // cursorDelegate: Rectangle { // visible: mainItem.activeFocus diff --git a/Linphone/view/Item/EffectImage.qml b/Linphone/view/Item/EffectImage.qml index d5cbc61b..37eb400b 100644 --- a/Linphone/view/Item/EffectImage.qml +++ b/Linphone/view/Item/EffectImage.qml @@ -40,6 +40,6 @@ Item { source: effect maskSource: effect colorizationColor: effect2.enabled ? mainItem.colorizationColor : 'black' - colorization: effect2.enabled ? 1.0 : 0.0 + colorization: effect2.enabled ? 1.0: 0.0 } } diff --git a/Linphone/view/Item/Form/LoginForm.qml b/Linphone/view/Item/Form/LoginForm.qml index d254e750..8caeb657 100644 --- a/Linphone/view/Item/Form/LoginForm.qml +++ b/Linphone/view/Item/Form/LoginForm.qml @@ -6,27 +6,27 @@ import Linphone ColumnLayout { id: mainItem - spacing: 15 + spacing: 15 * DefaultStyle.dp signal connectionSucceed() TextInput { id: username label: "Username" mandatory: true - textInputWidth: 250 + textInputWidth: 250 * DefaultStyle.dp } TextInput { id: password label: "Password" mandatory: true hidden: true - textInputWidth: 250 + textInputWidth: 250 * DefaultStyle.dp } Text { id: errorText text: "Connection has failed. Please verify your credentials" - color: DefaultStyle.errorMessageColor + color: DefaultStyle.danger_500main opacity: 0 states: [ State{ @@ -70,7 +70,7 @@ ColumnLayout { id: lastFormLineLayout Button { text: "Log in" - Layout.rightMargin: 20 + Layout.rightMargin: 20 * DefaultStyle.dp onClicked: { username.errorMessage = "" password.errorMessage = "" @@ -90,11 +90,12 @@ ColumnLayout { visible: false } contentItem: Text { - color: DefaultStyle.grayColor + color: DefaultStyle.main2_500main text: "Forgotten password?" font{ underline: true - pointSize: DefaultStyle.indicatorMessageTextSize + pixelSize: 13 * DefaultStyle.dp + weight : 600 * DefaultStyle.dp } } onClicked: console.debug("[LoginForm]User: forgotten password button clicked") diff --git a/Linphone/view/Item/NumericPad.qml b/Linphone/view/Item/NumericPad.qml index 776d5299..ee81ef3e 100644 --- a/Linphone/view/Item/NumericPad.qml +++ b/Linphone/view/Item/NumericPad.qml @@ -10,6 +10,7 @@ Control.Popup { signal buttonPressed(string text) signal launchCall() signal wipe() + property bool closeButtonVisible: true closePolicy: Control.Popup.CloseOnEscape leftPadding: closeButton.width rightPadding: closeButton.width @@ -20,18 +21,21 @@ Control.Popup { Rectangle { id: numPadBackground anchors.fill: parent - color: DefaultStyle.numericPadBackgroundColor - radius: 10 + color: DefaultStyle.grey_100 + radius: 20 * DefaultStyle.dp } MultiEffect { id: effect anchors.fill: parent source: numPadBackground shadowEnabled: true - shadowColor: DefaultStyle.numericPadShadowColor + shadowColor: DefaultStyle.grey_1000 + shadowOpacity: 0.1 + shadowBlur: 1 } Button { id: closeButton + visible: mainItem.closeButtonVisible anchors.right: parent.right anchors.top: parent.top background: Item { @@ -41,8 +45,8 @@ Control.Popup { contentItem: Image { anchors.centerIn: parent source: AppIcons.closeX - width: 10 - sourceSize.width: 10 + width: 24 * DefaultStyle.dp + sourceSize.width: 24 * DefaultStyle.dp fillMode: Image.PreserveAspectFit } onClicked: mainItem.close() @@ -57,22 +61,25 @@ Control.Popup { model: 9 Button { id: numPadButton + Layout.alignment: Qt.AlignHCenter required property int index - implicitWidth: 40 - implicitHeight: 40 + implicitWidth: 60 * DefaultStyle.dp + implicitHeight: 60 * DefaultStyle.dp background: Rectangle { anchors.fill: parent color: numPadButton.down ? DefaultStyle.numericPadPressedButtonColor : DefaultStyle.grey_0 - radius: 20 + radius: 71 * DefaultStyle.dp } contentItem: Text { id: innerText horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter - anchors.fill: parent anchors.centerIn: parent text: index + 1 - font.pointSize: DefaultStyle.numericPadButtonTextSize + font { + pixelSize: 32 * DefaultStyle.dp + weight: 400 * DefaultStyle.dp + } } onClicked: { mainItem.buttonPressed(innerText.text) @@ -87,35 +94,38 @@ Control.Popup { ] Button { id: digitButton + Layout.alignment: Qt.AlignHCenter shadowEnabled: true - implicitWidth: 40 - implicitHeight: 40 + implicitWidth: 60 * DefaultStyle.dp + implicitHeight: 60 * DefaultStyle.dp + background: Rectangle { anchors.fill: parent color: digitButton.down ? DefaultStyle.numericPadPressedButtonColor : DefaultStyle.grey_0 - radius: 20 + radius: 71 * DefaultStyle.dp } contentItem: Item { anchors.fill: parent - anchors.centerIn: parent Text { id: pressText + height: contentHeight anchors.left: parent.left anchors.right: parent.right horizontalAlignment: Text.AlignHCenter - width: parent.width + Component.onCompleted: {if (modelData.longPressText === undefined) anchors.centerIn= parent} text: modelData.pressText - font.pointSize: DefaultStyle.numericPadButtonTextSize + font.pixelSize: 32 * DefaultStyle.dp } Text { id: longPressText + height: contentHeight anchors.left: parent.left anchors.right: parent.right - anchors.top: pressText.bottom + y: digitButton.height/2 horizontalAlignment: Text.AlignHCenter visible: modelData.longPressText ? modelData.longPressText.length > 0 : false text: modelData.longPressText ? modelData.longPressText : "" - font.pointSize: DefaultStyle.numericPadButtonSubtextSize + font.pixelSize: 22 * DefaultStyle.dp } } onClicked: mainItem.buttonPressed(pressText.text) @@ -126,40 +136,42 @@ Control.Popup { // Invisible item to move the last two buttons to the right } Button { - leftPadding: 20 - rightPadding: 20 - topPadding: 15 - bottomPadding: 15 + id: launchCallButton + implicitWidth: 75 * DefaultStyle.dp + implicitHeight: 55 * DefaultStyle.dp + Layout.alignment: Qt.AlignHCenter background: Rectangle { anchors.fill: parent - color: DefaultStyle.launchCallButtonColor - radius: 15 + color: DefaultStyle.success_500main + radius: 71 * DefaultStyle.dp } contentItem: EffectImage { id: buttonIcon image.source: AppIcons.phone - anchors.fill: parent anchors.centerIn: parent - width: 20 - height: 20 + width: 24 * DefaultStyle.dp + height: 24 * DefaultStyle.dp image.fillMode: Image.PreserveAspectFit colorizationColor: DefaultStyle.grey_0 } onClicked: mainItem.launchCall() } Button { - leftPadding: 5 - rightPadding: 5 - topPadding: 5 - bottomPadding: 5 + leftPadding: 5 * DefaultStyle.dp + rightPadding: 5 * DefaultStyle.dp + topPadding: 5 * DefaultStyle.dp + bottomPadding: 5 * DefaultStyle.dp + Layout.alignment: Qt.AlignHCenter background: Item { visible: false } contentItem: Image { source: AppIcons.backspaceFill anchors.centerIn: parent + width: 24 * DefaultStyle.dp + height: 24 * DefaultStyle.dp } onClicked: mainItem.wipe() } } -} \ No newline at end of file +} diff --git a/Linphone/view/Item/PhoneNumberComboBox.qml b/Linphone/view/Item/PhoneNumberComboBox.qml index c8f287ab..0c85f682 100644 --- a/Linphone/view/Item/PhoneNumberComboBox.qml +++ b/Linphone/view/Item/PhoneNumberComboBox.qml @@ -1,12 +1,12 @@ import QtQuick import QtQuick.Controls as Control import QtQuick.Layouts 1.0 +import QtQuick.Effects import Linphone ColumnLayout { id: mainItem property string label: "" - property int backgroundWidth: 100 readonly property string currentText: combobox.model.getAt(combobox.currentIndex) ? combobox.model.getAt(combobox.currentIndex).countryCallingCode : "" property string defaultCallingCode: "" property bool enableBackgroundColors: false @@ -15,9 +15,10 @@ ColumnLayout { visible: mainItem.label.length > 0 verticalAlignment: Text.AlignVCenter text: mainItem.label - color: combobox.activeFocus ? DefaultStyle.main1_500_main : DefaultStyle.formItemLabelColor + color: combobox.activeFocus ? DefaultStyle.main1_500_main : DefaultStyle.main2_600 font { - pointSize: DefaultStyle.formItemLabelSize + pixelSize: 13 * DefaultStyle.dp + weight: 700 * DefaultStyle.dp bold: true } } @@ -31,38 +32,62 @@ ColumnLayout { } } background: Rectangle { - implicitWidth: mainItem.backgroundWidth - implicitHeight: 30 - radius: 15 - color: mainItem.enableBackgroundColor ? DefaultStyle.formItemBackgroundColor : "transparent" + implicitWidth: mainItem.implicitWidth + implicitHeight: mainItem.implicitHeight + radius: 63 * DefaultStyle.dp + color: mainItem.enableBackgroundColor ? DefaultStyle.grey_100 : "transparent" border.color: mainItem.enableBackgroundColors ? (mainItem.errorMessage.length > 0 - ? DefaultStyle.errorMessageColor + ? DefaultStyle.danger_500main : textField.activeFocus ? DefaultStyle.main1_500_main - : DefaultStyle.formItemBorderColor) + : DefaultStyle.grey_200) : "transparent" } contentItem: Item { anchors.fill: parent readonly property var currentItem: combobox.model.getAt(combobox.currentIndex) - anchors.leftMargin: 15 + anchors.leftMargin: 15 * DefaultStyle.dp Text { id: selectedItemFlag visible: text.length > 0 + font.pixelSize: 21 * DefaultStyle.dp text: parent.currentItem ? parent.currentItem.flag : "" font.family: DefaultStyle.emojiFont - anchors.rightMargin: 5 + anchors.rightMargin: 5 * DefaultStyle.dp anchors.verticalCenter: parent.verticalCenter } + // Rectangle{ + // id: mask + // visible: false + // layer.enabled: true + // anchors.centerIn: selectedItemFlag + // radius: 600 * DefaultStyle.dp + // width: selectedItemFlag.width/2 + // height: selectedItemFlag.height/2 + // } + // MultiEffect { + // visible: selectedItemFlag.text.length > 0 + // anchors.centerIn: selectedItemFlag + // clip: true + // source: selectedItemFlag + // maskEnabled: true + // width: selectedItemFlag.width/2 + // height: selectedItemFlag.height/2 + // maskSource: mask + // } Text { - leftPadding: 5 + leftPadding: 5 * DefaultStyle.dp text: parent.currentItem ? "+" + parent.currentItem.countryCallingCode : "" - color: DefaultStyle.formItemLabelColor + color: DefaultStyle.main2_600 anchors.right: parent.right anchors.left: selectedItemFlag.right anchors.verticalCenter: parent.verticalCenter elide: Text.ElideRight + font { + pixelSize: 14 * DefaultStyle.dp + weight: 400 * DefaultStyle.dp + } } } @@ -75,60 +100,81 @@ ColumnLayout { popup: Control.Popup { id: listPopup y: combobox.height - 1 - width: combobox.width - implicitHeight: contentItem.implicitHeight - implicitWidth: contentItem.implicitWidth - padding: 1 + width: 311 * DefaultStyle.dp + height: 198 * DefaultStyle.dp contentItem: ListView { id: listView clip: true - implicitHeight: contentHeight - implicitWidth: contentWidth + anchors.fill: parent model: PhoneNumberProxy{} currentIndex: combobox.highlightedIndex >= 0 ? combobox.highlightedIndex : 0 highlightFollowsCurrentItem: true highlight: Rectangle { + anchors.left: parent.left + anchors.right: parent.right width: listView.width height: listView.height - color: DefaultStyle.comboBoxHighlightColor - radius: 15 + color: DefaultStyle.main2_300 + radius: 15 * DefaultStyle.dp y: listView.currentItem? listView.currentItem.y : 0 } delegate: Item { - width:combobox.width + width: listView.width height: combobox.height + RowLayout { + anchors.fill: parent + anchors.leftMargin: 20 * DefaultStyle.dp + Text { + id: delegateImg + visible: text.length > 0 + text: $modelData.flag + font { + pixelSize: 28 * DefaultStyle.dp + family: DefaultStyle.emojiFont + } + } - Text { - id: delegateImg - visible: text.length > 0 - text: $modelData.flag - font.family: DefaultStyle.emojiFont - anchors.left: parent.left - anchors.verticalCenter: parent.verticalCenter - anchors.leftMargin: 15 - anchors.rightMargin: 5 + Text { + id: countryText + text: $modelData.country + elide: Text.ElideRight + color: DefaultStyle.main2_500main + font { + pixelSize: 14 * DefaultStyle.dp + weight: 400 * DefaultStyle.dp + } + } + + Rectangle { + id: separator + width: 1 * DefaultStyle.dp + height: combobox.height / 2 + color: DefaultStyle.main2_500main + } + + Text { + text: "+" + $modelData.countryCallingCode + elide: Text.ElideRight + color: DefaultStyle.main2_500main + font { + pixelSize: 14 * DefaultStyle.dp + weight: 400 * DefaultStyle.dp + } + } + Item { + Layout.fillWidth: true + } } - - Text { - text: "+" + $modelData.countryCallingCode - elide: Text.ElideRight - leftPadding: 5 - anchors.left: delegateImg.right - anchors.right: parent.right - anchors.verticalCenter: parent.verticalCenter - color: DefaultStyle.formItemLabelColor - } - MouseArea { anchors.fill: parent hoverEnabled: true Rectangle { anchors.fill: parent opacity: 0.1 - radius: 15 - color: DefaultStyle.comboBoxHoverColor + radius: 15 * DefaultStyle.dp + color: DefaultStyle.main2_500main visible: parent.containsMouse } onPressed: { @@ -145,10 +191,17 @@ ColumnLayout { } background: Rectangle { - implicitWidth: mainItem.backgroundWidth - implicitHeight: 30 - radius: 15 - // color: DefaultStyle.formItemBackgroundColor + anchors.fill: parent + radius: 15 * DefaultStyle.dp + color: DefaultStyle.grey_100 + } + + MultiEffect { + anchors.fill: listPopup + source: listPopup + shadowEnabled: true + shadowColor: DefaultStyle.grey_1000 + shadowBlur: 1 } } } diff --git a/Linphone/view/Item/PhoneNumberInput.qml b/Linphone/view/Item/PhoneNumberInput.qml index db15b721..898b04ef 100644 --- a/Linphone/view/Item/PhoneNumberInput.qml +++ b/Linphone/view/Item/PhoneNumberInput.qml @@ -10,7 +10,7 @@ ColumnLayout { property string errorMessage: "" property string placeholderText : "" property bool mandatory: false - property int textInputWidth: 200 + property int textInputWidth: 200 * DefaultStyle.dp property string initialPhoneNumber readonly property string phoneNumber: textField.text readonly property string countryCode: combobox.currentText @@ -19,35 +19,35 @@ ColumnLayout { visible: label.length > 0 verticalAlignment: Text.AlignVCenter text: mainItem.label + (mainItem.mandatory ? "*" : "") - color: (combobox.hasActiveFocus || textField.hasActiveFocus) ? DefaultStyle.main1_500_main : DefaultStyle.formItemLabelColor + color: (combobox.hasActiveFocus || textField.hasActiveFocus) ? DefaultStyle.main1_500_main : DefaultStyle.main2_600 font { - pointSize: DefaultStyle.formItemLabelSize - bold: true + pixelSize: 13 * DefaultStyle.dp + weight: 700 * DefaultStyle.dp } } Rectangle { implicitWidth: mainItem.textInputWidth - implicitHeight: 30 - radius: 20 - color: DefaultStyle.formItemBackgroundColor + implicitHeight: 49 * DefaultStyle.dp + radius: 63 * DefaultStyle.dp + color: DefaultStyle.grey_100 border.color: mainItem.errorMessage.length > 0 - ? DefaultStyle.errorMessageColor + ? DefaultStyle.danger_500main : (textField.hasActiveFocus || combobox.hasActiveFocus) ? DefaultStyle.main1_500_main - : DefaultStyle.formItemBorderColor + : DefaultStyle.grey_200 RowLayout { anchors.fill: parent PhoneNumberComboBox { id: combobox - backgroundWidth: 100 + implicitWidth: 110 * DefaultStyle.dp } Rectangle { - Layout.preferredWidth: 1 + Layout.preferredWidth: 1 * DefaultStyle.dp Layout.fillHeight: true - Layout.topMargin: 5 - Layout.bottomMargin: 5 - color: DefaultStyle.defaultTextColor + Layout.topMargin: 10 * DefaultStyle.dp + Layout.bottomMargin: 10 * DefaultStyle.dp + color: DefaultStyle.main2_600 } TextInput { id: textField @@ -65,11 +65,11 @@ ColumnLayout { visible: mainItem.errorMessage.length > 0 verticalAlignment: Text.AlignVCenter text: mainItem.errorMessage - color: DefaultStyle.errorMessageColor + color: DefaultStyle.danger_500main elide: Text.ElideRight wrapMode: Text.Wrap font { - pointSize: DefaultStyle.indicatorMessageTextSize + pixelSize: 13 * DefaultStyle.dp family: DefaultStyle.defaultFont bold: true } diff --git a/Linphone/view/Item/RadioButton.qml b/Linphone/view/Item/RadioButton.qml index cd427de0..fba9e743 100644 --- a/Linphone/view/Item/RadioButton.qml +++ b/Linphone/view/Item/RadioButton.qml @@ -19,20 +19,20 @@ Control.RadioButton { } background: Rectangle { - color: DefaultStyle.formItemBackgroundColor + color: DefaultStyle.grey_100 border.color: mainItem.checked ? DefaultStyle.info_500_main : "transparent" - radius: 20 + radius: 20 * DefaultStyle.dp } indicator: RowLayout { anchors.left: parent.left - anchors.leftMargin: 13 + anchors.leftMargin: 13 * DefaultStyle.dp anchors.top: parent.top - anchors.topMargin: 8 - spacing: 4 + anchors.topMargin: 8 * DefaultStyle.dp + spacing: 4 * DefaultStyle.dp Rectangle { - implicitWidth: 16 - implicitHeight: 16 + implicitWidth: 16 * DefaultStyle.dp + implicitHeight: 16 * DefaultStyle.dp radius: implicitWidth/2 border.color: mainItem.checked ? DefaultStyle.info_500_main : DefaultStyle.main1_500_main @@ -50,7 +50,7 @@ Control.RadioButton { text: mainItem.title font.bold: true color: DefaultStyle.grey_900 - font.pointSize: DefaultStyle.radioButtonTitleSize + font.pixelSize: 16 * DefaultStyle.dp } Control.Button { padding: 0 @@ -60,8 +60,8 @@ Control.RadioButton { contentItem: Image { fillMode: Image.PreserveAspectFit source: AppIcons.info - width: 2 - height: 2 + width: 2 * DefaultStyle.dp + height: 2 * DefaultStyle.dp } } } @@ -71,27 +71,27 @@ Control.RadioButton { anchors.bottom: parent.bottom anchors.left: parent.left anchors.right: parent.right - anchors.leftMargin: 13 + anchors.leftMargin: 13 * DefaultStyle.dp RowLayout { Layout.fillWidth: true Layout.fillHeight: true - Layout.bottomMargin: 10 - Layout.rightMargin: 10 + Layout.bottomMargin: 10 * DefaultStyle.dp + Layout.rightMargin: 10 * DefaultStyle.dp Layout.alignment: Qt.AlignVCenter Text { id: innerText verticalAlignment: Text.AlignVCenter - Layout.preferredWidth: 220 - Layout.preferredHeight: 100 - font.pointSize: DefaultStyle.descriptionTextSize + Layout.preferredWidth: 220 * DefaultStyle.dp + Layout.preferredHeight: 100 * DefaultStyle.dp + font.pixelSize: 14 * DefaultStyle.dp text: mainItem.contentText Layout.fillHeight: true } Image { id: image Layout.fillHeight: true - Layout.preferredWidth: 100 - Layout.preferredHeight: 100 + Layout.preferredWidth: 100 * DefaultStyle.dp + Layout.preferredHeight: 100 * DefaultStyle.dp fillMode: Image.PreserveAspectFit source: mainItem.imgUrl } diff --git a/Linphone/view/Item/SearchBar.qml b/Linphone/view/Item/SearchBar.qml index 9b451acd..e9847d07 100644 --- a/Linphone/view/Item/SearchBar.qml +++ b/Linphone/view/Item/SearchBar.qml @@ -7,39 +7,41 @@ import Linphone Rectangle { id: mainItem property string placeholderText: "" - property int textInputWidth: 350 + property int textInputWidth: 350 * DefaultStyle.dp property color borderColor: "transparent" property string text: textField.text property var validator: RegularExpressionValidator{} - property var numericPad + property Control.Popup numericPad property alias numericPadButton: dialerButton readonly property bool hasActiveFocus: textField.activeFocus - signal numericPadButtonPressed(bool checked) onVisibleChanged: if (!visible && numericPad) numericPad.close() Connections { enabled: numericPad != undefined target: numericPad ? numericPad : null - onAboutToHide: { searchBar.numericPadButton.checked = false } - onAboutToShow: { searchBar.numericPadButton.checked = true } + onAboutToHide: { mainItem.numericPadButton.checked = false } + onAboutToShow: { mainItem.numericPadButton.checked = true } onButtonPressed: (text) => { textField.text += text } onWipe: textField.text = textField.text.slice(0, -1) } + implicitWidth: mainItem.textInputWidth - implicitHeight: 30 - radius: 20 - color: DefaultStyle.formItemBackgroundColor - border.color: textField.activeFocus ? DefaultStyle.searchBarFocusBorderColor : mainItem.borderColor + implicitHeight: 50 * DefaultStyle.dp + radius: 28 * DefaultStyle.dp + color: DefaultStyle.grey_100 + border.color: textField.activeFocus ? DefaultStyle.main2_500main : mainItem.borderColor Image { id: magnifier anchors.left: parent.left anchors.verticalCenter: parent.verticalCenter - anchors.leftMargin: 10 + anchors.leftMargin: 10 * DefaultStyle.dp source: AppIcons.magnifier + width: 20 * DefaultStyle.dp + height: 20 * DefaultStyle.dp } Control.TextField { id: textField @@ -49,9 +51,12 @@ Rectangle { placeholderText: mainItem.placeholderText width: mainItem.width - dialerButton.width echoMode: (mainItem.hidden && !dialerButton.checked) ? TextInput.Password : TextInput.Normal - font.family: DefaultStyle.defaultFont - font.pointSize: DefaultStyle.defaultFontPointSize - color: DefaultStyle.formItemLabelColor + font { + pixelSize: 14 * DefaultStyle.dp + weight: 400 * DefaultStyle.dp + family: DefaultStyle.defaultFont + } + color: DefaultStyle.main2_600 selectByMouse: true validator: mainItem.validator background: Item { @@ -60,7 +65,7 @@ Rectangle { cursorDelegate: Rectangle { visible: textField.activeFocus color: DefaultStyle.main1_500_main - width: 2 + width: 2 * DefaultStyle.dp } } Control.Button { @@ -78,7 +83,7 @@ Rectangle { anchors.top: parent.top anchors.bottom: parent.bottom anchors.right: parent.right - anchors.rightMargin: 10 + anchors.rightMargin: 10 * DefaultStyle.dp onCheckedChanged: { if (checked) mainItem.numericPad.open() else mainItem.numericPad.close() @@ -87,8 +92,6 @@ Rectangle { Control.Button { id: clearTextButton visible: textField.text.length > 0 - checkable: true - checked: false background: Rectangle { color: "transparent" } @@ -99,8 +102,8 @@ Rectangle { anchors.top: parent.top anchors.bottom: parent.bottom anchors.right: parent.right - anchors.rightMargin: 10 - onCheckedChanged: { + anchors.rightMargin: 10 * DefaultStyle.dp + onClicked: { textField.clear() } } diff --git a/Linphone/view/Item/TabBar.qml b/Linphone/view/Item/TabBar.qml index 62170f0a..b0f30edf 100644 --- a/Linphone/view/Item/TabBar.qml +++ b/Linphone/view/Item/TabBar.qml @@ -9,7 +9,7 @@ Control.TabBar { readonly property int originX: count > 0 ? itemAt(0).x : 0 - spacing: 40 + spacing: 40 * DefaultStyle.dp wheelEnabled: true background: Quick.Item { id: tabBarBackground @@ -17,8 +17,8 @@ Control.TabBar { Quick.Rectangle { id: barBG - height: 4 - color: DefaultStyle.lightGrayColor + height: 4 * DefaultStyle.dp + color: DefaultStyle.grey_200 anchors.bottom: parent.bottom width: parent.width } @@ -58,7 +58,7 @@ Control.TabBar { Quick.Rectangle { visible: mainItem.currentIndex === index - height: 4 + height: 4 * DefaultStyle.dp color: DefaultStyle.main1_500_main anchors.bottom: parent.bottom anchors.left: parent.left @@ -70,14 +70,14 @@ Control.TabBar { id: tabText anchors.fill: parent font.bold: true - color: mainItem.currentIndex === index ? DefaultStyle.defaultTextColor : DefaultStyle.disableTextColor + color: mainItem.currentIndex === index ? DefaultStyle.main2_600 : DefaultStyle.main2_400 font.family: DefaultStyle.defaultFont - font.pointSize: DefaultStyle.tabButtonTextSize + font.pixelSize: 22 * DefaultStyle.dp elide: Quick.Text.ElideRight maximumLineCount: 1 text: txtMeter.elidedText // width: Math.min(txtMeter.advanceWidth, Math.max(50, mainItem.width - (x - mainItem.x))) - bottomPadding: 5 + bottomPadding: 5 * DefaultStyle.dp } Quick.TextMetrics { diff --git a/Linphone/view/Item/Text.qml b/Linphone/view/Item/Text.qml index 46878fd7..0b0b6087 100644 --- a/Linphone/view/Item/Text.qml +++ b/Linphone/view/Item/Text.qml @@ -8,9 +8,12 @@ Quick.Text { id: innerItem // Layout.preferredWidth: mainItem.width // width: mainItem.width - font.family: DefaultStyle.defaultFont - font.pointSize: DefaultStyle.defaultFontPointSize - color: DefaultStyle.defaultTextColor + font { + family: DefaultStyle.defaultFont + pixelSize: 10 * DefaultStyle.dp + weight: 400 * DefaultStyle.dp + } + color: DefaultStyle.main2_600 wrapMode: Quick.Text.Wrap elide: Quick.Text.ElideRight transformOrigin: Quick.Item.TopLeft diff --git a/Linphone/view/Item/TextInput.qml b/Linphone/view/Item/TextInput.qml index 94eb31c5..14544ce5 100644 --- a/Linphone/view/Item/TextInput.qml +++ b/Linphone/view/Item/TextInput.qml @@ -11,7 +11,7 @@ ColumnLayout { property string placeholderText: "" property bool mandatory: false property bool hidden: false - property int textInputWidth: 200 + property int textInputWidth: 346 * DefaultStyle.dp property var validator: RegularExpressionValidator{} property bool fillWidth: false property bool enableBackgroundColors: true @@ -32,14 +32,14 @@ ColumnLayout { visible: mainItem.label.length > 0 verticalAlignment: Text.AlignVCenter text: mainItem.label + (mainItem.mandatory ? "*" : "") - color: textField.activeFocus ? DefaultStyle.main1_500_main : DefaultStyle.formItemLabelColor + color: textField.activeFocus ? DefaultStyle.main1_500_main : DefaultStyle.main2_600 elide: Text.ElideRight wrapMode: Text.Wrap maximumLineCount: 1 font { - pointSize: DefaultStyle.formItemLabelSize + pixelSize: 13 * DefaultStyle.dp family: DefaultStyle.defaultFont - bold: true + weight: 700 * DefaultStyle.dp } Layout.preferredWidth: mainItem.textInputWidth } @@ -51,15 +51,15 @@ ColumnLayout { Layout.fillWidth = true } implicitWidth: mainItem.textInputWidth - implicitHeight: 30 - radius: 20 - color: mainItem.enableBackgroundColors ? DefaultStyle.formItemBackgroundColor : "transparent" + implicitHeight: 49 * DefaultStyle.dp + radius: 79 * DefaultStyle.dp + color: mainItem.enableBackgroundColors ? DefaultStyle.grey_100 : "transparent" border.color: mainItem.enableBackgroundColors ? (mainItem.errorMessage.length > 0 - ? DefaultStyle.errorMessageColor + ? DefaultStyle.danger_500main : textField.activeFocus ? DefaultStyle.main1_500_main - : DefaultStyle.formItemBorderColor) + : DefaultStyle.grey_200) : "transparent" Control.TextField { id: textField @@ -69,8 +69,11 @@ ColumnLayout { placeholderText: mainItem.placeholderText echoMode: (mainItem.hidden && !eyeButton.checked) ? TextInput.Password : TextInput.Normal font.family: DefaultStyle.defaultFont - font.pointSize: DefaultStyle.defaultFontPointSize - color: DefaultStyle.formItemLabelColor + font { + pixelSize: 14 * DefaultStyle.dp + weight: 400 * DefaultStyle.dp + } + color: DefaultStyle.main2_600 selectByMouse: true validator: mainItem.validator background: Item { @@ -79,7 +82,7 @@ ColumnLayout { cursorDelegate: Rectangle { visible: textField.activeFocus color: DefaultStyle.main1_500_main - width: 2 + width: 2 * DefaultStyle.dp } } Control.Button { @@ -102,12 +105,12 @@ ColumnLayout { visible: mainItem.errorMessage.length > 0 verticalAlignment: Text.AlignVCenter text: mainItem.errorMessage - color: DefaultStyle.errorMessageColor + color: DefaultStyle.danger_500main elide: Text.ElideRight wrapMode: Text.Wrap // maximumLineCount: 1 font { - pointSize: DefaultStyle.indicatorMessageTextSize + pixelSize: 13 * DefaultStyle.dp family: DefaultStyle.defaultFont bold: true } diff --git a/Linphone/view/Item/ToolTip.qml b/Linphone/view/Item/ToolTip.qml index a9f74540..3c769e54 100644 --- a/Linphone/view/Item/ToolTip.qml +++ b/Linphone/view/Item/ToolTip.qml @@ -9,12 +9,12 @@ Control.ToolTip { background: Rectangle { id: tooltipBackground opacity: 0.7 - color: DefaultStyle.tooltipBackgroundColor - radius: 15 + color: DefaultStyle.main2_200 + radius: 15 * DefaultStyle.dp } contentItem: Text { text: mainItem.text - color: DefaultStyle.defaultTextColor + color: DefaultStyle.main2_600 width: tooltipBackground.width wrapMode: Text.Wrap elide: Text.ElideRight diff --git a/Linphone/view/Item/VerticalTabBar.qml b/Linphone/view/Item/VerticalTabBar.qml index 110cc8e4..595cb783 100644 --- a/Linphone/view/Item/VerticalTabBar.qml +++ b/Linphone/view/Item/VerticalTabBar.qml @@ -7,8 +7,8 @@ import Linphone Control.TabBar { id: mainItem - spacing: 15 - topPadding: 20 + spacing: 15 * DefaultStyle.dp + topPadding: 20 * DefaultStyle.dp property var model @@ -34,7 +34,7 @@ Control.TabBar { Rectangle { anchors.fill: parent color: DefaultStyle.main1_500_main - radius: 25 + radius: 25 * DefaultStyle.dp } Rectangle { color: DefaultStyle.main1_500_main @@ -64,7 +64,7 @@ Control.TabBar { width: tabButton.width EffectImage { id: buttonIcon - property int buttonSize: 20 + property int buttonSize: 24 * DefaultStyle.dp image.source: mainItem.currentIndex === index ? modelData.selectedIcon : modelData.icon Layout.preferredWidth: buttonSize Layout.preferredHeight: buttonSize @@ -76,16 +76,16 @@ Control.TabBar { id: buttonText text: modelData.label font { - bold: mainItem.currentIndex === index - pointSize: DefaultStyle.verticalTabButtonTextSize + weight: mainItem.currentIndex === index ? 800 * DefaultStyle.dp : 400 * DefaultStyle.dp + pixelSize: 9 * DefaultStyle.dp } - color: DefaultStyle.verticalTabBarTextColor + color: DefaultStyle.grey_0 Layout.fillWidth: true Layout.preferredHeight: txtMeter.height Layout.alignment: Qt.AlignHCenter horizontalAlignment: Text.AlignHCenter - leftPadding: 3 - rightPadding: 3 + leftPadding: 3 * DefaultStyle.dp + rightPadding: 3 * DefaultStyle.dp } } TextMetrics { @@ -93,7 +93,7 @@ Control.TabBar { text: modelData.label font: buttonText.font Component.onCompleted: { - font.bold= true + font.weight = 800 * DefaultStyle.dp mainItem.implicitWidth = Math.max(mainItem.implicitWidth, advanceWidth + buttonIcon.buttonSize) } } diff --git a/Linphone/view/Page/Login/LoginLayout.qml b/Linphone/view/Page/Login/LoginLayout.qml deleted file mode 100644 index 25fbdbbc..00000000 --- a/Linphone/view/Page/Login/LoginLayout.qml +++ /dev/null @@ -1,70 +0,0 @@ -/** -* Qml template used for welcome and login/register pages -**/ - -import QtQuick 2.15 -import QtQuick.Layouts 1.3 -import QtQuick.Controls 2.2 as Control - -import Linphone - -Item { - id: mainItem - property alias titleContent : titleLayout.children - property alias centerContent : centerLayout.children - - ColumnLayout { - anchors.fill: parent - Layout.fillHeight: true - ColumnLayout { - Layout.rightMargin: 25 - RowLayout { - Layout.fillWidth: true - Layout.preferredHeight: 50 - Layout.topMargin: 20 - Layout.bottomMargin: 20 - Layout.alignment: Qt.AlignRight | Qt.AlignTop - Control.Button { - background: Rectangle { - color: "transparent" - } - contentItem: Image { - fillMode: Image.PreserveAspectFit - source: AppIcons.info - } - onClicked: console.debug("[LoginLayout] User: open about popup") - } - - Text { - Layout.alignment: Qt.AlignRight |Qt.AlignVCenter - text: "About" - font.pixelSize: 12 - color: DefaultStyle.grayColor - } - } - RowLayout { - id: titleLayout - Layout.leftMargin: 40 - Layout.bottomMargin: 20 - } - ColumnLayout { - id: centerLayout - Layout.leftMargin: 40 - Layout.fillHeight: true - Layout.topMargin: 20 - } - } - - RowLayout { - Layout.alignment: Qt.AlignBottom - Image { - Layout.minimumHeight: 80 - Layout.fillWidth: true - source: AppIcons.belledonne - fillMode: Image.Stretch - } - - } - } -} - diff --git a/Linphone/view/Page/Login/LoginPage.qml b/Linphone/view/Page/Login/LoginPage.qml index 1f015173..8cfeb1fe 100644 --- a/Linphone/view/Page/Login/LoginPage.qml +++ b/Linphone/view/Page/Login/LoginPage.qml @@ -33,8 +33,10 @@ LoginLayout { } Text { text: "Login" - font.pointSize: DefaultStyle.title2FontPointSize - font.bold: true + font { + pixelSize: 36 * DefaultStyle.dp + weight: 800 * DefaultStyle.dp + } scaleLettersFactor: 1.1 } Item { @@ -43,11 +45,11 @@ LoginLayout { Text { Layout.rightMargin: 15 * DefaultStyle.dp text: "No account yet ?" - font.pointSize: DefaultStyle.indicatorMessageTextSize + font.pixelSize: 14 * DefaultStyle.dp + font.weight: 400 * DefaultStyle.dp } Button { Layout.alignment: Qt.AlignRight - inversedColors: true text: "Register" onClicked: { console.debug("[LoginPage] User: go to register") diff --git a/Linphone/view/Page/Login/RegisterCheckingPage.qml b/Linphone/view/Page/Login/RegisterCheckingPage.qml index b632f12f..eef4abe1 100644 --- a/Linphone/view/Page/Login/RegisterCheckingPage.qml +++ b/Linphone/view/Page/Login/RegisterCheckingPage.qml @@ -11,10 +11,10 @@ LoginLayout { titleContent: RowLayout { Control.Button { - Layout.preferredHeight: 40 - Layout.preferredWidth: 40 - icon.width: 40 - icon.height: 40 + Layout.preferredHeight: 40 * DefaultStyle.dp + Layout.preferredWidth: 40 * DefaultStyle.dp + icon.width: 40 * DefaultStyle.dp + icon.height: 40 * DefaultStyle.dp icon.source: AppIcons.returnArrow background: Rectangle { color: "transparent" @@ -31,11 +31,13 @@ LoginLayout { Text { wrapMode: Text.NoWrap text: { - var completeString = (mainItem.email.length > 0) ? "email" : "phone number" - text = "Register | Register with your " + completeString + var completeString = (mainItem.email.length > 0) ? qsTr("email") : qsTr("numéro") + text = qsTr("Inscription | Confirmer votre ") + completeString + } + font { + pixelSize: 36 * DefaultStyle.dp + weight: 800 * DefaultStyle.dp } - font.pointSize: DefaultStyle.title2FontPointSize - font.bold: true scaleLettersFactor: 1.1 } Item { @@ -44,22 +46,26 @@ LoginLayout { } centerContent: ColumnLayout { - spacing: 2 + spacing: 2 * DefaultStyle.dp Text { Layout.alignment: Qt.AlignTop font.bold: true - font.pointSize: DefaultStyle.defaultFontPointSize - color: DefaultStyle.questionTextColor + font.pixelSize: DefaultStyle.defaultFontPointSize + color: DefaultStyle.main2_700 text: { var completeString = (mainItem.email.length > 0) ? ("email " + mainItem.email) : ("phone number " + mainItem.phoneNumber) text = "We have sent a verification code on your " + completeString + "
Please enter the verification code below:" } + font { + pixelSize: 22 * DefaultStyle.dp + weight: 800 * DefaultStyle.dp + } } RowLayout { Layout.fillWidth: true - Layout.margins: 10 + Layout.margins: 10 * DefaultStyle.dp ColumnLayout { - spacing: 70 + spacing: 70 * DefaultStyle.dp RowLayout { Repeater { model: 4 @@ -75,17 +81,18 @@ LoginLayout { if (index > 0) nextItemInFocusChain(false).forceActiveFocus() } - Layout.margins: 10 + Layout.margins: 10 * DefaultStyle.dp } } } RowLayout { Layout.alignment: Qt.AlignBottom Text { - Layout.rightMargin: 15 + Layout.rightMargin: 15 * DefaultStyle.dp text: "Didn't receive the code ?" - color: DefaultStyle.questionTextColor - font.pointSize: DefaultStyle.indicatorMessageTextSize + color: DefaultStyle.main2_700 + font.pixelSize: 14 * DefaultStyle.dp + font.weight: 400 * DefaultStyle.dp } Button { Layout.alignment: Qt.AlignRight @@ -101,8 +108,8 @@ LoginLayout { Layout.fillWidth: true } Image { - Layout.rightMargin: 40 - Layout.preferredWidth: 300 + Layout.rightMargin: 40 * DefaultStyle.dp + Layout.preferredWidth: 300 * DefaultStyle.dp fillMode: Image.PreserveAspectFit source: AppIcons.verif_page_image } diff --git a/Linphone/view/Page/Login/RegisterPage.qml b/Linphone/view/Page/Login/RegisterPage.qml index 4075caf8..6b8c9e58 100644 --- a/Linphone/view/Page/Login/RegisterPage.qml +++ b/Linphone/view/Page/Login/RegisterPage.qml @@ -18,9 +18,11 @@ LoginLayout { } Text { Layout.preferredWidth: width - text: "Register" - font.pointSize: DefaultStyle.title2FontPointSize - font.bold: true + text: qsTr("Register") + font { + pixelSize: 36 * DefaultStyle.dp + weight: 800 * DefaultStyle.dp + } wrapMode: Text.NoWrap scaleLettersFactor: 1.1 } @@ -28,10 +30,13 @@ LoginLayout { Layout.fillWidth: true } Text { - Layout.rightMargin: 15 - color: DefaultStyle.questionTextColor - text: "Already have an account ?" - font.pointSize: DefaultStyle.indicatorMessageTextSize + Layout.rightMargin: 15 * DefaultStyle.dp + color: DefaultStyle.main2_700 + text: qsTr("Already have an account ?") + font { + pixelSize: 14 * DefaultStyle.dp + weight: 400 * DefaultStyle.dp + } } Button { // Layout.alignment: Qt.AlignRight @@ -45,6 +50,7 @@ LoginLayout { } centerContent: ColumnLayout { + Layout.topMargin: 40 * DefaultStyle.dp TabBar { Layout.fillWidth: true id: bar @@ -56,12 +62,12 @@ LoginLayout { ColumnLayout { Layout.fillWidth: true Layout.fillHeight: true - spacing: 15 + spacing: 15 * DefaultStyle.dp RowLayout { TextInput { label: "Username" mandatory: true - textInputWidth: 250 + textInputWidth: 346 * DefaultStyle.dp } ComboBox { label: " " @@ -74,7 +80,7 @@ LoginLayout { label: "Phone number" mandatory: true placeholderText: "Phone number" - textInputWidth: 250 + textInputWidth: 346 * DefaultStyle.dp } RowLayout { ColumnLayout { @@ -82,12 +88,13 @@ LoginLayout { label: "Password" mandatory: true hidden: true - textInputWidth: 250 + textInputWidth: 346 * DefaultStyle.dp } Text { text: "The password must contain 6 characters minimum" font { - pointSize: DefaultStyle.indicatorMessageTextSize + pixelSize: 12 * DefaultStyle.dp + weight: 300 * DefaultStyle.dp } } } @@ -96,12 +103,13 @@ LoginLayout { label: "Confirm password" mandatory: true hidden: true - textInputWidth: 250 + textInputWidth: 346 * DefaultStyle.dp } Text { text: "The password must contain 6 characters minimum" font { - pointSize: DefaultStyle.indicatorMessageTextSize + pixelSize: 12 * DefaultStyle.dp + weight: 300 * DefaultStyle.dp } } } @@ -117,7 +125,7 @@ LoginLayout { CheckBox { } Text { - Layout.preferredWidth: 450 + Layout.preferredWidth: 450 * DefaultStyle.dp text: "I accept the Terms and Conditions : Read the Terms and Conditions.
I accept the Privacy policy : Read the Privacy policy." } } @@ -133,8 +141,8 @@ LoginLayout { Layout.fillWidth: true } Image { - Layout.rightMargin: 40 - Layout.preferredWidth: 300 + Layout.rightMargin: 40 * DefaultStyle.dp + Layout.preferredWidth: 300 * DefaultStyle.dp fillMode: Image.PreserveAspectFit source: AppIcons.loginImage } @@ -143,12 +151,12 @@ LoginLayout { ColumnLayout { Layout.fillWidth: true Layout.fillHeight: true - spacing: 15 + spacing: 15 * DefaultStyle.dp RowLayout { TextInput { label: "Username" mandatory: true - textInputWidth: 250 + textInputWidth: 346 * DefaultStyle.dp } ComboBox { // if we don't set a label this item is offset @@ -156,13 +164,14 @@ LoginLayout { label: " " enabled: false modelList: [{text:"@sip.linphone.org"}] + backgroundWidth: 154 * DefaultStyle.dp } } TextInput { id: emailInput label: "Email" mandatory: true - textInputWidth: 250 + textInputWidth: 346 * DefaultStyle.dp } RowLayout { ColumnLayout { @@ -171,12 +180,13 @@ LoginLayout { label: "Password" mandatory: true hidden: true - textInputWidth: 250 + textInputWidth: 346 * DefaultStyle.dp } Text { text: "The password must contain 6 characters minimum" font { - pointSize: DefaultStyle.indicatorMessageTextSize + pixelSize: 12 * DefaultStyle.dp + weight: 300 * DefaultStyle.dp } } } @@ -186,12 +196,13 @@ LoginLayout { label: "Confirm password" mandatory: true hidden: true - textInputWidth: 250 + textInputWidth: 346 * DefaultStyle.dp } Text { text: "The password must contain 6 characters minimum" font { - pointSize: DefaultStyle.indicatorMessageTextSize + pixelSize: 12 * DefaultStyle.dp + weight: 300 * DefaultStyle.dp } } } @@ -207,7 +218,7 @@ LoginLayout { CheckBox { } Text { - Layout.preferredWidth: 450 + Layout.preferredWidth: 450 * DefaultStyle.dp text: "I accept the Terms and Conditions : Read the Terms and Conditions.
I accept the Privacy policy : Read the Privacy policy." } } @@ -227,8 +238,8 @@ LoginLayout { Layout.fillWidth: true } Image { - Layout.rightMargin: 40 - Layout.preferredWidth: 300 + Layout.rightMargin: 40 * DefaultStyle.dp + Layout.preferredWidth: 300 * DefaultStyle.dp fillMode: Image.PreserveAspectFit source: AppIcons.loginImage } diff --git a/Linphone/view/Page/Login/SIPLoginPage.qml b/Linphone/view/Page/Login/SIPLoginPage.qml index b4898af1..3b0e6c9d 100644 --- a/Linphone/view/Page/Login/SIPLoginPage.qml +++ b/Linphone/view/Page/Login/SIPLoginPage.qml @@ -11,14 +11,17 @@ LoginLayout { signal connectionSucceed() titleContent: RowLayout { - Control.Button { - Layout.preferredHeight: 40 - Layout.preferredWidth: 40 - icon.width: 40 - icon.height: 40 - icon.source: AppIcons.returnArrow - background: Rectangle { - color: "transparent" + Button { + Layout.preferredHeight: 24 * DefaultStyle.dp + Layout.preferredWidth: 24 * DefaultStyle.dp + contentItem: Image { + anchors.fill: parent + source: AppIcons.returnArrow + width: 24 * DefaultStyle.dp + height: 24 * DefaultStyle.dp + } + background: Item { + anchors.fill: parent } onClicked: { console.debug("[SIPLoginPage] User: return") @@ -28,25 +31,34 @@ LoginLayout { Image { fillMode: Image.PreserveAspectFit source: AppIcons.profile + Layout.preferredHeight: 34 * DefaultStyle.dp + Layout.preferredWidth: 34 * DefaultStyle.dp + sourceSize.width: 34 * DefaultStyle.dp + sourceSize.height: 34 * DefaultStyle.dp } Text { - text: "Use a SIP Account" - font.pointSize: DefaultStyle.title2FontPointSize - font.bold: true + text: qsTr("Compte SIP tiers") + font { + pixelSize: 36 * DefaultStyle.dp + weight: 800 * DefaultStyle.dp + } scaleLettersFactor: 1.1 } Item { Layout.fillWidth: true } Text { - Layout.rightMargin: 15 - text: "No account yet ?" - font.pointSize: DefaultStyle.indicatorMessageTextSize + Layout.rightMargin: 15 * DefaultStyle.dp + text: qsTr("No account yet ?") + font { + pixelSize: 14 * DefaultStyle.dp + weight: 400 * DefaultStyle.dp + } } Button { Layout.alignment: Qt.AlignRight inversedColors: true - text: "Register" + text: qsTr("Register") onClicked: { console.debug("[SIPLoginPage] User: go to register page") mainItem.goToRegister() @@ -54,173 +66,175 @@ LoginLayout { } } - centerContent: ColumnLayout { + centerContent: RowLayout { signal useSIPButtonClicked() - RowLayout { - Control.StackView { - id: rootStackView - initialItem: firstItem - Layout.preferredWidth: 280 - Layout.fillHeight: true - Layout.alignment: Qt.AlignTop - } - Component { - id: firstItem - ColumnLayout { - ColumnLayout { - Layout.bottomMargin: 60 - Text { - Layout.fillWidth: true - Layout.preferredWidth: rootStackView.width - width: rootStackView.width - wrapMode: Text.WordWrap - color: DefaultStyle.darkGrayColor - font.pointSize: DefaultStyle.descriptionTextSize - text: "

Some features require a Linphone account, such as group messaging, video conferences...

-

These features are hidden when you register with a third party SIP account.

-

To enable it in a commercial projet, please contact us.

" - } - Button { - text: "linphone.org/contact" - textSize: 8 - inversedColors: true - leftPadding: 8 - rightPadding: 8 - topPadding: 5 - bottomPadding: 5 - onClicked: { - Qt.openUrlExternally(ConstantsCpp.ContactUrl) - } - } + Layout.topMargin: 85 * DefaultStyle.dp + Control.StackView { + id: rootStackView + initialItem: firstItem + Layout.preferredWidth: 361 * DefaultStyle.dp + Layout.fillHeight: true + Layout.alignment: Qt.AlignVCenter + clip: true + } + Component { + id: firstItem + ColumnLayout { + Layout.alignment: Qt.AlignVCenter + spacing: 10 * DefaultStyle.dp + // Layout.bottomMargin: 20 * DefaultStyle.dp + Text { + Layout.fillWidth: true + Layout.preferredWidth: rootStackView.width + width: rootStackView.width + wrapMode: Text.WordWrap + color: DefaultStyle.main2_600 + font { + pixelSize: 14 * DefaultStyle.dp + weight: 400* DefaultStyle.dp } - ColumnLayout { - spacing: 10 - Layout.bottomMargin: 20 - Button { - Layout.fillWidth: true - inversedColors: true - text: "I prefer creating an account" - onClicked: { - console.debug("[SIPLoginPage] User: click register") - mainItem.goToRegister() - } - } - Button { - Layout.fillWidth: true - text: "I understand" - onClicked: { - rootStackView.replace(secondItem) - } - } - } - Item { - Layout.fillHeight: true + text: "

Some features require a Linphone account, such as group messaging, video conferences...

+

These features are hidden when you register with a third party SIP account.

+

To enable it in a commercial projet, please contact us.

" + } + Button { + text: "linphone.org/contact" + textSize: 13 * DefaultStyle.dp + inversedColors: true + leftPadding: 12 * DefaultStyle.dp + rightPadding: 12 * DefaultStyle.dp + topPadding: 6 * DefaultStyle.dp + bottomPadding: 6 * DefaultStyle.dp + onClicked: { + Qt.openUrlExternally(ConstantsCpp.ContactUrl) } } - } - Component { - id: secondItem - ColumnLayout { - spacing: 10 - TextInput { - id: username - label: "Username" - mandatory: true - textInputWidth: 250 - } - TextInput { - id: password - label: "Password" - mandatory: true - hidden: true - textInputWidth: 250 - } - TextInput { - id: domain - label: "Domain" - mandatory: true - textInputWidth: 250 - } - TextInput { - id: displayName - label: "Display Name" - textInputWidth: 250 - } - ComboBox { - label: "Transport" - backgroundWidth: 250 - modelList:[ "TCP", "UDP", "TLS"] - } - - Text { - id: errorText - text: "Connection has failed. Please verify your credentials" - color: DefaultStyle.errorMessageColor - opacity: 0 - states: [ - State{ - name: "Visible" - PropertyChanges{target: errorText; opacity: 1.0} - }, - State{ - name:"Invisible" - PropertyChanges{target: errorText; opacity: 0.0} - } - ] - transitions: [ - Transition { - from: "Visible" - to: "Invisible" - NumberAnimation { - property: "opacity" - duration: 1000 - } - } - ] - Timer { - id: autoHideErrorMessage - interval: 2500 - onTriggered: errorText.state = "Invisible" - } - Connections { - target: LoginPageCpp - onRegistrationStateChanged: { - if (LoginPageCpp.registrationState === LinphoneEnums.RegistrationState.Failed) { - errorText.state = "Visible" - autoHideErrorMessage.restart() - } else if (LoginPageCpp.registrationState === LinphoneEnums.RegistrationState.Ok) { - mainItem.connectionSucceed() - } - } - } - } - - Button { - Layout.topMargin: 20 - Layout.bottomMargin: 20 - - text: "Log in" - onClicked: { - console.debug("[SIPLoginPage] User: Log in") - LoginPageCpp.login(username.inputText, password.inputText); - } - } - Item { - Layout.fillHeight: true + Item { + Layout.preferredHeight: 85 * DefaultStyle.dp + } + Button { + Layout.fillWidth: true + inversedColors: true + text: "I prefer creating an account" + onClicked: { + console.debug("[SIPLoginPage] User: click register") + mainItem.goToRegister() } } - + Button { + Layout.fillWidth: true + text: "I understand" + onClicked: { + rootStackView.replace(secondItem) + } + } + Item { + Layout.fillHeight: true + } } - Item { - Layout.fillWidth: true - } - Image { - Layout.alignment: Qt.AlignBottom - Layout.rightMargin: 40 - Layout.preferredWidth: 300 - fillMode: Image.PreserveAspectFit - source: AppIcons.loginImage + } + Component { + id: secondItem + ColumnLayout { + spacing: 10 * DefaultStyle.dp + TextInput { + id: username + label: "Username" + mandatory: true + textInputWidth: 250 * DefaultStyle.dp + } + TextInput { + id: password + label: "Password" + mandatory: true + hidden: true + textInputWidth: 250 * DefaultStyle.dp + } + TextInput { + id: domain + label: "Domain" + mandatory: true + textInputWidth: 250 * DefaultStyle.dp + } + TextInput { + id: displayName + label: "Display Name" + textInputWidth: 250 * DefaultStyle.dp + } + ComboBox { + label: "Transport" + backgroundWidth: 250 * DefaultStyle.dp + modelList:[ "TCP", "UDP", "TLS"] + } + + Text { + id: errorText + text: "Connection has failed. Please verify your credentials" + color: DefaultStyle.danger_500main + opacity: 0 + states: [ + State{ + name: "Visible" + PropertyChanges{target: errorText; opacity: 1.0} + }, + State{ + name:"Invisible" + PropertyChanges{target: errorText; opacity: 0.0} + } + ] + transitions: [ + Transition { + from: "Visible" + to: "Invisible" + NumberAnimation { + property: "opacity" + duration: 1000 + } + } + ] + Timer { + id: autoHideErrorMessage + interval: 2500 + onTriggered: errorText.state = "Invisible" + } + Connections { + target: LoginPageCpp + onRegistrationStateChanged: { + if (LoginPageCpp.registrationState === LinphoneEnums.RegistrationState.Failed) { + errorText.state = "Visible" + autoHideErrorMessage.restart() + } else if (LoginPageCpp.registrationState === LinphoneEnums.RegistrationState.Ok) { + mainItem.connectionSucceed() + } + } + } + } + + Button { + Layout.topMargin: 20 * DefaultStyle.dp + Layout.bottomMargin: 20 * DefaultStyle.dp + + text: "Log in" + onClicked: { + console.debug("[SIPLoginPage] User: Log in") + LoginPageCpp.login(username.inputText, password.inputText); + } + } + Item { + Layout.fillHeight: true + } } + + } + Item { + Layout.fillWidth: true + } + Image { + Layout.alignment: Qt.AlignVCenter + Layout.rightMargin: 40 * DefaultStyle.dp + Layout.preferredWidth: 395 * DefaultStyle.dp + fillMode: Image.PreserveAspectFit + source: AppIcons.loginImage } Item { Layout.fillHeight: true diff --git a/Linphone/view/Page/Login/SecurityModePage.qml b/Linphone/view/Page/Login/SecurityModePage.qml index 9a85159f..11604d51 100644 --- a/Linphone/view/Page/Login/SecurityModePage.qml +++ b/Linphone/view/Page/Login/SecurityModePage.qml @@ -15,27 +15,31 @@ LoginLayout { ColumnLayout { Text { text: qsTr("Choisir votre mode") - font.pointSize: DefaultStyle.title2FontPointSize - font.bold: true - scaleLettersFactor: 1.1 + font { + pixelSize: 36 * DefaultStyle.dp + weight: 800 * DefaultStyle.dp + } } Text { text: qsTr("Vous pourrez changer de mode plus tard.") font.bold: true - scaleLettersFactor: 1.1 + font { + pixelSize: 14 * DefaultStyle.dp + weight: 400 * DefaultStyle.dp + } } } } centerContent: ColumnLayout { - spacing: 80 - Layout.topMargin: 70 + spacing: 80 * DefaultStyle.dp + Layout.topMargin: 70 * DefaultStyle.dp Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter RowLayout { id: radioButtonsLayout Layout.fillWidth: true Layout.alignment: Qt.AlignHCenter - spacing: 70 + spacing: 70 * DefaultStyle.dp Repeater { model: [ {checked: true, title: qsTr("Chiffrement de bout en bout"), text: qsTr("Ce mode vous garanti la confidentialité de tous vos échanges. Notre technologie de chiffrement de bout en bout assure un niveau de sécurité maximal pour tous vos échanges."), imgUrl: AppIcons.chiffrement}, @@ -56,8 +60,8 @@ LoginLayout { id: continueButton property int selectedIndex: 0 Layout.alignment: Qt.AlignHCenter - leftPadding: 100 - rightPadding: 100 + leftPadding: 100 * DefaultStyle.dp + rightPadding: 100 * DefaultStyle.dp text: qsTr("Continuer") onClicked: mainItem.modeSelected(selectedIndex) } diff --git a/Linphone/view/Page/Login/WelcomePage.qml b/Linphone/view/Page/Login/WelcomePage.qml index 1ed308c1..78114e68 100644 --- a/Linphone/view/Page/Login/WelcomePage.qml +++ b/Linphone/view/Page/Login/WelcomePage.qml @@ -11,20 +11,24 @@ LoginLayout { titleContent: RowLayout { Text { id: welcome - text: "Welcome" - color: DefaultStyle.titleColor - font.pointSize: DefaultStyle.title1FontPointSize - font.bold: true + text: qsTr("Bienvenue") + color: DefaultStyle.main2_800 + font { + pixelSize: 96 * DefaultStyle.dp + weight: 800 * DefaultStyle.dp + } scaleLettersFactor: 1.1 } Text { Layout.alignment: Qt.AlignBottom - Layout.leftMargin: 10 - Layout.bottomMargin: 5 - color: DefaultStyle.titleColor - text: "in Linphone" - font.pointSize: DefaultStyle.title2FontPointSize - font.bold: true + Layout.leftMargin: 10 * DefaultStyle.dp + Layout.bottomMargin: 5 * DefaultStyle.dp + color: DefaultStyle.main2_800 + text: qsTr("sur Linphone") + font { + pixelSize: 36 * DefaultStyle.dp + weight: 800 * DefaultStyle.dp + } scaleLettersFactor: 1.1 } Item { @@ -37,8 +41,12 @@ LoginLayout { visible: false } contentItem: Text { - text: "Skip" - font.underline: true + text: qsTr("Passer") + font { + underline: true + pixelSize: 13 * DefaultStyle.dp + weight: 600 * DefaultStyle.dp + } } onClicked: { console.debug("[WelcomePage] User: Click skip") @@ -47,14 +55,18 @@ LoginLayout { } } centerContent: ColumnLayout { - Layout.bottomMargin: 20 + id: centerLayout + Layout.bottomMargin: 20 * DefaultStyle.dp + Layout.fillWidth: false + Layout.fillHeight: false + Layout.leftMargin: 250 * DefaultStyle.dp + Layout.topMargin: 165 * DefaultStyle.dp RowLayout { - Layout.leftMargin: 100 Image { - Layout.rightMargin: 40 - Layout.topMargin: 20 - Layout.preferredWidth: 100 - Layout.maximumWidth: 100 + id: carouselImg + Layout.rightMargin: 40 * DefaultStyle.dp + Layout.preferredWidth: 153.22 * DefaultStyle.dp + Layout.preferredHeight: 156 * DefaultStyle.dp fillMode: Image.PreserveAspectFit source: carousel.currentIndex == 0 ? AppIcons.welcomeLinphoneLogo : carousel.currentIndex == 1 ? AppIcons.welcomeLock : AppIcons.welcomeOpenSource } @@ -64,46 +76,45 @@ LoginLayout { itemsList: Repeater { id: slideRepeater model: [ - {title: "Linphone", text: "Une application de communication sécurisée,
open source et française."}, - {title: "Sécurisé", text: "Vos communications sont en sécurité grâce aux
Chiffrement de bout en bout."}, - {title: "Open Source", text: "Une application open source et un service gratuit
depuis 2001"}, - ] - Item { - ColumnLayout { - anchors.verticalCenter: parent.verticalCenter - spacing: 15 - Text { - text: modelData.title - font.bold: true - font.pixelSize: 20 - scaleLettersFactor: 1.1 - } - Text { - Layout.maximumWidth: 361 - wrapMode: Text.WordWrap - font.pixelSize: 11 - text: modelData.text + {title: qsTr("Linphone"), text: qsTr("Une application de communication sécurisée,
open source et française.")}, + {title: qsTr("Sécurisé"), text: qsTr("Vos communications sont en sécurité grâce aux
Chiffrement de bout en bout.")}, + {title: qsTr("Open Source"), text: qsTr("Une application open source et un service gratuit
depuis 2001")}, + ] + ColumnLayout { + spacing: 15 * DefaultStyle.dp + Text { + id: title + text: modelData.title + font { + pixelSize: 29 * DefaultStyle.dp + weight: 800 * DefaultStyle.dp } } + Text { + id: txt + Layout.maximumWidth: 361 * DefaultStyle.dp + wrapMode: Text.WordWrap + font.pixelSize: 14 * DefaultStyle.dp + font.weight: 400 * DefaultStyle.dp + text: modelData.text + } } } } } Button { - Layout.topMargin: 20 - Layout.bottomMargin: 20 - Layout.leftMargin: 361 - width - Layout.alignment: Qt.AlignBottom - text: carousel.currentIndex < (carousel.itemsCount - 1) ? "Next" : "Start" + Layout.topMargin: 20 * DefaultStyle.dp + Layout.bottomMargin: 20 * DefaultStyle.dp + Layout.leftMargin: (centerLayout.width - width) * DefaultStyle.dp + Layout.alignment: Qt.AlignBottom | Qt.AlignRight + y: centerLayout.implicitWidth - width + text: carousel.currentIndex < (carousel.itemsCount - 1) ? qsTr("Suivant") : qsTr("Commencer") onClicked: { if (carousel.currentIndex < 2) carousel.goToSlide(carousel.currentIndex + 1); else mainItem.startButtonPressed(); } } - Item { - Layout.fillHeight: true - } } } diff --git a/Linphone/view/Page/Main/AbstractMainPage.qml b/Linphone/view/Page/Main/AbstractMainPage.qml index 38576b92..f68f394b 100644 --- a/Linphone/view/Page/Main/AbstractMainPage.qml +++ b/Linphone/view/Page/Main/AbstractMainPage.qml @@ -25,18 +25,18 @@ Item { anchors.fill: parent handle: Rectangle { - implicitWidth: 8 - color: Control.SplitHandle.hovered ? DefaultStyle.splitViewHoveredHandleColor : DefaultStyle.splitViewHandleColor + implicitWidth: 8 * DefaultStyle.dp + color: Control.SplitHandle.hovered ? DefaultStyle.grey_200 : DefaultStyle.grey_100 } ColumnLayout { id: leftPanel - Control.SplitView.preferredWidth: 280 + Control.SplitView.preferredWidth: 280 * DefaultStyle.dp } Rectangle { id: rightPanel clip: true - color: DefaultStyle.mainPageRightPanelBackgroundColor + color: DefaultStyle.grey_100 StackLayout { currentIndex: mainItem.showDefaultItem ? 0 : 1 anchors.fill: parent @@ -48,25 +48,28 @@ Item { Layout.fillHeight: true Layout.fillWidth: true Layout.alignment: Qt.AlignHCenter - spacing: 25 Item { Layout.fillWidth: true } ColumnLayout { + spacing: 30 * DefaultStyle.dp Item { Layout.fillHeight: true } Image { Layout.alignment: Qt.AlignHCenter source: AppIcons.noItemImage - Layout.preferredWidth: 250 - Layout.preferredHeight: 250 + Layout.preferredWidth: 359 * DefaultStyle.dp + Layout.preferredHeight: 314 * DefaultStyle.dp fillMode: Image.PreserveAspectFit } Text { text: mainItem.emptyListText Layout.alignment: Qt.AlignHCenter - font.bold: true + font { + pixelSize: 22 * DefaultStyle.dp + weight: 800 * DefaultStyle.dp + } } Button { Layout.alignment: Qt.AlignHCenter @@ -75,7 +78,8 @@ Item { EffectImage { colorizationColor: DefaultStyle.grey_0 image.source: mainItem.newItemIconSource - image.width: 20 + image.width: 24 * DefaultStyle.dp + image.height: 24 * DefaultStyle.dp image.fillMode: Image.PreserveAspectFit } Text { @@ -83,8 +87,8 @@ Item { wrapMode: Text.WordWrap color: DefaultStyle.grey_0 font { - bold: true - pointSize: DefaultStyle.buttonTextSize + weight: 600 * DefaultStyle.dp + pixelSize: 18 * DefaultStyle.dp family: DefaultStyle.defaultFont } } diff --git a/Linphone/view/Page/Main/CallPage.qml b/Linphone/view/Page/Main/CallPage.qml index c25c2030..9605cb3d 100644 --- a/Linphone/view/Page/Main/CallPage.qml +++ b/Linphone/view/Page/Main/CallPage.qml @@ -20,7 +20,7 @@ AbstractMainPage { clip: true initialItem: listItem anchors.fill: parent - property int sideMargin: 25 + property int sideMargin: 25 * DefaultStyle.dp // anchors.leftMargin: 25 // anchors.rightMargin: 25 } @@ -34,9 +34,9 @@ AbstractMainPage { Layout.rightMargin: listStackView.sideMargin Text { text: qsTr("Appels") - color: DefaultStyle.mainPageTitleColor - font.pointSize: DefaultStyle.mainPageTitleSize - font.bold: true + color: DefaultStyle.main2_700 + font.pixelSize: 29 * DefaultStyle.dp + font.weight: 800 * DefaultStyle.dp } Item { Layout.fillWidth: true @@ -56,8 +56,8 @@ AbstractMainPage { } contentItem: Image { source: AppIcons.newCall - width: 30 - sourceSize.width: 30 + width: 30 * DefaultStyle.dp + sourceSize.width: 30 * DefaultStyle.dp fillMode: Image.PreserveAspectFit } onClicked: { @@ -87,10 +87,13 @@ AbstractMainPage { ColumnLayout { Text { text: qsTr("Aucun appel") - font.bold: true + font { + pixelSize: 16 * DefaultStyle.dp + weight: 800 * DefaultStyle.dp + } visible: listView.count === 0 Layout.alignment: Qt.AlignHCenter - Layout.topMargin: 30 + Layout.topMargin: 30 * DefaultStyle.dp } ListView { id: listView @@ -103,7 +106,7 @@ AbstractMainPage { delegate: Item { required property int index width:listView.width - height: 30 + height: 30 * DefaultStyle.dp // RectangleTest{} RowLayout { anchors.fill: parent @@ -127,15 +130,15 @@ AbstractMainPage { Layout.fillWidth: true } Control.Button { - implicitWidth: 30 - implicitHeight: 30 + implicitWidth: 30 * DefaultStyle.dp + implicitHeight: 30 * DefaultStyle.dp background: Item { visible: false } contentItem: Image { source: AppIcons.phone - width: 20 - sourceSize.width: 20 + width: 20 * DefaultStyle.dp + sourceSize.width: 20 * DefaultStyle.dp fillMode: Image.PreserveAspectFit } } @@ -145,8 +148,8 @@ AbstractMainPage { Rectangle { anchors.fill: parent opacity: 0.1 - radius: 15 - color: DefaultStyle.comboBoxHoverColor + radius: 15 * DefaultStyle.dp + color: DefaultStyle.main2_500main visible: parent.containsMouse } onPressed: listView.currentIndex = parent.index @@ -190,9 +193,9 @@ AbstractMainPage { } Text { text: qsTr("Nouvel appel") - color: DefaultStyle.mainPageTitleColor - font.pointSize: DefaultStyle.mainPageTitleSize - font.bold: true + color: DefaultStyle.main2_700 + font.pixelSize: 29 * DefaultStyle.dp + font.weight: 800 * DefaultStyle.dp } Item { Layout.fillWidth: true @@ -203,17 +206,12 @@ AbstractMainPage { Layout.fillHeight: true Layout.maximumWidth: parent.width groupCallVisible: true - searchBarColor: DefaultStyle.contactListSearchBarColor + searchBarColor: DefaultStyle.grey_100 onCallButtonPressed: (address) => { var addressEnd = "@sip.linphone.org" if (!address.endsWith(addressEnd)) address += addressEnd var callVarObject = UtilsCpp.createCall(address) - // var windowComp = Qt.createComponent("CallsWindow.qml") - // var call = callVarObject.value - // var callWindow = windowComp.createObject(null, {callVarObject: callVarObject}) - // callWindow.modality = Qt.ApplicationModal - // callWindow.show() } } } @@ -223,4 +221,4 @@ AbstractMainPage { rightPanelContent: ColumnLayout { } -} \ No newline at end of file +} diff --git a/Linphone/view/Style/DefaultStyle.qml b/Linphone/view/Style/DefaultStyle.qml index ebb6da92..9a424b3d 100644 --- a/Linphone/view/Style/DefaultStyle.qml +++ b/Linphone/view/Style/DefaultStyle.qml @@ -3,6 +3,7 @@ import QtQuick 2.15 QtObject { property color main1_500_main: "#FE5E00" + property color main1_500_main_darker: "#C94C02" property color main2_0: "#FAFEFF" property color main2_100: "#EEF6F8" @@ -10,96 +11,35 @@ QtObject { property color main2_300: "#C0D1D9" property color main2_400: "#9AABB5" property color main2_500main: "#6C7A87" + property color main2_600: "#4E6074" property color main2_700: "#364860" - - property color warning_600: "#DBB820" + property color main2_800: "#22334D" property color grey_0: "#FFFFFF" + property color grey_100: "#F9F9F9" + property color grey_200: "#EDEDED" + property color grey_400: "#949494" property color grey_500: "#4E4E4E" property color grey_600: "#2E3030" property color grey_900: "#070707" + property color grey_1000: "#000000" - property color danger_500: "#DD5F5F" - + property color warning_600: "#DBB820" + property color danger_500main: "#DD5F5F" + property color success_500main: "#4FAE80" property color info_500_main: "#4AA8FF" - property color success_500main: "#4FAE80" + + property double dp: 0.8 //1 + property string emojiFont: "Noto Color Emoji" - property color buttonPressedBackground: "#c74b02" - property color buttonPressedInversedBackground: "#fff1e8" - property int radioButtonTextSize: 8 - property int radioButtonTitleSize: 9 - property double checkboxBorderWidth: 2 - property int buttonTextSize: 10 - property color carouselLightGrayColor: "#DFECF2" - property color formItemLabelColor: "#4E6074" - property int formItemLabelSize: 8 - property color formItemDisableColor: "#949494" - property color formItemDisableBackgroundColor: "#EDEDED" - property color formItemBackgroundColor: "#F9F9F9" - property color formItemBorderColor: "#EDEDED" - - property int tabButtonTextSize: 11 - property color verticalTabBarTextColor: "white" - property int verticalTabButtonTextSize: 6 - - property color comboBoxHighlightColor: "#C0D1D9" - property color comboBoxHoverColor: "#6C7A87" - - property color aboutButtonTextColor: "#6C7A87" - - property color questionTextColor: "#364860" - property color errorMessageColor: "#DD5F5F" - - property color tooltipBackgroundColor: "#DFECF2" - - property color digitInputColor: "#6C7A87" - - property color darkBlueColor: "#22334D" - property color darkGrayColor: "#4E6074" - property color grayColor: "#6C7A87" - property color lightGrayColor: "#EDEDED" - - property color defaultTextColor: "#4E6074" - property color disableTextColor: "#9AABB5" - property int descriptionTextSize: 7 - property int indicatorMessageTextSize: 7 property string defaultFont: "Noto Sans" - property int defaultFontPointSize: 10 - property int title1FontPointSize: 50 - property int title2FontPointSize: 20 - property color titleColor: "#22334D" - property color mainPageRightPanelBackgroundColor: "#F9F9F9" - property color mainPageTitleColor: "#364860" - property int mainPageTitleSize: 15 - - property color searchBarFocusBorderColor: "#6C7A87" - property color contactListSearchBarColor: "#F9F9F9" - property color callRightPanelSearchBarBorderColor: "#EDEDED" - - property color numericPadBackgroundColor: "#F9F9F9" - property color numericPadShadowColor: Qt.rgba(0.0, 0.0, 0.0, 0.1) - property int numericPadButtonTextSize: 15 - property int numericPadButtonSubtextSize: 6 property color numericPadPressedButtonColor: "#EEF7F8" property color groupCallButtonColor: "#EEF7F8" property color launchCallButtonColor: "#4FAE80" property color callCheckedButtonColor: "#9AABB5" - property color splitViewHandleColor: "#F9F9F9" - property color splitViewHoveredHandleColor: "#EDEDED" - - property color ongoingCallWindowColor: "#000000" - property color ongoingCallBackgroundColor: "#2E3030" - property int ongoingCallElapsedTimeSize: 15 - property int ongoingCallNameSize: 10 - property int ongoingCallAddressSize: 6 - property color callRightPanelBackgroundColor: "#F9F9F9" - - property color defaultAvatarBackgroundColor: "#DFECF2" - - property double dp: 1.0//0.66 }