Refactor custom fonts with DRY and better code performance #24
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Add a new section titled "Font Styles" or simply "Fonts" in the GPThemes customization settings, providing users with extended font customization options. Changes summary: - Introduced a dedicated "Font Styles" or "Fonts" section within the GPThemes customization settings, empowering users to personalize various font aspects, such as style, size, and family, to align with their preferences and enhance readability.
…#22 - Add the logic for "Apply Fonts" and "Reset Fonts" functionality, allowing users to preview and reset their font customization choices. Changes summary: - Implemented the ability for users to apply and reset font customizations, providing a dynamic preview of their font choices and the option to revert to default settings if desired.
…`<link>` #22 - Fetch custom fonts from Google Fonts by dynamically inserting the `<link>` tag in the `<head>` section, ensuring efficient font loading and improving performance. Changes summary: - Introduced dynamic font loading by fetching custom fonts from Google Fonts, providing users with a broader range of font options to personalize their experience with the extension.
…er's font preferences in their local storage #22 - Implement the necessary logic to set and retrieve user font preferences from browser storage, ensuring consistent font application across the platform. Changes summary: - Added the ability to store and retrieve user font preferences in browser storage, providing persistence and ensuring that the selected fonts are retained and applied consistently across different devices and browser sessions.
…spamming #22 - Optimize the Google Fonts fetching logic by checking if the desired font has already been fetched before injecting the `<link>` tag. - Prevent unnecessary fetching and minimize request spamming by skipping the injection process for already fetched fonts. Changes summary: - Improved the efficiency of Google Fonts fetching by checking for previously fetched fonts before injecting new `<link>` tags, resulting in reduced code duplication and improved performance.
…ike `Font Size` - Implement a px to rem converter to facilitate the conversion of pixel values obtained from input fields into rem units when setting CSS variables via JavaScript. Changes summary: - Introduced a px to rem converter to streamline the process of converting pixel values from input fields into rem units when dynamically setting CSS variables using JavaScript. This improves the code structure and maintainability by providing a centralized conversion mechanism.
- Rewrite the GPThemes settings section to utilize a tab-based interface for improved organization and navigation. - Split the code into reusable components and render HTML using JavaScript components for enhanced maintainability and modularity. Changes summary: - Introduced a tab-based structure to the GPThemes settings, allowing users to effortlessly switch between different customization options. - Refactored the code into smaller, reusable components, promoting better code organization and facilitating easier maintenance. - Implemented rendering of HTML through JavaScript components, providing greater flexibility and separation of concerns.
- Fix an issue where the font-family was not applied correctly due to an accidental inclusion of the 'p-4' class in the input value, impacting the desired font styling. Changes summary: - Addressed a problem where the font-family was not applied as intended due to the presence of an extraneous 'p-4' class in the input value. This change ensures that the selected font-family is accurately applied, providing users with the expected typography experience.
- Fix an issue where the font-family input field was not populated with the "Default" txt when resetting the fonts, impacting user experience. Changes summary: - Addressed a problem where the font-family input field remained empty after resetting the fonts, failing to provide users with the expected default font information. This change ensures that the input field is properly populated with "Default" content when fonts are reset, facilitating a seamless customization process.
- Add animations when switching between tabs in the GPThemes settings for a smoother and more engaging user experience. - Introduce a fixed width for the GPThemes settings dialog to ensure a consistent layout across different screen sizes. Changes summary: - Introduced animations during tab switching in the GPThemes settings, providing visual feedback and a sense of transition between different customization sections. - Implemented a fixed width for the GPThemes settings dialog, creating a stable and predictable layout regardless of the available screen real estate.
…emoved - Add new font properties for letter-spacing and line-height customization in chats, providing users with extended typography control. - Remove the "Apply" button as the logic has been rewritten to apply changes immediately when users adjust font properties, streamlining the customization process. Changes summary: - Introduced letter-spacing and line-height customization options for chats, allowing users to fine-tune the spacing and layout of their conversations. - Removed the "Apply" button, implementing immediate application of font property changes, resulting in a more intuitive and responsive customization workflow.
…erties - Fix bugs related to font resetting and application: - Ensure that the font family is properly reset and applied, even if the user chooses the same font family as before the reset. - Address issues with font and text properties not applying correctly after refreshing the page Changes summary: - Enhanced the font resetting functionality to properly reset and apply font family selections, even when choosing the same font family as before the reset. - Resolved issues with font and text properties (such as letter-spacing and line-height) not applying correctly after page refreshes, ensuring consistent and immediate application of user preferences.
- Redesign the custom font properties from basic input fields to advanced cards, providing a more modern customization interface. Changes summary: - Upgraded the visual design of the custom font properties, transitioning from basic input fields to advanced cards that offer a clearer representation of the available customization options.
- Implemented animations for custom font properties within cards, enhancing visual appeal and user experience. Changes summary: - Added animations for custom font properties in cards, creating a more dynamic and engaging user experience.
…operties - Add input validation for number-based font properties, ensuring that users provide numeric values for properties like line-height and letter-spacing. Changes summary: - Introduced input validation for number-based font properties, such as line-height and letter-spacing, ensuring that users input numeric values only. This enhancement improves input accuracy and prevents potential formatting issues.
- Refactor the code for the custom font properties cards, improving the overall structure and maintainability. - Enhance the styling of the cards, including the use of `rem` units for better responsiveness when changing the font size. - Enhance mobile optimization Changes summary: - Refactored the code related to custom font properties cards, promoting code reusability and adherence to best practices. - Improved the styling of the cards, utilizing `rem` units for font size adjustments, resulting in a more responsive and adaptable design.
…y for empty fields and value range - Added validation checks for input fields, displaying error messages for empty fields and values outside the specified range (x<min or x>max). Changes summary: - Improved user experience by ensuring input fields are not empty and values fall within the defined range. This prevents invalid data submission and provides clear feedback to users.
…erformance and error handling. `input` is replaced w/ `blur` event - Change the application of user custom font changes from input blur to improve performance and avoid max-quota issues. Changes summary: - Modified the event trigger for applying user custom font changes from input blur to an alternative approach to optimize performance and prevent potential max-quota issues. - As a trade-off, live preview of font changes is removed to prioritize performance and stability.
… if the input value even changes - Further optimize performance by avoiding redundant font change code execution when the input value on blur (unfocus) is the same as the value on focus. Changes summary: - Implemented an optimization to skip redundant font change code execution when the input value remains unchanged between focus and blur events, reducing unnecessary computations and enhancing overall extension performance.
…ooltips could be added now - Add tooltips to each font property input field to inform users about the minimum and maximum values they can input, providing clearer guidance on customization options. Changes summary: - Introduced tooltips for font property input fields, offering users explicit instructions on the acceptable input ranges for various font properties, improving the overall customization experience. 🔴🔴🔴 HAVE TO TEST THIS!
- Simplify and improve the text of tooltips for custom font property input fields, providing clearer guidance to users. Changes summary: - Revised the text of tooltips associated with custom font property input fields to enhance their clarity and better assist users in understanding the customization options.
…mbinations
- Format the number when there are crazy digits combinations
Changes summary:
- Font input fields are now idiot-proof, and numbers are formatted for better readability.
… value
- Apply changes even when user submits input values (press enter)
Changes summary:
- Custom font input fields now apply changes when the user submits input values by pressing enter too
… on mobile screens
Changes summary:
- Error notification for input validation is optimized for better user experience on mobile screens.
…in Firefox
Changes summary:
- Default browser number input field arrows are removed in Firefox for a cleaner UI.
Changes summary:
- Comments and unused code have been removed from JavaScript files for cleaner and more efficient code.
- Remove build files to facilitate future merges Changes summary: - Removed build files to simplify future merge processes and reduce repository size.
…rmance (DRY) - Begin refactoring code to improve maintainability and adhere to the DRY principle Changes summary: - Initiated a code rewrite with a focus on improving maintainability and adhering to the DRY (Don't Repeat Yourself) principle to enhance code readability and reduce redundancy.
- Add fully refactored custom fonts functionality Changes summary: - Implemented a refactored custom fonts logic, providing improved flexibility and maintainability for custom font usage in the project.
- Further simplify functions related to custom fonts Changes summary: - Simplified additional functions related to custom fonts to enhance code readability and maintainability.
- Fix issues with refactored code logic - Remove build files to facilitate future merges Changes summary: - Corrected issues with the refactored code logic to ensure proper functionality. - Removed build files to simplify future merge processes and reduce repository size.
14 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.