Specific interface enhancements

[jancborchardt]

Moved the checklist from #14 to here. Based on the screenshot of the current state which @LEDfan posted there.

• [x] The »New Conversation« button should be the first item on the left, just like »New Contact« in the contacts app. (from @jbtbnl)
• [x] get rid of the static top bar. The »Leave« and »Add person« buttons should be in the entry of the conversation. Much like the action icons in the News app. Leave would be the X and »Add person« would be a plus (the add icon).
• [x] show the avatars of the participants (except yourself of course) in the entry of the conversation so they are more easily findable
• [x] when there are less messages than can fill the screen, they should be on the bottom to fit with the »Write & Send« section (from @stefan-niedermann)
• [x] when a person writes several messages after another, do not repeat their avatar but group the messages
• [x] on the right, only show a time once. If a new message is written in the same minute, it does not need an extra time display
• [x] the avatars don’t need to be shifted in so much. Better divide them with a bit of vertical whitespace rather than by horizontal shifting. Again here, messages by one person should be grouped if the other person does not say something inbetween.

[jancborchardt]

@jbtbnl @stefan-niedermann @LEDfan btw you should join the #owncloud-design and #owncloud-dev channels on IRC (freenode) if you are not on there yet. :)

[LEDfan]

• [x] Remove responsiveness
• [x] Use fixed with for conversation list, like in core

[jancborchardt]

Some more, on the initial launch experience:

• [x] the »connected to the chat server!« notification up top is not useful. If everything works fine, we don’t need a notification. :)
• [x] the initial start screen should already show the sidebar with »New Conversation«
• [x] never ever ever ever (!) use the alert popup! :) instead, the dialog question with input field should simply be directly displayed in the content area to the right as plain HTML.
• [x] we have all the contact data, so we should use it! When there are no conversations yet, the content area should show a grid of the avatars+names of the starred contacts. cc @tanghus On click, a conversation with them should be started.
• [x] we need to remove the guesswork from adding contacts – we should have suggestions-as-you-type just like for sharing. But probably even better, with avatars.
• [x] please don’t make color changes from the core app styles such as background color (especially the hover changes) or border. Just leave it as it is and it will look good. See the News app for a good example.
• [x] the name of the user should be displayed right next to the avatar, not below it
• [x] please don’t use a custom spinner. Instead use the one from the core CSS by using the class .icon-loading
• [x] use the actual + and x icons from core by using the classes .icon-add and .icon-delete

@jbtbnl if you’re looking for a new design project to tackle after the redesign of contacts, this seems very fitting. Especially because it’s so close to Contacts and needs tight integration with it. :)

[LEDfan]

@jancborchardt I'll implement it :) But some of them can only be implemented after the contacts is integrated.

Just a question. Why is it bad to use alert boxes? Isn't is good for mobile devices?

[jancborchardt]

@LEDfan because alert boxes:

• just pop up in the middle of the screen, no matter where you clicked. Rather, elements asking you for prompts should appear near where you clicked
• they are modal and steal focus, that is you have to deal with them until you continue
• people are conditioned that popups are ads or just ignorable software warnings (Windows …) and often just close them and/or don’t read them
• they do not fit the design of the app

:)

[LEDfan]

Okay thanks for you response.

Should there be an overlay over the chat messages? Or where should the input field be located?

[jancborchardt]

In the area where the chat is to be (app-content), on the top. Because that needs to be empty.

Hm, that just reminds me, we also need a mechanism for when you add a person to an existing conversation.

So it should be similar to this Bootstrap Popover: http://getbootstrap.com/javascript/#popovers (maybe you can just use that JS library) Extend to the right of the entry / new conversation button, with an input field.

For a completely new Conversation, in the future we should have something like I described above, showing favorited contacts. See Google Hangouts or the Dialer app on Android for that.

[LEDfan]

@jancborchardt I removed the prompt to start a new conversation. Can you have a look at it? I have just copied the css and the generated HTML from bootsrap. Because it gave a lot of troubles when I use Angularstrap or angular-ui-bootstrap. (there couldn't be a form in the popover etc)

[LEDfan]

I implemented the comments above in the code. On startup:

Popover to start a conversation:

Conversation with messages and inviting a user:

Chatting mobile portrait

Chatting mobile landscape

Popover Mobile Landscape

More suggestions?

[jancborchardt]

Nice progress! @LEDfan these comments are purely from looking at the screenshots because currently I have no time to look at it. Hope it’s helpful. :)

