Skip to content

theming: Separate primary and background colors - fix the header menu colors #42977

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
susnux merged 17 commits into from
May 21, 2024
Merged

theming: Separate primary and background colors - fix the header menu colors #42977

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
0211feb
fix(theming): Also set default background color ("primary") for custo…
susnux Jan 19, 2024
de938bb
feat(theming): Separate background and primary color
susnux Jan 19, 2024
9d2c3c1
fix: Adjust dashboard and header menu to use new background colors
susnux Jan 19, 2024
705335e
feat(theming): Allow to configure primary color separate from backgro…
susnux Jan 20, 2024
482395b
fix(theming): Also reset background color settings when updating glob…
susnux Jan 20, 2024
4d865fd
feat(theming): Allow users to configure their primary color
susnux Jan 20, 2024
282f1b1
fix(theming): Also apply new background colors to guest view
susnux Jan 20, 2024
0ef3147
fix(tests): Adjust theming test for new splitted background and prima…
susnux Jan 20, 2024
c826092
fix(core): Adjust styles for header menu icons
susnux Jan 20, 2024
752e3b9
fix(settings): Make background selector be responsive to user changes
susnux Feb 16, 2024
bd73bcc
fix(styles): Adjust background stylings
susnux Feb 16, 2024
8028784
fix: cleanup theming app code
susnux Feb 16, 2024
85b64e1
fix: Always populate `--image-background`
susnux Feb 16, 2024
11dbfa6
fix(settings): Return mean color of background image on set
susnux Feb 16, 2024
538a049
fix(tests): Adjust theming test for new splitted background and prima…
susnux Jan 20, 2024
f19d586
fix(theming): Add some strict checking for userId
susnux May 20, 2024
651afb8
chore: Compile assets
susnux May 15, 2024
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
Prev Previous commit
Next Next commit
fix: Adjust dashboard and header menu to use new background colors 
fix(UnifiedSearch): Adjust to new background color

Signed-off-by: Ferdinand Thiessen <[email protected]>
  • Loading branch information
@susnux
susnux committed May 21, 2024
commit 9d2c3c1164926eadb61d1ec8360644dfeb75a78c
4 changes: 2 additions & 2 deletions apps/dashboard/src/DashboardApp.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -471,8 +471,8 @@ export default {
background-attachment: fixed;

> h2 {
// this is shown directly on the background which has `color-primary`, so we need `color-primary-text`
color: var(--color-primary-text);
// this is shown directly on the background image / color
color: var(--color-background-plain-text);
text-align: center;
font-size: 32px;
line-height: 130%;
Expand Down
2 changes: 1 addition & 1 deletion core/css/header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
width: 12px;
height: 2px;
border-radius: 3px;
background-color: var(--color-primary-text);
background-color: var(--color-background-plain-text);
left: 50%;
opacity: 1;
}
Expand Down
14 changes: 7 additions & 7 deletions core/src/components/AppMenu.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@ $header-icon-size: 20px;
width: 12px;
height: 5px;
border-radius: 3px;
background-color: var(--color-primary-text);
background-color: var(--color-background-plain-text);
left: 50%;
bottom: 6px;
display: block;
Expand All @@ -161,8 +161,8 @@ $header-icon-size: 20px;
width: calc(100% - 4px);
height: calc(100% - 4px);
margin: 2px;
// this is shown directly on the background which has `color-primary`, so we need `color-primary-text`
color: var(--color-primary-text);
// this is shown directly on the background
color: var(--color-background-plain-text);
position: relative;
}

Expand All @@ -179,8 +179,8 @@ $header-icon-size: 20px;
opacity: 0;
position: absolute;
font-size: 12px;
// this is shown directly on the background which has `color-primary`, so we need `color-primary-text`
color: var(--color-primary-text);
// this is shown directly on the background
color: var(--color-background-plain-text);
text-align: center;
left: 50%;
top: 45%;
Expand Down Expand Up @@ -238,7 +238,7 @@ $header-icon-size: 20px;

/* Remove all background and align text color if not expanded */
&:not([aria-expanded="true"]) {
color: var(--color-primary-element-text);
color: var(--color-background-plain-text);

&:hover {
opacity: 1;
Expand Down Expand Up @@ -278,7 +278,7 @@ $header-icon-size: 20px;
content: "";
width: 8px;
height: 8px;
background-color: var(--color-primary-element-text);
background-color: var(--color-background-plain-text);
border-radius: 50%;
position: absolute;
display: block;
Expand Down
6 changes: 5 additions & 1 deletion core/src/views/ContactsMenu.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
:aria-label="t('core', 'Search contacts')"
@open="handleOpen">
<template #trigger>
<Contacts :size="20" />
<Contacts class="contactsmenu__trigger-icon" :size="20" />
</template>
<div class="contactsmenu__menu">
<div class="contactsmenu__menu__input-wrapper">
Expand Down Expand Up @@ -171,6 +171,10 @@ export default {
.contactsmenu {
overflow-y: hidden;

&__trigger-icon {
color: var(--color-background-plain-text) !important;
}

&__menu {
display: flex;
flex-direction: column;
Expand Down
7 changes: 5 additions & 2 deletions core/src/views/LegacyUnifiedSearch.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,7 @@
@close="onClose">
<!-- Header icon -->
<template #trigger>
<Magnify class="unified-search__trigger"
:size="22/* fit better next to other 20px icons */" />
<Magnify class="unified-search__trigger-icon" :size="20" />
</template>

<!-- Search form & filters wrapper -->
Expand Down Expand Up @@ -706,6 +705,10 @@ $input-height: 34px;
$input-padding: 10px;

.unified-search {
&__trigger-icon {
color: var(--color-background-plain-text) !important;
}

&__input-wrapper {
position: sticky;
// above search results
Expand Down
2 changes: 1 addition & 1 deletion core/src/views/UnifiedSearch.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ export default {
&-icon {
// ensure the icon has the correct color
color: var(--color-primary-text) !important;
color: var(--color-background-plain-text) !important;
}
}
}
Expand Down