sudoxreboot/habitica-self-host
1
0
Fork 0
mirror of https://github.com/sudoxnym/habitica-self-host.git synced 2026-07-21 13:24:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #3402 from benmanley/toolbar-toggle

Browse source 
feat(toolbar): add button to hide/show toolbar
This commit is contained in:
Tyler Renelle 2014-05-07 15:19:00 -06:00
commit 628ea0accd
3 changed files with 233 additions and 163 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
public/css/header.styl
View file

@ -2,17 +2,19 @@
-------------------- */
.header-wrap
width: 100% // this is for the sticky
padding: 46px 0 0 0 // add padding-top when navbar is fixed
@media screen and (max-width:768px) // remove padding-top when navbar is static
padding: 0
z-index: 100
padding: 46px 0 0 0 // add padding-top when toolbar is fixed
background-color: darken($color-herobox, 8%)
border-bottom: 1px solid rgba(0,0,0,0.2)
// margin-top: -1px
overflow-y: hidden
overflow-x: auto
// position relative
@media screen and (max-width:768px) // remove padding-top when toolbar is static
padding: 0
.toolbar.active ~ .header-wrap
padding: 0 // remove padding when toolbar is hidden
/* login/menu buttons
--------------------- */
.user-menu

77
public/css/menu.styl
View file

@ -1,11 +1,64 @@
// Custom styles for the menu aka toolbar aka navbar
// Top level navigation bar – toolbar – menu – nav
.toolbar
width:100%;
top:0
left:0
right:0
width: 100%
z-index:998
background-color: $color-toolbar
border-bottom: 1px solid darken($color-herobox, 12%)
.toolbar.active
width: auto
@media screen and (min-width:768px)
.toolbar
position:fixed
// Button to toggle toolbar visibility
.toolbar-toggle
float:right
padding: 0.9em 0.3em
overflow: hidden
width: 1.6em
z-index:4000
border:none
border-left: 1px solid darken($color-toolbar, 16.18%)
background:none
background-color: darken($color-toolbar, 3.82%)
span
display: inline-block
color: darken($color-toolbar, 38.2%)
.glyphicon
animation: toggle-open 0.382s linear both
.toggle-text
display: none
padding-left: 0.382em
&:focus, &:active
outline:none
&:hover, &.active, &:focus
width: auto
padding-left: 0.618em
padding-right: 0.618em
.toggle-text
display: inline-block
padding-left: 0.382em
.toggle-open
display:none
&.active
span
color: darken($color-toolbar, 70%)
.toggle-close
display:none
.toggle-open
display: inline-block
&:hover, &:focus
background-color: darken($color-toolbar, 3.82%)
border-left: 1px solid darken($color-toolbar, 16.18%)
&.active, &:focus.active
background-color: darken($color-herobox, 8%)
.glyphicon
animation: toggle-close 0.382s linear both
&:focus.active
border-left: 1px solid darken($color-toolbar, 38.2%)
border-bottom: 1px solid darken($color-toolbar, 38.2%)
.toolbar-container
> ul > li
display: inline-block
// Mobile menu button
@ -73,9 +126,6 @@
.toolbar-sync, .toolbar-settings
@extend $hrpg-button
hrpg-button-color-mixin($color-toolbar)
@media screen and (min-width:768px)
.toolbar
position:fixed
// Notifications icon and dropdown
.toolbar-notifs
@extend $hrpg-button
@ -114,6 +164,8 @@
.toolbar-subscribe-button, .toolbar-controls .toolbar-subscribe-button
@extend $hrpg-button-call-to-action
@media screen and (max-width:768px)
.toolbar-toggle
display: none
.toolbar-mobile, .toolbar-settings
.toolbar-submenu
padding-left: 1em
@ -123,4 +175,15 @@
a
padding-left: 0em
.toolbar-subscribe
display:none
display:none
//Animations
@keyframes toggle-close
0%
transform: rotate(0deg)
100%
transform: rotate(45deg)
@keyframes toggle-open
0%
transform: rotate(45deg)
100%
transform: rotate(0deg)

309
views/shared/header/menu.jade
View file

