mystiq/hydrogen-web
Archived
4
1
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix css for reaction view and do some renaming

Browse source 
also add some user-select:none
This commit is contained in:
Bruno Windels 2021-06-23 17:48:21 +02:00
parent c585d76ce5
commit 3c7ccc90b2
2 changed files with 8 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/platform/web/ui/css/themes/element/timeline.css
View file

@ -59,6 +59,7 @@ limitations under the License.
.Timeline_message:hover > .Timeline_messageOptions, .Timeline_message:hover > .Timeline_messageOptions,
.Timeline_message.menuOpen > .Timeline_messageOptions { .Timeline_message.menuOpen > .Timeline_messageOptions {
display: block; display: block;
user-select: none;
} }
.Timeline_messageAvatar { .Timeline_messageAvatar {
@ -106,6 +107,7 @@ limitations under the License.
.Timeline_messageBody time { .Timeline_messageBody time {
padding: 2px 0 0px 10px; padding: 2px 0 0px 10px;
user-select: none;
} }
.Timeline_messageBody time, .Timeline_messageTime { .Timeline_messageBody time, .Timeline_messageTime {
@ -135,6 +137,9 @@ limitations under the License.
.hydrogen .Timeline_messageSender.usercolor7 { color: var(--usercolor7); } .hydrogen .Timeline_messageSender.usercolor7 { color: var(--usercolor7); }
.hydrogen .Timeline_messageSender.usercolor8 { color: var(--usercolor8); } .hydrogen .Timeline_messageSender.usercolor8 { color: var(--usercolor8); }
.Timeline_messageBody a {
word-break: break-all;
}
.Timeline_messageBody .media { .Timeline_messageBody .media {
display: grid; display: grid;
@ -231,7 +236,7 @@ only loads when the top comes into view*/
vertical-align: middle; vertical-align: middle;
} }
.Timeline_messageReactions button.haveReacted { .Timeline_messageReactions button.active {
background-color: #e9fff9; background-color: #e9fff9;
border-color: #0DBD8B; border-color: #0DBD8B;
} }
@ -241,7 +246,7 @@ only loads when the top comes into view*/
100% { border-color: #0DBD8B; } 100% { border-color: #0DBD8B; }
} }
.Timeline_messageReactions button.haveReacted.isPending { .Timeline_messageReactions button.active.pending {
animation-name: glow-reaction-border; animation-name: glow-reaction-border;
animation-duration: 0.5s; animation-duration: 0.5s;
animation-direction: alternate; animation-direction: alternate;
@ -265,7 +270,3 @@ only loads when the top comes into view*/
.GapView > :not(:first-child) { .GapView > :not(:first-child) {
margin-left: 12px; margin-left: 12px;
} }
.Timeline_messageBody a {
word-break: break-all;
}

2
src/platform/web/ui/session/room/timeline/ReactionsView.js
View file

@ -34,7 +34,7 @@ class ReactionView extends TemplateView {
return t.button({ return t.button({
className: { className: {
active: vm => vm.isActive, active: vm => vm.isActive,
isPending: vm => vm.isPending pending: vm => vm.isPending
}, },
}, [vm.key, " ", vm => `${vm.count}`]); }, [vm.key, " ", vm => `${vm.count}`]);
} }