From 6b4b279141d35453eb9dd48d7919782c1774f400 Mon Sep 17 00:00:00 2001 From: Kris Date: Fri, 14 Oct 2022 09:32:02 -0400 Subject: [PATCH] UX: horitzontal scroll controls for new user nav (#18583) --- .../components/user-nav/preferences-nav.hbs | 106 ++++++++++++++++++ .../components/user-nav/preferences-nav.js | 80 +++++++++++++ .../discourse/app/templates/preferences.hbs | 88 +-------------- .../stylesheets/common/base/new-user.scss | 77 ++++++++++++- app/assets/stylesheets/mobile/new-user.scss | 5 - 5 files changed, 266 insertions(+), 90 deletions(-) create mode 100644 app/assets/javascripts/discourse/app/components/user-nav/preferences-nav.hbs create mode 100644 app/assets/javascripts/discourse/app/components/user-nav/preferences-nav.js diff --git a/app/assets/javascripts/discourse/app/components/user-nav/preferences-nav.hbs b/app/assets/javascripts/discourse/app/components/user-nav/preferences-nav.hbs new file mode 100644 index 00000000000..a7fdca93e40 --- /dev/null +++ b/app/assets/javascripts/discourse/app/components/user-nav/preferences-nav.hbs @@ -0,0 +1,106 @@ +{{!-- template-lint-disable no-down-event-binding --}} + +
+ {{#if this.hasScroll}} + + {{d-icon "chevron-left"}} + + {{/if}} + + + + {{#if this.hasScroll}} + + {{d-icon "chevron-right"}} + + {{/if}} +
diff --git a/app/assets/javascripts/discourse/app/components/user-nav/preferences-nav.js b/app/assets/javascripts/discourse/app/components/user-nav/preferences-nav.js new file mode 100644 index 00000000000..1c013766bd1 --- /dev/null +++ b/app/assets/javascripts/discourse/app/components/user-nav/preferences-nav.js @@ -0,0 +1,80 @@ +import Component from "@glimmer/component"; +import { action } from "@ember/object"; +import { bind } from "discourse-common/utils/decorators"; +import { inject as service } from "@ember/service"; +import { tracked } from "@glimmer/tracking"; + +export default class UserNavPreferencesNav extends Component { + @service site; + @tracked hasScroll; + @tracked hideRightScroll = false; + @tracked hideLeftScroll = true; + scrollInterval; + + @bind + scrollToActive() { + document + .querySelector(".user-navigation-secondary a.active") + .scrollIntoView({ inline: "center" }); + } + + @bind + checkScroll(element) { + if (this.site.mobileView) { + return; + } + + this.watchScroll(element); + return (this.hasScroll = + element.target.scrollWidth > element.target.offsetWidth); + } + + @bind + stopScroll() { + clearInterval(this.scrollInterval); + } + + @bind + watchScroll(element) { + if (this.site.mobileView) { + return; + } + + if ( + element.target.offsetWidth + element.target.scrollLeft === + element.target.scrollWidth + ) { + this.hideRightScroll = true; + clearInterval(this.scrollInterval); + } else { + this.hideRightScroll = false; + } + + if (element.target.scrollLeft === 0) { + this.hideLeftScroll = true; + clearInterval(this.scrollInterval); + } else { + this.hideLeftScroll = false; + } + } + + @action + horizScroll(element) { + let scrollSpeed = 50; + let siblingTarget = element.target.previousElementSibling; + + if (element.target.dataset.direction === "left") { + scrollSpeed = scrollSpeed * -1; + siblingTarget = element.target.nextElementSibling; + } + + this.scrollInterval = setInterval(function () { + siblingTarget.scrollLeft += scrollSpeed; + }, 50); + + this.scrollTimer; + + element.target.addEventListener("mouseup", this.stopScroll); + element.target.addEventListener("mouseleave", this.stopScroll); + } +} diff --git a/app/assets/javascripts/discourse/app/templates/preferences.hbs b/app/assets/javascripts/discourse/app/templates/preferences.hbs index 32ea2bf1b52..acd0dd7e4b4 100644 --- a/app/assets/javascripts/discourse/app/templates/preferences.hbs +++ b/app/assets/javascripts/discourse/app/templates/preferences.hbs @@ -1,88 +1,12 @@ {{#if this.currentUser.redesigned_user_page_nav_enabled}} -
-
    - -
  • - - {{d-icon "lock"}} - {{i18n "user.preferences_nav.security"}} - -
    • -
  • - - {{d-icon "user"}} - {{i18n "user.preferences_nav.profile"}} - -
    • -
  • - - {{d-icon "envelope"}} - {{i18n "user.preferences_nav.emails"}} - -
    • -
  • - - {{d-icon "bell"}} - {{i18n "user.preferences_nav.notifications"}} - -
    • - {{#if this.model.can_change_tracking_preferences}} -
  • - - {{d-icon "folder"}} - {{i18n "user.preferences_nav.categories"}} - -
    • - {{/if}} -
  • - - {{d-icon "users"}} - {{i18n "user.preferences_nav.users"}} - -
    • - {{#if (and this.model.can_change_tracking_preferences this.siteSettings.tagging_enabled)}} -
  • - - {{d-icon "tag"}} - {{i18n "user.preferences_nav.tags"}} - -
    • - {{/if}} -
  • - - {{d-icon "desktop"}} - {{i18n "user.preferences_nav.interface"}} - -
    • - - {{#if this.siteSettings.enable_experimental_sidebar_hamburger}} -
  • - - {{d-icon "bars"}} - {{i18n "user.preferences_nav.sidebar"}} - -
    • - {{/if}} - - - -
  • - - {{d-icon "mobile-alt"}} - {{i18n "user.preferences_nav.apps"}} - -
    • - - -
-
+ {{else}} diff --git a/app/assets/stylesheets/common/base/new-user.scss b/app/assets/stylesheets/common/base/new-user.scss index f50fe7e36bb..7c4823718c6 100644 --- a/app/assets/stylesheets/common/base/new-user.scss +++ b/app/assets/stylesheets/common/base/new-user.scss @@ -2,10 +2,12 @@ margin-top: -15px; // temp, can remove margin from sibling element after nav finalized .user-navigation { --user-navigation__border-width: 4px; + &.user-navigation-primary { + border-bottom: 1px solid var(--primary-low); + } .nav-pills { width: 100%; margin: 0; - border-bottom: 1px solid var(--primary-low); .d-icon { font-size: var(--font-down-1); } @@ -80,9 +82,12 @@ .user-navigation-secondary { --user-navigation__border-width: 2px; + position: relative; + display: flex; min-width: 0; margin: 0.5em 0; gap: 0 0.5em; + border-bottom: 1px solid var(--primary-low); .select-kit .select-kit-header { height: 100%; @@ -103,18 +108,84 @@ } } + .nav-overflow__scroll-right, + .nav-overflow__scroll-left { + --fade-width: 20px; + opacity: 1; + position: absolute; + z-index: 2; + background-color: var(--secondary); + top: 0; + bottom: 0; + display: flex; + align-items: center; + transition: opacity 0.25s; + .d-icon { + pointer-events: none; + margin-bottom: 0.2em; + color: var(--tertiary); + } + &.transparent { + // hiding with opacity so we can transition visibility + opacity: 0; + pointer-events: none; + } + } + + .nav-overflow__scroll-right { + right: 0; + &:before { + content: ""; + margin-left: -1.5em; + height: 100%; + width: 1.5em; + background: linear-gradient( + to left, + rgba(var(--secondary-rgb), 1), + rgba(var(--secondary-rgb), 0) + ); + } + } + + .nav-overflow__scroll-left { + left: 0; + &:after { + content: ""; + margin-right: -1.5em; + height: 100%; + width: 1.5em; + background: linear-gradient( + to right, + rgba(var(--secondary-rgb), 1), + rgba(var(--secondary-rgb), 0) + ); + } + } + .nav-pills { flex: 1 1 auto; font-size: var(--font-down-1); - flex-wrap: wrap; justify-content: flex-start; + overflow: auto; + position: relative; + scroll-behavior: smooth; + + // hides scrollbars, but allows mouse scrolling + scrollbar-width: none; + &::-webkit-scrollbar { + height: 0; + } li { - flex: 1 1 auto; + flex: 1 0 auto; a { padding: 0.5em 0.5em calc(0.5em + var(--user-navigation__border-width)); + + span { + text-overflow: unset; + } } } } diff --git a/app/assets/stylesheets/mobile/new-user.scss b/app/assets/stylesheets/mobile/new-user.scss index 60c4715270a..49778129057 100644 --- a/app/assets/stylesheets/mobile/new-user.scss +++ b/app/assets/stylesheets/mobile/new-user.scss @@ -3,7 +3,6 @@ width: 100%; .nav-pills { - margin: 0.5em 0; overflow-x: auto; scrollbar-width: none; @@ -56,10 +55,6 @@ #navigation-bar { flex-wrap: nowrap; } - - .navigation-controls { - margin-top: 1em; - } } .new-user-content-wrapper {