Merge pull request #90 from OfficeDev/v-miljo/commandbar-js

Command Bar Fixes
OfficeDev · Sep 4, 2015 · ad4c308 · ad4c308
2 parents 693b439 + bb4c237
commit ad4c308
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 87 deletions.
diff --git a/gulp/fabric.js b/gulp/fabric.js
@@ -411,7 +411,7 @@ gulp.task('fabric-components-js', ['clean-fabric-components'], function() {
 // Sample Component Building
 // ----------------------------------------------------------------------------
 
-gulp.task('build-component-data', ['clean-samples'], folders(paths.componentsPath, function (folder) {
+gulp.task('build-component-data', ['clean-component-samples'], folders(paths.componentsPath, function (folder) {
 
     var manifest = parseManifest(folder);
     var filesArray = manifest.fileOrder;

diff --git a/src/components/CommandBar/CommandBar.html b/src/components/CommandBar/CommandBar.html
@@ -55,7 +55,7 @@
     <div class="ms-CommandBarItem">
       <div class="ms-CommandBarItem-linkWrapper">
         <div class="ms-CommandBarItem-link">
-          <span class="ms-CommandBarItem-icon ms-Icon ms-Icon--onedriveAdd"></span>
+          <span class="ms-CommandBarItem-icon ms-Icon ms-Icon--save"></span>
           <span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular">Documents</span>
            <i class="ms-CommandBarItem-chevronDown ms-Icon ms-Icon--chevronDown"></i>
         </div>

diff --git a/src/components/CommandBar/CommandBar.less b/src/components/CommandBar/CommandBar.less
@@ -31,6 +31,10 @@
 @SearchBox-sidePadding: 8px; // padding in input on left and right sides without icons
 @SearchBox-smallWidth: 36px;  
 
+.highContrastBorder(@color) {
+    border-left: 1px solid @color;
+    border-right: 1px solid @color;
+}
 
 .ms-CommandBar {
   background-color: @ms-color-themeLighterAlt;
@@ -39,9 +43,10 @@
   padding-left: 0;
   padding-right: 15px;
   border: 0;
+  position: relative;
 
   &:focus {
-      outline: none;
+    outline: none;
   }
 }
 
@@ -53,13 +58,10 @@
 .ms-CommandBar-sideCommands {
   float: right;
   text-align: right;
-
-  @media only screen and (max-width: @ms-screen-sm-max) {
-     width: auto;
-  }
+  width: auto;
 
   @media only screen and (min-width: @ms-screen-md-min) {
-      min-width: @CommandBar-sideAreaWidthsm;
+    min-width: @CommandBar-sideAreaWidthsm;
   }
 }
 
@@ -72,16 +74,19 @@
   outline: none;
   vertical-align: top;
 
+  .ms-CommandBarItem-chevronDown,
+  .ms-CommandBarItem-commandText {
+    display: none;
+  }
+
   @media screen and (-ms-high-contrast: active) {
-    border-left: 1px solid @ms-color-black;
-    border-right: 1px solid @ms-color-black;
+    .highContrastBorder(@ms-color-black);
     height: 38px;
     outline: none;
   }
 
   @media screen and (-ms-high-contrast: black-on-white) {
-    border-left: 1px solid @ms-color-white;
-    border-right: 1px solid @ms-color-white;
+    .highContrastBorder(@ms-color-white);
     height: 38px;
     outline: none;
   }
@@ -91,64 +96,28 @@
     color: @ms-color-themePrimary;
 
     @media screen and (-ms-high-contrast: active) {
-      border-left: 1px solid @ms-color-white;
-      border-right: 1px solid @ms-color-white;
-    }
-
-    @media screen and (-ms-high-contrast: black-on-white) {
-      border-left: 1px solid @ms-color-black;
-      border-right: 1px solid @ms-color-black;
-    }
-  }
-
-  &.is-toggled {
-    background: @ms-color-themeLight;
-    color: @ms-color-themeDark;
-
-    @media screen and (-ms-high-contrast: active) {
-      border-left: 1px solid @ms-color-white;
-      border-right: 1px solid @ms-color-white;
-    }
-
-    @media screen and (-ms-high-contrast: black-on-white) {
-      border-left: 1px solid @ms-color-black;
-      border-right: 1px solid @ms-color-black;
-    }
-  }
-
-  &.is-toggled:hover {
-    background: @ms-color-neutralTertiaryAlt;
-    color: @ms-color-themeDark;
-
-    @media screen and (-ms-high-contrast: active) {
-      border-left: 1px solid @ms-color-white;
-      border-right: 1px solid @ms-color-white;
+      .highContrastBorder(@ms-color-white);
     }
 
     @media screen and (-ms-high-contrast: black-on-white) {
-      border-left: 1px solid @ms-color-black;
-      border-right: 1px solid @ms-color-black;
+      .highContrastBorder(@ms-color-black);
     }
   }
 
   // Hide labels and Chevrons SM-MD
-  @media only screen and (max-width: @ms-screen-md-max) {
+  @media only screen and (min-width: @ms-screen-lg-min) {
     .ms-CommandBarItem-chevronDown,
     .ms-CommandBarItem-commandText {
-      display: none;
+      display: inline;
     }
   }
 
-  @media only screen and (max-width: @ms-screen-lg-max) {
-    margin-right: 0;
-  }
 }
 
 .ms-CommandBarItem.is-hidden {
   display: none;
 }
-
-
+
 //== Modifier: For commands with only an icon
 //
 .ms-CommandBarItem.icon-only,
@@ -175,10 +144,7 @@
   min-width: 22px;
   text-align: center;
   position: relative;
-
-  @media only screen and (max-width: @ms-screen-lg-max) {
-    padding: 0 6px;
-  }
+  padding: 0 6px;
 
   @media only screen and (min-width: @ms-screen-lg-min) {
     padding-right: 8px;
@@ -302,21 +268,29 @@
   display: none;
   top: 1px;
   right: 0px;
+  z-index: @ms-zIndex-front;
 }
 
 
-//== Modifier: Puts search in an active state
+//== State: Puts search in an active state
 //
-.ms-CommandBarSearch--active {
+.ms-CommandBarSearch.is-active {
   background-color: @ms-color-themeLight;
   color: @ms-color-black;
 
+  @media only screen and (max-width: @ms-screen-md-max) {
+    width: 100%;
+    position: absolute;
+    z-index: @ms-zIndex-front;
+    max-width: 100%;
+  }
+
   &:hover {
     background-color: @ms-color-themeLight;
     color: @ms-color-black;
   }
-
-  & .ms-CommandBarSearch-input {
+  
+  .ms-CommandBarSearch-input {
     cursor: text;
     padding-right: @SearchBox-height; // leave room for the X
     border-left-width: @SearchBox-sidePadding;
@@ -334,19 +308,14 @@
   &.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-iconArrowWrapper {
     display: block;
   }
-}
-
 
-//== Modifier: After search is active and has text, add X for clearing the box
-//
-.ms-CommandBarSearch--active.ms-CommandBarSearch--hasText {
-    & .ms-CommandBarSearch-input {
-      padding-right: @SearchBox-height;
-    }
+  .ms-CommandBarSearch-input {
+    padding-right: @SearchBox-height;
+  }
 
-    & .ms-CommandBarSearch-iconClearWrapper {
-      display: block;
-    }
+  .ms-CommandBarSearch-iconClearWrapper {
+    display: block;
+  }
 }
 
 .ms-CommandBarSearch-iconWrapper {

diff --git a/src/components/CommandBar/Jquery.CommandBar.js b/src/components/CommandBar/Jquery.CommandBar.js
@@ -38,7 +38,7 @@
               overFlowCommands.push($Item);
             } else {
               // Make sure item is displayed
-              $Item.removeClass('hideCommand');
+              $Item.removeClass('is-hidden');
             }
           }
         }
@@ -88,6 +88,15 @@
       overFlowCommands = processCommands(allCommands, $CommandMainArea.innerWidth());
       processOverflow(overFlowCommands, $OverflowCommand, $OverflowMenu);
 
+      // Set Search Behavior
+      if($(window).width() < 640) {
+
+        $('.ms-CommandBarSearch').click(function() {
+          $(this).addClass('is-active');
+        });
+
+      }
+
       // Add resize event handler on commandBar
       $(window).resize(function() {
         var overFlowCommands;
@@ -97,10 +106,20 @@
         if($(window).width() < 640 && mobileSwitch == false) {
           allCommands = saveCommands($CommandBarItems, $OverflowCommandWidth, $CommandMainArea);
           mobileSwitch = true;
+
+          // Search Behavior
+          $('.ms-CommandBarSearch').unbind();
+          $('.ms-CommandBarSearch').click(function() {
+            $(this).addClass('is-active');
+          });
+
         } else if($(window).width() > 639 && mobileSwitch == true) {
           allCommands = saveCommands($CommandBarItems, $OverflowCommandWidth, $CommandMainArea);
           mobileSwitch = false;
+
+          $('.ms-CommandBarSearch').unbind();
         }
+
       });
 
       // Hook up contextual menu
@@ -109,26 +128,22 @@
       });
 
       $SearchBox.find('.ms-CommandBarSearch-input').click(function() {
-        $(this).closest('.ms-CommandBarSearch').addClass('ms-CommandBarSearch--active');
-      });
-
-       $SearchBox.keypress(function() {
-        //Get Search Field
-        var $input = $(this).find('.ms-CommandBarSearch-input');
-
-        if($input.val()) {
-          $(this).addClass('ms-CommandBarSearch--hasText');
-        } else {
-          $(this).removeClass('ms-CommandBarSearch--hasText');
-        }
+        $(this).closest('.ms-CommandBarSearch').addClass('is-active');
       });
 
+       // When clicking the x clear the SearchBox and put state back to normal
       $SearchBox.find('.ms-CommandBarSearch-iconClearWrapper').click(function() {
         var $input = $(this).parent().find('.ms-CommandBarSearch-input');
         $input.val('');
-        $input.parent().removeClass('ms-CommandBarSearch--hasText ms-CommandBarSearch--active');
+        $input.parent().removeClass('is-active');
       });
-
+
+      $SearchBox.parent().find('.ms-CommandBarSearch-input').blur(function() {
+        var $input = $(this);
+        $input.val('');
+        $input.parent().removeClass('is-active');
+      });
+
     });
   };
 })(jQuery);