Paths

Table of Contentst

-
landing/
1/1
keyserver-faq.css
1/1
keyserver-faq.react.js

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

Authored by ginsu on Jun 6 2023, 10:51 AM.

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

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

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

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

Path

Size

landing/

keyserver-faq.css

7 lines

keyserver-faq.react.js

7 lines

Diff 27498

View Options

landing/keyserver-faq.css

	Show First 20 Lines • Show All 130 Lines • ▼ Show 20 Lines
	const styles = StyleSheet.create({			const styles = StyleSheet.create({
	dummyMessage: {			dummyMessage: {
	paddingHorizontal: 12,			paddingHorizontal: 12,
	paddingVertical: 6,			paddingVertical: 6,
	},			},
	message: {			message: {
	overflow: 'hidden',			overflow: 'hidden',
	paddingHorizontal: 12,			paddingHorizontal: 12,
	paddingVertical: 6,			paddingVertical: 8,
	},			},
	text: {			text: {
	fontFamily: 'Arial',			fontFamily: 'Arial',
	fontSize: 18,			fontSize: 14,
				benschacAuthorUnsubmitted Done Inline Actions I actually think this is a bit too small. But that's what's in the design. https://www.figma.com/file/L675ETKDnGaSwlpZAw4MIC/Mobile-App?node-id=351%3A455 @ashoat - I think 16px looks better. benschac: I actually think this is a bit too small. But that's what's in the design. https://www.figma.
				lineHeight: 22,
	},			},
	});			});

	export { InnerTextMessage, dummyNodeForTextMessageHeightMeasurement };			export { InnerTextMessage, dummyNodeForTextMessageHeightMeasurement };