Skip to content

Fix header logo and icons #32204

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.

Sign up for GitHub

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

Merged
skjnldsv merged 2 commits into from
Apr 28, 2022
Merged

Fix header logo and icons #32204

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7c5bb55
Fix logo colour on bright primary colour
skjnldsv Apr 28, 2022
5e8a3eb
Fix header apps icons
skjnldsv Apr 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions apps/theming/css/default.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,6 @@
--header-menu-item-height: 44px;
--header-menu-profile-item-height: 66px;
--breakpoint-mobile: 1024px;
--primary-invert-if-bright: unset;
--background-invert-if-dark: unset;
--primary-invert-if-bright: no;
--background-invert-if-dark: no;
}
15 changes: 12 additions & 3 deletions apps/theming/lib/Themes/DefaultTheme.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,8 @@ public function getCSSVariables(): array {
$colorBoxShadow = $this->util->darken($colorMainBackground, 70);
$colorBoxShadowRGB = join(',', $this->util->hexToRGB($colorBoxShadow));

$hasCustomLogoHeader = $this->imageManager->hasImage('logo') || $this->imageManager->hasImage('logoheader');

$variables = [
'--color-main-background' => $colorMainBackground,
'--color-main-background-rgb' => $colorMainBackgroundRGB,
Expand Down Expand Up @@ -175,8 +177,11 @@ public function getCSSVariables(): array {
// to be used for legacy reasons only. Use inline
// svg with proper css variable instead or material
// design icons.
'--primary-invert-if-bright' => $this->util->invertTextColor($this->primaryColor) ? 'invert(100%)' : 'unset',
'--background-invert-if-dark' => 'unset',
// ⚠️ Using 'no' as a value to make sure we specify an
// invalid one with no fallback. 'unset' could here fallback to some
// other theme with media queries
'--primary-invert-if-bright' => $this->util->invertTextColor($this->primaryColor) ? 'invert(100%)' : 'no',
'--background-invert-if-dark' => 'no',
];

// Register image variables only if custom-defined
Expand All @@ -185,7 +190,7 @@ public function getCSSVariables(): array {
if ($this->imageManager->hasImage($image)) {
// If primary as background has been request, let's not define the background image
if ($image === 'background' && $backgroundDeleted) {
$variables["--image-background-plain"] = true;
$variables["--image-background-plain"] = 'true';
continue;
} else if ($image === 'background') {
$variables['--image-background-size'] = 'cover';
Expand All @@ -194,6 +199,10 @@ public function getCSSVariables(): array {
}
}

if ($hasCustomLogoHeader) {
$variables["--image-logoheader-custom"] = 'true';
}

return $variables;
}

Expand Down
15 changes: 4 additions & 11 deletions core/css/header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -182,12 +182,8 @@
left: 12px;
top: 1px;
bottom: 1px;

img {
opacity: 0;
max-width: 100%;
max-height: 200px;
}
// Invert non-custom logo if primary is too bright
filter: var(--image-logoheader-custom, var(--primary-invert-if-bright))
}

.header-appname-container {
Expand Down Expand Up @@ -450,11 +446,6 @@ nav[role='navigation'] {
// Make sure most app names don’t ellipsize
letter-spacing: -0.5px;
font-size: 12px;

// If the primary is too bright, invert the app icons
svg image {
filter: var(--primary-invert-if-bright);
}
}

/* focused app visual feedback */
Expand Down Expand Up @@ -512,6 +503,8 @@ nav[role='navigation'] {
svg,
.icon-more-white {
transition: transform var(--animation-quick) ease;
// If the primary is too bright, invert the app icons
filter: var(--primary-invert-if-bright);
}

/* Triangle */
Expand Down
2 changes: 1 addition & 1 deletion core/templates/layout.user.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@
<?php if (isset($entry['target']) && $entry['target']): ?> target="_blank" rel="noreferrer noopener"<?php endif; ?>
<?php if ($entry['active']): ?> class="active"<?php endif; ?>
aria-label="<?php p($entry['name']); ?>">
<svg width="20" height="20" viewBox="0 0 20 20" alt=""<?php if ($entry['unread'] !== 0) { ?> class="has-unread"<?php } ?>>
<svg width="20" height="20" viewBox="0 0 16 16" alt=""<?php if ($entry['unread'] !== 0) { ?> class="has-unread"<?php } ?>>
<defs>
<filter id="invertMenuMore-<?php p($entry['id']); ?>"><feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0"></feColorMatrix></filter>
<mask id="hole">
Expand Down