MM-38682: Gekidou Homepage (Static) #5756

shaz-r · 2021-10-15T07:50:39Z

Summary

Very simple, static components for the Channel List screen. These are the barebones and will be developed further in subsequent PR's.

Highlights:

Button Component: <Button emphasis='tertiary' size='lg' text='A Button' onPress=( () => Alert.alert('hi!')) />
Typography Helper: <Text style={typography('Body', 200)}> ...

To-Do:

Ticket Link

https://mattermost.atlassian.net/browse/MM-38682

Checklist

Added or updated unit tests (required for all new features)
Has UI changes

Device Information

This PR was tested on:

iPhone 12 / iOS 14.5 Simulator
Pixel 4 / API30 Simulator

Screenshots

Release Note

NONE

shaz-r · 2021-10-15T07:51:54Z

Note: This depends on #5718

enahum · 2021-10-15T07:56:25Z

@SHAZM dependency merged, please resolve conflicts

matthewbirtch · 2021-10-15T13:41:51Z

Adding @Rina-dsg for ux review as she's owning the mobile v2 UX from this point forward. I will take a look once Marina has reviewed though

shaz-r · 2021-10-17T22:31:55Z

@SHAZM dependency merged, please resolve conflicts

Rebased and pushed.

avinashlng1080

Just a few comments from my side. Each PR has to be tested against mobile + tablets and ran against Android and iOS.

app/components/channel_list/categories/body/channel/index.tsx

app/components/channel_list/categories/body/index.test.tsx

app/components/channel_list/categories/body/index.tsx

app/components/channel_list/categories/index.test.tsx

app/components/channel_list/header/index.tsx

app/utils/typography.ts

app/components/channel_list/threads/index.tsx

app/components/channel_list/search/index.tsx

app/screens/home/channel_list/index.tsx

larkox

In general looks good, just a few comments here and there. I see there are still some missing pieces, so I will refrain to approve until everything is in place.

app/components/channel_list/categories/header/index.tsx

app/components/channel_list/index.tsx

app/components/channel_list/search/index.tsx

larkox

Some more comments from my side. Mostly nitpicks.

app/components/button/index.tsx

larkox · 2021-10-18T13:27:39Z

app/components/button/index.tsx

