Skip to content
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

Merged
merged 6 commits into from
Jul 13, 2023
Merged

feat: getToggledStyles() #363

merged 6 commits into from
Jul 13, 2023

Conversation

iuioiua
Copy link
Contributor

@iuioiua iuioiua commented Jul 12, 2023

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

After (see "Pricing" link in the top-right corner):
image

Closes #275
PTAL @brunocorrea23

iuioiua added 2 commits July 12, 2023 15:36

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
@iuioiua iuioiua requested a review from kt3k July 12, 2023 05:51
utils/display.ts Outdated
* const inactiveLinkStyles = getLinkStyles(false);
* ```
*/
export function getLinkStyles(expr: boolean) {
Copy link
Member

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?

Copy link
Contributor Author

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).

Copy link
Member

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)

Copy link
Contributor Author

@iuioiua iuioiua Jul 12, 2023

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?

Copy link
Contributor Author

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?

@iuioiua iuioiua changed the title feat: getLinkStyles() feat: getToggledStyles() Jul 13, 2023
@iuioiua iuioiua requested a review from kt3k July 13, 2023 02:14
@iuioiua
Copy link
Contributor Author

iuioiua commented Jul 13, 2023

I am merging now, as the function caters to various needs. I will happily accept reviews after the merge.

@iuioiua iuioiua merged commit 3359d31 into main Jul 13, 2023
@iuioiua iuioiua deleted the getActiveLinkStyles branch July 13, 2023 03:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Proposal: highlight current time-ago selector
2 participants