Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also compare across forks.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also compare across forks.
base fork: ngokevin/fireplace
base: f3f901f6fb
...
head fork: ngokevin/fireplace
compare: 9ff39dbc3d
  • 2 commits
  • 11 files changed
  • 0 commit comments
  • 1 contributor
View
86 hearth/media/css/header.styl
@@ -343,26 +343,41 @@
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,
.mkt-tray {
+ transition(right .4s);
background-color: $cloud-gray;
border: 1px solid $cement-gray;
height: 41px;
width: 45px;
z-index: 2;
+
+ &.active {
+ transition(right .2s .6s);
+ right: 0;
+ }
}
.act-tray {
- transition(right .5s);
border-radius: 0 20px 20px 0;
bottom: 2px;
position: relative;
- right: 0px;
+ right: 50px;
- &.slide-out {
- right: 50px;
+ &.active a.settings {
+ background-image: url(../img/pretty/settings_gear.svg); // Don't highlight.
}
a.settings {
height: 30px;
@@ -370,15 +385,11 @@
}
}
.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;
@@ -402,36 +413,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
7 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.
@@ -146,8 +151,6 @@ function(_) {
var context = {z: z};
$('#site-header').html(
nunjucks.env.render('header.html', context));
- $('#site-nav').html(
- nunjucks.env.render('nav.html', context));
$('#site-footer').html(
nunjucks.env.render('footer.html', context));
View
73 hearth/media/js/navbar.js
@@ -1,12 +1,18 @@
-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.
+ z.page.one('loaded', function() {
+ $('#site-nav').html(
+ nunjucks.env.render('nav.html', {z: z}));
+ });
+
+ // Desktop account settings.
function initActTray() {
$('.act-tray:not(.mobile)').on('mouseover', function() {
$(this).addClass('active');
@@ -24,36 +30,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.
- $('#site-nav').hammer({'swipe_velocity': 0.3}).on('swipe', function(e) {
+ // Swipe handler.
+ z.body.hammer({'swipe_velocity': 0.3}).on('swipe', function(e) {
if (['left', 'right'].indexOf(e.gesture.direction) === -1) {
return;
}
+ var $navbar = $('.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 +78,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'), '#') }}
+ {{ 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
14 hearth/templates/settings/nav.html
@@ -1,14 +0,0 @@
-{% macro _url(view_name, title) %}
-<li><a class="linefit{% if current_page == view_name %} sel{% endif %}" href="{{ url(view_name) }}">
- {{ title }}</a></li>
-{% endmacro %}
-
-<nav class="secondary-header toggles c">
- {{ _url('settings', _('Account')) }}
- {{ _url('purchases', _('My Apps')) }}
- {{ _url('feedback', _('Feedback')) }}
-</nav>
-<div class="secondary-header hide-on-mobile">
- <h2>{{ _('Feedback') }}</h2>
- <a href="#" class="close btn-cancel">{{ _('Close') }}</a>
-</div>
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') %}

No commit comments for this range

Something went wrong with that request. Please try again.