~cytrogen/masto-fe

40b69cc1cd62fa57047905a6999985ae6c183f6c — Stanislas Signoud 2 years ago cb9f960
Add an explanation banner on switching to single column mode (#26019)

M app/javascript/mastodon/features/ui/components/navigation_panel.jsx => app/javascript/mastodon/features/ui/components/navigation_panel.jsx +11 -5
@@ 31,6 31,7 @@ const messages = defineMessages({
  about: { id: 'navigation_bar.about', defaultMessage: 'About' },
  search: { id: 'navigation_bar.search', defaultMessage: 'Search' },
  advancedInterface: { id: 'navigation_bar.advanced_interface', defaultMessage: 'Open in advanced web interface' },
  openedInClassicInterface: { id: 'navigation_bar.opened_in_classic_interface', defaultMessage: 'Posts, accounts, and other specific pages are opened by default in the classic web interface.' },
});

class NavigationPanel extends Component {


@@ 57,12 58,17 @@ class NavigationPanel extends Component {
        <div className='navigation-panel__logo'>
          <Link to='/' className='column-link column-link--logo'><WordmarkLogo /></Link>

          {transientSingleColumn && (
            <a href={`/deck${location.pathname}`} className='button button--block'>
              {intl.formatMessage(messages.advancedInterface)}
            </a>
          {transientSingleColumn ? (
            <div class='switch-to-advanced'>
              {intl.formatMessage(messages.openedInClassicInterface)}
              {" "}
              <a href={`/deck${location.pathname}`} class='switch-to-advanced__toggle'>
                {intl.formatMessage(messages.advancedInterface)}
              </a>
            </div>
          ) : (
            <hr />
          )}
          <hr />
        </div>

        {signedIn && (

M app/javascript/mastodon/locales/en.json => app/javascript/mastodon/locales/en.json +1 -0
@@ 411,6 411,7 @@
  "navigation_bar.lists": "Lists",
  "navigation_bar.logout": "Logout",
  "navigation_bar.mutes": "Muted users",
  "navigation_bar.opened_in_classic_interface": "Posts, accounts, and other specific pages are opened by default in the classic web interface.",
  "navigation_bar.personal": "Personal",
  "navigation_bar.pins": "Pinned posts",
  "navigation_bar.preferences": "Preferences",

M app/javascript/mastodon/locales/fr.json => app/javascript/mastodon/locales/fr.json +1 -0
@@ 409,6 409,7 @@
  "navigation_bar.lists": "Listes",
  "navigation_bar.logout": "Déconnexion",
  "navigation_bar.mutes": "Comptes masqués",
  "navigation_bar.opened_in_classic_interface": "Les messages, les comptes et les pages spécifiques sont ouvertes dans l’interface classique.",
  "navigation_bar.personal": "Personnel",
  "navigation_bar.pins": "Messages épinglés",
  "navigation_bar.preferences": "Préférences",

M app/javascript/styles/mastodon/components.scss => app/javascript/styles/mastodon/components.scss +16 -0
@@ 3270,6 3270,22 @@ $ui-header-height: 55px;
  border-color: $ui-highlight-color;
}

.switch-to-advanced {
  color: $classic-primary-color;
  background-color: $classic-base-color;
  padding: 15px;
  border-radius: 4px;
  margin-top: 4px;
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 18px;

  .switch-to-advanced__toggle {
    color: $ui-button-tertiary-color;
    font-weight: bold;
  }
}

.column-link {
  background: lighten($ui-base-color, 8%);
  color: $primary-text-color;