N°3857 Replace old welcome popup

core/config.class.inc.php

@@ -23,6 +23,7 @@
 define('ITOP_APPLICATION', 'iTop');
 define('ITOP_APPLICATION_SHORT', 'iTop');
 define('ITOP_VERSION', '3.0.0-dev');
+define('ITOP_VERSION_NAME', 'Fullmoon');
 define('ITOP_REVISION', 'svn');
 define('ITOP_BUILD_DATE', '$WCNOW$');
 define('ITOP_VERSION_FULL', ITOP_VERSION.'-'.ITOP_REVISION);

css/backoffice/pages/_all.scss

@@ -11,4 +11,5 @@
 @import "data-synchro";
 @import "datamodel-viewer";
 @import "csv-import";
-@import "global-search";
+@import "global-search";
+@import "welcome-popup";

css/backoffice/pages/_welcome-popup.scss

@@ -0,0 +1,45 @@
+$ibo-welcome-popup--image--width: 30% !default;
+
+$ibo-welcome-popup--image--svg--height: 100% !default;
+$ibo-welcome-popup--image--svg--padding: 20px !default;
+
+$ibo-welcome-popup--text--padding: 15px !default;
+
+$ibo-welcome-popup--text--subdiv--padding-bottom: 20px !default;
+$ibo-welcome-popup--text--first-subdiv--padding-bottom: 25px !default;
+
+$ibo-welcome-popup--text--options--bottom: 10px !default;
+
+#welcome_popup{
+  display: flex;
+  
+}
+.ibo-welcome-popup--image{
+  display: flex;
+  justify-content: center;
+  align-self: center;
+  
+  width: $ibo-welcome-popup--image--width;
+  >svg{
+    height: $ibo-welcome-popup--image--svg--height;
+    padding: $ibo-welcome-popup--image--svg--padding;
+  }
+}
+.ibo-welcome-popup--text{
+  flex-grow:1;
+  align-self: center;
+  padding: $ibo-welcome-popup--text--padding;
+  
+  @extend %ibo-font-ral-nor-250;
+  >div>div{
+    padding-bottom: $ibo-welcome-popup--text--subdiv--padding-bottom;
+    &:first-child{
+      @extend %ibo-font-ral-sembol-300;
+      padding-bottom: $ibo-welcome-popup--text--first-subdiv--padding-bottom;
+    }
+  }
+}
+.ibo-welcome-popup--text--options{
+  position: absolute;
+  bottom: $ibo-welcome-popup--text--options--bottom;
+}

dictionaries/en.dictionary.itop.ui.php

@@ -367,6 +367,14 @@ Dict::Add('EN US', 'English', 'English', array(
 <li>Manage the most important asset of your IT: Documentation.</li>
 </ul>
 </p>',
+	'UI:WelcomeMenu:Text'=> '<div>Congratulations, you landed on '.ITOP_APPLICATION.' '.ITOP_VERSION_NAME.'!</div>
+
+<div>This version features a modern brand new accessible and responsive backoffice design.</div>
+
+<div>We kept iTop core functions that you liked and modernized them to make you love them.
+We hope you’ll enjoy this version as much as we enjoyed imagining and creating it.</div>
+
+<div>Customize your iTop preferences for a personalized experience.</div>',
 	'UI:WelcomeMenu:AllOpenRequests' => 'Open requests: %1$d',
 	'UI:WelcomeMenu:MyCalls' => 'My requests',
 	'UI:WelcomeMenu:OpenIncidents' => 'Open incidents: %1$d',

pages/UI.php

@@ -4,6 +4,7 @@
  * @license     http://opensource.org/licenses/AGPL-3.0
  */
 
+use Combodo\iTop\Application\TwigBase\Twig\TwigHelper;
 use Combodo\iTop\Application\UI\Base\Component\Button\ButtonUIBlockFactory;
 use Combodo\iTop\Application\UI\Base\Component\Form\Form;
 use Combodo\iTop\Application\UI\Base\Component\Form\FormUIBlockFactory;
@@ -36,32 +37,8 @@ function DisplayWelcomePopup(WebPage $oP)
 		$bPopup = appUserPreferences::GetPref('welcome_popup', true);
 		if ($bPopup)
 		{
-			$sTemplate = @file_get_contents('../application/templates/welcome_popup.html');
+			TwigHelper::RenderIntoPage($oP, APPROOT.'/', 'templates/pages/backoffice/welcome_popup/welcome_popup');
-			if ($sTemplate !== false)
+			$_SESSION['welcome'] = 'ok';
-			{
-				$oTemplate = new DisplayTemplate($sTemplate);
-				$oP->add("<div id=\"welcome_popup\">");
-				$oTemplate->Render($oP, array());
-				$oP->add("<p style=\"float:left\"><input type=\"checkbox\" checked id=\"display_welcome_popup\"/><label for=\"display_welcome_popup\">&nbsp;".Dict::S('UI:DisplayThisMessageAtStartup')."</label></p>\n");
-				$oP->add("<p style=\"float:right\"><input type=\"button\" value=\"".Dict::S('UI:Button:Ok')."\" onClick=\"$('#welcome_popup').dialog('close');\"/>\n");
-				$oP->add("</div>\n");
-				$sTitle = addslashes(Dict::S('UI:WelcomeMenu:Title'));
-				$oP->add_ready_script(
-<<<EOF
-	$('#welcome_popup').dialog( { width:'80%', height: 'auto', title: '$sTitle', autoOpen: true, modal:true,
-								  close: function() {
-								  	var bDisplay = $('#display_welcome_popup:checked').length;
-								  	SetUserPreference('welcome_popup', bDisplay, true); 
-								  }
-								  });
-	if ($('#welcome_popup').height() > ($(window).height()-70))
-	{
-		$('#welcome_popup').height($(window).height()-70);
-	}
-EOF
-);
-				$_SESSION['welcome'] = 'ok';
-			}
 		}
 	}	
 }

templates/pages/backoffice/welcome_popup/welcome_popup.html.twig

@@ -0,0 +1,14 @@
+<div id="welcome_popup">
+    <div class="ibo-welcome-popup--image ibo-svg-illustration--container">
+        {{ source("images/illustrations/undraw_relaunch_day.svg") }}
+    </div>
+    <div class="ibo-welcome-popup--text">
+        <div>
+            {{ 'UI:WelcomeMenu:Text'| dict_s|raw }}
+        </div>
+        <div class="ibo-welcome-popup--text--options">
+        <input type="checkbox" checked id="display_welcome_popup"/><label for="display_welcome_popup">{{'UI:DisplayThisMessageAtStartup'| dict_s}}</label>
+        </div>
+    </div>
+
+</div>

templates/pages/backoffice/welcome_popup/welcome_popup.ready.js.twig

@@ -0,0 +1,16 @@
+console.log('a');
+
+$('#welcome_popup').dialog( { width:'60%', height: 'auto', title: '{{ 'UI:WelcomeMenu:Title'|dict_s }}', autoOpen: true, modal:true,
+    close: function() {
+        var bDisplay = $('#display_welcome_popup:checked').length;
+        SetUserPreference('welcome_popup', bDisplay, true);
+    },
+    buttons: [{
+        text: "{{ 'UI:Button:Ok'|dict_s }}", click: function() {
+            $(this).dialog( "close" ); $(this).remove();
+        }}],
+});
+if ($('#welcome_popup').height() > ($(window).height()-70))
+{
+    $('#welcome_popup').height($(window).height()-70);
+}