nogafam
/
instante-social
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Feature: the new NavigationPanel UI for Desktop and mobile

This commit is contained in:
nogafam.es Admin 2021-10-24 22:21:45 +02:00
parent 34fca2f237
commit b5ecc26ba7
3 changed files with 147 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
app/javascript/mastodon/features/ui/components/columns_area.js
View File

@ -210,6 +210,30 @@ class ColumnsArea extends ImmutablePureComponent {
return <BundleColumnError {...props} />;
}
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 : <Link key='floating-action-button' to='/publish' className='floating-action-button' aria-label={intl.formatMessage(messages.publish)}><Icon id='pencil' /></Link>;
const content = columnIndex !== -1 ? (
<ReactSwipeableViews key='content' hysteresis={0.2} threshold={15} index={columnIndex} onChangeIndex={this.handleSwipe} onTransitionEnd={this.handleAnimationEnd} animateTransitions={shouldAnimate} springConfig={{ duration: '400ms', delay: '0s', easeFunction: 'ease' }} style={{ height: '100%' }} disabled={disableSwiping}>
{links.map(this.renderView)}
@ -236,7 +258,7 @@ class ColumnsArea extends ImmutablePureComponent {
return (
<div className='columns-area__panels'>
<div className='columns-area__panels__pane columns-area__panels__pane--start columns-area__panels__pane--navigational'>
<div onClick={this.hideMenu} className='columns-area__panels__pane columns-area__panels__pane--start columns-area__panels__pane--navigational visible'>
<div className='columns-area__panels__pane__inner'>
<NavigationPanel />
</div>
@ -248,7 +270,12 @@ class ColumnsArea extends ImmutablePureComponent {
{content}
</div>
{floatingActionButton}
<div id="menu-toggle">
<div onClick={this.showMenu} id="menu-toggle-button">
<Link key='floating-action-button' to='/publish' className='floating-action-button' aria-label={intl.formatMessage(messages.publish)}>
<Icon id='flash' /></Link>
</div>
</div>
</div>
);
}

13
app/javascript/mastodon/features/ui/components/navigation_panel.js
View File

@ -16,17 +16,16 @@ const NavigationPanel = () => (
<NavLink className='column-link column-link--transparent' to='/public/local' data-preview-title-id='column.community' data-preview-icon='users' ><FormattedMessage id='tabs_bar.local_timeline' defaultMessage='Local' /><Icon className='column-link__icon' id='users' fixedWidth /></NavLink>
<NavLink className='column-link column-link--transparent' exact to='/public' data-preview-title-id='column.public' data-preview-icon='globe' ><FormattedMessage id='tabs_bar.federated_timeline' defaultMessage='Federated' /><Icon className='column-link__icon' id='globe' fixedWidth /></NavLink>
<NavLink className='column-link column-link--transparent' to='/conversations'><FormattedMessage id='navigation_bar.direct' defaultMessage='Direct messages' /><Icon className='column-link__icon' id='envelope' fixedWidth /></NavLink>
<div className='flex-spacer' />
<div className='flex-spacer' />
<NavLink className='column-link column-link--transparent' to='/favourites'><FormattedMessage id='navigation_bar.favourites' defaultMessage='Favourites' /><Icon className='column-link__icon' id='star' fixedWidth /></NavLink>
<a className='column-link column-link--transparent' href='/settings/preferences'><Icon className='column-link__icon' id='cog' fixedWidth /><FormattedMessage id='navigation_bar.preferences' defaultMessage='Preferences' /></a>
<div className='flex-spacer' />
<div className='flex-spacer' />
<NavLink className='column-link column-link--transparent' to='/bookmarks'><FormattedMessage id='navigation_bar.bookmarks' defaultMessage='Bookmarks' /><Icon className='column-link__icon' id='bookmark' fixedWidth /></NavLink>
<div className='flex-spacer' />
<ListPanel />
<hr />
<a className='column-link column-link--transparent' href='/settings/preferences'><Icon className='column-link__icon' id='cog' fixedWidth /><FormattedMessage id='navigation_bar.preferences' defaultMessage='Preferences' /></a>
{showTrends && <div className='flex-spacer' />}
{showTrends && <TrendsContainer />}
</div>
);

119
app/javascript/styles/mastodon/components.scss
View File

@ -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;
}
}