Ghost/ghost/admin/app/components/gh-nav-menu.hbs
Aileen Nowak f7034c7e91 Updated billing icon in nav bar
no issue

- Replaced placeholder icon with new billing icon
2020-05-28 21:53:38 +12:00

218 lines
12 KiB
Handlebars

<header class="gh-nav-menu">
<div class="gh-nav-menu-details">
<div class="gh-nav-menu-icon" style={{this.iconStyle}}></div>
<div class="gh-nav-menu-details-blog">{{this.config.blogTitle}}</div>
</div>
<div class="gh-nav-menu-search">
<button class="gh-nav-btn-search" {{action "toggleSearchModal"}} title="Search site (Ctrl/⌘ + K)"><span>{{svg-jar "search" class="w4 h4 fill-midgrey"}}</span></button>
</div>
</header>
{{#if this.showSearchModal}}
<GhFullscreenModal @modal="search"
@close={{action "toggleSearchModal"}}
@modifier="action wide" />
{{/if}}
<section class="gh-nav-body">
<div class="gh-nav-top">
<ul class="gh-nav-list gh-nav-main">
<li class="relative">
<span {{action "transitionToOrRefreshSite" on="click"}}>
<LinkTo @route="site" data-test-nav="site" @current-when={{this.isOnSite}} @preventDefault={{false}}>
{{svg-jar "house"}} View site
</LinkTo>
</span>
<a href="{{this.config.blogUrl}}/" class="gh-secondary-action" title="Open site in new tab" target="_blank">
<span>{{svg-jar "expand"}}</span>
</a>
</li>
</ul>
<ul class="gh-nav-list gh-nav-manage">
<li class="gh-nav-list-h">Manage</li>
<li class="gh-nav-list-new relative">
<GhLinkToCustomViewsIndex @route="posts" @query={{reset-query-params "posts"}} data-test-nav="posts">{{svg-jar "posts"}}Posts</GhLinkToCustomViewsIndex>
<LinkTo @route="editor.new" @model="post" @classNames="gh-secondary-action gh-nav-new-post" @alt="New post" @title="New post" data-test-nav="new-story"><span>{{svg-jar "add-stroke"}}</span></LinkTo>
{{#if this.customViews.forPosts}}
<button type="button" class="absolute left-3 top-2 z-9999 flex items-center pl2 h4 gh-nav-button-expand {{if this.navigation.settings.expanded.posts "expanded"}}" {{on "click" (fn this.navigation.toggleExpansion "posts")}}>
{{svg-jar (if this.navigation.settings.expanded.posts "arrow-down-stroke" "arrow-right-stroke")}}
</button>
{{#liquid-if this.navigation.settings.expanded.posts}}
<ul class="gh-nav-view-list">
{{#each this.customViews.forPosts as |view|}}
<li>
<LinkTo @route="posts" @query={{reset-query-params "posts" view.filter}} data-test-nav-custom="{{view.route}}-{{view.name}}" title="{{view.name}}">
{{!-- <div class="dib w4 h4 mr2 bg-{{view.color}} br-100"></div> --}}
<span class="flex items-center svg-{{view.color}}">
{{#if view.icon}}
{{svg-jar (or view.icon "post")}}
{{else}}
<span class="circle"></span>
{{/if}}
</span>
<span class="gh-nav-viewname">{{view.name}}</span>
</LinkTo>
</li>
{{/each}}
</ul>
{{/liquid-if}}
{{/if}}
</li>
<li>
{{!-- clicking the Content link whilst on the content screen should reset the filter --}}
{{#if (eq this.router.currentRouteName "pages")}}
<LinkTo @route="pages" @query={{reset-query-params "pages"}} @classNames="active" data-test-nav="pages">{{svg-jar "page"}}Pages</LinkTo>
{{else}}
<LinkTo @route="pages" data-test-nav="pages">{{svg-jar "page"}}Pages</LinkTo>
{{/if}}
</li>
{{#if (gh-user-can-admin this.session.user)}}
<li><LinkTo @route="tags" data-test-nav="tags">{{svg-jar "tag"}}Tags</LinkTo></li>
{{/if}}
{{#if (and this.feature.members (gh-user-can-admin this.session.user))}}
<li>
<LinkTo @route="members-old" @current-when="members-old member-old" @query={{hash label=null}} data-test-nav="members">{{svg-jar "members"}}Members</LinkTo>
</li>
{{#if this.config.enableDeveloperExperiments}}
<li>
{{#if (eq this.router.currentRouteName "members.index")}}
<LinkTo @route="members" @current-when="members member" @query={{reset-query-params "members.index"}} data-test-nav="members-old">{{svg-jar "members"}}Members (dev)</LinkTo>
{{else}}
<LinkTo @route="members" @current-when="members member" data-test-nav="members-old">{{svg-jar "members"}}Members (dev)</LinkTo>
{{/if}}
</li>
{{/if}}
{{/if}}
<li><LinkTo @route="staff" data-test-nav="staff">{{svg-jar "staff"}}Staff</LinkTo></li>
</ul>
{{#if (gh-user-can-admin this.session.user)}}
<ul class="gh-nav-list gh-nav-settings">
<li class="gh-nav-list-h">Settings</li>
<li><LinkTo @route="settings.general" data-test-nav="settings">{{svg-jar "settings"}}General</LinkTo></li>
<li><LinkTo @route="settings.design" data-test-nav="design">{{svg-jar "paintbrush"}}Design</LinkTo></li>
<li><LinkTo @route="settings.code-injection" data-test-nav="code-injection">{{svg-jar "brackets"}}Code injection</LinkTo></li>
<li><LinkTo @route="settings.integrations" @current-when={{this.isIntegrationRoute}} data-test-nav="integrations">{{svg-jar "modules"}}Integrations</LinkTo></li>
<li class="relative">
<button class="gh-secondary-action" title="Toggle Night shift" {{action (toggle "nightShift" this.feature)}}>
<span>{{svg-jar "nightshift"}}</span>
</button>
<LinkTo @route="settings.labs" data-test-nav="labs">{{svg-jar "labs"}}Labs</LinkTo>
</li>
{{#if this.showBilling}}
<li class="relative">
<a href="javascript:void(0)" {{action "toggleBillingModal"}} data-test-nav="billing">
{{svg-jar "credit-card"}} View billing
</a>
</li>
<li class="relative gh-nav-pro">
<GhBillingUpdateButton />
</li>
{{/if}}
</ul>
{{/if}}
{{#if this.showMenuExtension}}
<ul class="gh-nav-list gh-nav-settings">
{{#if this.config.clientExtensions.menu.title}}
<li class="gh-nav-list-h">{{this.config.clientExtensions.menu.title}}</li>
{{/if}}
{{#each this.config.clientExtensions.menu.items as |menuItem| }}
<li>
<a href="{{menuItem.href}}" target="_blank">{{svg-jar menuItem.icon}}{{menuItem.text}}</a>
</li>
{{/each}}
</ul>
{{/if}}
{{#if this.showScriptExtension}}
{{{this.config.clientExtensions.script.container}}}
<script src="{{this.config.clientExtensions.script.src}}"></script>
{{/if}}
</div>
<div class="gh-nav-bottom">
<GhBasicDropdown @horizontalPosition="left" @verticalPosition="top" @calculatePosition={{this.userDropdownPosition}} as |dropdown|>
<dropdown.Trigger class="flex items-center outline-0 pointer space-between pa2 pl4 pr3">
<div class="flex-auto flex items-center">
<div class="gh-user-avatar relative" style={{background-image-style this.session.user.profileImageUrl}}>
{{#if this.whatsNew.hasNew}}<span class="absolute dib bg-blue ba b--white br-100 gh-whats-new-badge-account"></span>{{/if}}
</div>
<div class="flex flex-column items-start justify-center">
<span class="gh-user-name {{if this.session.user.name "mb1"}}" title="{{this.session.user.name}}">{{this.session.user.name}}</span>
<span class="gh-user-email" title="{{this.session.user.email}}">{{this.session.user.email}}</span>
</div>
</div>
{{svg-jar "arrow-down" class="w3 mr1 fill-darkgrey"}}
</dropdown.Trigger>
<dropdown.Content class="gh-nav-menu-dropdown">
<ul class="dropdown-menu dropdown-triangle-top" role="menu" {{action dropdown.actions.close on="click" preventDefault=false}}>
<li role="presentation">
<LinkTo @route="about" @classNames="dropdown-item" @role="menuitem" @tabindex="-1" data-test-nav="about">
{{svg-jar "store"}} About Ghost
</LinkTo>
</li>
<li role="presentation">
<button class="dropdown-item" role="menuitem" tabindex="-1" {{on "click" this.whatsNew.showModal}}>
{{svg-jar "gift"}} What's new?
{{#if this.whatsNew.hasNew}}
<div class="flex-grow-1 flex justify-end"><span class="dib w2 h2 top-0 right-0 bg-blue br-100"></span></div>
{{/if}}
</button>
</li>
<li class="divider"></li>
<li role="presentation">
<LinkTo @route="staff.user" @model={{this.session.user.slug}} @classNames="dropdown-item" @role="menuitem" @tabindex="-1" data-test-nav="user-profile">
{{svg-jar "user-circle"}} Your Profile
</LinkTo>
</li>
<li role="presentation">
<a class="dropdown-item" role="menuitem" tabindex="-1" href="https://ghost.org/docs/" target="_blank">
{{svg-jar "ambulance"}} Support Center
</a>
</li>
<li role="presentation">
<a class="dropdown-item" role="menuitem" tabindex="-1" target="_blank"
href="https://twitter.com/intent/tweet?text=%40Ghost+Hi%21+Can+you+help+me+with+&related=Ghost"
onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;"
>
{{svg-jar "twitter"}} Tweet @Ghost!
</a>
</li>
<li role="presentation">
<a class="dropdown-item" role="menuitem" tabindex="-1" href="https://ghost.org/faq/using-ghost/" target="_blank">
{{svg-jar "book-open"}} How to Use Ghost
</a>
</li>
<li class="divider"></li>
{{#if this.showDropdownExtension}}
{{#each this.config.clientExtensions.dropdown.items as |menuItem| }}
{{#if menuItem.divider}}
<li class="divider"></li>
{{else}}
<li role="presentation">
<a href="{{menuItem.href}}" target="_blank" class="dropdown-item {{menuItem.classes}}" role="menuitem" tabindex="-1">
{{svg-jar menuItem.icon}} {{menuItem.text}}
</a>
</li>
{{/if}}
{{/each}}
{{/if}}
<li role="presentation">
<LinkTo @route="signout" @classNames="dropdown-item user-menu-signout" @role="menuitem" @tabindex="-1">
{{svg-jar "signout"}} Sign Out
</LinkTo>
</li>
</ul>
</dropdown.Content>
</GhBasicDropdown>
</div>
</section>
<GhTourItem @throbberId="getting-started"
@target=".gh-nav-main"
@throbberAttachment="middle right"
@popoverTriangleClass="left-top"
@throbberOffset="0px 0px"
/>