Skip to content

Commit

Permalink
transition between settings pages and marketplace pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@ngokevin
ngokevin committed Feb 28, 2014
1 parent 36e68de commit bd9d4b4
Show file tree
Hide file tree
Showing 7 changed files with 171 additions and 77 deletions.
73 changes: 63 additions & 10 deletions hearth/media/css/header.styl
View file
Expand Up @@ -254,8 +254,7 @@

// On hover the settings gear icon should turn blue.
// On the Account Settings page the gear should also turn blue.
.act-tray.active .header-button.settings,
[data-page-type~=settings] .header-button.settings {
.act-tray.active .header-button.settings {
background-image: url(../img/pretty/settings_gear_active.svg);
}

Expand Down Expand Up @@ -340,36 +339,84 @@
padding-bottom: 20px;
}

// New feed navigation.
// New feed navigation (mobile only).
header .act-tray {
display: none;
}
.site-nav {
// overflow: auto;
// overflow-y: hidden;
position: relative;

.act-tray {
.act-tray,
.mkt-tray {
background-color: $cloud-gray;
border: 1px solid $cement-gray;
border-radius: 0 20px 20px 0;
bottom: 2px;
height: 41px;
width: 45px;
z-index: 2;
}
.act-tray {
transition(right .5s);
border-radius: 0 20px 20px 0;
bottom: 2px;
position: relative;
right: 0px;

&.slide-out {
right: 50px;
}
a.settings {
height: 30px;
top: 5px;
}
}
.mkt-tray {
transition(right .5s);
border-radius: 20px 0px 0px 20px;
bottom: 0;
position: absolute;
right: -50px;

&.slide-in {
right: 0;
}
a.back-to-marketplace {
background: url(../img/pretty/list_view.svg) 50% 50% no-repeat;
background-size: 24px auto;
display: block;
height: 40px;
left: 2px;
position: absolute;
width: 40px;
}
}

ul.navbar {
disable_user_select();
transition(all .3s);
transition(right .5s ease-out, left .3s ease-in);
display: inline-block;
height: auto;
opacity: 1;
padding: 8px 0;
position: absolute;
top: 0;
width: 100%;

// Toggle navbars.
&.marketplace {
left: 0;

&.slide-out {
left: 100%;
}
}
&.settings {
right: 100%;

&.slide-in {
right: 0;
}
}
// Sliding navbar.
&.home {
right: -70px;
}
Expand Down Expand Up @@ -657,6 +704,12 @@ main {
top: 13px;
right: 0;
}
.site-nav {
display: none;
}
[data-page-type~=settings] .header-button.settings {
background-image: url(../img/pretty/settings_gear_active.svg);
}
}

@media (max-width: 540px) {
Expand All @@ -678,7 +731,7 @@ main {
}
[data-page-type~=search],
[data-page-type~=leaf] {
.flex-span, .act-tray {
.flex-span {
display: none;
}
}
Expand Down
18 changes: 0 additions & 18 deletions hearth/media/js/header.js
View file

This file was deleted.

1 change: 0 additions & 1 deletion hearth/media/js/marketplace.js
View file
Expand Up @@ -35,7 +35,6 @@ define(
'mobilenetwork', // Must come before cat-dropdown (for amd.js)
'cat-dropdown',
'forms',
'header',
'l10n',
'lightbox',
'log',
Expand Down
90 changes: 63 additions & 27 deletions hearth/media/js/navbar.js
View file
@@ -1,38 +1,74 @@
define('navbar', ['jquery', 'jquery.hammer', 'log', 'settings', 'underscore', 'z'],
function($, hammer, log, settings, _, z) {
define('navbar', ['jquery', 'jquery.hammer', 'log', 'navigation', 'settings', 'underscore', 'z'],
function($, hammer, log, navigation, settings, _, z) {
'use strict';

var console = log('navbar');

var tabs = ['home', 'new', 'popular', 'categories', 'collections'];

// Account settings.
function initActTray() {
$('.act-tray:not(.mobile)').on('mouseover', function() {
$(this).addClass('active');
}).on('mouseout', function() {
$(this).removeClass('active');
}).on('click', '.account-links a', function() {
$('.account-links, .settings, .act-tray').removeClass('active');
});
}
initActTray();
z.page.on('loaded', function() {
// Swipe.
$('#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');
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;
} else if (e.gesture.direction == 'right') {
// Prev tab.
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');
$('.account-links, .settings').removeClass('active');
});
z.body.on('reloaded_chrome', initActTray);

// Navbar settings + Marketplace buttons.
function initNavbarButtons() {
// 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');
});
$('.mkt-tray').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');
navigation.back();
});
}
initNavbarButtons();
z.body.on('reloaded_chrome', initNavbarButtons);

// Swipe.
$('#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');
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;
} else if (e.gesture.direction == 'right') {
// Prev tab.
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');
});

// Tap.
Expand Down
20 changes: 20 additions & 0 deletions hearth/templates/_macros/act_tray.html
View file
@@ -0,0 +1,20 @@
{% macro act_tray(mobile, is_settings) %}
<div class="act-tray{% if mobile %} mobile{% endif%}{% if is_settings %} slide-out{% endif %}">
<a href="{{ url('settings') }}" class="header-button icon settings" title="{{ _('Settings') }}"></a>
<div class="account-links only-logged-in">
<ul>
<li>
<a href="{{ url('settings') }}">
<b>{{ user.get_setting('email') }}</b>
{{ _('Edit Account Settings') }}</a>
</li>
<li><a href="{{ url('purchases') }}">{{ _('My Apps') }}</a></li>
{% if user.get_permission('developer') %}
<li><a href="/developers/submissions">{{ _('My Submissions') }}</a></li>
{% endif %}
<li><a class="submit-feedback" href="#">{{ _('Feedback') }}</a></li>
<li><a href="#" class="logout">{{ _('Sign Out') }}</a></li>
</ul>
</div>
</div>
{% endmacro %}
6 changes: 6 additions & 0 deletions hearth/templates/header.html
View file
@@ -1,6 +1,9 @@
{% include "_macros/act_tray.html" %}

<nav role="navigation">
<a href="#" id="nav-back" class="header-button icon back" title="{{ _('Back') }}"><b>{{ _('Back') }}</b></a>
<h1 class="site"><a href="{{ url('homepage') }}"><span class="wordmark">Firefox Marketplace</span></a></h1>

<span class="flex-shift"></span>
<form novalidate method="GET" id="search" class="search" action="{{ url('search') }}">
<label for="search-q">{{ _('Search') }}</label>
Expand All @@ -11,4 +14,7 @@ <h1 class="site"><a href="{{ url('homepage') }}"><span class="wordmark">Firefox
<a href="#" class="close search-clear" title="{{ _('Clear') }}">{{ _('Clear') }}</a>
</form>
<span class="flex-span"></span>

{{ act_tray(false) }}
<a href="#" class="header-button persona">{{ _('Sign In') }}</a>
</nav>
40 changes: 19 additions & 21 deletions hearth/templates/nav.html
View file
@@ -1,29 +1,27 @@
{% include "_macros/act_tray.html" %}

{% set is_settings = z.win.attr('location').pathname.indexOf('/settings') != -1 %}

<!-- Actions drop-down (desktop) or settings toggle (mobile). -->
<div class="act-tray">
<a href="{{ url('settings') }}" class="header-button icon settings" title="{{ _('Settings') }}"></a>
<div class="account-links only-logged-in">
<ul>
<li>
<a href="{{ url('settings') }}">
<b>{{ user.get_setting('email') }}</b>
{{ _('Edit Account Settings') }}</a>
</li>
<li><a href="{{ url('purchases') }}">{{ _('My Apps') }}</a></li>
{% if user.get_permission('developer') %}
<li><a href="/developers/submissions">{{ _('My Submissions') }}</a></li>
{% endif %}
<li><a class="submit-feedback" href="#">{{ _('Feedback') }}</a></li>
<li><a href="#" class="logout">{{ _('Sign Out') }}</a></li>
</ul>
</div>
</div>
<a href="#" class="header-button persona">{{ _('Sign In') }}</a>
{{ act_tray(true, is_settings) }}

<!-- Navigation tabs (New, Popular, Categories, etc). -->
<ul class="navbar home" data-tab="home">
<!-- 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>

<!-- 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>

<div class="mkt-tray{% if is_settings %} slide-in{% endif %}">
<a class="header-button icon back-to-marketplace" title="{{ _('Back to Marketplace') }}"></a>
</div>

0 comments on commit bd9d4b4

Please sign in to comment.