Skip to content
Snippets Groups Projects
Commit e5858588 authored by Andreas Traczyk's avatar Andreas Traczyk Committed by Sébastien Blin
Browse files

misc: implement redesign for the smartlist filter tabs 

Change-Id: I3bdd0f331f9a038310646d5ecc9a6499a097cf87
Gitlab: #241
parent 9b85e004
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/commoncomponents/MaterialLineEdit.qml
+ 2
− 2
View file @ e5858588
......@@ -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
}
......
src/constant/JamiTheme.qml
+ 39
− 33
View file @ e5858588
......@@ -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
......
src/mainview/components/ContactSearchBar.qml
+ 4
− 4
View file @ e5858588
......@@ -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
......
src/mainview/components/ConversationSmartListViewItemDelegate.qml
+ 1
− 1
View file @ e5858588
......@@ -130,7 +130,7 @@ ItemDelegate {
text: DisplayName === undefined ? "" : DisplayName
}
text: textMetricsConversationSmartListUserName.elidedText
font.pointSize: JamiTheme.menuFontSize
font.pointSize: JamiTheme.smartlistItemFontSize
color: JamiTheme.textColor
}
......
src/mainview/components/FilterTabButton.qml
+ 34
− 32
View file @ e5858588
......@@ -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 {
......
src/mainview/components/SidePanel.qml
+ 1
− 1
View file @ e5858588
......@@ -114,7 +114,7 @@ Rectangle {
anchors.top: contactSearchBar.bottom
anchors.topMargin: 10
width: sidePanelRect.width
height: tabBarVisible ? 48 : 0
height: tabBarVisible ? 42 : 0
}
Rectangle {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment