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

View background settings #36337

Merged
merged 6 commits into from
Dec 23, 2024
Merged

View background settings #36337

merged 6 commits into from
Dec 23, 2024

Conversation

silamon
Copy link
Contributor

@silamon silamon commented Dec 13, 2024

Proposed change

Documentation changes for the view background settings coming in.

Type of change

  • Spelling, grammar or other readability improvements (current branch).
  • Adjusted missing or incorrect information in the current documentation (current branch).
  • Added documentation for a new integration I'm adding to Home Assistant (next branch).
  • Added documentation for a new feature I'm adding to Home Assistant (next branch).
  • Removed stale or deprecated documentation.

Additional information

Checklist

  • This PR uses the correct branch, based on one of the following:
    • I made a change to the existing documentation and used the current branch.
    • I made a change that is related to an upcoming version of Home Assistant and used the next branch.
  • The documentation follows the Home Assistant documentation standards.

Summary by CodeRabbit

Summary by CodeRabbit

  • Documentation
    • Expanded background settings section with detailed customization options.
    • Clarified visibility settings regarding user access to views.
    • Added and refined YAML configuration examples for view-specific backgrounds and theme variables.
    • Improved overall structure for better readability with clearer headings and examples.

@home-assistant home-assistant bot added has-parent This PR has a parent PR in a other repo next This PR goes into the next branch labels Dec 13, 2024
Copy link

netlify bot commented Dec 13, 2024

Deploy Preview for home-assistant-docs ready!

Name Link
🔨 Latest commit 0fffd3a
🔍 Latest deploy log https://app.netlify.com/sites/home-assistant-docs/deploys/67695d5be3c6570008f9df74
😎 Deploy Preview https://deploy-preview-36337--home-assistant-docs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link
Contributor

coderabbitai bot commented Dec 13, 2024

📝 Walkthrough

Walkthrough

The changes involve updates to the source/dashboards/views.markdown documentation file, enhancing the clarity and detail of the configuration and functionality of views within dashboards. Key modifications include an expanded section on background customization, which now includes options for transparency, size, alignment, and repeat settings, along with YAML configuration examples. The visibility section has been clarified to emphasize user access to views, and the overall document structure has been improved for readability, with consistent wording and formatting adjustments.

Changes

File Path Change Summary
source/dashboards/views.markdown Expanded background settings section with detailed customization options and YAML examples.
source/dashboards/views.markdown Clarified visibility section regarding user access to views.
source/dashboards/views.markdown Minor wording and formatting adjustments for consistency and clarity.

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR. (Beta)
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai or @coderabbitai title anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 0

🧹 Outside diff range and nitpick comments (4)
source/dashboards/views.markdown (4)

191-193: Improve clarity of the introduction

The introduction could be more precise about where theme variables should be defined.

-The background can be customied per view using individual background settings. Alternatively, a theme variable can be used to customize the background of all views. 
+The background can be customized per view using individual background settings. Alternatively, you can define a theme variable in your `configuration.yaml` to customize the background of all views.
🧰 Tools
🪛 Markdownlint (0.37.0)

191-191: Expected: 0 or 2; Actual: 1
Trailing spaces

(MD009, no-trailing-spaces)


195-199: Add missing commas and fix list formatting

For better readability and consistency with Home Assistant's documentation style:

