Merge pull request #606 from amarie401/fix-app-launcher-menu

chore(pfAppLauncher): launcher icon moved to the right to prevent cutoff

Author: dtaylor113

misc/ng-docs.css

@@ -44,6 +44,12 @@
   margin-right: 0px;
 }
 
+a.navbar-brand img {
+  height: inherit;
+  width: inherit;
+  margin-top: inherit;
+}
+
 .navbar img+.brand {
   padding: 10px 20px 10px 10px;
 }

src/navigation/application-launcher.component.js

@@ -24,13 +24,56 @@
      <div class="col-xs-12 pre-demo-text">
        <label>Click the launcher indicator to show the Application Launcher Dropdown:</label>
      </div>
-     <nav class="navbar navbar-pf navbar-collapse">
-       <ul class="nav navbar-left">
-         <li>
-           <pf-application-launcher items="navigationItems" label="{{label}}" is-disabled="isDisabled" is-list="isList" hidden-icons="hiddenIcons"></pf-application-launcher>
-         </li>
-       </ul>
+     <nav class="navbar navbar-default navbar-pf" role="navigation">
+       <div class="navbar-header">
+         <a class="navbar-brand" href="/">
+         <img src="img/brand.svg" alt="PatternFly Enterprise Application">
+         </a>
+       </div>
+       <div class="collapse navbar-collapse navbar-collapse-1">
+         <ul class="nav navbar-nav navbar-utility">
+           <li>
+             <pf-application-launcher items="navigationItems" label="{{label}}" is-disabled="isDisabled" is-list="isList" hidden-icons="ctrl.hiddenIcons === 'true'"></pf-application-launcher>
+           </li>
+           <li class="dropdown">
+             <a class="nav-item-iconic" id="horizontalDropdownMenu11" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+               <span title="Help" class="fa pficon-help"></span>
+               <span class="caret"></span>
+             </a>
+           </li>
+           <li class="dropdown">
+             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+               <span class="pficon pficon-user"></span>Brian Johnson <b class="caret"></b>
+             </a>
+           </li>
+         </ul>
+         <ul class="nav navbar-nav navbar-primary">
+           <li><a href="#">First Link</a></li>
+           <li class="active"><a href="#">Another Link</a></li>
+           <li><a href="#">And Another</a></li>
+           <li><a href="#">As a General Rule</a></li>
+           <li><a href="#">Five to Seven Links</a></li>
+           <li><a href="#">Is Good</a></li>
+         </ul>
+       </div>
      </nav>
+     <div class="col-md-12">
+       <form role="form">
+         <div class="row">
+           <div class="col-md-3">
+             <div class="form-group">
+               <label>Grid Menu</label></br>
+               <label class="radio-inline">
+                 <input type="radio" ng-model="ctrl.hiddenIcons" value="false">Icons</input>
+               </label>
+               <label class="radio-inline">
+                 <input type="radio" ng-model="ctrl.hiddenIcons" value="true">No Icons</input>
+               </label>
+             </div>
+           </div>
+         </div>
+       </form>
+     </div>
    </div>
  </file>
  <file name="script.js">
@@ -66,7 +109,7 @@
        $scope.label = 'Application Launcher';
        $scope.isDisabled = false;
        $scope.isList = false;
-       $scope.hiddenIcons = false;
+       $scope.hiddenIcons = 'false';
      }]);
  </file>
  </example>

test/navigation/application-launcher.spec.js

@@ -48,6 +48,14 @@ describe('Component:  pfApplicationLauncher', function () {
     expect(content.length).toBe(2);
   });
 
+  it('should have dropdown menu to the right', function() {
+    var htmlTmp = '<pf-application-launcher items="sites" label="" is-disabled="false" is-list="true" hidden-icons="true"></div>';
+    compileHTML(htmlTmp, $scope);
+
+    var content = element.find('ul');
+    expect(content.hasClass('dropdown-menu-right')).toBe(true);
+  });
+
   it('should have a custom label', function () {
     var htmlTmp = '<pf-application-launcher items="sites" label="Product Launcher" is-disabled="false" is-list="false" hidden-icons="false"></div>';
     compileHTML(htmlTmp, $scope);