status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: add mention hover 

Fixes: #2388

Adds a specific background color to hovered mentions.
This commit is contained in:
Eric Mastro 2021-05-07 09:40:23 +10:00 committed by Iuri Matias
parent 590192ad9e
commit 46caa67d49
5 changed files with 7 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatText.qml
View File

@ -79,7 +79,7 @@ Item {
if(isEmoji) { if(isEmoji) {
return Emoji.parse(msg, Emoji.size.middle); return Emoji.parse(msg, Emoji.size.middle);
} else { } else {
return Utils.getMessageWithStyle(Emoji.parse(msg), appSettings.useCompactMode, isCurrentUser) return Utils.getMessageWithStyle(Emoji.parse(msg), appSettings.useCompactMode, isCurrentUser, hoveredLink)
} }
} }
} }

1
ui/imports/Themes/DarkTheme.qml
View File

@ -68,6 +68,7 @@ Theme {
property color emojiReactionActiveBackgroundHovered: "#cbd5f1" property color emojiReactionActiveBackgroundHovered: "#cbd5f1"
property color mentionColor: "#7BE5FF" property color mentionColor: "#7BE5FF"
property color mentionBgColor: "#1a0da4c9" property color mentionBgColor: "#1a0da4c9"
property color mentionBgHoverColor: "#4d0da4c9"
property color mentionMessageColor: "#1a0da4c9" property color mentionMessageColor: "#1a0da4c9"
property color mentionMessageHoverColor: "#330da4c9" property color mentionMessageHoverColor: "#330da4c9"
property color replyBackground: "#484848" property color replyBackground: "#484848"

1
ui/imports/Themes/LightTheme.qml
View File

@ -68,6 +68,7 @@ Theme {
property color emojiReactionActiveBackgroundHovered: "#cbd5f1" property color emojiReactionActiveBackgroundHovered: "#cbd5f1"
property color mentionColor: "#0DA4C9" property color mentionColor: "#0DA4C9"
property color mentionBgColor: "#1a07bce9" property color mentionBgColor: "#1a07bce9"
property color mentionBgHoverColor: "#4d07bce9"
property color mentionMessageColor: "#1a07bce9" property color mentionMessageColor: "#1a07bce9"
property color mentionMessageHoverColor: "#3307bce9" property color mentionMessageHoverColor: "#3307bce9"
property color replyBackground: "#d7dadd" property color replyBackground: "#d7dadd"

1
ui/imports/Themes/Theme.qml
View File

@ -52,6 +52,7 @@ QtObject {
property color emojiReactionActiveBackgroundHovered property color emojiReactionActiveBackgroundHovered
property color mentionColor property color mentionColor
property color mentionBgColor property color mentionBgColor
property color mentionBgHoverColor
property color mentionMessageColor property color mentionMessageColor
property color mentionMessageHoverColor property color mentionMessageHoverColor
property color mainMenuBackground property color mainMenuBackground

4
ui/imports/Utils.qml
View File

@ -49,7 +49,7 @@ QtObject {
return Style.current.accountColors[colorIndex] return Style.current.accountColors[colorIndex]
} }
function getMessageWithStyle(msg, useCompactMode, isCurrentUser) { function getMessageWithStyle(msg, useCompactMode, isCurrentUser, hoveredLink = "") {
return `<style type="text/css">` + return `<style type="text/css">` +
`p, img, a, del, code, blockquote { margin: 0; padding: 0; }` + `p, img, a, del, code, blockquote { margin: 0; padding: 0; }` +
`code {` + `code {` +
@ -67,7 +67,9 @@ QtObject {
`color: ${Style.current.mentionColor};` + `color: ${Style.current.mentionColor};` +
`background-color: ${Style.current.mentionBgColor};` + `background-color: ${Style.current.mentionBgColor};` +
`text-decoration: none;` + `text-decoration: none;` +
`padding: 0px 2px;` +
`}` + `}` +
(hoveredLink !== "" ? `a.mention[href="${hoveredLink}"] { background-color: ${Style.current.mentionBgHoverColor}; }` : ``) +
`del {` + `del {` +
`text-decoration: line-through;` + `text-decoration: line-through;` +
`}` + `}` +