Customer portal : BrowseBrick : Changed style of secondaries actions

SVN:trunk[4073]
This commit is contained in:
Guillaume Lajarige
2016-05-12 13:21:30 +00:00
parent 793d4f814d
commit bcb5e4304a
7 changed files with 166 additions and 19 deletions

View File

@@ -446,6 +446,26 @@ class BrowseBrickController extends BrickController
}
}
// Setting action icon class
if (!isset($aAction['icon_class']))
{
switch ($aAction['type'])
{
case BrowseBrick::ENUM_ACTION_CREATE_FROM_THIS:
$aAction['icon_class'] = BrowseBrick::ENUM_ACTION_ICON_CLASS_CREATE_FROM_THIS;
break;
case BrowseBrick::ENUM_ACTION_VIEW:
$aAction['icon_class'] = BrowseBrick::ENUM_ACTION_ICON_CLASS_VIEW;
break;
case BrowseBrick::ENUM_ACTION_EDIT:
$aAction['icon_class'] = BrowseBrick::ENUM_ACTION_ICON_CLASS_EDIT;
break;
case BrowseBrick::ENUM_ACTION_DRILLDOWN:
$aAction['icon_class'] = BrowseBrick::ENUM_ACTION_ICON_CLASS_DRILLDOWN;
break;
}
}
// Setting action url
switch ($aAction['type'])
{

View File

@@ -36,6 +36,10 @@ class BrowseBrick extends PortalBrick
const ENUM_ACTION_EDIT = 'edit';
const ENUM_ACTION_DRILLDOWN = 'drilldown';
const ENUM_ACTION_CREATE_FROM_THIS = 'create_from_this';
const ENUM_ACTION_ICON_CLASS_VIEW = 'glyphicon glyphicon-list-alt';
const ENUM_ACTION_ICON_CLASS_EDIT = 'glyphicon glyphicon-pencil';
const ENUM_ACTION_ICON_CLASS_DRILLDOWN = 'glyphicon glyphicon-menu-down';
const ENUM_ACTION_ICON_CLASS_CREATE_FROM_THIS = 'glyphicon glyphicon-edit';
const ENUM_FACTORY_TYPE_METHOD = 'method';
const ENUM_FACTORY_TYPE_CLASS = 'class';
const DEFAULT_DATA_LOADING = self::ENUM_DATA_LOADING_FULL;
@@ -394,6 +398,12 @@ class BrowseBrick extends PortalBrick
{
$aTmpAction['title'] = $oActionTitleNode->GetText();
}
// Action icon class
$oActionIconClassNode = $oActionNode->GetOptionalElement('icon_class');
if ($oActionIconClassNode !== null)
{
$aTmpAction['icon_class'] = $oActionIconClassNode->GetText();
}
// Action rules
foreach ($oActionNode->GetNodes('./rules/rule') as $oRuleNode)
{

View File

@@ -52,7 +52,7 @@
var drilldownActionIndex;
var levelPrimaryAction;
var url = '';
console.log(data, row);
// Preparing actions on the cell
levelActions = oLevelsProperties[data.level_alias].actions;
// - Removing explicit (not default) drilldown action as it has no prupose on that browse mode
@@ -108,48 +108,76 @@
// - Secondary actions
if(levelActionsKeys.length > 1)
{
var actionsElem = $('<div></div>').addClass('pull-right group-actions');
cellElem.append(actionsElem);
// Preparing secondary actions for small screens
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);
// Retrieving secondary action
var actionsButtons = {};
// Fill actionsButtons with all actions but the primary
for(j = 1; j < levelActionsKeys.length; j++)
{
actionsButtons[levelActionsKeys[j]] = levelActions[levelActionsKeys[j]];
}
// 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);
}
// Adding secondary actions
for(j in actionsButtons)
{
var action = actionsButtons[j];
var actionElem = $('<a></a>');
var actionIconElem = $('<span></span>').appendTo(actionElem);
switch(action.type)
{
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-/, data.class).replace(/-objectId-/, data.id);
actionElem.attr('data-toggle', 'modal').attr('data-target', '#modal-for-all').attr('href', url).text(action.title);
actionElem.attr('data-toggle', 'modal').attr('data-target', '#modal-for-all').attr('href', url);
break;
case '{{ constant('Combodo\\iTop\\Portal\\Brick\\BrowseBrick::ENUM_ACTION_EDIT') }}':
url = '{{ app.url_generator.generate('p_object_edit', {'sObjectClass': '-objectClass-', 'sObjectId': '-objectId-'})|raw }}'.replace(/-objectClass-/, data.class).replace(/-objectId-/, data.id);
actionElem.attr('data-toggle', 'modal').attr('data-target', '#modal-for-all').attr('href', url).text(action.title);
actionElem.attr('data-toggle', 'modal').attr('data-target', '#modal-for-all').attr('href', url);
break;
case '{{ constant('Combodo\\iTop\\Portal\\Brick\\BrowseBrick::ENUM_ACTION_CREATE_FROM_THIS') }}':
url = action.url.replace(/-objectClass-/, data.class).replace(/-objectId-/, data.id);
url = addParameterToUrl(url, 'ar_token', data.action_rules_token[action.type]);
actionElem.attr('data-toggle', 'modal').attr('data-target', '#modal-for-all').attr('href', url).text(action.title);
actionElem.attr('data-toggle', 'modal').attr('data-target', '#modal-for-all').attr('href', url);
break;
default:
console.log('Action "'+action.type+'" not implemented for secondary action');
break;
}
actionsSSMenuContainerElem.append( $('<p></p>').append(actionElem.clone()) );
// Adding title if present
if(action.title !== undefined)
{
actionElem.attr('title', action.title);
}
// Adding icon class if present
if(action.icon_class !== undefined)
{
actionIconElem.addClass(action.icon_class);
}
if(bHasSeveralSecondaryActions)
{
actionElem.append(action.title);
actionsSSMenuContainerElem.append( $('<p></p>').append(actionElem) );
}
else
{
actionsElem.append(actionElem);
}
}
}
}

