Skip to content
This repository was archived by the owner on May 16, 2019. It is now read-only.

Commit 74a39f0

Browse files
jjeffryesjjeffryes
committed
Merge pull request #1476 from rmisio/servers-nav-menu
Servers nav menu
2 parents 4f795d0 + 91c4be8 commit 74a39f0

File tree

12 files changed

+391
-131
lines changed

12 files changed

+391
-131
lines changed

‎css/obBase.css‎

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3413,6 +3413,18 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
34133413
.popMenu-navBar {
34143414
top: 50px;
34153415
right: 10px;
3416+
transform: none;
3417+
transition: none;
3418+
}
3419+
3420+
.popMenu-navBar.popMenu-opened {
3421+
transform: none;
3422+
}
3423+
3424+
.popMenu-navBarSubMenu {
3425+
position: absolute;
3426+
top: 0;
3427+
right: 0;
34163428
background-color: #252525;
34173429
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.60);
34183430
border-bottom-left-radius: 4px;
@@ -3423,10 +3435,11 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
34233435
width: 230px;
34243436
overflow: hidden;
34253437
transform: translateY(-110%);
3426-
transition: transform 200ms;
3438+
transition: transform 200ms;
34273439
}
34283440

3429-
.popMenu-navBar.popMenu-opened {
3441+
.popMenu-opened .popMenu-navBarSubMenu-pageNav,
3442+
.popMenu-navBarSubMenu-servers.server-submenu-opened {
34303443
transform: translateY(0);
34313444
}
34323445

@@ -3438,6 +3451,10 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
34383451
transition: opacity .2s cubic-bezier(0, 0, 0.2, 1);
34393452
}
34403453

3454+
.popMenu-navBar .popMenu-navBarSubMenu-servers a {
3455+
padding: 0;
3456+
}
3457+
34413458
.popMenu-navBar a:hover {
34423459
opacity: 1;
34433460
background: #353535;
@@ -4252,7 +4269,7 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
42524269
z-index: 9;
42534270
}
42544271
4255-
#loadingModal, .page-connect-modal.startup-server-connect {
4272+
#loadingModal, .page-connect-modal.server-connect {
42564273
z-index: 14;
42574274
}
42584275
@@ -4292,18 +4309,14 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
42924309
opacity: 0;
42934310
}
42944311
4295-
#ov1 .server-config-form {
4312+
#ov1 .server-config-form:not(.no-transition) {
42964313
transition: top 250ms;
42974314
}
42984315
42994316
#ov1 .server-config-form.slide-out {
43004317
top: 372px;
43014318
}
43024319
4303-
#ov1 .server-config-row {
4304-
/*min-height: 73px;*/
4305-
}
4306-
43074320
#ov1 .server-config-row .connection-failed::after {
43084321
content: '';
43094322
position: absolute;
@@ -5503,6 +5516,9 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
55035516
padding: 40px;
55045517
}
55055518

5519+
#ov1 .padding010 {
5520+
padding: 0px 10px;
5521+
}
55065522
#ov1 .padding015 {
55075523
padding: 0px 15px;
55085524
}

‎js/languages/en-US.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -573,7 +573,9 @@
573573
"about": "About OpenBazaar",
574574
"support": "Support OpenBazaar",
575575
"Forward": "Forward",
576-
"Back": "Back"
576+
"Back": "Back",
577+
"newServer": "New Server",
578+
"manageServers": "Manage Servers"
577579
},
578580
"onboarding": {
579581
"intro": "OpenBazaar Configuration",

‎js/main.js‎

Lines changed: 38 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -399,7 +399,14 @@ var loadProfile = function(landingRoute, onboarded) {
399399
$(document).ajaxSend(function(e, jqXhr, settings) {
400400
// With this we could map ajax responses to the server config
401401
// that was active when they were initiated.
402-
jqXhr.serverConfig = app.serverConfigs.getActive().id;
402+
jqXhr.serverConfig = app.serverConfigs.getActive();
403+
});
404+
405+
$(document).ajaxError(function(event, jqxhr, settings, thrownError) {
406+
if (jqxhr.status === 401 && jqxhr.serverConfig.id === app.serverConfigs.getActive().id) {
407+
app.serverConnectModal.failConnection('failed-auth', jqxhr.serverConfig)
408+
.open();
409+
}
403410
});
404411

405412
launchOnboarding = function(guidCreating) {
@@ -427,7 +434,7 @@ launchOnboarding = function(guidCreating) {
427434
var activeServer = app.serverConfigs.getActive();
428435

429436
pageConnectModal = new PageConnectModal({
430-
className: 'startup-server-connect top0',
437+
className: 'server-connect top0',
431438
initialState: {
432439
statusText: activeServer && activeServer.get('default') ?
433440
polyglot.t('serverConnectModal.connectingToDefault') :
@@ -446,25 +453,29 @@ pageConnectModal.on('cancel', () => {
446453

447454
app.connectHeartbeatSocket();
448455
app.serverConnectModal = new ServerConnectModal().render();
449-
app.serverConnectModal.on('connected', (authenticated) => {
450-
$loadingModal.removeClass('hide');
451-
452-
if (authenticated) {
453-
profileLoaded && location.reload();
454-
app.serverConnectModal.close();
456+
app.serverConnectModal.on('connected', () => {
457+
if (profileLoaded) {
458+
// If we've already loaded called loadProfile() and then, we connect
459+
// to a new server (or reconnect to the same server) we'll reload the
460+
// app since some of the "global" components (Router, PageNav,
461+
// SocketView...) were not designed to handle a new connection.
462+
location.reload();
455463
}
456464
});
457465

458466
app.getHeartbeatSocket().on('open', function(e) {
459467
removeStartupRetry();
460468
pageConnectModal.remove();
461469
$loadingModal.removeClass('hide');
462-
onboardingModal && onboardingModal.remove();
463470

464-
// clear some flags so the heartbeat events will
465-
// appropriatally loadProfile or launch onboarding
466-
guidCreating = null;
467-
loadProfileNeeded = true;
471+
if (!profileLoaded) {
472+
// clear some flags so the heartbeat events will
473+
// appropriatally loadProfile or launch onboarding
474+
guidCreating = null;
475+
loadProfileNeeded = true;
476+
app.serverConnectModal.close();
477+
$loadingModal.removeClass('hide');
478+
}
468479
});
469480

470481
app.getHeartbeatSocket().on('close', (startUpRetry = function(e) {
@@ -486,15 +497,24 @@ removeStartupRetry = function() {
486497
clearTimeout(startUpRetry.timeout);
487498
app.getHeartbeatSocket().off('close', startUpRetry);
488499
app.getHeartbeatSocket().on('close', (e) => {
489-
app.serverConnectModal.failConnection(null, app.serverConfigs.getActive())
490-
.open();
500+
app.serverConnectModal.failConnection(null, app.serverConfigs.getActive());
501+
502+
if (app.serverConnectModal.getConnectAttempt()) {
503+
app.serverConnectModal.getConnectAttempt()
504+
.fail(() => {
505+
app.serverConnectModal.open();
506+
});
507+
} else {
508+
app.serverConnectModal.open();
509+
}
491510
});
492511
};
493512

494513
app.getHeartbeatSocket().on('message', function(e) {
495514
if (e.jsonData && e.jsonData.status) {
496515
switch (e.jsonData.status) {
497516
case 'generating GUID':
517+
profileLoaded && location.reload();
498518
if (guidCreating) return;
499519

500520
// todo: put in some timeout in the off chance the guid
@@ -505,6 +525,8 @@ app.getHeartbeatSocket().on('message', function(e) {
505525
launchOnboarding(guidCreating);
506526
break;
507527
case 'GUID generation complete':
528+
profileLoaded && location.reload();
529+
508530
app.serverConfigs.getActive().save({
509531
username: e.jsonData.username,
510532
password: e.jsonData.password
@@ -518,6 +540,7 @@ app.getHeartbeatSocket().on('message', function(e) {
518540
case 'online':
519541
if (loadProfileNeeded && !guidCreating) {
520542
loadProfileNeeded = false;
543+
onboardingModal && onboardingModal.remove();
521544

522545
app.login().done(function(data) {
523546
if (data.success) {

‎js/templates/pageNav.html‎

Lines changed: 70 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -66,72 +66,81 @@ <h3 class="margin0 marginTop25"><%= polyglot.t('Discover') %></h3>
6666
</a>
6767
</div>
6868

69-
<div class="popMenu popMenu-navBar js-navProfileMenu">
70-
<a href="#userPage">
71-
<span class="ion-document-text fontSize12 marginRight2 textOpacity1"></span>
72-
<%= polyglot.t('nav.myPage') %>
73-
<span class="pull-right txt-muted"><%= config.keyShortcutPrefix + config.keyShortcuts.myPage.toUpperCase() %></span>
74-
</a>
75-
<a href="#userPage/<%= ob.guid %>/customize">
76-
<span class="ion-paintbucket fontSize10 textOpacity1"></span>
77-
<%= polyglot.t('nav.customizePage') %>
78-
<span class="pull-right txt-muted"><%= config.keyShortcutPrefix + config.keyShortcuts.customizePage.toUpperCase() %></span>
79-
</a>
80-
<% if(ob.vendor) { %>
81-
<a href="#userPage/<%= ob.guid %>/listingNew" >
82-
<span class="ion-ios-pricetag fontSize10 marginRight2 textOpacity1"></span>
83-
<%= polyglot.t('nav.createListing') %>
84-
<span class="pull-right txt-muted"><%= config.keyShortcutPrefix + config.keyShortcuts.create.toUpperCase() %></span>
69+
<div class="js-navProfileMenu popMenu popMenu-navBar">
70+
<div class="popMenu-navBarSubMenu popMenu-navBarSubMenu-pageNav">
71+
<a class="js-serverSubmenuTrigger">
72+
<div class="noOverflow inlineBlock" style="max-width: 171px"><%= ob.connectedServer.name %></div>
73+
<span class="pull-right txt-muted ion-arrow-right-b positionRelative" style="top: 4px"></span>
8574
</a>
86-
<% }else{ %>
87-
<a href="#userPage/<%= ob.guid %>/createStore">
88-
<span class="ion-ios-cart fontSize11 marginRight2 textOpacity1"></span>
89-
<%= polyglot.t('CreateStore') %>
75+
<hr/>
76+
<a href="#userPage">
77+
<span class="ion-document-text fontSize12 marginRight2 textOpacity1"></span>
78+
<%= polyglot.t('nav.myPage') %>
79+
<span class="pull-right txt-muted"><%= config.keyShortcutPrefix + config.keyShortcuts.myPage.toUpperCase() %></span>
9080
</a>
91-
<% } %>
92-
<% if(!ob.moderator){ %>
93-
<a href="#userPage/<%- ob.guid %>/becomeModerator">
94-
<span class="ion-bowtie fontSize11 marginRight2 textOpacity1"></span>
95-
<span class="js-userPageBecomeModerator">
96-
<%= polyglot.t('BecomeModerator') %>
97-
</span>
81+
<a href="#userPage/<%= ob.guid %>/customize">
82+
<span class="ion-paintbucket fontSize10 textOpacity1"></span>
83+
<%= polyglot.t('nav.customizePage') %>
84+
<span class="pull-right txt-muted"><%= config.keyShortcutPrefix + config.keyShortcuts.customizePage.toUpperCase() %></span>
9885
</a>
99-
<% } %>
100-
<hr/>
101-
<a href="#transactions/purchases">
102-
<span class="ion-log-out fontSize11 marginRight2 textOpacity1"></span>
103-
<%= polyglot.t('nav.purchases') %>
104-
<span class="pull-right txt-muted"><%= config.keyShortcutPrefix + config.keyShortcuts.purchases.toUpperCase() %></span>
105-
</a>
106-
<% if(ob.vendor) { %>
107-
<a href="#transactions/sales">
108-
<span class="ion-log-in fontSize11 marginRight2 textOpacity1"></span>
109-
<%= polyglot.t('nav.sales') %>
110-
<span class="pull-right txt-muted"><%= config.keyShortcutPrefix + config.keyShortcuts.sales.toUpperCase() %></span>
86+
<% if(ob.vendor) { %>
87+
<a href="#userPage/<%= ob.guid %>/listingNew" >
88+
<span class="ion-ios-pricetag fontSize10 marginRight2 textOpacity1"></span>
89+
<%= polyglot.t('nav.createListing') %>
90+
<span class="pull-right txt-muted"><%= config.keyShortcutPrefix + config.keyShortcuts.create.toUpperCase() %></span>
91+
</a>
92+
<% }else{ %>
93+
<a href="#userPage/<%= ob.guid %>/createStore">
94+
<span class="ion-ios-cart fontSize11 marginRight2 textOpacity1"></span>
95+
<%= polyglot.t('CreateStore') %>
96+
</a>
97+
<% } %>
98+
<% if(!ob.moderator){ %>
99+
<a href="#userPage/<%- ob.guid %>/becomeModerator">
100+
<span class="ion-bowtie fontSize11 marginRight2 textOpacity1"></span>
101+
<span class="js-userPageBecomeModerator">
102+
<%= polyglot.t('BecomeModerator') %>
103+
</span>
104+
</a>
105+
<% } %>
106+
<hr/>
107+
<a href="#transactions/purchases">
108+
<span class="ion-log-out fontSize11 marginRight2 textOpacity1"></span>
109+
<%= polyglot.t('nav.purchases') %>
110+
<span class="pull-right txt-muted"><%= config.keyShortcutPrefix + config.keyShortcuts.purchases.toUpperCase() %></span>
111111
</a>
112-
<% } %>
113-
<% if(ob.moderator) { %>
114-
<a href="#transactions/cases">
115-
<span class="ion-briefcase fontSize11 marginRight2 textOpacity1"></span>
116-
<%= polyglot.t('nav.cases') %>
117-
<span class="pull-right txt-muted"><%= config.keyShortcutPrefix + config.keyShortcuts.cases.toUpperCase() %></span>
112+
<% if(ob.vendor) { %>
113+
<a href="#transactions/sales">
114+
<span class="ion-log-in fontSize11 marginRight2 textOpacity1"></span>
115+
<%= polyglot.t('nav.sales') %>
116+
<span class="pull-right txt-muted"><%= config.keyShortcutPrefix + config.keyShortcuts.sales.toUpperCase() %></span>
117+
</a>
118+
<% } %>
119+
<% if(ob.moderator) { %>
120+
<a href="#transactions/cases">
121+
<span class="ion-briefcase fontSize11 marginRight2 textOpacity1"></span>
122+
<%= polyglot.t('nav.cases') %>
123+
<span class="pull-right txt-muted"><%= config.keyShortcutPrefix + config.keyShortcuts.cases.toUpperCase() %></span>
124+
</a>
125+
<% } %>
126+
<hr/>
127+
<a href="#settings">
128+
<span class="ion-toggle-filled fontSize11 marginRight2 textOpacity1"></span>
129+
<%= polyglot.t('nav.settings') %>
130+
<span class="pull-right txt-muted"><%= config.keyShortcutPrefix + config.keyShortcuts.settings.toUpperCase() %></span>
118131
</a>
119-
<% } %>
120-
<hr/>
121-
<a href="#settings">
122-
<span class="ion-toggle-filled fontSize11 marginRight2 textOpacity1"></span>
123-
<%= polyglot.t('nav.settings') %>
124-
<span class="pull-right txt-muted"><%= config.keyShortcutPrefix + config.keyShortcuts.settings.toUpperCase() %></span>
125-
</a>
126-
<hr/>
127-
<a class="js-showAboutModal">
128-
<span class="ion-ios-book fontSize11 marginRight2 textOpacity1"></span>
129-
<%= polyglot.t('nav.about') %>
130-
</a>
131-
<a class="js-showSupportModal">
132-
<span class="ion-android-favorite fontSize11 marginRight2 textOpacity1"></span>
133-
<%= polyglot.t('nav.support') %>
134-
</a>
132+
<hr/>
133+
<a class="js-showAboutModal">
134+
<span class="ion-ios-book fontSize11 marginRight2 textOpacity1"></span>
135+
<%= polyglot.t('nav.about') %>
136+
</a>
137+
<a class="js-showSupportModal">
138+
<span class="ion-android-favorite fontSize11 marginRight2 textOpacity1"></span>
139+
<%= polyglot.t('nav.support') %>
140+
</a>
141+
</div>
142+
143+
<div class="js-serverSubmenu popMenu-navBarSubMenu popMenu-navBarSubMenu-servers" style="right: 222px"></div>
135144
</div>
136145

137146
<div class="popMenu popMenu-notifications js-navNotificationsMenu" data-onclose="onNotifMenuClose" data-onopen="onNotifMenuOpen">

0 commit comments

Comments
 (0)