On startup

• [x] add a + icon to the left of »New Conversation«. Use the icon from core (class .icon-add)
• [x] we need to improve the main view here of course. »Start chatting!« should be replaced with a grid view of contacts, but that’s for the future

Popover to start a conversation

• [x] the close button on the popover is not needed. The popover should close when you click anywhere outside of the popover
• [x] the title is not needed. Just cut the whole dark blue bar, it’s too much
• [x] does the placeholder of the input field say »Username«?
• [x] Also, the popover doesn’t really work that good after all I think. What would be better is:
  • [x] for a new conversation: Just add a row below the »New conversation« button with the input field and the »Invite« button. (Better: make the button input field full width of the sidebar and instead of button an icon (.icon-confirm) which is displayed in the right of the input field. Check the password protect screen of shared links for how that looks.)
  • [x] for an existing conversation: Expand the entry in height and display the input field in that new space.
• [x] Basically, let’s not use the popover at all. Sorry for the confusion but interface-wise it seems more complicated than we need to make it.

Popover Mobile Landscape

• [x] do not use confirm when leaving a conversation! :) Read http://alistapart.com/article/neveruseawarning – instead there should be a notification in place of the entry saying »Deleted conversation with username« with an »Undo« button to the right.
• [x] The »Add« and »Delete« buttons only show for the currently active conversation, right?

@jbtbnl do you also have remarks?

[jbtbnl]

Some remarks from my side:

• [x] The new conversation form should be inline, just like https://f.cloud.github.com/assets/639688/1889986/cf870f2e-7a25-11e3-8caf-c73b6fd1f3b2.png
• [x] The avatar with name in the navigation plane does leave a lot of space empty, better put the contact name on the right side of the avatar (at least for a 1 on 1 conversation)

[jancborchardt]

@jbtbnl that’s what I meant by moving away from the popover – thanks for stating an example! :) Also agree with your second point.

Another thing:

• [x] the »New Conversation« entry is way bigger than the »New« row in any other app. Also the text shouldn’t be bold.

[LEDfan]

I'll update the code ASAP :) But for the name in the conversation list. Should there be a vertically list with users like so:

user1avatar user1name
user2avatar user2name 

etc or: user1avatar user2avatar user1name user2name

[jancborchardt]

@LEDfan as soon as multiple users are in the conversation, just don’t show their names anymore.

[LEDfan]

Okay I'll do that. Thanks.

[LEDfan]

• [x] make the chat msg field a textarea

[jancborchardt]

• [x] make the chat message textarea change size automatically according to message. For example use https://github.com/jackmoore/autosize (also remove the resize handles)

[LEDfan]

@jancborchardt I have used the plugin you mentioned. What should be the behaviour when enter is pressed inside the texarea:

• send the chat message and empty the text field (like in a text input). A new line can be inserted by pressing shift+enter
• insert a new line in the textarea. The main disadvantage of this is that messages can't be send by pressing enter i.e. the mouse is always needed for sending messages.

[stefan-niedermann]

most messenger allow configuration but use the first version (enter = send, shift + enter = new line) as default. a message should be sent on pressing enter (and shift + enter = new line). imho we don't need to allow configuration here (or maybe a configuration file? - nothing in the user interface).

[jbtbnl]

Yes, enter = send, shift + enter = new line as suggested by @stefan-niedermann is the most common.

[jancborchardt]

Yep. No configuration needed.

@stefan-niedermann btw you should join our #owncloud-design (and #owncloud-dev) IRC channels! (on freenode)

[stefan-niedermann]

@jancborchardt how often do you want to repeat this? :D :D :D

I'm already at the mailing list. IRC... well, noone i know uses it, so i use it very rarely myself ;) sometimes i'm in the IRC channels, but than nobody seems to be online or there is currently no discussion ;)

for example like now, or am i doing something wrong?

[LEDfan]

• [ ] when hovering over a random avatar usename should show up and the online/offline state

[LEDfan]

I fixed all todos in here. Please open a new issue with new design suggestions/