Use element home screen to create new chats by default #38

aofn · 2023-07-27T16:53:53Z

Displays elements home screen by default on desktop browsers and allows toggling on mobile view.
Allowing users to create DM's and group chats.

pages/chat/[[...roomId]].js

…e. remove submenu dropdown and replace it with onClick function making use of elements home screen. add css rules to make modal view from element usable on mobile

fnwbr

Quick question before going into details of the code changes: Can we not make this happen with CSS media queries only?

Detecting the device type with JS is something we never did in any previous React applicatio (and I have a feeling that we never should do), when we have the option to change things with CSS only.

fnwbr · 2023-08-16T13:13:58Z

pages/chat/[[...roomId]].js

-            ) }
+
+            { (deviceType !== 'mobile' || (deviceType === 'mobile' && roomId) || (deviceType === 'mobile' && !isRoomListVisible)) && <IframeLayout.IframeWrapper>
+                <IframeLayout.IframeHeader>


I think we don't want the <IframeLayout.IframeHeader> component in /chat anymore... it looks like this now:

... with two headers. When one is just enough.

Maybe check out what /chat looks like on main once more...

…. Add loading spinner while iframe is loading to prevent displaying nothing in the iframe view for a long time

…ded, rename function

…lick parsed. fix logic of loading spinner

aofn · 2023-11-28T13:35:17Z

not sure why this is happening. this is also already happening in main

chore: display chats in service tables

components/UI/ServiceLink.js

…unt instead of debug value

# Conflicts: # lib/auth/MatrixAuthProvider.js # pages/chat/[[...roomId]].js

fnwbr

@aofn There are a few things that I can use your help on. I've left comments on the diff.

fnwbr · 2023-12-06T12:25:53Z

lib/auth/MatrixAuthProvider.js

     * @returns {Promise<Object>} A promise that resolves to the created room or space.
     * @throws {Error} If there was an error creating the room or space.
     */
-    async createRoom(name, isSpace, topic, joinRule, type, template, parentId) {
+    async createRoom(name, isSpace, topic, joinRule, type, template, parentId, application, visibility, historyVisible, encrypted) {


Where are we making use of any of these new parameters?
If we don't use them, let's not add them.

I guess this is a leftover from some previous concepts?

fnwbr · 2023-12-06T12:26:43Z

lib/auth/MatrixAuthProvider.js

@@ -169,7 +180,8 @@ class MatrixAuthProvider {
        const medienhausMetaEvent = {
            type: type,
            template: template,
-            version: '0.4',
+            application: application,


What's the difference between template and application?

At the same time, like I said above: I think we don't actually make use of this new "application" parameter anywhere. So let's remove it again?

fnwbr · 2023-12-06T12:28:00Z

pages/chat/[[...roomId]].js

+                    <ServiceTable>
+                        <ServiceTable.Body>
+                            { otherRooms && otherRooms.map((room) => {
+                                return <ServiceTable key={room.roomId}><SidebarListEntry key={room.roomId} room={room} selected={room.roomId === roomId} /></ServiceTable>;


🤔

A <ServiceTable> inside of a <ServiceTable> (line 251)?
This results in this double-border again:

fnwbr · 2023-12-06T13:17:33Z

pages/chat/[[...roomId]].js

+                        <DefaultLayout.IframeHeaderButtonWrapper>
+                            { roomId && <>
+                                <CopyToClipboard text={roomId} />
+                                <TextButton title={t('Leave room and remove from my library')} onClick={() => handleLeave(roomId)}>


Missing translation

One does not really remove a chat from a library, or? This sounds off to me...

fnwbr · 2023-12-06T13:17:37Z

pages/chat/[[...roomId]].js

+                The style hack is needed because setting 'display' to 'none' creates an error.
+                Element performs a few compatability checks before onLoaded fires.
+                Therefore, Element throws an error, saying the current browser is not supported.
+                Setting the height to 0px centers the loading spinner before the iframe is ready.


Sorry, but I don't understand any of this.
Yes, Element can take quite a while to load at times. Especially when on a bad connection.

But I don't understand what any of this is there for; especially do I not see any loading spinners while the <iframe> is loading. It just looks like this:

hm not sure why the loading spinner didn't show up for you.
Generally I think we really need to show a loading spinner before the iframe is ready. It just feels like a bug sometimes, otherwise.
I've opened an issue for this in the meantime #119

fnwbr · 2023-12-06T13:33:38Z

pages/chat/[[...roomId]].js

+                    .mx_Dialog_fixedWidth { width: 100% }
+                    .mx_Dropdown_menu { max-width: 100% }
+
+                    #mx_JoinRuleDropdown__public { display: none }


Let's add comments to each of these lines on what they intend to do.
This is especially helpful for later; we do not control if/how/when Element changes their markup. So we might need to make adjustments to all of these CSS rules whenever we update Element. Therefore it's important to remember everything these lines intend to do, so one can later double-check if they still do what they are supposed to do.

Also, if the intention of this specific line is to disallow creating public rooms: Why is it inside a @media ${breakpoints.phoneOnly} {? Do we only want to disallow creating public rooms on smartphones? If so, why?

Was the intention to take away the second option from users for now?

fnwbr · 2023-12-06T13:34:06Z

pages/chat/[[...roomId]].js


-                    /* More breathing room in the main timeline of a chat */
-                    .mx_RoomView_timeline_rr_enabled .mx_EventTile[data-layout=group] .mx_EventTile_line,


Why did you remove these?

fnwbr · 2023-12-06T14:24:21Z

Alright, I've basically re-implemented the same feature within a few lines of code over in #115.
Feel free to close this PR, or modify it to still bring over the changes you did for <ServiceLink> -- which I think we want to have!

But maybe it might be easier to close this PR and start from main again, and porting the changes manually by just copy-pasting from the diff of this PR... up to you.

This was discussed in #38 (comment)

fnwbr · 2024-01-17T17:05:07Z

Closing this; all handled... what I commented on in my last remark was done in 921d60f

Marcel added 5 commits June 1, 2023 12:32

merge write into chat-create-messages

720ec43

add missing code for avatar check

b160178

add first basic function to create new rooms

6a9c233

use element home screen for chat actions

9ff29df

wrap Link content in span

7c6c4cd

aofn mentioned this pull request Jul 27, 2023

Use the element home screen to create new chats #35

Closed

merge main into chat-create-messages

11a4584

github-advanced-security bot found potential problems Aug 15, 2023

View reviewed changes

pages/chat/[[...roomId]].js Fixed Show fixed Hide fixed

pages/chat/[[...roomId]].js Fixed Show fixed Hide fixed

pages/chat/[[...roomId]].js Fixed Show fixed Hide fixed

Marcel added 5 commits August 15, 2023 13:40

add colour to textbutton

a6c7a3a

add ability to switch between room view and create room view on mobil…

88484b7

…e. remove submenu dropdown and replace it with onClick function making use of elements home screen. add css rules to make modal view from element usable on mobile

add optional onClick function to bypass dropdown

fbc677a

remove debuggin code

6aac5f9

add comment, remove unused code

ee2705b

aofn marked this pull request as ready for review August 15, 2023 11:50

fnwbr reviewed Aug 16, 2023

View reviewed changes

fnwbr requested changes Aug 16, 2023

View reviewed changes

andirueckel marked this pull request as draft September 20, 2023 15:32

Marcel and others added 9 commits October 11, 2023 16:25

merge main into chat-create-messages

421c95a

chore: remove unused code

d3c41ab

merge main into chat-create-messages

7872233

refactor: remove device detection and use breakpoints for mobile view…

019704a

…. Add loading spinner while iframe is loading to prevent displaying nothing in the iframe view for a long time

add breakpoint integers for convenience

ffb8e46

refactor: improve logic for switiching between mobile and desktop views

75629fd

refactor: make sure loading spinner is displayed before iframe is loa…

fa85e91

…ded, rename function

merge main into chat-create-messages

88955e2

fix: make service submenu work again if not options are given and onC…

1dc43a5

…lick parsed. fix logic of loading spinner

aofn added 2 commits November 28, 2023 15:08

chore: remove logs and unsued code

78f4297

refactor: improve logic around loading spinner and fix for larger screns

c15679f

aofn force-pushed the chat-create-messages branch from 12059c3 to c15679f Compare November 28, 2023 14:25

aofn added 7 commits November 29, 2023 11:34

merge main into chat-create-message

dce50fb

refactor: move deleting chat into chat header, swap icon

55f5d1d

Merge remote-tracking branch 'origin/main' into chat-create-messages

43e2574

fix: css injections

f6901b9

chore: display chats in service tables

fix: dont render avatar at the moment since its braking the layout atm

0443b68

refactor: add optional notification variable to ServiceLink.js

b600cb5

refactor: use ServiceLink component for chat rooms

d7a6fe7

github-advanced-security bot found potential problems Nov 30, 2023

View reviewed changes

components/UI/ServiceLink.js Fixed Show fixed Hide fixed

andirueckel and others added 9 commits November 30, 2023 12:34

chore: fix eslint/stylelint formatting issues

27238c9

chore: remove trailing whitespaces

327c7f3

chore: fix formatting and comment temporarily unused Avatar

10e8a7a

style: improve NotificationBadge styling; needs re-positioning

a623c3c

style: refactor ServiceLink for use in /chat route

c01820d

refactor: fix table without using grid and use actual notification co…

670af5a

…unt instead of debug value

refactor: make style lint happy

6197c18

refactor: create component for summary

97e2558

chore: improve comment

58a39a3

aofn requested a review from fnwbr November 30, 2023 13:04

aofn marked this pull request as ready for review November 30, 2023 13:05

Merge branch 'main' into chat-create-messages

7f4e297

# Conflicts: # lib/auth/MatrixAuthProvider.js # pages/chat/[[...roomId]].js

fnwbr requested changes Dec 6, 2023

View reviewed changes

fnwbr mentioned this pull request Dec 6, 2023

/chat: Use Element "home screen" to create new chats #115

Merged

fnwbr marked this pull request as draft December 13, 2023 14:11

fnwbr added a commit that referenced this pull request Jan 17, 2024

/chat: Use <ServiceLink> component

921d60f

This was discussed in #38 (comment)

fnwbr closed this Jan 17, 2024

fnwbr deleted the chat-create-messages branch January 17, 2024 17:05

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use element home screen to create new chats by default #38

Use element home screen to create new chats by default #38

aofn commented Jul 27, 2023 •

edited

Loading

fnwbr left a comment

fnwbr Aug 16, 2023

aofn commented Nov 28, 2023

fnwbr left a comment

fnwbr Dec 6, 2023

fnwbr Dec 6, 2023

fnwbr Dec 6, 2023

fnwbr Dec 6, 2023

fnwbr Dec 6, 2023

aofn Dec 12, 2023

fnwbr Dec 6, 2023

fnwbr Dec 6, 2023

fnwbr Dec 6, 2023 •

edited

Loading

fnwbr Dec 6, 2023

fnwbr commented Dec 6, 2023 •

edited by aofn

Loading

fnwbr commented Jan 17, 2024


		/* More breathing room in the main timeline of a chat */
		.mx_RoomView_timeline_rr_enabled .mx_EventTile[data-layout=group] .mx_EventTile_line,

Use element home screen to create new chats by default #38

Use element home screen to create new chats by default #38

Conversation

aofn commented Jul 27, 2023 • edited Loading

fnwbr left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aofn commented Nov 28, 2023

fnwbr left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fnwbr Dec 6, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fnwbr commented Dec 6, 2023 • edited by aofn Loading

fnwbr commented Jan 17, 2024

aofn commented Jul 27, 2023 •

edited

Loading

fnwbr Dec 6, 2023 •

edited

Loading

fnwbr commented Dec 6, 2023 •

edited by aofn

Loading