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

Commit afb5590

Browse files
rmisiormisio
committed
initial shell of server config submenu in the page nav menu
1 parent ad90816 commit afb5590

File tree

3 files changed

+108
-64
lines changed

3 files changed

+108
-64
lines changed

‎css/obBase.css‎

Lines changed: 15 additions & 2 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

‎js/templates/pageNav.html‎

Lines changed: 77 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -66,72 +66,88 @@ <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-server-config-submenu-trigger">
72+
<div class="noOverflow inlineBlock" style="max-width: 171px"><%= ob.handle || ob.guid %></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+
<a href="#userPage">
76+
<span class="ion-document-text fontSize12 marginRight2 textOpacity1"></span>
77+
<%= polyglot.t('nav.myPage') %>
78+
<span class="pull-right txt-muted"><%= config.keyShortcutPrefix + config.keyShortcuts.myPage.toUpperCase() %></span>
9079
</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>
80+
<a href="#userPage/<%= ob.guid %>/customize">
81+
<span class="ion-paintbucket fontSize10 textOpacity1"></span>
82+
<%= polyglot.t('nav.customizePage') %>
83+
<span class="pull-right txt-muted"><%= config.keyShortcutPrefix + config.keyShortcuts.customizePage.toUpperCase() %></span>
9884
</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>
85+
<% if(ob.vendor) { %>
86+
<a href="#userPage/<%= ob.guid %>/listingNew" >
87+
<span class="ion-ios-pricetag fontSize10 marginRight2 textOpacity1"></span>
88+
<%= polyglot.t('nav.createListing') %>
89+
<span class="pull-right txt-muted"><%= config.keyShortcutPrefix + config.keyShortcuts.create.toUpperCase() %></span>
90+
</a>
91+
<% }else{ %>
92+
<a href="#userPage/<%= ob.guid %>/createStore">
93+
<span class="ion-ios-cart fontSize11 marginRight2 textOpacity1"></span>
94+
<%= polyglot.t('CreateStore') %>
95+
</a>
96+
<% } %>
97+
<% if(!ob.moderator){ %>
98+
<a href="#userPage/<%- ob.guid %>/becomeModerator">
99+
<span class="ion-bowtie fontSize11 marginRight2 textOpacity1"></span>
100+
<span class="js-userPageBecomeModerator">
101+
<%= polyglot.t('BecomeModerator') %>
102+
</span>
103+
</a>
104+
<% } %>
105+
<hr/>
106+
<a href="#transactions/purchases">
107+
<span class="ion-log-out fontSize11 marginRight2 textOpacity1"></span>
108+
<%= polyglot.t('nav.purchases') %>
109+
<span class="pull-right txt-muted"><%= config.keyShortcutPrefix + config.keyShortcuts.purchases.toUpperCase() %></span>
111110
</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>
111+
<% if(ob.vendor) { %>
112+
<a href="#transactions/sales">
113+
<span class="ion-log-in fontSize11 marginRight2 textOpacity1"></span>
114+
<%= polyglot.t('nav.sales') %>
115+
<span class="pull-right txt-muted"><%= config.keyShortcutPrefix + config.keyShortcuts.sales.toUpperCase() %></span>
116+
</a>
117+
<% } %>
118+
<% if(ob.moderator) { %>
119+
<a href="#transactions/cases">
120+
<span class="ion-briefcase fontSize11 marginRight2 textOpacity1"></span>
121+
<%= polyglot.t('nav.cases') %>
122+
<span class="pull-right txt-muted"><%= config.keyShortcutPrefix + config.keyShortcuts.cases.toUpperCase() %></span>
123+
</a>
124+
<% } %>
125+
<hr/>
126+
<a href="#settings">
127+
<span class="ion-toggle-filled fontSize11 marginRight2 textOpacity1"></span>
128+
<%= polyglot.t('nav.settings') %>
129+
<span class="pull-right txt-muted"><%= config.keyShortcutPrefix + config.keyShortcuts.settings.toUpperCase() %></span>
118130
</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>
131+
<hr/>
132+
<a class="js-showAboutModal">
133+
<span class="ion-ios-book fontSize11 marginRight2 textOpacity1"></span>
134+
<%= polyglot.t('nav.about') %>
135+
</a>
136+
<a class="js-showSupportModal">
137+
<span class="ion-android-favorite fontSize11 marginRight2 textOpacity1"></span>
138+
<%= polyglot.t('nav.support') %>
139+
</a>
140+
</div>
141+
142+
<div class="js-serverSubmenu popMenu-navBarSubMenu popMenu-navBarSubMenu-servers" style="right: 222px">
143+
<ol>
144+
<li>happy</li>
145+
<li>hippo</li>
146+
<li>on</li>
147+
<li>the</li>
148+
<li>rize</li>
149+
</ol>
150+
</div>
135151
</div>
136152

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

‎js/views/pageNavVw.js‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,9 @@ module.exports = baseVw.extend({
4444
'click .js-navInstallUpdate': 'sendInstallUpdate',
4545
'click .js-navDismisslUpdate': 'dismissUpdate',
4646
'click [data-popmenu]': 'onPopMenuNavClick',
47-
'click .js-OnboardingIntroDiscover': 'hideDiscoverIntro'
47+
'click .js-OnboardingIntroDiscover': 'hideDiscoverIntro',
48+
'mouseenter .js-server-config-submenu-trigger': 'mouseenterServerSubmenuTrigger',
49+
'mouseleave .js-server-config-submenu-trigger': 'mouseleaveServerSubmenuTrigger'
4850
},
4951

5052
initialize: function(options){
@@ -281,6 +283,8 @@ module.exports = baseVw.extend({
281283

282284
self.addressInput = self.$el.find('.js-navAddressBar');
283285
self.statusBar = self.$el.find('.js-navStatusBar');
286+
self.serverSubmenu = self.$('.js-serverSubmenu');
287+
284288
//listen for address bar set events
285289
self.listenTo(window.obEventBus, "setAddressBar", function(options){
286290
var text = options.handle || options.addressText;
@@ -597,6 +601,17 @@ module.exports = baseVw.extend({
597601
$(e.target).closest('.flexRow').addClass('formChecked');
598602
},
599603

604+
mouseenterServerSubmenuTrigger: function(e) {
605+
this.ServerSubmenuTimeout = setTimeout(() => {
606+
this.serverSubmenu.addClass('server-submenu-opened');
607+
}, 150);
608+
},
609+
610+
mouseleaveServerSubmenuTrigger: function(e) {
611+
clearTimeout(this.ServerSubmenuTimeout);
612+
this.serverSubmenu.removeClass('server-submenu-opened');
613+
},
614+
600615
remove: function() {
601616
$(document).off('click', this.onDocumentClick);
602617

0 commit comments

Comments
 (0)