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

matuzalemsteles · Feb 6, 2018 · 6d81b50 · 6d81b50
1 parent 72351bf
commit 6d81b50
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 1 deletion.
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
@@ -220,6 +229,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
@@ -44,6 +44,7 @@
 	{@param? handleCreationButtonClicked_: any}
 	{@param? handleDeselectAllClicked_: any}
 	{@param? handleFilterDoneButtonClick_: any}
+	{@param? handleInfoButtonClicked_: any}
 	{@param? handleOpenMobileSearchClick_: any}
 	{@param? handleSearchSearchClick_: any}
 	{@param? handleSelectAllClicked_: any}
@@ -52,6 +53,7 @@
 	{@param? handleViewTypeClicked_: any}
 	{@param? hideFiltersDoneButton: bool}
 	{@param? id: string}
+	{@param? infoButton: bool}
 	{@param? searchActionURL: string}
 	{@param? searchFormName: string}
 	{@param? searchInputName: string}
@@ -91,13 +93,15 @@
 			{param handleCloseMobileSearchClick_: $handleCloseMobileSearchClick_ /}
 			{param handleCreationButtonClicked_: $handleCreationButtonClicked_ /}
 			{param handleFilterDoneButtonClick_: $handleFilterDoneButtonClick_ /}
+			{param handleInfoButtonClicked_: $handleInfoButtonClicked_ /}
 			{param handleOpenMobileSearchClick_: $handleOpenMobileSearchClick_ /}
 			{param handleSearchSearchClick_: $handleSearchSearchClick_ /}
 			{param handleSelectPageCheckboxChanged_: $handleSelectPageCheckboxChanged_ /}
 			{param handleSortingButtonClicked_: $handleSortingButtonClicked_ /}
 			{param handleViewTypeClicked_: $handleViewTypeClicked_ /}
 			{param hideFiltersDoneButton: $hideFiltersDoneButton /}
 			{param id: $id /}
+			{param infoButton: $infoButton /}
 			{param searchActionURL: $searchActionURL /}
 			{param searchFormName: $searchFormName /}
 			{param searchInputName: $searchInputName /}
@@ -248,13 +252,15 @@
 	{@param? handleCloseMobileSearchClick_: any}
 	{@param? handleCreationButtonClicked_: any}
 	{@param? handleFilterDoneButtonClick_: any}
+	{@param? handleInfoButtonClicked_: any}
 	{@param? handleOpenMobileSearchClick_: any}
 	{@param? handleSearchSearchClick_: any}
 	{@param? handleSelectPageCheckboxChanged_: any}
 	{@param? handleSortingButtonClicked_: any}
 	{@param? handleViewTypeClicked_: any}
 	{@param? hideFiltersDoneButton: bool}
 	{@param? id: string}
+	{@param? infoButton: bool}
 	{@param? searchActionURL: string}
 	{@param? searchFormName: string}
 	{@param? searchInputName: string}
@@ -367,6 +373,18 @@
 					{/call}
 				</li>
 
+				{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}
@@ -515,4 +533,4 @@
 			</div>
 		</div>
 	</form>
-{/deltemplate}
+{/deltemplate}