Commit Graph

179 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
476bcfe7cc Fixes #2137: Show back arrow on mobile 2020-10-23 21:36:39 +02:00
JC Brand
31a05f111b Fixes #2261
Don't use 100vh, it doesn't work properly on mobile
2020-10-02 23:15:59 +02:00
JC Brand
8c799efc58 Don't minimize chats by clicking the header
This prevents the burger menu from opening
2020-08-24 11:28:48 +02:00
JC Brand
8f6b1f9049 Fix help menu icon colour and let it scroll 2020-07-13 11:17:29 +02:00
JC Brand
51ad0e3708 Fix toggling of the spoiler form 2020-07-08 11:33:06 +02:00
JC Brand
c3d6b64f4b Turn the chat toolbar into a component
- Declaratively render the emoji picker dropup
- Got rid of converse-emoji-views
- Adapt OMEMO to the new buttons stuff
- Make emojis json global, to try and speed up tests
- omemo: Move functions to the top of the module
2020-07-08 10:17:06 +02:00
JC Brand
b8be707dc5 css: fix rounded corners for chats in overlayed mode 2020-07-07 14:08:52 +02:00
Kim Alvefur
3607bb6dc8 CSS: Enlarge room title in 'embedded' view mode
So that it is the same size as in the 'fullscreen' view mode
2020-07-07 11:14:05 +02:00
Ariel Fuggini
29bc4215bd Moved event listener to title container 2020-06-12 15:03:53 +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
Ariel Fuggini
120f02d728 Minimize chat when clicking on title bar 2020-06-01 09:11:48 +02:00
JC Brand
6453ee16d2 CSS: Fix regression. Make sure notifications div maintains height 2020-05-13 15:48:54 +02:00
JC Brand
958379682a muc: Render role change messages as ephemeral notifications 2020-04-23 15:11:36 +02:00
JC Brand
ced8b8acdc CSS fixes
- Use :before to make sure container maintains its height
- Don't space out words in the textarea
2020-04-14 14:45:45 +02:00
JC Brand
dcd8c8d418 CSS: Make sure notifications stick to the chat area bottom 2020-04-11 15:06:45 +02:00
JC Brand
531ebf335c Properly test and fix show/hide of MUC topic 2020-04-06 15:27:32 +02:00
JC Brand
460d88534e CSS: set padding for csn container 2020-03-24 16:30:19 +01:00
JC Brand
3116f3dbe0 CSS: Set notifications container height 2020-03-24 16:16:52 +01:00
JC Brand
7812d4e7b6 Show chat state notifications inside the scrollable area
Rename CSS class to conform to convention
2020-03-24 11:28:50 +01:00
JC Brand
b5d57f0ef8 Handle and render chat state notifications separately from messages 2020-03-21 17:21:53 +01:00
JC Brand
9b9f9a946d CSS fix: textarea pushed off if the heading had description text 2020-03-11 11:41:46 +01:00
JC Brand
3400acbfeb Show MUC buttons in a dropdown menu
- Get rid of the ChatBoxHeading class
- Add support for showing standalone buttons in overlay viewmode
2020-02-13 20:57:47 +01:00
JC Brand
64e8291eaf Set padding for chat-head 2020-02-07 13:45:25 +01:00
JC Brand
5fd3ce0138 Remove flyout padding in fullscreen view mode 2020-02-07 13:19:35 +01:00
JC Brand
a7c658a21c chat-head CSS fixes 2020-01-15 14:23:27 +01:00
JC Brand
66d1a65432 Update chat head markup and CSS
- Use flexbox where possible
- Simplify header by using `justify-content` instead of setting column widths
- Show description below the row containing the title and buttons
2020-01-14 13:38:27 +01:00
JC Brand
916e300a79 Updates #1313 and #1793: Send button improvements 2020-01-10 15:40:46 +01:00
ndoell
b94e5653a9 Add resize functionality to occupants-list in MUC.
This adds the ability to resize the MUC-Member-List in all MUCs. The
MUC-Member-List can be scaled between 20% width of the MUC and 75% of
the MUC.
2019-11-13 19:39:35 +01:00
JC Brand
acf14cf8cb Fixes #1757
- Increase z-index for chatbox flyouts so that they appear above the controlbox
- Also fix a margin offset bug for the controlbox (in smaller viewports)
2019-10-29 11:43:09 +01:00
JC Brand
05cdae999f CSS: Revert previous change and only apply if singleton 2019-10-09 11:55:43 +02:00
JC Brand
ffd3cda03b CSS: Don't set max-width for fullscreen Converse in smaller viewports 2019-10-09 10:35:08 +02:00
JC Brand
472a2e96a1 Add CSS property for the chat content background 2019-10-08 14:50:36 +02:00
JC Brand
9099ef89fa Close emoji popup after insertion 2019-08-22 13:56:47 +02:00
JC Brand
d7ce231c51 Various emoji improvements:
* Add emoji tooltip
* Make categories configurable and add smileys category
* Rearrange emoji categories and style
& Show all emojis together
2019-08-22 13:56:47 +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
38d0d8360b New config setting message_limit
for limiting messages to a certain number of characters.
2019-06-16 21:52:56 +02:00
JC Brand
f387c947f5 Allow the full app to be embedded.
- new config option `singleton`.
- new plugin `converse-uniview`
- removed `converse-embedded`.
- various CSS changes, to properly render an embedded full app
- don't re-open cached and non-autojoined chats in singleton mode

The goal here is to extend the `embedded` `view_mode` so that the full app can
also be embedded, not just a single MUC or private chat.

To do this, we'll need to differentiate between multi and singleton chat apps.

* A singleton chat app contains only a single chat.
* A multi-chat app can contain zero or more chats

So we introduce a new config option, `singleton`, which when used with
`view_mode` set to `embedded` will determine whether a single chat or the full
app is embedded.

Similarly, in `overlayed`, `fullscreen` and `mobile` view modes, `singleton`
set to true will allow only one chat within the parameters of that view mode.

We're appropriating the word `singleton` and introducing the concepts of
`uniview` and `multiview` (see a785ca8) to cover what was
previously meant with `singleton`.

updates #1297
2019-05-24 20:39:19 +02:00
JC Brand
f48adb386e Fixes #1296 2019-04-16 12:59:36 +02:00
JC Brand
be156dee1e Explicitly set outline-color for chatbox and chatorom textarea 2019-03-07 18:18:42 +01:00
JC Brand
d5485d09ae Always render the OMEMO lock icon
When OMEMO isn't possible, render it as grey.

This change makes OMEMO for MUCs easier, since there I anticipate that
OMEMO support might change dynamically based on who enters/exits the
room.

updates #1180
2018-12-14 11:25:57 +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
golangbu
2b434197e9 show_send_button:true parameter not working for me.This pull is a fix for that issue (#1300)
fixes #1033
2018-11-06 10:34:05 +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
9d8fe35e55 Wrap the emoji categories in overlay view
Otherwise we get an unwanted horizontal scrollbar
2018-10-26 12:53:25 +02:00
JC Brand
79b8ed7177 New release 4.0.2 2018-10-02 22:51:01 +02:00
JC Brand
79c9d35911 Specifically set .chat-body height
Otherwise the private chatbox header doesn't show in Firefox
2018-09-18 13:26:05 +02:00