composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-04-22 10:08:45 +02:00
Code Issues Packages Projects Releases Wiki Activity

Portal: BrowseBrick: Introducing new browse mode "grid". Also some UI improvements in other browse modes.

Browse Source 
SVN:trunk[4694]
This commit is contained in:
Guillaume Lajarige
2017-04-26 13:20:31 +00:00
parent 9cc583c47b
commit 7b0acbdad3
8 changed files with 104 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -94,6 +94,11 @@
showLevel(upperlevelIdParts[0], upperlevelIdParts[1]);
});
// Allows link in item's description to work. Otherwise, the predentDefault of the item takes over.
$('#brick_content_grid .grid-item-description a').off('click').on('click', function(oEvent){
oEvent.stopPropagation();
});
};
// Registers the filter listeners on the tree.
var registerFilterListeners = function()
@@ -251,19 +256,14 @@
// Preparing secondary actions container
var actionsElem = $('<div></div>').addClass('grid-group-item-actions');
itemElem.append(actionsElem);
// Checking if a menu is necessary
var bHasSeveralSecondaryActions = (Object.keys(actionsButtons).length > 1);
// Preparing secondary actions menu
if(bHasSeveralSecondaryActions)
{
var actionsSSTogglerElem = $('<a class="glyphicon glyphicon-menu-hamburger" data-toggle="collapse" data-target="#item-actions-menu-'+levelAltId+'"></a>');
var actionsSSMenuElem = $('<div id="item-actions-menu-'+levelAltId+'" class="item-action-wrapper panel panel-default"></div>');
var actionsSSMenuContainerElem = $('<div class="panel-body"></div>');
actionsSSMenuElem.append(actionsSSMenuContainerElem);
actionsElem.append(actionsSSTogglerElem);
actionsElem.append(actionsSSMenuElem);
}
var actionsSSTogglerElem = $('<a class="glyphicon glyphicon-menu-hamburger" data-toggle="collapse" data-target="#item-actions-menu-'+levelAltId+'"></a>');
var actionsSSMenuElem = $('<div id="item-actions-menu-'+levelAltId+'" class="item-action-wrapper panel panel-default"></div>');
var actionsSSMenuContainerElem = $('<div class="panel-body"></div>');
actionsSSMenuElem.append(actionsSSMenuContainerElem);
actionsElem.append(actionsSSTogglerElem);
actionsElem.append(actionsSSMenuElem);
// Adding secondary actions
for(j in actionsButtons)
{
@@ -302,15 +302,8 @@
actionIconElem.addClass(action.icon_class);
}
if(bHasSeveralSecondaryActions)
{
actionElem.append(action.title);
actionsSSMenuContainerElem.append( $('<p></p>').append(actionElem) );
}
else
{
actionsElem.append(actionElem);
}
actionElem.append(action.title);
actionsSSMenuContainerElem.append( $('<p></p>').append(actionElem) );
}
}

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

