diff --git a/src/commoncomponents/MaterialLineEdit.qml b/src/commoncomponents/MaterialLineEdit.qml
index 0b72d683a426b7f255ab9b58d6260db927f14433..9a9c4e446829e851ca5aac1d0078e1aaba5724fd 100644
--- a/src/commoncomponents/MaterialLineEdit.qml
+++ b/src/commoncomponents/MaterialLineEdit.qml
@@ -73,7 +73,7 @@ TextField {
wrapMode: Text.Wrap
readOnly: false
selectByMouse: true
- selectionColor: JamiTheme.contactSearchBarPlaceHolderTextFontColor
+ selectionColor: JamiTheme.placeHolderTextFontColor
font.pointSize: 10
padding: 16
font.kerning: true
@@ -135,7 +135,7 @@ TextField {
background: Rectangle {
anchors.fill: parent
- radius: JamiTheme.lineEditRadius
+ radius: JamiTheme.primaryRadius
border.color: readOnly? "transparent" : borderColor
color: readOnly? "transparent" : backgroundColor
}
diff --git a/src/constant/JamiTheme.qml b/src/constant/JamiTheme.qml
index 68c0c899fe7920590e44927292e22ab30fd410fd..4f8b4def8a18d699039e41380cbd867a973363a3 100644
--- a/src/constant/JamiTheme.qml
+++ b/src/constant/JamiTheme.qml
@@ -34,34 +34,36 @@ Item {
property color darkGreyColorOpacity: "#be272727" // 77%
property color transparentColor: "transparent"
- property color primaryForegroundColor: darkTheme? whiteColor : blackColor
- property color primaryBackgroundColor: darkTheme? bgDarkMode_ : whiteColor
+ property color primaryForegroundColor: darkTheme ? whiteColor : blackColor
+ property color primaryBackgroundColor: darkTheme ? bgDarkMode_ : whiteColor
property color backgroundColor: darkTheme? bgSideBarDarkMode_ : lightGrey_
property color shadowColor: "#80000000"
- property color secondaryBackgroundColor: darkTheme? bgDarkMode_ : "white"
+ property color secondaryBackgroundColor: darkTheme ? bgDarkMode_ : whiteColor
property color greyBorderColor: "#333"
property color selectionBlue: darkTheme? "#0061a5" : "#109ede"
- property color hoverColor: darkTheme? "#515151" : "#c7c7c7"
- property color pressColor: darkTheme? "#777" : "#c0c0c0"
- property color selectedColor: darkTheme? "#0e81c5" : "#e0e0e0"
- property color editBackgroundColor: darkTheme? "#373737" : lightGrey_
+ property color hoverColor: darkTheme ? "#515151" : "#c7c7c7"
+ property color pressColor: darkTheme ? "#777" : "#c0c0c0"
+ property color selectedColor: darkTheme ? "#0e81c5" : "#e0e0e0"
+ property color editBackgroundColor: darkTheme ? "#373737" : lightGrey_
property color textColor: primaryForegroundColor
- property color tabbarBorderColor: darkTheme? "black" : "#e3e3e3"
+ property color tabbarBorderColor: darkTheme ? blackColor : "#e3e3e3"
// Side panel
property color presenceGreen: "#4cd964"
property color notificationRed: "#ff3b30"
property color notificationBlue: "#31b7ff"
property color unPresenceOrange: "orange"
- property color contactSearchBarPlaceHolderTextFontColor: "#767676"
+ property color placeHolderTextFontColor: "#767676"
property color draftRed: "#cf5300"
- property color selectedTabColor: darkTheme? whiteColor : blackColor
+ property color selectedTabColor: primaryForegroundColor
+ property color filterBadgeColor: mediumGrey
+ property color filterBadgeTextColor: blackColor
// General buttons
- property color pressedButtonColor: darkTheme? pressColor : "#a0a0a0"
- property color hoveredButtonColor: darkTheme? hoverColor : "#c7c7c7"
- property color normalButtonColor: darkTheme? backgroundColor : "#e0e0e0"
+ property color pressedButtonColor: darkTheme ? pressColor : "#a0a0a0"
+ property color hoveredButtonColor: darkTheme ? hoverColor : "#c7c7c7"
+ property color normalButtonColor: darkTheme ? backgroundColor : "#e0e0e0"
property color invertedPressedButtonColor: Qt.rgba(0, 0, 0, 0.5)
property color invertedHoveredButtonColor: Qt.rgba(0, 0, 0, 0.6)
@@ -70,13 +72,13 @@ Item {
property color buttonTintedBlue: "#00aaff"
property color buttonTintedBlueHovered: "#0e81c5"
property color buttonTintedBluePressed: "#273261"
- property color buttonTintedGrey: darkTheme? "#555" : "#999"
+ property color buttonTintedGrey: darkTheme ? "#555" : "#999"
property color buttonTintedGreyHovered: "#777"
property color buttonTintedGreyPressed: "#777"
- property color buttonTintedGreyInactive: darkTheme? "#777" : "#bbb"
- property color buttonTintedBlack: darkTheme? "#fff" : "#333"
- property color buttonTintedBlackHovered: darkTheme? "#ddd" : "#111"
- property color buttonTintedBlackPressed: darkTheme? "#ddd" : "#000"
+ property color buttonTintedGreyInactive: darkTheme ? "#777" : "#bbb"
+ property color buttonTintedBlack: darkTheme ? "#fff" : "#333"
+ property color buttonTintedBlackHovered: darkTheme ? "#ddd" : "#111"
+ property color buttonTintedBlackPressed: darkTheme ? "#ddd" : "#000"
property color buttonTintedRed: "red"
property color buttonTintedRedHovered: "#c00"
property color buttonTintedRedPressed: "#b00"
@@ -119,26 +121,26 @@ Item {
property color comboBoxBackgroundColor: darkTheme ? editBackgroundColor : selectedColor
// Chatview
- property color jamiLightBlue: darkTheme? "#003b4e" : Qt.rgba(59, 193, 211, 0.3)
- property color jamiDarkBlue: darkTheme? "#28b1ed" : "#003b4e"
+ property color jamiLightBlue: darkTheme ? "#003b4e" : Qt.rgba(59, 193, 211, 0.3)
+ property color jamiDarkBlue: darkTheme ? "#28b1ed" : "#003b4e"
property color chatviewTextColor: textColor
- property color timestampColor: darkTheme? "#bbb" : "#333"
- property color messageOutBgColor: darkTheme? "#28b1ed" : "#cfd8dc"
+ property color timestampColor: darkTheme ? "#bbb" : "#333"
+ property color messageOutBgColor: darkTheme ? "#28b1ed" : "#cfd8dc"
property color messageOutTxtColor: textColor
property color messageInBgColor: darkTheme? "#616161" : "#cfebf5"
property color messageInTxtColor: textColor
- property color fileOutTimestampColor: darkTheme? "#eee" : "#555"
- property color fileInTimestampColor: darkTheme? "#999" : "#555"
- property color chatviewBgColor: darkTheme? bgDarkMode_ : whiteColor
- property color bgInvitationRectColor: darkTheme? "#222222" : whiteColor
- property color placeholderTextColor: darkTheme? "#2b2b2b" : "#d3d3d3"
- property color inviteHoverColor: darkTheme? blackColor : whiteColor
- property color chatviewButtonColor: darkTheme? whiteColor : blackColor
- property color bgTextInput: darkTheme? "#060608" : whiteColor
+ property color fileOutTimestampColor: darkTheme ? "#eee" : "#555"
+ property color fileInTimestampColor: darkTheme ? "#999" : "#555"
+ property color chatviewBgColor: darkTheme ? bgDarkMode_ : whiteColor
+ property color bgInvitationRectColor: darkTheme ? "#222222" : whiteColor
+ property color placeholderTextColor: darkTheme ? "#2b2b2b" : "#d3d3d3"
+ property color inviteHoverColor: darkTheme ? blackColor : whiteColor
+ property color chatviewButtonColor: darkTheme ? whiteColor : blackColor
+ property color bgTextInput: darkTheme ? "#060608" : whiteColor
// Font.
property color faddedFontColor: darkTheme? "#c0c0c0" : "#a0a0a0"
- property color faddedLastInteractionFontColor: darkTheme? "#c0c0c0" : "#505050"
+ property color faddedLastInteractionFontColor: darkTheme ? "#c0c0c0" : "#505050"
// Jami theme colors
function rgb256(r, g, b) {
@@ -146,8 +148,9 @@ Item {
}
property color darkGrey: rgb256(63, 63, 63)
- property color blueLogo_: darkTheme? "white" : rgb256(0, 7, 71)
+ property color blueLogo_: darkTheme ? whiteColor : rgb256(0, 7, 71)
property color lightGrey_: rgb256(242, 242, 242)
+ property color mediumGrey: rgb256(218, 219, 220)
property color grey_: rgb256(160, 160, 160)
property color red_: rgb256(251, 72, 71)
property color urgentOrange_: rgb256(255, 165, 0)
@@ -169,7 +172,10 @@ Item {
property real menuFontSize: 12
property real headerFontSize: 13
property real titleFontSize: 16
- property real lineEditRadius: 4
+ property real primaryRadius: 4
+ property real smartlistItemFontSize: 10.5
+ property real filterItemFontSize: smartlistItemFontSize
+ property real filterBadgeFontSize: 8.25
property real maximumWidthSettingsView: 600
property real settingsHeaderpreferredHeight: 64
diff --git a/src/mainview/components/ContactSearchBar.qml b/src/mainview/components/ContactSearchBar.qml
index 71a2bc27271e301b4694b3aa6608be5fb921e91b..6cdc25a6a9845421d6f2bf0875c35830c404bb52 100644
--- a/src/mainview/components/ContactSearchBar.qml
+++ b/src/mainview/components/ContactSearchBar.qml
@@ -37,7 +37,7 @@ Rectangle {
fakeFocus.forceActiveFocus()
}
- radius: JamiTheme.lineEditRadius
+ radius: JamiTheme.primaryRadius
color: JamiTheme.secondaryBackgroundColor
FocusScope {
@@ -83,10 +83,10 @@ Rectangle {
font.kerning: true
selectByMouse: true
- selectionColor: JamiTheme.contactSearchBarPlaceHolderTextFontColor
+ selectionColor: JamiTheme.placeHolderTextFontColor
placeholderText: JamiStrings.contactSearchConversation
- placeholderTextColor: JamiTheme.contactSearchBarPlaceHolderTextFontColor
+ placeholderTextColor: JamiTheme.placeHolderTextFontColor
background: Rectangle {
id: searchBarBackground
@@ -109,7 +109,7 @@ Rectangle {
anchors.rightMargin: 10
preferredSize: 20
- radius: JamiTheme.lineEditRadius
+ radius: JamiTheme.primaryRadius
visible: contactSearchBar.text.length
diff --git a/src/mainview/components/ConversationSmartListViewItemDelegate.qml b/src/mainview/components/ConversationSmartListViewItemDelegate.qml
index cac1eb71bc046bd9d2a5cd1a0f7eea2aa7c481ab..cc4ca6d4ff955e418f68a4a2428ad7c4ca3ecb0f 100644
--- a/src/mainview/components/ConversationSmartListViewItemDelegate.qml
+++ b/src/mainview/components/ConversationSmartListViewItemDelegate.qml
@@ -130,7 +130,7 @@ ItemDelegate {
text: DisplayName === undefined ? "" : DisplayName
}
text: textMetricsConversationSmartListUserName.elidedText
- font.pointSize: JamiTheme.menuFontSize
+ font.pointSize: JamiTheme.smartlistItemFontSize
color: JamiTheme.textColor
}
diff --git a/src/mainview/components/FilterTabButton.qml b/src/mainview/components/FilterTabButton.qml
index 5a16bb0594e7b1ecdd7bbb8b5a6a1b6909d89549..5f70ac661c3ef884e4f90f9e814bd7a513c0d2ab 100644
--- a/src/mainview/components/FilterTabButton.qml
+++ b/src/mainview/components/FilterTabButton.qml
@@ -49,49 +49,51 @@ TabButton {
JamiTheme.hoverColor :
JamiTheme.backgroundColor
- Text {
- id: label
-
+ RowLayout {
anchors.horizontalCenter: rect.horizontalCenter
- anchors.bottom: rect.bottom
- anchors.bottomMargin: 12
+ anchors.verticalCenter: rect.verticalCenter
- horizontalAlignment: Text.AlignHCenter
- verticalAlignment: Text.AlignVCenter
+ Text {
+ id: label
- font.pointSize: JamiTheme.textFontSize
- color: Qt.lighter(JamiTheme.textColor, root.down ? 1.0 : 1.5)
- }
+ Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
- Rectangle {
- id: badgeRect
+ font.pointSize: JamiTheme.filterItemFontSize
+ color: Qt.lighter(JamiTheme.textColor,
+ root.down == true ? 1.0 : 1.5)
+ }
- anchors.left: label.right
- anchors.leftMargin: 4
- anchors.verticalCenter: label.verticalCenter
- anchors.verticalCenterOffset : -5
+ Rectangle {
+ id: badgeRect
- width: 12
- height: 12
+ readonly property real size: 20
- visible: badgeCount > 0
+ Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
- Text {
- anchors.centerIn: badgeRect
- text: badgeCount > 9 ? "···" : badgeCount
- color: JamiTheme.whiteColor
- font.pointSize: JamiTheme.indicatorFontSize
+ width: size
+ height: size
+ radius: JamiTheme.primaryRadius
+ color: JamiTheme.filterBadgeColor
+
+ visible: badgeCount > 0
+
+ Text {
+ anchors.centerIn: badgeRect
+ text: badgeCount > 9 ? "…" : badgeCount
+ color: JamiTheme.filterBadgeTextColor
+ font.pointSize: JamiTheme.filterBadgeFontSize
+ }
}
- radius: 30
- color: JamiTheme.notificationBlue
}
+ }
- Rectangle {
- width: rect.width
- anchors.bottom: rect.bottom
- height: 2
- color: root.down ? JamiTheme.textColor : "transparent"
- }
+ Rectangle {
+ width: rect.width
+ anchors.bottom: rect.bottom
+ height: 2
+ color: root.down === true ?
+ JamiTheme.textColor :
+ "transparent"
}
Shortcut {
diff --git a/src/mainview/components/SidePanel.qml b/src/mainview/components/SidePanel.qml
index 8cb8872ec23e351e213dfa4216e07b173e757c9e..fde7cc28811487d456efeda43197ebc59e6326d7 100644
--- a/src/mainview/components/SidePanel.qml
+++ b/src/mainview/components/SidePanel.qml
@@ -114,7 +114,7 @@ Rectangle {
anchors.top: contactSearchBar.bottom
anchors.topMargin: 10
width: sidePanelRect.width
- height: tabBarVisible ? 48 : 0
+ height: tabBarVisible ? 42 : 0
}
Rectangle {