chat: Interface redesign #1976

matildepark · 2019-11-21T01:23:23Z

This PR implements the latest redesign of the Chat interface and adds additional features for mobile and PWA use, easier join flows, and a general refresh of the Indigo design components used in Chat.

Features

Implements a new design by @urcades.
Datestamp now uses @d format.
Adds the ability to collapse and expand the sidebar.
Adds the ability to “popout” chats, removing the sidebar and Landscape chrome in a new window.
Adds a fully functional mobile layout, including a web app manifest for progressive web application compatibility and a “native app” look.
Adds the ability to create join links to chats by mentioning them by name (ie. saying “~dopzod/urbit-help” becomes a link to automatically join it).

Additional comments

Replaces tachyons with indigo-static. indigo-react should be gradually integrated as a next milestone.

Added exports so that indigo-react can be integrated into our workflow without error.

vvisigoth · 2019-11-21T02:10:14Z

Legendary

…

On Wed, Nov 20, 2019 at 5:23 PM Matilde Park ***@***.***> wrote: This PR implements the latest redesign of the Chat interface and adds additional features for mobile and PWA use, easier join flows, and a general refresh of the Indigo design components used in Chat. [image: Screen Shot 2019-11-20 at 8 15 13 PM] <https://user-images.githubusercontent.com/20846414/69292098-35fd0200-0bd3-11ea-83c4-c8626059bdd3.png> [image: full] <https://user-images.githubusercontent.com/20846414/69292110-3c8b7980-0bd3-11ea-883d-e5f29034d38f.png> [image: mobile] <https://user-images.githubusercontent.com/20846414/69292116-3eedd380-0bd3-11ea-8724-8699ffa0cdd9.png> Features - Implements a new design by @urcades <https://github.com/urcades>. - Datestamp now uses @d format. - Adds the ability to collapse and expand the sidebar. - Adds the ability to “popout” chats, removing the sidebar and Landscape chrome in a new window. - Adds a fully functional mobile layout, including a web app manifest for progressive web application compatibility and a “native app” look. - Adds the ability to create join links to chats by mentioning them by name (ie. saying “~dopzod/urbit-help” becomes a link to automatically join it). Additional comments - Replaces tachyons with indigo-static. indigo-react should be gradually integrated as a next milestone. ------------------------------ You can view, comment on, or merge this pull request online at: #1976 Commit Summary - chat: add exports to gulpfile - chat-view: redesign of chat interface File Changes - *M* pkg/arvo/app/chat/css/index.css <https://github.com/urbit/urbit/pull/1976/files#diff-0> (3) - *A* pkg/arvo/app/chat/img/ChatSwitcherClosed.png <https://github.com/urbit/urbit/pull/1976/files#diff-1> (0) - *A* pkg/arvo/app/chat/img/ChatSwitcherLink.png <https://github.com/urbit/urbit/pull/1976/files#diff-2> (0) - *A* pkg/arvo/app/chat/img/popout.png <https://github.com/urbit/urbit/pull/1976/files#diff-3> (0) - *M* pkg/arvo/app/chat/index.html <https://github.com/urbit/urbit/pull/1976/files#diff-4> (12) - *M* pkg/arvo/app/chat/js/index.js <https://github.com/urbit/urbit/pull/1976/files#diff-5> (2) - *M* pkg/arvo/app/chat/js/tile.js <https://github.com/urbit/urbit/pull/1976/files#diff-6> (2) - *M* pkg/interface/chat/gulpfile.js <https://github.com/urbit/urbit/pull/1976/files#diff-7> (5) - *M* pkg/interface/chat/src/css/custom.css <https://github.com/urbit/urbit/pull/1976/files#diff-8> (141) - *A* pkg/interface/chat/src/css/indigo-static.css <https://github.com/urbit/urbit/pull/1976/files#diff-9> (1) - *D* pkg/interface/chat/src/css/tachyons.css <https://github.com/urbit/urbit/pull/1976/files#diff-10> (2) - *M* pkg/interface/chat/src/index.css <https://github.com/urbit/urbit/pull/1976/files#diff-11> (2) - *M* pkg/interface/chat/src/js/api.js <https://github.com/urbit/urbit/pull/1976/files#diff-12> (2) - *M* pkg/interface/chat/src/js/components/chat.js <https://github.com/urbit/urbit/pull/1976/files#diff-13> (482) - *M* pkg/interface/chat/src/js/components/join.js <https://github.com/urbit/urbit/pull/1976/files#diff-14> (47) - *M* pkg/interface/chat/src/js/components/lib/chat-input.js <https://github.com/urbit/urbit/pull/1976/files#diff-15> (28) - *M* pkg/interface/chat/src/js/components/lib/chat-tabbar.js <https://github.com/urbit/urbit/pull/1976/files#diff-16> (73) - *M* pkg/interface/chat/src/js/components/lib/header-bar.js <https://github.com/urbit/urbit/pull/1976/files#diff-17> (6) - *D* pkg/interface/chat/src/js/components/lib/icons/icon-send.js <https://github.com/urbit/urbit/pull/1976/files#diff-18> (9) - *M* pkg/interface/chat/src/js/components/lib/icons/sigil.js <https://github.com/urbit/urbit/pull/1976/files#diff-19> (12) - *M* pkg/interface/chat/src/js/components/lib/invite-element.js <https://github.com/urbit/urbit/pull/1976/files#diff-20> (19) - *M* pkg/interface/chat/src/js/components/lib/member-element.js <https://github.com/urbit/urbit/pull/1976/files#diff-21> (10) - *M* pkg/interface/chat/src/js/components/lib/message.js <https://github.com/urbit/urbit/pull/1976/files#diff-22> (91) - *M* pkg/interface/chat/src/js/components/lib/sidebar-invite.js <https://github.com/urbit/urbit/pull/1976/files#diff-23> (11) - *M* pkg/interface/chat/src/js/components/lib/sidebar-item.js <https://github.com/urbit/urbit/pull/1976/files#diff-24> (43) - *M* pkg/interface/chat/src/js/components/member.js <https://github.com/urbit/urbit/pull/1976/files#diff-25> (95) - *M* pkg/interface/chat/src/js/components/new.js <https://github.com/urbit/urbit/pull/1976/files#diff-26> (85) - *M* pkg/interface/chat/src/js/components/root.js <https://github.com/urbit/urbit/pull/1976/files#diff-27> (285) - *M* pkg/interface/chat/src/js/components/settings.js <https://github.com/urbit/urbit/pull/1976/files#diff-28> (129) - *M* pkg/interface/chat/src/js/components/sidebar.js <https://github.com/urbit/urbit/pull/1976/files#diff-29> (29) - *M* pkg/interface/chat/src/js/components/skeleton.js <https://github.com/urbit/urbit/pull/1976/files#diff-30> (52) - *M* pkg/interface/chat/src/js/store.js <https://github.com/urbit/urbit/pull/1976/files#diff-31> (1) Patch Links: - https://github.com/urbit/urbit/pull/1976.patch - https://github.com/urbit/urbit/pull/1976.diff — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#1976?email_source=notifications&email_token=AAMJBYYD5RAQ3ZPGRXP7I3DQUXPI5A5CNFSM4JP3SCA2YY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4H262PVQ>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAMJBY3XXZEW5AUYVWE6IRLQUXPI5ANCNFSM4JP3SCAQ> .

