diff options
author | Kim <1877318+kimsible@users.noreply.github.com> | 2020-08-17 10:17:54 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-08-17 10:17:54 +0200 |
commit | 245b9d27bc10a4d8c8eb64add06b653f12763f56 (patch) | |
tree | 4c48717c07d15e08ef36ca600c967b4982a7d03d /client/src/app/core/menu | |
parent | 30d55e75cae1adec3fc43c84691975bf8b97db34 (diff) | |
download | PeerTube-245b9d27bc10a4d8c8eb64add06b653f12763f56.tar.gz PeerTube-245b9d27bc10a4d8c8eb64add06b653f12763f56.tar.zst PeerTube-245b9d27bc10a4d8c8eb64add06b653f12763f56.zip |
On touchscreens add content overlay for opened menu (#3088)
* Overflow:hidden on touchscreen when modal-open
* Do not display menu by default on touchscreens
* Add content overlay on touchscreens when menu is opened
* Fix zIndex overlay for search infos
* On touchscreens close menu on swipe left
Co-authored-by: kimsible <kimsible@users.noreply.github.com>
Diffstat (limited to 'client/src/app/core/menu')
-rw-r--r-- | client/src/app/core/menu/menu.service.ts | 37 |
1 files changed, 30 insertions, 7 deletions
diff --git a/client/src/app/core/menu/menu.service.ts b/client/src/app/core/menu/menu.service.ts index ef5271f97..671ee3e4f 100644 --- a/client/src/app/core/menu/menu.service.ts +++ b/client/src/app/core/menu/menu.service.ts | |||
@@ -12,22 +12,45 @@ export class MenuService { | |||
12 | constructor ( | 12 | constructor ( |
13 | private screenService: ScreenService | 13 | private screenService: ScreenService |
14 | ) { | 14 | ) { |
15 | // Do not display menu on small screens | 15 | // Do not display menu on small or touch screens |
16 | if (this.screenService.isInSmallView()) { | 16 | if (this.screenService.isInSmallView() || this.screenService.isInTouchScreen()) { |
17 | this.isMenuDisplayed = false | 17 | this.setMenuDisplay(false) |
18 | } | 18 | } |
19 | 19 | ||
20 | fromEvent(window, 'resize') | 20 | this.handleWindowResize() |
21 | .pipe(debounceTime(200)) | ||
22 | .subscribe(() => this.onResize()) | ||
23 | } | 21 | } |
24 | 22 | ||
25 | toggleMenu () { | 23 | toggleMenu () { |
26 | this.isMenuDisplayed = !this.isMenuDisplayed | 24 | this.setMenuDisplay(!this.isMenuDisplayed) |
27 | this.isMenuChangedByUser = true | 25 | this.isMenuChangedByUser = true |
28 | } | 26 | } |
29 | 27 | ||
28 | setMenuDisplay (display: boolean) { | ||
29 | this.isMenuDisplayed = display | ||
30 | |||
31 | // On touch screens, lock body scroll and display content overlay when memu is opened | ||
32 | if (this.screenService.isInTouchScreen()) { | ||
33 | if (this.isMenuDisplayed) { | ||
34 | document.body.classList.add('menu-open') | ||
35 | this.screenService.onFingerSwipe('left', () => { this.setMenuDisplay(false) }) | ||
36 | } else { | ||
37 | document.body.classList.remove('menu-open') | ||
38 | } | ||
39 | } | ||
40 | } | ||
41 | |||
30 | onResize () { | 42 | onResize () { |
31 | this.isMenuDisplayed = window.innerWidth >= 800 && !this.isMenuChangedByUser | 43 | this.isMenuDisplayed = window.innerWidth >= 800 && !this.isMenuChangedByUser |
32 | } | 44 | } |
45 | |||
46 | private handleWindowResize () { | ||
47 | // On touch screens, do not handle window resize event since opened menu is handled with a content overlay | ||
48 | if (this.screenService.isInTouchScreen()) { | ||
49 | return | ||
50 | } | ||
51 | |||
52 | fromEvent(window, 'resize') | ||
53 | .pipe(debounceTime(200)) | ||
54 | .subscribe(() => this.onResize()) | ||
55 | } | ||
33 | } | 56 | } |