Add shadow toggle options#1581
Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hello @LiliaDoe, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!
Summary of Changes
This pull request adds options to toggle the shadow behind the image viewer and the shadow behind captions and details. It introduces new settings in the options menu, allowing users to customize the appearance of these elements. The changes involve modifications to the locale file for new option descriptions, the options HTML file to include the new checkboxes, and the JavaScript files to handle the new options and apply the shadow toggles.
Highlights
- New Options: Adds two new options: one to toggle the shadow behind the image viewer and another to toggle the shadow behind captions and details.
- UI Changes: Updates the options page (html/options.html) with checkboxes for the new shadow options.
- Logic Implementation: Modifies the JavaScript files (hoverzoom.js, options.js, common.js) to implement the shadow toggling functionality based on the user's settings.
Changelog
Click here to see the changelog
- _locales/en/messages.json
- Added new messages for the shadow toggle options and their tooltips, including 'optEnableViewerShadow', 'optEnableViewerShadowTooltip', 'optEnableCaptionDetailShadow', and 'optEnableCaptionDetailShadowTooltip'. These messages provide the text displayed in the options menu and the tooltips that appear when hovering over the options.
- html/options.html
- Added checkboxes for enabling/disabling the viewer shadow and caption/detail shadow. The new elements include the checkbox inputs with IDs 'chkViewerShadowEnabled' and 'chkCaptionDetailShadowEnabled', along with labels and tooltips.
- js/common.js
- Added default values for the new shadow options to the
factorySettingsobject. The new properties areviewerShadowEnabledandcaptionDetailShadowEnabled, both initialized totrue.
- Added default values for the new shadow options to the
- js/hoverzoom.js
- Modified the
hzViewerCSS to remove the box shadow if theviewerShadowEnabledoption is disabled. This is done by settingimgFullSizeCss.boxShadow = 'none'when the option is false (line 1947). - Added logic to toggle caption and detail box shadows based on the
captionDetailShadowEnabledoption. If disabled, the boxShadow property is set to 'none' forhzCaptionCss,hzMiscellaneousCss, andhzDetailCss(lines 2116-2120).
- Modified the
- js/options.js
- Updated the
saveOptionsfunction to save the state of the new shadow options. The values of the 'chkViewerShadowEnabled' and 'chkCaptionDetailShadowEnabled' checkboxes are now stored in theoptionsobject (lines 53-54). - Updated the
restoreOptionsfunction to restore the state of the new shadow options when the options page is loaded. The checkboxes are triggered to be checked or unchecked based on the stored values ofoptions.viewerShadowEnabledandoptions.captionDetailShadowEnabled(lines 200-201).
- Updated the
Using Gemini Code Assist
The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.
Invoking Gemini
You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.
| Feature | Command | Description |
|---|---|---|
| Code Review | /gemini review |
Performs a code review for the current pull request in its current state. |
| Pull Request Summary | /gemini summary |
Provides a summary of the current pull request in its current state. |
| Comment | @gemini-code-assist | Responds in comments when explicitly tagged, both in issue comments and review comments. |
| Help | /gemini help |
Displays a list of available commands. |
Customization
To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.
Limitations & Feedback
Gemini Code Assist is currently in preview and may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments to provide feedback.
You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.
Trivia time!
What CSS property is commonly used to add shadows to elements?
Click here for the answer
The `box-shadow` property is commonly used to add shadows to elements in CSS.
Footnotes
-
Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩
There was a problem hiding this comment.
Code Review
The pull request introduces shadow toggle options for the image viewer and caption/details, enhancing user customization. The changes are well-structured and cover the necessary files for options, localization, and logic implementation. However, there are a few areas that could be improved for better user experience and code maintainability.
Summary of Findings
- Missing shadow toggle logic in
hoverzoom.js: The code only disables the shadow for the image viewer but doesn't include logic to re-enable it if the option is toggled back on. This could lead to a confusing user experience if the shadow doesn't reappear when expected. - Inconsistent naming in
common.js: The naming convention for the shadow-related options incommon.jsis slightly inconsistent. It would be better to use a consistent prefix likeenablefor all boolean options. - Missing default values in
options.js: The code doesn't handle cases where the shadow-related options are undefined during restoration. Providing default values ensures that the options work correctly even if they are not explicitly set in the storage.
Merge Readiness
The pull request is almost ready for merging. Addressing the missing shadow toggle logic, inconsistent naming, and missing default values would significantly improve the code's robustness and user experience. I am unable to directly approve this pull request, and recommend that these comments be addressed before merging, and that others review and approve this code before merging.
| if (!options.viewerShadowEnabled) | ||
| imgFullSizeCss.boxShadow = 'none'; |
There was a problem hiding this comment.
This code disables the shadow, but there's no corresponding logic to re-enable it if options.viewerShadowEnabled becomes true again. Consider adding an else block to set imgFullSizeCss.boxShadow to its default value when the option is enabled.
if (!options.viewerShadowEnabled)
imgFullSizeCss.boxShadow = 'none';
else
imgFullSizeCss.boxShadow = '1px 1px 5px rgba(0, 0, 0, 0.5), -1px 1px 5px rgba(0, 0, 0, 0.5), 1px -1px 5px rgba(0, 0, 0, 0.5), -1px -1px 5px rgba(0, 0, 0, 0.5)';| if (!options.captionDetailShadowEnabled) { //Toggles caption and detail box shadow off if option is disabled | ||
| hzCaptionCss.boxShadow = 'none'; | ||
| hzMiscellaneousCss.boxShadow = 'none'; | ||
| hzDetailCss.boxShadow = 'none'; | ||
| } |
There was a problem hiding this comment.
Similar to the viewer shadow, there's no logic to re-enable the caption/detail shadow if the option is toggled back on. Add an else block to restore the default boxShadow values when options.captionDetailShadowEnabled is true.
if (!options.captionDetailShadowEnabled) { //Toggles caption and detail box shadow off if option is disabled
hzCaptionCss.boxShadow = 'none';
hzMiscellaneousCss.boxShadow = 'none';
hzDetailCss.boxShadow = 'none';
} else {
hzCaptionCss.boxShadow = '1px 1px 5px rgba(0, 0, 0, 0.5), -1px 1px 5px rgba(0, 0, 0, 0.5), 1px -1px 5px rgba(0, 0, 0, 0.5), -1px -1px 5px rgba(0, 0, 0, 0.5)';
hzMiscellaneousCss.boxShadow = '1px 1px 5px rgba(0, 0, 0, 0.5), -1px 1px 5px rgba(0, 0, 0, 0.5), 1px -1px 5px rgba(0, 0, 0, 0.5), -1px -1px 5px rgba(0, 0, 0, 0.5)';
hzDetailCss.boxShadow = '1px 1px 5px rgba(0, 0, 0, 0.5), -1px 1px 5px rgba(0, 0, 0, 0.5), 1px -1px 5px rgba(0, 0, 0, 0.5), -1px -1px 5px rgba(0, 0, 0, 0.5)';
}
|
2 participants
Adds options to toggle viewer shadow and caption/details shadows