mirror of
https://github.com/Combodo/iTop.git
synced 2026-04-19 00:28:47 +02:00
N°3536 - Dashboard: Finish integration of in the TopBar
This commit is contained in:
@@ -1021,20 +1021,21 @@ EOF
|
||||
*/
|
||||
protected function RenderSelector(WebPage $oPage, $aAjaxParams = array())
|
||||
{
|
||||
if (!$this->HasCustomDashboard()) {
|
||||
return;
|
||||
}
|
||||
$sId = $this->GetId();
|
||||
$sDivId = utils::Sanitize($sId, '', 'element_identifier');
|
||||
$sExtraParams = json_encode($aAjaxParams);
|
||||
|
||||
$sSelectorHtml = '<div class="ibo-top-bar--toolbar-dashboard-selector">';
|
||||
if ($this->HasCustomDashboard()) {
|
||||
$bStandardSelected = appUserPreferences::GetPref('display_original_dashboard_'.$sId, false);
|
||||
$sStandard = Dict::S('UI:Toggle:StandardDashboard');
|
||||
$sSelectorHtml .= '<div class="selector-label">'.$sStandard.'</div>';
|
||||
$sSelectorHtml .= '<label class="switch"><input type="checkbox" onchange="ToggleDashboardSelector'.$sDivId.'();" '.($bStandardSelected ? '' : 'checked').'><span class="slider round"></span></label></input></label>';
|
||||
$sCustom = Dict::S('UI:Toggle:CustomDashboard');
|
||||
$sSelectorHtml .= '<div class="selector-label">'.$sCustom.'</div>';
|
||||
}
|
||||
$sSwitchToStandard = Dict::S('UI:Toggle:SwitchToStandardDashboard');
|
||||
$sSwitchToCustom = Dict::S('UI:Toggle:SwitchToCustomDashboard');
|
||||
$bStandardSelected = appUserPreferences::GetPref('display_original_dashboard_'.$sId, false);
|
||||
|
||||
$sSelectorHtml = '<div id="ibo-dashboard-selector'.$sDivId.'" class="ibo-top-bar--toolbar-dashboard-selector" data-tooltip-content="'.($bStandardSelected ? $sSwitchToCustom : $sSwitchToStandard).'">';
|
||||
$sSelectorHtml .= '<label class="switch"><input type="checkbox" onchange="ToggleDashboardSelector'.$sDivId.'();" '.($bStandardSelected ? '' : 'checked').'><span class="slider"></span></label></input></label>';
|
||||
$sSelectorHtml .= '</div>';
|
||||
|
||||
$sFile = addslashes($this->GetDefinitionFile());
|
||||
$sReloadURL = $this->GetReloadURL();
|
||||
|
||||
@@ -1043,19 +1044,26 @@ EOF
|
||||
$oToolbar->AddHtml($sSelectorHtml);
|
||||
|
||||
$oPage->add_script(
|
||||
<<<EOF
|
||||
<<<JS
|
||||
function ToggleDashboardSelector$sDivId()
|
||||
{
|
||||
$('.ibo-dashboard#$sDivId').block();
|
||||
var dashboard = $('.ibo-dashboard#$sDivId')
|
||||
dashboard.block();
|
||||
$.post(GetAbsoluteUrlAppRoot()+'pages/ajax.render.php',
|
||||
{ operation: 'toggle_dashboard', dashboard_id: '$sId', file: '$sFile', extra_params: $sExtraParams, reload_url: '$sReloadURL' },
|
||||
function(data) {
|
||||
$('.ibo-dashboard#$sDivId').html(data);
|
||||
$('.ibo-dashboard#$sDivId').unblock();
|
||||
dashboard.html(data);
|
||||
dashboard.unblock();
|
||||
if ($('#ibo-dashboard-selector$sDivId input').prop("checked")) {
|
||||
$('#ibo-dashboard-selector$sDivId').data('tooltip-content', '$sSwitchToStandard');
|
||||
} else {
|
||||
$('#ibo-dashboard-selector$sDivId').data('tooltip-content', '$sSwitchToCustom');
|
||||
}
|
||||
CombodoTooltip.InitAllNonInstantiatedTooltips($('#ibo-dashboard-selector$sDivId').parent());
|
||||
}
|
||||
);
|
||||
}
|
||||
EOF
|
||||
JS
|
||||
);
|
||||
} else {
|
||||
$sSelectorHtml = addslashes($sSelectorHtml);
|
||||
|
||||
@@ -6,6 +6,9 @@
|
||||
$ibo-toolbar--button-margin-top: 16px !default;
|
||||
|
||||
.ibo-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&.ibo-toolbar--action {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -77,26 +77,33 @@ $ibo-top-bar--quick-actions--margin-right: $ibo-top-bar--elements-spacing !defau
|
||||
}
|
||||
|
||||
.ibo-top-bar--toolbar-dashboard-selector {
|
||||
@extend %ibo-full-height-content;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@extend %ibo-full-height-content;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 12px;
|
||||
margin-right: 1px;
|
||||
|
||||
.selector-label {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
vertical-align: super;
|
||||
}
|
||||
&:hover {
|
||||
background-color: $ibo-color-secondary-100;
|
||||
border-radius: $ibo-button--border-radius;
|
||||
}
|
||||
|
||||
.selector-label {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
vertical-align: super;
|
||||
}
|
||||
}
|
||||
|
||||
// Round Toggle
|
||||
/* The switch - the box around the slider */
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 36px;
|
||||
height: 20px;
|
||||
vertical-align: baseline;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
height: 24px;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/* Hide default HTML checkbox */
|
||||
@@ -106,44 +113,41 @@ $ibo-top-bar--quick-actions--margin-right: $ibo-top-bar--elements-spacing !defau
|
||||
|
||||
/* The slider */
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: $ibo-color-secondary-600;
|
||||
transition: .4s;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
left: 3px;
|
||||
bottom: 3px;
|
||||
background-color: $ibo-color-secondary-300;
|
||||
transition: .4s;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
bottom: 2px;
|
||||
color: $ibo-color-secondary-800;
|
||||
content: "\f007";
|
||||
font-family: "Font Awesome 5 Free", serif;
|
||||
font-size: $ibo-font-size-100;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
input:checked + .slider {
|
||||
background-color: $ibo-color-primary-600;
|
||||
}
|
||||
|
||||
input:focus + .slider {
|
||||
box-shadow: 0 0 1px $ibo-color-primary-600;
|
||||
.slider:after {
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
bottom: 1px;
|
||||
color: $ibo-color-primary-600;
|
||||
content: "\f1ad";
|
||||
font-family: "Font Awesome 5 Free", serif;
|
||||
font-size: $ibo-font-size-150;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
input:checked + .slider:before {
|
||||
transform: translateX(14.5px);
|
||||
content: "\f1ad";
|
||||
}
|
||||
|
||||
/* Rounded sliders */
|
||||
.slider.round {
|
||||
border-radius: 20px;
|
||||
input:checked + .slider:after {
|
||||
content: "\f007";
|
||||
}
|
||||
|
||||
.slider.round:before {
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
@@ -1171,8 +1171,8 @@ When associated with a trigger, each action is given an "order" number, specifyi
|
||||
'UI:PrintResolution:A4Landscape' => 'A4 Landscape',
|
||||
'UI:PrintResolution:LetterPortrait' => 'Letter Portrait',
|
||||
'UI:PrintResolution:LetterLandscape' => 'Letter Landscape',
|
||||
'UI:Toggle:StandardDashboard' => 'Standard',
|
||||
'UI:Toggle:CustomDashboard' => 'Custom',
|
||||
'UI:Toggle:SwitchToStandardDashboard' => 'Switch to standard dashboard',
|
||||
'UI:Toggle:SwitchToCustomDashboard' => 'Switch to custom dashboard',
|
||||
|
||||
'UI:ConfigureThisList' => 'Configure This List...',
|
||||
'UI:ListConfigurationTitle' => 'List Configuration',
|
||||
|
||||
@@ -1154,8 +1154,8 @@ Lors de l\'association à un déclencheur, on attribue à chaque action un numé
|
||||
'UI:PrintResolution:A4Landscape' => 'A4 Paysage',
|
||||
'UI:PrintResolution:LetterPortrait' => 'US Letter Portrait',
|
||||
'UI:PrintResolution:LetterLandscape' => 'US Letter Paysage',
|
||||
'UI:Toggle:StandardDashboard' => 'Standard',
|
||||
'UI:Toggle:CustomDashboard' => 'Modifié',
|
||||
'UI:Toggle:SwitchToStandardDashboard' => 'Basculer sur le tableau de bord standard',
|
||||
'UI:Toggle:SwitchToCustomDashboard' => 'Basculer sur le tableau de bord modifié',
|
||||
|
||||
'UI:ConfigureThisList' => 'Configurer Cette Liste...',
|
||||
'UI:ListConfigurationTitle' => 'Configuration de la liste',
|
||||
|
||||
Reference in New Issue
Block a user