feat(toolbar): add toolbar featuring navigation, gems / subs, bailey, &

chat / invite notifications
This commit is contained in:
Tyler Renelle 2014-02-12 21:21:06 -07:00
parent ce82be637d
commit f72cb21300
5 changed files with 149 additions and 54 deletions

View file

@ -163,3 +163,19 @@ a.label
background-color: #428bca
.badge-success
background-color: #47a447
.white, .white a
color: #fff !important
.collapse-toolbar
position:absolute
right:0px
top:0px
width:30px
height:25px
background-color:#222
z-index:999
.glyphicon
color:white
padding-left:7px
padding-top:5px

View file

@ -4,15 +4,14 @@
.npc_matt
margin-bottom: 20px
.toolbar-bailey-container
width:55px
position:relative
.npc_bailey
float:left
.npc_bailey_head
//height: 30px !important
height: 50px !important
position: absolute
//top: 117px // 147 (header-height) - 30 (bailey height)
top: 97px
right: 50px
top: 4px
cursor: pointer
// Tour (Justin)

View file

@ -20,19 +20,15 @@ html(ng-app="habitrpg", ng-controller="RootCtrl", ng-class='{"applying-action":a
body(ng-cloak, ng-controller='GroupsCtrl')
include ./shared/header/menu
include ./shared/modals/index
include ./shared/header/header
include ./shared/tasks/lists
include ./main/index
include ./options/index
#notification-area(ng-controller='NotificationCtrl')
#wrap.container-fluid
//if they hide the header, we still need user-menu visible
div(ng-if='user.preferences.hideHeader')
include ./shared/header/menu
.row
.col-md-12.exp-chart(ng-show='charts.exp')
#main(ui-view)

View file

@ -1,7 +1,5 @@
.header-wrap(ng-controller='HeaderCtrl')
a.label.label-default.undo-button(x-bind='click:undo', ng-show='_undo')=env.t('undo')
div(ng-if='!user.preferences.hideHeader')
include menu
header.site-header(ng-hide='user.preferences.hideHeader', role='banner', data-partysize='{{party.members.length>1 ? truarr(party.members.length) : 0}}')
// avatar
@ -38,6 +36,3 @@
span(ng-controller='PartyCtrl')
.herobox-wrap(ng-repeat='profile in partyMinusSelf')
include avatar
.npc_bailey.npc_bailey_head(ng-show='user.flags.newStuff', tooltip=env.t('psst'), tooltip-placement='top', ng-click='openModal("newStuff")')

View file

@ -1,41 +1,130 @@
.user-menu(ng-controller='AuthCtrl')
ul.nav.site-nav(ng-show='authenticated()')
li.flyout
h1.task-action-btn.tile.solid.user-reporter {{user.profile.name}}
ul.flyout-content.nav.stacked
li
a.task-action-btn.tile.solid
span(ng-show='$state.includes("options")', ui-sref='tasks')
span.glyphicon.glyphicon-ok
a.collapse-toolbar(popover='Expand Toolbar',popover-placement='left',popover-trigger='mouseenter',ng-if='user.preferences.toolbarCollapsed',ng-click='set({"preferences.toolbarCollapsed":false})')
span.glyphicon.glyphicon-chevron-down
nav.navbar.navbar-inverse(ng-controller='AuthCtrl',style='min-height:0px;margin-bottom:0px;border:0;border-radius:0px',ng-if='!user.preferences.toolbarCollapsed')
ul.nav.navbar-nav.pull-right
li
a(popover='Collapse Toolbar',popover-placement='left',popover-trigger='mouseenter',,ng-if='!user.preferences.toolbarCollapsed',ng-click='set({"preferences.toolbarCollapsed":true})')
span.glyphicon.glyphicon-chevron-up.white
.navbar-header
button.navbar-toggle(type='button', ng-click='isNavbarCollapsed = !isNavbarCollapsed', ng-init='isNavbarCollapsed = true')
span.sr-only Toggle navigation
span.icon-bar
span.icon-bar
span.icon-bar
.collapse.navbar-collapse(collapse="isNavbarCollapsed")
ul.nav.navbar-nav
li(ui-sref='tasks')
a=env.t('tasks')
li.dropdown
a.dropdown-toggle
| Profile
span.caret
ul.dropdown-menu
li
a(ui-sref='options.profile.avatar') Avatar
li
a(ui-sref='options.profile.stats') Stats
li
a(ui-sref='options.profile.profile') Profile
li.dropdown
a.dropdown-toggle
| Social
span.caret
ul.dropdown-menu
li
a(ui-sref='options.social.tavern') Tavern
li
a(ui-sref='options.social.party') Party
li
a(ui-sref='options.social.guilds') Guilds
li
a(ui-sref='options.social.challenges') Challenges
li
a(ui-sref='options.social.hall') Hall
li.dropdown
a.dropdown-toggle
| Market
span.caret
ul.dropdown-menu
li
a(ui-sref='options.inventory.drops') Market
li
a(ui-sref='options.inventory.pets') Pets
li
a(ui-sref='options.inventory.mounts') Mounts
li
a(ui-sref='options.inventory.equipment') Equipment
li.dropdown
a.dropdown-toggle
| Settings
span.caret
ul.dropdown-menu
li
a(ui-sref='options.settings.settings') Settings
li
a(ui-sref='options.settings.api') API
li
a(ui-sref='options.settings.export') Export
li
a(ui-sref='options.settings.subscription') Subscription
li
a(ng-click='logout()')
span.glyphicon.glyphicon-share-alt
|  
=env.t('tasks')
span(ng-show='$state.includes("tasks")', ui-sref='options')
span.glyphicon.glyphicon-wrench
=env.t('logout')
li.dropdown
a.dropdown-toggle
| Help
span.caret
ul.dropdown-menu
li
a(href="http://habitrpg.wikia.com/wiki/FAQ", target='_blank')
span.glyphicon.glyphicon-book
|  
=env.t('options')
li
a.task-action-btn.tile.solid(href="http://habitrpg.wikia.com/wiki/FAQ", target='_blank')
span.glyphicon.glyphicon-book
|  
=env.t('FAQ')
li
a.task-action-btn.tile.solid(href="https://vimeo.com/57654086", target='_blank')
span.glyphicon.glyphicon-film
//|   Tutorials is too long to stay in the menu if we add a space
=env.t('tutorials')
li
a.task-action-btn.tile.solid(ng-click='User.sync()')
span.glyphicon.glyphicon-refresh
|  
=env.t('sync')
li
a.task-action-btn.tile.solid(ng-click='logout()')
span.glyphicon.glyphicon-share-alt
|  
=env.t('logout')
// party invitation notification
a(ng-show='user.party.invitation', x-bind='click:gotoPartyChat')
span.glyphicon.glyphicon-user
// party chat notification
a(ng-show='newChatMessages(_party.chat,user.party.lastMessageSeen)', x-bind='click:gotoPartyChat')
span.glyphicon.glyphicon-comment(tooltip=env.t('partyNotification'))
=env.t('FAQ')
li
a(href="https://vimeo.com/57654086", target='_blank')
span.glyphicon.glyphicon-film
//|   Tutorials is too long to stay in the menu if we add a space
=env.t('tutorials')
li
a(ng-click='User.sync()',popover=env.t('sync'),popover-placement='bottom',popover-trigger='mouseenter')
span.glyphicon.glyphicon-refresh.white
//-|  
//-=env.t('sync')
li(style='border-right:1px solid #999;height:50px;display:block;')
span  
li
a.pull-right.gem-wallet(style='padding-top:8px;padding-bottom:0px;',ng-click='openModal("buyGems",{track:"Gems > Wallet"})', popover-trigger='mouseenter', popover-title=env.t('gems'), popover=env.t('gemsWhatFor'), popover-placement='bottom',popover-append-to-body='true')
//span.task-action-btn.tile.flush.bright.add-gems-btn
span.task-action-btn.tile.flush.neutral
.Pet_Currency_Gem2x.Gems
| {{user.balance * 4 | number:0}}
li
button.btn.btn-primary(style='margin-top:8px;margin-bottom:0px',ng-if='!user.purchased.plan.customerId',ui-sref='options.settings.subscription',popover-trigger='mouseenter',popover-placement='bottom',popover-title='Subscriptions',popover='Disable ads, buy gems with gold, monthly mystery item, retain progress history, double daily drop-caps, supports the devs. Click for more info.',popover-append-to-body='true') Subscribe
button.btn.btn-default(style='margin-top:8px;margin-bottom:0px',ng-if='user.purchased.plan.customerId',ui-sref='options.settings.subscription',popover-trigger='mouseenter',popover-placement='bottom',popover='Click to manage subscription',popover-append-to-body='true') Subscribed
li(ng-if='user.flags.newStuff')
div.toolbar-bailey-container
| 
.npc_bailey.npc_bailey_head(popover=env.t('psst'), popover-trigger='mouseenter', popover-placement='bottom', popover-placement='bottom', ng-click='openModal("newStuff")')
// Invitations
li(ng-if='user.invitations.party.id')
a(ui-sref='options.social.party')
span.glyphicon.glyphicon-user.white(popover='Invited to {{user.invitations.party.name}}',popover-placement='bottom',popover-trigger='mouseenter',popover-append-to-body='true')
li(ng-repeat='guild in user.invitations.guilds')
a(ui-sref='options.social.guilds')
span.glyphicon.glyphicon-user.white(popover='Invited to {{guid.name}}',popover-placement='bottom',popover-trigger='mouseenter',popover-append-to-body='true')
// Chat notifs
li(ng-repeat='(k,v) in user.newMessages', ng-if='v.value')
a(ng-click='k==party._id ? $state.go("options.social.party") : $state.go("options.social.guilds.detail",{gid:k})')
span.glyphicon.glyphicon-comment.white(popover='New message in "{{v.name}}"',popover-placement='bottom',popover-trigger='mouseenter',popover-append-to-body='true')