Skip to content
This repository was archived by the owner on May 8, 2018. It is now read-only.

Commit 5a5ad01

Browse files
author
Ruben Schmidmeister
committed
Merge branch 'feature/user-dropdown'
2 parents cdba852 + e31330c commit 5a5ad01

File tree

14 files changed

+240
-12
lines changed

14 files changed

+240
-12
lines changed

‎Application/js/bootstrap/elements.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,8 @@ import { PaginatedView } from '../elements/paginated-view'
2222
import { PaginatedList } from '../elements/paginated-list'
2323
import { PaginationButton } from '../elements/pagination-button'
2424
import { ToastMessage } from '../elements/toast-message'
25+
import { UserMenu } from '../elements/user-menu'
26+
import { UserMenuButton } from '../elements/user-menu-button'
2527

2628
window.customElements.define('ajax-form', AjaxForm, { extends: 'form' })
2729
window.customElements.define('ajax-select', AjaxSelect, { extends: 'select' })
@@ -38,6 +40,9 @@ window.customElements.define('paginated-view', PaginatedView)
3840
window.customElements.define('paginated-list', PaginatedList)
3941
window.customElements.define('pagination-button', PaginationButton, { extends: 'button' })
4042

43+
window.customElements.define('user-menu', UserMenu)
44+
window.customElements.define('user-menu-button', UserMenuButton, { extends: 'button' })
45+
4146
window.customElements.define('file-upload', FileUpload)
4247
window.customElements.define('post-attachment', PostAttachment)
4348

‎Application/js/dom/custom-events.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,6 @@
1010
export const EventName = {
1111
nextPage: 'nextPage',
1212
filesAdded: 'filesAdded',
13-
formValidityChange: 'formValidityChange'
13+
formValidityChange: 'formValidityChange',
14+
userMenuToggle: 'userMenuToggle'
1415
}

‎Application/js/elements/ajax-button.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ export class AjaxButton extends HTMLButtonElement {
7878
* @returns {{}}
7979
*/
8080
get postData () {
81-
return JSON.parse(this.getAttribute('post-data'))
81+
return JSON.parse(this.getAttribute('post-data')) || {}
8282
}
8383

8484
/**

‎Application/js/elements/user-menu-button.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
/**
2+
* Copyright (c) 2016 Ruben Schmidmeister <[email protected]>
3+
*
4+
* This program is free software. It comes without any warranty, to
5+
* the extent permitted by applicable law. You can redistribute it
6+
* and/or modify it under the terms of the GNU Affero General Public License,
7+
* version 3, as published by the Free Software Foundation.
8+
*/
9+
10+
import { EventName } from '../dom/custom-events'
11+
12+
export class UserMenuButton extends HTMLButtonElement {
13+
constructor () {
14+
super()
15+
16+
this._onClick = this._onClick.bind(this)
17+
}
18+
19+
connectedCallback () {
20+
this.addEventListener('click', this._onClick)
21+
}
22+
23+
disconnectedCallback () {
24+
this.removeEventListener('click', this._onClick)
25+
}
26+
27+
_onClick () {
28+
this.dispatchEvent(new CustomEvent(EventName.userMenuToggle, { bubbles: true }))
29+
}
30+
}

‎Application/js/elements/user-menu.js

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
/**
2+
* Copyright (c) 2016 Ruben Schmidmeister <[email protected]>
3+
*
4+
* This program is free software. It comes without any warranty, to
5+
* the extent permitted by applicable law. You can redistribute it
6+
* and/or modify it under the terms of the GNU Affero General Public License,
7+
* version 3, as published by the Free Software Foundation.
8+
*/
9+
10+
import { EventName } from '../dom/custom-events'
11+
12+
export class UserMenu extends HTMLElement {
13+
constructor () {
14+
super()
15+
16+
this._onToggle = this._onToggle.bind(this)
17+
this._onBodyClick = this._onBodyClick.bind(this)
18+
}
19+
20+
connectedCallback () {
21+
this.addEventListener(EventName.userMenuToggle, this._onToggle)
22+
document.body.addEventListener('click', this._onBodyClick)
23+
}
24+
25+
disconnectedCallback () {
26+
this.removeEventListener(EventName.userMenuToggle, this._onToggle)
27+
document.body.removeEventListener('click', this._onBodyClick)
28+
}
29+
30+
_onToggle () {
31+
this.classList.toggle('-open')
32+
}
33+
34+
/**
35+
*
36+
* @param {Event} event
37+
* @private
38+
*/
39+
_onBodyClick (event) {
40+
if (this.contains(event.target)) {
41+
return
42+
}
43+
44+
this.classList.remove('-open')
45+
}
46+
}

‎Frontend/src/DataObjects/User.php

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,11 @@ public function getName()
5050
return $this->name;
5151
}
5252

