Commit Graph

74 Commits

Author SHA1 Message Date
JC Brand
1949356ede Work on turning chat views into custom elements
The eventual goal is to avoid UI-related stanza processing if the relevant chats
aren't in the DOM.

With the current architecture, chatboxes are created (and the stanzas
related to them processed) even if `#conversejs` isn't in the DOM.

* Initial work on making controlbox an element
* Create a shared base class
* Ceate ChatBoxViews proxy
* Update sass now that certain classes are moved to converse-chats element
2021-02-09 15:48:21 +01:00
JC Brand
34cba68432 Allow user modals to be opened from message headings 2020-12-03 11:02:35 +01:00
JC Brand
01ee942920 Styling fixes
* Calculate proper length for :geo URI matches
* Don't strip out line-break after quotes, instead use CSS `display: inline-block`
2020-12-01 10:21:21 +01:00
JC Brand
f9650f33be Add support for XEP-0393 message styling
Fixes #1083

Directives are rendered as templates and their bodies are MessageText instances.
We thereby achieve the necessary nesting of directives (and other rich
elements inside directives) by letting each directive
body render itself similarly to how the whole message body is rendered.
2020-11-24 16:06:48 +01:00
JC Brand
4e3a81d697 Fixes #2337
Newly opened headline chat isn't hidden by default in fullscreen view

Also include some CSS fixes for fullscreen headlines boxes
2020-11-19 13:20:02 +01:00
JC Brand
cb53c86711 Don't use date-separator CSS class for the new messages indicator 2020-09-03 13:06:17 +02:00
JC Brand
f5aaaa8712 CSS: Make only the image clickable 2020-08-18 15:03:28 +02:00
JC Brand
f4f183bc46 Rendeer SVG icons inline
to overcome cross-site restrictions on using the `use` attribute of the `<svg>` element.
2020-07-02 01:21:40 +02:00
JC Brand
7c29ae4a8a Improve stying for /me messages
Show the actions dropdown on the right, like with other messages, and
don't wrap them.
2020-06-18 16:54:12 +02:00
JC Brand
de583cbd32 Don't nest chat-msg__txt inside converse-chat-message-body
instead just set the classes directly on the custom element

As far as I can tell, this fixes #1346 (or it was fixed already)
2020-06-12 14:05:33 +02:00
JC Brand
59a5acf249 Fixes #2064 (for real this time) 2020-06-11 17:29:44 +02:00
JC Brand
c2c1db587f Create a component which renders message actions in a dropdown 2020-06-05 16:02:58 +02:00
JC Brand
18b0d8db3f Don't indent followup messages when messages don't have avatars 2020-06-04 15:29:06 +02:00
JC Brand
7651d58470 Render chat messages as web components
- Render chat content as a <converse-chat-content> component
- Create new component for rendering the message body
- Get rid of `showMessage` method
2020-06-01 09:53:19 +02:00
JC Brand
555c0966cc muc: save error response to a sent message onto the original model 2020-05-07 13:32:56 +02:00
JC Brand
df9612f937 Add support for XEP-0317 MUC Hats 2020-04-13 22:57:29 +02:00
JC Brand
e363c02041 CSS: display rendered images as blocks 2020-03-25 10:39:41 +01:00
JC Brand
366dee0aa5 Bugfix. Allow moderators to retract their own messages 2020-03-05 13:42:58 +01:00
JC Brand
3d4bad4b19 Don't mark info messages as followups 2019-11-22 13:50:36 +01:00
JC Brand
b4dafcc45b Add support for XEP-0424 and XEP-0425
- Add support for switching ephemerality after message creation
- Move more methods from ChatBox and ChatRoom to utils/stanza.js
- Rename 'ephemeral' to 'is_ephemeral' since it's a boolean
2019-11-22 13:50:36 +01:00
JC Brand
4a70d97b4e CSS fix. Show message actions side-by-side 2019-11-22 13:50:35 +01:00
JC Brand
9ee8a6e8bc Fix text wrapping issue for /me messages in overlayed view mode 2019-10-29 13:11:13 +01:00
JC Brand
033b6bd082 Break long words instead of showing a horizontal scrollbar 2019-07-22 16:36:44 +02:00
JC Brand
36549bf61d Revert flexbox, column-reverse changes
Unfortunately this doesn't work on Firefox and there's no proper
workaround. https://github.com/philipwalton/flexbugs/issues/108

Reverts:

Revert "Bugfix. Properly insert error messages and spinner"
This reverts commit 6a419cc145.

