Page MenuHomePhabricator
Differential D8128

[landing] add rotation animation to keyserver faq icon
ClosedPublic
Actions

Authored by ginsu on Jun 6 2023, 10:51 AM.
Tags
None
Referenced Files
F5109162: D8128.id29694.diff
Tue, Apr 1, 5:21 PM
F5108241: D8128.id29763.diff
Tue, Apr 1, 1:27 PM
F5108240: D8128.id27498.diff
Tue, Apr 1, 1:27 PM
F5108005: D8128.id.diff
Tue, Apr 1, 12:28 PM
Unknown Object (File)
Mon, Mar 31, 1:42 AM
Unknown Object (File)
Fri, Mar 28, 8:52 AM
Unknown Object (File)
Wed, Mar 19, 10:14 PM
Unknown Object (File)
Mon, Mar 3, 12:46 PM
View All Files
Subscribers
ashoat
• ted
tomek

Details

Reviewers
atul
kamil
Commits
rCOMMbebba4c13615: [landing] add rotation animation to keyserver faq icon
Summary

This diff is the last part to the introduction of the keyserver faq section. This diff adds a rotation animation to the chevron icon so that when a faq item is opened then the chevron will transition from pointing down to pointing up

Depends on D8095

Test Plan

Please see the demo video below:

Diff Detail

Repository
rCOMM Comm
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

ginsu created this revision.Jun 6 2023, 10:51 AM
Herald added subscribers: tomek, ashoat. · View Herald TranscriptJun 6 2023, 10:51 AM
ginsu published this revision for review.Jun 6 2023, 10:52 AM
ginsu edited the summary of this revision. (Show Details)
ginsu edited the test plan for this revision. (Show Details)
ginsu added reviewers: atul, kamil.
ginsu added a parent revision: D8095: [landing] animate the keyserver faq section.
ginsu attached a referenced file: F574230: Screen Recording 2023-06-06 at 1.48.44 PM.mov. (Show Details)
Harbormaster completed remote builds in B20068: Diff 27498.Jun 6 2023, 11:07 AM
ginsu added a child revision: D8132: [landing] add faq section and request access section to keyserver page.Jun 6 2023, 12:04 PM
atul accepted this revision.Jun 6 2023, 2:08 PM

whoa this looks smooth, first rotation animation?

Did you try animation-timing-function: ease-in-out; by chance? Think it might look better for this sort of thing

This revision is now accepted and ready to land.Jun 6 2023, 2:08 PM
ginsu added a subscriber: • ted.Jun 9 2023, 12:00 PM

Did you try animation-timing-function: ease-in-out; by chance? Think it might look better for this sort of thing

Just tried this and both @ted and I think the rotation animation looks better w/o the ease-in-out timing function

ginsu updated this revision to Diff 29694.Aug 8 2023, 12:47 PM

rebase before landing

This revision was landed with ongoing or failed builds.Aug 8 2023, 2:09 PM
Closed by commit rCOMMbebba4c13615: [landing] add rotation animation to keyserver faq icon (authored by ginsu). · Explain Why
This revision was automatically updated to reflect the committed changes.
ginsu added a commit: rCOMMbebba4c13615: [landing] add rotation animation to keyserver faq icon.
Harbormaster completed remote builds in B21648: Diff 29694.Aug 8 2023, 2:34 PM

Revision Contents
Changeset List

PathSize
landing/
7 lines
7 lines

Diff 29694

View Options

landing/keyserver-faq.css

  • This file was added.
// @flow
import * as React from 'react';
import { createChatTabBarButton } from './chat-tab-bar-button.react.js';
import { homeChatThreadListOptions } from '../chat/chat-options.js';
import {
type NUXTipsOverlayProps,
createNUXTipsOverlay,
} from '../tooltip/nux-tips-overlay.react.js';
const homeTabTipText =
'Your home screen only shows the chats you’ve joined. ' +
'When you join a community on Comm, you only join the root of the tree.';
const HomeTabTip: React.ComponentType<NUXTipsOverlayProps<'HomeTabTip'>> =
createNUXTipsOverlay(
createChatTabBarButton<'HomeTabTip'>(homeChatThreadListOptions),
homeTabTipText,
);
export default HomeTabTip;
View Options

landing/keyserver-faq.react.js

  • This file was added.
// @flow
import * as React from 'react';
import { createChatTabBarButton } from './chat-tab-bar-button.react.js';
import { homeChatThreadListOptions } from '../chat/chat-options.js';
import {
type NUXTipsOverlayProps,
createNUXTipsOverlay,
} from '../tooltip/nux-tips-overlay.react.js';
const homeTabTipText =
'Your home screen only shows the chats you’ve joined. ' +
'When you join a community on Comm, you only join the root of the tree.';
const HomeTabTip: React.ComponentType<NUXTipsOverlayProps<'HomeTabTip'>> =
createNUXTipsOverlay(
createChatTabBarButton<'HomeTabTip'>(homeChatThreadListOptions),
homeTabTipText,
);
export default HomeTabTip;