From 0da945ee291f7a4292ea90cf546d00f98284ec69 Mon Sep 17 00:00:00 2001
From: Eric <eric.espie@combodo.com>
Date: Tue, 16 Mar 2021 18:28:18 +0100
Subject: [PATCH] =?UTF-8?q?N=C2=B03536=20-=20Dashboard:=20Finish=20integra?=
 =?UTF-8?q?tion=20of=20in=20the=20TopBar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 application/dashboard.class.inc.php     | 36 ++++++----
 css/backoffice/components/_toolbar.scss |  3 +
 css/backoffice/layout/_top-bar.scss     | 90 +++++++++++++------------
 dictionaries/en.dictionary.itop.ui.php  |  4 +-
 dictionaries/fr.dictionary.itop.ui.php  |  4 +-
 5 files changed, 76 insertions(+), 61 deletions(-)

diff --git a/application/dashboard.class.inc.php b/application/dashboard.class.inc.php
index 753144b0f..5bd83fe1a 100644
--- a/application/dashboard.class.inc.php
+++ b/application/dashboard.class.inc.php
@@ -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);
diff --git a/css/backoffice/components/_toolbar.scss b/css/backoffice/components/_toolbar.scss
index 1e224c05a..505c498c8 100644
--- a/css/backoffice/components/_toolbar.scss
+++ b/css/backoffice/components/_toolbar.scss
@@ -6,6 +6,9 @@
 $ibo-toolbar--button-margin-top: 16px !default;
 
 .ibo-toolbar {
+  display: flex;
+  align-items: center;
+
   &.ibo-toolbar--action {
     position: relative;
   }
diff --git a/css/backoffice/layout/_top-bar.scss b/css/backoffice/layout/_top-bar.scss
index f470c5a02..af411a64c 100644
--- a/css/backoffice/layout/_top-bar.scss
+++ b/css/backoffice/layout/_top-bar.scss
@@ -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;
-}
diff --git a/dictionaries/en.dictionary.itop.ui.php b/dictionaries/en.dictionary.itop.ui.php
index 536bd9efc..973304074 100644
--- a/dictionaries/en.dictionary.itop.ui.php
+++ b/dictionaries/en.dictionary.itop.ui.php
@@ -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',
diff --git a/dictionaries/fr.dictionary.itop.ui.php b/dictionaries/fr.dictionary.itop.ui.php
index 7758ddd30..7da18c0f1 100644
--- a/dictionaries/fr.dictionary.itop.ui.php
+++ b/dictionaries/fr.dictionary.itop.ui.php
@@ -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',