LUTECE-2221 : Multi CSS framework support

Author: pierrelevy

webapp/WEB-INF/templates/admin/system/manage_caches.html

@@ -13,7 +13,7 @@
                 </@tform>
             </@boxHeader>
             <@boxBody>
-            <@alert class='warning' title='#i18n{portal.system.manage_caches.cautionTitle}' iconTitle='exclamation-triangle' dismissible=true>#i18n{portal.system.manage_caches.cautionMessage}</@alert>
+            <@alert color='warning' title='#i18n{portal.system.manage_caches.cautionTitle}' iconTitle='exclamation-triangle' dismissible=true>#i18n{portal.system.manage_caches.cautionMessage}</@alert>
 				<@table>
 					<tr>
 						<th>#i18n{portal.system.manage_caches.columnTitleName}</th>

webapp/WEB-INF/templates/admin/system/manage_plugins.html

@@ -101,7 +101,7 @@
         		</#list>	
      			</@row>
 			<#else>
-				<@alert class='alert-danger'>#i18n{portal.system.manage_plugins.filterNoResult}</@alert>
+				<@alert color='danger'>#i18n{portal.system.manage_plugins.filterNoResult}</@alert>
 			</#if>
       </@boxBody>
     </@box>

webapp/WEB-INF/templates/admin/user/create_user.html

@@ -111,7 +111,7 @@
 				</@boxBody>
 			</@box>
 		<#else>
-			<@alert class="danger">#i18n{portal.users.create_user.error.accessCodeNotFound}</@alert>
+			<@alert color="danger">#i18n{portal.users.create_user.error.accessCodeNotFound}</@alert>
 		</#if>
     </@columns>
 </@rows>

webapp/WEB-INF/templates/commons.html

@@ -642,8 +642,8 @@
 <#macro messages errors=[] infos=[] warnings=[] errors_class="alert alert-danger" infos_class="alert alert-info" warnings_class="alert alert-warning">
     <#if errors??>
         <#if errors?size &gt; 0 >
-            <div class="notification is-danger" id="messages_errors_div">
-                <button class="delete"></button>
+            <div class="alert alert-danger" id="messages_errors_div">
+                <button class="close"></button>
                 <#list errors as error >
                     <span class="icon"><i class="fa fa-exclamation-circle"></i></span> ${error.message} <br>
                 </#list>
@@ -652,10 +652,10 @@
     </#if>
     <#if infos??>
         <#if infos?size &gt; 0 >
-            <div class="notification is-info" id="messages_infos_div" >
-                <button class="delete"></button>
+            <div class="alert alert-info" id="messages_infos_div" >
+                <button class="close"></button>
                 <#list infos as info >
-                    <span class="icon"><i class="fa fa-info-circle"></i> ${info.message} <br>
+                    <span class="icon"><i class="fa fa-info-circle"></i></span> ${info.message} <br>
                 </#list>
             </div>
         </#if>
@@ -665,7 +665,7 @@
             <div class="${warnings_class}" id="messages_warnings_div" >
                 <a class="close" data-dismiss="alert" href="#">x</a>
                 <#list warnings as warning >
-                    <span class="icon"><i class="fa fa-info-circle"></i> ${warning.message} <br>
+                    <span class="icon"><i class="fa fa-info-circle"></i></span> ${warning.message} <br>
                 </#list>
             </div>
         </#if>
@@ -1160,8 +1160,9 @@ <h2 class="box-title">
 
 <#-- ALERT -->
 <#-- classes: alert-success/alert-info/alert-warning/alert-danger + alert-dismissible -->
+<#-- color: primary/success/info/warning/dange r-->
 <#macro alert class='' titleLevel='h3' title='' iconTitle='' dismissible=false id='' params=''>
-<div class="alert alert-${class}"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
+<div class="alert  ${class} <#if color!=''> alert-${color}</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
 	<#if dismissible>
 		<@button color='' size='' style='close' params='data-dismiss="alert" aria-hidden="true"'>
 			&times;

webapp/WEB-INF/templates/commons_bulma.html

