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

Fix dashboard editor SCSS classes

Browse Source
This commit is contained in:
Molkobain
2021-03-15 19:27:35 +01:00
parent 5e5277f38e
commit 0d020bb706
3 changed files with 39 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
application/dashboard.class.inc.php
View File

@@ -429,11 +429,11 @@ abstract class Dashboard
public function RenderProperties($oPage, $aExtraParams = array()) public function RenderProperties($oPage, $aExtraParams = array())
{ {
// menu to pick a layout and edit other properties of the dashboard // menu to pick a layout and edit other properties of the dashboard
$oPage->add('<div class="ui-widget-content ui-corner-all ibo-dashboard--properties"><div class="ui-widget-header ui-corner-all ibo-dashboard--properties--title">'.Dict::S('UI:DashboardEdit:Properties').'</div>'); $oPage->add('<div class="ui-widget-content ui-corner-all ibo-dashboard-editor--properties"><div class="ui-widget-header ui-corner-all ibo-dashboard-editor--properties-title">'.Dict::S('UI:DashboardEdit:Properties').'</div>');
$sUrl = utils::GetAbsoluteUrlAppRoot(); $sUrl = utils::GetAbsoluteUrlAppRoot();
$oPage->add('<div class="ibo-dashboard--properties--subtitle" data-role="ibo-dashboard--properties--subtitle">'.Dict::S('UI:DashboardEdit:Layout').'</div>'); $oPage->add('<div class="ibo-dashboard-editor--properties-subtitle" data-role="ibo-dashboard-editor--properties-subtitle">'.Dict::S('UI:DashboardEdit:Layout').'</div>');
$oPage->add('<div id="select_layout" class="ibo-dashboard--properties--layout-list" data-role="ibo-dashboard--properties--layout-list">'); $oPage->add('<div id="select_layout" class="ibo-dashboard-editor--layout-list" data-role="ibo-dashboard-editor--layout-list">');
foreach (get_declared_classes() as $sLayoutClass) { foreach (get_declared_classes() as $sLayoutClass) {
if (is_subclass_of($sLayoutClass, 'DashboardLayout')) { if (is_subclass_of($sLayoutClass, 'DashboardLayout')) {
$oReflection = new ReflectionClass($sLayoutClass); $oReflection = new ReflectionClass($sLayoutClass);
@@ -569,7 +569,7 @@ JS
$oPage->add('<div id="select_dashlet" class="ibo-dashboard--available-dashlets--list" data-role="ibo-dashboard--available-dashlets--list">'); $oPage->add('<div id="select_dashlet" class="ibo-dashboard--available-dashlets--list" data-role="ibo-dashboard--available-dashlets--list">');
$aAvailableDashlets = $this->GetAvailableDashlets(); $aAvailableDashlets = $this->GetAvailableDashlets();
foreach ($aAvailableDashlets as $sDashletClass => $aInfo) { foreach ($aAvailableDashlets as $sDashletClass => $aInfo) {
$oPage->add('<span dashlet_class="'.$sDashletClass.'" class="ibo-dashlet--icon dashlet_icon ui-widget-content ui-corner-all" data-role="ibo-dashlet--icon" id="dashlet_'.$sDashletClass.'" title="'.$aInfo['label'].'"><img src="'.$sUrl.$aInfo['icon'].'" /></span>'); $oPage->add('<span dashlet_class="'.$sDashletClass.'" class="ibo-dashboard-editor--available-dashlet-icon dashlet_icon ui-widget-content ui-corner-all" data-role="ibo-dashboard-editor--available-dashlet-icon" id="dashlet_'.$sDashletClass.'" title="'.$aInfo['label'].'"><img src="'.$sUrl.$aInfo['icon'].'" /></span>');
} }
$oPage->add('</div>'); $oPage->add('</div>');

56
css/backoffice/layout/dashboard/_dashboard-editor.scss
View File

@@ -1,43 +1,43 @@
$ibo-dashboard-editor--pane-padding: 16px 30px 16px 15px !default; $ibo-dashboard-editor--pane--padding: 16px 30px 16px 15px !default;
$ibo-dashlet--icon--height: 34px !default; $ibo-dashboard-editor--available-dashlet-icon--height: 34px !default;
$ibo-dashlet--icon--width: $ibo-dashlet--icon--height !default; $ibo-dashboard-editor--available-dashlet-icon--width: $ibo-dashboard-editor--available-dashlet-icon--height !default;
$ibo-dashlet--icon--margin: 2px 5px !default; $ibo-dashboard-editor--available-dashlet-icon--margin: 2px 5px !default;
$ibo-dashboard--properties--title--padding-bottom: 2rem !default; $ibo-dashboard-editor--properties-title--padding-bottom: 2rem !default;
$ibo-dashboard--properties--layout-list--padding-bottom: 12px !default; $ibo-dashboard-editor--layout-list--padding-bottom: 12px !default;
$ibo-dashboard--properties--layout-list--button--margin: 0 15px 0 5px !default; $ibo-dashboard-editor--layout-list--button--margin: 0 15px 0 5px !default;
$ibo-dashboard-editor--padding: 0 !default; $ibo-dashboard-editor--padding: 0 !default;
$ibo-dashboard-editor--dashboard--border-right: solid 1px $ibo-color-grey-200 !default; $ibo-dashboard-editor--dashboard--border-right: solid 1px $ibo-color-grey-200 !default;
$ibo-dashboard-editor--dashboard--padding: 16px 15px 16px 30px !default; $ibo-dashboard-editor--dashboard--padding: 16px 15px 16px 30px !default;
$ibo-dashlet--delete--top: 7px !default; $ibo-dashboard-editor--delete-dashlet-icon--top: 7px !default;
$ibo-dashlet--delete--right: 9px !default; $ibo-dashboard-editor--delete-dashlet-icon--right: 9px !default;
$ibo-dashlet--delete--padding: 2px 6px !default; $ibo-dashboard-editor--delete-dashlet-icon--padding: 2px 6px !default;
$ibo-dashlet--delete--z-index: 21 !default; $ibo-dashboard-editor--delete-dashlet-icon--z-index: 21 !default;
.ibo-dashboard-editor--pane{ .ibo-dashboard-editor--pane{
flex-grow: 1; flex-grow: 1;
padding: $ibo-dashboard-editor--pane-padding; padding: $ibo-dashboard-editor--pane--padding;
overflow: auto; overflow: auto;
} }
.ibo-dashlet--icon{ .ibo-dashboard-editor--available-dashlet-icon{
display: inline-block; display: inline-block;
height: $ibo-dashlet--icon--height; height: $ibo-dashboard-editor--available-dashlet-icon--height;
width: $ibo-dashlet--icon--width; width: $ibo-dashboard-editor--available-dashlet-icon--width;
margin: $ibo-dashlet--icon--margin; margin: $ibo-dashboard-editor--available-dashlet-icon--margin;
cursor: grab; cursor: grab;
&:active{ &:active{
cursor: move; cursor: move;
} }
} }
.ibo-dashboard--properties, .ibo-dashboard-editor--properties,
.ibo-dashboard--available-dashlets, .ibo-dashboard--available-dashlets,
.ibo-dashlet--properties{ .ibo-dashlet--properties{
display: flex; display: flex;
@@ -54,25 +54,25 @@ $ibo-dashlet--delete--z-index: 21 !default;
} }
} }
} }
.ibo-dashboard--properties--title{ .ibo-dashboard-editor--properties-title{
padding-bottom: $ibo-dashboard--properties--title--padding-bottom; padding-bottom: $ibo-dashboard-editor--properties-title--padding-bottom;
@extend %ibo-font-ral-med-250; @extend %ibo-font-ral-med-250;
} }
.ibo-dashboard--properties--subtitle, .ibo-dashboard-editor--properties-subtitle,
.ibo-dashboard--available-dashlet--title, .ibo-dashboard--available-dashlet--title,
.ibo-dashlet--properties--title{ .ibo-dashlet--properties--title{
@extend .ibo-fieldset-legend; @extend .ibo-fieldset-legend;
@extend %ibo-font-ral-med-150; @extend %ibo-font-ral-med-150;
} }
.ibo-dashboard--properties--layout-list { .ibo-dashboard-editor--layout-list {
display: flex; display: flex;
justify-content: center; justify-content: center;
padding-bottom: $ibo-dashboard--properties--layout-list--padding-bottom; padding-bottom: $ibo-dashboard-editor--layout-list--padding-bottom;
> .ui-button { > .ui-button {
display: inline-block; display: inline-block;
height: auto; height: auto;
margin: $ibo-dashboard--properties--layout-list--button--margin; margin: $ibo-dashboard-editor--layout-list--button--margin;
} }
} }
.ibo-dashboard--available-dashlets--list{ .ibo-dashboard--available-dashlets--list{
@@ -92,12 +92,12 @@ $ibo-dashlet--delete--z-index: 21 !default;
padding: $ibo-dashboard-editor--dashboard--padding; padding: $ibo-dashboard-editor--dashboard--padding;
} }
} }
.ibo-dashlet--delete{ .ibo-dashboard-editor--delete-dashlet-icon{
position: absolute; position: absolute;
top: $ibo-dashlet--delete--top; top: $ibo-dashboard-editor--delete-dashlet-icon--top;
right: $ibo-dashlet--delete--right; right: $ibo-dashboard-editor--delete-dashlet-icon--right;
padding: $ibo-dashlet--delete--padding; padding: $ibo-dashboard-editor--delete-dashlet-icon--padding;
z-index: $ibo-dashlet--delete--z-index; z-index: $ibo-dashboard-editor--delete-dashlet-icon--z-index;
@extend .ibo-button; @extend .ibo-button;
@extend .ibo-is-alternative; @extend .ibo-is-alternative;
@extend .ibo-is-danger; @extend .ibo-is-danger;

15
js/dashlet.js
View File

@@ -28,18 +28,17 @@ $(function()
// to call when the contents are changed // to call when the contents are changed
_update: function() _update: function()
{ {
var me = this; var me = this;
this.closeBox = $('<div class="ibo-dashlet--delete close-box"/>').append('<i class="fas fa-trash ibo-button--icon"></i>'); this.closeBox = $('<div class="ibo-dashboard-editor--delete-dashlet-icon close-box"/>').append('<i class="fas fa-trash ibo-button--icon"></i>');
this.closeBox this.closeBox
.on('click', function() { me._remove_dashlet(); }) .on('click', function () {
me._remove_dashlet();
})
.prependTo(this.element); .prependTo(this.element);
if (this.element.hasClass('dashlet-selected')) if (this.element.hasClass('dashlet-selected')) {
{
this.closeBox.show(); this.closeBox.show();
} } else {
else
{
this.closeBox.hide(); this.closeBox.hide();
} }