Skip to content
Browse files

polish active state, refactor, fill in all the gaps

  • Loading branch information...
1 parent bd9d4b4 commit f3f901f6fb5286fc8d4417f3b16c4d281fa181b5 @ngokevin committed Feb 28, 2014
View
81 hearth/media/css/header.styl
@@ -343,7 +343,17 @@
header .act-tray {
display: none;
}
+ body[data-page-type~=settings] {
+ .back {
+ display: none;
+ }
+ .site {
+ display: block;
+ width: 35px;
+ }
+ }
.site-nav {
+ overflow: hidden;
position: relative;
.act-tray,
@@ -359,10 +369,14 @@
border-radius: 0 20px 20px 0;
bottom: 2px;
position: relative;
- right: 0px;
+ right: 50px;
+
+ &.active {
+ right: 0px;
- &.slide-out {
- right: 50px;
+ a.settings {
+ background-image: url(../img/pretty/settings_gear.svg); // Don't highlight.
+ }
}
a.settings {
height: 30px;
@@ -376,7 +390,7 @@
position: absolute;
right: -50px;
- &.slide-in {
+ &.active {
right: 0;
}
a.back-to-marketplace {
@@ -402,36 +416,51 @@
width: 100%;
// Toggle navbars.
- &.marketplace {
- left: 0;
+ &.nav-mkt {
+ right: -100%;
- &.slide-out {
- left: 100%;
+ &.active {
+ right: -70px;
+
+ // Sliding navbar.
+ &.home {
+ right: -70px;
+ }
+ &.new {
+ right: -18px;
+ }
+ &.popular {
+ right: 25px;
+ }
+ &.categories {
+ right: 90px;
+ }
+ &.collections {
+ right: 165px;
+ }
}
}
- &.settings {
+ &.nav-settings {
right: 100%;
- &.slide-in {
+ &.active {
right: 0;
+
+ // Sliding navbar.
+ &.account {
+ right: 0px;
+ }
+ &.apps {
+ right: 60px;
+ }
+ &.help {
+ right: 128px;
+ }
+ &.feedback {
+ right: 175px;
+ }
}
}
- // Sliding navbar.
- &.home {
- right: -70px;
- }
- &.new {
- right: -18px;
- }
- &.popular {
- right: 25px;
- }
- &.categories {
- right: 90px;
- }
- &.collections {
- right: 165px;
- }
li {
display: inline;
font-size: 12px;
View
5 hearth/media/js/marketplace.js
@@ -73,6 +73,11 @@ function(_) {
var nunjucks_globals = require('nunjucks').require('globals');
nunjucks_globals.REGIONS = settings.REGION_CHOICES_SLUG;
nunjucks_globals.user_helpers = require('user_helpers');
+ nunjucks_globals.indexOf = function(col, item) {
+ if (col) {
+ return col.indexOf(item);
+ }
+ };
// Jank hack because Persona doesn't allow scripts in the doc iframe.
// Please just delete it when they don't do that anymore.
View
66 hearth/media/js/navbar.js
@@ -1,12 +1,13 @@
-define('navbar', ['jquery', 'jquery.hammer', 'log', 'navigation', 'settings', 'underscore', 'z'],
- function($, hammer, log, navigation, settings, _, z) {
+define('navbar', ['jquery', 'jquery.hammer', 'log', 'navigation', 'nunjucks', 'settings', 'underscore', 'z'],
+ function($, hammer, log, navigation, nunjucks, settings, _, z) {
'use strict';
var console = log('navbar');
- var tabs = ['home', 'new', 'popular', 'categories', 'collections'];
+ var tabsMkt = ['home', 'new', 'popular', 'categories', 'collections'];
+ var tabsSettings = ['account', 'apps', 'help', 'feedback'];
- // Account settings.
+ // Desktop account settings.
function initActTray() {
$('.act-tray:not(.mobile)').on('mouseover', function() {
$(this).addClass('active');
@@ -24,36 +25,46 @@ define('navbar', ['jquery', 'jquery.hammer', 'log', 'navigation', 'settings', 'u
// Navbar settings + Marketplace buttons.
function initNavbarButtons() {
+ var $mktNavGroup = $('.nav-mkt , .act-tray.mobile');
+ var $settingsNavGroup = $('.nav-settings, .mkt-tray');
+
+ function toggleNavbar($on, $off) {
+ $on.addClass('active');
+ $off.removeClass('active');
+ // Highlight first child if haven't visited this nav yet.
+ if (!$on.find('li.active').length) {
+ $('li:first-child', $on).addClass('active');
+ }
+ }
+
// Toggle between Settings page and Marketplace pages.
$('.act-tray.mobile').on('click', function() {
// Activate Settings page navbar.
- $(this).addClass('slide-out');
- $('.navbar.marketplace').addClass('slide-out');
- $('.navbar.settings').addClass('slide-in');
- $('.mkt-tray').addClass('slide-in');
+ toggleNavbar($settingsNavGroup, $mktNavGroup);
});
- $('.mkt-tray').on('click', function() {
+ $('.mkt-tray, .site').on('click', function() {
// Activate Marketplace pages navbar.
- $('.act-tray').removeClass('slide-out');
- $('.navbar.marketplace').removeClass('slide-out');
- $('.navbar.settings').removeClass('slide-in');
- $(this).removeClass('slide-in');
+ toggleNavbar($mktNavGroup, $settingsNavGroup);
navigation.back();
});
}
initNavbarButtons();
z.body.on('reloaded_chrome', initNavbarButtons);
- // Swipe.
+ // Swipe handler.
$('#site-nav').hammer({'swipe_velocity': 0.3}).on('swipe', function(e) {
if (['left', 'right'].indexOf(e.gesture.direction) === -1) {
return;
}
+ var $navbar = $(this).find('.navbar.active');
+ var tabs = tabsMkt;
+ if ($navbar.hasClass('nav-settings')) {
+ tabs = tabsSettings;
+ }
- var $navbar = $(this).find('.navbar');
+ // Calculate next tab.
var currentTab = $navbar.attr('data-tab');
var tabPos = tabs.indexOf(currentTab);
-
if (e.gesture.direction == 'left') {
// Next tab.
tabPos = tabPos === tabs.length - 1 ? tabPos : tabPos + 1;
@@ -62,19 +73,26 @@ define('navbar', ['jquery', 'jquery.hammer', 'log', 'navigation', 'settings', 'u
tabPos = tabPos === 0 ? tabPos : tabPos - 1;
}
- // Visually change tab by sliding navbar.
var newTab = tabs[tabPos];
- $navbar.removeClass(currentTab)
- .addClass(newTab)
- .attr('data-tab', newTab)
- .find('li').removeClass('active')
- .eq(tabPos).addClass('active');
+ if (newTab == currentTab) {
+ // Reached the end.
+ return;
+ } else {
+ var $li = $navbar.find('li').eq(tabPos)
+ .trigger('click');
+ // Navigate on swipe.
+ z.page.trigger('navigate', $li.find('a').attr('href'));
+ }
});
- // Tap.
+ // Tap handler.
$('#site-nav').on('click', 'li', function(e) {
var $this = $(this);
- var $navbar = $(this).closest('.navbar');
+ var $navbar = $(this).closest('.navbar.active');
+ var tabs = tabsMkt;
+ if ($navbar.hasClass('nav-settings')) {
+ tabs = tabsSettings;
+ }
var targetTab = $this.attr('data-tab');
var tabPos = tabs.indexOf(targetTab);
View
2 hearth/media/js/views/feedback.js
@@ -57,7 +57,7 @@ define('views/feedback',
$('.linefit').linefit(2);
});
- builder.z('type', 'leaf');
+ builder.z('type', 'leaf settings');
builder.z('title', gettext('Feedback'));
builder.z('parent', urls.reverse('homepage'));
};
View
2 hearth/media/js/views/purchases.js
@@ -9,7 +9,7 @@ define('views/purchases', ['l10n', 'common/linefit', 'urls'],
$('.linefit').linefit(2);
- builder.z('type', 'leaf');
+ builder.z('type', 'leaf settings');
builder.z('title', gettext('My Apps'));
builder.z('parent', urls.reverse('homepage'));
};
View
2 hearth/templates/_macros/act_tray.html
@@ -1,5 +1,5 @@
{% macro act_tray(mobile, is_settings) %}
- <div class="act-tray{% if mobile %} mobile{% endif%}{% if is_settings %} slide-out{% endif %}">
+ <div class="act-tray{% if mobile %} mobile{% endif%}{% if not is_settings %} active{% endif %}">
<a href="{{ url('settings') }}" class="header-button icon settings" title="{{ _('Settings') }}"></a>
<div class="account-links only-logged-in">
<ul>
View
32 hearth/templates/nav.html
@@ -1,27 +1,33 @@
{% include "_macros/act_tray.html" %}
-{% set is_settings = z.win.attr('location').pathname.indexOf('/settings') != -1 %}
+{% macro navtab(code, name, url) %}
+ <li data-tab="{{ code }}"{% if url == z.win[0].location.pathname %} class="active"{% endif %}>
+ <a href="{{ url }}">{{ name }}</a>
+ </li>
+{% endmacro %}
+
+{% set is_settings = z.body.attr('data-page-type') and indexOf(z.body.attr('data-page-type'), 'settings') != -1 %}
<!-- Actions drop-down (desktop) or settings toggle (mobile). -->
{{ act_tray(true, is_settings) }}
<!-- Navigation tabs (Home, New, Popular, Categories, Collections). -->
-<ul class="navbar marketplace home{% if is_settings %} slide-out{% endif %}" data-tab="home">
- <li data-tab="home" class="active"><a>{{ _('Home') }}</a></li>
- <li data-tab="new"><a>{{ _('New') }}</a></li>
- <li data-tab="popular"><a>{{ _('Popular') }}</a></li>
- <li data-tab="categories"><a>{{ _('Categories') }}</a></li>
- <li data-tab="collections"><a>{{ _('Collections') }}</a></li>
+<ul class="navbar nav-mkt home{% if not is_settings %} active{% endif %}" data-tab="home">
+ {{ navtab('home', _('Home'), url('homepage')) }}
+ {{ navtab('new', _('New'), '#') }}
+ {{ navtab('popular', _('Popular'), '#') }}
+ {{ navtab('categories', _('Categories'), '#') }}
+ {{ navtab('collections', _('Collections'), '#') }}
</ul>
<!-- Settings tabs (My Account, My Apps, Help, Feedback). -->
-<ul class="navbar settings account{% if is_settings %} slide-in {% endif %}" data-tab="account">
- <li data-tab="account" class="active"><a>{{ _('My Account') }}</a></li>
- <li data-tab="apps"><a>{{ _('My Apps') }}</a></li>
- <li data-tab="help"><a>{{ _('Help') }}</a></li>
- <li data-tab="feedback"><a>{{ _('Feedback') }}</a></li>
+<ul class="navbar nav-settings account{% if is_settings %} active{% endif %}" data-tab="account">
+ {{ navtab('account', _('My Account'), url('settings')) }}
+ {{ navtab('apps', _('My Apps'), url('purchases')) }}
+ {{ navtab('help', _('Help'), url('settings')) }}
+ {{ navtab('feedback', _('Feedback'), url('feedback')) }}
</ul>
-<div class="mkt-tray{% if is_settings %} slide-in{% endif %}">
+<div class="mkt-tray{% if is_settings %} active{% endif %}">
<a class="header-button icon back-to-marketplace" title="{{ _('Back to Marketplace') }}"></a>
</div>
View
1 hearth/templates/settings/feedback.html
@@ -3,7 +3,6 @@
<div class="main feedback modal c">
<div>
- {% include 'settings/nav.html' %}
<form method="post" class="feedback-form form-modal">
<p class="brform simple-field c">
<textarea name="feedback" required></textarea>
View
1 hearth/templates/settings/main.html
@@ -4,7 +4,6 @@ <h2 class="linefit">{{ _('Account Settings') }}</h2>
</header>
{% set current_page = 'settings' %}
- {% include 'settings/nav.html' %}
<form class="form-grid account-settings"{{ ' novalidate' if not user.logged_in() }}>
<div class="simple-field c only-logged-in">
View
1 hearth/templates/user/purchases.html
@@ -3,7 +3,6 @@
<section class="main account purchases c" id="account-settings">
{% set current_page = 'purchases' %}
- {% include 'settings/nav.html' %}
{% if user.logged_in() %}
{% defer (url=api('installed'), pluck='objects', as='app', paginate='ol.listing') %}

0 comments on commit f3f901f

Please sign in to comment.
Something went wrong with that request. Please try again.