Skip to content

Commit

Permalink
Toolbar - button group support (#13119)
Browse files Browse the repository at this point in the history 
* Toolbar - support for button group (#12838)

* Toolbar now supports button group widget

* Fix rtl issue

* Fix icon size issue for material theme

* fix toolbar icons issues

* Fix less gulp task processing https://devextreme-ci.devexpress.com/DevExpress/DevExtreme/31311/126

* Try to fix gulp task

* Try to determine why sass test is failed

* Fix regular expression for valid translation to sass

* Fix translations to sass

* dirty realization of focus navigation

* Fix keyboard navigation logic

* Remove custom keyboard navigation logic

* Fix layout in case of multiple button groups

* Simple test for toolbar

* Fix test in case if open menu method is broken

* Toolbar - fix rtl for button group inside menu (#13098)

* Fix rtl for button group in toolbar menu

* Correct fix of rtl mode for button group
  • Loading branch information
@novsstation
novsstation authored May 20, 2020
1 parent 1ccac4e commit 67ed829
Show file tree
Hide file tree
Showing 6 changed files with 107 additions and 8 deletions.
4 changes: 2 additions & 2 deletions build/gulp/scss/theme-replacements.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -188,9 +188,9 @@ module.exports = {
{ regex: /@mixin dx-toolbar-item-padding\(\$MATERIAL_TOOLBAR_ITEM_SPACING\),/, replacement: '@include dx-toolbar-item-padding($MATERIAL_TOOLBAR_ITEM_SPACING);' },
{ regex: /.dx-toolbar-item-padding\(\$MATERIAL_MOBILE_TOOLBAR_ITEM_SPACING\),/, replacement: '@include dx-toolbar-item-padding($MATERIAL_MOBILE_TOOLBAR_ITEM_SPACING);' },
{ regex: /(-bg|-color|: 0|MATERIAL_LIST_ITEM_HEIGHT|MATERIAL_LIST_ITEM_HORIZONTAL_PADDING|4px|2 0|50%),/g, replacement: '$1;' },
{ regex: /@mixin dx-icon-sizing\(\$MATERIAL_BUTTON_ICON_SIZE\),/, replacement: '@include dx-icon-sizing($MATERIAL_BUTTON_ICON_SIZE);' },
{ regex: /(@mixin\s|\.)dx-icon-sizing\(\$MATERIAL_BUTTON_ICON_SIZE\),/g, replacement: '@include dx-icon-sizing($MATERIAL_BUTTON_ICON_SIZE);' },
{ regex: /\.dx-button-onlyicon-sizing\(\),/g, replacement: '@include dx-button-onlyicon-sizing();' },
{ regex: /\.dx-icon-margin\(6px\),/, replacement: '@include dx-icon-margin(6px);' },
{ regex: /\.dx-icon-margin\(6px\),/, replacement: '@include dx-icon-margin(6px);' }
],
'popup': [
{ import: '../../base/icons', type: 'index' },
Expand Down
5 changes: 5 additions & 0 deletions js/ui/toolbar/ui.toolbar.menu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ const List = require('../list/ui.list.base');

const TOOLBAR_MENU_ACTION_CLASS = 'dx-toolbar-menu-action';
const TOOLBAR_HIDDEN_BUTTON_CLASS = 'dx-toolbar-hidden-button';
const TOOLBAR_HIDDEN_BUTTON_GROUP_CLASS = 'dx-toolbar-hidden-button-group';
const TOOLBAR_MENU_SECTION_CLASS = 'dx-toolbar-menu-section';
const TOOLBAR_MENU_LAST_SECTION_CLASS = 'dx-toolbar-menu-last-section';

Expand Down Expand Up @@ -69,6 +70,10 @@ const ToolbarMenu = List.inherit({
itemElement.addClass(TOOLBAR_HIDDEN_BUTTON_CLASS);
}

if(item.widget === 'dxButtonGroup') {
itemElement.addClass(TOOLBAR_HIDDEN_BUTTON_GROUP_CLASS);
}

itemElement.addClass(item.cssClass);

return itemElement;
Expand Down
32 changes: 32 additions & 0 deletions styles/widgets/common/toolbar.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -184,3 +184,35 @@
.dx-toolbar-item-invisible {
display: none;
}

.dx-toolbar-hidden-button-group {
&.dx-state-hover {
background-color: transparent;
}

.dx-list-item-content {
padding: 0;

.dx-toolbar-item-auto-hide {
padding: 0;
}
}

.dx-buttongroup {
width: 100%;

.dx-buttongroup-wrapper {
flex-direction: column;

.dx-buttongroup-item {
border: none;
text-align: left;

.dx-rtl&,
.dx-rtl & {
text-align: right;
}
}
}
}
}
13 changes: 13 additions & 0 deletions styles/widgets/generic/toolbar.generic.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -208,3 +208,16 @@
}
}
}

.dx-toolbar-hidden-button-group {
margin-top: @GENERIC_TOOLBAR_ITEM_SPACING;
margin-bottom: @GENERIC_TOOLBAR_ITEM_SPACING;

.dx-buttongroup-wrapper {
.dx-buttongroup-item.dx-button {
.dx-button-content {
padding: @GENERIC_TOOLBAR_ITEM_SPACING 2 * @GENERIC_TOOLBAR_ITEM_SPACING;
}
}
}
}
20 changes: 20 additions & 0 deletions styles/widgets/material/toolbar.material.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -178,6 +178,11 @@

.dx-button-content {
padding: 4px;

.dx-icon {
color: @toolbar-color;
.dx-icon-sizing(@MATERIAL_BUTTON_ICON_SIZE);
}
}

.dx-toolbar-item-auto-hide {
Expand Down Expand Up @@ -242,3 +247,18 @@
.dx-toolbar .dx-tab {
padding: 4px;
}

.dx-toolbar-hidden-button-group {
margin-top: @MATERIAL_TOOLBAR_PADDING;
margin-bottom: @MATERIAL_TOOLBAR_PADDING;

.dx-buttongroup-wrapper {
.dx-buttongroup-item.dx-button {
box-shadow: none;

.dx-button-content {
padding: @MATERIAL_TOOLBAR_PADDING @MATERIAL_LIST_ITEM_HORIZONTAL_PADDING;
}
}
}
}
41 changes: 35 additions & 6 deletions testing/tests/DevExpress.ui.widgets/toolbar.tests.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import resizeCallbacks from 'core/utils/resize_callbacks';
import themes from 'ui/themes';
import eventsEngine from 'events/core/events_engine';

import 'ui/button_group';

import 'common.css!';
import 'ui/button';
import 'ui/tabs';
Expand Down Expand Up @@ -41,7 +43,7 @@ const TOOLBAR_LABEL_CLASS = 'dx-toolbar-label';
const TOOLBAR_MENU_BUTTON_CLASS = 'dx-toolbar-menu-button';
const TOOLBAR_MENU_SECTION_CLASS = 'dx-toolbar-menu-section';
const LIST_ITEM_CLASS = 'dx-list-item';

const BUTTON_GROUP_CLASS = 'dx-buttongroup';

const DROP_DOWN_MENU_CLASS = 'dx-dropdownmenu';
const DROP_DOWN_MENU_POPUP_WRAPPER_CLASS = 'dx-dropdownmenu-popup-wrapper';
Expand Down Expand Up @@ -422,11 +424,11 @@ QUnit.module('disabled state', () => {
[true, false].forEach((changeDisabledOrder) => {
['never', 'always'].forEach((locateInMenu) => {
QUnit.test(`new dxToolbar({
toolbar.disabled: ${isToolbarDisabled},
button.disabled: ${isButtonDisabled}),
toolbar.disabled new: ${isToolbarDisabledNew},
button.disabled new: ${isButtonDisabledNew},
changeDisableOrder: ${changeDisabledOrder},
toolbar.disabled: ${isToolbarDisabled},
button.disabled: ${isButtonDisabled}),
toolbar.disabled new: ${isToolbarDisabledNew},
button.disabled new: ${isButtonDisabledNew},
changeDisableOrder: ${changeDisabledOrder},
locateInMenu: ${locateInMenu}`,
function(assert) {
const itemClickHandler = sinon.spy();
Expand Down Expand Up @@ -1138,6 +1140,33 @@ QUnit.module('adaptivity', {
assert.equal($section.find('.dx-list-item').text(), 'test text', 'button text was rendered');
});

QUnit.test('buttonGroup.locateInMenu: auto -> toolbar.setWidth(100) -> toolbar.openMenu', function(assert) {
const toolbar = $('#widget').dxToolbar({
items: [
{ locateInMenu: 'never', template: function() { return $('<div>').width(100); } },
{ locateInMenu: 'auto', widget: 'dxButtonGroup', options: { width: 100, items: [ { text: 'text1' } ] } }
]
}).dxToolbar('instance');

const getButtonGroupToolbarItem = () => toolbar.$element().find(`.${BUTTON_GROUP_CLASS}`).closest(`.${TOOLBAR_ITEM_CLASS}`);

let $buttonGroupToolbarItem = getButtonGroupToolbarItem();
assert.equal($buttonGroupToolbarItem.hasClass(TOOLBAR_ITEM_INVISIBLE_CLASS), false, 'buttonGroup is visible in toolbar');

toolbar.option('width', 100);
$buttonGroupToolbarItem = getButtonGroupToolbarItem();
assert.equal($buttonGroupToolbarItem.hasClass(TOOLBAR_ITEM_INVISIBLE_CLASS), true, 'buttonGroup is hidden in toolbar');

const done = assert.async();
const $dropDown = toolbar.$element().find('.' + DROP_DOWN_MENU_CLASS);
const dropDown = $dropDown.dxDropDownMenu('instance');
dropDown.option('onItemRendered', function(args) {
assert.equal($(args.itemElement).find(`.${BUTTON_GROUP_CLASS}`).length, 1, 'button group was rendered in menu');
done();
});
dropDown.open();
});

QUnit.test('overflow item should rendered with correct template in menu and in toolbar', function(assert) {
assert.expect(4);

Expand Down

0 comments on commit 67ed829

Please sign in to comment.