-**Image** - Sets the background image to use behind the view: 
-   - **Upload picture** lets you pick an image from the system used to show your Home Assistant UI.
-   - **Local path** lets you pick an image stored on Home Assistant. For example: `/homeassistant/images/lights_view_background_image.jpg`.
-     - To store an image on Home Assistant, you need to [configure access to files](/common-tasks/os/#configuring-access-to-files), for example via [Samba](/common-tasks/os/#installing-and-using-the-samba-add-on) or the [Studio Code Server](/common-tasks/os/#installing-and-using-the-visual-studio-code-vsc-add-on) add-on.
-   - **web URL** let you pick an image from the web. For example `https://www.home-assistant.io/images/frontpage/assist_wake_word.png`.
+**Image** - Sets the background image to use behind the view:
+
+- **Upload picture** lets you pick an image from the system used to show your Home Assistant UI.
+- **Local path** lets you pick an image stored on Home Assistant. For example, `/homeassistant/images/lights_view_background_image.jpg`.
+  - To store an image on Home Assistant, you need to [configure access to files](/common-tasks/os/#configuring-access-to-files), for example, via [Samba](/common-tasks/os/#installing-and-using-the-samba-add-on) or the [Studio Code Server](/common-tasks/os/#installing-and-using-the-visual-studio-code-vsc-add-on) add-on.
+- **Web URL** lets you pick an image from the web. For example, `https://www.home-assistant.io/images/frontpage/assist_wake_word.png`.
🧰 Tools
🪛 LanguageTool

[typographical] ~199-~199: After the expression ‘for example’ a comma is usually used.
Context: ...let you pick an image from the web. For example `https://www.home-assistant.io/images/f...

(COMMA_FOR_EXAMPLE)

🪛 Markdownlint (0.37.0)

196-196: Expected: 0; Actual: 3
Unordered list indentation

(MD007, ul-indent)


197-197: Expected: 0; Actual: 3
Unordered list indentation

(MD007, ul-indent)


198-198: Expected: 2; Actual: 5
Unordered list indentation

(MD007, ul-indent)


199-199: Expected: 0; Actual: 3
Unordered list indentation

(MD007, ul-indent)


195-195: Expected: 0 or 2; Actual: 1
Trailing spaces

(MD009, no-trailing-spaces)


196-196: null
Lists should be surrounded by blank lines

(MD032, blanks-around-lists)


203-216: Standardize list formatting and add blank lines

For consistency with Home Assistant's documentation style:

 **Size** - Choose how the background fits the space:
-* **Original**: Original size. 
-* **Fill view**: Fills the view, cropping if necessary.
-* **Fit view**: Fits within the view, maintaining aspect ratio.
+
+- **Original**: Original size.
+- **Fill view**: Fills the view, cropping if necessary.
+- **Fit view**: Fits within the view, maintaining aspect ratio.

 **Alignment** - Precisely position the background:
-* **Top Alignment**: Top left, top center, or top right
-* **Center Alignment**: Center left, center, or center right
-* **Bottom Alignment**: Bottom left, bottom center, or bottom right
+
+- **Top Alignment**: Top left, top center, or top right
+- **Center Alignment**: Center left, center, or center right
+- **Bottom Alignment**: Bottom left, bottom center, or bottom right

 **Repeat** - Controls whether the background repeats across the view:
-* **Repeat**: Tiles the background.
-* **No-repeat**: Prevents tiling, showing the image only once.
+
+- **Repeat**: Tiles the background.
+- **No-repeat**: Prevents tiling, showing the image only once.
🧰 Tools
🪛 Markdownlint (0.37.0)

204-204: Expected: dash; Actual: asterisk
Unordered list style

(MD004, ul-style)


205-205: Expected: dash; Actual: asterisk
Unordered list style

(MD004, ul-style)


206-206: Expected: dash; Actual: asterisk
Unordered list style

(MD004, ul-style)


209-209: Expected: dash; Actual: asterisk
Unordered list style

(MD004, ul-style)


210-210: Expected: dash; Actual: asterisk
Unordered list style

(MD004, ul-style)


211-211: Expected: dash; Actual: asterisk
Unordered list style

(MD004, ul-style)


214-214: Expected: dash; Actual: asterisk
Unordered list style

(MD004, ul-style)


215-215: Expected: dash; Actual: asterisk
Unordered list style

(MD004, ul-style)


204-204: Expected: 0 or 2; Actual: 1
Trailing spaces

(MD009, no-trailing-spaces)


204-204: null
Lists should be surrounded by blank lines

(MD032, blanks-around-lists)


209-209: null
Lists should be surrounded by blank lines

(MD032, blanks-around-lists)


214-214: null
Lists should be surrounded by blank lines

(MD032, blanks-around-lists)


219-228: Improve YAML example clarity

The YAML example could be more helpful with additional context:

-# Example background section in view yaml
+# Example view configuration with background settings
 background:
   image: /local/background.png
   settings: 
-    transparency: 50 # any percentage between 0 and 100
-    size: auto # auto, cover, contain
-    alignment: center # top left, top center, top right, center left, center, center right, bottom left, bottom center, bottom right
-    repeat: no-repeat # repeat, no-repeat
+    transparency: 50     # Percentage between 0 (opaque) and 100 (transparent)
+    size: cover         # Options: auto (original), cover (fill view), contain (fit view)
+    alignment: center   # Options: top left, top center, top right, center left, center, center right, bottom left, bottom center, bottom right
+    repeat: no-repeat   # Options: repeat (tile), no-repeat (single instance)
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 00d8d03 and 1fbf7aa.

📒 Files selected for processing (1)
  • source/dashboards/views.markdown (3 hunks)
🧰 Additional context used
🪛 LanguageTool
source/dashboards/views.markdown

[typographical] ~199-~199: After the expression ‘for example’ a comma is usually used.
Context: ...let you pick an image from the web. For example `https://www.home-assistant.io/images/f...

(COMMA_FOR_EXAMPLE)


[uncategorized] ~232-~232: A comma is probably missing here.
Context: ...CSS variable lovelace-background. For wallpapers you probably want to use the example be...

(MISSING_COMMA_AFTER_INTRODUCTORY_PHRASE)

🪛 Markdownlint (0.37.0)
source/dashboards/views.markdown

204-204: Expected: dash; Actual: asterisk
Unordered list style

(MD004, ul-style)


205-205: Expected: dash; Actual: asterisk
Unordered list style

(MD004, ul-style)


206-206: Expected: dash; Actual: asterisk
Unordered list style

(MD004, ul-style)


209-209: Expected: dash; Actual: asterisk
Unordered list style

(MD004, ul-style)


210-210: Expected: dash; Actual: asterisk
Unordered list style

(MD004, ul-style)


211-211: Expected: dash; Actual: asterisk
Unordered list style

(MD004, ul-style)


214-214: Expected: dash; Actual: asterisk
Unordered list style

(MD004, ul-style)


215-215: Expected: dash; Actual: asterisk
Unordered list style

(MD004, ul-style)


196-196: Expected: 0; Actual: 3
Unordered list indentation

(MD007, ul-indent)


197-197: Expected: 0; Actual: 3
Unordered list indentation

(MD007, ul-indent)


198-198: Expected: 2; Actual: 5
Unordered list indentation

(MD007, ul-indent)


199-199: Expected: 0; Actual: 3
Unordered list indentation

(MD007, ul-indent)


191-191: Expected: 0 or 2; Actual: 1
Trailing spaces

(MD009, no-trailing-spaces)


195-195: Expected: 0 or 2; Actual: 1
Trailing spaces

(MD009, no-trailing-spaces)


204-204: Expected: 0 or 2; Actual: 1
Trailing spaces

(MD009, no-trailing-spaces)


196-196: null
Lists should be surrounded by blank lines

(MD032, blanks-around-lists)


204-204: null
Lists should be surrounded by blank lines

(MD032, blanks-around-lists)


209-209: null
Lists should be surrounded by blank lines

(MD032, blanks-around-lists)


214-214: null
Lists should be surrounded by blank lines

(MD032, blanks-around-lists)

🔇 Additional comments (2)
source/dashboards/views.markdown (2)

62-63: LGTM!

Clear and helpful reference to the detailed background settings section.


304-305: LGTM!

The configuration reference accurately describes the background option.

@home-assistant home-assistant bot added the parent-merged The parent PR has been merged already label Dec 22, 2024
Copy link
Member

@frenck frenck left a comment

Choose a reason for hiding this comment

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

@silamon The CI is failing, could you please take a look?

Thanks! 👍

../Frenck

@home-assistant
Copy link

Please take a look at the requested changes, and use the Ready for review button when you are done, thanks 👍

Learn more about our pull request process.

@home-assistant home-assistant bot marked this pull request as draft December 22, 2024 19:45
@silamon silamon marked this pull request as ready for review December 23, 2024 12:21
@home-assistant home-assistant bot requested a review from frenck December 23, 2024 12:21
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 0

🧹 Nitpick comments (1)
source/dashboards/views.markdown (1)

191-232: Excellent documentation with minor improvements needed

The background settings documentation is comprehensive and well-structured. However, there are some minor inconsistencies and formatting improvements needed:

  1. The YAML example values don't match the documented options:
    • size: auto should be one of: original, fill view, or fit view
    • alignment: center should match the documented format (e.g., center center)

Apply these changes to the YAML example:

 background:
   image: /local/background.png
   transparency: 50 # any percentage between 0 and 100
-  size: auto # auto, cover, contain
+  size: original # original, fill view, fit view
-  alignment: center # top left, top center, top right, center left, center, center right, bottom left, bottom center, bottom right
+  alignment: center center # top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right
   repeat: no-repeat # repeat, no-repeat
   attachment: scroll # scroll, fixed

Add commas after "For example" in the following lines:

  • Line 199: "For example, https://..."
  • Line 236: "For wallpapers, you probably want..."
🧰 Tools
🪛 LanguageTool

[typographical] ~199-~199: After the expression ‘for example’ a comma is usually used.
Context: ...let you pick an image from the web. For example `https://www.home-assistant.io/images/f...

(COMMA_FOR_EXAMPLE)

🪛 Markdownlint (0.37.0)

196-196: Expected: 0; Actual: 3
Unordered list indentation

(MD007, ul-indent)


197-197: Expected: 0; Actual: 3
Unordered list indentation

(MD007, ul-indent)


198-198: Expected: 2; Actual: 5
Unordered list indentation

(MD007, ul-indent)


199-199: Expected: 0; Actual: 3
Unordered list indentation

(MD007, ul-indent)


191-191: Expected: 0 or 2; Actual: 1
Trailing spaces

(MD009, no-trailing-spaces)


195-195: Expected: 0 or 2; Actual: 1
Trailing spaces

(MD009, no-trailing-spaces)


204-204: Expected: 0 or 2; Actual: 1
Trailing spaces

(MD009, no-trailing-spaces)


196-196: null
Lists should be surrounded by blank lines

(MD032, blanks-around-lists)


204-204: null
Lists should be surrounded by blank lines

(MD032, blanks-around-lists)


209-209: null
Lists should be surrounded by blank lines

(MD032, blanks-around-lists)


214-214: null
Lists should be surrounded by blank lines

(MD032, blanks-around-lists)


218-218: null
Lists should be surrounded by blank lines

(MD032, blanks-around-lists)

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1fbf7aa and 0ade0a0.

📒 Files selected for processing (1)
  • source/dashboards/views.markdown (3 hunks)
🧰 Additional context used
🪛 LanguageTool
source/dashboards/views.markdown

[typographical] ~199-~199: After the expression ‘for example’ a comma is usually used.
Context: ...let you pick an image from the web. For example `https://www.home-assistant.io/images/f...

(COMMA_FOR_EXAMPLE)


[uncategorized] ~236-~236: A comma is probably missing here.
Context: ...CSS variable lovelace-background. For wallpapers you probably want to use the example be...

(MISSING_COMMA_AFTER_INTRODUCTORY_PHRASE)

🪛 Markdownlint (0.37.0)
source/dashboards/views.markdown

196-196: Expected: 0; Actual: 3
Unordered list indentation

(MD007, ul-indent)


197-197: Expected: 0; Actual: 3
Unordered list indentation

(MD007, ul-indent)


198-198: Expected: 2; Actual: 5
Unordered list indentation

(MD007, ul-indent)


199-199: Expected: 0; Actual: 3
Unordered list indentation

(MD007, ul-indent)


191-191: Expected: 0 or 2; Actual: 1
Trailing spaces

(MD009, no-trailing-spaces)


195-195: Expected: 0 or 2; Actual: 1
Trailing spaces

(MD009, no-trailing-spaces)


204-204: Expected: 0 or 2; Actual: 1
Trailing spaces

(MD009, no-trailing-spaces)


196-196: null
Lists should be surrounded by blank lines

(MD032, blanks-around-lists)


204-204: null
Lists should be surrounded by blank lines

(MD032, blanks-around-lists)


209-209: null
Lists should be surrounded by blank lines

(MD032, blanks-around-lists)


214-214: null
Lists should be surrounded by blank lines

(MD032, blanks-around-lists)


218-218: null
Lists should be surrounded by blank lines

(MD032, blanks-around-lists)

🔇 Additional comments (3)
source/dashboards/views.markdown (3)

62-63: LGTM: Clear instructions with helpful reference

The updated instructions provide better guidance by linking to the detailed background settings section.


234-237: LGTM: Clear theme variable documentation

The theme variable documentation is clear and provides helpful references to CSS background options.

🧰 Tools
🪛 LanguageTool

[uncategorized] ~236-~236: A comma is probably missing here.
Context: ...CSS variable lovelace-background. For wallpapers you probably want to use the example be...

(MISSING_COMMA_AFTER_INTRODUCTORY_PHRASE)


308-309: LGTM: Clear configuration reference

The background configuration description in the reference section is concise and accurate.

@silamon silamon marked this pull request as draft December 23, 2024 12:23
@silamon silamon marked this pull request as ready for review December 23, 2024 12:42
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 0

🧹 Nitpick comments (2)
source/dashboards/views.markdown (2)

191-254: Fix formatting and grammar issues

The content is comprehensive and well-structured, but there are some minor formatting and grammar issues to address:

  1. Add a comma after "For example" in line 199
  2. Add a comma after "For wallpapers" in line 253
  3. Fix list indentation in lines 196-199 to be consistent
  4. Remove trailing spaces from lines 191, 195, 216, 221, 223, 226, and 231
🧰 Tools
🪛 LanguageTool

[typographical] ~199-~199: After the expression ‘for example’ a comma is usually used.
Context: ...let you pick an image from the web. For example `https://www.home-assistant.io/images/f...

(COMMA_FOR_EXAMPLE)


[uncategorized] ~253-~253: A comma is probably missing here.
Context: ...CSS variable lovelace-background. For wallpapers you probably want to use the example be...

(MISSING_COMMA_AFTER_INTRODUCTORY_PHRASE)

🪛 Markdownlint (0.37.0)

196-196: Expected: 0; Actual: 3
Unordered list indentation

(MD007, ul-indent)


197-197: Expected: 0; Actual: 3
Unordered list indentation

(MD007, ul-indent)


198-198: Expected: 2; Actual: 5
Unordered list indentation

(MD007, ul-indent)


199-199: Expected: 0; Actual: 3
Unordered list indentation

(MD007, ul-indent)


191-191: Expected: 0 or 2; Actual: 1
Trailing spaces

(MD009, no-trailing-spaces)


195-195: Expected: 0 or 2; Actual: 1
Trailing spaces

(MD009, no-trailing-spaces)


216-216: Expected: 0 or 2; Actual: 1
Trailing spaces

(MD009, no-trailing-spaces)


221-221: Expected: 0 or 2; Actual: 1
Trailing spaces

(MD009, no-trailing-spaces)


223-223: Expected: 0 or 2; Actual: 1
Trailing spaces

(MD009, no-trailing-spaces)


226-226: Expected: 0 or 2; Actual: 1
Trailing spaces

(MD009, no-trailing-spaces)


231-231: Expected: 0 or 2; Actual: 1
Trailing spaces

(MD009, no-trailing-spaces)


196-196: null
Lists should be surrounded by blank lines

(MD032, blanks-around-lists)


325-326: Enhance the background property description in views configuration

The current description "Style the background behind the view" could be more detailed to match the comprehensive documentation provided in the background section above.

Consider updating it to:

-      description: Style the background behind the view.
+      description: Customize the view's background with options for image, transparency, size, alignment, repeat, and attachment. See the background section for detailed configuration options.
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 0ade0a0 and 02bbf67.

📒 Files selected for processing (1)
  • source/dashboards/views.markdown (3 hunks)
🧰 Additional context used
🪛 LanguageTool
source/dashboards/views.markdown

[typographical] ~199-~199: After the expression ‘for example’ a comma is usually used.
Context: ...let you pick an image from the web. For example `https://www.home-assistant.io/images/f...

(COMMA_FOR_EXAMPLE)


[uncategorized] ~253-~253: A comma is probably missing here.
Context: ...CSS variable lovelace-background. For wallpapers you probably want to use the example be...

(MISSING_COMMA_AFTER_INTRODUCTORY_PHRASE)

🪛 Markdownlint (0.37.0)
source/dashboards/views.markdown

196-196: Expected: 0; Actual: 3
Unordered list indentation

(MD007, ul-indent)


197-197: Expected: 0; Actual: 3
Unordered list indentation

(MD007, ul-indent)


198-198: Expected: 2; Actual: 5
Unordered list indentation

(MD007, ul-indent)


199-199: Expected: 0; Actual: 3
Unordered list indentation

(MD007, ul-indent)


191-191: Expected: 0 or 2; Actual: 1
Trailing spaces

(MD009, no-trailing-spaces)


195-195: Expected: 0 or 2; Actual: 1
Trailing spaces

(MD009, no-trailing-spaces)


216-216: Expected: 0 or 2; Actual: 1
Trailing spaces

(MD009, no-trailing-spaces)


221-221: Expected: 0 or 2; Actual: 1
Trailing spaces

(MD009, no-trailing-spaces)


223-223: Expected: 0 or 2; Actual: 1
Trailing spaces

(MD009, no-trailing-spaces)


226-226: Expected: 0 or 2; Actual: 1
Trailing spaces

(MD009, no-trailing-spaces)


231-231: Expected: 0 or 2; Actual: 1
Trailing spaces

(MD009, no-trailing-spaces)


196-196: null
Lists should be surrounded by blank lines

(MD032, blanks-around-lists)

🔇 Additional comments (2)
source/dashboards/views.markdown (2)

62-63: LGTM!

Clear and concise introduction to the background settings feature with proper section linking.


191-249: Verify alignment with frontend implementation

The documentation comprehensively covers the background customization options. Let's verify that all documented options are supported in the frontend implementation.

🧰 Tools
🪛 LanguageTool

[typographical] ~199-~199: After the expression ‘for example’ a comma is usually used.
Context: ...let you pick an image from the web. For example `https://www.home-assistant.io/images/f...

(COMMA_FOR_EXAMPLE)

🪛 Markdownlint (0.37.0)

196-196: Expected: 0; Actual: 3
Unordered list indentation

(MD007, ul-indent)


197-197: Expected: 0; Actual: 3
Unordered list indentation

(MD007, ul-indent)


198-198: Expected: 2; Actual: 5
Unordered list indentation

(MD007, ul-indent)


199-199: Expected: 0; Actual: 3
Unordered list indentation

(MD007, ul-indent)


191-191: Expected: 0 or 2; Actual: 1
Trailing spaces

(MD009, no-trailing-spaces)


195-195: Expected: 0 or 2; Actual: 1
Trailing spaces

(MD009, no-trailing-spaces)


216-216: Expected: 0 or 2; Actual: 1
Trailing spaces

(MD009, no-trailing-spaces)


221-221: Expected: 0 or 2; Actual: 1
Trailing spaces

(MD009, no-trailing-spaces)


223-223: Expected: 0 or 2; Actual: 1
Trailing spaces

(MD009, no-trailing-spaces)


226-226: Expected: 0 or 2; Actual: 1
Trailing spaces

(MD009, no-trailing-spaces)


231-231: Expected: 0 or 2; Actual: 1
Trailing spaces

(MD009, no-trailing-spaces)


196-196: null
Lists should be surrounded by blank lines

(MD032, blanks-around-lists)

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 0

🧹 Nitpick comments (4)
source/dashboards/views.markdown (4)

195-199: Fix list formatting and add missing comma.

The list formatting needs adjustment, and a comma is missing after "For example".

**Image** - Sets the background image to use behind the view:
- Upload picture lets you pick an image from the system used to show your Home Assistant UI.
- Local path lets you pick an image stored on Home Assistant. For example, `/homeassistant/images/lights_view_background_image.jpg`.
  - To store an image on Home Assistant, you need to [configure access to files](/common-tasks/os/#configuring-access-to-files), for example via [Samba](/common-tasks/os/#installing-and-using-the-samba-add-on) or the [Studio Code Server](/common-tasks/os/#installing-and-using-the-visual-studio-code-vsc-add-on) add-on.
- Web URL let you pick an image from the web. For example, `https://www.home-assistant.io/images/frontpage/assist_wake_word.png`.
🧰 Tools
🪛 LanguageTool

[typographical] ~199-~199: After the expression ‘for example’ a comma is usually used.
Context: ...let you pick an image from the web. For example `https://www.home-assistant.io/images/f...

(COMMA_FOR_EXAMPLE)

🪛 Markdownlint (0.37.0)

196-196: Expected: 0; Actual: 3
Unordered list indentation

(MD007, ul-indent)


197-197: Expected: 0; Actual: 3
Unordered list indentation

(MD007, ul-indent)


198-198: Expected: 2; Actual: 5
Unordered list indentation

(MD007, ul-indent)


199-199: Expected: 0; Actual: 3
Unordered list indentation

(MD007, ul-indent)


195-195: Expected: 0 or 2; Actual: 1
Trailing spaces

(MD009, no-trailing-spaces)


196-196: null
Lists should be surrounded by blank lines

(MD032, blanks-around-lists)


240-249: Consider enhancing the YAML example.

While the example is correct, it could be more helpful to show real-world values for each option.

# Example background section in view yaml
background:
-  image: /local/background.png
-  transparency: 50 # any percentage between 0 and 100
-  size: auto # auto, cover, contain
-  alignment: center # top left, top center, top right, center left, center, center right, bottom left, bottom center, bottom right
-  repeat: no-repeat # repeat, no-repeat
-  attachment: scroll # scroll, fixed
+  image: /local/living_room_background.jpg
+  transparency: 85  # 85% opacity
+  size: cover      # fill the view
+  alignment: center bottom  # align to bottom center
+  repeat: no-repeat
+  attachment: fixed  # background stays fixed while scrolling

251-254: Add missing comma in theme variable documentation.

A comma is missing after "For wallpapers".

You can style the background of all your views with a [theme](/integrations/frontend/#themes). You can use the CSS variable `lovelace-background`. For wallpapers, you probably want to use the example below, more options can be found [here](https://developer.mozilla.org/en-US/docs/Web/CSS/background).
🧰 Tools
🪛 LanguageTool

[uncategorized] ~253-~253: A comma is probably missing here.
Context: ...CSS variable lovelace-background. For wallpapers you probably want to use the example be...

(MISSING_COMMA_AFTER_INTRODUCTORY_PHRASE)


325-326: Enhance the configuration reference description.

Consider making the description more specific about the available customization options.

-      description: Style the background behind the view.
+      description: Customize the view's background with image, transparency, size, alignment, repeat, and attachment options.
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 02bbf67 and 0fffd3a.

📒 Files selected for processing (1)
  • source/dashboards/views.markdown (3 hunks)
🧰 Additional context used
🪛 LanguageTool
source/dashboards/views.markdown

[typographical] ~199-~199: After the expression ‘for example’ a comma is usually used.
Context: ...let you pick an image from the web. For example `https://www.home-assistant.io/images/f...

(COMMA_FOR_EXAMPLE)


[uncategorized] ~253-~253: A comma is probably missing here.
Context: ...CSS variable lovelace-background. For wallpapers you probably want to use the example be...

(MISSING_COMMA_AFTER_INTRODUCTORY_PHRASE)

🪛 Markdownlint (0.37.0)
source/dashboards/views.markdown

196-196: Expected: 0; Actual: 3
Unordered list indentation

(MD007, ul-indent)


197-197: Expected: 0; Actual: 3
Unordered list indentation

(MD007, ul-indent)


198-198: Expected: 2; Actual: 5
Unordered list indentation

(MD007, ul-indent)


199-199: Expected: 0; Actual: 3
Unordered list indentation

(MD007, ul-indent)


191-191: Expected: 0 or 2; Actual: 1
Trailing spaces

(MD009, no-trailing-spaces)


195-195: Expected: 0 or 2; Actual: 1
Trailing spaces

(MD009, no-trailing-spaces)


204-204: Expected: 0 or 2; Actual: 1
Trailing spaces

(MD009, no-trailing-spaces)


216-216: Expected: 0 or 2; Actual: 1
Trailing spaces

(MD009, no-trailing-spaces)


221-221: Expected: 0 or 2; Actual: 1
Trailing spaces

(MD009, no-trailing-spaces)


223-223: Expected: 0 or 2; Actual: 1
Trailing spaces

(MD009, no-trailing-spaces)


226-226: Expected: 0 or 2; Actual: 1
Trailing spaces

(MD009, no-trailing-spaces)


231-231: Expected: 0 or 2; Actual: 1
Trailing spaces

(MD009, no-trailing-spaces)


196-196: null
Lists should be surrounded by blank lines

(MD032, blanks-around-lists)

🔇 Additional comments (3)
source/dashboards/views.markdown (3)

62-63: LGTM: Clear instructions with proper section reference.

The updated instructions for background image selection are clear and properly link to the detailed background section.


191-193: LGTM: Clear introduction to background settings.

The introduction effectively explains the two approaches to customizing backgrounds.

🧰 Tools
🪛 Markdownlint (0.37.0)

191-191: Expected: 0 or 2; Actual: 1
Trailing spaces

(MD009, no-trailing-spaces)


201-236: LGTM: Well-structured configuration documentation.

The configuration documentation is comprehensive and well-organized, covering all background customization options with clear descriptions and default values.

🧰 Tools
🪛 Markdownlint (0.37.0)

204-204: Expected: 0 or 2; Actual: 1
Trailing spaces

(MD009, no-trailing-spaces)


216-216: Expected: 0 or 2; Actual: 1
Trailing spaces

(MD009, no-trailing-spaces)


221-221: Expected: 0 or 2; Actual: 1
Trailing spaces

(MD009, no-trailing-spaces)


223-223: Expected: 0 or 2; Actual: 1
Trailing spaces

(MD009, no-trailing-spaces)


226-226: Expected: 0 or 2; Actual: 1
Trailing spaces

(MD009, no-trailing-spaces)


231-231: Expected: 0 or 2; Actual: 1
Trailing spaces

(MD009, no-trailing-spaces)

Copy link
Member

@frenck frenck left a comment

Choose a reason for hiding this comment

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

Very nice! Thanks, @silamon 👍

../Frenck

@frenck frenck merged commit 49cb4dd into next Dec 23, 2024
9 checks passed
@home-assistant home-assistant bot removed the parent-merged The parent PR has been merged already label Dec 23, 2024
@frenck frenck deleted the background-view-settigs branch December 23, 2024 15:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
has-parent This PR has a parent PR in a other repo next This PR goes into the next branch
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants