February 14, 2023 Harmeet Singh

Step by step guide to create a theme in liferay with Angular Material UI

Liferay theme is a collection of files that define the look and feel of a Liferay portal instance. It includes files such as CSS, JavaScript, images, and templates that control the presentation and layout of the portal’s pages, as well as its overall styling and behavior.

Themes in Liferay can be customized and created from scratch to meet specific design requirements, or they can be based on pre-built templates that are available from the Liferay community or commercial sources. They can also be applied to individual sites or globally to affect the appearance of the entire portal.

In addition to providing a consistent and visually appealing user interface, Liferay themes can also improve the accessibility and usability of a portal, enhance its branding and identity, and help to create a seamless and engaging user experience for visitors and users.

What is Angular Material UI and how it can help building a better UI (User Interface) ?

Material UI is a popular user interface (UI) library for building web applications using Angular, a JavaScript library for building user interfaces. Material UI provides a set of pre-built UI components that follow Google’s Material Design guidelines, which is a design language for creating intuitive and engaging user experiences across platforms and devices.

The library includes components for common UI elements such as buttons, forms, dialogs, navigation, and more. It also provides support for responsive design, accessibility, and internationalization.

Material UI can help to speed up the development process by providing a consistent and visually appealing set of UI components that can be easily customized to fit specific design requirements. It is also widely used and supported by a large community, with regular updates and improvements being made to the library.

Here’s an example of creating Liferay theme with Angular Material UI

1. Create an Angular application using the Angular CLI:

ng new my-app

2. Add Angular Material and the Liferay theme dependencies to the Angular project:

ng add @angular/material
npm install --save-dev liferay-theme-deps liferay-theme-tasks

3. Use the Liferay Theme Generator to generate a base Liferay theme for Angular, and select Angular Material as the UI framework:

yo liferay-theme:import --includeAngular --includeJSP --includeSass --framework=material

4. Customize the theme as needed by modifying the Angular code and using the Liferay theme configuration files. For example, you can modify the styles in the _custom.scss file:

@import "node_modules/@angular/material/theming";
@import "node_modules/liferay-font-awesome-web/css/font-awesome.min.css";

@include mat-core();

// Define your custom theme
$liferay-theme-primary: mat-palette($mat-deep-purple);
$liferay-theme-accent: mat-palette($mat-amber, 600, 800, A200);
$liferay-theme-warn: mat-palette($mat-red);

$liferay-theme-theme: mat-light-theme($liferay-theme-primary, $liferay-theme-accent, $liferay-theme-warn);

// Include Material Design icons from the icon font
$md-icon-font-path: "~@angular/material/prebuilt-themes/indigo-pink/"; // adjust path to match your setup
@import "~@angular/material/prebuilt-themes/indigo-pink/prebuilt-themes.css";

5. Use Angular Material’s theming capabilities to customize the look and feel of the UI components. For example, you can change the color scheme of a button:

<button mat-raised-button color="primary">My Button</button>

6. Build the theme using the Liferay theme tasks and deploy it to your Liferay instance:

gulp build
gulp deploy

Note that this is just a basic example and there are many other customization options available for both Liferay and Angular Material. Also, make sure to check the official documentation and best practices for each technology to ensure proper usage.

June 29, 2016 Harmeet Singh

Bootstrap dropdown hidden issue in table

In this post we’ll see that, how we can solve the bootstrap dropdown issue when we use the dropdown inside the table or any element with overflow:hidden property. so when you add a bootstrap dropdown button inside a table row and apply the overflow hidden on table container it will hide your dropdown in open state.

For example:

This is sample HTML of your issue:

<div class="lorem-table-wrapper">
				<div class="table-body">
					<table class="table table-striped">
						<thead>
						<tr>
							<th></th>
							<th class="sortable">Column 1</th>
							<th class="sortable">Column 2</th>
							<th class="sortable">Column 3</th>
							<th>Column 4</th>
							<th>Dropdown</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td class="new-column"><i class="icon-star-o new-machine" title="New Machine"></i></td><td>Lorem lipsum</td><td>012345</td><td>10/14/12</td><td>10/14/16</td><td>
							<div class="btn-group">
								<button class="btn dropdown-toggle btn-view" data-toggle="dropdown">
									<span class="visible-desktop toggle-text">Select</span>
									<i class="icon-sort"></i>
								</button>
								<ul class="dropdown-menu pull-right">
									<li><a href="#">Lorem lipsum service</a></li>
									<li><a href="#">Lorem lipsum Content</a></li>
									<li><a href="#">Lorem lipsum</a></li>
									<li><a href="#">Custom</a></li>
									<li><a href="#">Open Requests</a></li>
								</ul>
							</div>
							</td>
						</tr>
						<tr>
							<td class="new-column"></td><td>Lorem Lipsum</td><td>012345</td><td>10/14/12</td><td>10/14/16</td><td>
							<div class="btn-group">
								<button class="btn dropdown-toggle btn-view" data-toggle="dropdown">
									<span class="visible-desktop toggle-text">Select</span>
									<i class="icon-sort"></i>
								</button>
								<ul class="dropdown-menu pull-right">
									<li><a href="#">Lorem lipsum service</a></li>
									<li><a href="#">Lorem lipsum Content</a></li>
									<li><a href="#">Lorem lipsum</a></li>
									<li><a href="#">Custom</a></li>
									<li><a href="#">Open Requests</a></li>
								</ul>
							</div>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>

and this your css for table wrapper

.lorem-table-wrapper .table-body {
    overflow: visible;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-transition: height 500ms ease-in-out;
    transition: height 500ms ease-in-out;
}

This is your output of your HTML and CSS. you can see dropdown is hidden inside table.

To solve this problem we need to two things:

First capture the event of bootstrap dropdown button when dropdown show and hide
- show.bs.dropdown
- hide.bs.dropdown
Second inside this event we will check the current target offset(.offset()) and outer height of the current target(.outerHeight());

Here is the full code:

var dropdownMenu;
                                  
$('.table-body').on('show.bs.dropdown', function (e) {
    dropdownMenu = $(e.target).find('.dropdown-menu');
    $('body').append(dropdownMenu.detach());
    var eOffset = $(e.target).offset();
    dropdownMenu.css({
        'display': 'block',
        'top': eOffset.top + $(e.target).outerHeight(),
        'left': eOffset.left,
		'width':'184px',
		'font-size':'14px'
    });
	dropdownMenu.addClass("mobPosDropdown");
 });
    
$('.table-body').on('hide.bs.dropdown', function (e) {
    $(e.target).append(dropdownMenu.detach());
    dropdownMenu.hide();
 });

Now run your HTML in browser and see your issue is solved

Thanks for reading. Happy Learning!!!

June 28, 2016 Harmeet Singh

Windows devices touch issues

In this article i will show you how we can solve the touch issue in windows devices. Now a days we have lot’s of devices are available in the market. So when we are creating a responsive site we have to first fix the device requirement specification from client because we must sure it work properly, user friendly in every device mobile,tablet and desktop and every platform like android,iOS and windows .

Every devices have different specification about touch and it behaves differently. In windows we mostly use IE who handle the touch events differently but in webkit it supports a touch interface that is separate from mouse handling and IE groups the touch,mouse and stylus into a single interface(pointer) it also has been submitted in W3C specification pointer events.

In windows devices IE pointer events model have custom gesture to indicate the area of the page by default gesture handling(pan). we can turn off default gesture handling by using this property -ms-touch-action for example.

<div id="scrollbar" style="overflow: hidden; -ms-touch-action: none;">

However, IE10 on Windows Phone 8 also supports the pan-x and pan-y value of -ms-touch-action property which specify that the browser should handle horizontal or vertical gestures to solve the touch issues in windows, and custom JavaScript handlers should handle everything else.

Note Microsoft vendor prefixed version of this event (-ms-touch-action) is no longer supported in IE11 and may be removed in a future release. Instead, use the non-prefixed name touch-action, which is better for standards compliance and future compatibility.

Syntax

html
{
    -ms-content-zooming: none; /* Disables zooming */
    touch-action: cross-slide-y pan-y;   /* Disable any special actions on tap/touch */
}

div.list > div.scrollbar{
  touch-action: pan-x;
}

When a we touches an element, that element’s touch-action property determines the default touch behaviors permitted for that contact, like panning or zooming.

Property values

One of the following values, a combination of the gesture values.

