diff --git a/images/icons/add_people-24px.svg b/images/icons/add_people-24px.svg new file mode 100644 index 00000000..536065ad --- /dev/null +++ b/images/icons/add_people-24px.svg @@ -0,0 +1,11 @@ + + + Add people + + + + + + + + \ No newline at end of file diff --git a/images/icons/back-24px.svg b/images/icons/back-24px.svg new file mode 100644 index 00000000..b1cfd2f2 --- /dev/null +++ b/images/icons/back-24px.svg @@ -0,0 +1,9 @@ + + + Moderateur + + + + + + \ No newline at end of file diff --git a/images/icons/message_audio-24px.svg b/images/icons/message_audio-24px.svg new file mode 100644 index 00000000..880e617c --- /dev/null +++ b/images/icons/message_audio-24px.svg @@ -0,0 +1,13 @@ + + + Message audio + + + + + + + + + + \ No newline at end of file diff --git a/images/icons/message_video-24px.svg b/images/icons/message_video-24px.svg new file mode 100644 index 00000000..2ac61159 --- /dev/null +++ b/images/icons/message_video-24px.svg @@ -0,0 +1,12 @@ + + + Message video + + + + + + + + + \ No newline at end of file diff --git a/images/icons/place_audiocall-24px.svg b/images/icons/place_audiocall-24px.svg new file mode 100644 index 00000000..1bb3ece5 --- /dev/null +++ b/images/icons/place_audiocall-24px.svg @@ -0,0 +1,11 @@ + + + Moderateur + + + + + + + + \ No newline at end of file diff --git a/images/icons/place_videocall-24px.svg b/images/icons/place_videocall-24px.svg new file mode 100644 index 00000000..0c97feca --- /dev/null +++ b/images/icons/place_videocall-24px.svg @@ -0,0 +1,11 @@ + + + Moderateur + + + + + + + + \ No newline at end of file diff --git a/images/icons/plugins-24px.svg b/images/icons/plugins-24px.svg new file mode 100644 index 00000000..6d213d3a --- /dev/null +++ b/images/icons/plugins-24px.svg @@ -0,0 +1,11 @@ + + + Plugin + + + + + + + + \ No newline at end of file diff --git a/images/icons/quote.svg b/images/icons/quote.svg new file mode 100644 index 00000000..a6b896a3 --- /dev/null +++ b/images/icons/quote.svg @@ -0,0 +1,12 @@ + + + noun_Quote_3101618 + + + + + + + + + \ No newline at end of file diff --git a/images/icons/send-24px.svg b/images/icons/send-24px.svg new file mode 100644 index 00000000..c41553c7 --- /dev/null +++ b/images/icons/send-24px.svg @@ -0,0 +1,11 @@ + + + Send + + + + + + + + \ No newline at end of file diff --git a/images/icons/send_file-24px.svg b/images/icons/send_file-24px.svg new file mode 100644 index 00000000..2aa34a73 --- /dev/null +++ b/images/icons/send_file-24px.svg @@ -0,0 +1,11 @@ + + + Moderateur + + + + + + + + \ No newline at end of file diff --git a/images/icons/settings-24px.svg b/images/icons/settings-24px.svg new file mode 100644 index 00000000..4bed245a --- /dev/null +++ b/images/icons/settings-24px.svg @@ -0,0 +1,13 @@ + + + Moderateur + + + + + + + + + + \ No newline at end of file diff --git a/images/icons/share-24px.svg b/images/icons/share-24px.svg new file mode 100644 index 00000000..4fc06ef2 --- /dev/null +++ b/images/icons/share-24px.svg @@ -0,0 +1,11 @@ + + + Moderateur + + + + + + + + diff --git a/resources.qrc b/resources.qrc index 07f0551f..77b0432c 100644 --- a/resources.qrc +++ b/resources.qrc @@ -129,5 +129,17 @@ images/logo-jami-standard-coul-white.svg images/icons/moderator.svg images/icons/star_outline-24px.svg + images/icons/send_file-24px.svg + images/icons/message_video-24px.svg + images/icons/message_audio-24px.svg + images/icons/send-24px.svg + images/icons/place_videocall-24px.svg + images/icons/back-24px.svg + images/icons/place_audiocall-24px.svg + images/icons/add_people-24px.svg + images/icons/share-24px.svg + images/icons/settings-24px.svg + images/icons/quote.svg + images/icons/plugins-24px.svg diff --git a/src/commoncomponents/AvatarImage.qml b/src/commoncomponents/AvatarImage.qml index a412cfdc..f9dcf353 100644 --- a/src/commoncomponents/AvatarImage.qml +++ b/src/commoncomponents/AvatarImage.qml @@ -213,7 +213,7 @@ Item { text: unreadMessagesCount > 9 ? "…" : unreadMessagesCount color: "white" - font.pointSize: JamiTheme.textFontSize - 2 + font.pointSize: JamiTheme.indicatorFontSize } radius: 30 diff --git a/src/constant/JamiStrings.qml b/src/constant/JamiStrings.qml index 8dd60248..f1b7c5d8 100644 --- a/src/constant/JamiStrings.qml +++ b/src/constant/JamiStrings.qml @@ -206,6 +206,13 @@ Item { property string viewPlugin: qsTr("View plugin") property string noVideoDevice: qsTr("No video device") + // Chatview header + property string hideChatView: qsTr("Hide chat view") + property string placeAudioCall: qsTr("Place audio call") + property string placeVideoCall: qsTr("Place video call") + property string showPlugins: qsTr("Show available plugins") + property string addToConversations: qsTr("Add to conversations") + // ConnectToAccountManager property string enterJAMSURL: qsTr("Enter Jami Account Management Server (JAMS) URL") property string required: qsTr("Required") diff --git a/src/constant/JamiTheme.qml b/src/constant/JamiTheme.qml index 1c0863b0..363830d1 100644 --- a/src/constant/JamiTheme.qml +++ b/src/constant/JamiTheme.qml @@ -52,9 +52,11 @@ Item { // Side panel property color presenceGreen: "#4cd964" property color notificationRed: "#ff3b30" + property color notificationBlue: "#31b7ff" property color unPresenceOrange: "orange" property color contactSearchBarPlaceHolderTextFontColor: "#767676" property color draftRed: "#cf5300" + property color selectedTabColor: darkTheme? whiteColor : blackColor // General buttons property color pressedButtonColor: darkTheme? pressColor : "#a0a0a0" @@ -127,12 +129,12 @@ Item { property color messageInTxtColor: textColor property color fileOutTimestampColor: darkTheme? "#eee" : "#555" property color fileInTimestampColor: darkTheme? "#999" : "#555" - property color chatviewBgColor: darkTheme? "#202020" : "white" - property color nonActionIconColor: darkTheme? "white" : "#212121" + property color chatviewBgColor: darkTheme? "#131313" : "#fafafb" + property color bgInvitationRectColor: darkTheme? "#222222" : whiteColor property color placeholderTextColor: darkTheme? "#2b2b2b" : "#d3d3d3" property color inviteHoverColor: darkTheme? blackColor : whiteColor - property color hairlineColor: darkTheme? "262626" : "#d9d9d9" - property color chatviewButtonColor: darkTheme? "#28b1ed" : "#003b4e" + property color chatviewButtonColor: darkTheme? whiteColor : blackColor + property color bgTextInput: darkTheme? "#060608" : whiteColor // Font. property color faddedFontColor: darkTheme? "#c0c0c0" : "#a0a0a0" @@ -158,6 +160,7 @@ Item { // Sizes property int splitViewHandlePreferredWidth: 4 + property int indicatorFontSize: 6 property int tinyFontSize: 7 property int textFontSize: 9 property int settingsFontSize: 9 diff --git a/src/mainview/components/AccountComboBox.qml b/src/mainview/components/AccountComboBox.qml index 499f0f85..84c799f4 100644 --- a/src/mainview/components/AccountComboBox.qml +++ b/src/mainview/components/AccountComboBox.qml @@ -237,7 +237,7 @@ ComboBox { visible: AccountAdapter.currentAccountType === Profile.Type.RING toolTipText: JamiStrings.displayQRCode - source: "qrc:/images/icons/qr_code-24px.svg" + source: "qrc:/images/icons/share-24px.svg" normalColor: JamiTheme.backgroundColor imageColor: JamiTheme.textColor @@ -252,7 +252,7 @@ ComboBox { id: settingsButton source: !mainView.inSettingsView ? - "qrc:/images/icons/round-settings-24px.svg" : + "qrc:/images/icons/settings-24px.svg" : "qrc:/images/icons/round-close-24px.svg" normalColor: JamiTheme.backgroundColor diff --git a/src/mainview/components/MessageWebView.qml b/src/mainview/components/MessageWebView.qml index 5eee18ff..95be7d90 100644 --- a/src/mainview/components/MessageWebView.qml +++ b/src/mainview/components/MessageWebView.qml @@ -89,10 +89,13 @@ Rectangle { --file-in-timestamp-color:' + JamiTheme.fileOutTimestampColor + ';\ --file-out-timestamp-color:' + JamiTheme.fileInTimestampColor + ';\ --bg-color:' + JamiTheme.chatviewBgColor + ';\ - --non-action-icon-color:' + JamiTheme.nonActionIconColor + ';\ + --action-icon-color:' + JamiTheme.chatviewButtonColor + ';\ + --action-icon-hover-color:' + JamiTheme.hoveredButtonColor + ';\ + --action-icon-press-color:' + JamiTheme.pressedButtonColor + ';\ --placeholder-text-color:' + JamiTheme.placeholderTextColor + ';\ --invite-hover-color:' + JamiTheme.inviteHoverColor + ';\ - --hairline-color:' + JamiTheme.hairlineColor + ';")' + --bg-text-input:' + JamiTheme.bgTextInput + ';\ + --bg-invitation-rect:' + JamiTheme.bgInvitationRectColor + ';")' messageWebView.runJavaScript("init_picker(" + JamiTheme.darkTheme + ");") messageWebView.runJavaScript(theme); } @@ -199,17 +202,14 @@ Rectangle { function acceptInvitation() { MessagesAdapter.acceptInvitation() - messageWebViewHeader.sendContactRequestButtonVisible = false } function refuseInvitation() { MessagesAdapter.refuseInvitation() - messageWebViewHeader.sendContactRequestButtonVisible = false } function blockConversation() { MessagesAdapter.blockConversation() - messageWebViewHeader.sendContactRequestButtonVisible = false } function emitMessagesCleared() { diff --git a/src/mainview/components/MessageWebViewHeader.qml b/src/mainview/components/MessageWebViewHeader.qml index d6192c80..26830bad 100644 --- a/src/mainview/components/MessageWebViewHeader.qml +++ b/src/mainview/components/MessageWebViewHeader.qml @@ -31,7 +31,7 @@ Rectangle { property string userAliasLabelText property string userUserNameLabelText - property string backToWelcomeViewButtonSource: "qrc:/images/icons/ic_arrow_back_24px.svg" + property string backToWelcomeViewButtonSource: "qrc:/images/icons/back-24px.svg" property alias sendContactRequestButtonVisible: sendContactRequestButton.visible signal backClicked @@ -39,7 +39,8 @@ Rectangle { signal pluginSelector function resetBackToWelcomeViewButtonSource(reset) { - backToWelcomeViewButtonSource = reset ? "qrc:/images/icons/ic_arrow_back_24px.svg" : "qrc:/images/icons/round-close-24px.svg" + backToWelcomeViewButtonSource = reset ? "qrc:/images/icons/back-24px.svg" + : "qrc:/images/icons/round-close-24px.svg" } function toggleMessagingHeaderButtonsVisible(visible) { @@ -47,7 +48,7 @@ Rectangle { startAVideoCallButton.visible = visible } - color: JamiTheme.secondaryBackgroundColor + color: JamiTheme.chatviewBgColor RowLayout { id: messagingHeaderRectRowLayout @@ -58,15 +59,18 @@ Rectangle { id: backToWelcomeViewButton Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft - Layout.leftMargin: 16 + Layout.leftMargin: 8 + + preferredSize: 24 source: backToWelcomeViewButtonSource + toolTipText: JamiStrings.hideChatView - normalColor: JamiTheme.secondaryBackgroundColor + normalColor: JamiTheme.chatviewBgColor imageColor: JamiTheme.chatviewButtonColor onClicked: { - if (backToWelcomeViewButtonSource === "qrc:/images/icons/ic_arrow_back_24px.svg") + if (backToWelcomeViewButtonSource === "qrc:/images/icons/back-24px.svg") messagingHeaderRect.backClicked() else messagingHeaderRect.needToHideConversationInCall() @@ -84,7 +88,7 @@ Rectangle { Layout.fillHeight: true Layout.topMargin: 7 Layout.bottomMargin: 7 - Layout.leftMargin: 16 + Layout.leftMargin: 8 color: JamiTheme.transparentColor @@ -132,7 +136,7 @@ Rectangle { Layout.alignment: Qt.AlignRight | Qt.AlignVCenter Layout.preferredWidth: childrenRect.width + 18 Layout.preferredHeight: childrenRect.height - Layout.rightMargin: 16 + Layout.rightMargin: 8 color: "transparent" @@ -140,12 +144,13 @@ Rectangle { id: startAAudioCallButton anchors.right: startAVideoCallButton.left - anchors.rightMargin: 16 + anchors.rightMargin: 8 anchors.verticalCenter: buttonGroup.verticalCenter - source: "qrc:/images/icons/ic_phone_24px.svg" + source: "qrc:/images/icons/place_audiocall-24px.svg" + toolTipText: JamiStrings.placeAudioCall - normalColor: JamiTheme.secondaryBackgroundColor + normalColor: JamiTheme.chatviewBgColor imageColor: JamiTheme.chatviewButtonColor onClicked: { @@ -162,12 +167,13 @@ Rectangle { sendContactRequestButton.visible ? sendContactRequestButton.left : buttonGroup.right - anchors.rightMargin: 16 + anchors.rightMargin: 8 anchors.verticalCenter: buttonGroup.verticalCenter - source: "qrc:/images/icons/videocam-24px.svg" + source: "qrc:/images/icons/place_videocall-24px.svg" + toolTipText: JamiStrings.placeVideoCall - normalColor: JamiTheme.secondaryBackgroundColor + normalColor: JamiTheme.chatviewBgColor imageColor: JamiTheme.chatviewButtonColor onClicked: { @@ -192,12 +198,13 @@ Rectangle { anchors.right: sendContactRequestButton.visible ? sendContactRequestButton.left : buttonGroup.right - anchors.rightMargin: 16 + anchors.rightMargin: sendContactRequestButton.visible ? 8 : 16 anchors.verticalCenter: buttonGroup.verticalCenter - source: "qrc:/images/icons/extension_24dp.svg" + source: "qrc:/images/icons/plugins-24px.svg" + toolTipText: JamiStrings.showPlugins - normalColor: JamiTheme.secondaryBackgroundColor + normalColor: JamiTheme.chatviewBgColor imageColor: JamiTheme.chatviewButtonColor onClicked: pluginSelector() @@ -210,10 +217,10 @@ Rectangle { anchors.rightMargin: 8 anchors.verticalCenter: buttonGroup.verticalCenter - width: sendContactRequestButton.visible ? preferredSize : 0 - source: "qrc:/images/icons/person_add-24px.svg" + source: "qrc:/images/icons/add_people-24px.svg" + toolTipText: JamiStrings.addToConversations - normalColor: JamiTheme.secondaryBackgroundColor + normalColor: JamiTheme.chatviewBgColor imageColor: JamiTheme.chatviewButtonColor onClicked: { diff --git a/src/mainview/components/SidePanel.qml b/src/mainview/components/SidePanel.qml index 9686a761..5baf1968 100644 --- a/src/mainview/components/SidePanel.qml +++ b/src/mainview/components/SidePanel.qml @@ -112,7 +112,7 @@ Rectangle { anchors.top: contactSearchBar.bottom anchors.topMargin: 10 width: sidePanelRect.width - height: tabBarVisible ? 64 : 0 + height: tabBarVisible ? 48 : 0 } Rectangle { diff --git a/src/mainview/components/SidePanelTabBar.qml b/src/mainview/components/SidePanelTabBar.qml index 980efbf6..6cfd0248 100644 --- a/src/mainview/components/SidePanelTabBar.qml +++ b/src/mainview/components/SidePanelTabBar.qml @@ -68,31 +68,6 @@ TabBar { id: pageOne down: true - Rectangle { - id: totalUnreadMessagesCountRect - - anchors.centerIn: buttonRectOne - anchors.verticalCenterOffset : -20 - anchors.horizontalCenterOffset : 15 - - width: 16 - height: 16 - - visible: totalUnreadMessagesCount > 0 - - Text { - id: totalUnreadMessagesCountText - - anchors.centerIn: totalUnreadMessagesCountRect - - text: totalUnreadMessagesCount > 9 ? "···" : totalUnreadMessagesCount - color: "white" - font.pointSize: JamiTheme.textFontSize - } - radius: 30 - color: JamiTheme.notificationRed - - } background: Rectangle { @@ -101,29 +76,6 @@ TabBar { 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 - } - - ColorOverlay { - anchors.fill: imgRectOne - source: imgRectOne - color: JamiTheme.blueLogo_ - opacity: pageOne.down == true ? 1.0 : opacityDegree - } - Text { id: textConvElement @@ -137,7 +89,33 @@ TabBar { text: JamiStrings.conversations font.pointSize: JamiTheme.textFontSize opacity: pageOne.down == true ? 1.0 : opacityDegree - color: JamiTheme.blueLogo_ + color: JamiTheme.textColor + } + + Rectangle { + id: totalUnreadMessagesCountRect + + anchors.left: textConvElement.right + anchors.leftMargin: 4 + anchors.verticalCenter: textConvElement.verticalCenter + anchors.verticalCenterOffset : -5 + + width: 12 + height: 12 + + visible: totalUnreadMessagesCount > 0 + + Text { + id: totalUnreadMessagesCountText + + anchors.centerIn: totalUnreadMessagesCountRect + + text: totalUnreadMessagesCount > 9 ? "···" : totalUnreadMessagesCount + color: "white" + font.pointSize: JamiTheme.indicatorFontSize + } + radius: 30 + color: JamiTheme.notificationBlue } Rectangle { @@ -145,7 +123,7 @@ TabBar { width: buttonRectOne.width anchors.bottom: buttonRectOne.bottom height: 2 - color: pageOne.down == true ? JamiTheme.blueLogo_ : "transparent" + color: pageOne.down == true ? JamiTheme.textColor : "transparent" } MouseArea { @@ -180,31 +158,6 @@ TabBar { id: pageTwo - Rectangle { - id: pendingRequestCountRect - - anchors.centerIn: buttonRectTwo - anchors.verticalCenterOffset : -20 - anchors.horizontalCenterOffset : 15 - - width: 16 - height: 16 - - visible: pendingRequestCount > 0 - - Text { - id: pendingRequestCountText - - anchors.centerIn: pendingRequestCountRect - - text: pendingRequestCount > 9 ? "···" : pendingRequestCount - color: JamiTheme.backgroundColor - font.pointSize: JamiTheme.textFontSize - } - radius: 30 - color: JamiTheme.notificationRed - } - background: Rectangle { id: buttonRectTwo @@ -212,29 +165,6 @@ TabBar { 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 @@ -250,7 +180,33 @@ TabBar { text: JamiStrings.invitations //opacity: enabled ? 1.0 : 0.3 opacity: pageTwo.down == true ? 1.0 : opacityDegree - color: JamiTheme.blueLogo_ + color: JamiTheme.textColor + } + + Rectangle { + id: pendingRequestCountRect + + anchors.left: textInvElement.right + anchors.leftMargin: 4 + anchors.verticalCenter: textInvElement.verticalCenter + anchors.verticalCenterOffset : -5 + + width: 12 + height: 12 + + visible: pendingRequestCount > 0 + + Text { + id: pendingRequestCountText + + anchors.centerIn: pendingRequestCountRect + + text: pendingRequestCount > 9 ? "···" : pendingRequestCount + color: "white" + font.pointSize: JamiTheme.indicatorFontSize + } + radius: 30 + color: JamiTheme.notificationBlue } Rectangle { @@ -258,7 +214,7 @@ TabBar { width: buttonRectTwo.width anchors.bottom: buttonRectTwo.bottom height: 2 - color: pageTwo.down == true ? JamiTheme.blueLogo_ : "transparent" + color: pageTwo.down == true ? JamiTheme.textColor : "transparent" } MouseArea { diff --git a/src/messagesadapter.cpp b/src/messagesadapter.cpp index 3efffb90..829b89a6 100644 --- a/src/messagesadapter.cpp +++ b/src/messagesadapter.cpp @@ -82,20 +82,15 @@ MessagesAdapter::setupChatView(const QString& convUid) } catch (...) { } - bool shouldShowSendContactRequestBtn = (contactInfo.profileInfo.type - == lrc::api::profile::Type::PENDING - || contactInfo.profileInfo.type - == lrc::api::profile::Type::TEMPORARY); + bool isPending = contactInfo.profileInfo.type == profile::Type::TEMPORARY; QMetaObject::invokeMethod(qmlObj_, "setSendContactRequestButtonVisible", - Q_ARG(QVariant, shouldShowSendContactRequestBtn)); + Q_ARG(QVariant, isPending)); setMessagesVisibility(false); - /* - * Type Indicator (contact). - */ + // Type Indicator (contact). TODO: Not shown when invitation request? contactIsComposing(convInfo.uid, "", false); connect(lrcInstance_->getCurrentConversationModel(), &ConversationModel::composingStatusChanged, @@ -106,9 +101,7 @@ MessagesAdapter::setupChatView(const QString& convUid) contactIsComposing(convUid, contactUri, isComposing); }); - /* - * Draft and message content set up. - */ + // Draft and message content set up. Utils::oneShotConnect(qmlObj_, SIGNAL(sendMessageContentSaved(const QString&)), this, diff --git a/src/messagesadapter.h b/src/messagesadapter.h index 2757151e..8fdcbf85 100644 --- a/src/messagesadapter.h +++ b/src/messagesadapter.h @@ -74,7 +74,7 @@ protected: // Run corrsponding js functions, c++ to qml. void setMessagesVisibility(bool visible); void requestSendMessageContent(); - void setInvitation(bool show, const QString& contactUri = "", const QString& contactId = ""); + void setInvitation(bool show, const QString& contactUri = {}, const QString& contactId = {}); void clear(); void printHistory(lrc::api::ConversationModel& conversationModel, const std::map interactions); @@ -89,7 +89,7 @@ protected: void setMessagesFileContent(const QString& path); void removeInteraction(uint64_t interactionId); void setSendMessageContent(const QString& content); - void contactIsComposing(const QString& uid, const QString& contactUri, bool isComposing); + void contactIsComposing(const QString& convUid, const QString& contactUri, bool isComposing); Q_SIGNALS: void needToUpdateSmartList();