mirror of
https://github.com/Combodo/iTop.git
synced 2026-05-19 15:22:17 +02:00
Customer portal : UI improvements
SVN:trunk[4133]
This commit is contained in:
Guillaume Lajarige
@@ -417,6 +417,7 @@ class ApplicationHelper
|
||||
*/
|
||||
static function LoadCurrentUser(Application $oApp)
|
||||
{
|
||||
// User
|
||||
$oUser = UserRights::GetUserObject();
|
||||
if ($oUser === null)
|
||||
{
|
||||
@@ -425,7 +426,8 @@ class ApplicationHelper
|
||||
|
||||
$oApp['combodo.current_user'] = $oUser;
|
||||
|
||||
$sUrl = $oApp['combodo.portal.base.absolute_url'].'img/user-profile-default-256px.png';
|
||||
// Contact
|
||||
$sContactPhotoUrl = $oApp['combodo.portal.base.absolute_url'] . 'img/user-profile-default-256px.png';
|
||||
$oContact = UserRights::GetContactObject();
|
||||
if ($oContact)
|
||||
{
|
||||
@@ -434,15 +436,15 @@ class ApplicationHelper
|
||||
$oImage = $oContact->Get('picture');
|
||||
if (is_object($oImage) && !$oImage->IsEmpty())
|
||||
{
|
||||
$sUrl = $oImage->GetDownloadURL(get_class($oContact), $oContact->GetKey(), 'picture');
|
||||
$sContactPhotoUrl = $oImage->GetDownloadURL(get_class($oContact), $oContact->GetKey(), 'picture');
|
||||
}
|
||||
else
|
||||
{
|
||||
$sUrl = MetaModel::GetAttributeDef(get_class($oContact), 'picture')->Get('default_image');
|
||||
$sContactPhotoUrl = MetaModel::GetAttributeDef(get_class($oContact), 'picture')->Get('default_image');
|
||||
}
|
||||
}
|
||||
}
|
||||
$oApp['combodo.current_user_img'] = $sUrl;
|
||||
$oApp['combodo.current_contact.photo_url'] = $sContactPhotoUrl;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -38,10 +38,12 @@
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">Photo</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="panel-body" style="position: relative;">
|
||||
<div class="text-center">
|
||||
<img src="{{ sUserPhotoUrl }}" style="max-width: 175px;"/>
|
||||
<input type="file" id="xx" name="xx" />
|
||||
<!--<input type="file" id="xx" name="xx" />-->
|
||||
<div style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: #000000; opacity: 0.5;"></div>
|
||||
<div style="position: absolute; bottom: 0.5em; left: 0px; width: 100%; color: #FFFFFF; font-size: 1.5em; font-style: italic;">Picture edition not available in beta</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
{% set bUserConnected = true %}
|
||||
{% set sUserFullname = app['combodo.current_user'].Get('first_name') ~ ' ' ~ app['combodo.current_user'].Get('last_name') %}
|
||||
{% set sUserEmail = app['combodo.current_user'].Get('email') %}
|
||||
{% set sUserPhotoUrl = app['combodo.current_user_img'] %}
|
||||
{% set sUserPhotoUrl = app['combodo.current_contact.photo_url'] %}
|
||||
{% else %}
|
||||
{% set bUserConnected = false %}
|
||||
{% set sUserFullname = '' %}
|
||||
@@ -100,7 +100,7 @@
|
||||
{% block pPageBodyWrapper %}
|
||||
{% block pNavigationWrapper %}
|
||||
{# Topbar navigation menu for mobile screens #}
|
||||
<nav class="navbar navbar-fixed-top navbar-inverse visible-xs" id="topbar" role="navigation">
|
||||
<nav class="navbar navbar-fixed-top navbar-default visible-xs" id="topbar" role="navigation">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
|
||||
@@ -108,10 +108,16 @@
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="{{ app.url_generator.generate('p_home') }}">iTop</a>
|
||||
<a class="navbar-brand pull-right" href="{{ app.url_generator.generate('p_home') }}">
|
||||
{% if app['combodo.portal.instance.conf'].properties.logo is not null %}
|
||||
<img src="{{ app['combodo.portal.instance.conf'].properties.logo }}" alt="{{ app['combodo.portal.instance.conf'].properties.name|dict_s }}" />
|
||||
{% else %}
|
||||
iTop
|
||||
{% endif %}
|
||||
</a>
|
||||
<p class="navbar-text">
|
||||
<a class="navbar-link user_infos" href="{{ app.url_generator.generate('p_user_profile_brick') }}">
|
||||
<span class="user_photo"><img src="{{ sUserPhotoUrl }}" alt="{{ sUserFullname }}" /></span>
|
||||
<span class="user_photo" style="background-image: url('{{ sUserPhotoUrl }}');"></span>
|
||||
<span class="user_fullname">{{ sUserFullname }}</span>
|
||||
</a>
|
||||
</p>
|
||||
@@ -121,7 +127,7 @@
|
||||
{% block pNavigationTopBricks %}
|
||||
<li class="{% if oBrick is not defined %}active{% endif %}">
|
||||
<a href="{{ app.url_generator.generate('p_home') }}">
|
||||
<span class="brick_icon fa fa-home"></span>
|
||||
<span class="brick_icon fa fa-home fa-2x"></span>
|
||||
{{ 'Page:Home'|dict_s }}
|
||||
</a>
|
||||
</li>
|
||||
@@ -166,8 +172,7 @@
|
||||
{# Sidebar navigation menu for normal screens #}
|
||||
<nav class="navbar-default hidden-xs col-sm-3 col-md-2" id="sidebar" role="navigation">
|
||||
<div class="user_card">
|
||||
<div class="user_photo">
|
||||
<img src="{{ sUserPhotoUrl }}" alt="{{ sUserFullname }}" />
|
||||
<div class="user_photo" style="background-image: url('{{ sUserPhotoUrl }}');">
|
||||
</div>
|
||||
<div class="user_infos">
|
||||
<div class="user_fullname">{{ sUserFullname }}</div>
|
||||
|
||||
@@ -5,6 +5,9 @@
|
||||
body{
|
||||
padding-top: 60px;
|
||||
}
|
||||
body.home{
|
||||
padding-top: 70px;
|
||||
}
|
||||
}
|
||||
footer{
|
||||
margin: 5em 1em;
|
||||
@@ -19,113 +22,154 @@ footer{
|
||||
margin-right: 20px;
|
||||
}
|
||||
/* Topbar */
|
||||
#topbar #navbar{
|
||||
#topbar .navbar-header{
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
#topbar .navbar-collapse{
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
#topbar .navbar-collapse > .navbar-nav{
|
||||
padding-top: 30px;
|
||||
}
|
||||
#topbar .navbar-brand{
|
||||
padding: 5px 15px;
|
||||
}
|
||||
#topbar .navbar-brand > img{
|
||||
max-height: 100%;
|
||||
}
|
||||
#topbar .user_infos{
|
||||
text-decoration: none;
|
||||
}
|
||||
#topbar .user_photo{
|
||||
margin-right: 10px;
|
||||
}
|
||||
#topbar .user_photo img{
|
||||
margin-top: -4px;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
height: 25px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
/* Sidebar */
|
||||
#sidebar{
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
padding: 0px; /* Overriding BS */
|
||||
height: 100%;
|
||||
}
|
||||
#sidebar .user_card{
|
||||
padding: 30px 0px;
|
||||
background-color: #EA7D1E; /* TODO : Change this */
|
||||
text-align: center;
|
||||
box-shadow: -3px 2px 3px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
#sidebar .user_card .user_photo{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#sidebar .user_card .user_photo img{
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 5px;
|
||||
left: 10px;
|
||||
width: 65px;
|
||||
height: 65px;
|
||||
background-size: 100%;
|
||||
background-position: center center;
|
||||
background-color: #585653;
|
||||
border: 2px solid #FFFFFF;
|
||||
border-radius: 100%;
|
||||
width: 80px;
|
||||
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
#sidebar .user_card .user_infos{
|
||||
font-size: 1em;
|
||||
#topbar .user_fullname{
|
||||
margin-left: 85px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
#sidebar .user_card .user_infos .dropdown-toggle{
|
||||
color: #FFFFFF;
|
||||
}
|
||||
#sidebar .user_card .user_options.dropdown-menu{
|
||||
width: 92%;
|
||||
left: 4%;
|
||||
}
|
||||
#sidebar .user_card .user_fullname{
|
||||
font-weight: 600;
|
||||
}
|
||||
#sidebar .menu{
|
||||
max-height: 59%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
#sidebar .menu .nav > li{
|
||||
line-height: 3.0em;
|
||||
}
|
||||
#sidebar .menu .nav > li:after{
|
||||
content: "";
|
||||
display: block;
|
||||
position: relative;
|
||||
/*margin-left: 6.8em;
|
||||
width: 56%;*/
|
||||
color: #FFFFFF;
|
||||
border-bottom: 1px solid #7D7D7D;
|
||||
}
|
||||
#sidebar .menu .nav > li.active{
|
||||
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.8) inset;
|
||||
}
|
||||
#sidebar .menu .nav > li.active:after{
|
||||
content: " ";
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
border: 30px solid transparent;
|
||||
border-right-width: 20px;
|
||||
border-right-color: #EDECEC;
|
||||
}
|
||||
#sidebar .menu .nav > li.active > a{
|
||||
margin-top: -1px; /* To mask border from previous li item */
|
||||
/*margin-left: 4em;
|
||||
padding-left: 1em;*/
|
||||
}
|
||||
#sidebar .menu .nav > li > a{
|
||||
/*padding-left: 3em;*/
|
||||
padding-left: 10%;
|
||||
overflow-x: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#sidebar .menu .nav > li > a > .brick_icon{
|
||||
width: 1.2em;
|
||||
vertical-align: sub;
|
||||
text-align: center;
|
||||
}
|
||||
#sidebar .logo{
|
||||
position: absolute;
|
||||
bottom: 15px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
#sidebar .logo img{
|
||||
/* Sidebar */
|
||||
@media (min-width: 768px){
|
||||
#sidebar{
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
padding: 0px; /* Overriding BS */
|
||||
height: 100%;
|
||||
}
|
||||
#sidebar .user_card{
|
||||
padding: 30px 0px;
|
||||
background-color: #EA7D1E; /* TODO : Change this */
|
||||
text-align: center;
|
||||
box-shadow: -3px 2px 3px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
#sidebar .user_card .user_photo{
|
||||
margin: 0px auto 10px auto;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background-size: 100%;
|
||||
background-position: center center;
|
||||
background-color: #585653;
|
||||
border: 2px solid #FFFFFF;
|
||||
border-radius: 100%;
|
||||
}
|
||||
#sidebar .user_card .user_infos{
|
||||
font-size: 1em;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
#sidebar .user_card .user_infos .dropdown-toggle{
|
||||
color: #FFFFFF;
|
||||
}
|
||||
#sidebar .user_card .user_options.dropdown-menu{
|
||||
width: 92%;
|
||||
left: 4%;
|
||||
}
|
||||
#sidebar .user_card .user_fullname{
|
||||
font-weight: 600;
|
||||
}
|
||||
#sidebar .menu{
|
||||
max-height: 59%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
#sidebar .menu .nav > li{
|
||||
line-height: 3.0em;
|
||||
}
|
||||
#sidebar .menu .nav > li:after{
|
||||
content: "";
|
||||
display: block;
|
||||
position: relative;
|
||||
/*margin-left: 6.8em;
|
||||
width: 56%;*/
|
||||
color: #FFFFFF;
|
||||
border-bottom: 1px solid #7D7D7D;
|
||||
}
|
||||
#sidebar .menu .nav > li.active{
|
||||
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.8) inset;
|
||||
}
|
||||
#sidebar .menu .nav > li.active:after{
|
||||
content: " ";
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
border: 30px solid transparent;
|
||||
border-right-width: 20px;
|
||||
border-right-color: #EDECEC;
|
||||
}
|
||||
#sidebar .menu .nav > li.active > a{
|
||||
margin-top: -1px; /* To mask border from previous li item */
|
||||
/*margin-left: 4em;
|
||||
padding-left: 1em;*/
|
||||
}
|
||||
#sidebar .menu .nav > li > a{
|
||||
/*padding-left: 3em;*/
|
||||
padding-left: 10%;
|
||||
overflow-x: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#sidebar .menu .nav > li > a > .brick_icon{
|
||||
width: 1.2em;
|
||||
vertical-align: sub;
|
||||
text-align: center;
|
||||
margin-right: 10px;
|
||||
}
|
||||
#sidebar .logo{
|
||||
position: absolute;
|
||||
bottom: 15px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
#sidebar .logo img{
|
||||
width: 40%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px){
|
||||
|
||||
}
|
||||
/* Warning : Not a offical BS breakpoint */
|
||||
@media (min-width: 1600px){
|
||||
#sidebar .user_card .user_photo{
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
#sidebar .menu .nav > li > a > .brick_icon{
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Main content */
|
||||
@media (min-width: 768px) {
|
||||
@@ -268,19 +312,46 @@ a:hover, a:focus{
|
||||
}
|
||||
|
||||
/* Navbars */
|
||||
.navbar-fixed-top .navbar-header{
|
||||
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.navbar-default .navbar-toggle {
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
border-bottom: none;
|
||||
border-radius: 0px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
.navbar-default .navbar-toggle:hover,
|
||||
.navbar-default .navbar-toggle:focus{
|
||||
background-color: inherit;
|
||||
}
|
||||
.navbar-default .navbar-toggle .icon-bar{
|
||||
height: 3px;
|
||||
}
|
||||
.navbar-default .navbar-collapse,
|
||||
.navbar-default .navbar-form{
|
||||
border: none;
|
||||
}
|
||||
|
||||
.navbar-default{
|
||||
background-color: #585653;
|
||||
border: none;
|
||||
}
|
||||
.navbar-default .nav > li > a{
|
||||
.navbar-default .nav > li > a,
|
||||
.navbar-default .nav.navbar-nav > li > a{
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.navbar-default .nav > li > a:focus,
|
||||
.navbar-default .nav > li > a:hover{
|
||||
.navbar-default .nav > li > a:hover,
|
||||
.navbar-default .nav.navbar-nav > li > a:focus,
|
||||
.navbar-default .nav.navbar-nav > li > a:hover{
|
||||
background-color: #FFFFFF;
|
||||
color: #EA7D1E;
|
||||
}
|
||||
.navbar-default .nav > li.active{
|
||||
.navbar-default .nav > li.active,
|
||||
.navbar-default .nav.navbar-nav > li.active > a{
|
||||
background-color: #292827; /* TODO Darken #585653 */
|
||||
color: #FFFFFF;
|
||||
font-weight: 600;
|
||||
@@ -294,6 +365,11 @@ a:hover, a:focus{
|
||||
background-color: #EA7D1E;
|
||||
}
|
||||
|
||||
.navbar-default .navbar-nav .open .dropdown-menu > li > a{
|
||||
color: #FFFFFF;
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
/* - Default */
|
||||
.btn-default,
|
||||
@@ -493,7 +569,7 @@ a:hover, a:focus{
|
||||
@media (min-width: 768px) {
|
||||
.home .tile{
|
||||
display: block;
|
||||
margin-bottom: 40px;
|
||||
margin-bottom: 25px;
|
||||
padding: 40px 40px 30px 40px;
|
||||
min-height: 10em;
|
||||
text-align: left;
|
||||
@@ -506,9 +582,9 @@ a:hover, a:focus{
|
||||
display: block;
|
||||
position: relative;
|
||||
float: left;
|
||||
top: initial;
|
||||
top: 1.5em;
|
||||
left: initial;
|
||||
margin: 0px 40px 5px 0px;
|
||||
margin: 0px 30px 15px 0px;
|
||||
}
|
||||
.home .tile .tile_body{
|
||||
display: block;
|
||||
@@ -526,9 +602,29 @@ a:hover, a:focus{
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.home .tile{
|
||||
min-height: 14em;
|
||||
padding: 30px 40px 30px 40px;
|
||||
}
|
||||
.home .tile .tile_decoration > span.icon{
|
||||
font-size: 4em;
|
||||
}
|
||||
.home .tile .tile_title{
|
||||
font-size: 1.4em;
|
||||
}
|
||||
.home .tile .tile_description{
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.home .tile{
|
||||
margin-bottom: 40px;
|
||||
min-height: 15em;
|
||||
padding: 40px 50px 30px 50px;
|
||||
}
|
||||
.home .tile .tile_decoration{
|
||||
margin: 0px 40px 15px 0px;
|
||||
top: 1.5em;
|
||||
}
|
||||
.home .tile .tile_decoration > span.icon{
|
||||
font-size: 6em;
|
||||
}
|
||||
|
||||
@@ -1073,7 +1073,7 @@
|
||||
<class>UserRequest</class>
|
||||
<!-- Optional tag that can be used on any action type -->
|
||||
<!--<title>Créer un ticket</title>-->
|
||||
<!--<icon_class>glyphicon glyphicon-plus</icon_class>-->
|
||||
<icon_class>fc fc-new-request fc-1-6x fc-flip-horizontal</icon_class>
|
||||
<rules>
|
||||
<rule id="contact-to-userrequest"/>
|
||||
<rule id="servicesubcategory-to-userrequest"/>
|
||||
|
||||
Reference in New Issue
Block a user