@@ -663,17 +663,17 @@
 		<div class="notification is-info" id="messages_infos_div" >
 			<button class="delete"></button>
 			<#list infos as info >
-				<span class="icon"><i class="fa fa-info-circle"></i> ${info.message} <br>
+				<span class="icon"><i class="fa fa-info-circle"></i></span> ${info.message} <br>
 			</#list>
 		</div>
 	</#if>
 </#if>
 <#if warnings??>
 	<#if warnings?size &gt; 0 >
 		<div class="${warnings_class}" id="messages_warnings_div" >
-			<a class="close" data-dismiss="alert" href="#">x</a>
+			<a class="delete" data-dismiss="alert" href="#">x</a>
 			<#list warnings as warning >
-				<span class="icon"><i class="fa fa-info-circle"></i> ${warning.message} <br>
+				<span class="icon"><i class="fa fa-info-circle"></i></span> ${warning.message} <br>
 			</#list>
 		</div>
 	</#if>
@@ -976,7 +976,7 @@ <h2 class="title">
 <#-- BUTTON -->
 <#-- bootstrap 3 : size: is-small/is-medium/is-large -->
 <#-- upcoming bootstrap 4 : size: is-medium for small buttons/empty for medium buttons/is-large for large buttons -->
-<#-- color: is-default[bootstrap4 : btn-secondary]/is-primary/is-success/is-warning/is-danger/btn-info/bg-purple/bg-blue/bg-navy/bg-teal/bg-maroon/bg-black/bg-gray/bg-olive/bg-lime/bg-orange/bg-fuchsia -->
+<#-- color: default : secondary]/primary/success/warning/danger/info -->
 <#-- color (upcoming bootstrap 4): btn-outline-default/btn-outline-primary/btn-outline-success/btn-outline-warning/btn-outline-danger/btn-outline-info/ -->
 <#-- style: btn-block/btn-flat/close/navbar-toggle/collapsed... -->
 <#-- type: button/submit/reset -->
@@ -1092,7 +1092,7 @@ <h2 class="title">
 
 <#macro modalHeader titleLevel='h4' modalTitle='' id='' params=''>
 <div class="modal-header"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
-	<button type="button" class="close" data-dismiss="modal" aria-label="Close">
+	<button type="button" class="delete" data-dismiss="modal" aria-label="Close">
 		<span aria-hidden="true">&times;</span>
 	</button>
 	<${titleLevel} class="modal-title">${modalTitle}</${titleLevel}>
@@ -1128,11 +1128,12 @@ <h2 class="title">
 </#macro>
 
 <#-- ALERT -->
-<#-- classes: alert-success/alert-info/alert-warning/alert-danger + alert-dismissible -->
-<#macro alert class='' titleLevel='h3' title='' iconTitle='' dismissible=false id='' params=''>
-<div class="alert alert-${class}"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
+<#-- class:  -->
+<#-- color: success/info/warning/danger -->
+<#macro alert class='' color='' titleLevel='h3' title='' iconTitle='' dismissible=false id='' params=''>
+<div class="notification ${class} <#if color!=''> is-${color}</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
 <#if dismissible>
-	<@button color='' size='' style='close' params='data-dismiss="alert" aria-hidden="true"'>&times;</@button>
+	<@button color='' size='' style='close' class='delete' params='data-dismiss="alert" aria-hidden="true"'>&times;</@button>
 </#if>
 <#if title!=''>
 <${titleLevel}>
@@ -1371,9 +1372,9 @@ <h3>
 								<span id="zone4" class="hidden-sm hidden-md"> ${dashboard_zone_4}<i class="caret"></i></span>
 						  	</a>
                             <#if userMenuItems?has_content>   
-                              <ul class="dropdown-menu" role="menu" aria-labelledby="dLabelUserHeader">
+                              <ul class="navbar-dropdown" role="menu" aria-labelledby="dLabelUserHeader">
                                     <#list userMenuItems as item>
-                                        <li class="dropdown-item ${item.itemClass?html}">${item.content}</li>
+                                        <a class="navbar-item ${item.itemClass?html}">${item.content}</a>
                                     </#list>
                               </ul>
                             </#if>