Skip to content
This repository has been archived by the owner on Jun 18, 2024. It is now read-only.

Command Bar Fixes #90

Merged
merged 2 commits into from
Sep 4, 2015
Merged

Command Bar Fixes #90

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
05e5229
- Fixed up component-samples task so that it doesn't run clean-samples
gokunymbus Sep 3, 2015
bb4c237
- Made adjustments to less, cleaned up a few items.
gokunymbus Sep 4, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion gulp/fabric.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion src/components/CommandBar/CommandBar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
109 changes: 39 additions & 70 deletions src/components/CommandBar/CommandBar.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -39,9 +43,10 @@
padding-left: 0;
padding-right: 15px;
border: 0;
position: relative;

&:focus {
outline: none;
outline: none;
}
}

Expand All @@ -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;
}
}

Expand All @@ -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;
}
Expand All @@ -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,
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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 {
Expand Down
45 changes: 30 additions & 15 deletions src/components/CommandBar/Jquery.CommandBar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
overFlowCommands.push($Item);
} else {
// Make sure item is displayed
$Item.removeClass('hideCommand');
$Item.removeClass('is-hidden');
}
}
}
Expand Down Expand Up @@ -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;
Expand All @@ -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
Expand All @@ -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);