53+
public function getUserAvatar(): string
54+
{
55+
return substr($this->username, 0, 2);
56+
}
57+
5358
public function getDisplayName(): string
5459
{
5560
return new DisplayName([

‎Frontend/src/Transformations/UserDropdownTransformation.php

Lines changed: 36 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -46,19 +46,50 @@ private function renderLoginLink(PageModel $model, Document $template)
4646

4747
$link->setClassName('basic-link');
4848
$link->setAttribute('href', '/login' . $query);
49-
$link->appendText('Login');
49+
$link->appendText('Sign In');
5050

5151
return $link;
5252
}
5353

5454
private function renderUserDropdown(PageModel $model, Document $template)
5555
{
56-
$username = $template->createElement('span');
56+
$userMenu = $template->createElement('user-menu');
57+
$userMenu->setClassName('user-menu');
5758

58-
$username->appendText($model->getUser()->getDisplayName());
59-
$username->setClassName('username right');
59+
$userMenuButton = $template->createElement('button');
60+
$userMenuButton->setClassName('button');
61+
$userMenuButton->setAttribute('is', 'user-menu-button');
62+
$userMenu->appendChild($userMenuButton);
6063

61-
return $username;
64+
$userAvatar = $template->createElement('span');
65+
$userAvatar->setClassName('user-avatar');
66+
$userAvatar->appendText($model->getUser()->getUserAvatar());
67+
$userMenuButton->appendChild($userAvatar);
68+
69+
$userNav = $template->createElement('nav');
70+
$userNav->setClassName('nav');
71+
$userMenu->appendChild($userNav);
72+
73+
$postsPageLink = $template->createElement('a');
74+
$postsPageLink->setClassName('user-menu-link');
75+
$postsPageLink->setAttribute('href', '/');
76+
$postsPageLink->appendText('Posts');
77+
$userNav->appendChild($postsPageLink);
78+
79+
$feedsPageLink = $template->createElement('a');
80+
$feedsPageLink->setClassName('user-menu-link');
81+
$feedsPageLink->setAttribute('href', '/feeds');
82+
$feedsPageLink->appendText('Feeds');
83+
$userNav->appendChild($feedsPageLink);
84+
85+
$logoutButton = $template->createElement('button');
86+
$logoutButton->setClassName('user-menu-link');
87+
$logoutButton->setAttribute('is', 'ajax-button');
88+
$logoutButton->setAttribute('post-uri', '/action/logout');
89+
$logoutButton->appendText('Sign Out');
90+
$userNav->appendChild($logoutButton);
91+
92+
return $userMenu;
6293
}
6394
}
6495
}

‎Showcase/index.html

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,29 @@
2929
</form>
3030
</div>
3131

32-
<a href="#login" class="basic-link right">
33-
<translate>Sign in</translate>
34-
</a>
32+
<div class="right">
33+
34+
<user-menu class="user-menu">
35+
<button class="button" is="user-menu-button">
36+
<span class="user-avatar">
37+
UN
38+
</span>
39+
</button>
40+
41+
<ul class="nav">
42+
<li class="item">
43+
<a href="/feeds" class="user-menu-link">
44+
Feeds
45+
</a>
46+
</li>
47+
48+
<li class="item">
49+
<button is="ajax-button" post-uri="/action/logout" class="user-menu-link">Sign Out</button>
50+
</li>
51+
</ul>
52+
</user-menu>
53+
54+
</div>
3555
</div>
3656
</header>
3757

‎Styles/less/_variables.less

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,15 @@
77
* version 3, as published by the Free Software Foundation.
88
*/
99

10-
@custom-tags: form-field, form-error, file-drop, file-upload, paginated-view, paginated-list, toast-message;
10+
@custom-tags:
11+
form-field,
12+
form-error,
13+
file-drop,
14+
file-upload,
15+
paginated-view,
16+
paginated-list,
17+
toast-message,
18+
user-menu;
1119

1220
@brand-blue: #231E88;
1321
@brand-green: #39965C;

‎Styles/less/components/user/all.less

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,5 @@
1+
@import 'user-avatar';
2+
@import 'user-menu';
3+
@import 'user-menu-link';
14
@import 'user-list-item';
25
@import 'user-list';

0 commit comments

Comments
 (0)