N°3536 - Dashboard: Finish integration of in the TopBar

This commit is contained in:
Eric
2021-03-16 18:28:18 +01:00
parent d2f6ac5015
commit 0da945ee29
5 changed files with 76 additions and 61 deletions

View File

@@ -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);

View File

@@ -6,6 +6,9 @@
$ibo-toolbar--button-margin-top: 16px !default;
.ibo-toolbar {
display: flex;
align-items: center;
&.ibo-toolbar--action {
position: relative;
}

View File

@@ -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;
}

View File

@@ -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',

View File

@@ -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',