Fang- · 2019-11-21T11:23:19Z

including a web app manifest for progressive web application compatibility and a “native app” look.

Absolutely amazing!

-1 for the floating create/join buttons (also looks like there's no bottom-padding/margin accounting for them, obscuring the last item), but otherwise looks very good! Fancy blue sigils.

matildepark · 2019-11-21T16:31:53Z

Gotta tweak the buttons (I think they're 3px off center) and the input box in read-only situations, standby.

This commit redesigns the front-end of chat-view for Landscape, adding a collapsable sidebar, popout chats, a streamlined join flow, and a general refresh of the Indigo interface.

matildepark · 2019-11-21T16:51:18Z

OK cool, good for review.

vvisigoth · 2019-11-22T23:47:44Z

@loganallenc plz review

Adding some very small viewport adjustments to keep the layout tidy, disabling iOS autocorrect.

Lining up the headers for these two panels on various viewports.

Adds a blank white placeholder icon, so that it looks better than a blurry screencap on mobile devices.

matildepark · 2019-11-25T19:27:25Z

@vvisigoth found a bug in the regex I wrote for the join flow. Gonna patch that today.

This commit amends the join flow based upon regular expression matching of chatroom names to only match if the entire message is the chat.

matildepark · 2019-11-25T19:49:49Z

Ok, done.

tacryt-socryp · 2019-11-26T22:13:54Z

I will get to this as soon as I open my static gall PR. Thanks!

tacryt-socryp · 2019-11-28T00:44:30Z

pkg/interface/chat/src/js/components/join.js

+        });
+        return;
+      }
+      this.props.api.chatView.join(ship, station);


