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

🔢 Add css variables for blur background #33610

Merged
merged 5 commits into from
Aug 19, 2022
Merged

Conversation

juliushaertl
Copy link
Member

@juliushaertl juliushaertl commented Aug 18, 2022

  • Add css variables for blurred background and core background image
    • --color-main-background-blur
    • --filter-background-blur
    • --image-main-background
  • Move dashboard to new variables

@juliushaertl juliushaertl added design Design, UI, UX, etc. 3. to review Waiting for reviews labels Aug 18, 2022
@juliushaertl juliushaertl added this to the Nextcloud 25 milestone Aug 18, 2022
@AndyScherzinger AndyScherzinger changed the title Add css variables for blur background 🔢 Add css variables for blur background Aug 18, 2022
Copy link
Contributor

@GretaD GretaD left a comment

Choose a reason for hiding this comment

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

looks good

@@ -59,6 +59,9 @@ public function getCSSVariables(): array {
$variables['--color-background-dark'] = $this->util->darken($colorMainBackground, 30);
$variables['--color-background-darker'] = $this->util->darken($colorMainBackground, 30);

$variables['--color-main-background-blur'] = $colorMainBackground;
$variables['--filter-background-blur'] = 'none';
Copy link
Member

Choose a reason for hiding this comment

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

Nice!

@@ -190,26 +192,30 @@ public function getCSSVariables(): array {
'--primary-invert-if-bright' => $this->util->invertTextColor($this->primaryColor) ? 'invert(100%)' : 'no',
'--background-invert-if-dark' => 'no',
'--background-invert-if-bright' => 'invert(100%)',

'--image-main-background' => "url('" . $this->urlGenerator->imagePath('core', 'app-background.jpg') . "')",
Copy link
Member

Choose a reason for hiding this comment

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

Can't we customize that?

Copy link
Member Author

Choose a reason for hiding this comment

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

It will be overwriten further down with the theming image. Taking the customised dashboard image into account will be a follow up.

Copy link
Member

Choose a reason for hiding this comment

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

Ah right I get it now!
Could use a tad more comments 😉

}
$variables["--image-$image"] = "url('".$this->imageManager->getImageUrl($image)."')";
$variables["--image-$image"] = "url('" . $imageUrl . "')";
Copy link
Member

Choose a reason for hiding this comment

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

Duplicate of the line 216, no?

Copy link
Member Author

Choose a reason for hiding this comment

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

No, --image-main-background has a fallback to the cloud image, while the other one --image-background only represents just the theming image.

Copy link
Member

@skjnldsv skjnldsv left a comment

Choose a reason for hiding this comment

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

See comments

Signed-off-by: Julius Härtl <jus@bitgrid.net>
Signed-off-by: Julius Härtl <jus@bitgrid.net>
Signed-off-by: Julius Härtl <jus@bitgrid.net>
@juliushaertl
Copy link
Member Author

/compile

Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>
@skjnldsv skjnldsv added 4. to release Ready to be released and/or waiting for tests to finish and removed 3. to review Waiting for reviews labels Aug 19, 2022
Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>
@skjnldsv
Copy link
Member

Fixed tests

@skjnldsv skjnldsv merged commit c87f05a into master Aug 19, 2022
@skjnldsv skjnldsv deleted the enh/background-blur-vars branch August 19, 2022 13:30
@skjnldsv skjnldsv mentioned this pull request Aug 19, 2022
@juliushaertl juliushaertl mentioned this pull request Aug 29, 2022
64 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
4. to release Ready to be released and/or waiting for tests to finish design Design, UI, UX, etc.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants