From 7f166649ee2ae0f3deaea8b4459c2fff74dce5bc Mon Sep 17 00:00:00 2001
From: Patrizio Bekerle <patrizio.bekerle@tugraz.at>
Date: Mon, 28 Oct 2019 12:54:56 +0100
Subject: [PATCH] Add layout manager to set dropdown width and did more
dropdown styling
---
packages/auth/src/vpu-auth.js | 72 +++++++++++++++++++++++++++--------
1 file changed, 57 insertions(+), 15 deletions(-)
diff --git a/packages/auth/src/vpu-auth.js b/packages/auth/src/vpu-auth.js
index 6004aa8d..d3529b6f 100644
--- a/packages/auth/src/vpu-auth.js
+++ b/packages/auth/src/vpu-auth.js
@@ -1,10 +1,11 @@
import {i18n} from './i18n.js';
-import {html, css, LitElement} from 'lit-element';
+import {html, css} from 'lit-element';
import {unsafeHTML} from 'lit-html/directives/unsafe-html.js';
import JSONLD from 'vpu-common/jsonld'
import * as commonUtils from 'vpu-common/utils';
import * as commonStyles from 'vpu-common/styles';
import 'vpu-common/vpu-icon.js';
+import VPULitElement from 'vpu-common/vpu-lit-element';
/**
* Keycloak auth web component
@@ -18,7 +19,7 @@ import 'vpu-common/vpu-icon.js';
* window.VPUPerson: Person json object of the user (optional, enable by setting the `load-person` attribute,
* which will dispatch a `vpu-auth-person-init` event when loaded)
*/
-class VPUAuth extends LitElement {
+class VPUAuth extends VPULitElement {
constructor() {
super();
this.lang = 'de';
@@ -77,12 +78,31 @@ class VPUAuth extends LitElement {
this.loadKeycloak();
}
+ const that = this;
+
this.updateComplete.then(()=>{
+ window.onresize = () => {
+ that.updateDropdownWidth();
+ };
});
document.addEventListener('click', this.closeDropdown);
}
+ /**
+ * Set the dropdown width to almost the width of the web component
+ * We need to set the width manually because a percent width is in relation to the viewport
+ */
+ updateDropdownWidth() {
+ const dropdown = this._("div.dropdown-menu");
+
+ if (!dropdown) {
+ return;
+ }
+
+ dropdown.setAttribute("style", `width: ${this.offsetWidth - 5}px`);
+ }
+
disconnectedCallback() {
document.removeEventListener('click', this.closeDropdown);
super.disconnectedCallback();
@@ -255,20 +275,39 @@ class VPUAuth extends LitElement {
.dropdown-menu {
display: none;
- min-width: 12rem;
+ min-width: 8em;
padding-top: 4px;
position: absolute;
z-index: 20;
+ border: solid 1px black;
+ border-radius: var(--vpu-border-radius);
+ overflow: hidden;
}
.dropdown-content {
background-color: white;
- border-radius: var(--vpu-border-radius);
- box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
padding-bottom: 0.5rem;
padding-top: 0.5rem;
}
+ .dropdown-content img {
+ max-width: 120px;
+ }
+
+ .menu a {
+ /*padding: 0.3em;*/
+ font-weight: 400;
+ color: #000;
+ display: block;
+ text-decoration: none;
+ }
+
+ .menu a:hover {
+ color: #E4154B;
+ }
+
+ .menu a.selected { color: white; background-color: black; }
+
.dropdown-item {
color: #4a4a4a;
display: block;
@@ -343,6 +382,7 @@ class VPUAuth extends LitElement {
if (chevron !== null) {
chevron.name = event.currentTarget.classList.contains('is-active') ? 'chevron-up' : 'chevron-down';
}
+ this.updateDropdownWidth();
}
closeDropdown() {
@@ -357,17 +397,19 @@ class VPUAuth extends LitElement {
return html`
<div class="dropdown" @click="${this.onDropdownClick}">
- <div class="dropdown-trigger">
- <span>${this.name}</span>
- <vpu-icon name="chevron-down" id="menu-chevron-icon"></vpu-icon>
- </div>
- <div class="dropdown-menu" id="dropdown-menu2" role="menu">
- <div class="dropdown-content">
- ${imageURL ? html`<img alt="" src="${imageURL}" width="40%" height="40%" class="dropdown-item">` : ''}
- <a href="#" @click="${(e) => {e.preventDefault(); this.dispatchProfileEvent();}}" class="dropdown-item">${i18n.t('profile')}</a>
- <a href="#" @click="${this.logout}" class="dropdown-item">${i18n.t('logout')}</a>
+ <div class="dropdown-trigger">
+ <span>${this.name}</span>
+ <vpu-icon name="chevron-down" id="menu-chevron-icon"></vpu-icon>
+ </div>
+ <div class="dropdown-menu" id="dropdown-menu2" role="menu">
+ <div class="dropdown-content">
+ ${imageURL ? html`<img alt="" src="${imageURL}" class="dropdown-item">` : ''}
+ <div class="menu">
+ <a href="#" @click="${(e) => {e.preventDefault(); this.dispatchProfileEvent();}}" class="dropdown-item">${i18n.t('profile')}</a>
+ <a href="#" @click="${this.logout}" class="dropdown-item">${i18n.t('logout')}</a>
+ </div>
+ </div>
</div>
- </div>
</div>
`;
}
--
GitLab