hyperzlib
/
nodebb-theme-persona
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: mobile menu

Browse Source
main
Barış Soner Uşaklı 3 years ago
parent 498fa8ee3f
commit ca570479b5
5 changed files with 132 additions and 64 deletions
Show Stats Download Patch File Download Diff File

48
less/mobile.less
Unescape Escape View File

@ -63,15 +63,50 @@
left: auto; left: auto;
right: 7px; right: 7px;
top: 10px; top: 10px;
&[component="notifications/icon"] {
right: 41px;
}
&.unread-count::after { &.unread-count::after {
position: static; position: static;
} }
} }
} }
.navbar-header .navbar-search {
input[name="term"] {
width: 150px;
}
padding: 4px 0px 4px 0px;
}
#menu .menu-section {
padding-top: 20px;
}
#chats-menu {
.nav-pills {
[component="user/status"] {
position: absolute;
right: 20px;
}
#menu { background-color: #101010;
padding-top: 100px; 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 { .slideout-menu {
@ -170,7 +205,6 @@
font-style: normal; font-style: normal;
&:after { &:after {
left: 5px;
top: -1px; top: -1px;
padding: 3px 7px; padding: 3px 7px;
background: #333; background: #333;
@ -189,10 +223,6 @@
margin: 0; margin: 0;
} }
.menu-section {
margin: 25px 0;
}
.menu-section-title { .menu-section-title {
text-transform: uppercase; text-transform: uppercase;
color: #85888d; color: #85888d;
@ -205,7 +235,7 @@
.menu-section-list { .menu-section-list {
padding: 0; padding: 0;
margin: 10px 0; margin: 0;
list-style: none; list-style: none;
a, button { a, button {

49
public/persona.js
Unescape Escape View File

@ -10,10 +10,6 @@ $(document).ready(function () {
$(window).on('resize', utils.debounce(configureNavbarHiding, 200)); $(window).on('resize', utils.debounce(configureNavbarHiding, 200));
$(window).on('resize', updatePanelOffset); $(window).on('resize', updatePanelOffset);
$(window).on('action:app.loggedIn', function () {
setupMobileMenu();
});
$(window).on('action:app.load', function () { $(window).on('action:app.load', function () {
setupTaskbar(); setupTaskbar();
setupMobileMenu(); setupMobileMenu();
@ -196,14 +192,14 @@ $(document).ready(function () {
return; return;
} }
require(['pulling', 'storage'], function (Pulling, Storage) { require(['pulling', 'storage', 'alerts'], function (Pulling, Storage, alerts) {
if (!Pulling) { if (!Pulling) {
return; return;
} }
// initialization // 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 swapped = !!Storage.getItem('persona:menus:legacy-layout');
var margin = window.innerWidth; var margin = window.innerWidth;
@ -285,19 +281,16 @@ $(document).ready(function () {
navSlideout.enable().toggle(); navSlideout.enable().toggle();
}); });
function loadNotifications() { if (chatMenuVisible) {
chatsSlideout.on('opened', function loadNotifications() {
require(['notifications'], function (notifications) { require(['notifications'], function (notifications) {
const notifList = $('#menu [data-section="notifications"] ul'); const notifList = $('#chats-menu [data-section="notifications"] ul');
notifications.loadNotifications(notifList, function () { notifications.loadNotifications(notifList, function () {
notifList.find('.deco-none').removeClass('deco-none'); notifList.find('.deco-none').removeClass('deco-none');
console.log(notifList.find('.deco-none'));
}); });
}); });
} });
navSlideout.on('opened', loadNotifications);
if (chatMenuVisible) {
navSlideout.on('beforeopen', function () { navSlideout.on('beforeopen', function () {
chatsSlideout.close(); chatsSlideout.close();
chatsSlideout.disable(); 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) { socket.on('event:user_status_change', function (data) {
if (parseInt(data.uid, 10) === app.user.uid) { 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(); 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 // add a checkbox in the user settings page
// so users can swap the sides the menus appear on // so users can swap the sides the menus appear on

42
templates/partials/chats-menu.tpl
Unescape Escape View File

@ -1,11 +1,41 @@
<!-- IF config.loggedIn --> {{{ if config.loggedIn }}}
<ul class="nav nav-pills">
<li>
<a href="#notifications" data-toggle="tab"><span class="counter unread-count" component="notifications/icon" data-content="{unreadCount.notification}"></span> <i class="fa fa-fw fa-bell"></i></a>
</li>
{{{ if !config.disableChat }}}
<li>
<a href="#chats" data-toggle="tab"><i class="counter unread-count" component="chat/icon" data-content="{unreadCount.chat}"></i> <i class="fa fa-fw fa-comment"></i></a>
</li>
{{{ end }}}
<li class="active">
<a href="#profile" data-toggle="tab">
{buildAvatar(user, "sm", true, "user-icon")}
<i component="user/status" class="fa fa-fw fa-circle status {user.status}"></i>
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade active in" id="profile">
<section class="menu-section" data-section="profile">
<ul class="menu-section-list" component="header/usercontrol"></ul>
</section>
</div>
<div class="tab-pane fade" id="notifications">
<section class="menu-section" data-section="notifications">
<ul class="menu-section-list notification-list-mobile" component="notifications/list"></ul>
<p class="menu-section-list"><a href="{relative_path}/notifications">[[notifications:see_all]]</a></p>
</section>
</div>
{{{ if !config.disableChat }}}
<div class="tab-pane fade" id="chats">
<section class="menu-section" data-section="chats"> <section class="menu-section" data-section="chats">
<h3 class="menu-section-title">
[[global:header.chats]]
<i class="counter unread-count" component="chat/icon" data-content="{unreadCount.chat}"></i>
</h3>
<ul class="menu-section-list chat-list" component="chat/list"> <ul class="menu-section-list chat-list" component="chat/list">
<a class="navigation-link" href="{relative_path}/user/{user.userslug}/chats">[[modules:chat.see_all]]</a> <a class="navigation-link" href="{relative_path}/user/{user.userslug}/chats">[[modules:chat.see_all]]</a>
</ul> </ul>
</section> </section>
<!-- ENDIF config.loggedIn --> </div>
{{{ end }}}
</div>
{{{ end }}}

19
templates/partials/menu.tpl
Unescape Escape View File

@ -1,12 +1,25 @@
<div class="navbar-header"> <div class="navbar-header">
<button type="button" class="navbar-toggle pull-left" id="mobile-menu"> <button type="button" class="navbar-toggle pull-left" id="mobile-menu">
<span component="notifications/icon" class="notification-icon fa fa-fw fa-bell-o unread-count" data-content="{unreadCount.notification}"></span>
<i class="fa fa-lg fa-fw fa-bars"></i> <i class="fa fa-lg fa-fw fa-bars"></i>
</button> </button>
<button type="button" class="navbar-toggle hidden" id="mobile-chats"> {{{ if config.loggedIn }}}
<button type="button" class="navbar-toggle" id="mobile-chats">
<span component="notifications/icon" class="notification-icon fa fa-fw fa-bell-o unread-count" data-content="{unreadCount.notification}"></span>
<span component="chat/icon" class="notification-icon fa fa-fw fa-comments unread-count" data-content="{unreadCount.chat}"></span> <span component="chat/icon" class="notification-icon fa fa-fw fa-comments unread-count" data-content="{unreadCount.chat}"></span>
<i class="fa fa-lg fa-comment-o"></i> {buildAvatar(user, "md", true)}
</button> </button>
{{{ end }}}
{{{ if config.searchEnabled }}}
<div class="navbar-search visible-xs pull-right">
<form action="{config.relative_path}/search" method="GET">
<button type="button" class="btn btn-link"><i class="fa fa-search fa-fw" title="[[global:header.search]]"></i></button>
<input autocomplete="off" type="text" class="form-control hidden" name="term" placeholder="[[global:search]]"/>
<button class="btn btn-primary hidden" type="submit"></button>
<input type="text" class="hidden" name="in" value="{config.searchDefaultInQuick}" />
</form>
</div>
{{{ end }}}
<!-- IF brand:logo --> <!-- IF brand:logo -->
<a href="<!-- IF brand:logo:url -->{brand:logo:url}<!-- ELSE -->{relative_path}/<!-- ENDIF brand:logo:url -->"> <a href="<!-- IF brand:logo:url -->{brand:logo:url}<!-- ELSE -->{relative_path}/<!-- ENDIF brand:logo:url -->">

22
templates/partials/slideout-menu.tpl
Unescape Escape View File

@ -1,27 +1,5 @@
<div class="menu-profile">
<!-- IF user.uid -->
{buildAvatar(user, "lg", true, "user-icon")}
<i component="user/status" class="fa fa-fw fa-circle status {user.status}"></i>
<!-- ENDIF user.uid -->
</div>
<section class="menu-section" data-section="navigation"> <section class="menu-section" data-section="navigation">
<h3 class="menu-section-title">[[global:header.navigation]]</h3> <h3 class="menu-section-title">[[global:header.navigation]]</h3>
<ul class="menu-section-list"></ul> <ul class="menu-section-list"></ul>
</section> </section>
<!-- IF config.loggedIn -->
<section class="menu-section" data-section="profile">
<h3 class="menu-section-title">[[global:header.profile]]</h3>
<ul class="menu-section-list" component="header/usercontrol"></ul>
</section>
<section class="menu-section" data-section="notifications">
<h3 class="menu-section-title">
[[global:header.notifications]]
<span class="counter unread-count" component="notifications/icon" data-content="{unreadCount.notification}"></span>
</h3>
<ul class="menu-section-list notification-list-mobile" component="notifications/list"></ul>
<p class="menu-section-list"><a href="{relative_path}/notifications">[[notifications:see_all]]</a></p>
</section>
<!-- ENDIF config.loggedIn -->
Write Preview
Loading…
Cancel
Save