@ -1,22 +1,75 @@
nav.toolbar(ng-controller='AuthCtrl')
ul.toolbar-mobile-nav
li.toolbar-mobile
a(ng-click='expandMenu("mobile")', ng-class='{active: _expandedMenu=="mobile"}')
span ☰
div(ng-if='_expandedMenu=="mobile"', ng-click='expandMenu(null)')
h4=env.t('menu')
div
ul.toolbar-submenu
li
a(ui-sref='tasks')=env.t('tasks')
ul.toolbar-submenu
nav.toolbar(ng-controller='AuthCtrl', ng-class='{active: isToolbarHidden}')
button.toolbar-toggle(ng-click='isToolbarHidden = !isToolbarHidden', ng-class='{active: isToolbarHidden}')
span.glyphicon.glyphicon-remove-circle
span.toggle-text.toggle-close=env.t('close')
span.toggle-text.toggle-open=env.t('menu')
.toolbar-container(ng-if='!isToolbarHidden')
ul.toolbar-mobile-nav
li.toolbar-mobile
a(ng-click='expandMenu("mobile")', ng-class='{active: _expandedMenu=="mobile"}')
span ☰
div(ng-if='_expandedMenu=="mobile"', ng-click='expandMenu(null)')
h4=env.t('menu')
div
ul.toolbar-submenu
li
a(ui-sref='tasks')=env.t('tasks')
ul.toolbar-submenu
li
a(ui-sref='options.profile.avatar')=env.t('avatar')
li
a(ui-sref='options.profile.stats')=env.t('stats')
li
a(ui-sref='options.profile.profile')=env.t('profile')
ul.toolbar-submenu
li
a(ui-sref='options.social.tavern')=env.t('tavern')
li
a(ui-sref='options.social.party')=env.t('party')
li
a(ui-sref='options.social.guilds')=env.t('guilds')
li
a(ui-sref='options.social.challenges')=env.t('challenges')
li
a(ui-sref='options.social.hall')=env.t('hall')
ul.toolbar-submenu
li
a(ui-sref='options.inventory.drops')=env.t('market')
li
a(ui-sref='options.inventory.pets')=env.t('pets')
li
a(ui-sref='options.inventory.mounts')=env.t('mounts')
li
a(ui-sref='options.inventory.equipment')=env.t('equipment')
ul.toolbar-controls
li.toolbar-subscribe-button
button(ng-if='!user.purchased.plan.customerId',ui-sref='options.settings.subscription',popover-trigger='mouseenter',popover-placement='bottom',popover-title=env.t('subscriptions'),popover=env.t('subDescription'),popover-append-to-body='true')=env.t('subscribe')
li.toolbar-controls-button
a(ng-click='expandMenu(null)')=env.t('close')
ul.toolbar-nav
li.toolbar-button
a(ui-sref='tasks')
span=env.t('tasks')
li.toolbar-button-dropdown
a(ui-sref='options.profile.avatar')
span=env.t('user')
a(ng-click='expandMenu("avatar")', ng-class='{active: _expandedMenu == "avatar"}')
span ☰
div(ng-if='_expandedMenu == "avatar"')
ul.toolbar-submenu(ng-click='expandMenu(null)')
li
a(ui-sref='options.profile.avatar')=env.t('avatar')
li
a(ui-sref='options.profile.stats')=env.t('stats')
li
a(ui-sref='options.profile.profile')=env.t('profile')
ul.toolbar-submenu
a(ui-sref='options.profile.profile')=env.t('profile')
li.toolbar-button-dropdown
a(ui-sref='options.social.tavern')
span=env.t('social')
a(ng-click='expandMenu("social")', ng-class='{active: _expandedMenu == "social"}')
span ☰
div(ng-if='_expandedMenu == "social"')
ul.toolbar-submenu(ng-click='expandMenu(null)')
li
a(ui-sref='options.social.tavern')=env.t('tavern')
li
@ -27,7 +80,13 @@ nav.toolbar(ng-controller='AuthCtrl')
a(ui-sref='options.social.challenges')=env.t('challenges')
li
a(ui-sref='options.social.hall')=env.t('hall')
ul.toolbar-submenu
li.toolbar-button-dropdown
a(ui-sref='options.inventory.drops')
span=env.t('inventory')
a(ng-click='expandMenu("inventory")', ng-class='{active: _expandedMenu == "inventory"}')
span ☰
div(ng-if='_expandedMenu == "inventory"')
ul.toolbar-submenu(ng-click='expandMenu(null)')
li
a(ui-sref='options.inventory.drops')=env.t('market')
li
@ -36,140 +95,86 @@ nav.toolbar(ng-controller='AuthCtrl')
a(ui-sref='options.inventory.mounts')=env.t('mounts')
li
a(ui-sref='options.inventory.equipment')=env.t('equipment')
ul.toolbar-controls
li.toolbar-subscribe-button
button(ng-if='!user.purchased.plan.customerId',ui-sref='options.settings.subscription',popover-trigger='mouseenter',popover-placement='bottom',popover-title=env.t('subscriptions'),popover=env.t('subDescription'),popover-append-to-body='true')=env.t('subscribe')
li.toolbar-controls-button
a(ng-click='expandMenu(null)')=env.t('close')
ul.toolbar-nav
li.toolbar-button
a(ui-sref='tasks')
span=env.t('tasks')
li.toolbar-button-dropdown
a(ui-sref='options.profile.avatar')
span=env.t('user')
a(ng-click='expandMenu("avatar")', ng-class='{active: _expandedMenu == "avatar"}')
span ☰
div(ng-if='_expandedMenu == "avatar"')
ul.toolbar-submenu(ng-click='expandMenu(null)')
li
a(ui-sref='options.profile.avatar')=env.t('avatar')
li
a(ui-sref='options.profile.stats')=env.t('stats')
li
a(ui-sref='options.profile.profile')=env.t('profile')
li.toolbar-button-dropdown
a(ui-sref='options.social.tavern')
span=env.t('social')
a(ng-click='expandMenu("social")', ng-class='{active: _expandedMenu == "social"}')
span ☰
div(ng-if='_expandedMenu == "social"')
ul.toolbar-submenu(ng-click='expandMenu(null)')
li
a(ui-sref='options.social.tavern')=env.t('tavern')
li
a(ui-sref='options.social.party')=env.t('party')
li
a(ui-sref='options.social.guilds')=env.t('guilds')
li
a(ui-sref='options.social.challenges')=env.t('challenges')
li
a(ui-sref='options.social.hall')=env.t('hall')
li.toolbar-button-dropdown
a(ui-sref='options.inventory.drops')
span=env.t('inventory')
a(ng-click='expandMenu("inventory")', ng-class='{active: _expandedMenu == "inventory"}')
span ☰
div(ng-if='_expandedMenu == "inventory"')
ul.toolbar-submenu(ng-click='expandMenu(null)')
li
a(ui-sref='options.inventory.drops')=env.t('market')
li
a(ui-sref='options.inventory.pets')=env.t('pets')
li
a(ui-sref='options.inventory.mounts')=env.t('mounts')
li
a(ui-sref='options.inventory.equipment')=env.t('equipment')
ul.toolbar-subscribe
li.toolbar-subscribe-button
button(ng-if='!user.purchased.plan.customerId',ui-sref='options.settings.subscription',popover-trigger='mouseenter',popover-placement='bottom',popover-title=env.t('subscriptions'),popover=env.t('subDescription'),popover-append-to-body='true')=env.t('subscribe')
ul.toolbar-options
li.toolbar-notifs
a(ng-click='expandMenu("notifs")')
span.glyphicon.glyphicon-comment(ng-if='!user.invitations.party.id && !user.purchased.plan.mysteryItems.length && user.invitations.guilds.length === 0', ng-class='{inactive: _.isEmpty(user.newMessages)}')
span.glyphicon.glyphicon-user(ng-if='!user.purchased.plan.mysteryItems.length && (user.invitations.party.id || user.invitations.guilds.length > 0)')
span.glyphicon.glyphicon-gift(ng-if='user.purchased.plan.mysteryItems.length')
div(ng-if='_expandedMenu=="notifs"')
h4=env.t('notifications')
div
ul.toolbar-notifs-notifs
li.toolbar-notifs-no-messages(ng-if='!user.invitations.party.id && !user.purchased.plan.mysteryItems.length && user.invitations.guilds.length === 0 && _.isEmpty(user.newMessages)')=env.t('noNotifications')
li(ng-if='user.purchased.plan.mysteryItems.length')
a(ng-click='$state.go("options.inventory.drops"); expandMenu(null)')
span.glyphicon.glyphicon-gift
span=env.t('newSubscriberItem')
li(ng-if='user.invitations.party.id')
a(ui-sref='options.social.party', ng-click='expandMenu(null)')
span.glyphicon.glyphicon-user
span=env.t('invitedTo', {name: '{{user.invitations.party.name}}'})
li(ng-repeat='guild in user.invitations.guilds')
a(ui-sref='options.social.guilds', ng-click='expandMenu(null)')
span.glyphicon.glyphicon-user
span=env.t('invitedTo', {name: '{{guild.name}}'})
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}); expandMenu(null)')
span.glyphicon.glyphicon-comment
span {{v.name}}
a(ng-click='Groups.seenMessage(k)', popover=env.t('clear'),popover-placement='right',popover-trigger='mouseenter',popover-append-to-body='true')
span.glyphicon.glyphicon-remove-circle
ul.toolbar-controls
//-li
//-a(ng-click='') Clear all
li.toolbar-controls-button
a(ng-click='expandMenu(null)')=env.t('close')
li.toolbar-sync
a(ng-click='User.sync()', popover=env.t('sync'),popover-placement='bottom',popover-trigger='mouseenter')
span.glyphicon.glyphicon-refresh
li.toolbar-settings
a(ng-click='expandMenu("settings")')
span.glyphicon.glyphicon-cog
div(ng-if='_expandedMenu=="settings"')
h4=env.t('settings')
div
ul.toolbar-submenu(ng-click='expandMenu(null)')
li
a(ng-click='logout()')=env.t('logout')
ul.toolbar-submenu(ng-click='expandMenu(null)')
li
a(ui-sref='options.settings.settings')=env.t('site')
li
a(ui-sref='options.settings.api')=env.t('API')
li
a(ui-sref='options.settings.export')=env.t('export')
li
a(ui-sref='options.settings.coupon') Coupon
li
a(ui-sref='options.settings.subscription')=env.t('subscription')
ul.toolbar-submenu(ng-click='expandMenu(null)')
li
a(href="http://habitrpg.wikia.com/wiki/FAQ", target='_blank')=env.t('FAQ')
li
a(href="https://vimeo.com/57654086", target='_blank')=env.t('tutorials')
ul.toolbar-controls
li.toolbar-controls-button
a(ng-click='expandMenu(null)')=env.t('close')
ul.toolbar-wallet
li.toolbar-gems
a.gem-wallet(ng-click='openModal("buyGems",{track:"Gems > Toolbar"})', 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.Pet_Currency_Gem2x.Gems
span.gem-text {{user.balance * 4 | number:0}}
li.toolbar-currency.gold(popover=env.t('gold'), popover-placement='bottom',popover-trigger='mouseenter')
span.shop_gold
span {{Shared.gold(user.stats.gp) | goldRoundThousandsToK}}
li.toolbar-currency.silver(popover=env.t('silver'), popover-placement='bottom',popover-trigger='mouseenter')
span.shop_silver
span {{Shared.silver(user.stats.gp)}}
ul.toolbar-bailey(ng-class='{inactive: !_expandedMenu}')
li.toolbar-bailey-container(ng-if='user.flags.newStuff')
.npc_bailey.npc_bailey_head(popover=env.t('psst'), popover-trigger='mouseenter', popover-placement='right', ng-click='openModal("newStuff")')
ul.toolbar-subscribe(ng-if='!user.purchased.plan.customerId')
li.toolbar-subscribe-button
button(ui-sref='options.settings.subscription',popover-trigger='mouseenter',popover-placement='bottom',popover-title=env.t('subscriptions'),popover=env.t('subDescription'),popover-append-to-body='true')=env.t('subscribe')
ul.toolbar-options
li.toolbar-notifs
a(ng-click='expandMenu("notifs")')
span.glyphicon.glyphicon-comment(ng-if='!user.invitations.party.id && !user.purchased.plan.mysteryItems.length && user.invitations.guilds.length === 0', ng-class='{inactive: _.isEmpty(user.newMessages)}')
span.glyphicon.glyphicon-user(ng-if='!user.purchased.plan.mysteryItems.length && (user.invitations.party.id || user.invitations.guilds.length > 0)')
span.glyphicon.glyphicon-gift(ng-if='user.purchased.plan.mysteryItems.length')
div(ng-if='_expandedMenu=="notifs"')
h4=env.t('notifications')
div
ul.toolbar-notifs-notifs
li.toolbar-notifs-no-messages(ng-if='!user.invitations.party.id && !user.purchased.plan.mysteryItems.length && user.invitations.guilds.length === 0 && _.isEmpty(user.newMessages)')=env.t('noNotifications')
li(ng-if='user.purchased.plan.mysteryItems.length')
a(ng-click='$state.go("options.inventory.drops"); expandMenu(null)')
span.glyphicon.glyphicon-gift
span=env.t('newSubscriberItem')
li(ng-if='user.invitations.party.id')
a(ui-sref='options.social.party', ng-click='expandMenu(null)')
span.glyphicon.glyphicon-user
span=env.t('invitedTo', {name: '{{user.invitations.party.name}}'})
li(ng-repeat='guild in user.invitations.guilds')
a(ui-sref='options.social.guilds', ng-click='expandMenu(null)')
span.glyphicon.glyphicon-user
span=env.t('invitedTo', {name: '{{guild.name}}'})
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}); expandMenu(null)')
span.glyphicon.glyphicon-comment
span {{v.name}}
a(ng-click='Groups.seenMessage(k)', popover=env.t('clear'),popover-placement='right',popover-trigger='mouseenter',popover-append-to-body='true')
span.glyphicon.glyphicon-remove-circle
ul.toolbar-controls
//-li
//-a(ng-click='') Clear all
li.toolbar-controls-button
a(ng-click='expandMenu(null)')=env.t('close')
li.toolbar-sync
a(ng-click='User.sync()', popover=env.t('sync'),popover-placement='bottom',popover-trigger='mouseenter')
span.glyphicon.glyphicon-refresh
li.toolbar-settings
a(ng-click='expandMenu("settings")')
span.glyphicon.glyphicon-cog
div(ng-if='_expandedMenu=="settings"')
h4=env.t('settings')
div
ul.toolbar-submenu(ng-click='expandMenu(null)')
li
a(ng-click='logout()')=env.t('logout')
ul.toolbar-submenu(ng-click='expandMenu(null)')
li
a(ui-sref='options.settings.settings')=env.t('site')
li
a(ui-sref='options.settings.api')=env.t('API')
li
a(ui-sref='options.settings.export')=env.t('export')
li
a(ui-sref='options.settings.coupon') Coupon
li
a(ui-sref='options.settings.subscription')=env.t('subscription')
ul.toolbar-submenu(ng-click='expandMenu(null)')
li
a(href="http://habitrpg.wikia.com/wiki/FAQ", target='_blank')=env.t('FAQ')
li
a(href="https://vimeo.com/57654086", target='_blank')=env.t('tutorials')
ul.toolbar-controls
li.toolbar-controls-button
a(ng-click='expandMenu(null)')=env.t('close')
ul.toolbar-wallet
li.toolbar-gems
a.gem-wallet(ng-click='openModal("buyGems",{track:"Gems > Toolbar"})', 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.Pet_Currency_Gem2x.Gems
span.gem-text {{user.balance * 4 | number:0}}
li.toolbar-currency.gold(popover=env.t('gold'), popover-placement='bottom',popover-trigger='mouseenter')
span.shop_gold
span {{Shared.gold(user.stats.gp) | goldRoundThousandsToK}}
li.toolbar-currency.silver(popover=env.t('silver'), popover-placement='bottom',popover-trigger='mouseenter')
span.shop_silver
span {{Shared.silver(user.stats.gp)}}
ul.toolbar-bailey(ng-class='{inactive: !_expandedMenu}')
li.toolbar-bailey-container(ng-if='user.flags.newStuff')
.npc_bailey.npc_bailey_head(popover=env.t('psst'), popover-trigger='mouseenter', popover-placement='right', ng-click='openModal("newStuff")')