Very nice piece of additional functionality.

tacryt-socryp

I still need to review the functionality of this, but it looks good.

tacryt-socryp · 2019-11-28T00:46:34Z

pkg/interface/chat/src/js/components/lib/icons/sigil.js

-        {
-          sigil({
+        <div style={{ flexBasis: 32, backgroundColor: props.color }}>
+          {sigil({


good addition, will make contacts integration simpler

tacryt-socryp · 2019-11-28T00:48:29Z

pkg/interface/chat/src/js/components/lib/message.js

+      if ((chatroom !== null) // matched possible chatroom
+        && (chatroom[1].length > 2) // possible ship?
+        && (urbitOb.isValidPatp(chatroom[1]) // valid patp?
+        && (chatroom[0] === letter.text))) { // entire message is room name?


oof. good, but unwieldy. we really need a better way to send around links in an ongoing fashion.

regexing a message for valid room names that can now have any number of hyphens and slashes without catching stack traces and URLs is surprisingly annoying.

pkg/interface/chat/src/js/components/new.js

tacryt-socryp · 2019-11-28T00:52:28Z

pkg/interface/chat/src/js/components/settings.js

-        <a onClick={this.deleteChat.bind(this)}
-          className="pointer btn-font underline nice-red">{buttonText}</a>
+      <div>
+      <div className={"w-100 fl mt3 " + ((chatOwner) ? 'o-30' : '')}>


Why display this at all if it's not an available option?

Insisted in the mockups and conversations after — I imagine you want people to see what the owner can do and infer how chatrooms in general work.

pkg/interface/chat/src/js/components/settings.js

pkg/interface/chat/src/js/components/member.js

pkg/interface/chat/src/js/components/settings.js

tacryt-socryp · 2019-11-28T01:01:49Z

Layout issue upon creation of an empty channel in Brave.

tacryt-socryp · 2019-11-28T01:02:15Z

Also noticing that the Create new and join buttons are not noticeable when the chat list is empty

tacryt-socryp · 2019-11-28T01:02:30Z

Chat input doesn't seem to auto-focus.

matildepark · 2019-11-28T01:03:26Z

Autofocus was removed because on mobile that causes each and every page to jump to the textbox. If you know how to responsively enable autofocus, let me know.

tacryt-socryp · 2019-11-28T01:03:27Z

On members page, the "Ban" button looks exactly the same font weight / style as the Host text, which is not a button.

tacryt-socryp · 2019-11-28T01:04:32Z

Deleting a chat crashes the browser window.

matildepark · 2019-11-28T01:05:17Z

The layout issue you're talking about is that overflow-x-scroll produces a scrollbar in your browser — I noticed you saw scrollbars where I don't on urbit.org, too. I will just responsively enable it. We only want to overflow-x-scroll on mobile anyhow.

pkg/interface/chat/src/js/components/lib/chat-input.js

matildepark · 2019-11-28T01:19:46Z

Deleting crash is from trying to access a variable set from a prop before initialisation. I'll do the component and fake API call fixes first before figuring out the life cycle stuff.

matildepark · 2019-11-28T01:40:43Z

Deleting issue fixed. const instead of allocating it with let every time the component's mounted.

matildepark · 2019-11-28T01:48:40Z

I believe I've addressed everything requested. The remainder is design criticism, which I think is outside the scope of the PR, as this matches the mockups that have gone through their own extensive reviews.

Changes to the structure stylistically during code review. Using fake API calls instead of directly calling store; fixing a 'delete' crash'; making common code a component; autofocusing responsively.

matildepark · 2019-11-28T04:25:16Z

This has been tested on release candidate and the following are confirmed functional with the API:

text message
URL message
Hoon message (with caveat that a broken Hoon message will stack trace in Dojo but not on front-end, leaving it pending)
leaving a channel and rejoining
revoking write access and visiting that chat
returning write access and using that chat
revoking read access and visiting that chat (with a caveat that it provides a stack trace in Dojo to the visitor trying to pull the backlog it isn't permissioned to)
returning read access and visiting that chat (with a caveat that messages sent in the interim period during the ban will not show up when you rejoin)

tacryt-socryp

Has been tested against Philip’s rc branch and master. Great work Matilde.

tacryt-socryp · 2019-11-28T04:27:59Z

Btw showing the stack trace when failing a subscribe is good!

tacryt-socryp · 2019-11-28T04:28:07Z

Very righteous

matildepark · 2019-11-28T04:29:18Z

@philipcmonk

philipcmonk · 2019-11-28T06:47:26Z

Great, I'll merge this soon and try deploying it OTA on the testnet.

philipcmonk · 2019-12-01T00:45:37Z

I pushed this to the testnet OTA and everything seems fine.

matildepark requested a review from tacryt-socryp November 21, 2019 01:23

chat: add exports to gulpfile

e8d34fe

Added exports so that indigo-react can be integrated into our workflow without error.

matildepark force-pushed the mp-chat-redesign branch from 9d369ac to d2632d2 Compare November 21, 2019 01:29

chat-view: redesign of chat interface

a6b4ed1

This commit redesigns the front-end of chat-view for Landscape, adding a collapsable sidebar, popout chats, a streamlined join flow, and a general refresh of the Indigo interface.

matildepark force-pushed the mp-chat-redesign branch from d2632d2 to a6b4ed1 Compare November 21, 2019 16:51

matildepark and others added 3 commits November 22, 2019 20:11

chat: tweaking input and datestamp for 320px

8c38714

Adding some very small viewport adjustments to keep the layout tidy, disabling iOS autocorrect.

chat: members and settings responsive layout match

f90ae05

Lining up the headers for these two panels on various viewports.

chat: add mobile web app icon

cfc352e

Adds a blank white placeholder icon, so that it looks better than a blurry screencap on mobile devices.

matildepark force-pushed the mp-chat-redesign branch from f3e05dd to cfc352e Compare November 23, 2019 01:20

chat: tighten chatroom regex matching

4dd103c

This commit amends the join flow based upon regular expression matching of chatroom names to only match if the entire message is the chat.

tacryt-socryp reviewed Nov 28, 2019

View reviewed changes

pkg/interface/chat/src/js/components/lib/chat-input.js Show resolved Hide resolved

matildepark requested a review from tacryt-socryp November 28, 2019 01:47

chat: style fixes

b8a2d06

Changes to the structure stylistically during code review. Using fake API calls instead of directly calling store; fixing a 'delete' crash'; making common code a component; autofocusing responsively.

matildepark force-pushed the mp-chat-redesign branch from 5650738 to b8a2d06 Compare November 28, 2019 04:22

tacryt-socryp approved these changes Nov 28, 2019

View reviewed changes

matildepark changed the base branch from master to rc November 28, 2019 04:29

philipcmonk merged commit b8a2d06 into rc Dec 1, 2019

jtobin deleted the mp-chat-redesign branch December 4, 2019 11:40

chat: Interface redesign #1976

chat: Interface redesign #1976

matildepark commented Nov 21, 2019 •

edited

vvisigoth commented Nov 21, 2019 via email •

edited by Fang-

Fang- commented Nov 21, 2019

matildepark commented Nov 21, 2019

matildepark commented Nov 21, 2019

vvisigoth commented Nov 22, 2019

matildepark commented Nov 25, 2019

matildepark commented Nov 25, 2019

tacryt-socryp commented Nov 26, 2019

tacryt-socryp Nov 28, 2019

tacryt-socryp left a comment

tacryt-socryp Nov 28, 2019

tacryt-socryp Nov 28, 2019

matildepark Nov 28, 2019

tacryt-socryp Nov 28, 2019

matildepark Nov 28, 2019

tacryt-socryp commented Nov 28, 2019

tacryt-socryp commented Nov 28, 2019

tacryt-socryp commented Nov 28, 2019

matildepark commented Nov 28, 2019

tacryt-socryp commented Nov 28, 2019

tacryt-socryp commented Nov 28, 2019

matildepark commented Nov 28, 2019

matildepark commented Nov 28, 2019

matildepark commented Nov 28, 2019

matildepark commented Nov 28, 2019

matildepark commented Nov 28, 2019

tacryt-socryp left a comment

tacryt-socryp commented Nov 28, 2019

tacryt-socryp commented Nov 28, 2019

matildepark commented Nov 28, 2019

philipcmonk commented Nov 28, 2019

philipcmonk commented Dec 1, 2019

chat: Interface redesign #1976

chat: Interface redesign #1976

Conversation

matildepark commented Nov 21, 2019 • edited

Features

Additional comments

vvisigoth commented Nov 21, 2019 via email • edited by Fang-

Fang- commented Nov 21, 2019

matildepark commented Nov 21, 2019

matildepark commented Nov 21, 2019

vvisigoth commented Nov 22, 2019

matildepark commented Nov 25, 2019

matildepark commented Nov 25, 2019

tacryt-socryp commented Nov 26, 2019

tacryt-socryp Nov 28, 2019

Choose a reason for hiding this comment

tacryt-socryp left a comment

Choose a reason for hiding this comment

tacryt-socryp Nov 28, 2019

Choose a reason for hiding this comment

tacryt-socryp Nov 28, 2019

Choose a reason for hiding this comment

matildepark Nov 28, 2019

Choose a reason for hiding this comment

tacryt-socryp Nov 28, 2019

Choose a reason for hiding this comment

matildepark Nov 28, 2019

Choose a reason for hiding this comment

tacryt-socryp commented Nov 28, 2019

tacryt-socryp commented Nov 28, 2019

tacryt-socryp commented Nov 28, 2019

matildepark commented Nov 28, 2019

tacryt-socryp commented Nov 28, 2019

tacryt-socryp commented Nov 28, 2019

matildepark commented Nov 28, 2019

matildepark commented Nov 28, 2019

matildepark commented Nov 28, 2019

matildepark commented Nov 28, 2019

matildepark commented Nov 28, 2019

tacryt-socryp left a comment

Choose a reason for hiding this comment

tacryt-socryp commented Nov 28, 2019

tacryt-socryp commented Nov 28, 2019

matildepark commented Nov 28, 2019

philipcmonk commented Nov 28, 2019

philipcmonk commented Dec 1, 2019

matildepark commented Nov 21, 2019 •

edited

vvisigoth commented Nov 21, 2019 via email •

edited by Fang-