Add support the Info button to ClayManagementToolbar | Fixes liferay#481

kienD · Feb 21, 2018 · fb2b810 · fb2b810
1 parent b0d6e78
commit fb2b810
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 0 deletions.
diff --git a/packages/clay-management-toolbar/src/ClayManagementToolbar.js b/packages/clay-management-toolbar/src/ClayManagementToolbar.js
@@ -83,6 +83,15 @@ class ClayManagementToolbar extends Component {
 		this.emit('filterDoneClicked', event);
 	}
 
+	/**
+	 * Continues the propagation of the Info button clicked event
+	 * @param {!Event} event
+	 * @private
+	 */
+	_handleInfoButtonClicked(event) {
+		this.emit('infoButtonClicked', event);
+	}
+
 	/**
 	 * Shows the search in mobile devices
 	 * @private
@@ -239,6 +248,15 @@ ClayManagementToolbar.STATE = {
 	 */
 	id: Config.string(),
 
+	/**
+	 * Flag to indicate if the Info button is needed.
+	 * @instance
+	 * @memberof ClayManagementToolbar
+	 * @type {?bool}
+	 * @default false
+	 */
+	infoButton: Config.bool().value(false),
+
 	/**
 	 * URL of the search form action
 	 * @instance

diff --git a/packages/clay-management-toolbar/src/ClayManagementToolbar.soy b/packages/clay-management-toolbar/src/ClayManagementToolbar.soy
@@ -10,6 +10,7 @@
 	{@param? _handleCreationButtonClicked: any}
 	{@param? _handleDeselectAllClicked: any}
 	{@param? _handleFilterDoneButtonClick: any}
+	{@param? _handleInfoButtonClicked: any}
 	{@param? _handleOpenMobileSearchClick: any}
 	{@param? _handleSearchSearchClick: any}
 	{@param? _handleSelectAllClicked: any}
@@ -53,6 +54,7 @@
 	]>}
 	{@param? hideFiltersDoneButton: bool}
 	{@param? id: string}
+	{@param? infoButton: bool}
 	{@param? searchActionURL: string}
 	{@param? searchFormName: string}
 	{@param? searchInputName: string}
@@ -87,6 +89,7 @@
 			{param _handleCloseMobileSearchClick: $_handleCloseMobileSearchClick /}
 			{param _handleCreationButtonClicked: $_handleCreationButtonClicked /}
 			{param _handleFilterDoneButtonClick: $_handleFilterDoneButtonClick /}
+			{param _handleInfoButtonClicked: $_handleInfoButtonClicked /}
 			{param _handleOpenMobileSearchClick: $_handleOpenMobileSearchClick /}
 			{param _handleSearchSearchClick: $_handleSearchSearchClick /}
 			{param _handleSelectPageCheckboxChanged: $_handleSelectPageCheckboxChanged /}
@@ -100,6 +103,7 @@
 			{param filterItems: $filterItems /}
 			{param hideFiltersDoneButton: $hideFiltersDoneButton /}
 			{param id: $id /}
+			{param infoButton: $infoButton /}
 			{param searchActionURL: $searchActionURL /}
 			{param searchFormName: $searchFormName /}
 			{param searchInputName: $searchInputName /}
@@ -224,6 +228,7 @@
 	{@param? _handleCloseMobileSearchClick: any}
 	{@param? _handleCreationButtonClicked: any}
 	{@param? _handleFilterDoneButtonClick: any}
+	{@param? _handleInfoButtonClicked: any}
 	{@param? _handleOpenMobileSearchClick: any}
 	{@param? _handleSearchSearchClick: any}
 	{@param? _handleSelectPageCheckboxChanged: any}
@@ -258,6 +263,7 @@
 	]>}
 	{@param? hideFiltersDoneButton: bool}
 	{@param? id: string}
+	{@param? infoButton: bool}
 	{@param? searchActionURL: string}
 	{@param? searchFormName: string}
 	{@param? searchInputName: string}
@@ -388,6 +394,18 @@
 					</li>
 				{/if}
 
+				{if $infoButton}
+					<li class="nav-item">
+						{call ClayButton.render}
+							{param elementClasses: 'nav-link nav-link-monospaced' /}
+							{param events: ['click': $_handleInfoButtonClicked] /}
+							{param icon: 'info-circle-open' /}
+							{param spritemap: $spritemap /}
+							{param style: 'unstyled' /}
+						{/call}
+					</li>
+				{/if}
+
 				{if $viewTypes}
 					<li class="dropdown nav-item">
 						{call ClayDropdown.render}