diff --git a/css/components/ncheadermenu.scss b/css/components/ncheadermenu.scss
index 95dadc71..62628a4a 100644
--- a/css/components/ncheadermenu.scss
+++ b/css/components/ncheadermenu.scss
@@ -1,51 +1,10 @@
@import '../variables';
#header {
-
- box-shadow: 0 2px 9px var(--color-box-shadow);
-
.header-right {
.header-menu {
- &__trigger {
- opacity: 1;
- width: 48px;
-
- @media screen and (max-width: $breakpoint-mobile) {
- & > span {
- display: none;
- }
- }
-
- // hover effect for function entries
- &:hover {
-
- span {
- color: var(--color-primary-hover);
- }
-
- &:not([aria-expanded="true"]) {
-
- &::before {
- background-color: var(--color-primary);
- border-radius: 0;
- bottom: 0;
- content: " ";
- display: block;
- height: 4px;
- left: 50%;
- opacity: 1;
- pointer-events: none;
- position: fixed;
- bottom: 8px;
- transform: translateX(-50%);
- width: 100%;
- }
- }
- }
- }
-
// reposition flyout menus
&__wrapper {
background-color: var(--telekom-color-background-surface);
diff --git a/css/layouts/header.scss b/css/layouts/header.scss
index 62a0127f..b2c902d5 100644
--- a/css/layouts/header.scss
+++ b/css/layouts/header.scss
@@ -28,10 +28,6 @@ header {
}
}
-@mixin color-icon {
- filter: brightness(0) saturate(100%) invert(13%) sepia(85%) saturate(6096%) hue-rotate(321deg) brightness(75%) contrast(104%) !important;
-}
-
// main header styles
#body-user #header,
#body-settings #header,
@@ -121,43 +117,95 @@ header {
display: none;
}
-.header-menu__trigger {
- font-size: 12px;
- font-weight: normal;
-}
+#header {
+ box-shadow: 0 2px 9px var(--color-box-shadow);
+ .header-right {
+ // hide 'Search contacts' button
+ #contactsmenu {
+ display: none;
+ }
-#unified-search {
+ // general styling for buttons in the header
+ .header-menu {
+ width: auto;
+ button.button-vue {
+ width: auto !important;
+ padding-left: 0;
+ .button-vue__label {
+ font-size: 12px;
+ font-weight: normal;
+ }
- .header-menu__trigger {
- background-image: var(--icon-search);
- background-size: auto 24px;
- background-position: center;
- background-repeat: no-repeat;
+ .button-vue__wrapper {
+ width: 44px;
+ .button-vue__icon {
+ background-size: auto 24px;
+ background-position: center;
+ background-repeat: no-repeat;
+ svg {
+ display: none;
+ }
+ }
+ }
+
+ &:hover {
+ &::before {
+ background-color: var(--color-primary);
+ content: " ";
+ display: block;
+ height: 4px;
+ bottom: 8px;
+ width: 100%;
+ position: absolute;
+ }
+
+ .button-vue__label {
+ color: var(--color-primary);
+ cursor: pointer;
+ }
+
+ .button-vue__icon {
+ filter: var(--nmc-color-icon) !important;
+ }
+ }
- &:hover {
- filter: var(--nmc-color-icon)
+ @media screen and (max-width: $breakpoint-mobile) {
+ padding-right: 0;
+ .button-vue__label {
+ display: none;
+ }
+ }
+ }
}
}
+}
- .unified-search__trigger {
- display: none;
+// Custom styling for the 'Search' button
+#header .header-right .header-menu:not(.user-menu) {
+ button.unified-search__button {
+ border: none;
+ border-radius: 0;
+ height: 100%;
+ .button-vue__wrapper {
+ .button-vue__icon {
+ background-image: var(--icon-search-dark);
+ }
+ }
+
}
}
+// Custom styling for the 'User' button
#user-menu {
-
@media screen and (max-width: $breakpoint-mobile) {
margin-right: var(--telekom-spacing-composition-space-03);
}
- .header-menu__trigger {
- background-image: var(--icon-user);
- background-size: auto 24px;
- background-position: center;
- background-repeat: no-repeat;
-
- &:hover {
- filter: var(--nmc-color-icon)
+ button.header-menu__trigger {
+ .button-vue__wrapper {
+ .button-vue__icon {
+ background-image: var(--icon-user);
+ }
}
}
@@ -169,12 +217,6 @@ header {
.header-menu__content {
width: 350px !important;
}
-
- .user-menu__nav {
- ul {
- width: 100%;
- }
- }
}
// styles for public share pages
diff --git a/css/nmcstyle.scss b/css/nmcstyle.scss
index 337e30ab..733f55d4 100644
--- a/css/nmcstyle.scss
+++ b/css/nmcstyle.scss
@@ -58,5 +58,4 @@
/* v25 override */
@import 'v25/ncappnavigation.scss';
-@import 'v25/header.scss';
diff --git a/css/v25/header.scss b/css/v25/header.scss
deleted file mode 100644
index 833d19a8..00000000
--- a/css/v25/header.scss
+++ /dev/null
@@ -1,57 +0,0 @@
-@mixin color-icon {
- filter: brightness(0) saturate(100%) invert(13%) sepia(85%) saturate(6096%) hue-rotate(321deg) brightness(75%) contrast(104%) !important;
-}
-
-.header-left {
- // disable
- .app-menu .app-menu-main .app-menu-entry {
- filter: none;
- }
-}
-
-.header-right {
- // hide 'Search contacts' button
- #contactsmenu {
- display: none;
- }
-
- // set up styling for 'Search' and 'User' nav entries
- #unified-search, #user-menu {
- .header-menu__trigger {
- background-size: auto 24px;
- background-position: center;
- background-repeat: no-repeat;
- color: var(--color-primary-text) !important;
- filter: none;
-
- &:hover {
- filter: var(--nmc-color-icon) !important;
- }
- }
- }
-
- // manually set icons since nextcloud uses svg elements
- #unified-search {
- .header-menu__trigger {
- background-image: var(--icon-search-dark);
- }
- }
-
- #user-menu {
-
- .header-menu__trigger {
- background-image: var(--icon-user-dark);
- }
- }
-
- #user-menu, #unified-search {
- width: auto;
-
- .header-menu__trigger {
- background-position-x: 12px;
- font-weight: normal;
- padding: 0 12px 0 48px;
- width: auto;
- }
- }
-}
diff --git a/src/nmcheader.ts b/src/nmcheader.ts
index fec2d9bb..431f138d 100644
--- a/src/nmcheader.ts
+++ b/src/nmcheader.ts
@@ -26,26 +26,32 @@ window.addEventListener('DOMContentLoaded', function() {
const head = document.querySelector('head')
if (head !== null) {
const user = head.attributes['data-user-displayname'].value
-
- const menuButton = document.querySelector('#user-menu > a')
+ const menuButton = document.querySelector('#user-menu > button')
if (menuButton !== null) {
- menuButton.innerHTML = '' + user + ''
+ const username = document.createElement('span')
+ username.className = 'button-vue__label'
+ username.innerText = user
+ menuButton.appendChild(username)
}
}
- const searchButton = document.querySelector('#unified-search > a')
+ const searchButton = document.querySelector('button.unified-search__button')
if (searchButton !== null) {
- searchButton.innerHTML = '' + t(app, 'Search') + ''
+ const searchlabel = document.createElement('span')
+ searchlabel.className = 'button-vue__label'
+ searchlabel.innerText = t(app, 'Search')
+ searchButton.appendChild(searchlabel)
}
const menuElements = document.createElement('div')
menuElements.id = 'nmcsettings-menu'
- const userMenu = document.querySelector('nav.user-menu__nav ul')
+ const userMenu = document.querySelector('#header-menu-user-menu .header-menu__content ul')
if (userMenu !== null) {
userMenu.prepend(menuElements)
}
+ // @ts-expect-error no typescript support for extend
const View = Vue.extend(UserMenu)
new View({ propsData: { menuItems } }).$mount('#nmcsettings-menu')
})