13.md (4848B)
1 # #13 Redesign 2 3 - **State:** open 4 - **Author:** @MTRNord 5 - **Created:** 2020-06-03T16:42:42Z 6 - **Labels:** enhancement, Design 7 - **Assignees:** @MTRNord 8 9 --- 10 11 Content will come in a few hours/days. This is a placeholder 12 13 Notes/TODOs 14 15 - [x] Login Page 16 - [ ] Settings 17 - [ ] Global Settings 18 - [ ] Theme Settings 19 - [ ] Custom accent color 20 - [ ] Username/Avatar Settings 21 - [ ] Devices 22 - [ ] Logout 23 - [ ] ... 24 - [ ] Room Settings 25 - [x] Creating Rooms 26 - [ ] Member List 27 - [ ] Communities List (Vertical and Horizontal Option) 28 - [ ] Allow more compact UI (no last message in room list, ...) 29 - [x] Timeline 30 - [ ] Events 31 - [x] Text Event 32 - [x] Replies Event 33 - [ ] Image Event 34 - [ ] Video Event 35 - [ ] File Event 36 - [ ] Notice Event 37 - [ ] State Events 38 - [ ] Membership Events 39 - [ ] Profile Data Change Events 40 - [x] Reaction Event 41 - [ ] Redaction Event 42 - [x] Encrypted Event 43 - [ ] Allow using current theme too after new design is deployed 44 - [ ] .... 45 46 47 ## Comments 48 49 ### @MTRNord — 2020-06-15T18:14:45Z 50 51 Notes from Ludwig in #matrix-design:matrix.org: 52 53 54 1. redesigned Daydream Login screen: 55 56 * I really like the blurry picture in the background! 57 * I don't like the red title. It's readable, but the color doesn't work with the background, and the font is used in no other place. 58 * I like how the sign-in button lifts up on mouseover! 59 * When showing an error message, the whole page grows in size, it no longer fits my screen. Have a dedicated space for error messages from the beginning! You could push the input fields closer together to make room. 60 * The homeserver field shows HTTP, when really it should probably use HTTPS. Which one is it? Also, if you expect the "https://" prefix, you should probably pre-fill the field with it. 61 * Where you say MXID, it should be user name, right? Or, if I'm supposed to specify my whole mxid, You could get rid of the homeserver field. 62 63 2. Loading animation: 64 65 * Very cute! Keep that! 66 * If the login fails, or the server doesn't exist, let the user know! I just got a neverending loading animation the first time. (blocked by sdk limits currently but reported) 67 68 3. Daydream main interface (before looking at the issue list): 69 70 * Overall, it looks "clean and simple", that's not a bad thing! It conflicts with the "nature" login screen and the "playful" loading animation, though. You probably want to chose a style and then stick to it for the entire client 71 * After login, there is no content in the middle of the screen, which makes it feel too empty. Maybe put your loading mascot there, saying "Welcome to Daydream! Select a Room from the room list to start chatting!" 72 * For longer room titles, hovering on them in the room list makes them bold, so they extend to multiple lines, which causes everything to lose its place. Maybe add a marker (like a black dot) in front or the title instead of making it bold. 73 * The Room filter works great and just as expected! But, in German at least, it cuts of the hint text too early. 74 * Light mode/Dark mode works great, but the slider is again in a different style. 75 76 4. Daydream: The actual chat: 77 78 * There could be a divider between the room title and the chat, just to explain that the title whitespace will cover up the chat content. 79 * Chat rendering looks fine, but please limit the maximum width of text. ~80 characters should be good, if the lines get too long it's easy to lose your place on a large screen. 80 * Similarly, limit the size of pictures and videos to much smaller boxes (the height of a few messages), so they don't take over the whole screen 81 * I would start the message text below the username, not to the right of it, simply because that's more consistent. Maybe make the username a bit smaller( same size as room name in room list) 82 * Also, the messages feel disconnected. I would prefer less vertical whitespace. 83 * on i.e. this message, the list item markers don't render 84 * As a last point, it would be awesome if I could draft multi-line messages using shift+enter! 85 86 5. I just noticed that you have an image viewer already in place, nice! 87 For that I have to offer: 88 89 * try a fade to grey instead of the backdrop moving in from the top. 90 * The picture could start growing from the size and place it is currently displayed at 91 * Try making the animations twice as fast, so it feels a bit more snappy! 92 93 94 95 ### @MTRNord — 2020-07-01T18:57:22Z 96 97 ### Memberlist: 98 99 > // order by presence, with "active now" first. 100 > // ...and then by power level 101 > // ...and then by last active 102 > // ...and then alphabetically. 103 > // We could tiebreak instead by "last recently spoken in this room" if we wanted to. 104 105 From: https://github.com/matrix-org/matrix-react-sdk/blob/9aff2e836e5d2459e28fdb4af823be4f7441b3f0/src/components/views/rooms/MemberList.js#L295 106