diff --git a/datamodels/2.x/itop-portal-base/portal/src/views/bricks/browse/mode_grid.html.twig b/datamodels/2.x/itop-portal-base/portal/src/views/bricks/browse/mode_grid.html.twig index dd587631c..2486ee5f4 100644 --- a/datamodels/2.x/itop-portal-base/portal/src/views/bricks/browse/mode_grid.html.twig +++ b/datamodels/2.x/itop-portal-base/portal/src/views/bricks/browse/mode_grid.html.twig @@ -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 = $('
').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 = $(''); - var actionsSSMenuElem = $('
'); - var actionsSSMenuContainerElem = $('
'); - actionsSSMenuElem.append(actionsSSMenuContainerElem); - actionsElem.append(actionsSSTogglerElem); - actionsElem.append(actionsSSMenuElem); - } - + var actionsSSTogglerElem = $(''); + var actionsSSMenuElem = $('
'); + var actionsSSMenuContainerElem = $('
'); + 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( $('

').append(actionElem) ); - } - else - { - actionsElem.append(actionElem); - } + actionElem.append(action.title); + actionsSSMenuContainerElem.append( $('

').append(actionElem) ); } } diff --git a/datamodels/2.x/itop-portal-base/portal/src/views/bricks/browse/mode_list.html.twig b/datamodels/2.x/itop-portal-base/portal/src/views/bricks/browse/mode_list.html.twig index a8e118cea..4a81fb3f3 100644 --- a/datamodels/2.x/itop-portal-base/portal/src/views/bricks/browse/mode_list.html.twig +++ b/datamodels/2.x/itop-portal-base/portal/src/views/bricks/browse/mode_list.html.twig @@ -118,18 +118,13 @@ // Preparing secondary actions container var actionsElem = $('
').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 = $(''); - var actionsSSMenuElem = $('
'); - var actionsSSMenuContainerElem = $('
'); - actionsSSMenuElem.append(actionsSSMenuContainerElem); - actionsElem.append(actionsSSTogglerElem); - actionsElem.append(actionsSSMenuElem); - } + // Preparing secondary actions + var actionsSSTogglerElem = $(''); + var actionsSSMenuElem = $('
'); + var actionsSSMenuContainerElem = $('
'); + 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( $('

').append(actionElem) ); - } - else - { - actionsElem.append(actionElem); - } + actionElem.append(action.title); + actionsSSMenuContainerElem.append( $('

').append(actionElem) ); } } } diff --git a/datamodels/2.x/itop-portal-base/portal/src/views/bricks/browse/mode_tree.html.twig b/datamodels/2.x/itop-portal-base/portal/src/views/bricks/browse/mode_tree.html.twig index 44e6501f9..c496e63cb 100644 --- a/datamodels/2.x/itop-portal-base/portal/src/views/bricks/browse/mode_tree.html.twig +++ b/datamodels/2.x/itop-portal-base/portal/src/views/bricks/browse/mode_tree.html.twig @@ -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 = $('
  • ').addClass('list-group-item'); - var aElem = $('').addClass('tree-item').attr('data-item-id', item.id).attr('href', '#').attr('data-level-alias', item.level_alias).text(item.name); + var aElem = $('').addClass('tree-item-wrapper').attr('data-item-id', item.id).attr('data-level-alias', item.level_alias); + var nameElem = $('').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( $(''+item.description+'') ); + aElem.append( $(''+item.description+'') ); } // Building actions for that node switch(levelPrimaryAction.type) { case '{{ constant('Combodo\\iTop\\Portal\\Brick\\BrowseBrick::ENUM_ACTION_DRILLDOWN') }}': - aElem.addClass('tree-toggle').html(''+aElem.text()+''); - break; + aElem.addClass('tree-toggle'); + nameElem.html(''+nameElem.text()+''); + 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 = $('
    ').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 = $(''); - var actionsSSMenuElem = $('
    '); - var actionsSSMenuContainerElem = $('
    '); - actionsSSMenuElem.append(actionsSSMenuContainerElem); - actionsElem.append(actionsSSTogglerElem); - actionsElem.append(actionsSSMenuElem); - } - + var actionsSSTogglerElem = $(''); + var actionsSSMenuElem = $('
    '); + var actionsSSMenuContainerElem = $('
    '); + 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( $('

    ').append(actionElem) ); - } - else - { - actionsElem.append(actionElem); - } + actionElem.append(action.title); + actionsSSMenuContainerElem.append( $('

    ').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(); diff --git a/datamodels/2.x/itop-portal-base/portal/web/css/bootstrap-theme-combodo.css b/datamodels/2.x/itop-portal-base/portal/web/css/bootstrap-theme-combodo.css index d6acd41c5..68b3c6cbf 100644 --- a/datamodels/2.x/itop-portal-base/portal/web/css/bootstrap-theme-combodo.css +++ b/datamodels/2.x/itop-portal-base/portal/web/css/bootstrap-theme-combodo.css @@ -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; diff --git a/datamodels/2.x/itop-portal-base/portal/web/css/bootstrap-theme-combodo.scss b/datamodels/2.x/itop-portal-base/portal/web/css/bootstrap-theme-combodo.scss index eef778f4e..11224c11d 100644 --- a/datamodels/2.x/itop-portal-base/portal/web/css/bootstrap-theme-combodo.scss +++ b/datamodels/2.x/itop-portal-base/portal/web/css/bootstrap-theme-combodo.scss @@ -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; diff --git a/datamodels/2.x/itop-portal-base/portal/web/css/portal.css b/datamodels/2.x/itop-portal-base/portal/web/css/portal.css index 5809e3fde..059ff9e41 100644 --- a/datamodels/2.x/itop-portal-base/portal/web/css/portal.css +++ b/datamodels/2.x/itop-portal-base/portal/web/css/portal.css @@ -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; diff --git a/datamodels/2.x/itop-portal-base/portal/web/css/portal.scss b/datamodels/2.x/itop-portal-base/portal/web/css/portal.scss index 28e736d4d..58c284b90 100644 --- a/datamodels/2.x/itop-portal-base/portal/web/css/portal.scss +++ b/datamodels/2.x/itop-portal-base/portal/web/css/portal.scss @@ -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; diff --git a/datamodels/2.x/itop-portal-base/portal/web/css/variables.scss b/datamodels/2.x/itop-portal-base/portal/web/css/variables.scss index 683e4df7e..126448e4d 100644 --- a/datamodels/2.x/itop-portal-base/portal/web/css/variables.scss +++ b/datamodels/2.x/itop-portal-base/portal/web/css/variables.scss @@ -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;