From ca570479b504d0ed221f0d070ff39a2ceb1c012f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Soner=20U=C5=9Fakl=C4=B1?= Date: Mon, 31 Jan 2022 17:01:15 -0500 Subject: [PATCH] refactor: mobile menu --- less/mobile.less | 48 +++++++++++++++++++----- public/persona.js | 55 ++++++++++++++++++---------- templates/partials/chats-menu.tpl | 52 ++++++++++++++++++++------ templates/partials/menu.tpl | 19 ++++++++-- templates/partials/slideout-menu.tpl | 22 ----------- 5 files changed, 132 insertions(+), 64 deletions(-) diff --git a/less/mobile.less b/less/mobile.less index 9474e05..0e3f4ea 100644 --- a/less/mobile.less +++ b/less/mobile.less @@ -63,15 +63,50 @@ left: auto; right: 7px; top: 10px; - + &[component="notifications/icon"] { + right: 41px; + } &.unread-count::after { position: static; } } } + .navbar-header .navbar-search { + input[name="term"] { + width: 150px; + } - #menu { - padding-top: 100px; + padding: 4px 0px 4px 0px; + } + #menu .menu-section { + padding-top: 20px; + } + #chats-menu { + .nav-pills { + [component="user/status"] { + position: absolute; + right: 20px; + } + + background-color: #101010; + height: 50px; + li { + margin: 0; + padding: 0; + width: 33%; + text-align: center; + height: 100%; + a { + height: 100%; + padding-top: 15px; + } + &.active { + a { + background-color: #1D1F20; + } + } + } + } } .slideout-menu { @@ -170,7 +205,6 @@ font-style: normal; &:after { - left: 5px; top: -1px; padding: 3px 7px; background: #333; @@ -189,10 +223,6 @@ margin: 0; } - .menu-section { - margin: 25px 0; - } - .menu-section-title { text-transform: uppercase; color: #85888d; @@ -205,7 +235,7 @@ .menu-section-list { padding: 0; - margin: 10px 0; + margin: 0; list-style: none; a, button { diff --git a/public/persona.js b/public/persona.js index f9894ce..e35bdad 100644 --- a/public/persona.js +++ b/public/persona.js @@ -10,10 +10,6 @@ $(document).ready(function () { $(window).on('resize', utils.debounce(configureNavbarHiding, 200)); $(window).on('resize', updatePanelOffset); - $(window).on('action:app.loggedIn', function () { - setupMobileMenu(); - }); - $(window).on('action:app.load', function () { setupTaskbar(); setupMobileMenu(); @@ -196,14 +192,14 @@ $(document).ready(function () { return; } - require(['pulling', 'storage'], function (Pulling, Storage) { + require(['pulling', 'storage', 'alerts'], function (Pulling, Storage, alerts) { if (!Pulling) { return; } // initialization - var chatMenuVisible = !config.disableChat && app.user && parseInt(app.user.uid, 10); + var chatMenuVisible = app.user && parseInt(app.user.uid, 10); var swapped = !!Storage.getItem('persona:menus:legacy-layout'); var margin = window.innerWidth; @@ -285,19 +281,16 @@ $(document).ready(function () { navSlideout.enable().toggle(); }); - function loadNotifications() { - require(['notifications'], function (notifications) { - const notifList = $('#menu [data-section="notifications"] ul'); - notifications.loadNotifications(notifList, function () { - notifList.find('.deco-none').removeClass('deco-none'); - console.log(notifList.find('.deco-none')); + if (chatMenuVisible) { + chatsSlideout.on('opened', function loadNotifications() { + require(['notifications'], function (notifications) { + const notifList = $('#chats-menu [data-section="notifications"] ul'); + notifications.loadNotifications(notifList, function () { + notifList.find('.deco-none').removeClass('deco-none'); + }); }); }); - } - - navSlideout.on('opened', loadNotifications); - if (chatMenuVisible) { navSlideout.on('beforeopen', function () { chatsSlideout.close(); chatsSlideout.disable(); @@ -306,13 +299,16 @@ $(document).ready(function () { }); } - $('#menu [data-section="navigation"] ul').html($('#main-nav').html() + ($('#search-menu').html() || '') + ($('#logged-out-menu').html() || '')); + $('#menu [data-section="navigation"] ul').html( + $('#main-nav').html() + + ($('#logged-out-menu').html() || '') + ); - $('#user-control-list').children().clone(true, true).appendTo($('#menu [data-section="profile"] ul')); + $('#user-control-list').children().clone(true, true).appendTo($('#chats-menu [data-section="profile"] ul')); socket.on('event:user_status_change', function (data) { if (parseInt(data.uid, 10) === app.user.uid) { - app.updateUserStatus($('#menu [component="user/status"]'), data.status); + app.updateUserStatus($('#chats-menu [component="user/status"]'), data.status); navSlideout.close(); } }); @@ -344,6 +340,27 @@ $(document).ready(function () { }); } + const searchInputEl = $('.navbar-header .navbar-search input[name="term"]'); + const searchButton = $('.navbar-header .navbar-search button[type="button"]'); + searchButton.off('click').on('click', function () { + if (!config.loggedIn && !app.user.privileges['search:content']) { + alerts.alert({ + message: '[[error:search-requires-login]]', + timeout: 3000, + }); + ajaxify.go('login'); + return false; + } + + searchButton.addClass('hidden'); + searchInputEl.removeClass('hidden').focus(); + searchInputEl.off('blur').on('blur', function () { + searchInputEl.addClass('hidden'); + searchButton.removeClass('hidden'); + }); + return false; + }); + // add a checkbox in the user settings page // so users can swap the sides the menus appear on diff --git a/templates/partials/chats-menu.tpl b/templates/partials/chats-menu.tpl index 498066b..c822dab 100644 --- a/templates/partials/chats-menu.tpl +++ b/templates/partials/chats-menu.tpl @@ -1,11 +1,41 @@ - -
-

- [[global:header.chats]] - -

- -
- \ No newline at end of file +{{{ if config.loggedIn }}} + + +
+
+
+
    +
    +
    + + {{{ if !config.disableChat }}} + + {{{ end }}} +
    +{{{ end }}} \ No newline at end of file diff --git a/templates/partials/menu.tpl b/templates/partials/menu.tpl index ef29919..1c1cf7a 100644 --- a/templates/partials/menu.tpl +++ b/templates/partials/menu.tpl @@ -1,12 +1,25 @@
    - + {{{ end }}} + + {{{ if config.searchEnabled }}} +
    +
    + + + + +
    +
    + {{{ end }}} diff --git a/templates/partials/slideout-menu.tpl b/templates/partials/slideout-menu.tpl index 7769d80..ac3ff08 100644 --- a/templates/partials/slideout-menu.tpl +++ b/templates/partials/slideout-menu.tpl @@ -1,27 +1,5 @@ -
    - - {buildAvatar(user, "lg", true, "user-icon")} - - -
    -

    [[global:header.navigation]]

      - -
      -

      [[global:header.profile]]

      -
        -
        - -
        -

        - [[global:header.notifications]] - -

        -
          -

          [[notifications:see_all]]

          -
          - \ No newline at end of file