Rework create/edit group/chat #957

Jikstra · 2019-08-27T16:02:34Z

Missing:

ToDo (probably not in this pr):

when people join over qr in group creation dialog, update member list
show toast/error when trying to create group or qr code without a groupname
fix grey border bug when scrolling all the way down

Jikstra · 2019-08-31T22:59:48Z

src/renderer/stores/contacts.js

@@ -16,11 +17,11 @@ ipcRenderer.on('DD_EVENT_BLOCKED_CONTACTS_UPDATED', (evt, payload) => {
  contactsStore.setState({ ...state, blockedContacts })
 })

-ipcRenderer.on('DD_EVENT_CONTACTS_UPDATED', (evt, payload) => {
+ipcRenderer.on('DD_EVENT_CONTACTS_UPDATED', debounce((evt, payload) => {


Todo: I should remove this again.

nicodh · 2019-09-03T05:36:36Z

src/renderer/components/ChatList.js

                    />
                  </ArchivedChats>
                )
              } else {
                return (
                  <ChatListItem
-                    key={chatListItem.id}
+                    chatListItem={chatListItem}


why did you remove key attribute here? It might be an performance issue when reordering the chat list or when inserting new items at the beginning if react has no key to "identify" the items. https://reactjs.org/docs/reconciliation.html#recursing-on-children
I know we have an issue with duplicate keys sometimes but that should not be solved by removing the key. Consider that the chat list might have hundreds of items...

That wasn't on purpose. I actually added the correct ones to the map values (ContactRequestItemWrapper & ArchivedChats) which fixes the multiple error problem (we had the index of the element in the array + the chatId which in some cases where the same). So this problem is fixed with the last commit.

- Made create chat by contact into a wip dialog - moved ContactList into helpers, added useContacts hook

- Enforce fallback avatars to be uppercase - fix opening settings - Move out DeltaDialog in own helper component

- Implement add contact pseudo element

- Fix some styling - Implement getContacts2 dc method which allows us to not use a store

DD_EVENT_CHAT_MODIFIED to only swap out the one chat that has been modified. Also refactors ChatListItem

…-errors Rework create chat avoid react errors

DC_FUNCTION_CALL => EVENT_DC_DISPATCH EVENT_DC_CALL_METHOD_IGNORE_RETURN => EVENT_DC_DISPATCH EVENT_DC_CALL_METHOD => EVENT_DC_DISPATCH_CB DD_DC_CALL_METHOD_RETURN_<fn> => EVENT_DD_DISPATCH_RETURN_<fn>

nicodh · 2019-09-08T13:09:50Z

@Jikstra I would prefer to have 2 columns for editing groups, was it an explicit UI decisison to have only one column in CreateChat view?
This is roughly how edit group looks like in the dialog implementation with 2 columns now:

Jikstra · 2019-09-08T13:24:38Z

@Jikstra I would prefer to have 2 columns for editing groups, was it an explicit UI decisison to have only one column in CreateChat view?
This is roughly how edit group looks like in the dialog implementation with 2 columns now:|

Puuh. Sorry but I don't like it. Before implementing this i would prefer only adding them over the "Add member" button. As usual, i'm very opinionated and picky about ui/ux decisions, so this maybe comes around a bit mean.
I don't like having two columns as it spreads too much stuff over the screen and the whole width is only used in the group dialog. For selecting a contact for a chat you can't use the whole width as you do in Add Group dialogs. Switching from New Chat to Create Group will result in doubling the width of the dialog which I want to prevent as it stops the flow of going through the dialog. The close button is suddenly at another position, the eyes have to focus at different positions to find what they are looking for. The whole idea of combining existing and potential members into one list was to replace the 2 column view with a one column view but keeping the benefits of adding group members in a fast way. Also when searching things will change in the left and the right path of the dialog instead of creating a new list. Besides that you also can't use the whole width useful in the upper part of the dialog. I would prefer to keep it like it currently is.

Ahh i'm sorry i'm very opinionated on those things. I think i'm a lot less opinionated on coding style and stuff than on this...

nicodh · 2019-09-08T13:41:50Z

Well I didn't mean to change it in the CreateChat view but only in the edit group view. So no switching of width etc.
Usability wise I consider it a huge benefit to see members and non members side by side, that's why I would like to keep it in the edit group dialog...

Jikstra · 2019-09-08T14:01:29Z

Okay some points why I think it's not a good idea:

I prefer in a ui/ux to reuse ideas/components as often as possible. In my opinion it's confusing if adding/removing members in the Create Group dialog is done differently than in the edit group dialog.
We have no other place in the whole ui where we show Contacts or Chats (which are visually extremely similiar) in 2 columns/left&right to each other. Doing this in one place is confusing.
Opening the Edit Group dialog and having members displayed that aren't in this group is confusing. This is already problematic in the one column approach of me, but a bit better as it happens on a search input and can easily get undone, plus the checkboxes (which all are visually aligned at the same position, as it's in the same colum) makes it more clear that there's something different between members which i can add and members that i can remove. This benefit you don't have if they are spread accross two columns.

In case we can figure out a good way of the 2 column approach, i'm fine with using this approach as the general "Add member" view. But I don't like doing it at one place different as at another place. But can you explain to me what makes the 2 column approach easier to use over the "one splitted list" approach?

nicodh · 2019-09-08T14:10:55Z

Ok - although I still don't get why we should reduce the usable space to 25% of the available width and add extra clicks and forth and back switches and check boxes to the add/remove user process.
But I'm NOT very opinionated about UI stuff ;-)
So let's go for the one column. Maybe we can get other opinions in the UI sessions next days...

Jikstra · 2019-09-08T14:34:07Z

add extra clicks and forth and back switches and check boxes to the add/remove user process

Hmm good point! The most forth/back that we currently have is because we can't create a new (verified) group from the main menu. If we implement this, zack, one click less for creating a (verified) group. Adding/removing a member is currently possible with some keystrokes and one click which is quite less. Showing the qr code is also one click. Proof me wrong, but for me it doesn't feel like Creating a Chat/Group is a Point and Click Adventure (yet) :D

why we should reduce the usable space to 25% of the available width

We don't have more to show. We have 4 things: Group image, group name, qr code and group members. We could show the qr code, but the qr code changes whenever we change the groupname. Updating the qr code whenever we change the groupname makes the ui busy and distracts the user. Splitting the create group flow into two parts, first where we enter the groupname and the second where we add groupmembers/show the qr code would solve this, but comes with the cost that we need to throw away that group to change the name and we have one click more again. Yes we can show the member lists in two columns, but we can't use the other column in the upper part for anything else. Letting the groupname take the whole width looks weird and besides that we have nothing, as the group image is tightly coupled with the groupname.

Maybe we can get other opinions in the UI sessions next days...

👍

Another point which is important in my opinion is that we don't have a ui/ux guideline for the desktop client as there is for android (material) ios (that apple thing). Both platforms have a strict styling guide and many examples how to do things. We don't have that. It's not like there's one way on how to do it right with electron. Coming up with an own is not easy, needs a lot of thinking through and a good designer to have a consistent style guide. That's the reason why im copying so many things from android and the material design, because i think it works well on desktop too and because I think people are used to the android/smartphone flow. If we completely change how we interact with the desktop ui, we also need to come up with new components, buttons, maybe even colors. I don't know that shit, so i go the more safe path and try to stay as close with the android ui as possible, modifying things where it makes sense and using the telegram desktop ui as a good inspiration for a bridge between a desktop app and a mobile app. The downside is that it feels to much like an android app or whatever, but that's my bigger idea of how the desktop ui should look like. Changing this is possible, but than we need to change a lot. For ui consistence is key.

Renaming proposals

Fix creating a group resulting in empty dialog

Fix some edit group bugs

Refactor editgroup

Jikstra · 2019-09-10T11:38:48Z

Displaying qr code works as expected, you need to use the latest deltachat-node (from git). Will do a new release (hopefully today).

update chat view header after editing a group (to show updated group properties)

This problem is probably an old bug? Would be fine to do this in another pr.

hpk42 · 2019-09-10T14:06:59Z

in which situation does which function precisely erturn null?

…

On Tue, Sep 10, 2019 at 04:38 -0700, Jikstra wrote: The reason why we currently cant display the qr code is because rust master returns null for the qr code. -- You are receiving this because you are subscribed to this thread. Reply to this email directly or view it on GitHub: #957 (comment)

Jikstra commented Aug 31, 2019

View reviewed changes

nicodh reviewed Sep 3, 2019

View reviewed changes

Jikstra changed the title ~~[wip] Rework create chat~~ Rework create chat Sep 5, 2019

Jikstra force-pushed the rework_create_chat branch from 26e3bff to 6d5f490 Compare September 5, 2019 11:22

Jikstra and others added 26 commits September 5, 2019 13:24

Start reworking CreateChat into a dialog

2da6773

- Made create chat by contact into a wip dialog - moved ContactList into helpers, added useContacts hook

Implement new and better looking ContactList

48d2e95

Implement create (verified) group buttons, fix avatar rendering

e402c20

- Fix fallback avatar color

1662686

- Enforce fallback avatars to be uppercase - fix opening settings - Move out DeltaDialog in own helper component

- Implement contact search

ccc1266

- Implement add contact pseudo element

Implement adding contact

1ccbe5a

Start working on CreateGroup

91f0cd2

Implement ContactList with checkboxes to select group members

0cf1c9a

- Upgrade electron to version 5

be0aae2

- Fix some styling - Implement getContacts2 dc method which allows us to not use a store

Fix some overflow bugs, implement a DeltaCheckbox

056a555

Fix cursors on DeltaCheckbox

3db3cfc

Implement set group image

0a9ea5d

Implement unset group image button

cccb6b3

Work on styling for unset group image button

b361a09

Fix positioning of input

643a233

Start working on showing qr code

ce0354b

add qr code icon

049bc9e

fix

93bfcd9

Show qr code (needs a fixed -core-rust!)

5811a72

Fix ChatListItem to only rerender if needed. Also implemented

39b2a32

DD_EVENT_CHAT_MODIFIED to only swap out the one chat that has been modified. Also refactors ChatListItem

Fix bugs

a88ef15

Refactor ChatListItem

52f77e7

Remove unused conversations css

786398e

Add key to ChatListItem

54c57b9

Lazily create chats, add contacts to group and finish group creation

f5f455c

Delete group onClose

35f1080

nicodh self-assigned this Sep 7, 2019

nicodh added 4 commits September 7, 2019 17:30

Merge pull request #968 from deltachat/rework_create_chat-avoid-react…

61b68d2

…-errors Rework create chat avoid react errors

Rename "show" => "viewMode"

2aefed7

Renaming events

91ddd10

DC_FUNCTION_CALL => EVENT_DC_DISPATCH EVENT_DC_CALL_METHOD_IGNORE_RETURN => EVENT_DC_DISPATCH EVENT_DC_CALL_METHOD => EVENT_DC_DISPATCH_CB DD_DC_CALL_METHOD_RETURN_<fn> => EVENT_DD_DISPATCH_RETURN_<fn>

Use callDcMethod instead of ipcRenderer.send

39e4630

nicodh and others added 12 commits September 8, 2019 16:44

Use callback for getLocations

2a9d9ff

Merge pull request #969 from deltachat/renaming-proposals

8d2a88f

Renaming proposals

Move validateEmail to helpers/Contact for later use

d438f38

New edit group dialog

3f38c64

Rename CreateGroup prefix to generic Group prefix

577ae97

Implement updateGroup

ecb12b2

List verified contacts only in verified groups

dacbb20

Cleanup - remove unused stuff

f6cd749

Fixes unintended changes

252acfd

Fix padding in EditGroup dialog

c16eca4

Fix creating a group resulting in empty dialog

Merge pull request #972 from deltachat/fix-some-edit-group-bugs

e376b10

Fix some edit group bugs

Merge pull request #970 from deltachat/refactor-editgroup

ae176db

Refactor editgroup

nicodh removed their assignment Sep 10, 2019

Jikstra changed the title ~~Rework create chat~~ Rework create/edit group/chat Sep 10, 2019

update deltachat-node to use git master

7af3a01

Jikstra merged commit cc7914a into master Sep 10, 2019

Jikstra deleted the rework_create_chat branch September 10, 2019 12:15

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Rework create/edit group/chat #957

Rework create/edit group/chat #957

Jikstra commented Aug 27, 2019 •

edited

Loading

Jikstra Aug 31, 2019

nicodh Sep 3, 2019 •

edited

Loading

Jikstra Sep 3, 2019 •

edited

Loading

nicodh commented Sep 8, 2019

Jikstra commented Sep 8, 2019 •

edited

Loading

nicodh commented Sep 8, 2019

Jikstra commented Sep 8, 2019 •

edited

Loading

nicodh commented Sep 8, 2019

Jikstra commented Sep 8, 2019 •

edited

Loading

Jikstra commented Sep 10, 2019 •

edited

Loading

hpk42 commented Sep 10, 2019 via email

Rework create/edit group/chat #957

Rework create/edit group/chat #957

Conversation

Jikstra commented Aug 27, 2019 • edited Loading

Jikstra Aug 31, 2019

Choose a reason for hiding this comment

nicodh Sep 3, 2019 • edited Loading

Choose a reason for hiding this comment

Jikstra Sep 3, 2019 • edited Loading

Choose a reason for hiding this comment

nicodh commented Sep 8, 2019

Jikstra commented Sep 8, 2019 • edited Loading

nicodh commented Sep 8, 2019

Jikstra commented Sep 8, 2019 • edited Loading

nicodh commented Sep 8, 2019

Jikstra commented Sep 8, 2019 • edited Loading

Jikstra commented Sep 10, 2019 • edited Loading

hpk42 commented Sep 10, 2019 via email

Jikstra commented Aug 27, 2019 •

edited

Loading

nicodh Sep 3, 2019 •

edited

Loading

Jikstra Sep 3, 2019 •

edited

Loading

Jikstra commented Sep 8, 2019 •

edited

Loading

Jikstra commented Sep 8, 2019 •

edited

Loading

Jikstra commented Sep 8, 2019 •

edited

Loading

Jikstra commented Sep 10, 2019 •

edited

Loading