View File

@@ -233,6 +233,82 @@
if(levelActionsKeys.length > 1)
{
// Retrieving secondary action
var actionsButtons = {};
for(j = 1; j < levelActionsKeys.length; j++)
{
actionsButtons[levelActionsKeys[j]] = levelActions[levelActionsKeys[j]];
}
// Preparing secondary actions container
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);
}
// Adding secondary actions
for(j in actionsButtons)
{
var action = actionsButtons[j];
var actionElem = $('<a></a>');
var actionIconElem = $('<span></span>').appendTo(actionElem);
switch(action.type)
{
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);
actionElem.attr('data-toggle', 'modal').attr('data-target', '#modal-for-all').attr('href', url);
break;
case '{{ constant('Combodo\\iTop\\Portal\\Brick\\BrowseBrick::ENUM_ACTION_EDIT') }}':
url = '{{ app.url_generator.generate('p_object_edit', {'sObjectClass': '-objectClass-', 'sObjectId': '-objectId-'})|raw }}'.replace(/-objectClass-/, item.class).replace(/-objectId-/, item.id);
actionElem.attr('data-toggle', 'modal').attr('data-target', '#modal-for-all').attr('href', url);
break;
case '{{ constant('Combodo\\iTop\\Portal\\Brick\\BrowseBrick::ENUM_ACTION_CREATE_FROM_THIS') }}':
url = action.url.replace(/-objectClass-/, item.class).replace(/-objectId-/, item.id);
url = addParameterToUrl(url, 'ar_token', item.action_rules_token[action.type]);
actionElem.attr('data-toggle', 'modal').attr('data-target', '#modal-for-all').attr('href', url);
break;
default:
console.log('Action "'+action.type+'" not implemented for secondary action');
break;
}
// Adding title if present
if(action.title !== undefined)
{
actionElem.attr('title', action.title);
}
// Adding icon class if present
if(action.icon_class !== undefined)
{
actionIconElem.addClass(action.icon_class);
}
if(bHasSeveralSecondaryActions)
{
actionElem.append(action.title);
actionsSSMenuContainerElem.append( $('<p></p>').append(actionElem) );
}
else
{
actionsElem.append(actionElem);
}
}
////////////////////////////////////////////////
/*
var actionsElem = $('<div></div>').addClass('list-group-item-actions');
liElem.append(actionsElem);
@@ -277,7 +353,7 @@
}
actionsSSMenuContainerElem.append( $('<p></p>').append(actionElem.clone()) );
actionsElem.append(actionElem.addClass('hidden-xs')); // We don't want to display it on small screens
}
}*/
}
// Building subnodes if necessary

View File

@@ -309,7 +309,6 @@
});
// Hide tooltips when a modal is opening, otherwise it might be overlapping it
$('body').on('show.bs.modal', function () {
console.log('event captured');
$(this).find('.tooltip.in').tooltip('hide');
});
{% endblock %}

View File

@@ -458,7 +458,10 @@ label{
line-height: 1em;
}
.list-group-item .keep-spinning{
animation: spin 1s linear infinite;
-webkit-animation: spin 1s linear infinite;
-moz-animation: spin 1s linear infinite;
-ms-animation: spin 1s linear infinite;
}
/* Secondary actions */
@@ -482,6 +485,10 @@ table .group-actions .item-action-wrapper
-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);
}
.list-group-item-actions .item-action-wrapper .glyphicon,
table .group-actions .item-action-wrapper .glyphicon{
margin-right: 0.6em;
}
.list-group-item-actions .item-action-wrapper.collapse.in,
table .group-actions .item-action-wrapper.collapse.in{
display: block;
@@ -633,9 +640,15 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
}
#drag_overlay.drag_in{
animation: show-drop-zone 0.3s ease-out forwards;
-webkit-animation: show-drop-zone 0.3s ease-out forwards;
-moz-animation: show-drop-zone 0.3s ease-out forwards;
-ms-animation: show-drop-zone 0.3s ease-out forwards;
}
#drag_overlay.drag_out{
animation: hide-drop-zone 0.3s ease-out forwards;
-webkit-animation: hide-drop-zone 0.3s ease-out forwards;
-moz-animation: hide-drop-zone 0.3s ease-out forwards;
-ms-animation: hide-drop-zone 0.3s ease-out forwards;
}
#drag_overlay .overlay_content{
margin-top: 5em;

View File

@@ -1128,6 +1128,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>-->
<rules>
<rule id="contact-to-userrequest"/>
<rule id="servicesubcategory-to-userrequest"/>