Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

File manager - Support compact mode for custom toolbar items #12754

Merged
merged 5 commits into from
Apr 17, 2020
Merged

File manager - Support compact mode for custom toolbar items #12754

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
caf2038
Add test
Staziz Apr 16, 2020
49bd17e
Add fix
Staziz Apr 17, 2020
9150bdb
Refactor
Staziz Apr 17, 2020
bc5407b
Now compact only if it's button with icon & text
Staziz Apr 17, 2020
f7d1726
Refactor
Staziz Apr 17, 2020
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
5 changes: 5 additions & 0 deletions js/ui/file_manager/ui.file_manager.toolbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -265,6 +265,11 @@ class FileManagerToolbar extends Widget {
if(!result.widget) {
result.widget = 'dxButton';
}
if(result.widget === 'dxButton' && !result.compactMode && !result.showText && result.options.icon && result.options.text) {
result.compactMode = {
showText: 'inMenu'
};
}
}

if(commandName && !result.name) {
Expand Down
48 changes: 48 additions & 0 deletions testing/tests/DevExpress.ui.widgets/fileManagerParts/toolbar.tests.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -894,4 +894,52 @@ QUnit.module('Toolbar', moduleConfig, () => {
assert.strictEqual($fileToolbarElements.eq(2).text(), 'Rename', 'third file element correct');
});

test('custom toolbar items have compact mode', function(assert) {
createFileManager(false);
this.clock.tick(400);

const fileManager = this.wrapper.getInstance();
fileManager.option('toolbar.items', [
{
widget: 'dxButton',
options: {
text: 'item with long name 0',
icon: 'upload'
},
locateInMenu: 'never'
},
{
widget: 'dxButton',
options: {
text: 'item with long name 1',
icon: 'upload'
},
locateInMenu: 'never'
},
{
widget: 'dxButton',
options: {
text: 'item with long name 2'
},
locateInMenu: 'never'
}
]);
this.clock.tick(400);

const originalWidth = renderer.fn.width;
renderer.fn.width = () => 400;
$('#fileManager').css('width', '100%');
fileManager.repaint();
this.clock.tick(800);

const $generalToolbarElements = this.wrapper.getGeneralToolbarElements();

assert.strictEqual($generalToolbarElements.length, 3, 'there are three elements in general toolbar');
assert.strictEqual($generalToolbarElements.eq(0).find(`.${Consts.BUTTON_TEXT_CLASS}:visible`).text(), '', 'fisrt general element correct');
assert.strictEqual($generalToolbarElements.eq(1).find(`.${Consts.BUTTON_TEXT_CLASS}:visible`).text(), '', 'second general element correct');
assert.strictEqual($generalToolbarElements.eq(2).find(`.${Consts.BUTTON_TEXT_CLASS}:visible`).text(), 'item with long name 2', 'third general element correct');

renderer.fn.width = originalWidth;
});

});