Skip to content

Commit

Permalink
assets/userindicator: update template, add styles and js functionalit…
Browse files Browse the repository at this point in the history
…y for new user indicator
  • Loading branch information
philli-m authored and goapunk committed Dec 28, 2023
1 parent d1fb1ac commit 228ebe5
Show file tree
Hide file tree
Showing 12 changed files with 166 additions and 32 deletions.
3 changes: 3 additions & 0 deletions changelog/7840.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
### Added

- new user indicator for user side pages with custom js functionality mimicing the language dropdown functionality from the BO stylguide useing our own vanilla js #7840
Original file line number Diff line number Diff line change
Expand Up @@ -28,16 +28,14 @@
{% endblock %}

{% block breadcrumbs %}
<div id="layout-grid__area--contentheader">
<div id="content-header">
<nav class="breadcrumb" aria-label="{% translate 'You are here:' %}">
<ol>
<li><a href="/">meinBerlin</a></li>
<li><a href="{% url 'meinberlin_plans:plan-list' %}">{% translate 'Project Overview' %}</a></li>
<li class="active" aria-current="page">{{ project.name|truncatechars:50 }}</li>
</ol>
</nav>
</div>
<div id="content-header">
<nav class="breadcrumb" aria-label="{% translate 'You are here:' %}">
<ol>
<li><a href="/">meinBerlin</a></li>
<li><a href="{% url 'meinberlin_plans:plan-list' %}">{% translate 'Project Overview' %}</a></li>
<li class="active" aria-current="page">{{ project.name|truncatechars:50 }}</li>
</ol>
</nav>
</div>
{% endblock %}

Expand Down
63 changes: 63 additions & 0 deletions meinberlin/apps/users/assets/user_indicator.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
function init () {
const userIndicator = document.querySelectorAll('#js-user-indicator')
if (userIndicator) {
let closeTimeout
const trigger = document.querySelector('#js-user-indicator-trigger')
const dropdown = document.querySelector('#js-user-indicator-dropdown')
const close = document.querySelector('#js-user-indicator-close')
const container = document.querySelector('#js-user-indicator')

function closeDropdown () {
document.removeEventListener('click', outsideClickListener)
dropdown.style.display = 'none'
container.classList.remove('is-open')
trigger.setAttribute('aria-expanded', false)
clearTimeout(closeTimeout)
}

function openDropdown () {
if (container.classList.contains('is-open')) {
closeDropdown()
} else {
dropdown.style.display = 'block'
container.classList.add('is-open')
trigger.setAttribute('aria-expanded', true)

document.addEventListener('click', outsideClickListener)
}
}

function outsideClickListener (e) {
if (!container.contains(e.target) && e.target !== close) {
closeDropdown()
}
}

trigger.addEventListener('click', function (event) {
event.preventDefault()
openDropdown()
})

close.addEventListener('click', function (event) {
event.stopPropagation() // Prevent the event from bubbling up to the document
closeDropdown()
})

dropdown.addEventListener('keyup', function (e) {
if (e.keyCode === 27) {
closeDropdown()
trigger.focus()
}
})

dropdown.addEventListener('focusout', function (e) {
closeTimeout = setTimeout(function () {
if (!dropdown.contains(e.relatedTarget)) {
closeDropdown()
}
}, 10)
})
}
}

document.addEventListener('DOMContentLoaded', init, false)
Original file line number Diff line number Diff line change
@@ -1,32 +1,29 @@
{% load i18n static %}

{% block extra_js %}
<script defer src="{% static 'user_menu.js' %}"></script>
{% endblock %}

<div class="usermenu__container">
<div class="usermenu__wrapper">
<div class="user-indicator__container">
<div id="js-user-indicator" class="user-indicator__wrapper">
{% if request.user.is_authenticated %}
<button
class="js-usermenu-btn"
id="js-user-indicator-trigger"
type="button"
aria-haspopup="menu"
aria-controls="user-actions"
aria-controls="js-user-indicator-dropdown"
tabindex="0">
<i class="fas fa-user text--color-primary" aria-hidden="true"></i>
{{ request.user.username }}
</button>
<div role="menu" class="dropdown js-usermenu" id="user-actions" aria-label="Login of Register" tabindex="-1">
<div role="menu" class="dropdown" id="js-user-indicator-dropdown" aria-label="Login of Register" tabindex="-1">
<ul class="list--clean">
<li ><a href="{% url 'account' %}" role="menuitem">{% translate "Account Settings" %}</a></li>
<li><button id="js-user-indicator-close" type="button" class="button button--close user-indicator__close" title="{% translate 'close' %}" aria-label="{% translate 'menu close' %}"></button></li>
<li><a href="{% url 'account' %}" role="menuitem">{% translate "Account Settings" %}</a></li>
{% for organisation in request.user.organisations %}
<li><a href="{% url 'a4dashboard:project-list' organisation_slug=organisation.slug %}" role="menuitem">{{ organisation.name }}</a></li>
{% endfor %}
{% if request.user.is_superuser %}
<li><a href="{% url 'meinberlin_platformemails:create' %}" role="menuitem">{% translate "Platform Email" %}</a></li>
{% endif %}
<li>
<form class="u-inline" action="{% url 'account_logout' %}" method="post" aria-label="{% translate 'Logout' %}" role="menuitem">
<form class="block--nogap text--color-dark" action="{% url 'account_logout' %}" method="post" aria-label="{% translate 'Logout' %}" role="menuitem">
{% csrf_token %}
<input type="hidden" name="next" value="{{ redirect_field_value }}">
<button type="submit">{% translate "Logout" %}</button>
Expand All @@ -36,19 +33,19 @@
</div>
{% else %}
<button
class="js-usermenu-btn"
id="js-user-indicator-trigger"
type="button"
aria-haspopup="menu"
aria-controls="login-register-menu"
aria-controls="js-user-indicator-dropdown"
tabindex="0">
<i class="fas fa-user text--color-primary" aria-hidden="true"></i>
{% translate "Login" %}
</button>
<div role="menu" class="dropdown js-usermenu" id="login-register-menu" aria-label="Login of Register" tabindex="-1">
<div role="menu" class="dropdown" id="js-user-indicator-dropdown" aria-label="Login of Register" tabindex="-1">
<ul class="list--clean">
<li><button type="button" class="button button--close user-indicator__close" title="{% translate 'close' %}" aria-label="{% translate 'menu close' %}"></button></li>
<li><button id="js-user-indicator-close" type="button" class="button button--close user-indicator__close" title="{% translate 'close' %}" aria-label="{% translate 'menu close' %}"></button></li>
<li>
<a href="{% url 'account_login' %}?next={{ redirect_field_value|urlencode }}" role="menuitem">{% translate "Login" %}</a>
<a class="button button--light" href="{% url 'account_login' %}?next={{ redirect_field_value|urlencode }}" role="menuitem">{% translate "Login" %}</a>
</li>
<li>
<a href="{% url 'account_signup' %}?next={{ redirect_field_value|urlencode }}" role="menuitem">{% translate "Register" %}</a>
Expand Down
1 change: 1 addition & 0 deletions meinberlin/assets/js/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import 'select2' // used to select projects in containers

