Customer portal : UI improvements on navigation menu

git-svn-id: http://svn.code.sf.net/p/itop/code/trunk@4145 a333f486-631f-4898-b8df-5754b55c2be0

datamodels/2.x/itop-portal-base/portal/src/views/layout.html.twig

@@ -19,6 +19,9 @@
 	<meta charset="utf-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
+	{# This block can be used to add your own meta tags by extending the default template #}
+	{% block pPageExtraMetas %}
+	{% endblock %}
 	<title>{% block pPageTitle %}{% if sPageTitle is defined and sPageTitle is not null %}{{ sPageTitle }} - iTop{% else %}{{ 'Page:DefaultTitle'|dict_s }}{% endif %}{% endblock %}</title>
 	<link rel="shortcut icon" href="{{ app['combodo.absolute_url'] }}images/favicon.ico?itopversion=$ITOP_VERSION$" />
 	{% block pPageStylesheets %}
@@ -143,26 +146,19 @@
 							{% endfor %}
 						{% endblock %}
 						{% if bUserConnected %}
-							<li class="dropdown">
-								<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="usermenu">
-									{{ sUserFullname }}
-									<span class="caret"></span>
-								</a>
-								<ul class="dropdown-menu" aria-labelledby="usermenu">
-									<li><a href="{{ app.url_generator.generate('p_user_profile_brick') }}"><span class="glyphicon glyphicon-user"></span>{{ 'Brick:Portal:UserProfile:Navigation:Dropdown:MyProfil'|dict_s }}</a></li>
-									{% for aPortal in app['combodo.portal.instance.conf'].portals %}
-										{% if aPortal.id != app['combodo.portal.instance.conf'].properties.id %}
-											{% set sGlyphiconClass = (aPortal.id == 'backoffice') ? 'glyphicon-list-alt' : 'glyphicon-new-window' %}
-											<li><a href="{{ aPortal.url }}" target="_blank"><span class="glyphicon {{ sGlyphiconClass }}"></span>{{ aPortal.label|dict_s }}</a></li>
-										{% endif %}
-									{% endfor %}
-									{# We display the separator only if the user has more then 1 portal. Meaning default portal + console or several portal at least #}
-									{% if app['combodo.portal.instance.conf'].portals|length > 1 %}
-										<li role="separator" class="divider"></li>
-									{% endif %}
-									<li><a href="{{ app['combodo.absolute_url'] }}pages/logoff.php"><span class="glyphicon glyphicon-log-out"></span>{{ 'Brick:Portal:UserProfile:Navigation:Dropdown:Logout'|dict_s }}</a></li>
-								</ul>
-							</li>
+							<li role="separator" class="divider"></li>
+							<li><a href="{{ app.url_generator.generate('p_user_profile_brick') }}"><span class="brick_icon fa fa-user fa-2x fa-fw"></span>{{ 'Brick:Portal:UserProfile:Navigation:Dropdown:MyProfil'|dict_s }}</a></li>
+							{% for aPortal in app['combodo.portal.instance.conf'].portals %}
+								{% if aPortal.id != app['combodo.portal.instance.conf'].properties.id %}
+									{% set sIconClass = (aPortal.id == 'backoffice') ? 'fa-list-alt' : 'fa-external-link' %}
+									<li><a href="{{ aPortal.url }}" target="_blank"><span class="brick_icon fa {{ sIconClass }} fa-2x fa-fw"></span>{{ aPortal.label|dict_s }}</a></li>
+								{% endif %}
+							{% endfor %}
+							{# We display the separator only if the user has more then 1 portal. Meaning default portal + console or several portal at least #}
+							{% if app['combodo.portal.instance.conf'].portals|length > 1 %}
+								<li role="separator" class="divider"></li>
+							{% endif %}
+							<li><a href="{{ app['combodo.absolute_url'] }}pages/logoff.php"><span class="brick_icon fa fa-sign-out fa-2x fa-fw"></span>{{ 'Brick:Portal:UserProfile:Navigation:Dropdown:Logout'|dict_s }}</a></li>
 						{% endif %}
 					</ul>
 				</div>
@@ -182,18 +178,18 @@
 							<span class="caret"></span>
 						</a>
 						<ul class="dropdown-menu user_options" aria-labelledby="user_options">
-							<li><a href="{{ app.url_generator.generate('p_user_profile_brick') }}"><span class="glyphicon glyphicon-user"></span>{{ 'Brick:Portal:UserProfile:Navigation:Dropdown:MyProfil'|dict_s }}</a></li>
+							<li><a href="{{ app.url_generator.generate('p_user_profile_brick') }}"><span class="brick_icon fa fa-user fa-lg fa-fw"></span>{{ 'Brick:Portal:UserProfile:Navigation:Dropdown:MyProfil'|dict_s }}</a></li>
 							{% for aPortal in app['combodo.portal.instance.conf'].portals %}
 								{% if aPortal.id != app['combodo.portal.instance.conf'].properties.id %}
-									{% set sGlyphiconClass = (aPortal.id == 'backoffice') ? 'glyphicon-list-alt' : 'glyphicon-new-window' %}
-									<li><a href="{{ aPortal.url }}" target="_blank"><span class="glyphicon {{ sGlyphiconClass }}"></span>{{ aPortal.label|dict_s }}</a></li>
+									{% set sGlyphiconClass = (aPortal.id == 'backoffice') ? 'fa-list-alt' : 'fa-external-link' %}
+									<li><a href="{{ aPortal.url }}" target="_blank"><span class="brick_icon fa {{ sGlyphiconClass }} fa-lg fa-fw"></span>{{ aPortal.label|dict_s }}</a></li>
 								{% endif %}
 							{% endfor %}
 							{# We display the separator only if the user has more then 1 portal. Meaning default portal + console or several portal at least #}
 							{% if app['combodo.portal.instance.conf'].portals|length > 1 %}
 								<li role="separator" class="divider"></li>
 							{% endif %}
-							<li><a href="{{ app['combodo.absolute_url'] }}pages/logoff.php"><span class="glyphicon glyphicon-log-out"></span>{{ 'Brick:Portal:UserProfile:Navigation:Dropdown:Logout'|dict_s }}</a></li>
+							<li><a href="{{ app['combodo.absolute_url'] }}pages/logoff.php"><span class="brick_icon fa fa-sign-out fa-lg fa-fw"></span>{{ 'Brick:Portal:UserProfile:Navigation:Dropdown:Logout'|dict_s }}</a></li>
 						</ul>
 					</div>
 				</div>

datamodels/2.x/itop-portal-base/portal/web/css/portal.css

@@ -18,8 +18,10 @@ footer{
 .user_infos .dropdown-menu a .glyphicon{
 	margin-right: 15px;
 }
-.nav > li > a > span.brick_icon{
+.nav > li > a > span.brick_icon,
+.dropdown-menu > li > a > span.brick_icon{
 	margin-right: 20px;
+	vertical-align: sub;
 }
 /* Topbar */
 #topbar .navbar-header{
@@ -34,6 +36,13 @@ footer{
 #topbar .navbar-collapse > .navbar-nav{
 	padding-top: 30px;
 }
+#topbar .navbar-collapse > .navbar-nav .divider{
+	height: 1px;
+    margin: 8px 15px;
+    overflow: hidden;
+	background-color: #292827;
+    opacity: 0.6;
+}
 #topbar .navbar-brand{
 	padding: 5px 15px;
 }
@@ -86,6 +95,7 @@ footer{
 		background-size: 100%;
 		background-position: center center;
 		background-color: #585653;
+		background-repeat: no-repeat;
 		border: 2px solid #FFFFFF;
 		border-radius: 100%;
 	}
@@ -318,6 +328,10 @@ a:hover, a:focus{
 .navbar-fixed-top .navbar-header{
 	box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
 }
+.navbar-fixed-top .navbar-collapse, 
+.navbar-fixed-bottom .navbar-collapse{
+	max-height: 400px;
+}
 
 .navbar-default .navbar-toggle {
     border-top: none;
@@ -662,7 +676,7 @@ a:hover, a:focus{
 }
 #main-header-actions .btn-group .btn{
 	padding: 0em 1.5em;
-	line-height: 2.8em;
+	line-height: 2.4em;
 	font-size: 14px;
 }
 @media (min-width: 768px) {