Revert "Use flexbox to keep the chat scrolled down"
This reverts commit dd91d3cc55.
2019-06-19 11:45:54 +02:00
JC Brand
55f7183f36 Keep horizontal padding on a per message level 2019-06-18 14:38:47 +02:00
JC Brand
dd91d3cc55 Use flexbox to keep the chat scrolled down
By using `display: flex` and `flex-direction: column-reverse`, the chat
now automatically scrolls down when loaded, without requiring any
extra JavaScript.

We still need to scroll down with JavaScript when sending a message.

By using `column-reverse`, the messages container now works in reverse.
So the newest message is the first element in the container and the
oldest message is the last. This is the reverse of before.

Due to this, this change will likely break some plugins.
2019-06-18 11:37:07 +02:00
JC Brand
1d9bbb8ddd Message display improvements
* Checkmark and edit modal button are now on the right
* Instead of showing checkmarks for MUC messages,
  we now show them as light grey before MUC reflection
* Simplify message markup by requiring less `if` statements
2019-06-04 11:12:22 +02:00
JC Brand
271c79eae8 Refactor message corrections
- Save date for older message versions and display it in the modal
- Properly handle the correction being received *before* the corrected message
2019-05-22 13:26:46 +02:00
JC Brand
7feab35a1d CSS fix. Nickname gets cut off in /me message 2019-04-27 13:25:47 +02:00
JC Brand
77241bf5fe Single emoji rendering fixes.
* Make the emoji a little bit smaller
* Avoid scrollbar appearing for single emoji messages
* Also identify single sent emojis
2019-03-31 20:46:49 +02:00
JC Brand
0725d5a53f Reduce top/bottom padding on messages 2019-03-28 12:43:34 +01:00
JC Brand
49da581d14 Fixes #1400. When chat message is only an emoji, enlarge it 2019-02-27 10:34:47 +01:00
JC Brand
bce4886a2b CSS: Add padding after message time 2019-02-13 18:23:47 +01:00
JC Brand
becbedd7db CSS: fix margin for lock icon 2019-01-31 15:26:19 +01:00
JC Brand
0b1e5c6308 Hack to avoid cutting of message author text 2019-01-31 13:31:58 +01:00
JC Brand
59a9c86fa5 Fixes #1417 2019-01-28 13:39:33 +01:00
JC Brand
d97deaea80 Fixes #1369
* Add test and changelog entry
* Also show message subject if available
2019-01-28 13:27:25 +01:00
JC Brand
4f8cb48fb3 CSS: Avoid scrolled overflows for long messages and long usernames 2019-01-10 21:14:09 +01:00
JC Brand
11655e2e32 Use Muli as the headings font 2019-01-01 12:05:46 +01:00
JC Brand
82a97fdcb0 Add padding to receipt checkmark 2018-11-15 10:50:25 +01:00
JC Brand
3505750536 Enforce avatar img size 2018-11-14 16:37:02 +01:00
Emmanuel Gil Peyrot
174b257c39 Add a dark theme inspired by Discord
This theme takes inspiration from https://discordapp.com/ and builds on
top of custom-properties, making the design more familiar to some users.

In order to change the theme, add the 'theme-dark' class on #conversejs,
you can do it at any point during the lifetime of Converse, either
directly in your HTML or by changing the DOM at runtime.
2018-11-14 15:45:51 +01:00
Christoph Scholz
da5ca0b585 implement XEP-0184: Message Delivery Receipts 2018-11-13 17:13:35 +01:00
JC Brand
77a7397614 Errors should be red 2018-11-12 14:23:35 +01:00
Emmanuel Gil Peyrot
28dc6e2cfe Switch from SASS variables to CSS custom properties
This will eventually allow client-side theming support.
2018-11-03 00:40:43 +01:00
JC Brand
f5686a5093 Make all .chat-info messages smaller 2018-10-13 14:14:02 +02:00
JC Brand
7270abb08b Some refactoring of the code that collapses leave/join messages
Mostly to match any previous leave/join message from the same user

Fixes #1062
2018-10-13 13:23:55 +02:00
JC Brand
31374a78bc Avoid linebreak after author name 2018-09-19 16:10:18 +02:00
JC Brand
dee49e382c Avoid horizontal scrolling for messages in Firefox 2018-09-18 13:14:55 +02:00
JC Brand
0b8a63d5d8 Messages in overlay mode should span whole area 2018-09-07 14:10:53 +02:00