mirror of
https://git.jami.net/savoirfairelinux/jami-client-qt.git
synced 2025-09-10 12:03:18 +02:00
misc: implement redesign for the smartlist filter tabs
Change-Id: I3bdd0f331f9a038310646d5ecc9a6499a097cf87 Gitlab: #241
This commit is contained in:
parent
9b85e00422
commit
e5858588f8
6 changed files with 87 additions and 79 deletions
|
@ -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
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
||||
|
|
|
@ -130,7 +130,7 @@ ItemDelegate {
|
|||
text: DisplayName === undefined ? "" : DisplayName
|
||||
}
|
||||
text: textMetricsConversationSmartListUserName.elidedText
|
||||
font.pointSize: JamiTheme.menuFontSize
|
||||
font.pointSize: JamiTheme.smartlistItemFontSize
|
||||
color: JamiTheme.textColor
|
||||
}
|
||||
|
||||
|
|
|
@ -49,51 +49,53 @@ TabButton {
|
|||
JamiTheme.hoverColor :
|
||||
JamiTheme.backgroundColor
|
||||
|
||||
Text {
|
||||
id: label
|
||||
|
||||
RowLayout {
|
||||
anchors.horizontalCenter: rect.horizontalCenter
|
||||
anchors.bottom: rect.bottom
|
||||
anchors.bottomMargin: 12
|
||||
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
|
||||
font.pointSize: JamiTheme.textFontSize
|
||||
color: Qt.lighter(JamiTheme.textColor, root.down ? 1.0 : 1.5)
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: badgeRect
|
||||
|
||||
anchors.left: label.right
|
||||
anchors.leftMargin: 4
|
||||
anchors.verticalCenter: label.verticalCenter
|
||||
anchors.verticalCenterOffset : -5
|
||||
|
||||
width: 12
|
||||
height: 12
|
||||
|
||||
visible: badgeCount > 0
|
||||
anchors.verticalCenter: rect.verticalCenter
|
||||
|
||||
Text {
|
||||
anchors.centerIn: badgeRect
|
||||
text: badgeCount > 9 ? "···" : badgeCount
|
||||
color: JamiTheme.whiteColor
|
||||
font.pointSize: JamiTheme.indicatorFontSize
|
||||
}
|
||||
radius: 30
|
||||
color: JamiTheme.notificationBlue
|
||||
}
|
||||
id: label
|
||||
|
||||
Rectangle {
|
||||
width: rect.width
|
||||
anchors.bottom: rect.bottom
|
||||
height: 2
|
||||
color: root.down ? JamiTheme.textColor : "transparent"
|
||||
Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
|
||||
|
||||
font.pointSize: JamiTheme.filterItemFontSize
|
||||
color: Qt.lighter(JamiTheme.textColor,
|
||||
root.down == true ? 1.0 : 1.5)
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: badgeRect
|
||||
|
||||
readonly property real size: 20
|
||||
|
||||
Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
width: rect.width
|
||||
anchors.bottom: rect.bottom
|
||||
height: 2
|
||||
color: root.down === true ?
|
||||
JamiTheme.textColor :
|
||||
"transparent"
|
||||
}
|
||||
|
||||
Shortcut {
|
||||
id: accelerator
|
||||
context: Qt.ApplicationShortcut
|
||||
|
|
|
@ -114,7 +114,7 @@ Rectangle {
|
|||
anchors.top: contactSearchBar.bottom
|
||||
anchors.topMargin: 10
|
||||
width: sidePanelRect.width
|
||||
height: tabBarVisible ? 48 : 0
|
||||
height: tabBarVisible ? 42 : 0
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
|
|
Loading…
Add table
Reference in a new issue