-
Notifications
You must be signed in to change notification settings - Fork 157
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: getToggledStyles()
#363
Conversation
utils/display.ts
Outdated
* const inactiveLinkStyles = getLinkStyles(false); | ||
* ``` | ||
*/ | ||
export function getLinkStyles(expr: boolean) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'd imagine there could be more variations in the future (e.g. disabled, etc). How about making this getLinkStyles(options: { active: boolean })
to prepare for the future extension?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Are you referring to the :disabled
CSS pseudo-class? If so, this function only takes care of the styles while the element is at its "rest state" (without any of these states active).
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not particularly about disabled
state, but this kind of patterns can grow for random reasons (someone might want to show red link for errors, etc)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Would something like getToggledStyles(baseStyles: string, toggledStyles: string, cond?: boolean)
do the trick?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I've implemented my above suggestion. WDYT?
I am merging now, as the function caters to various needs. I will happily accept reviews after the merge. |
This feature adds a way of dynamically styling links according to whether they satisfy a particular condition. The appropriate links have been adjusted to use this new function. This also tweaks the design of the time selector on the homepage.
Before:
![image](https://private-user-images.githubusercontent.com/29347852/252866679-3a111546-5394-441b-8770-bb6e4f613b34.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk0OTQyMDIsIm5iZiI6MTczOTQ5MzkwMiwicGF0aCI6Ii8yOTM0Nzg1Mi8yNTI4NjY2NzktM2ExMTE1NDYtNTM5NC00NDFiLTg3NzAtYmI2ZTRmNjEzYjM0LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMTQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjE0VDAwNDUwMlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTUyMWJmYzIxMGJmNGZhODY3NWVkNTFmMGMyMzM5YmE0NWJmYWVjMDJjMTE2ZTY5NTE5YTc1MGNlYjk1NmVkYTImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.8bsIiwhNQ339UjnGSLLvTFNvH9QMDn9-jBsW4BYTyDU)
After (see "Pricing" link in the top-right corner):
![image](https://private-user-images.githubusercontent.com/29347852/252866820-d6e66e12-d4e9-4a1e-bb87-a65ae619687a.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk0OTQyMDIsIm5iZiI6MTczOTQ5MzkwMiwicGF0aCI6Ii8yOTM0Nzg1Mi8yNTI4NjY4MjAtZDZlNjZlMTItZDRlOS00YTFlLWJiODctYTY1YWU2MTk2ODdhLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMTQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjE0VDAwNDUwMlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTVkMzc4YzRhZWIzZmNlNTUyMDUyMDIzZDBhYTc4NTVlZDM3YzZiMjlhZjI3Y2M3MmNkNmY3ZGYyZGEzMDgxMGEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.XnLVCQQ5O246bFjuBUqE9lM07X6pYppdwCeAOLzJhfw)
Closes #275
PTAL @brunocorrea23