butter/keanu-weblite
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Merge branch '418-more-emojis-reaction-support' into 'dev'

Browse source 
ux: new emojis UI and display all added emojis reactions

See merge request keanuapp/keanuapp-weblite!174
This commit is contained in:
N Pex 2023-04-17 13:57:28 +00:00
commit e32afa78cf
7 changed files with 102 additions and 65 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/assets/css/_mixins.scss
View file

@ -1,9 +1 @@
@mixin emoji-reaction-transform($type: 'right') {
@if $type == 'right' {
transform: translateX(20px) translateX(100%);
}
@if $type == 'left' {
transform: translateX(-20px) translateX(-100%);
}
}
// Sass Mixins

65
src/assets/css/chat.scss
View file

@ -352,6 +352,10 @@ body {
.message-wrapper {
position: relative;
user-select: none;
.quick-reaction-container .emoji {
display: inline;
}
}
.messageIn {
@ -438,6 +442,13 @@ body {
.link {
color: inherit;
}
.quick-reaction-container {
margin-left: 42px;
[dir="rtl"] & {
margin-right: 42px;
}
}
}
.messageOut {
@ -539,6 +550,13 @@ body {
.link {
color: inherit;
}
.quick-reaction-container {
margin-right: 42px;
[dir="rtl"] & {
margin-left: 42px;
}
}
}
.sender,
@ -712,53 +730,6 @@ body {
text-align: center;
}
.quick-reaction-container {
display: inline-block;
position: relative;
vertical-align: bottom;
top: 18px;
z-index: 2;
background-color: #f7f7f7;
border: 1px solid rgba(white, 0.9);
border-radius: 13px;
height: 26px;
width: max-content;
padding: 0px 6px;
@include emoji-reaction-transform('left');
.messageOut & {
@include emoji-reaction-transform('right');
[dir="rtl"] & {
@include emoji-reaction-transform('left');
}
}
.quick-reaction {
position: relative;
top: -2px;
margin: 0px 0px;
padding: 1px;
font-size: 10px;
&:hover {
//border: 1px solid #888888;
background-color: #e2e2e2;
}
.quick-reaction-count {
color: #888888;
font-size: 0.7rem;
}
}
.sent .quick-reaction-count {
color: black;
font-weight: 700;
// background-color: palegreen;
}
[dir="rtl"] & {
@include emoji-reaction-transform('right');
}
}
.download-overlay {
position: absolute;
left: 0;

9
src/assets/translations/en.json
View file

@ -7,7 +7,11 @@
"global": {
"save": "Save",
"password_didnot_match": "Password didn't match",
"password_hint": "Minimum 12 character containing atleast one numeric, one uppercase and one lowercase letter"
"password_hint": "Minimum 12 character containing atleast one numeric, one uppercase and one lowercase letter",
"show_less": "Show less",
"show_more": "Show more",
"add_reaction": "Add reaction",
"click_to_remove": "Click to remove"
},
"menu": {
"start_private_chat": "Private chat with this user",
@ -83,7 +87,8 @@
"time_ago": "Today | Yesterday | {count} days ago",
"outgoing_message_deleted_text": "You deleted this message.",
"incoming_message_deleted_text": "This message was deleted.",
"not_allowed_to_send": "Only admins and moderators are allowed to send to the room"
"not_allowed_to_send": "Only admins and moderators are allowed to send to the room",
"reaction_count_more": "{reactionCount} more"
},
"room": {
"invitations": "You have no invitations | You have 1 invitation | You have {count} invitations",