@@ -118,18 +118,13 @@
// Preparing secondary actions container
var actionsElem = $('<div></div>').addClass('pull-right group-actions');
cellElem.append(actionsElem);
// Checking if a menu is necessary
var bHasSeveralSecondaryActions = (Object.keys(actionsButtons).length > 1);
// Preparing secondary actions for small screens
if(bHasSeveralSecondaryActions)
{
var actionsSSTogglerElem = $('<a class="glyphicon glyphicon-menu-hamburger" data-toggle="collapse" data-target="#item-actions-menu-'+levelAltId+'"></a>');
var actionsSSMenuElem = $('<div id="item-actions-menu-'+levelAltId+'" class="item-action-wrapper panel panel-default"></div>');
var actionsSSMenuContainerElem = $('<div class="panel-body"></div>');
actionsSSMenuElem.append(actionsSSMenuContainerElem);
actionsElem.append(actionsSSTogglerElem);
actionsElem.append(actionsSSMenuElem);
}
// Preparing secondary actions
var actionsSSTogglerElem = $('<a class="glyphicon glyphicon-menu-hamburger" data-toggle="collapse" data-target="#item-actions-menu-'+levelAltId+'"></a>');
var actionsSSMenuElem = $('<div id="item-actions-menu-'+levelAltId+'" class="item-action-wrapper panel panel-default"></div>');
var actionsSSMenuContainerElem = $('<div class="panel-body"></div>');
actionsSSMenuElem.append(actionsSSMenuContainerElem);
actionsElem.append(actionsSSTogglerElem);
actionsElem.append(actionsSSMenuElem);
// Adding secondary actions
for(j in actionsButtons)
@@ -169,15 +164,8 @@
actionIconElem.addClass(action.icon_class);
}
if(bHasSeveralSecondaryActions)
{
actionElem.append(action.title);
actionsSSMenuContainerElem.append( $('<p></p>').append(actionElem) );
}
else
{
actionsElem.append(actionElem);
}
actionElem.append(action.title);
actionsSSMenuContainerElem.append( $('<p></p>').append(actionElem) );
}
}
}

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

