Commit c2c1db58 authored by JC Brand's avatar JC Brand

Create a component which renders message actions in a dropdown

parent 6ad76c14
......@@ -90,7 +90,6 @@
display: inline-flex;
width: 100%;
flex-direction: row;
overflow: auto; // Ensures that content stays inside
padding: 0.125rem 1rem;
&.onload {
......@@ -98,12 +97,7 @@
-webkit-animation: colorchange-chatmessage 1s;
}
&:hover {
background-color: rgba(0, 0, 0, 0.035);
.chat-msg__actions {
.chat-msg__action {
opacity: 1;
}
}
background-color: var(--list-item-hover-color);
}
&.correcting {
&.groupchat {
......@@ -162,9 +156,15 @@
display: flex;
flex-direction: row;
justify-content: space-between;
&:hover {
.btn--standalone {
opacity: 1;
}
}
}
.chat-msg__message {
line-height: 1.5em;
display: inline-flex;
flex-direction: column;
width: 100%;
......@@ -235,20 +235,36 @@
}
}
converse-message-actions {
margin-left: 0.5em;
}
.chat-msg__actions {
display: flex;
flex-wrap: nowrap;
.chat-msg__action {
height: var(--message-font-size);
font-size: var(--message-font-size);
padding: 0;
margin-left: 0.75em;
.dropdown-menu {
min-width: 5rem;
}
i {
color: var(--text-color-lighten-15-percent);
font-size: 70%;
}
button {
border: none;
opacity: 0;
background: transparent;
cursor: pointer;
&:focus {
opacity: 1;
color: var(--text-color-lighten-15-percent);
padding: 0 0.25em;
}
.btn--standalone {
opacity: 0;
margin-top: -0.2em;
}
.chat-msg__action {
width: 100%;
padding: 0.5em 1em;
text-align: left;
white-space: nowrap;
&:hover {
color: var(--text-color);
background-color: var(--list-item-hover-color);
}
}
}
......
......@@ -178,6 +178,7 @@ $mobile_portrait_length: 480px !default;
--list-toggle-color: #818479; // $gray-color
--list-toggle-hover-color: #585B51; // $dark-gray-color
--list-toggle-font-weight: normal;
--list-item-hover-color: rgba(0, 0, 0, 0.035);
--list-item-action-color: #e3eef3; // lighten($lightest-blue, 25%)
--list-item-link-color: inherit;
--list-item-link-hover-color: var(--dark-link-color);
......
......@@ -107,7 +107,7 @@ describe("Chatboxes", function () {
// get the 'chat-msg--followup' class.
message = 'This a normal message';
await mock.sendMessage(view, message);
const msg_txt_sel = 'converse-chat-message:last-child .chat-msg__body';
const msg_txt_sel = 'converse-chat-message:last-child .chat-msg__text';
await u.waitUntil(() => view.el.querySelector(msg_txt_sel).textContent.trim() === message);
let el = view.el.querySelector('converse-chat-message:last-child .chat-msg__body');
expect(u.hasClass('chat-msg--followup', el)).toBeFalsy();
......
......@@ -106,7 +106,7 @@ describe("A Chat Message", function () {
const first_msg = view.model.messages.findWhere({'message': 'But soft, what light through yonder airlock breaks?'});
expect(view.el.querySelectorAll('.chat-msg .chat-msg__action').length).toBe(2);
let action = view.el.querySelector('.chat-msg .chat-msg__action');
expect(action.getAttribute('title')).toBe('Edit this message');
expect(action.textContent.trim()).toBe('Edit');
action.style.opacity = 1;
action.click();
......
......@@ -1215,7 +1215,7 @@ describe("A Groupchat Message", function () {
`<origin-id id="${msg.nodeTree.querySelector('origin-id').getAttribute("id")}" xmlns="urn:xmpp:sid:0"/>`+
`</message>`);
const action = view.el.querySelector('.chat-msg .chat-msg__action');
const action = await u.waitUntil(() => view.el.querySelector('.chat-msg .chat-msg__action'));
action.style.opacity = 1;
action.click();
......
......@@ -437,7 +437,8 @@ describe("The OMEMO module", function() {
_converse.connection._dataRecv(mock.createRequest(carbon));
await new Promise(resolve => view.model.messages.once('rendered', resolve));
expect(view.model.messages.length).toBe(1);
expect(view.el.querySelector('.chat-msg__body').textContent.trim())
expect(view.el.querySelector('.chat-msg__text').textContent.trim())
.toBe('This is an encrypted carbon message from another device of mine');
expect(devicelist.devices.length).toBe(2);
......
......@@ -119,8 +119,7 @@ describe("Message Retractions", function () {
`);
_converse.connection._dataRecv(mock.createRequest(received_stanza));
await u.waitUntil(() => view.model.handleRetraction.calls.count() === 2);
expect(view.el.querySelectorAll('.chat-msg').length).toBe(0);
await u.waitUntil(() => view.el.querySelectorAll('.chat-msg').length === 1, 1000);
expect(view.model.messages.length).toBe(1);
const message = view.model.messages.at(0)
......
......@@ -52,15 +52,17 @@ export class DropdownList extends BaseDropdown {
static get properties () {
return {
'icon_classes': { type: String },
'items': { type: Array }
}
}
render () {
const icon_classes = this.icon_classes || "fa fa-bars";
return html`
<div class="dropleft">
<button type="button" class="btn btn--transparent btn--standalone" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-bars only-icon"></i>
<i class="${icon_classes} only-icon"></i>
</button>
<div class="dropdown-menu">
${ this.items.map(b => until(b, '')) }
......
import { CustomElement } from './element.js';
import { __ } from '@converse/headless/i18n';
import { html } from 'lit-element';
import { until } from 'lit-html/directives/until.js';
class MessageActions extends CustomElement {
static get properties () {
return {
chatview: { type: Object },
model: { type: Object },
editable: { type: Boolean },
correcting: { type: Boolean },
message_type: { type: String },
is_retracted: { type: Boolean },
}
}
render () {
return html`${ until(this.renderActions(), '') }`;
}
static getActionsDropdownItem (o) {
return html`
<button class="chat-msg__action ${o.button_class}" @click=${o.handler}>
<fa-icon class="${o.icon_class}" path-prefix="/dist" color="var(--text-color-lighten-15-percent)" size="1em"></fa-icon>
${o.i18n_text}
</button>
`;
}
onMessageEditButtonClicked (ev) {
ev.preventDefault();
this.chatview.onMessageEditButtonClicked(this.model);
}
onMessageRetractButtonClicked (ev) {
ev.preventDefault();
this.chatview.onMessageRetractButtonClicked(this.model);
}
async renderActions () {
const buttons = [];
if (this.editable) {
buttons.push({
'i18n_text': this.correcting ? __('Cancel Editing') : __('Edit'),
'handler': ev => this.onMessageEditButtonClicked(ev),
'button_class': 'chat-msg__action-edit',
'icon_class': 'fa fa-pencil-alt',
'name': 'edit'
});
}
const may_be_moderated = this.model.get('type') === 'groupchat' && await this.model.mayBeModerated();
const retractable = !this.is_retracted && (this.model.mayBeRetracted() || may_be_moderated);
if (retractable) {
buttons.push({
'i18n_text': __('Retract'),
'handler': ev => this.onMessageRetractButtonClicked(ev),
'button_class': 'chat-msg__action-retract',
'icon_class': 'fas fa-trash-alt',
'name': 'retract'
});
}
const items = buttons.map(b => MessageActions.getActionsDropdownItem(b));
if (items.length) {
return html`<converse-dropdown class="chat-msg__actions" .items=${ items }></converse-dropdown>`;
} else {
return '';
}
}
}
customElements.define('converse-message-actions', MessageActions);
import "./message-body.js";
import './dropdown.js';
import './message-actions.js';
import MessageVersionsModal from '../modals/message-versions.js';
import dayjs from 'dayjs';
import filesize from "filesize";
......@@ -8,12 +10,10 @@ import { __ } from '@converse/headless/i18n';
import { _converse, api, converse } from "@converse/headless/converse-core";
import { html } from 'lit-element';
import { renderAvatar } from './../templates/directives/avatar';
import { renderRetractionLink } from './../templates/directives/retraction';
const { Strophe } = converse.env;
const u = converse.env.utils;
const i18n_edit_message = __('Edit this message');
const i18n_edited = __('This message has been edited');
const i18n_show = __('Show more');
const i18n_show_less = __('Show less');
......@@ -150,17 +150,13 @@ class Message extends CustomElement {
</div>
${ (this.received && !this.is_me_message && !is_groupchat_message) ? html`<span class="fa fa-check chat-msg__receipt"></span>` : '' }
${ (this.edited) ? html`<i title="${ i18n_edited }" class="fa fa-edit chat-msg__edit-modal" @click=${this.showMessageVersionsModal}></i>` : '' }
<div class="chat-msg__actions">
${ this.editable ?
html`<button
class="chat-msg__action chat-msg__action-edit"
title="${i18n_edit_message}"
@click=${this.onMessageEditButtonClicked}
>
<fa-icon class="fas fa-pencil-alt" path-prefix="dist" color="var(--text-color-lighten-15-percent)" size="1em"></fa-icon>
</button>` : '' }
${ renderRetractionLink(this) }
</div>
<converse-message-actions
.chatview=${this.chatview}
.model=${this.model}
?correcting="${this.correcting}"
?editable="${this.editable}"
?is_retracted="${this.is_retracted}"
message_type="${this.message_type}"></converse-message-actions>
</div>
</div>
</div>`;
......@@ -189,16 +185,6 @@ class Message extends CustomElement {
this.parentElement.removeChild(this);
}
onMessageRetractButtonClicked (ev) {
ev.preventDefault();
this.chatview.onMessageRetractButtonClicked(this.model);
}
onMessageEditButtonClicked (ev) {
ev.preventDefault();
this.chatview.onMessageEditButtonClicked(this.model);
}
isFollowup () {
const messages = this.model.collection.models;
const idx = messages.indexOf(this.model);
......
Markdown is supported
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