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

Added feature in Preferences to allow user to chose the font of the page #1962

Open
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

jtnguyen45
Copy link

Created a drop down of font options that allows the user to chose the type of font used for the app, within the Preferences page. The font changes the entire page automatically when user clicks on a font option. I chose 5 fonts randomly (Arial, Cascadia, Fira Code, Proxima Nova, Verdana) but can change them to different fonts easily if desired.

@jtnguyen45 jtnguyen45 requested a review from a team as a code owner April 2, 2023 22:30
Copy link
Contributor

@simon04 simon04 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks to working on this feature. I've left a few suggestions/questions.

@@ -152,6 +154,11 @@ class app.Settings
@updateColorMeta()
return

setFont: (font) ->
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you're missing a @setFont(@get('font')) in line 141?

Comment on lines +27 to +31
<option value="arial" #{if (settings.font == 'Arial' or not settings.font) then ' selected' else ''}>Arial (default)</option>
<option value="cascadia" #{if settings.font == 'Cascadia' then ' selected' else ''}>Cascadia</option>
<option value="fira-code" #{if settings.font == 'Fira Code' then ' selected' else ''}>Fira Code</option>
<option value="proxima-nova" #{if settings.font == 'Proxima Nova' then ' selected' else ''}>Proxima Nova</option>
<option value="verdana" #{if settings.font == 'Verdana' then ' selected' else ''}>Verdana</option>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't get the selection of the fonts. Some seem to be targetting the user interface (such as Arial). Some seem to be targetting the code blocks (such as Fira Code)?

body {
height: 100%;
margin: 0;
overflow: auto;
font-size: 1em;
font-weight: normal;
font-family: $baseFont;
font-family: var(--selectedFont, $baseFont);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In _variables.scss, we already define the variables --baseFont and --monoFont – I think we should re-use them instead of introducing another one.

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.

None yet

2 participants