From df651a24863723c8efe71c752d32a2091d6d41b2 Mon Sep 17 00:00:00 2001 From: ababi <albert.babi@savoirfairelinux.com> Date: Thu, 30 Jul 2020 13:38:57 +0200 Subject: [PATCH] mainview: improve UI theme - SmartList menu - SideView/CallView separator width - AccountComboBox - UserProfile - WelcomeView - Rescale RecordBox Change-Id: I5bb75bddcd49c5ff8b48ee9568942df015292e14 Gitlab: #574 --- images/icons/drafts-24px.svg | 1 + images/icons/person-24px.svg | 1 + images/icons/person_add-24px.svg | 1 + ressources.qrc | 5 +- src/commoncomponents/GeneralMenuItem.qml | 22 +-- src/constant/JamiTheme.qml | 8 +- src/mainview/MainView.qml | 39 +++- src/mainview/components/AccountComboBox.qml | 122 +++++++----- .../components/AccountComboBoxPopup.qml | 26 ++- src/mainview/components/ContactSearchBar.qml | 18 +- .../ConversationSmartListContextMenu.qml | 36 +++- .../ConversationSmartListUserImage.qml | 15 +- .../ConversationSmartListViewItemDelegate.qml | 174 +++++++----------- src/mainview/components/MessageWebView.qml | 4 +- .../components/MessageWebViewHeader.qml | 32 ++-- src/mainview/components/RecordBox.qml | 169 +++++++++++------ src/mainview/components/SidePanel.qml | 171 ++++++----------- src/mainview/components/SidePanelTabBar.qml | 149 ++++++++++----- src/mainview/components/UserProfile.qml | 93 ++++++---- src/mainview/components/WelcomePage.qml | 91 ++------- 20 files changed, 627 insertions(+), 550 deletions(-) create mode 100644 images/icons/drafts-24px.svg create mode 100644 images/icons/person-24px.svg create mode 100644 images/icons/person_add-24px.svg diff --git a/images/icons/drafts-24px.svg b/images/icons/drafts-24px.svg new file mode 100644 index 000000000..dd7c3bb96 --- /dev/null +++ b/images/icons/drafts-24px.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M21.99 8c0-.72-.37-1.35-.94-1.7L12 1 2.95 6.3C2.38 6.65 2 7.28 2 8v10c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2l-.01-10zM12 13L3.74 7.84 12 3l8.26 4.84L12 13z"/></svg> \ No newline at end of file diff --git a/images/icons/person-24px.svg b/images/icons/person-24px.svg new file mode 100644 index 000000000..1babbb809 --- /dev/null +++ b/images/icons/person-24px.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg> \ No newline at end of file diff --git a/images/icons/person_add-24px.svg b/images/icons/person_add-24px.svg new file mode 100644 index 000000000..40736bbc7 --- /dev/null +++ b/images/icons/person_add-24px.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-9-2V7H4v3H1v2h3v3h2v-3h3v-2H6zm9 4c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg> \ No newline at end of file diff --git a/ressources.qrc b/ressources.qrc index 1093bde97..a0e1547f5 100644 --- a/ressources.qrc +++ b/ressources.qrc @@ -39,7 +39,7 @@ <file>images/icons/ic_clear_24px.svg</file> <file>images/icons/ic_close_white_24dp.png</file> <file>images/icons/ic_content_copy.svg</file> - <file>images/icons/ic_delete_black_18dp_2x.png</file> + <file>images/icons/ic_delete_black_18dp_2x.png</file> <file>images/icons/ic_done_white_24dp.png</file> <file>images/icons/ic_exit_full_screen_black.png</file> <file>images/icons/ic_folder_black_18dp_2x.png</file> @@ -107,5 +107,8 @@ <file>images/icons/ic_close_black_24dp.png</file> <file>images/icons/extension_24dp.svg</file> <file>images/icons/settings_backup_restore-black-18dp.svg</file> + <file>images/icons/person-24px.svg</file> + <file>images/icons/drafts-24px.svg</file> + <file>images/icons/person_add-24px.svg</file> </qresource> </RCC> diff --git a/src/commoncomponents/GeneralMenuItem.qml b/src/commoncomponents/GeneralMenuItem.qml index 677c4b0e3..a457f8d88 100644 --- a/src/commoncomponents/GeneralMenuItem.qml +++ b/src/commoncomponents/GeneralMenuItem.qml @@ -19,9 +19,9 @@ import QtQuick 2.14 import QtQuick.Controls 2.14 import QtQuick.Layouts 1.14 +import QtGraphicalEffects 1.0 import net.jami.Models 1.0 - /* * General menu item. * Can control top, bottom, left, right border width. @@ -33,8 +33,8 @@ MenuItem { property string itemName: "" property string iconSource: "" - property int preferredWidth: 150 - property int preferredHeight: 30 + property int preferredWidth: 220 + property int preferredHeight: 48 property int topBorderWidth: 0 property int bottomBorderWidth: 0 property int leftBorderWidth: 0 @@ -46,27 +46,27 @@ MenuItem { id: menuItemContentRect anchors.fill: parent - Image { id: contextMenuItemImage anchors.left: menuItemContentRect.left - anchors.leftMargin: 5 + anchors.leftMargin: (visible ? 24 : 0) anchors.verticalCenter: menuItemContentRect.verticalCenter - width: 25 - height: 25 + width: (visible ? 24 : 0) + height: (visible ? 24 : 0) visible: false fillMode: Image.PreserveAspectFit mipmap: true + opacity: 0.7 } Text { id: contextMenuItemText anchors.left: contextMenuItemImage.right - anchors.leftMargin: 5 + anchors.leftMargin: 20 anchors.verticalCenter: menuItemContentRect.verticalCenter width: textMetrics.boundingRect.width height: 30 @@ -74,13 +74,13 @@ MenuItem { TextMetrics { id: textMetrics font: contextMenuItemText.font - elide: Text.ElideMiddle - elideWidth: contextMenuItemImage.visible ? (preferredWidth - contextMenuItemImage.width - 5) : preferredWidth + elide: Text.ElideRight + elideWidth: contextMenuItemImage.visible ? (preferredWidth - contextMenuItemImage.width - 58) : preferredWidth - 24 text: itemName } text: textMetrics.elidedText - font.pointSize: JamiTheme.textFontSize - 3 + font.pointSize: JamiTheme.textFontSize horizontalAlignment: Text.AlignLeft verticalAlignment: Text.AlignVCenter } diff --git a/src/constant/JamiTheme.qml b/src/constant/JamiTheme.qml index 983ae0de7..fdc376db1 100644 --- a/src/constant/JamiTheme.qml +++ b/src/constant/JamiTheme.qml @@ -39,6 +39,8 @@ Item { property string transparentColor: "transparent" property string presenceGreen: "#4cd964" property string notificationRed: "#ff3b30" + property string backgroundColor: lightGrey_ + property string backgroundDarkColor: lightGreyTab_ property string screenSelectionBorderGreen: "green" @@ -73,13 +75,15 @@ Item { property int splitViewHandlePreferedWidth: 4 property int textFontSize: 9 + property int titleFontSize: 16 + property int menuFontSize: 12 /* * Place holder text. */ property string contactSearchBarPlaceHolderConversationText: qsTr("Find or start a conversation") - property string contactSearchBarPlaceHolderInivitionText: qsTr("Search your received invitations") + property string contactSearchBarPlaceHolderInivitionText: qsTr("Search your invitations") // Jami theme colors function rgb256(r, g, b) { @@ -87,8 +91,10 @@ Item { } property color blue_: "#109ede" + property color blueLogo_: rgb256(0, 7, 71) property color lightBlue_: "#c1ebf0" property color lightGrey_: rgb256(242, 242, 242) + property color lightGreyTab_: rgb256(220, 220, 220) property color imGrey_: "#dedee0" property color imBlue_: "#cfebf5" property color lightBlack_: rgb256(63, 63, 63) diff --git a/src/mainview/MainView.qml b/src/mainview/MainView.qml index 6bf2ff5d3..20ac17704 100644 --- a/src/mainview/MainView.qml +++ b/src/mainview/MainView.qml @@ -43,6 +43,11 @@ Window { property int welcomePageGroupPreferedWidth: 250 property int aboutPopUpPreferedWidth: 250 + property int savedSidePanelViewMinWidth: 0 + property int savedSidePanelViewMaxWidth: 0 + property int savedWelcomeViewMinWidth: 0 + property int savedWelcomeViewMaxWidth: 0 + property bool hiddenView: false /* * To calculate tab bar bottom border hidden rect left margin. @@ -184,18 +189,21 @@ Window { handle: Rectangle { implicitWidth: JamiTheme.splitViewHandlePreferedWidth implicitHeight: splitView.height - color: SplitHandle.pressed ? JamiTheme.pressColor : (SplitHandle.hovered ? JamiTheme.hoverColor : JamiTheme.tabbarBorderColor) + color:"transparent" + Rectangle { + implicitWidth: 1 + implicitHeight: splitView.height + color: SplitHandle.pressed ? JamiTheme.pressColor : (SplitHandle.hovered ? JamiTheme.hoverColor : JamiTheme.tabbarBorderColor) + } } StackView { id: sidePanelViewStack - property int maximumWidth: sidePanelViewStackPreferedWidth + 100 - initialItem: mainViewWindowSidePanel + SplitView.maximumWidth: splitView.width - sidePanelViewStackPreferedWidth SplitView.minimumWidth: sidePanelViewStackPreferedWidth - SplitView.maximumWidth: maximumWidth SplitView.fillHeight: true clip: true @@ -206,7 +214,8 @@ Window { initialItem: welcomePage - SplitView.maximumWidth: splitView.width - sidePanelViewStack.width + SplitView.maximumWidth: hiddenView ? splitView.width : splitView.width - sidePanelViewStackPreferedWidth + SplitView.minimumWidth: sidePanelViewStackPreferedWidth SplitView.fillHeight: true clip: true @@ -408,6 +417,18 @@ Window { } Component.onCompleted: { + sidePanelViewStack.SplitView.maximumWidth = Qt.binding(function() { + return (hiddenView ? splitView.width : splitView.width - sidePanelViewStackPreferedWidth) + }) + + recordBox.x = Qt.binding(function() { + var i = (welcomeViewStack.width > 1000 ? Math.round((welcomeViewStack.width-1000)*0.5) : 0) + return sidePanelViewStack.width + recordBox.x_offset + i + }) + + recordBox.y = Qt.binding(function() { + return sidePanelViewStack.height + recordBox.y_offset + }) /* @@ -427,7 +448,7 @@ Window { + welcomePageGroupPreferedWidth - 5 && welcomeViewStack.visible) { welcomeViewStack.visible = false - + hiddenView = true /* * The find callback function is called for each item in the stack. @@ -436,17 +457,17 @@ Window { function (item, index) { return index > 0 }) + if (inWelcomeViewStack) { recursionStackViewItemMove(welcomeViewStack, sidePanelViewStack) } - sidePanelViewStack.maximumWidth = splitView.width - mainViewWindow.update() } else if (mainViewWindow.width >= sidePanelViewStackPreferedWidth + welcomePageGroupPreferedWidth + 5 && !welcomeViewStack.visible) { welcomeViewStack.visible = true + hiddenView = false var inSidePanelViewStack = sidePanelViewStack.find( function (item, index) { @@ -456,8 +477,6 @@ Window { recursionStackViewItemMove(sidePanelViewStack, welcomeViewStack) } - sidePanelViewStack.maximumWidth = sidePanelViewStackPreferedWidth + 100 - mainViewWindow.update() } } diff --git a/src/mainview/components/AccountComboBox.qml b/src/mainview/components/AccountComboBox.qml index 23225f783..317506857 100644 --- a/src/mainview/components/AccountComboBox.qml +++ b/src/mainview/components/AccountComboBox.qml @@ -64,11 +64,11 @@ ComboBox { id: userImageRoot anchors.left: accountComboBox.left - anchors.leftMargin: 5 + anchors.leftMargin: 16 anchors.verticalCenter: accountComboBox.verticalCenter - width: accountComboBox.height - 10 - height: accountComboBox.height - 10 + width: 30 + height: 30 fillMode: Image.PreserveAspectFit @@ -90,12 +90,12 @@ ComboBox { id: presenseRect anchors.right: userImageRoot.right - anchors.rightMargin: 1 + anchors.rightMargin: -2 anchors.bottom: userImageRoot.bottom - anchors.bottomMargin: 2 + anchors.bottomMargin: -2 - width: 14 - height: 14 + width: 12 + height: 12 /* @@ -123,7 +123,7 @@ ComboBox { } radius: 30 - color: "white" + color: JamiTheme.backgroundColor } } @@ -131,33 +131,45 @@ ComboBox { id: textUserAliasRoot anchors.left: userImageRoot.right - anchors.leftMargin: 10 + anchors.leftMargin: 16 anchors.top: rootItemBackground.top - anchors.topMargin: 5 + anchors.topMargin: 16 text: textMetricsUserAliasRoot.elidedText font.pointSize: JamiTheme.textFontSize } + Image { + anchors.left: textUserAliasRoot.right + anchors.verticalCenter: textUserAliasRoot.verticalCenter + + width: 24 + height: 24 + + fillMode: Image.PreserveAspectFit + mipmap: true + source: "qrc:/images/icons/round-arrow_drop_down-24px.svg" + } + + Text { id: textUsernameRoot anchors.left: userImageRoot.right - anchors.leftMargin: 10 + anchors.leftMargin: 16 anchors.top: textUserAliasRoot.bottom - anchors.topMargin: 5 text: textMetricsUsernameRoot.elidedText font.pointSize: JamiTheme.textFontSize - color: JamiTheme.faddedFontColor + color: JamiTheme.faddedLastInteractionFontColor } TextMetrics { id: textMetricsUserAliasRoot font: textUserAliasRoot.font - elide: Text.ElideMiddle - elideWidth: accountComboBox.width - userImageRoot.width - settingsButton.width - 25 + elide: Text.ElideRight + elideWidth: accountComboBox.width - userImageRoot.width - settingsButton.width - qrCodeGenerateButton.width - 55 /* @@ -177,8 +189,8 @@ ComboBox { id: textMetricsUsernameRoot font: textUsernameRoot.font - elide: Text.ElideMiddle - elideWidth: accountComboBox.width - userImageRoot.width - settingsButton.width - 25 + elide: Text.ElideRight + elideWidth: accountComboBox.width - userImageRoot.width - settingsButton.width - qrCodeGenerateButton.width - 55 /* @@ -194,6 +206,28 @@ ComboBox { } } + + + HoverableButton { + id: qrCodeGenerateButton + + anchors.right: settingsButton.left + anchors.rightMargin: 10 + anchors.verticalCenter: accountComboBox.verticalCenter + + buttonImageHeight: height - 8 + buttonImageWidth: width - 8 + radius: height / 2 + width: 24 + height: 24 + + source: "qrc:/images/qrcode.png" + backgroundColor: "white" + onClicked: { + qrDialog.open() + } + } + HoverableButton { id: settingsButton @@ -203,11 +237,12 @@ ComboBox { buttonImageHeight: height - 8 buttonImageWidth: width - 8 - source: "qrc:/images/icons/round-settings-24px.svg" radius: height / 2 width: 25 height: 25 + source: "qrc:/images/icons/round-settings-24px.svg" + backgroundColor: "white" onClicked: { settingBtnClicked() } @@ -218,8 +253,7 @@ ComboBox { implicitWidth: accountComboBox.width implicitHeight: accountComboBox.height - - border.width: 0 + color: JamiTheme.backgroundColor } MouseArea { @@ -231,14 +265,21 @@ ComboBox { propagateComposedEvents: true onPressed: { - if (isMouseOnSettingsButton(mouse)) { + if (isMouseOnButton(mouse, qrCodeGenerateButton)) { + qrCodeGenerateButton.backgroundColor = JamiTheme.pressColor + qrCodeGenerateButton.clicked() + }if (isMouseOnButton(mouse, settingsButton)) { settingsButton.backgroundColor = JamiTheme.pressColor settingsButton.clicked() - } else + } else { rootItemBackground.color = JamiTheme.pressColor + } } + onReleased: { - if (isMouseOnSettingsButton(mouse)) { + if (isMouseOnButton(mouse, qrCodeGenerateButton)) { + qrCodeGenerateButton.backgroundColor = JamiTheme.releaseColor + } else if (isMouseOnButton(mouse, settingsButton)) { settingsButton.backgroundColor = JamiTheme.releaseColor } else { rootItemBackground.color = JamiTheme.releaseColor @@ -253,31 +294,28 @@ ComboBox { rootItemBackground.color = JamiTheme.hoverColor } onExited: { - rootItemBackground.color = "white" + rootItemBackground.color = JamiTheme.backgroundColor } onMouseXChanged: { - - /* - * Manually making settings button hover. + * Manually making button hover. */ - if (isMouseOnSettingsButton(mouse)) { - settingsButton.backgroundColor = JamiTheme.hoverColor - rootItemBackground.color = "white" - } else { - settingsButton.backgroundColor = "white" - rootItemBackground.color = JamiTheme.hoverColor - } + qrCodeGenerateButton.backgroundColor = (isMouseOnButton(mouse, qrCodeGenerateButton)) ? + JamiTheme.hoverColor : "white" + + settingsButton.backgroundColor = (isMouseOnButton(mouse, settingsButton)) ? + JamiTheme.hoverColor : "white" } - function isMouseOnSettingsButton(mouse) { + + function isMouseOnButton(mouse, button) { var mousePos = mapToItem(comboBoxRootMouseArea, mouse.x, mouse.y) - var settingsButtonPos = mapToItem(comboBoxRootMouseArea, - settingsButton.x, - settingsButton.y) - if ((mousePos.x >= settingsButtonPos.x - && mousePos.x <= settingsButtonPos.x + settingsButton.width) - && (mousePos.y >= settingsButtonPos.y - && mousePos.y <= settingsButtonPos.y + settingsButton.height)) + var qrButtonPos = mapToItem(comboBoxRootMouseArea, + button.x, + button.y) + if ((mousePos.x >= qrButtonPos.x + && mousePos.x <= qrButtonPos.x + button.width) + && (mousePos.y >= qrButtonPos.y + && mousePos.y <= qrButtonPos.y + button.height)) return true return false } diff --git a/src/mainview/components/AccountComboBoxPopup.qml b/src/mainview/components/AccountComboBoxPopup.qml index 42a17fbcb..0d0c2844e 100644 --- a/src/mainview/components/AccountComboBoxPopup.qml +++ b/src/mainview/components/AccountComboBoxPopup.qml @@ -62,7 +62,7 @@ Popup { id: userImage anchors.left: parent.left - anchors.leftMargin: 5 + anchors.leftMargin: 10 anchors.verticalCenter: parent.verticalCenter width: 30 @@ -85,7 +85,7 @@ Popup { anchors.left: userImage.right anchors.leftMargin: 10 anchors.top: itemCoboBackground.top - anchors.topMargin: 5 + anchors.topMargin: 15 text: textMetricsUserAliasPopup.elidedText font.pointSize: JamiTheme.textFontSize @@ -97,33 +97,31 @@ Popup { anchors.left: userImage.right anchors.leftMargin: 10 anchors.top: textUserAliasPopup.bottom - anchors.topMargin: 5 text: textMetricsUsernamePopup.elidedText font.pointSize: JamiTheme.textFontSize - color: JamiTheme.faddedFontColor + color: JamiTheme.faddedLastInteractionFontColor } TextMetrics { id: textMetricsUserAliasPopup - elide: Text.ElideMiddle + elide: Text.ElideRight elideWidth: accountComboBox.width - userImage.width - settingsButton.width - 30 text: Alias } TextMetrics { id: textMetricsUsernamePopup - elide: Text.ElideMiddle + elide: Text.ElideRight elideWidth: accountComboBox.width - userImage.width - settingsButton.width - 30 text: Username } background: Rectangle { id: itemCoboBackground - + color: JamiTheme.backgroundColor implicitWidth: accountComboBox.width implicitHeight: accountComboBox.height - border.width: 0 } MouseArea { @@ -142,7 +140,7 @@ Popup { itemCoboBackground.color = JamiTheme.hoverColor } onExited: { - itemCoboBackground.color = "white" + itemCoboBackground.color = JamiTheme.backgroundColor } } } @@ -154,8 +152,8 @@ Popup { implicitHeight: accountComboBox.height text: qsTr("Add Account") + "+" - backgroundColor: "white" - onExitColor: "white" + backgroundColor: JamiTheme.backgroundColor + onExitColor: JamiTheme.backgroundColor onClicked: { comboBoxPopup.close() @@ -167,12 +165,12 @@ Popup { } background: Rectangle { id: accountComboBoxPopup - + color: JamiTheme.backgroundColor CustomBorder { commonBorder: false - lBorderwidth: 0 + lBorderwidth: 1 rBorderwidth: 1 - tBorderwidth: 0 + tBorderwidth: 1 bBorderwidth: 1 borderColor: JamiTheme.tabbarBorderColor } diff --git a/src/mainview/components/ContactSearchBar.qml b/src/mainview/components/ContactSearchBar.qml index 896b48c7c..3a1f52f70 100644 --- a/src/mainview/components/ContactSearchBar.qml +++ b/src/mainview/components/ContactSearchBar.qml @@ -19,6 +19,7 @@ import QtQuick 2.14 import QtQuick.Controls 2.14 import QtQuick.Layouts 1.14 +import QtGraphicalEffects 1.12 import net.jami.Models 1.0 Rectangle { @@ -44,9 +45,8 @@ Rectangle { fakeFocus.forceActiveFocus() } - border.color: JamiTheme.pressColor - radius: 10 - color: contactSearchBar.activeFocus ? "white" : JamiTheme.contactSearchBarPlaceHolderGreyBackground + radius: height/2 + color: "white" FocusScope { id: fakeFocus @@ -57,7 +57,7 @@ Rectangle { anchors.verticalCenter: contactSearchBarRect.verticalCenter anchors.left: contactSearchBarRect.left - anchors.leftMargin: 5 + anchors.leftMargin: 8 width: 20 height: 20 @@ -67,6 +67,12 @@ Rectangle { source: "qrc:/images/icons/ic_baseline-search-24px.svg" } + ColorOverlay { + anchors.fill: searchIconImage + source: searchIconImage + color: JamiTheme.contactSearchBarPlaceHolderTextFontColor + } + TextField { id: contactSearchBar @@ -85,10 +91,10 @@ Rectangle { anchors.verticalCenter: contactSearchBar.verticalCenter anchors.left: contactSearchBar.left - anchors.leftMargin: 5 + anchors.leftMargin: 10 text: qsTr("Find or start a conversation") - font.pointSize: JamiTheme.textFontSize - 1 + font.pointSize: JamiTheme.textFontSize color: JamiTheme.contactSearchBarPlaceHolderTextFontColor visible: !contactSearchBar.text && !contactSearchBar.activeFocus } diff --git a/src/mainview/components/ConversationSmartListContextMenu.qml b/src/mainview/components/ConversationSmartListContextMenu.qml index aece4b463..26c5406f2 100644 --- a/src/mainview/components/ConversationSmartListContextMenu.qml +++ b/src/mainview/components/ConversationSmartListContextMenu.qml @@ -18,19 +18,34 @@ */ import QtQuick 2.14 import QtQuick.Controls 2.14 +import QtGraphicalEffects 1.12 import net.jami.Models 1.0 import "../../commoncomponents" Menu { id: contextMenu - property string responsibleAccountId: "" property string responsibleConvUid: "" property int generalMenuSeparatorCount: 0 - property int commonBorderWidth: 2 + property int commonBorderWidth: 1 + font.pointSize: JamiTheme.menuFontSize + + function openMenu(){ + visible = true + visible = false + visible = true + } + GeneralMenuSeparator { + preferredWidth: startVideoCallItem.preferredWidth + preferredHeight: 8 + separatorColor: "transparent" + Component.onCompleted: { + generalMenuSeparatorCount++ + } + } /* * All GeneralMenuItems should remain the same width / height. @@ -39,7 +54,7 @@ Menu { id: startVideoCallItem itemName: qsTr("Start video call") - topBorderWidth: commonBorderWidth + iconSource: "qrc:/images/icons/ic_video_call_24px.svg" leftBorderWidth: commonBorderWidth rightBorderWidth: commonBorderWidth @@ -55,6 +70,7 @@ Menu { id: startAudioCallItem itemName: qsTr("Start audio call") + iconSource: "qrc:/images/icons/ic_phone_24px.svg" leftBorderWidth: commonBorderWidth rightBorderWidth: commonBorderWidth @@ -70,6 +86,7 @@ Menu { id: clearConversationItem itemName: qsTr("Clear conversation") + iconSource: "qrc:/images/icons/ic_clear_24px.svg" leftBorderWidth: commonBorderWidth rightBorderWidth: commonBorderWidth @@ -84,6 +101,7 @@ Menu { id: removeContactItem itemName: qsTr("Remove contact") + iconSource: "qrc:/images/icons/round-remove_circle-24px.svg" leftBorderWidth: commonBorderWidth rightBorderWidth: commonBorderWidth @@ -107,6 +125,7 @@ Menu { id: blockContactItem itemName: qsTr("Block contact") + iconSource: "qrc:/images/icons/ic_block_24px.svg" leftBorderWidth: commonBorderWidth rightBorderWidth: commonBorderWidth @@ -130,7 +149,7 @@ Menu { id: profileItem itemName: qsTr("Profile") - bottomBorderWidth: commonBorderWidth + iconSource: "qrc:/images/icons/person-24px.svg" leftBorderWidth: commonBorderWidth rightBorderWidth: commonBorderWidth @@ -140,6 +159,15 @@ Menu { } } + GeneralMenuSeparator { + preferredWidth: startVideoCallItem.preferredWidth + preferredHeight: 8 + separatorColor: "transparent" + Component.onCompleted: { + generalMenuSeparatorCount++ + } + } + background: Rectangle { implicitWidth: startVideoCallItem.preferredWidth implicitHeight: startVideoCallItem.preferredHeight diff --git a/src/mainview/components/ConversationSmartListUserImage.qml b/src/mainview/components/ConversationSmartListUserImage.qml index 6419ec4e9..6f3600b23 100644 --- a/src/mainview/components/ConversationSmartListUserImage.qml +++ b/src/mainview/components/ConversationSmartListUserImage.qml @@ -24,8 +24,8 @@ import net.jami.Models 1.0 Image { id: userImage - width: 50 - height: 50 + width: 40 + height: 40 fillMode: Image.PreserveAspectFit source: "data:image/png;base64," + Picture @@ -35,9 +35,9 @@ Image { id: presenseRect anchors.right: userImage.right - anchors.rightMargin: 1 + anchors.rightMargin: -2 anchors.bottom: userImage.bottom - anchors.bottomMargin: 2 + anchors.bottomMargin: -2 width: 14 height: 14 @@ -57,16 +57,16 @@ Image { } radius: 30 - color: "white" + color: JamiTheme.backgroundColor } Rectangle { id: unreadMessageCountRect anchors.right: userImage.right - anchors.rightMargin: 1 + anchors.rightMargin: -2 anchors.top: userImage.top - anchors.topMargin: 2 + anchors.topMargin: -2 width: 14 height: 14 @@ -80,6 +80,7 @@ Image { text: UnreadMessagesCount > 9 ? "···" : UnreadMessagesCount color: "white" + font.pointSize: JamiTheme.textFontSize } radius: 30 diff --git a/src/mainview/components/ConversationSmartListViewItemDelegate.qml b/src/mainview/components/ConversationSmartListViewItemDelegate.qml index 7a766f065..8ce018eef 100644 --- a/src/mainview/components/ConversationSmartListViewItemDelegate.qml +++ b/src/mainview/components/ConversationSmartListViewItemDelegate.qml @@ -25,7 +25,9 @@ import "../../commoncomponents" ItemDelegate { id: smartListItemDelegate + height: 72 + property int lastInteractionPreferredWidth: 80 Connections { target: conversationSmartListView @@ -48,7 +50,7 @@ ItemDelegate { || conversationSmartListView.currentIndex !== index) { itemSmartListBackground.color = Qt.binding(function () { return InCall ? Qt.lighter(JamiTheme.selectionBlue, - 1.8) : "white" + 1.8) : JamiTheme.backgroundColor }) } else { itemSmartListBackground.color = Qt.binding(function () { @@ -73,134 +75,82 @@ ItemDelegate { anchors.left: parent.left anchors.verticalCenter: parent.verticalCenter - anchors.leftMargin: 10 + anchors.leftMargin: 16 } - Rectangle { - id: conversationSmartListUserInfoRect + RowLayout { + id: rowUsernameAndLastInteractionDate anchors.left: conversationSmartListUserImage.right - anchors.leftMargin: 10 + anchors.leftMargin: 16 anchors.top: parent.top - - width: LastInteractionDate ? (parent.width - conversationSmartListUserImage.width - 20) - / 2 : parent.width - conversationSmartListUserImage.width - 20 - height: parent.height - - color: "transparent" - - ColumnLayout { - id: conversationSmartListUserInfoColumnLayout - - anchors.fill: parent - - Text { - id: conversationSmartListUserName - - Layout.alignment: Qt.AlignLeft - - TextMetrics { - id: textMetricsConversationSmartListUserName - font: conversationSmartListUserName.font - elide: Text.ElideMiddle - elideWidth: conversationSmartListUserInfoRect.width - text: DisplayName - } - - text: textMetricsConversationSmartListUserName.elidedText - font.pointSize: JamiTheme.textFontSize + anchors.topMargin: 16 + anchors.right: parent.right + anchors.rightMargin: 10 + + Text { + id: conversationSmartListUserName + Layout.alignment: Qt.AlignLeft + + TextMetrics { + id: textMetricsConversationSmartListUserName + font: conversationSmartListUserName.font + elide: Text.ElideRight + elideWidth: LastInteractionDate ? (smartListItemDelegate.width - lastInteractionPreferredWidth - conversationSmartListUserImage.width-32) : + smartListItemDelegate.width - lastInteractionPreferredWidth + text: DisplayName } + text: textMetricsConversationSmartListUserName.elidedText + font.pointSize: JamiTheme.menuFontSize + } - Text { - id: conversationSmartListUserId - - Layout.alignment: Qt.AlignLeft - - fontSizeMode: Text.Fit - color: JamiTheme.faddedFontColor - - TextMetrics { - id: textMetricsConversationSmartListUserId - font: conversationSmartListUserId.font - elide: Text.ElideMiddle - elideWidth: conversationSmartListUserInfoRect.width - text: DisplayID == DisplayName ? "" : DisplayID - } - - text: textMetricsConversationSmartListUserId.elidedText - font.pointSize: JamiTheme.textFontSize + Text { + id: conversationSmartListUserLastInteractionDate + Layout.alignment: Qt.AlignRight + TextMetrics { + id: textMetricsConversationSmartListUserLastInteractionDate + font: conversationSmartListUserLastInteractionDate.font + elide: Text.ElideRight + elideWidth: lastInteractionPreferredWidth + text: LastInteractionDate } + + text: textMetricsConversationSmartListUserLastInteractionDate.elidedText + font.pointSize: JamiTheme.textFontSize + color: JamiTheme.faddedLastInteractionFontColor } } - Rectangle { - id: conversationSmartListUserLastInteractionRect - - anchors.left: conversationSmartListUserInfoRect.right - anchors.top: parent.top - - width: (parent.width - conversationSmartListUserImage.width - 20) / 2 - 10 - height: parent.height - color: "transparent" - - ColumnLayout { - id: conversationSmartListUserLastInteractionColumnLayout - - anchors.fill: parent - - Text { - id: conversationSmartListUserLastInteractionDate - - Layout.alignment: Qt.AlignRight - - TextMetrics { - id: textMetricsConversationSmartListUserLastInteractionDate - font: conversationSmartListUserLastInteractionDate.font - elideWidth: conversationSmartListUserLastInteractionRect.width - elide: Text.ElideRight - text: LastInteractionDate - } - - text: textMetricsConversationSmartListUserLastInteractionDate.elidedText - font.pointSize: JamiTheme.textFontSize - color: JamiTheme.faddedFontColor - } - - Text { - id: conversationSmartListUserLastInteractionMessage - - Layout.alignment: Qt.AlignRight + Text { + id: conversationSmartListUserLastInteractionMessage + anchors.left: conversationSmartListUserImage.right + anchors.leftMargin: 16 + anchors.bottom: rowUsernameAndLastInteractionDate.bottom + anchors.bottomMargin: -20 + + TextMetrics { + id: textMetricsConversationSmartListUserLastInteractionMessage + font: conversationSmartListUserLastInteractionMessage.font + elide: Text.ElideRight + elideWidth: LastInteractionDate ? (smartListItemDelegate.width - lastInteractionPreferredWidth - conversationSmartListUserImage.width-32) : + smartListItemDelegate.width - lastInteractionPreferredWidth + text: InCall ? CallStateStr : (Draft ? Draft : LastInteraction) + } - fontSizeMode: Text.Fit + font.hintingPreference: Font.PreferNoHinting + text: textMetricsConversationSmartListUserLastInteractionMessage.elidedText + font.pointSize: JamiTheme.textFontSize + color: Draft ? JamiTheme.draftRed : JamiTheme.faddedLastInteractionFontColor + } - TextMetrics { - id: textMetricsConversationSmartListUserLastInteractionMessage - font: conversationSmartListUserLastInteractionMessage.font - elideWidth: conversationSmartListUserLastInteractionRect.width - elide: Text.ElideRight - text: InCall ? CallStateStr : (Draft ? Draft : LastInteraction) - } - font.family: "Segoe UI Emoji" - font.hintingPreference: Font.PreferNoHinting - text: textMetricsConversationSmartListUserLastInteractionMessage.elidedText - font.pointSize: JamiTheme.textFontSize - color: Draft ? JamiTheme.draftRed : JamiTheme.faddedLastInteractionFontColor - } - } - } background: Rectangle { id: itemSmartListBackground - - color: InCall ? Qt.lighter(JamiTheme.selectionBlue, 1.8) : "white" - + color: InCall ? Qt.lighter(JamiTheme.selectionBlue, 1.8) : JamiTheme.backgroundColor implicitWidth: conversationSmartListView.width - implicitHeight: Math.max( - conversationSmartListUserName.height - + textMetricsConversationSmartListUserId.height + 10, - conversationSmartListUserImage.height + 10) + implicitHeight: parent.height border.width: 0 } @@ -244,7 +194,7 @@ ItemDelegate { userProfile.registeredNameText = DisplayID userProfile.idText = URI userProfile.contactPicBase64 = Picture - smartListContextMenu.open() + smartListContextMenu.openMenu() } else if (mouse.button === Qt.LeftButton) { conversationSmartListView.currentIndex = index conversationSmartListView.needToSelectItems(index) @@ -262,7 +212,7 @@ ItemDelegate { || conversationSmartListView.currentIndex === -1) { itemSmartListBackground.color = Qt.binding(function () { return InCall ? Qt.lighter(JamiTheme.selectionBlue, - 1.8) : "white" + 1.8) : JamiTheme.backgroundColor }) } else { itemSmartListBackground.color = Qt.binding(function () { diff --git a/src/mainview/components/MessageWebView.qml b/src/mainview/components/MessageWebView.qml index 2045edf8b..1cb9242e9 100644 --- a/src/mainview/components/MessageWebView.qml +++ b/src/mainview/components/MessageWebView.qml @@ -29,7 +29,7 @@ import "../../commoncomponents" Rectangle { id: messageWebViewRect - property int messageWebViewHeaderPreferredHeight: 60 + property int messageWebViewHeaderPreferredHeight: 64 property string headerUserAliasLabelText: "" property string headerUserUserNameLabelText: "" @@ -58,8 +58,6 @@ Rectangle { messageWebViewHeader.resetBackToWelcomeViewButtonSource(reset) } - anchors.fill: parent - JamiFileDialog { id: jamiFileDialog diff --git a/src/mainview/components/MessageWebViewHeader.qml b/src/mainview/components/MessageWebViewHeader.qml index 596c672ad..4f2445fd5 100644 --- a/src/mainview/components/MessageWebViewHeader.qml +++ b/src/mainview/components/MessageWebViewHeader.qml @@ -54,7 +54,7 @@ Rectangle { id: backToWelcomeViewButton Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft - Layout.leftMargin: 10 + Layout.leftMargin: 16 Layout.preferredWidth: buttonPreferredSize Layout.preferredHeight: buttonPreferredSize @@ -83,22 +83,24 @@ Rectangle { Layout.preferredWidth: messagingHeaderRect.width - backToWelcomeViewButton.width - buttonGroup.width - 45 Layout.preferredHeight: messagingHeaderRect.height - Layout.leftMargin: 10 + Layout.leftMargin: 16 color: "transparent" ColumnLayout { id: userNameOrIdColumnLayout + Layout.alignment: Qt.AlignVCenter + anchors.fill: parent Label { id: userAliasLabel - Layout.alignment: Qt.AlignVCenter + Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft Layout.preferredWidth: userNameOrIdRect.width Layout.preferredHeight: textMetricsuserAliasLabel.boundingRect.height - Layout.topMargin: userNameOrIdRect.height / 2 - userAliasLabel.height - 4 + Layout.topMargin: userUserNameLabel.text == "" ? 0 : 10 - font.pointSize: JamiTheme.textFontSize - 1 + font.pointSize: JamiTheme.menuFontSize horizontalAlignment: Text.AlignLeft verticalAlignment: Text.AlignVCenter @@ -117,17 +119,17 @@ Rectangle { Label { id: userUserNameLabel - - Layout.alignment: Qt.AlignVCenter + visible: (text != "") + Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft Layout.preferredWidth: userNameOrIdRect.width Layout.preferredHeight: textMetricsuserUserNameLabel.boundingRect.height + Layout.bottomMargin: 10 - font.pointSize: JamiTheme.textFontSize - 2 - color: JamiTheme.faddedFontColor + font.pointSize: JamiTheme.textFontSize + color: JamiTheme.faddedLastInteractionFontColor horizontalAlignment: Text.AlignLeft verticalAlignment: Text.AlignVCenter - text: textMetricsuserUserNameLabel.elidedText } @@ -148,7 +150,7 @@ Rectangle { Layout.alignment: Qt.AlignRight | Qt.AlignVCenter Layout.preferredWidth: buttonPreferredSize * 3 + 18 Layout.preferredHeight: buttonPreferredSize - Layout.rightMargin: 20 + Layout.rightMargin: 16 color: "transparent" @@ -156,6 +158,7 @@ Rectangle { id: startAAudioCallButton anchors.right: startAVideoCallButton.left + anchors.rightMargin: 16 anchors.verticalCenter: buttonGroup.verticalCenter height: buttonPreferredSize @@ -175,8 +178,8 @@ Rectangle { HoverableButton { id: startAVideoCallButton - anchors.right: sendContactRequestButton.left - anchors.leftMargin: 5 + anchors.right: sendContactRequestButton.visible ? sendContactRequestButton.left : buttonGroup.right + anchors.rightMargin: 16 anchors.verticalCenter: buttonGroup.verticalCenter height: buttonPreferredSize @@ -196,7 +199,6 @@ Rectangle { HoverableButton { id: sendContactRequestButton - anchors.leftMargin: 5 anchors.right: buttonGroup.right anchors.rightMargin: 8 anchors.verticalCenter: buttonGroup.verticalCenter @@ -206,7 +208,7 @@ Rectangle { visible: sendContactRequestButtonVisible radius: 30 - source: "qrc:/images/icons/ic_person_add_black_24dp_2x.png" + source: "qrc:/images/icons/person_add-24px.svg" backgroundColor: "white" onExitColor: "white" diff --git a/src/mainview/components/RecordBox.qml b/src/mainview/components/RecordBox.qml index b6bc0f999..274e28de2 100644 --- a/src/mainview/components/RecordBox.qml +++ b/src/mainview/components/RecordBox.qml @@ -21,8 +21,10 @@ import QtQuick.Controls 2.14 import QtQuick.Layouts 1.14 import QtQuick.Controls.Styles 1.4 import QtQuick.Dialogs 1.3 -import QtGraphicalEffects 1.0 import net.jami.Models 1.0 +import QtGraphicalEffects 1.15 +import QtQuick.Shapes 1.15 + import "../../commoncomponents" @@ -34,7 +36,7 @@ Rectangle { REC_SUCCESS } - id:recBox + id: recBox color: "#FFFFFF" width: 320 height: 240 @@ -47,25 +49,48 @@ Rectangle { property int state: RecordBox.States.INIT property bool isVideo: false property bool previewAvailable: false + property int preferredWidth: 320 + property int preferredHeight: 240 + property int btnSize: 40 - property int h_offset: -65 - property int v_offset: -65 + property int offset: 3 + property int curveRadius: 6 + property int x_offset: 0 + property int y_offset: 0 function openRecorder(set_x, set_y, vid) { + focus = true visible = true - x = set_x+(width/2)+h_offset - y = set_y-(height/2)+v_offset + isVideo = vid + + x_offset = (isVideo ? -34 : -80) + scaleHeight() + y_offset = -64-height updateState(RecordBox.States.INIT) - isVideo = vid if (isVideo){ ClientWrapper.accountAdaptor.startPreviewing(false) previewAvailable = true } } + function scaleHeight(){ + height = preferredHeight + if (isVideo) { + var device = ClientWrapper.avmodel.getDefaultDevice() + var settings = ClientWrapper.settingsAdaptor.get_Video_Settings_Size(device) + var res = settings.split("x") + var aspectRatio = res[1]/res[0] + if (aspectRatio) { + height = preferredWidth*aspectRatio + } else { + console.error("Could not scale recording video preview") + } + } + } + onActiveFocusChanged: { if (visible) { closeRecorder() @@ -73,7 +98,7 @@ Rectangle { } onVisibleChanged: { - if(!visible) { + if (!visible) { closeRecorder() } } @@ -140,6 +165,57 @@ Rectangle { target: ClientWrapper.renderManager } + Shape { + id: backgroundShape + width: recBox.width + height: recBox.height + anchors.centerIn: parent + x: -offset + y: -offset + ShapePath { + fillColor: "white" + + strokeWidth: 1 + strokeColor: JamiTheme.tabbarBorderColor + + startX: -offset+curveRadius; startY: -offset + joinStyle: ShapePath.RoundJoin + + PathLine { x: width+offset-curveRadius; y: -offset } + + PathArc { + x: width+offset; y: -offset+curveRadius + radiusX: curveRadius; radiusY: curveRadius + } + + PathLine { x: width+offset; y: height+offset-curveRadius } + + PathArc { + x: width+offset-curveRadius; y: height+offset + radiusX: curveRadius; radiusY: curveRadius + } + + PathLine { x: width/2+10; y: height+offset } + PathLine { x: width/2; y: height+offset+10 } + PathLine { x: width/2-10; y: height+offset } + + + PathLine { x: -offset+curveRadius; y: height+offset } + + PathArc { + x: -offset; y: height+offset-curveRadius + radiusX: curveRadius; radiusY: curveRadius + } + + PathLine { x: -offset; y: -offset+curveRadius } + + PathArc { + x: -offset+curveRadius; y: -offset + radiusX: curveRadius; radiusY: curveRadius + } + } + } + Rectangle { id: rectBox visible: (isVideo && previewAvailable) @@ -184,31 +260,26 @@ Rectangle { text: "00:00" color: (isVideo ? "white" : "black") font.pointSize: (isVideo ? 12 : 20) - anchors.horizontalCenter: parent.horizontalCenter + + anchors.centerIn: recordButton anchors.horizontalCenterOffset: (isVideo ? 100 : 0) - anchors.verticalCenter: parent.verticalCenter - anchors.verticalCenterOffset: (isVideo ? 100 : 0) + anchors.verticalCenterOffset: (isVideo ? 0 : -100) } - HoverableRadiusButton { id: recordButton - Layout.maximumWidth: 30 - Layout.preferredWidth: 30 - Layout.minimumWidth: 30 - Layout.maximumHeight: 30 - Layout.preferredHeight: 30 - Layout.minimumHeight: 30 + width: btnSize + height: btnSize + + anchors.horizontalCenter: recBox.horizontalCenter + anchors.bottom: recBox.bottom + anchors.bottomMargin: 5 buttonImageHeight: height buttonImageWidth: height backgroundColor: isVideo? "#000000cc" : "white" - anchors.horizontalCenter: parent.horizontalCenter - anchors.bottom: parent.bottom - anchors.bottomMargin: 5 - radius: height / 2 icon.source: "qrc:/images/icons/av_icons/fiber_manual_record-24px.svg" @@ -223,22 +294,18 @@ Rectangle { HoverableRadiusButton { id: btnStop - Layout.maximumWidth: 30 - Layout.preferredWidth: 30 - Layout.minimumWidth: 30 - Layout.maximumHeight: 30 - Layout.preferredHeight: 30 - Layout.minimumHeight: 30 + width: btnSize + height: btnSize + + anchors.horizontalCenter: recBox.horizontalCenter + anchors.bottom: recBox.bottom + anchors.bottomMargin: 5 buttonImageHeight: height buttonImageWidth: height backgroundColor: isVideo? "#000000cc" : "white" - anchors.horizontalCenter: parent.horizontalCenter - anchors.bottom: parent.bottom - anchors.bottomMargin: 5 - radius: height / 2 icon.source: "qrc:/images/icons/av_icons/stop-24px-red.svg" @@ -253,24 +320,19 @@ Rectangle { HoverableRadiusButton { id: btnRestart - Layout.maximumWidth: 30 - Layout.preferredWidth: 30 - Layout.minimumWidth: 30 - Layout.maximumHeight: 30 - Layout.preferredHeight: 30 - Layout.minimumHeight: 30 + width: btnSize + height: btnSize + + anchors.horizontalCenter: recBox.horizontalCenter + anchors.horizontalCenterOffset: -25 + anchors.bottom: recBox.bottom + anchors.bottomMargin: 5 buttonImageHeight: height buttonImageWidth: height backgroundColor: isVideo? "#000000cc" : "white" - anchors.horizontalCenter: parent.horizontalCenter - anchors.right: btnRestart.left - anchors.rightMargin: 5 - anchors.bottom: parent.bottom - anchors.bottomMargin: 5 - radius: height / 2 icon.source: "qrc:/images/icons/av_icons/re-record-24px.svg" @@ -285,23 +347,19 @@ Rectangle { HoverableRadiusButton { id: btnSend - Layout.maximumWidth: 30 - Layout.preferredWidth: 30 - Layout.minimumWidth: 30 - Layout.maximumHeight: 30 - Layout.preferredHeight: 30 - Layout.minimumHeight: 30 + width: btnSize + height: btnSize + + anchors.horizontalCenter: recBox.horizontalCenter + anchors.horizontalCenterOffset: 25 + anchors.bottom: parent.bottom + anchors.bottomMargin: 5 buttonImageHeight: height buttonImageWidth: height backgroundColor: isVideo? "#000000cc" : "white" - anchors.left: btnRestart.right - anchors.leftMargin: 5 - anchors.bottom: parent.bottom - anchors.bottomMargin: 5 - radius: height / 2 icon.source: "qrc:/images/icons/av_icons/send-24px.svg" @@ -316,3 +374,4 @@ Rectangle { } } } + diff --git a/src/mainview/components/SidePanel.qml b/src/mainview/components/SidePanel.qml index 1a81d1ca8..1dc18346b 100644 --- a/src/mainview/components/SidePanel.qml +++ b/src/mainview/components/SidePanel.qml @@ -25,6 +25,7 @@ import "../../commoncomponents" Rectangle { id: sidePanelRect + color: JamiTheme.backgroundColor property bool tabBarVisible: true property int pendingRequestCount: 0 @@ -120,15 +121,14 @@ Rectangle { /* * Intended -> since strange behavior will happen without this for stackview. */ - anchors.fill: parent + anchors.top: parent.top AccountComboBox { id: accountComboBox anchors.top: sidePanelRect.top - width: sidePanelRect.width - height: 60 + height: 64 currentIndex: 0 @@ -156,7 +156,8 @@ Rectangle { onAccountChanged: { ClientWrapper.accountAdaptor.accountChanged(index) - accountChangedUIReset() + refreshAccountComboBox(0) + sidePanelRect.accountComboBoxNeedToShowWelcomePage(0) } onNeedToUpdateSmartList: { @@ -178,134 +179,78 @@ Rectangle { } } - SidePanelTabBar { - id: sidePanelTabBar - + /* + * Search bar container to embed search label + */ + ContactSearchBar { + id: contactSearchBar + width: sidePanelRect.width - 26 + height: 35 anchors.top: accountComboBox.bottom - anchors.topMargin: 20 + anchors.topMargin: 10 anchors.left: sidePanelRect.left - anchors.leftMargin: tabBarLeftMargin + anchors.leftMargin: 16 - width: sidePanelRect.width - height: Math.max(sidePanelTabBar.converstationTabHeight, - sidePanelTabBar.invitationTabHeight) + onContactSearchBarTextChanged: { + ClientWrapper.utilsAdaptor.setConversationFilter(text) + } } - Rectangle { - id: sidePanelColumnRect - - anchors.top: sidePanelTabBar.bottom - anchors.topMargin: -12 - + SidePanelTabBar { + id: sidePanelTabBar + anchors.top: contactSearchBar.bottom + anchors.topMargin: 10 width: sidePanelRect.width - height: sidePanelRect.height - accountComboBox.height - sidePanelTabBar.height + height: tabBarVisible ? 64 : 0 + } - border.color: JamiTheme.tabbarBorderColor - radius: 10 - Rectangle { - id: hideTopBoarderRect + ConversationSmartListView { + id: conversationSmartListView - anchors.top: sidePanelColumnRect.top - anchors.left: sidePanelColumnRect.left - anchors.leftMargin: tabBarLeftMargin + 5 + anchors.top: tabBarVisible ? sidePanelTabBar.bottom : contactSearchBar.bottom + anchors.topMargin: tabBarVisible ? 0 : 10 + width: parent.width + height: tabBarVisible ? sidePanelRect.height - sidePanelTabBar.height - contactSearchBar.height - accountComboBox.height - 20 : + sidePanelRect.height - contactSearchBar.height - accountComboBox.height - 20 - width: sidePanelTabBar.converstationTabWidth + sidePanelTabBar.invitationTabWidth - 9 - height: 1 + Connections { + target: ConversationsAdapter - visible: tabBarVisible + function onShowChatView(accountId, convUid) { + conversationSmartListView.needToShowChatView(accountId, + convUid) + } - color: "white" + function onShowConversationTabs(visible) { + tabBarVisible = visible + updatePendingRequestCount() + updateTotalUnreadMessagesCount() + } } - ColumnLayout { - id: columnLayoutView - - anchors.centerIn: sidePanelColumnRect - - width: sidePanelColumnRect.width - height: sidePanelColumnRect.height - 20 - - - /* - * Search bar container to embed search label - */ - ContactSearchBar { - id: contactSearchBar + onNeedToSelectItems: { + ConversationsAdapter.selectConversation(index) + } - Layout.alignment: Qt.AlignCenter - Layout.topMargin: 10 - Layout.rightMargin: 5 - Layout.leftMargin: 5 - Layout.preferredWidth: parent.width - 10 - Layout.preferredHeight: 35 + onNeedToBackToWelcomePage: { + sidePanelRect.conversationSmartListViewNeedToShowWelcomePage() + } - onContactSearchBarTextChanged: { - ClientWrapper.utilsAdaptor.setConversationFilter(text) - } - } + onNeedToAccessMessageWebView: { + sidePanelRect.conversationSmartListNeedToAccessMessageWebView( + currentUserDisplayName, currentUserAlias, + currentUID, callStackViewShouldShow, + isAudioOnly, callStateStr) + } - ConversationSmartListView { - id: conversationSmartListView - - Layout.alignment: Qt.AlignCenter - Layout.preferredWidth: parent.width - Layout.preferredHeight: parent.height - contactSearchBar.height - 30 - - Connections { - target: ConversationsAdapter - - function onShowChatView(accountId, convUid) { - conversationSmartListView.needToShowChatView(accountId, - convUid) - } - - function onShowConversationTabs(visible) { - tabBarVisible = visible - updatePendingRequestCount() - updateTotalUnreadMessagesCount() - } - } - - onNeedToSelectItems: { - ConversationsAdapter.selectConversation(index) - } - - onNeedToBackToWelcomePage: { - sidePanelRect.conversationSmartListViewNeedToShowWelcomePage() - } - - onNeedToAccessMessageWebView: { - sidePanelRect.conversationSmartListNeedToAccessMessageWebView( - currentUserDisplayName, currentUserAlias, - currentUID, callStackViewShouldShow, - isAudioOnly, callStateStr) - } - - onNeedToGrabFocus: { - contactSearchBar.clearFocus() - } - - Component.onCompleted: { - ConversationsAdapter.setQmlObject(this) - conversationSmartListView.currentIndex = -1 - } - } + onNeedToGrabFocus: { + contactSearchBar.clearFocus() } - } - onTabBarVisibleChanged: { - if (!tabBarVisible) { - sidePanelTabBar.height = 0 - sidePanelTabBar.anchors.topMargin = 12 - sidePanelColumnRect.border.width = 0 - } else { - sidePanelTabBar.height = Qt.binding(function () { - return Math.max(sidePanelTabBar.converstationTabHeight, - sidePanelTabBar.invitationTabHeight) - }) - sidePanelTabBar.anchors.topMargin = 20 - sidePanelColumnRect.border.width = 1 + Component.onCompleted: { + ConversationsAdapter.setQmlObject(this) + conversationSmartListView.currentIndex = -1 } } } diff --git a/src/mainview/components/SidePanelTabBar.qml b/src/mainview/components/SidePanelTabBar.qml index d8197e1f7..0d27f7eed 100644 --- a/src/mainview/components/SidePanelTabBar.qml +++ b/src/mainview/components/SidePanelTabBar.qml @@ -19,7 +19,9 @@ import QtQuick 2.14 import QtQuick.Controls 2.14 import QtQuick.Layouts 1.14 +import QtGraphicalEffects 1.12 import net.jami.Models 1.0 +import "../../commoncomponents" TabBar { id: tabBar @@ -30,29 +32,26 @@ TabBar { property alias invitationTabWidth: pageTwo.width property alias converstationTabHeight: pageOne.height property alias invitationTabHeight: pageTwo.height + property real opacityDegree: 0.5 visible: tabBarVisible currentIndex: 0 TabButton { - id: pageOne - - width: tabBar.width / 2 - tabButtonShrinkSize - height: textConvElement.height + 10 + id: pageOne down: true Rectangle { id: totalUnreadMessagesCountRect - anchors.right: pageOne.right - anchors.rightMargin: 5 - anchors.bottom: pageOne.bottom - anchors.bottomMargin: pageOne.height - totalUnreadMessagesCountRect.height / 2 + anchors.centerIn: buttonRectOne + anchors.verticalCenterOffset : -20 + anchors.horizontalCenterOffset : 15 - width: 14 - height: 14 + width: 16 + height: 16 visible: totalUnreadMessagesCount > 0 @@ -63,38 +62,71 @@ TabBar { text: totalUnreadMessagesCount > 9 ? "···" : totalUnreadMessagesCount color: "white" + font.pointSize: JamiTheme.textFontSize } - radius: 30 color: JamiTheme.notificationRed + } background: Rectangle { + id: buttonRectOne + width: tabBar.width / 2 + 1 + height: tabBar.height + color: JamiTheme.backgroundColor + + Image { + id: imgRectOne + anchors.horizontalCenter: buttonRectOne.horizontalCenter + anchors.top: buttonRectOne.top + anchors.topMargin: 12 + + width: 24 + height: 24 + + fillMode: Image.PreserveAspectFit + mipmap: true + source: "qrc:/images/icons/baseline-people-24px.svg" + //opacity: enabled ? 0.8 : 0.3 + opacity: pageOne.down == true ? 1.0 : opacityDegree + } - radius: 10 - width: pageOne.width + 2 - color: pageOne.down ? "white" : JamiTheme.releaseColor - border.color: JamiTheme.tabbarBorderColor + ColorOverlay { + anchors.fill: imgRectOne + source: imgRectOne + color: JamiTheme.blueLogo_ + opacity: pageOne.down == true ? 1.0 : opacityDegree + } Text { id: textConvElement - anchors.centerIn: buttonRectOne + anchors.horizontalCenter: buttonRectOne.horizontalCenter + anchors.bottom: buttonRectOne.bottom + anchors.bottomMargin: 12 horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter - text: qsTr("Converstation") + text: qsTr("CONVERSATIONS") font.pointSize: JamiTheme.textFontSize - opacity: enabled ? 1.0 : 0.3 + opacity: pageOne.down == true ? 1.0 : opacityDegree + color: JamiTheme.blueLogo_ + } + + Rectangle { + id: markerTabOne + width: buttonRectOne.width + anchors.bottom: buttonRectOne.bottom + height: 2 + color: pageOne.down == true ? JamiTheme.blueLogo_ : "transparent" } MouseArea { anchors.fill: parent hoverEnabled: true onPressed: { - buttonRectOne.color = JamiTheme.pressColor ConversationsAdapter.setConversationFilter("") contactSearchBar.setPlaceholderString( JamiTheme.contactSearchBarPlaceHolderConversationText) @@ -104,36 +136,31 @@ TabBar { forceReselectConversationSmartListCurrentIndex() } onReleased: { - buttonRectOne.color = JamiTheme.releaseColor + buttonRectOne.color = JamiTheme.backgroundColor } onEntered: { buttonRectOne.color = JamiTheme.hoverColor } onExited: { - buttonRectOne.color = Qt.binding(function () { - return pageOne.down ? "white" : JamiTheme.releaseColor - }) + buttonRectOne.color = JamiTheme.backgroundColor } } } } TabButton { - id: pageTwo - width: tabBar.width / 2 - tabButtonShrinkSize - height: textInvElement.height + 10 + id: pageTwo Rectangle { id: pendingRequestCountRect - anchors.right: pageTwo.right - anchors.rightMargin: 5 - anchors.bottom: pageTwo.bottom - anchors.bottomMargin: pageTwo.height - pendingRequestCountRect.height / 2 + anchors.centerIn: buttonRectTwo + anchors.verticalCenterOffset : -20 + anchors.horizontalCenterOffset : 15 - width: 14 - height: 14 + width: 16 + height: 16 visible: pendingRequestCount > 0 @@ -143,9 +170,9 @@ TabBar { anchors.centerIn: pendingRequestCountRect text: pendingRequestCount > 9 ? "···" : pendingRequestCount - color: "white" + color: JamiTheme.backgroundColor + font.pointSize: JamiTheme.textFontSize } - radius: 30 color: JamiTheme.notificationRed } @@ -153,29 +180,63 @@ TabBar { background: Rectangle { id: buttonRectTwo - radius: 10 - color: pageTwo.down ? "white" : JamiTheme.releaseColor - border.color: JamiTheme.tabbarBorderColor + width: tabBar.width / 2 + height: tabBar.height + color: JamiTheme.backgroundColor + + Image { + id: imgRectTwo + anchors.horizontalCenter: buttonRectTwo.horizontalCenter + anchors.top: buttonRectTwo.top + anchors.topMargin: 10 + + width: 24 + height: 24 + + fillMode: Image.PreserveAspectFit + mipmap: true + source: "qrc:/images/icons/drafts-24px.svg" + //opacity: enabled ? 0.8 : 0.3 + opacity: pageTwo.down == true ? 1.0 : opacityDegree + } + + ColorOverlay { + anchors.fill: imgRectTwo + source: imgRectTwo + color: JamiTheme.blueLogo_ + opacity: pageTwo.down == true ? 1.0 : opacityDegree + } Text { id: textInvElement - anchors.centerIn: buttonRectTwo + anchors.horizontalCenter: buttonRectTwo.horizontalCenter + anchors.bottom: buttonRectTwo.bottom + anchors.bottomMargin: 12 horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter font.pointSize: JamiTheme.textFontSize - text: qsTr("Invitation") - opacity: enabled ? 1.0 : 0.3 + text: qsTr("INVITATIONS") + //opacity: enabled ? 1.0 : 0.3 + opacity: pageTwo.down == true ? 1.0 : opacityDegree + color: JamiTheme.blueLogo_ + } + + Rectangle { + id: markerTabTwo + width: buttonRectTwo.width + anchors.bottom: buttonRectTwo.bottom + height: 2 + color: pageTwo.down == true ? JamiTheme.blueLogo_ : "transparent" } MouseArea { anchors.fill: parent hoverEnabled: true onPressed: { - buttonRectTwo.color = JamiTheme.pressColor ConversationsAdapter.setConversationFilter("PENDING") contactSearchBar.setPlaceholderString( JamiTheme.contactSearchBarPlaceHolderInivitionText) @@ -183,15 +244,13 @@ TabBar { pageOne.down = false } onReleased: { - buttonRectTwo.color = JamiTheme.releaseColor + buttonRectTwo.color = JamiTheme.backgroundColor } onEntered: { buttonRectTwo.color = JamiTheme.hoverColor } onExited: { - buttonRectTwo.color = Qt.binding(function () { - return pageTwo.down ? "white" : JamiTheme.releaseColor - }) + buttonRectTwo.color = JamiTheme.backgroundColor } } } diff --git a/src/mainview/components/UserProfile.qml b/src/mainview/components/UserProfile.qml index 072d9a6eb..fe034e78c 100644 --- a/src/mainview/components/UserProfile.qml +++ b/src/mainview/components/UserProfile.qml @@ -32,14 +32,14 @@ Dialog { property string registeredNameText: "" property string idText: "" + property int preferredImgSize: 80 modal: true - /* * Content height + margin. */ - contentHeight: userProfileDialogUpperPartColumnLayout.implicitHeight + 30 - + contentHeight: userProfileDialogLayout.implicitHeight + 60 + contentWidth: userProfileDialogLayout.implicitWidth + 60 /* * Fake focus to make sure that text edit lose focus on close. @@ -48,46 +48,67 @@ Dialog { id: fakeFocusTextEdit } - ColumnLayout { - id: userProfileDialogUpperPartColumnLayout - - anchors.centerIn: parent + contentItem: GridLayout { - spacing: 15 + id: userProfileDialogLayout + columns: 2 + rowSpacing: 10 + columnSpacing: 10 Image { id: contactImage - Layout.alignment: Qt.AlignCenter + Layout.alignment: Qt.AlignRight + Layout.preferredWidth: 130 - width: 150 - height: 150 + sourceSize.width: preferredImgSize + sourceSize.height: preferredImgSize fillMode: Image.PreserveAspectFit mipmap: true } - /* * Visible when user alias is not empty or equals to id. */ Text { id: contactAlias - Layout.alignment: Qt.AlignCenter + Layout.alignment: Qt.AlignLeft - font.pointSize: JamiTheme.textFontSize + font.pointSize: JamiTheme.titleFontSize text: textMetricsContactAliasText.elidedText visible: aliasText ? (aliasText === idText ? false : true) : false + TextMetrics { id: textMetricsContactAliasText font: contactAlias.font text: aliasText - elideWidth: userProfileDialog.width - 30 + elideWidth: userProfileDialog.width-160 elide: Qt.ElideMiddle } } + Item { + Layout.columnSpan: 2 + height: 20 + } + + Text { + Layout.alignment: Qt.AlignRight + font.pointSize: JamiTheme.menuFontSize + text: qsTr("Informations") + } + + Item { Layout.fillWidth: true } + + Text { + Layout.alignment: Qt.AlignRight + font.pointSize: JamiTheme.textFontSize + text: qsTr("Username") + visible: registeredNameText ? (registeredNameText === aliasText ? false : true) : false + color: JamiTheme.faddedFontColor + } /* * Visible when user name is not empty or equals to alias. @@ -95,57 +116,67 @@ Dialog { Text { id: contactDisplayName - Layout.alignment: Qt.AlignCenter + Layout.alignment: Qt.AlignLeft - font.pointSize: JamiTheme.textFontSize - 1 + font.pointSize: JamiTheme.textFontSize text: textMetricsContactDisplayNameText.elidedText visible: registeredNameText ? (registeredNameText === aliasText ? false : true) : false - color: JamiTheme.faddedFontColor TextMetrics { id: textMetricsContactDisplayNameText font: contactDisplayName.font text: registeredNameText - elideWidth: userProfileDialog.width - 30 + elideWidth: userProfileDialog.width-160 elide: Qt.ElideMiddle } } + Text { + Layout.alignment: Qt.AlignRight + font.pointSize: JamiTheme.textFontSize + text: qsTr("ID") + color: JamiTheme.faddedFontColor + } + TextEdit { id: contactId - Layout.alignment: Qt.AlignCenter - - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter + Layout.alignment: Qt.AlignLeft selectByMouse: true readOnly: true - font.pointSize: JamiTheme.textFontSize - 1 + font.pointSize: JamiTheme.textFontSize text: textMetricsContactIdText.elidedText TextMetrics { id: textMetricsContactIdText font: contactId.font text: idText - elideWidth: userProfileDialog.width - 30 + elideWidth: userProfileDialog.width-160 elide: Qt.ElideMiddle } } + Text { + Layout.alignment: Qt.AlignRight + font.pointSize: JamiTheme.textFontSize + text: qsTr("QR Code") + color: JamiTheme.faddedFontColor + } + Image { id: contactQrImage - Layout.alignment: Qt.AlignBottom | Qt.AlignCenter - - width: 150 - height: 150 + Layout.alignment: Qt.AlignBottom | Qt.AlignLeft fillMode: Image.PreserveAspectFit - sourceSize.width: 150 - sourceSize.height: 150 + sourceSize.width: preferredImgSize + sourceSize.height: preferredImgSize mipmap: true } + + Item { height: 20 } + } background: Rectangle { diff --git a/src/mainview/components/WelcomePage.qml b/src/mainview/components/WelcomePage.qml index a6250d003..85aea30f0 100644 --- a/src/mainview/components/WelcomePage.qml +++ b/src/mainview/components/WelcomePage.qml @@ -29,8 +29,6 @@ Rectangle { property int currentAccountIndex: 0 property int buttonPreferredSize: 30 - anchors.fill: parent - Rectangle { id: welcomeRectComponentsGroup @@ -81,7 +79,7 @@ Rectangle { Layout.preferredHeight: 50 wrapMode: Text.WordWrap - font.pointSize: JamiTheme.textFontSize - 1 + font.pointSize: JamiTheme.textFontSize horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter @@ -117,7 +115,7 @@ Rectangle { Layout.preferredWidth: welcomeRectComponentsGroup.width Layout.preferredHeight: 30 - font.pointSize: JamiTheme.textFontSize + font.pointSize: JamiTheme.textFontSize + 1 horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter @@ -136,90 +134,23 @@ Rectangle { } } - RowLayout { - id: jamiRegisteredNameRowLayout + HoverableButton { + id: copyRegisterednameButton Layout.alignment: Qt.AlignCenter - Layout.preferredWidth: buttonPreferredSize * 2 + 20 - Layout.preferredHeight: 30 - - HoverableButton { - id: copyRegisterednameButton - - Layout.alignment: Qt.AlignCenter - Layout.preferredWidth: buttonPreferredSize - Layout.preferredHeight: buttonPreferredSize + Layout.preferredWidth: buttonPreferredSize + Layout.preferredHeight: buttonPreferredSize - radius: 30 - source: "qrc:/images/icons/ic_content_copy.svg" + radius: 30 + source: "qrc:/images/icons/ic_content_copy.svg" - onClicked: { - ClientWrapper.utilsAdaptor.setText( - textMetricsjamiRegisteredNameText.text) - } - } - - HoverableButton { - id: qrCodeGenerateButton - - Layout.alignment: Qt.AlignCenter - Layout.preferredWidth: buttonPreferredSize - Layout.preferredHeight: buttonPreferredSize - - radius: 30 - source: "qrc:/images/qrcode.png" - - onClicked: { - qrDialog.open() - } + onClicked: { + ClientWrapper.utilsAdaptor.setText( + textMetricsjamiRegisteredNameText.text) } } } } - - Image { - id: sipImage - - Layout.alignment: Qt.AlignCenter - Layout.preferredWidth: 200 - Layout.preferredHeight: 200 - - - /* - * Check if account type is ring. - */ - visible: accountListModel.data(accountListModel.index( - currentAccountIndex, 0), - 260) === 1 ? false : true - fillMode: Image.PreserveAspectFit - - - /* - * Requested size. - */ - sourceSize.width: 200 - sourceSize.height: 200 - mipmap: true - } - } - - HoverableButton { - id: aboutButton - - anchors.horizontalCenter: welcomeRectComponentsGroup.horizontalCenter - anchors.bottom: welcomeRectComponentsGroup.bottom - anchors.bottomMargin: 5 - - width: 80 - height: buttonPreferredSize - - text: qsTr("About") - fontPointSize: JamiTheme.textFontSize - radius: 10 - - onClicked: { - aboutPopUpDialog.open() - } } } -- GitLab