[CH] Add local and fediverse timeline in thumb menu, move serach icon…

… in top navigation (#13) * Add search Icon in tabs_bar, remove search from thumbs bar * Add local et fediverse timeline access in thumb menu * Change buttons order Co-authored-by: clovis <[email protected]>
BDX-town · May 5, 2022 · af01547 · af01547
1 parent 1210ab5
commit af01547
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 26 deletions.
diff --git a/app/soapbox/components/thumb_navigation.js b/app/soapbox/components/thumb_navigation.js
@@ -9,7 +9,6 @@ import { NavLink, withRouter } from 'react-router-dom';
 import { getSoapboxConfig } from 'soapbox/actions/soapbox';
 import Icon from 'soapbox/components/icon';
 import IconWithCounter from 'soapbox/components/icon_with_counter';
-import { isStaff } from 'soapbox/utils/accounts';
 import { getFeatures } from 'soapbox/utils/features';
 
 const mapStateToProps = state => {
@@ -19,6 +18,7 @@ const mapStateToProps = state => {
   const instance = state.get('instance');
 
   return {
+    instance,
     account: state.getIn(['accounts', me]),
     logo: getSoapboxConfig(state).get('logo'),
     notificationCount: state.getIn(['notifications', 'unread']),
@@ -40,10 +40,11 @@ class ThumbNavigation extends React.PureComponent {
     chatsCount: PropTypes.number,
     features: PropTypes.object.isRequired,
     location: PropTypes.object,
+    instance: PropTypes.object.isRequired,
   }
 
   render() {
-    const { account, notificationCount, chatsCount, dashboardCount, location, features } = this.props;
+    const { account, notificationCount, chatsCount, location, features, instance } = this.props;
 
     return (
       <div className='thumb-navigation'>
@@ -57,28 +58,33 @@ class ThumbNavigation extends React.PureComponent {
           </span>
         </NavLink>
 
-        <NavLink to='/search' className='thumb-navigation__link'>
-          <Icon
-            src={require('@tabler/icons/icons/search.svg')}
-            className={classNames({ 'svg-icon--active': location.pathname === '/search' })}
-          />
-          <span>
-            <FormattedMessage id='navigation.search' defaultMessage='Search' />
-          </span>
-        </NavLink>
+        {features.federating ? (
+          <NavLink to='/timeline/local' className='thumb-navigation__link'>
+            <Icon
+              src={require('@tabler/icons/icons/users.svg')}
+              className={classNames({ 'svg-icon--active': location.pathname === '/timeline/local' })}
+            />
+            <span>
+              {instance.get('title')}
+            </span>
+          </NavLink>
+        ) : (
+          <NavLink to='/timeline/local' className='thumb-navigation__link'>
+            <Icon src={require('@tabler/icons/icons/world.svg')} />
+            <span>
+              <FormattedMessage id='tabs_bar.all' defaultMessage='All' />
+            </span>
+          </NavLink>
+        )}
 
-        {account && (
-          <NavLink to='/notifications' className='thumb-navigation__link'>
-            <IconWithCounter
-              src={require('@tabler/icons/icons/bell.svg')}
-              className={classNames({
-                'svg-icon--active': location.pathname === '/notifications',
-                'svg-icon--unread': notificationCount > 0,
-              })}
-              count={notificationCount}
+        {features.federating && (
+          <NavLink to='/timeline/fediverse' className='thumb-navigation__link'>
+            <Icon
+              src={require('icons/fediverse.svg')}
+              className={classNames('svg-icon--fediverse', { 'svg-icon--active': location.pathname === '/timeline/fediverse' })}
             />
             <span>
-              <FormattedMessage id='navigation.notifications' defaultMessage='Notifications' />
+              <FormattedMessage id='tabs_bar.fediverse' defaultMessage='Fediverse' />
             </span>
           </NavLink>
         )}
@@ -108,17 +114,23 @@ class ThumbNavigation extends React.PureComponent {
           )
         )}
 
-        {(account && isStaff(account)) && (
-          <NavLink key='dashboard' to='/admin' className='thumb-navigation__link'>
+
+        {account && (
+          <NavLink to='/notifications' className='thumb-navigation__link'>
             <IconWithCounter
-              src={location.pathname.startsWith('/admin') ? require('icons/dashboard-filled.svg') : require('@tabler/icons/icons/dashboard.svg')}
-              count={dashboardCount}
+              src={require('@tabler/icons/icons/bell.svg')}
+              className={classNames({
+                'svg-icon--active': location.pathname === '/notifications',
+                'svg-icon--unread': notificationCount > 0,
+              })}
+              count={notificationCount}
             />
             <span>
-              <FormattedMessage id='navigation.dashboard' defaultMessage='Dashboard' />
+              <FormattedMessage id='navigation.notifications' defaultMessage='Notifications' />
             </span>
           </NavLink>
         )}
+
       </div>
     );
   }

diff --git a/app/soapbox/features/ui/components/tabs_bar.js b/app/soapbox/features/ui/components/tabs_bar.js
@@ -140,6 +140,14 @@ class TabsBar extends React.PureComponent {
                   <button className='tabs-bar__sidebar-btn' onClick={onOpenSidebar} />
                   <ProfileDropdown account={account} size={34} />
                 </div>
+
+                <NavLink to='/search' className='tabs-bar__search'>
+                  <Icon
+                    src={require('@tabler/icons/icons/search.svg')}
+                    className={classNames({ 'svg-icon--active': location.pathname === '/search' })}
+                  />
+                </NavLink>
+
                 <button className='tabs-bar__button-compose button' onClick={onOpenCompose} aria-label={intl.formatMessage(messages.post)}>
                   <span>{intl.formatMessage(messages.post)}</span>
                 </button>

diff --git a/app/styles/components/icon.scss b/app/styles/components/icon.scss
@@ -13,11 +13,19 @@
     transition: 0.2s;
   }
 
+  &.svg-icon--fediverse {
+    color: var(--primary-text-color--faint);
+  }
+
   &--active {
     &.svg-icon--home svg {
       fill: currentColor;
     }
 
+    &.svg-icon--fediverse {
+      color: var(--primary-text-color);
+    }
+
     svg.icon-tabler-search,
     svg.icon-tabler-code {
       stroke-width: 2.3px;

diff --git a/app/styles/components/tabs-bar.scss b/app/styles/components/tabs-bar.scss
@@ -110,6 +110,28 @@
     }
   }
 
+  &__search {
+    display: none;
+    color: var(--foreground-color);
+    margin-left: 20px;
+
+    .svg-icon {
+      width: 24px;
+      height: 24px;
+      &--active svg{
+        fill: var(--foreground-color) !important;
+      }
+    }
+
+    @media screen and (max-width: 895px) {
+      display: block;
+    }
+
+    @media screen and (max-width: 450px) {
+      margin-left: auto;
+    }
+  }
+
   &__sidebar-btn {
     display: block;
     position: absolute;