@@ -108,6 +108,11 @@
loadChildNodes($(this).attr('data-level-alias'), $(this).attr('data-item-id'));
}
});
// Allows link in item's description to work. Otherwise, the predentDefault of the item takes over.
$('#brick_content_tree .list-group-item-description a').off('click').on('click', function(oEvent){
oEvent.stopPropagation();
});
};
// Registers the filter listeners on the tree.
var registerFilterListeners = function()
@@ -189,30 +194,33 @@
var levelActionsKeys = Object.keys(levelActions);
var levelPrimaryAction = levelActions[levelActionsKeys[0]];
var url = '';
var liElem = $('<li></li>').addClass('list-group-item');
var aElem = $('<a></a>').addClass('tree-item').attr('data-item-id', item.id).attr('href', '#').attr('data-level-alias', item.level_alias).text(item.name);
var aElem = $('<span></span>').addClass('tree-item-wrapper').attr('data-item-id', item.id).attr('data-level-alias', item.level_alias);
var nameElem = $('<a></a>').addClass('tree-item').text(item.name);
// Building node
$('ul[data-level-id="'+nodeId+'"]').append(liElem);
aElem.append(nameElem);
liElem.append(aElem);
// Building tooltip for the node
if( (item.tooltip !== undefined) && (item.tooltip !== '') )
{
aElem.attr('title', item.tooltip).attr('data-toggle', 'tooltip').tooltip({html: true, trigger: 'hover', placement: 'right'});
nameElem.attr('title', item.tooltip).attr('data-toggle', 'tooltip').tooltip({html: true, trigger: 'hover', placement: 'right'});
}
// Building description for the node
if( (item.description !== undefined) && (item.description !== '') )
{
liElem.append( $('<span class="list-group-item-description">'+item.description+'</span>') );
aElem.append( $('<span class="list-group-item-description">'+item.description+'</span>') );
}
// Building actions for that node
switch(levelPrimaryAction.type)
{
case '{{ constant('Combodo\\iTop\\Portal\\Brick\\BrowseBrick::ENUM_ACTION_DRILLDOWN') }}':
aElem.addClass('tree-toggle').html('<span class="glyphicon '+sNodeCollapsedClass+'" aria-hidden="true"></span><span class="list-group-item-text">'+aElem.text()+'</span>');
break;
aElem.addClass('tree-toggle');
nameElem.html('<span class="glyphicon '+sNodeCollapsedClass+'" aria-hidden="true"></span><span class="list-group-item-text">'+nameElem.text()+'</span>');
break;
case '{{ constant('Combodo\\iTop\\Portal\\Brick\\BrowseBrick::ENUM_ACTION_VIEW') }}':
url = '{{ app.url_generator.generate('p_object_view', {'sObjectClass': '-objectClass-', 'sObjectId': '-objectId-'})|raw }}'.replace(/-objectClass-/, item.class).replace(/-objectId-/, item.id);
SetActionUrl(aElem, url);
@@ -247,18 +255,13 @@
var actionsElem = $('<div></div>').addClass('list-group-item-actions');
liElem.append(actionsElem);
// Checking if a menu is necessary
var bHasSeveralSecondaryActions = (Object.keys(actionsButtons).length > 1);
// Preparing secondary actions menu
if(bHasSeveralSecondaryActions)
{
var actionsSSTogglerElem = $('<a class="glyphicon glyphicon-menu-hamburger" data-toggle="collapse" data-target="#item-actions-menu-'+levelAltId+'"></a>');
var actionsSSMenuElem = $('<div id="item-actions-menu-'+levelAltId+'" class="item-action-wrapper panel panel-default"></div>');
var actionsSSMenuContainerElem = $('<div class="panel-body"></div>');
actionsSSMenuElem.append(actionsSSMenuContainerElem);
actionsElem.append(actionsSSTogglerElem);
actionsElem.append(actionsSSMenuElem);
}
var actionsSSTogglerElem = $('<a class="glyphicon glyphicon-menu-hamburger" data-toggle="collapse" data-target="#item-actions-menu-'+levelAltId+'"></a>');
var actionsSSMenuElem = $('<div id="item-actions-menu-'+levelAltId+'" class="item-action-wrapper panel panel-default"></div>');
var actionsSSMenuContainerElem = $('<div class="panel-body"></div>');
actionsSSMenuElem.append(actionsSSMenuContainerElem);
actionsElem.append(actionsSSTogglerElem);
actionsElem.append(actionsSSMenuElem);
// Adding secondary actions
for(j in actionsButtons)
{
@@ -297,15 +300,8 @@
actionIconElem.addClass(action.icon_class);
}
if(bHasSeveralSecondaryActions)
{
actionElem.append(action.title);
actionsSSMenuContainerElem.append( $('<p></p>').append(actionElem) );
}
else
{
actionsElem.append(actionElem);
}
actionElem.append(action.title);
actionsSSMenuContainerElem.append( $('<p></p>').append(actionElem) );
}
}
@@ -324,14 +320,16 @@
registerToggleListeners();
}
};
$(document).ready(function(){
// Init expand/collapse all buttons
$('#btn-collapse-all').on('click', function (oEvent) {
oEvent.preventDefault();
collapseAll();
});
$('#btn-expand-all').on('click', function (oEvent) {
if(!bIsFullyLoaded)
oEvent.preventDefault();
if(!bIsFullyLoaded)
{
// Show a loader while fetching results
showTreeLoader();

7
datamodels/2.x/itop-portal-base/portal/web/css/bootstrap-theme-combodo.css vendored
View File

@@ -1215,6 +1215,9 @@ fieldset {
border-radius: 0px;
min-width: 0;
}
form fieldset {
background-color: #f9f9f9;
}
legend {
display: block;
width: inherit;
@@ -4118,15 +4121,19 @@ button.close {
}
.modal-header {
padding: 15px;
background-color: #585653;
border-bottom: 1px solid #e5e5e5;
min-height: 16.42857px;
}
.modal-header .close {
margin-top: -2px;
color: #fff;
opacity: 0.6;
}
.modal-title {
margin: 0;
line-height: 1.42857;
color: #fff;
}
.modal-body {
position: relative;

13
datamodels/2.x/itop-portal-base/portal/web/css/bootstrap-theme-combodo.scss vendored
View File

@@ -1543,6 +1543,9 @@ fieldset {
border-radius: $border-radius-base;
min-width: 0;
}
form fieldset {
background-color: #f9f9f9;
}
legend {
display: block;
width: inherit;
@@ -5109,15 +5112,19 @@ button.close {
}
.modal-header {
padding: 15px;
border-bottom: 1px solid #e5e5e5;
background-color: $modal-header-bg;
border-bottom: 1px solid $modal-header-border-color;
min-height: 16.42857143px
}
.modal-header .close {
margin-top: -2px
margin-top: -2px;
color: $modal-close-color;
opacity: 0.6;
}
.modal-title {
margin: 0;
line-height: $line-height-base
line-height: $line-height-base;
color: $modal-title-color
}
.modal-body {
position: relative;

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

@@ -548,11 +548,21 @@ footer {
position: relative;
margin-top: 0px;
}
#brick_content_tree .list-group-item {
padding-top: 0px;
}
#brick_content_tree .list-group-item > .tree-item-wrapper {
display: block;
padding-top: 10px;
color: inherit;
text-decoration: inherit;
cursor: pointer;
}
.list-group-item > .list-group-item-actions {
/*display: none; Displaying actions only when hovering was not unanimous in the team */
position: absolute;
top: 10px;
right: 15px;
right: 10px;
}
.list-group-item:hover > .list-group-item-actions, .grid-group-item:hover > .grid-group-item-actions {
display: block;
@@ -583,8 +593,8 @@ table .group-actions {
display: none;
position: absolute;
z-index: 5;
bottom: 5px;
right: 0px;
bottom: -7px;
right: 15px;
-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
@@ -596,6 +606,7 @@ table .group-actions {
display: block;
}
.list-group-item-actions .item-action-wrapper .panel-body > p, .grid-group-item-actions .item-action-wrapper .panel-body > p, table .group-actions .item-action-wrapper .panel-body > p {
text-align: left;
white-space: nowrap;
}
.list-group-item-actions .item-action-wrapper .panel-body > p:last-child, .grid-group-item-actions .item-action-wrapper .panel-body > p:last-child, table .group-actions .item-action-wrapper .panel-body > p:last-child {
@@ -669,7 +680,7 @@ table .group-actions {
vertical-align: middle;
}
.grid-item-image > img {
max-width: 100%;
max-width: 85%;
}
.grid-group-item > .grid-group-item-actions {
position: absolute;

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

@@ -575,11 +575,22 @@ footer{
margin-top: 0px;
}
#brick_content_tree .list-group-item{
padding-top: 0px;
}
#brick_content_tree .list-group-item > .tree-item-wrapper{
display: block;
padding-top: 10px;
color: inherit;
text-decoration: inherit;
cursor: pointer;
}
.list-group-item > .list-group-item-actions{
/*display: none; Displaying actions only when hovering was not unanimous in the team */
position: absolute;
top: 10px;
right: 15px;
right: 10px;
}
.list-group-item:hover > .list-group-item-actions,
.grid-group-item:hover > .grid-group-item-actions{
@@ -618,8 +629,8 @@ table .group-actions .item-action-wrapper
display: none;
position: absolute;
z-index: 5;
bottom: 5px;
right: 0px;
bottom: -7px;
right: 15px;
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
@@ -637,6 +648,7 @@ table .group-actions .item-action-wrapper.collapse.in{
.list-group-item-actions .item-action-wrapper .panel-body > p,
.grid-group-item-actions .item-action-wrapper .panel-body > p,
table .group-actions .item-action-wrapper .panel-body > p{
text-align: left;
white-space: nowrap;
}
.list-group-item-actions .item-action-wrapper .panel-body > p:last-child,
@@ -724,7 +736,7 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
vertical-align: middle;
}
.grid-item-image > img{
max-width: 100%;
max-width: 85%;
}
.grid-group-item > .grid-group-item-actions{
position: absolute;

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

@@ -645,6 +645,12 @@ $modal-backdrop-bg: #000 !default;
$modal-backdrop-opacity: .5 !default;
//** Modal header border color
$modal-header-border-color: #e5e5e5 !default;
//** Modal header background color
$modal-header-bg: $combodo-dark-gray;
//** Modal title color
$modal-title-color: $white;
//** Modal close button color
$modal-close-color: $white;
//** Modal footer border color
$modal-footer-border-color: $modal-header-border-color !default;