From b5ecc26ba7c63c0f0cdfe7599c2e51725e55e817 Mon Sep 17 00:00:00 2001 From: "nogafam.es Admin" Date: Sun, 24 Oct 2021 22:21:45 +0200 Subject: [PATCH] Feature: the new NavigationPanel UI for Desktop and mobile --- .../features/ui/components/columns_area.js | 35 +++++- .../ui/components/navigation_panel.js | 13 +- .../styles/mastodon/components.scss | 119 ++++++++++++++++-- 3 files changed, 147 insertions(+), 20 deletions(-) diff --git a/app/javascript/mastodon/features/ui/components/columns_area.js b/app/javascript/mastodon/features/ui/components/columns_area.js index 3af2757c3..77ac9567a 100644 --- a/app/javascript/mastodon/features/ui/components/columns_area.js +++ b/app/javascript/mastodon/features/ui/components/columns_area.js @@ -210,6 +210,30 @@ class ColumnsArea extends ImmutablePureComponent { return ; } + hideMenu() { + var width = (window.innerWidth > 0) ? window.innerWidth : screen.width; + if (width <= 720) { + document.querySelector('.columns-area__panels__pane--navigational').className += ' visible'; + var cls = document.getElementById('menu-toggle-button').className; + document.getElementById('menu-toggle-button').className = ''; + } + } + + showMenu() { + var width = (window.innerWidth > 0) ? window.innerWidth : screen.width; + if (width <= 720) { + var cls = document.querySelector('.columns-area__panels__pane--navigational').className; + if (!cls.includes(' visible')) { + cls += ' visible'; + document.getElementById('menu-toggle-button').className = ''; + } else { + cls = cls.replace(' visible', ''); + document.getElementById('menu-toggle-button').className = 'active'; + } + document.querySelector('.columns-area__panels__pane--navigational').className = cls; + } + } + render () { const { columns, children, singleColumn, isModalOpen, intl } = this.props; const { shouldAnimate, renderComposePanel } = this.state; @@ -217,8 +241,6 @@ class ColumnsArea extends ImmutablePureComponent { const columnIndex = getIndex(this.context.router.history.location.pathname); if (singleColumn) { - const floatingActionButton = shouldHideFAB(this.context.router.history.location.pathname) ? null : ; - const content = columnIndex !== -1 ? ( {links.map(this.renderView)} @@ -236,7 +258,7 @@ class ColumnsArea extends ImmutablePureComponent { return (
-
+
@@ -248,7 +270,12 @@ class ColumnsArea extends ImmutablePureComponent { {content}
- {floatingActionButton} +
); } diff --git a/app/javascript/mastodon/features/ui/components/navigation_panel.js b/app/javascript/mastodon/features/ui/components/navigation_panel.js index 0ba64ca46..f43268cf6 100644 --- a/app/javascript/mastodon/features/ui/components/navigation_panel.js +++ b/app/javascript/mastodon/features/ui/components/navigation_panel.js @@ -16,17 +16,16 @@ const NavigationPanel = () => ( +
+
+ +
+
+
- -
- - - - {showTrends &&
} - {showTrends && }
); diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 7ed8aa8ec..1a1f7a1c1 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -2046,7 +2046,7 @@ a.account__display-name { &__inner { position: fixed; - width: 285px; + width: auto; pointer-events: auto; height: 100%; } @@ -2382,7 +2382,7 @@ a.account__display-name { .floating-action-button { position: fixed; - display: flex; + display: none; justify-content: center; align-items: center; width: 3.9375rem; @@ -2436,22 +2436,123 @@ a.account__display-name { } } -@media screen and (max-width: 600px + (285px * 2) + (10px * 2)) { - .columns-area__panels__pane--navigational { - min-width: 4em !important; +.columns-area__panels__pane.columns-area__panels__pane--start.columns-area__panels__pane--navigational { + min-width: inherit !important; + + .columns-area__panels__pane__inner { + position: relative; + } +} + +#menu-toggle { + display: flex; + position: fixed; + left: 50vw; + bottom: 0; + cursor: pointer; + z-index: 1000; + + #menu-toggle-button { + display: flex; + position: relative; + bottom: -3em; + left: -3.5em; + box-shadow: 0px 0px 1em #0000004a; + border-radius: 50%; + background: #fff; + width: 7em; + height: 6em; + margin: auto 0; + } + #menu-toggle-button.active { + bottom: 1em !important; + background: darken($ui-base-color, 5%); + border: 5px solid lighten($ui-base-color, 15%); + height: 7em !important; + + .floating-action-button { + display: inherit; + margin: auto; + position: relative; + bottom: 0; + left: 0; + box-shadow: none; + background: none; + color: black; + + .fa { + color: lighten($ui-base-color, 15%); + font-size: 1.5em; + } + } + } +} + +@media screen and (min-width: 721px) { + .visible { + display: inherit; + } + #menu-toggle { + display: none; + } +} + +@media screen and (max-width: 720px) { + .visible { + display: none; + } + .columns-area__panels__pane.columns-area__panels__pane--start.columns-area__panels__pane--navigational { + position: fixed; + left: 0; + z-index: 100; + width: 100%; + background: #00000085; + pointer-events: all; .columns-area__panels__pane__inner { - width: 4em !important; - left: 0; + position: fixed; background: #fff; - z-index: 100; + bottom: 0; + width: 100%; + height: 15em; + z-index: 102; + + .navigation-panel { + display: grid !important; + grid-template-columns: repeat(4, 1fr); + } + + + .column-link { + display: flex; + + .column-link__icon { + font-size: 1.5em; + color: #a2a2a2; + } + } + + .column-link.active { + .column-link__icon { + color: lighten($ui-base-color, 30%); + } + } + + .column-link > i { + margin: auto !important; + } } + } +} + +@media screen and (max-width: 600px + (285px * 2) + (10px * 2)) { + .columns-area__panels__pane--navigational { .column-link > span { display: none; } .column-link__icon { - margin-left: 0 !important; + margin-left: 0; } }