Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

transition between settings pages and marketplace pages

  • Loading branch information...
commit 66c453425fe63eb8704f73ebfa8cc2a5eeddac35 1 parent 36e68de
@ngokevin authored
View
73 hearth/media/css/header.styl
@@ -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);
}
@@ -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;
}
@@ -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) {
@@ -678,7 +731,7 @@ main {
}
[data-page-type~=search],
[data-page-type~=leaf] {
- .flex-span, .act-tray {
+ .flex-span {
display: none;
}
}
View
18 hearth/media/js/header.js
@@ -1,18 +0,0 @@
-define('header', ['capabilities', 'z'], function(capabilities, z) {
- // We would use :hover, but we want to hide the menu on fragment load!
- function act_tray() {
- $('.act-tray').on('mouseover', function() {
- $('.act-tray').addClass('active');
- }).on('mouseout', function() {
- $('.act-tray').removeClass('active');
- }).on('click', '.account-links a', function() {
- $('.account-links, .settings, .act-tray').removeClass('active');
- });
- }
-
- act_tray();
- z.page.on('loaded', function() {
- $('.account-links, .settings').removeClass('active');
- });
- z.body.on('reloaded_chrome', act_tray);
-});
View
1  hearth/media/js/marketplace.js
@@ -35,7 +35,6 @@ define(
'mobilenetwork', // Must come before cat-dropdown (for amd.js)
'cat-dropdown',
'forms',
- 'header',
'l10n',
'lightbox',
'log',
View
85 hearth/media/js/navbar.js
@@ -6,33 +6,68 @@ define('navbar', ['jquery', 'jquery.hammer', 'log', 'settings', 'underscore', 'z
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');
+ });
+ }
+ 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.
View
20 hearth/templates/_macros/act_tray.html
@@ -0,0 +1,20 @@
+{% macro act_tray(mobile) %}
+ <div class="act-tray{% if mobile %} mobile{% 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 %}
View
6 hearth/templates/header.html
@@ -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>
@@ -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>
View
38 hearth/templates/nav.html
@@ -1,29 +1,25 @@
+{% include "_macros/act_tray.html" %}
+
<!-- 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) }}
-<!-- 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" 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" 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">
+ <a class="header-button icon back-to-marketplace" title="{{ _('Back to Marketplace') }}"></a>
+</div>
Please sign in to comment.
Something went wrong with that request. Please try again.