composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-03-12 12:34:12 +01:00
Code Issues Packages Projects Releases Wiki Activity

Portal: Added breadcrumbs to grid mode of the BrowseBrick

Browse Source 
SVN:trunk[4584]
This commit is contained in:
Guillaume Lajarige
2017-03-14 13:59:05 +00:00
parent 2d9c0e16b9
commit 5ebcb41224
4 changed files with 149 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
datamodels/2.x/itop-portal-base/portal/src/views/bricks/browse/layout.html.twig
View File

@@ -31,4 +31,4 @@
</div>
</div>
{% endif %}
{% endblock %}
{% endblock %}

144
datamodels/2.x/itop-portal-base/portal/src/views/bricks/browse/mode_grid.html.twig
View File

@@ -5,6 +5,9 @@
{% block bBrowseMainContent %}
<div id="brick_content_grid">
{% block bBrowseGridContent %}
<ul id="grid-breadcrumb">
<li class="grid-crumb grid-crumb-root" data-level-id="L"><span class="fa fa-home"></span></li>
</ul>
<div class="grid-group" data-level-id="L">
</div>
{% endblock %}
@@ -47,66 +50,49 @@
$('#brick_grid_overlay').hide();
$("#brick_content_grid").show();
}
// Show the requested level
var showLevel = function(sLevelAlias, sItemId)
{
// Retrieving level to show
var sLevelId = sLevelAlias + ((sItemId !== undefined) ? '::'+sItemId : '' );
var oLevelElem = $('#brick_content_grid .grid-group[data-level-id="' + sLevelId + '"]');
var bLevelLoaded = (oLevelElem.length > 0);
// Hiding current level
$('#brick_content_grid .grid-group:visible').hide(
sGridEffectName,
oGridEffectOptions,
iGridEffectDuration,
function(){
// Showing level
if(!bLevelLoaded)
{
showGridLoader();
loadChildNodes(sLevelAlias, sItemId);
}
else
{
oLevelElem.show(sGridEffectName, oGridEffectOptions, iGridEffectDuration, function(){ buildBreadcrumb(); });
}
}
);
};
// Registers the toggle listeners on the tree nodes. Used after every AJAX calls.
var registerToggleListeners = function()
{
$('#brick_content_grid .grid-drilldown').off('click').on('click', function (oEvent) {
oEvent.preventDefault();
var me = this;
// Retrieving sublevel
var sublevelId = $(this).attr('data-level-alias') + '::' + $(this).attr('data-item-id');
var sublevelElem = $('#brick_content_grid .grid-group[data-level-id="'+sublevelId+'"]');
// Hidding current level
if(sublevelElem.length === 0)
{
showGridLoader();
}
$(this).closest('.grid-group').hide(
sGridEffectName,
oGridEffectOptions,
iGridEffectDuration,
function(){
// Showing sublevel
if(sublevelElem.length === 0)
{
loadChildNodes($(me).attr('data-level-alias'), $(me).attr('data-item-id'));
}
else
{
sublevelElem.show(sGridEffectName, oGridEffectOptions, iGridEffectDuration);
}
}
);
showLevel($(this).attr('data-level-alias'), $(this).attr('data-item-id'));
});
$('#brick_content_grid .grid-rollup').off('click').on('click', function (oEvent) {
oEvent.preventDefault();
// Retrieving upper level
var upperlevelId = $(this).attr('data-level-id');
var upperlevelElem = $('#brick_content_grid .grid-group[data-level-id="'+upperlevelId+'"]');
var upperlevelIdParts = upperlevelId.split('::');
// Hidding current level
$(this).closest('.grid-group').hide(
sGridEffectName,
oGridEffectOptions,
iGridEffectDuration,
function(){
// Showing upper level
if(upperlevelElem.length === 0)
{
var upperlevelIdParts = upperlevelId.split('::');
loadChildNodes(upperlevelIdParts[0], upperlevelIdParts[1]);
}
else
{
upperlevelElem.show(sGridEffectName, oGridEffectOptions, iGridEffectDuration);
}
}
);
showLevel(upperlevelIdParts[0], upperlevelIdParts[1]);
});
};
// Registers the filter listeners on the tree.
@@ -131,7 +117,7 @@
buildGrid(sublevelData, sLevelAlias+"::"+sNodeId, false);
}
// Showing sublevel
$('#brick_content_grid .grid-group[data-level-id="'+sLevelAlias+"::"+sNodeId+'"]').show(sGridEffectName, oGridEffectOptions, iGridEffectDuration);
$('#brick_content_grid .grid-group[data-level-id="'+sLevelAlias+"::"+sNodeId+'"]').show(sGridEffectName, oGridEffectOptions, iGridEffectDuration, function(){ buildBreadcrumb(); });
registerToggleListeners();
})
@@ -142,7 +128,7 @@
hideGridLoader();
});
};
// Build tree nodes from data under the nodeId
// Build grid nodes from data under the nodeId
var buildGrid = function(data, nodeId, isRootLevel)
{
if(nodeId === undefined)
@@ -205,13 +191,13 @@
if( (item.name !== undefined) && (item.name !== '') )
{
iItemFlags += 1;
textElem.append( $('<div></div>').addClass('grid-item-name').text(item.name) );
textElem.append( $('<div></div>').addClass('grid-item-name').html(item.name) );
}
// - Adding description
if( (item.description !== undefined) && (item.description !== '') )
{
iItemFlags += 2;
textElem.append( $('<div></div>').addClass('grid-item-description').text(item.description) );
textElem.append( $('<div></div>').addClass('grid-item-description').html(item.description) );
}
aElem.append( textElem );
// - Adding CSS class to adjust the layout regarding which properties are available
@@ -348,6 +334,62 @@
registerToggleListeners();
}
};
// Build breadcrumb
var buildBreadcrumb = function(oCurrentElem)
{
var aCurrentLevelParts = [];
// If no current item, it's because we begin to build the breadcrumb, starting from the bottom
if(oCurrentElem === undefined)
{
// Retrieving current level id
var sCurrentLevelId = $('#brick_content_grid > .grid-group:visible').attr('data-level-id');
aCurrentLevelParts = sCurrentLevelId.split('::');
// Emptying breadcrumb
$('#grid-breadcrumb > li:not(:first-of-type)').remove();
// Finding current item
oCurrentElem = $('#brick_content_grid .grid-item[data-level-alias="'+aCurrentLevelParts[0]+'"][data-item-id="'+aCurrentLevelParts[1]+'"]');
if(oCurrentElem.length === 0)
{
return false;
}
}
else
{
aCurrentLevelParts = [oCurrentElem.attr('data-level-alias'), oCurrentElem.attr('data-item-id')];
}
// Adding level as crumb
var oCrumb = $('<li></li>').html( oCurrentElem.find('.grid-item-name').html() );
oCrumb.addClass('grid-crumb');
oCrumb.attr('data-level-id', aCurrentLevelParts.join('::'));
oCrumb.insertAfter('#grid-breadcrumb > li:first-of-type');
// Adding listener
$('#grid-breadcrumb > li:not(:last-of-type)').off('click').on('click', function(oEvent){
oEvent.preventDefault();
var levelId = $(this).attr('data-level-id');
var levelIdParts = levelId.split('::');
showLevel(levelIdParts[0], levelIdParts[1]);
});
// Finding parent level
var oParentLevelElem = oCurrentElem.closest('.grid-group');
if(oParentLevelElem.length > 0)
{
var sParentLevelId = oParentLevelElem.attr('data-level-id');
var aParentLevelParts = sParentLevelId.split('::');
var oParentElem = $('#brick_content_grid .grid-item[data-level-alias="'+aParentLevelParts[0]+'"][data-item-id="'+aParentLevelParts[1]+'"]');
if(oParentElem.length === 1)
{
buildBreadcrumb(oParentElem);
}
}
};
$(document).ready(function(){
// Auto collapse item actions popup

28
datamodels/2.x/itop-portal-base/portal/web/css/portal.css
View File

@@ -622,11 +622,37 @@ table .group-actions {
position: relative;
padding: 10px 10px 1px 10px;
}
/* Breadcrumb */
#grid-breadcrumb {
padding-left: 0px;
font-size: 12px;
}
#grid-breadcrumb > li {
display: inline;
cursor: pointer;
color: #ea7d1e;
}
#grid-breadcrumb > li:hover {
color: #d56e14;
}
#grid-breadcrumb > li:last-of-type {
color: inherit;
cursor: inherit;
}
#grid-breadcrumb > li:after {
content: '/';
margin-left: 0.4em;
margin-right: 0.2em;
color: initial;
}
#grid-breadcrumb > li:last-of-type:after {
content: none;
}
.grid-group {
display: none;
}
/* Only the first level is showed by default */
.grid-group:first-child {
.grid-group:first-of-type {
display: block;
}
.grid-group-back, .grid-group-item {

29
datamodels/2.x/itop-portal-base/portal/web/css/portal.scss
View File

@@ -669,11 +669,38 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
position: relative;
padding: 10px 10px 1px 10px;
}
/* Breadcrumb */
#grid-breadcrumb{
padding-left: 0px;
font-size: 12px;
}
#grid-breadcrumb > li{
display: inline;
cursor: pointer;
color: $brand-primary;
}
#grid-breadcrumb > li:hover{
color: $brand-primary-dark;
}
#grid-breadcrumb > li:last-of-type{
color: inherit;
cursor: inherit;
}
#grid-breadcrumb > li:after{
content: '/';
margin-left: 0.4em;
margin-right: 0.2em;
color: initial;
}
#grid-breadcrumb > li:last-of-type:after{
content: none;
}
.grid-group{
display: none;
}
/* Only the first level is showed by default */
.grid-group:first-child{
.grid-group:first-of-type{
display: block;
}