Feature/New OSF Navbar [EOSF-511]

addon/components/navbar-auth-dropdown/component.js

@@ -1,6 +1,7 @@
 import Ember from 'ember';
 import layout from './template';
 import config from 'ember-get-config';
+import { serviceLinks } from '../../const/service-links';
 
 /**
  * @module ember-osf
@@ -23,7 +24,7 @@ export default Ember.Component.extend({
     layout,
     session: Ember.inject.service(),
     currentUser: Ember.inject.service(),
-
+    i18n: Ember.inject.service(),
     tagName: 'li',
     classNames: ['dropdown'],
     classNameBindings: ['notAuthenticated:sign-in'],
@@ -38,6 +39,7 @@ export default Ember.Component.extend({
      */
     signupUrl: config.OSF.url + 'register',
 
+    serviceLinks: serviceLinks,
     gravatarUrl: Ember.computed('user', function() {
         let imgLink = this.get('user.links.profile_image');
 

addon/components/navbar-auth-dropdown/template.hbs

@@ -1,40 +1,40 @@
 {{# if session.isAuthenticated }}
     {{! TODO: Replace display name functionality if possible- for now truncate via CSS at end of label }}
-    <a href="#" class="dropdown-toggle nav-user-dropdown" data-toggle="dropdown" role="button" aria-expanded="false">
+    <button class="dropdown-toggle nav-user-dropdown btn-link" data-toggle="dropdown" role="button" aria-expanded="false" aria-label={{t 'eosf.authDropdown.toggleAuthDropdown'}} {{action closeOtherNavigation}}>
         <span class="osf-gravatar">
             <img src="{{gravatarUrl}}" alt="User gravatar">
         </span> {{user.fullName}}
         <span class="caret"></span>
-    </a>
-    <ul class="dropdown-menu" role="menu">
+    </button>
+    <ul class="dropdown-menu auth-dropdown" role="menu">
         {{#if headline}}
             <li style="margin-left:10%;">{{headline}}</li>
         {{/if}}
         <li>
-            <a href="{{host}}profile/"><i class="fa fa-user fa-lg p-r-xs"></i> My Profile</a>
+            <a href="{{serviceLinks.profile}}"><i class="fa fa-user fa-lg p-r-xs"></i> {{t 'eosf.authDropdown.myProfile'}}</a>
         </li>
         <li>
-            <a href="{{host}}support/" ><i class="fa fa-life-ring fa-lg p-r-xs"></i> Support</a>
+            <a href="{{serviceLinks.osfSupport}}"><i class="fa fa-life-ring fa-lg p-r-xs"></i> {{t 'eosf.authDropdown.osfSupport'}}</a>
         </li>
 
         <li>
-            <a href="{{host}}settings/"><i class="fa fa-cog fa-lg p-r-xs"></i> Settings</a>
+            <a href="{{serviceLinks.settings}}"><i class="fa fa-cog fa-lg p-r-xs"></i> {{t 'eosf.authDropdown.settings'}}</a>
         </li>
         <li>
-            <a onclick={{action 'logout'}}><i class="fa fa-sign-out fa-lg p-r-xs"></i> Log out</a>
+            <a class="logoutLink" onclick={{action 'logout'}}><i class="fa fa-sign-out fa-lg p-r-xs"></i> {{t 'eosf.authDropdown.logOut'}}</a>
         </li>
     </ul>
 {{else if allowLogin}}
     {{#if institution}}  {{! TODO: How does the page know whether this is an institution view? Implement in the future }}
         <div class="btn-group">
             <a href="${domain}login/?campaign=institution&redirect_url=${redirect_url}" class="btn btn-info btn-top-login">
-                Sign in <span class="hidden-xs"><i class="fa fa-arrow-right"></i></span>
+                {{t 'eosf.authDropdown.signIn'}} <span class="hidden-xs"><i class="fa fa-arrow-right"></i></span>
             </a>
         </div>
     {{else}}
-        <div class="col-sm-12">
-            <a href="{{signupUrl}}" class="btn btn-success btn-top-signup m-r-xs">Sign Up</a>
-            <a {{action loginAction}} class="btn btn-info btn-top-login m-r-xs">Sign in</a>
+        <div>
+            <a href="{{signupUrl}}" class="btn btn-success btn-top-signup m-l-sm m-r-xs">{{t 'eosf.authDropdown.signUp'}}</a>
+            <a {{action loginAction}} class="btn btn-info btn-top-login m-r-xs">{{t 'eosf.authDropdown.signIn'}}</a>
         </div>
     {{/if}}
 {{/if}}

addon/components/osf-footer/component.js

@@ -1,5 +1,6 @@
 import Ember from 'ember';
 import layout from './template';
+import { serviceLinks } from '../../const/service-links';
 
 /**
  * @module ember-osf
@@ -12,6 +13,7 @@ import layout from './template';
  */
 export default Ember.Component.extend({
     layout,
+    serviceLinks: serviceLinks,
     supportEmail: Ember.computed(function() {
         return '<n uers=\"znvygb:pbagnpg@bfs.vb\" ery=\"absbyybj\">Pbagnpg</n>'.replace(
             /[a-zA-Z]/g,

addon/components/osf-footer/template.hbs

@@ -5,11 +5,11 @@
             <div class="col-sm-2 col-md-3 col-md-offset-1">
                 <h4>OSF</h4>
                 <ul>
-                    <li><a href="/explore/activity/">Explore</a></li>
+                    <li><a href="{{serviceLinks.exploreActivity}}">Explore</a></li>
                     <li>
                         {{{supportEmail}}}
                     </li>
-                    <li><a href="/support">FAQ/Guides</a></li>
+                    <li><a href="{{serviceLinks.osfSupport}}">FAQ/Guides</a></li>
                     <li><a href="https://api.osf.io/v2/docs/">API</a></li>
                     <li><a href="https://github.com/CenterForOpenScience/osf.io">Source Code</a></li>
                 </ul>

addon/components/osf-navbar/component.js

@@ -1,5 +1,7 @@
 import Ember from 'ember';
 import layout from './template';
+import { serviceLinks, osfServices } from '../../const/service-links';
+import hostAppName from '../../mixins/host-app-name';
 import config from 'ember-get-config';
 
 /**
@@ -8,35 +10,58 @@ import config from 'ember-get-config';
  */
 
 /**
- * Display the OSF navbar
+ * Display the new OSF navbar - features primary navigation to toggle between services - HOME, PREPRINTS, REGISTRIES, and MEETINGS,
+ * and secondary navigation links for each particular service.
  *
  * Sample usage:
  * ```handlebars
  * {{osf-navbar
  *   loginAction=loginAction
- *   hideSearch=true}}
+ * }}
  * ```
  *
  * @class osf-navbar
  */
-export default Ember.Component.extend({
+export default Ember.Component.extend(hostAppName, {
     layout,
     session: Ember.inject.service(),
-    onSearchPage: false,
-    /**
-     * Whether search icons and functionality show up
-     * @property hideSearch
-     * @type {Boolean}
-     */
-    hideSearch: false,
-
+    osfServices: osfServices,
+    serviceLinks: serviceLinks,
     host: config.OSF.url,
-
+    currentService: Ember.computed('hostAppName', function() { // Pulls current service name from consuming service's config file
+        let appName = this.get('hostAppName') || 'Home';
+        if (appName === 'Dummy App') {
+            appName = 'Home';
+        }
+        return appName.toUpperCase();
+    }),
+    currentServiceLink: Ember.computed('serviceLinks', 'currentService', function() {
+        const serviceMapping = {
+            HOME: 'osfHome',
+            PREPRINTS: 'preprintsHome',
+            REGISTRIES: 'registriesHome',
+            MEETINGS: 'meetingsHome'
+        };
+        const service = this.get('currentService');
+        return this.get('serviceLinks')[serviceMapping[service]];
+    }),
     showSearch: false,
-
     actions: {
+        // Toggles whether search bar is displayed (for searching OSF)
         toggleSearch() {
             this.toggleProperty('showSearch');
+            this.send('closeSecondaryNavigation');
         },
+        closeSecondaryNavigation() {
+            this.$('.navbar-collapse').collapse('hide');
+        },
+        closeSearch() {
+            this.set('showSearch', false);
+        },
+        closeSecondaryAndSearch() {
+            this.send('closeSecondaryNavigation');
+            this.send('closeSearch');
+        }
     }
+
 });

addon/components/osf-navbar/template.hbs

@@ -2,63 +2,54 @@
     <nav class="navbar navbar-inverse navbar-fixed-top" id="navbarScope" role="navigation">
         <div class="container">
             <div class="navbar-header">
-                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
-                    <span class="sr-only">Toggle navigation</span>
+                {{!TOGGLE NAVIGATION BUTTON - XS SCREEN}}
+                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#secondary-navigation" {{action 'closeSearch'}} aria-label={{t 'eosf.navbar.toggleSecondary'}}>
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                 </button>
-                {{#unless hideSearch}}
-                    {{#unless onSearchPage}}
-                        {{!-- TODO: Replace usage of knockout--}}
-                        <span class="visible-xs" data-bind="click : toggleSearch, css: searchCSS">
-                            <a class="osf-xs-search pull-right" {{action "toggleSearch"}} style="padding-top: 12px" >
-                                <span rel="tooltip" data-placement="bottom" title="Search OSF" class="fa fa-search fa-lg fa-inverse" ></span>
-                            </a>
-                        </span>
-                    {{/unless}}
-                {{/unless}}
-                <a class="navbar-brand hidden-sm hidden-xs" href="/"><span class="osf-navbar-logo" width="27"></span> Open Science Framework</a>
-                <a class="navbar-brand visible-sm visible-xs" href="/"><span class="osf-navbar-logo" width="27"></span> OSF</a>
-                {{#if service}}
-                    <a class="navbar-brand navbar-service" href="{{serviceUrl}}"> {{service}}</a>
-                {{/if}}
+                {{!OSF BRAND}}
+                <a class="navbar-brand" href="/" aria-label={{t 'eosf.navbar.goHome'}}><span class="osf-navbar-logo"></span> OSF </a>
+                {{!PRIMARY NAVIGATION - TOGGLE BETWEEN HOME, PREPRINTS, REGISTRIES, and MEETINGS}}
+                <div class="dropdown primary-nav">
+                    <button class="dropdown-toggle btn-link" data-toggle="dropdown" role="button" aria-expanded="false" aria-label={{t 'eosf.navbar.togglePrimary'}} onclick={{action 'closeSecondaryAndSearch'}}>
+                        <span class="fa fa-caret-down fa-2x"></span>
+                    </button>
+                    <ul class="dropdown-menu service-dropdown" role="menu">
+                        {{#each osfServices as |service|}}
+                            <li><a href="{{service.url}}">OSF<b>{{service.name}}</b></a></li>
+                        {{/each}}
+                    </ul>
+                </div>
+                {{!NAME OF CURRENT SERVICE - HOME, PREPRINTS, REGISTRIES, or MEETINGS}}
+                <div class="service-name">
+                    <a href="{{currentServiceLink}}"><strong>{{currentService}}</strong></a>
+                </div>
             </div>
-            <div id="navbar" class="navbar-collapse collapse navbar-right">
+            <div class="navbar-collapse collapse navbar-right" id="secondary-navigation">
                 <ul class="nav navbar-nav">
-                    {{#if session.isAuthenticated}}
-                        <li id="osfNavDashboard"><a href={{host}}>Dashboard</a></li>
-                        <li id="osfNavMyProjects"><a href="{{host}}myprojects/">My Projects</a></li>
-                    {{/if}}
-                    <li class="dropdown">
-                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Browse <span class="caret"></span></a>
-                        <ul class="dropdown-menu" role="menu">
-                            <li><a href="{{host}}explore/activity/">New Projects</a></li>
-                            <li><a href="{{host}}registries/">Registries</a></li>
-                            <li><a href="{{host}}meetings/">Meetings</a></li>
-                            <li><a href="{{host}}preprints/">Preprints</a></li>
-                        </ul>
-                    </li>
-                    {{#unless session.isAuthenticated}}
-                        <li class="dropdown">
-                            <a href="/support/" >Support</a>
-                        </li>
-                    {{/unless}}
-                    {{#unless hideSearch}}
-                        {{#unless onSearchPage}}
-                            <li class="hidden-xs">
-                                <a onclick={{action "toggleSearch"}}>
-                                    <span rel="tooltip" data-placement="bottom" title="Search OSF" class="fa fa-search fa-lg" ></span>
-                                </a>
+                    {{!SECONDARY NAVIGATION - displays corresponding links for selected service}}
+                    {{#each (build-secondary-navLinks currentService) as |navLink|}}
+                        {{#if (and (eq currentService 'HOME') (eq navLink.name.string "Search"))}}
+                            <li>
+                                {{!TOGGLE SEARCH BUTTON FOR HOME SERVICE}}
+                                <button class="btn-link search-toggle" onclick={{action 'toggleSearch'}}>
+                                    {{navLink.name}}
+                                </button>
                             </li>
-                        {{/unless}}
-                    {{/unless}}
-                    {{navbar-auth-dropdown signupUrl=signupUrl loginAction=loginAction}}
+                        {{else}}
+                            {{!SERVICE LINK}}
+                            <li><a href="{{navLink.href}}"> {{navLink.name}}</a></li>
+                        {{/if}}
+                    {{/each}}
+                    {{!AUTH NAVBAR}}
+                    {{navbar-auth-dropdown signupUrl=signupUrl loginAction=loginAction closeOtherNavigation=(action 'closeSearch')}}
                 </ul>
-            </div>{{!--/.navbar-collapse --}}
+            </div>
         </div>
     </nav>
     {{#if showSearch}}
+        {{!SEARCH DROPDOWN (FOR HOME SERVICE) - redirects to /search/?q=search_query}}
         {{search-dropdown action='toggleSearch'}}
     {{/if}}
-</div>
+</div>

addon/components/search-dropdown/component.js

@@ -19,20 +19,25 @@ import config from 'ember-get-config';
 export default Ember.Component.extend({
     layout,
     host: config.OSF.url,
+    i18n: Ember.inject.service(),
     query: null,
+    isOpen: false, // is help modal open?
     actions: {
         // Runs toggleSearch in parent component, osf-navbar
         toggleSearch() {
             this.sendAction('action');
         },
-        updateQuery(value) {
-            this.set('query', value);
-        },
         search() {
             var query = this.get('query');
             if (query) {
                 window.location.href = this.host + 'search/?q=' + query;
             }
+        },
+        close() {
+            this.set('isOpen', false);
+        },
+        toggleHelpModal() {
+            this.toggleProperty('isOpen');
         }
     }
 });

addon/components/search-dropdown/template.hbs

@@ -1,17 +1,48 @@
+{{!Green OSF Search bar}}
 <div class="osf-search">
     <div class="container">
         <div class="row">
             <div class="col-md-12">
                 <form class="input-group" {{action "search" on="submit"}}>
-                    <input id="searchPageFullBar" onchange={{action "updateQuery" value="target.value"}} name="search-placeholder" type="text" class="osf-search-input form-control" placeholder="Search">
-                    <label id="searchBarLabel" class="search-label-placeholder" for="search-placeholder">Search</label>
+                    {{!Search bar}}
+                    {{input value=query name='search-placeholder' class='osf-search-input form-control' placeholder=(t 'eosf.navbar.searchTheOSF')}}
+                    <label id="searchBarLabel" class="search-label-placeholder" for="search-placeholder">{{t 'eosf.navbar.search'}}</label>
                     <span class="input-group-btn">
-                        <button type="submit" class="btn osf-search-btn"><i class="fa fa-arrow-circle-right fa-lg"></i></button>
-                        <button type="button" class="btn osf-search-btn" data-toggle="modal" data-target="#search-help-modal"><i class="fa fa-question fa-lg"></i></button>
-                        <button type="button" class="btn osf-search-btn" onclick={{action "toggleSearch"}}><i class="fa fa-times fa-lg"></i></button>
+                        {{!Submit search, search help, and cancel search buttons}}
+                        <button type="submit" class="btn osf-search-btn" aria-label={{t 'eosf.navbar.sendSearch'}}><i class="fa fa-arrow-circle-right fa-lg"></i></button>
+                        <button type="button" class="btn osf-search-btn" aria-label={{t 'eosf.navbar.searchHelp'}} data-toggle="modal" {{action 'toggleHelpModal'}}><i class="fa fa-question fa-lg"></i></button>
+                        <button type="button" class="btn osf-search-btn" aria-label={{t 'eosf.navbar.cancelSearch'}} onclick={{action "toggleSearch"}}><i class="fa fa-times fa-lg"></i></button>
                     </span>
                 </form>
             </div>
         </div>
     </div>
 </div>
+
+{{!Search help modal - appears after clicking question mark on green search dropdown}}
+<div id="ember-bootstrap-modal-container">
+    {{#bs-modal open=isOpen body=false header=false footer=false}}
+        {{#bs-modal-header}}
+            <h3 class="modal-title">{{t 'eosf.searchHelpModal.searchHelp'}}</h3>
+        {{/bs-modal-header}}
+        {{#bs-modal-body}}
+            <h4> {{t 'eosf.searchHelpModal.queries'}} </h4>
+            <p>
+                {{t 'eosf.searchHelpModal.searchUsesThe'}} <a href="http://extensions.xwiki.org/xwiki/bin/view/Extension/Search+Application+Query+Syntax">Lucene {{t 'eosf.searchHelpModal.searchSyntax'}}</a>.
+                {{t 'eosf.searchHelpModal.helpDescription'}}
+            </p>
+            <ul>
+                <li><a href="{{host}}search/?q=repro*">repro*</a></li>
+                <li><a href="{{host}}search/?q=brian+AND+title%3Amany">brian AND title:many</a></li>
+                <li><a href="{{host}}search/?q=tags%3A%28psychology%29">tags:(psychology)</a></li>
+            </ul>
+        {{/bs-modal-body}}
+
+        {{#bs-modal-footer}}
+            <div align="right">
+                <button {{action 'close'}} class="btn btn-default"> {{t 'eosf.searchHelpModal.close'}} </button>
+            </div>
+        {{/bs-modal-footer}}
+    {{/bs-modal}}
+
+</div>