import '../../apps/actions/assets/timestamps.js'
import '../../apps/newsletters/assets/dynamic_fields.js'
import '../../apps/users/assets/user_indicator.js'

// map search function
import 'adhocracy4/adhocracy4/maps/static/a4maps/a4maps_address.js'
Expand Down
62 changes: 62 additions & 0 deletions meinberlin/assets/scss/components_user_facing/_user_indicator.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
// styles copied from their stylguide from #layout-grid__area--contentheader
.user-indicator__container {
grid-area: contentheader;
grid-column: mainbar;
display: flex;
flex-direction: column;
position: relative;
z-index: 1;

&:before {
position: absolute;
background-color: $secondary;
inset: 0 0 0 -9999px;
display: block;
content: "";
z-index: -1;
box-shadow: 9999px 0 0 $secondary;
border-left: 9999px solid $secondary;
}

button {
padding: .5em 0;
}

[role="menu"] {
display: none;
}

[aria-expanded="true"] + [role="menu"] {
display: block;
}

// end of copied styling

.user-indicator__wrapper {
@extend .content-language-select;

color: var(--color-white);

> .dropdown .button {
width: 100%;
}

// copied styles
@media print, (width <= 73.8125rem) {
margin-left: -12px;
margin-right: -12px;
width: auto;
padding-left: 12px;
padding-right: 12px
}
}
}

.button--close.user-indicator__close {
text-align: end;
min-height: auto;

&:after {
font-size: 1em;
}
}
2 changes: 1 addition & 1 deletion meinberlin/assets/scss/style_dashboard.scss
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
@import "components/dialogue_box";
@import "components/doc_toc";
@import "components/document";
@import "components/dropdown";
@import "components_dashboard/dropdown";
@import "components/dsgvo_video_embed";
@import "components/embed_layout";
@import "components/embed_status";
Expand Down
3 changes: 1 addition & 2 deletions meinberlin/assets/scss/style_user_facing.scss
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@
@import "~bootstrap/scss/variables"; // to be deleted after menues changes
@import "~bootstrap/scss/maps"; // to be deleted after menues changes
@import "~bootstrap/scss/mixins"; // to be deleted after menues changes
@import "~bootstrap/scss/dropdown"; // to be deleted after menues changes

@import "components/a4-comments";
@import "components/action";
Expand All @@ -23,7 +22,6 @@
@import "components/dialogue_box";
@import "components/doc_toc";
@import "components/document";
@import "components/dropdown";
@import "components/dsgvo_video_embed";
@import "components/embed_layout";
@import "components/embed_status";
Expand Down Expand Up @@ -65,3 +63,4 @@
@import "components_user_facing/searchform-slot";
@import "components_user_facing/select";
@import "components_user_facing/tab";
@import "components_user_facing/user_indicator";
9 changes: 9 additions & 0 deletions meinberlin/assets/scss/styles_user_facing/_utility.scss
Original file line number Diff line number Diff line change
Expand Up @@ -18,3 +18,12 @@ hr.no-space {
.is-hidden {
display: none;
}

// BO defines this as black so overwritting
.text--color-primary {
color: $primary;
}

.text--color-dark {
color: var(--color-black);
}
1 change: 1 addition & 0 deletions meinberlin/templates/a4dashboard/base_dashboard.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@

{% block header %}
{% endblock %}
{% block menu %}{% endblock %}

{% block content %}

Expand Down
7 changes: 4 additions & 3 deletions meinberlin/templates/base.html
Original file line number Diff line number Diff line change
Expand Up @@ -52,9 +52,10 @@
{% endblock %}
<!-- FIXME we don't currently want their grid in dashboard however this does not work if someone names wagtail, project or plan page 'dashboard' -->
<main role="main" tabindex="-1" {% if '/dashboard' not in request.path or '/components' not in request.path %} id="layout-grid" {% endif %}>

{% block breadcrumbs %}{% endblock %}
{% block menu %}{% userindicator %}{% endblock %}
<div id="layout-grid__area--contentheader">
{% block breadcrumbs %}{% endblock %}
{% block menu %}{% userindicator %}{% endblock %}
</div>

{% if messages %}
<ul class="messages">
Expand Down

0 comments on commit 228ebe5

Please sign in to comment.