+
+    const theme = useTheme();
+
+    const buttonStyles = [


Should we memo these somehow to avoid rerenders? My first approach would be a state variable that is updated with useEffect.

app/components/channel_list/categories/body/channel/index.tsx

app/components/channel_list/header/index.tsx

app/components/channel_list/loading/spinner.json

app/components/channel_list/search/index.tsx

app/components/compass_icon/index.tsx

Rina-dsg · 2021-10-18T20:03:56Z

@SHAZM is it ready for UX review?

matthewbirtch · 2021-10-29T21:52:42Z

@matthewbirtch - pushed an update that switches between categories and the error view when you click the main team header. Will add the chevron now, apologies I actually missed it.

@enahum - clicking the threads button will navigate you to the channel screen for ease of development.

Thanks @SHAZM looks good. Thanks for adding the chevron to the team name and the other updates.

Two comments:

The empty state be vertically centered within the available space?

Also, I'm thinking the 'Find Channels' input maybe shouldn't show while the team is loading or if the team fails to load.
And lastly, for the plus button in the top-right of the design, will that be added later or should it be a part of this PR?

mattermod · 2021-11-02T07:27:37Z

Building app in separate branch.

mattermod · 2021-11-02T07:30:37Z

Successfully building:
https://circleci.com/gh/mattermost/mattermost-mobile/18940
https://circleci.com/gh/mattermost/mattermost-mobile/18939

shaz-r · 2021-11-02T07:38:59Z

@matthewbirtch - pushed an update that switches between categories and the error view when you click the main team header. Will add the chevron now, apologies I actually missed it.
@enahum - clicking the threads button will navigate you to the channel screen for ease of development.

Thanks @SHAZM looks good. Thanks for adding the chevron to the team name and the other updates.

Two comments:

The empty state be vertically centered within the available space?

Also, I'm thinking the 'Find Channels' input maybe shouldn't show while the team is loading or if the team fails to load.

And lastly, for the plus button in the top-right of the design, will that be added later or should it be a part of this PR?

Updated -

Error content is vertically centered
No search bar when Error is shown
Top right + icon added

mattermod · 2021-11-02T07:51:38Z

Artifact links:
https://18940-70265724-gh.circle-artifacts.com/0/tmp/artifacts/Mattermost_Beta.apk
https://18939-70265724-gh.circle-artifacts.com/0/tmp/artifacts/Mattermost_Beta.ipa

matthewbirtch

@SHAZM thanks for resolving these things. Looks good to me! I might need to view some things again when everything is hooked up, but I think this is in great shape to merge

matthewbirtch · 2021-11-02T15:27:31Z

One question: are we able to change the color of the status bar? It's not legible on a dark background

shaz-r · 2021-11-02T21:21:03Z

One question: are we able to change the color of the status bar? It's not legible on a dark background

Yes we are - I think one I'll do separately but I'll add a @to-do in now so I don't forget. @enahum I'll resolve the conflicts and I think it should be good to merge 👍

enahum · 2021-11-02T21:23:45Z

The status bar should be already resolved, have you merged the latest gekidou branch?

shaz-r · 2021-11-03T01:33:25Z

The status bar should be already resolved, have you merged the latest gekidou branch?

Just did - had a few conflicts and changes to run through but it all looks good 👍

enahum · 2021-11-03T14:37:35Z

@SHAZM still some conflicts... will start the review now

app/components/channel_list/categories/body/channel/index.tsx

app/components/channel_list/categories/body/channel/index.test.tsx

app/components/channel_list/categories/body/channel/index.tsx

app/components/compass_icon/index.tsx

app/components/server_icon/server_icon.tsx

enahum · 2021-11-03T15:27:11Z

app/components/server_icon/server_icon.tsx

+            <CompassIcon
+                size={24}
+                name='server-variant'
+                color={changeOpacity(theme.buttonColor, 0.56)}


did we try this with the Quartz theme, I'm not sure this color fits that theme based on my previous tests switching themes.

FYI: @Rina-dsg

app/screens/home/channel_list/index.tsx

enahum · 2021-11-03T15:31:59Z

app/utils/buttonStyles.ts

@@ -104,15 +105,23 @@ export const buttonBackgroundStyle = (
            disabled: {
                default: {
                    backgroundColor: changeOpacity(theme.centerChannelColor, 0.08),
+                    borderColor: changeOpacity(theme.centerChannelColor, 0.32),


I couldn't add a comment on line 68, but I believe primary buttons do not have a border even when they are focused, is that right @matthewbirtch ?

Whoops no - you're right; I think this was a copy/paste fail for the disabled state - I'll fix up. The Primary/Default/Focus does have a border in the Figma file: https://www.figma.com/file/2uYWxjnMJ9IQDOba9b9bfV/%E2%9C%85Components---Buttons?node-id=1%3A184

ios/Podfile.lock

shaz-r · 2021-11-04T01:04:27Z

I've gone through the review / feedback:

All imports that have @app have been updated
Various fixes for styles, snapshots, code correctness
ChannelListItem feedback I've noted to address in MM-38765
I've replied to some comments as well that wasn't direct feedback

shaz-r added the release-note-none label Oct 15, 2021

shaz-r added this to the v2.0 milestone Oct 15, 2021

shaz-r requested review from mkraft, larkox, matthewbirtch, enahum and avinashlng1080 October 15, 2021 07:50

shaz-r self-assigned this Oct 15, 2021

mm-cloud-bot added release-note and removed release-note-none labels Oct 15, 2021

shaz-r added Do Not Merge/Awaiting PR Awaiting another pull request before merging (e.g. server changes) and removed release-note labels Oct 15, 2021

mm-cloud-bot added the release-note label Oct 15, 2021

matthewbirtch requested review from Rina-dsg and removed request for matthewbirtch October 15, 2021 13:40

shaz-r force-pushed the MM-38682-Gekidou-Homepage branch from a463690 to b7ef07e Compare October 17, 2021 22:31

avinashlng1080 reviewed Oct 18, 2021

View reviewed changes

larkox reviewed Oct 18, 2021

View reviewed changes

shaz-r changed the title ~~Mm 38682 gekidou homepage~~ MM-38682: Gekidou Homepage (Static) Oct 18, 2021

shaz-r added 2: UX Review Requires review by a UX Designer Do Not Merge Should not be merged until this label is removed and removed Do Not Merge/Awaiting PR Awaiting another pull request before merging (e.g. server changes) release-note labels Oct 18, 2021

mm-cloud-bot added the release-note label Oct 18, 2021

Tidies up header and error

f567edd

shaz-r added the Build Apps for PR Build the mobile app for iOS and Android to test label Nov 2, 2021

mattermod removed the Build Apps for PR Build the mobile app for iOS and Android to test label Nov 2, 2021

matthewbirtch approved these changes Nov 2, 2021

View reviewed changes

Merge branch 'gekidou' into MM-38682-Gekidou-Homepage

7f8a03c

shaz-r force-pushed the MM-38682-Gekidou-Homepage branch from a6ffbf0 to 7f8a03c Compare November 3, 2021 01:21

shaz-r removed Do Not Merge Should not be merged until this label is removed 2: UX Review Requires review by a UX Designer labels Nov 3, 2021

enahum requested changes Nov 3, 2021

View reviewed changes

Shaz Amjad and others added 2 commits November 4, 2021 11:54

Address feedback

9b91651

Merge branch 'gekidou' into MM-38682-Gekidou-Homepage

6bbc588

Compass Icon const removed

d5a4112

enahum approved these changes Nov 4, 2021

View reviewed changes

enahum removed the request for review from Rina-dsg November 4, 2021 11:55

larkox approved these changes Nov 4, 2021

View reviewed changes

enahum removed the request for review from avinashlng1080 November 4, 2021 13:32

enahum added the 4: Reviews Complete All reviewers have approved the pull request label Nov 4, 2021

enahum merged commit 1c1d0e3 into gekidou Nov 4, 2021

enahum deleted the MM-38682-Gekidou-Homepage branch November 4, 2021 13:32

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

MM-38682: Gekidou Homepage (Static) #5756

MM-38682: Gekidou Homepage (Static) #5756

shaz-r commented Oct 15, 2021 •

edited

Loading

shaz-r commented Oct 15, 2021

enahum commented Oct 15, 2021

matthewbirtch commented Oct 15, 2021

shaz-r commented Oct 17, 2021

avinashlng1080 left a comment •

edited

Loading

larkox left a comment

larkox left a comment

larkox Oct 18, 2021

Rina-dsg commented Oct 18, 2021

matthewbirtch commented Oct 29, 2021 •

edited

Loading

mattermod commented Nov 2, 2021

mattermod commented Nov 2, 2021

shaz-r commented Nov 2, 2021

mattermod commented Nov 2, 2021

matthewbirtch left a comment

matthewbirtch commented Nov 2, 2021

shaz-r commented Nov 2, 2021

enahum commented Nov 2, 2021

shaz-r commented Nov 3, 2021

enahum commented Nov 3, 2021

enahum Nov 3, 2021

enahum Nov 3, 2021

shaz-r Nov 3, 2021 •

edited

Loading

shaz-r commented Nov 4, 2021 •

edited

Loading

MM-38682: Gekidou Homepage (Static) #5756

MM-38682: Gekidou Homepage (Static) #5756

Conversation

shaz-r commented Oct 15, 2021 • edited Loading

Summary

To-Do:

Ticket Link

Checklist

Device Information

Screenshots

Release Note

shaz-r commented Oct 15, 2021

enahum commented Oct 15, 2021

matthewbirtch commented Oct 15, 2021

shaz-r commented Oct 17, 2021

avinashlng1080 left a comment • edited Loading

Choose a reason for hiding this comment

larkox left a comment

Choose a reason for hiding this comment

larkox left a comment

Choose a reason for hiding this comment

larkox Oct 18, 2021

Choose a reason for hiding this comment

Rina-dsg commented Oct 18, 2021

matthewbirtch commented Oct 29, 2021 • edited Loading

mattermod commented Nov 2, 2021

mattermod commented Nov 2, 2021

shaz-r commented Nov 2, 2021

mattermod commented Nov 2, 2021

matthewbirtch left a comment

Choose a reason for hiding this comment

matthewbirtch commented Nov 2, 2021

shaz-r commented Nov 2, 2021

enahum commented Nov 2, 2021

shaz-r commented Nov 3, 2021

enahum commented Nov 3, 2021

enahum Nov 3, 2021

Choose a reason for hiding this comment

enahum Nov 3, 2021

Choose a reason for hiding this comment

shaz-r Nov 3, 2021 • edited Loading

Choose a reason for hiding this comment

shaz-r commented Nov 4, 2021 • edited Loading

shaz-r commented Oct 15, 2021 •

edited

Loading

avinashlng1080 left a comment •

edited

Loading

matthewbirtch commented Oct 29, 2021 •

edited

Loading

shaz-r Nov 3, 2021 •

edited

Loading

shaz-r commented Nov 4, 2021 •

edited

Loading