improved ux for 360 width media #3229
Conversation
* side-nav: hide footer
* fixed-title:
* room icon smaller and bolder
* room-title smaller and bolder
* room-topic in a different line, smaller and with italic
* favorite moved to the far rigth and increased in size
* burguer smaller and closer to the edge
* flex-tab-bar now slides up and down
* flex-tab-bar now horizontally after fixed-tile
* message: reduce the space around the button
* message-form:
* removed the space around the message box
* emoji icon move to the left side of the box
* attach moved to the right side of the box
* change the behaviour of the buttons based on the message box's text:
* if empty, show attach and mic
* if higher than 0, hide attach and mic and show send
* hide tooltips
* hide user typing
* emoji-picker:
* now appears bellow the message-form
* search box removed
|
@ARivottiC wow!! Just amazing! Thanks a ton for contributing! We'll take a look at this and see about getting it merged! @RocketChat/core |
|
Can you still see all of the flex tab buttons on smaller devices? |
|
@lucasvanhalst like it is, probably not. What's the minimum target, 320px? This could be a slider. Other option I considered was adding a drop down it the top right corner. |
|
A dropdown would probably be the best on mobile, to save some precious screen space :) |
|
This looks awesome! I am looking forward to try this out! |
|
@lucasvanhalst I'll try to add it today. I'm was really looking forward for suggestions and different approaches :). Thank you. |
|
@ARivottiC have you seed the customisations at https://chat.creators.co/ ? |
|
No @engelgabriel, omw, thanks. |
* side-nav: hide footer
* fixed-title:
* room icon smaller and bolder
* room-title smaller and bolder
* room-topic in a different line, smaller and with italic
* favorite moved to the far rigth and increased in size
* burguer smaller and closer to the edge
* flex-tab-bar now slides up and down
* flex-tab-bar now horizontally after fixed-tile
* message: reduce the space around the button
* message-form:
* removed the space around the message box
* emoji icon move to the left side of the box
* attach moved to the right side of the box
* change the behaviour of the buttons based on the message box's text:
* if empty, show attach and mic
* if higher than 0, hide attach and mic and show send
* hide tooltips
* hide user typing
* emoji-picker:
* now appears bellow the message-form
* search box removed
…to media-360-width
| @@ -15,7 +17,8 @@ Template.messageBox.events({ | |||
|
|
|||
| input.val(textAreaTxt.substring(0, caretPos) + emojiValue + textAreaTxt.substring(caretPos)); | |||
|
|
|||
| input.focus(); | |||
| if ( !window.matchMedia('all and (min-width: 360px)').matches ) | |||
| input.focus(); | |||
There was a problem hiding this comment.
|
Any updates on when this will be resolved and released? This would make the mobile app way more functional! Looks great :) I think a horizontal swipe to access sidebar would be great, it really gets in the way of the chat stream on the side, It would take up space sitting on top too |
|
Would this development be added to the iOS app as well? |
|
@karlprieb I like the improvements here. Let's pull this into a new branch and try to create a new PR form this. |
|
this would be great for mobile device，and one more limitation is image zoom，lack of zoom make it hard to use when contain a lot of text on img |
|
is this being deployed? current mobile UX is dire! |
|
I am going to go ahead and close this one, as we recently did a complete overhaul of our website design and along with that came a change in the tab bar/contextual bar. Here is the pull request that changed the contextual bar: #9481 |
@RocketChat/core