auto: Initial value. Indicates the Windows Store app using JavaScript will determine the permitted touch behaviors for the element.
none: The element permits no default touch behaviors.
pan-x: The element permits touch-driven panning on the horizontal axis. The touch pan is performed on the nearest ancestor with horizontally scrollable content.
pan-y: The element permits touch-driven panning on the vertical axis. The touch pan is performed on the nearest ancestor with vertically scrollable content.
pinch-zoom: The element permits pinch-zooming. The pinch-zoom is performed on the nearest ancestor with zoomable content.
manipulation: The element permits touch-driven panning and pinch-zooming. This is the shorthand equivalent of “pan-x pan-y pinch-zoom”.
double-tap-zoom: The element permits double-tap-zooming. The double-tap-zoom is performed on the full page. Double-tap-zoom is not available in Windows Store apps using JavaScript.
cross-slide-x: The element permits cross-sliding along the horizontal axis.
cross-slide-y: The element permits cross-sliding along the vertical axis.

For more information about web development for windows click here

May 28, 2015 Harmeet Singh

Animated layouts in Liferay using Isotope JS

This article will help you to learn and how we can use isotope javascript library in our project. Isotope javascript library who developed by the David DeSandro. Isotope provides animated sorting and filtering in UI elements. It uses Masonry and packery layouts in addition to other layouts.

I found both of them before some days when i started working in one of my project and it’s so amazing, I whipped up a few demos to see for myself!

Install Isotope

For installation we need to download these isotope library from isotope website.

isotope.pkgd.js un-minified, or
isotope.pkgd.min.js minified

Package managers

Install with Bower: bower install isotope –save
Install with npm: npm install isotope-layout

Configuring Isotope

Portal_nirmal.vm

Include the Isotope .js file in your Theme.

<script src="${themeDisplay.pathThemeJavaScript}/isotope.pkgd.js"></script>

After create a theme you can create a portlet with the name of isotope-layout for writing your HTML. write initialization code in your theme main.js file.

Initializing isotope with Jquery:

$('.isotope-grid').isotope({
  // options
  itemSelector: '.items',
  layoutMode: 'fitRows'
});

Initialize with Vanilla JavaScript:

var elem = document.querySelector('.isotope-grid');
var iso = new Isotope( elem, {
  // options
  itemSelector: '.items',
  layoutMode: 'fitRows'
});

// element argument can be a selector string
//   for an individual element
var iso = new Isotope( '.isotope-grid', {
  // options
});

Initialize in HTML:

You can initialize Isotope directly in HTML, without writing any JavaScript or Jquery. You have to just add js-isotope to the class of the container element. For adding the options you can add data-isotope-options attribute in your element.

How to use Filtering,Sorting and Layout

Using Isotope you can hide and show item elements with the filter option. Which shows the only matched items according to the filter. Here you can see how we can apply the filters on:

Selectors(Like Class and id)

$grid.isotope({ filter: '.ClassName' });

jQuery selectors(if jQuery is present)

// filter .ClassName items that are NOT .transition class

$grid.isotope({ filter: ‘.ClassName:not(.transition)’ });

With Functions

$grid.isotope({
  // filter element with numbers greater than 50
  filter: function() {
    // _this_ is the item element. Get text of element's .number
    var ClassName = $(this).find('.ClassName').text();
    // return true to show, false to hide
    return parseInt( ClassName, 10 ) > 50;
  }
})

UI with Buttons

<button data-filter="numberGreaterThan50">number > 50</button>
<button data-filter="ium">name ends with -ium</button>

// init Isotope

var $grid = $('.grid').isotope({
  // options
});

// filter items on button click

$('.filter-button-group').on( 'click', 'button', function() {
  var filterValue = $(this).attr('data-filter');
  $container.isotope({ filter: filterValue });
});

Sorting

In Sorting we are using two methods getSortData() and SortBy().

For more Information: Sorting

layout

In Layout all sizing and styling of items is handled by your own CSS so when we are developing the responsive layouts then we need to set item sizes with percentages in css and also we need to change the mode of layout with masonry and set the percentage-width columnWidth with element sizing. Setting up the percentPosition option true (percentPosition: true) reduce the adjustment transitions on responsive mode.

For more Information: Layout

LIFERAY UI