diff --git a/css/backoffice/components/dashlet/_dashlet-badge.scss b/css/backoffice/components/dashlet/_dashlet-badge.scss index 348b21f0c..0a5c58f6d 100644 --- a/css/backoffice/components/dashlet/_dashlet-badge.scss +++ b/css/backoffice/components/dashlet/_dashlet-badge.scss @@ -22,14 +22,14 @@ $ibo-dashlet-badge--action-icon--margin-right: 6px !default; /* Rules */ .ibo-dashlet-badge{ - //min-width: $ibo-dashlet-badge--min-width; - flex-basis: $ibo-dashlet-badge--min-width; - flex-grow: 1; - flex-shrink: 1; - padding: $ibo-dashlet-badge--padding-y $ibo-dashlet-badge--padding-x; - background-color: $ibo-dashlet-badge--background-color; - border: $ibo-dashlet-badge--border; - border-radius: $ibo-dashlet-badge--border-radius; + //min-width: $ibo-dashlet-badge--min-width; + flex-basis: $ibo-dashlet-badge--min-width; + flex-grow: 1; + flex-shrink: 1; + padding: $ibo-dashlet-badge--padding-y $ibo-dashlet-badge--padding-x; + background-color: $ibo-dashlet-badge--background-color; + border: $ibo-dashlet-badge--border; + border-radius: $ibo-dashlet-badge--border-radius; } .ibo-dashlet-badge--body{ display: flex; diff --git a/js/components/dashlet/dashlet-badge.js b/js/components/dashlet/dashlet-badge.js new file mode 100644 index 000000000..416e1159f --- /dev/null +++ b/js/components/dashlet/dashlet-badge.js @@ -0,0 +1,69 @@ +/* + * Copyright (C) 2013-2020 Combodo SARL + * + * This file is part of iTop. + * + * iTop is free software; you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * iTop is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + */ + +; +$(function () { + $.widget('itop.dashlet_badge', + { + options: {}, + js_selectors: + { + dashlet_container: '[data-role="ibo-dashlet"]', + dashlet_actions: '[data-role="ibo-dashlet-badge--actions"]', + dashlet_action_list: '[data-role="ibo-dashlet-badge--action-list"]' + }, + $dashlet_container: null, + + _create: function () { + this.$dashlet_container = $( + this.element + .parents(this.js_selectors.dashlet_container) + .get(-1) + ); + + this._setStyle(); + this._bindEvents(); + }, + // events bound via _bind are removed automatically + // revert other modifications here + _destroy: function () { + }, + _setStyle: function () { + this.$dashlet_container.css("cursor", "pointer"); + }, + _bindEvents: function () { + const me = this; + + this.$dashlet_container.on('click', function (oEvent) { + me._onComponentClick(oEvent); + }); + }, + _onComponentClick: function (oEvent) { + let $eventTarget = $(oEvent.target); + + if ($eventTarget.is(this.js_selectors.dashlet_actions)) { + return; + } + + let $listLink = $eventTarget + .closest(this.js_selectors.dashlet_container) + .find(this.js_selectors.dashlet_action_list); + $listLink[0].click(); + } + }) +}); diff --git a/sources/application/UI/Base/Component/Dashlet/DashletBadge.php b/sources/application/UI/Base/Component/Dashlet/DashletBadge.php index acc434e1a..ef67d29fe 100644 --- a/sources/application/UI/Base/Component/Dashlet/DashletBadge.php +++ b/sources/application/UI/Base/Component/Dashlet/DashletBadge.php @@ -11,7 +11,11 @@ namespace Combodo\iTop\Application\UI\Base\Component\Dashlet; class DashletBadge extends DashletContainer { public const BLOCK_CODE = 'ibo-dashlet-badge'; - public const DEFAULT_HTML_TEMPLATE_REL_PATH = 'base/components/dashlet/dashletbadge'; + public const DEFAULT_HTML_TEMPLATE_REL_PATH = 'base/components/dashlet/dashlet-badge'; + public const DEFAULT_JS_TEMPLATE_REL_PATH = 'base/components/dashlet/dashlet-badge'; + public const DEFAULT_JS_FILES_REL_PATH = [ + 'js/components/dashlet/dashlet-badge.js', + ]; /** @var string */ protected $sClassIconUrl; diff --git a/sources/application/UI/Base/Component/Dashlet/DashletContainer.php b/sources/application/UI/Base/Component/Dashlet/DashletContainer.php index 8cc5d5382..2dea6f1d3 100644 --- a/sources/application/UI/Base/Component/Dashlet/DashletContainer.php +++ b/sources/application/UI/Base/Component/Dashlet/DashletContainer.php @@ -14,4 +14,11 @@ class DashletContainer extends UIContentBlock { public const BLOCK_CODE = 'ibo-dashlet'; public const DEFAULT_HTML_TEMPLATE_REL_PATH = 'base/layouts/content-block/layout'; + + public function __construct(string $sId = null, array $aContainerClasses = []) + { + parent::__construct($sId, $aContainerClasses); + + $this->AddDataAttribute('role', static::BLOCK_CODE); + } } \ No newline at end of file diff --git a/templates/base/components/dashlet/dashletbadge.html.twig b/templates/base/components/dashlet/dashlet-badge.html.twig similarity index 86% rename from templates/base/components/dashlet/dashletbadge.html.twig rename to templates/base/components/dashlet/dashlet-badge.html.twig index ed58b95d9..0cadee409 100644 --- a/templates/base/components/dashlet/dashletbadge.html.twig +++ b/templates/base/components/dashlet/dashlet-badge.html.twig @@ -1,12 +1,13 @@ {# @copyright Copyright (C) 2010-2020 Combodo SARL #} {# @license http://opensource.org/licenses/AGPL-3.0 #} {% apply spaceless %} -
+
- + {{ oUIBlock.GetCount() }} {{ oUIBlock.GetClassLabel() }} diff --git a/templates/base/components/dashlet/dashlet-badge.js.twig b/templates/base/components/dashlet/dashlet-badge.js.twig new file mode 100644 index 000000000..db59331ab --- /dev/null +++ b/templates/base/components/dashlet/dashlet-badge.js.twig @@ -0,0 +1 @@ +$('#{{ oUIBlock.GetId() }}').dashlet_badge(); \ No newline at end of file