N°2847 Add a user placeholder image selector in user preferences (poc, need to cleanup)

2026-02-12 23:14:18 +01:00 · 2020-08-07 15:42:10 +02:00
parent 93871308d1
commit ea7924663a
55 changed files with 75 additions and 1 deletions
--- a/core/userrights.class.inc.php
+++ b/core/userrights.class.inc.php
@@ -1088,7 +1088,7 @@ class UserRights
 	public static function GetContactPicture($sName = '')
 	{
 		// TODO: replace with console one
-		$sPictureUrl = utils::GetAbsoluteUrlAppRoot().'datamodels/2.x/itop-portal-base/portal/public/img/user-profile-default-256px.png';
+		$sPictureUrl = utils::GetAbsoluteUrlAppRoot().'images/user-pictures/' . appUserPreferences::GetPref('user_picture_placeholder', 'default-placeholder.png');

 		if (empty($sName))
 		{
--- a/css/backoffice/layout/_navigation-menu.scss
+++ b/css/backoffice/layout/_navigation-menu.scss
@@ -119,6 +119,7 @@ $ibo-navigation-menu--notifications-toggler--font-size: 28px !default;
 $ibo-navigation-menu--user--text-color: $ibo-color-white-100 !default;
 $ibo-navigation-menu--user-welcome-message--toggler--padding-left : 6px !default;
 $ibo-navigation-menu--user-picture--image--border-radius: $ibo-border-radius-full !default;
+$ibo-navigation-menu--user-picture--image--background-color: $ibo-color-grey-300;
 $ibo-navigation-menu--user-notifications--toggler--padding-left: 5px !default;

 $ibo-navigation-menu--user-picture--image-collapsed--size: 36px !default;
@@ -507,6 +508,7 @@ $ibo-navigation-menu--user-picture--image-expanded--size: 72px !default;
 		.ibo-navigation-menu--user-picture--image{
 			width: $ibo-navigation-menu--user-picture--image-collapsed--size;
 			border-radius: $ibo-navigation-menu--user-picture--image--border-radius;
+			background-color: $ibo-navigation-menu--user-picture--image--background-color;
 		}
 	}
 	.ibo-navigation-menu--user-welcome-message, .ibo-navigation-menu--user-organization, .ibo-navigation-menu--user-notifications{
--- a/css/light-grey.scss
+++ b/css/light-grey.scss
@@ -4365,4 +4365,27 @@
 			border: 2px solid black;
 		}
 	}
+}
+
+
+.ibo-preferences--user-preferences--picture-placeholder{
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+}
+.ibo-preferences--user-preferences--picture-placeholder--image{
+	height: 54px;
+	width: 54px;
+	border-radius: 100%;
+	margin: 12px;
+}
+.ibo-preferences--user-preferences--picture-placeholder--image > img{
+	border-radius: 100%;
+	background-color: lightgray;
+}
+.ibo-preferences--user-preferences--picture-placeholder--image.ibo-is-active{
+	border: solid 3px hsla(213, 49.4%, 34.1%, 1);
+}
+.ibo-preferences--user-preferences--picture-placeholder--image:hover{
+	border: solid 3px hsla(209, 61.6%, 50%, 1);
 }
--- a/images/user-pictures/boy-1.png
+++ b/images/user-pictures/boy-1.png
--- a/images/user-pictures/boy-10.png
+++ b/images/user-pictures/boy-10.png
--- a/images/user-pictures/boy-11.png
+++ b/images/user-pictures/boy-11.png
--- a/images/user-pictures/boy-12.png
+++ b/images/user-pictures/boy-12.png
--- a/images/user-pictures/boy-13.png
+++ b/images/user-pictures/boy-13.png
--- a/images/user-pictures/boy-14.png
+++ b/images/user-pictures/boy-14.png
--- a/images/user-pictures/boy-15.png
+++ b/images/user-pictures/boy-15.png
--- a/images/user-pictures/boy-16.png
+++ b/images/user-pictures/boy-16.png
--- a/images/user-pictures/boy-17.png
+++ b/images/user-pictures/boy-17.png
--- a/images/user-pictures/boy-18.png
+++ b/images/user-pictures/boy-18.png
--- a/images/user-pictures/boy-19.png
+++ b/images/user-pictures/boy-19.png
--- a/images/user-pictures/boy-2.png
+++ b/images/user-pictures/boy-2.png
--- a/images/user-pictures/boy-20.png
+++ b/images/user-pictures/boy-20.png
--- a/images/user-pictures/boy-21.png
+++ b/images/user-pictures/boy-21.png
--- a/images/user-pictures/boy-22.png
+++ b/images/user-pictures/boy-22.png
--- a/images/user-pictures/boy-3.png
+++ b/images/user-pictures/boy-3.png
--- a/images/user-pictures/boy-4.png
+++ b/images/user-pictures/boy-4.png
--- a/images/user-pictures/boy-5.png
+++ b/images/user-pictures/boy-5.png
--- a/images/user-pictures/boy-6.png
+++ b/images/user-pictures/boy-6.png
--- a/images/user-pictures/boy-7.png
+++ b/images/user-pictures/boy-7.png
--- a/images/user-pictures/boy-8.png
+++ b/images/user-pictures/boy-8.png
--- a/images/user-pictures/boy-9.png
+++ b/images/user-pictures/boy-9.png
--- a/images/user-pictures/boy.png
+++ b/images/user-pictures/boy.png
--- a/images/user-pictures/girl-1.png
+++ b/images/user-pictures/girl-1.png
--- a/images/user-pictures/girl-10.png
+++ b/images/user-pictures/girl-10.png
--- a/images/user-pictures/girl-11.png
+++ b/images/user-pictures/girl-11.png
--- a/images/user-pictures/girl-12.png
+++ b/images/user-pictures/girl-12.png
--- a/images/user-pictures/girl-13.png
+++ b/images/user-pictures/girl-13.png
--- a/images/user-pictures/girl-14.png
+++ b/images/user-pictures/girl-14.png
--- a/images/user-pictures/girl-15.png
+++ b/images/user-pictures/girl-15.png
--- a/images/user-pictures/girl-16.png
+++ b/images/user-pictures/girl-16.png
--- a/images/user-pictures/girl-17.png
+++ b/images/user-pictures/girl-17.png
--- a/images/user-pictures/girl-18.png
+++ b/images/user-pictures/girl-18.png
--- a/images/user-pictures/girl-19.png
+++ b/images/user-pictures/girl-19.png
--- a/images/user-pictures/girl-2.png
+++ b/images/user-pictures/girl-2.png
--- a/images/user-pictures/girl-20.png
+++ b/images/user-pictures/girl-20.png
--- a/images/user-pictures/girl-21.png
+++ b/images/user-pictures/girl-21.png
--- a/images/user-pictures/girl-22.png
+++ b/images/user-pictures/girl-22.png
--- a/images/user-pictures/girl-23.png
+++ b/images/user-pictures/girl-23.png
--- a/images/user-pictures/girl-24.png
+++ b/images/user-pictures/girl-24.png
--- a/images/user-pictures/girl-25.png
+++ b/images/user-pictures/girl-25.png
--- a/images/user-pictures/girl-26.png
+++ b/images/user-pictures/girl-26.png
--- a/images/user-pictures/girl-3.png
+++ b/images/user-pictures/girl-3.png
--- a/images/user-pictures/girl-4.png
+++ b/images/user-pictures/girl-4.png
--- a/images/user-pictures/girl-5.png
+++ b/images/user-pictures/girl-5.png
--- a/images/user-pictures/girl-6.png
+++ b/images/user-pictures/girl-6.png
--- a/images/user-pictures/girl-7.png
+++ b/images/user-pictures/girl-7.png
--- a/images/user-pictures/girl-8.png
+++ b/images/user-pictures/girl-8.png
--- a/images/user-pictures/girl-9.png
+++ b/images/user-pictures/girl-9.png
--- a/images/user-pictures/girl.png
+++ b/images/user-pictures/girl.png
--- a/images/user-pictures/user-profile-default-256px.png
+++ b/images/user-pictures/user-profile-default-256px.png
--- a/pages/preferences.php
+++ b/pages/preferences.php
@@ -17,6 +17,8 @@
 * You should have received a copy of the GNU Affero General Public License
 */

+use Combodo\iTop\Application\UI\Layout\PageContent\PageContentFactory;
+
 require_once('../approot.inc.php');
 require_once(APPROOT.'/application/application.inc.php');
 require_once(APPROOT.'/application/itopwebpage.class.inc.php');
@@ -28,6 +30,8 @@ require_once(APPROOT.'/application/startup.inc.php');
 */
 function DisplayPreferences($oP)
 {
+	$oP->SetContentLayout(PageContentFactory::MakeStandardEmpty());
+//	$oP->AddUiBlock(new \Combodo\iTop\Application\UI\Component\Breadcrumbs\Breadcrumbs());
 	$oAppContext = new ApplicationContext();
 	$sURL = utils::GetAbsoluteUrlAppRoot().'pages/UI.php?'.$oAppContext->GetForLink();
 	
@@ -362,6 +366,50 @@ EOF
 		$oP->add('</form>');
 		$oP->add('</fieldset>');
 	}
+	
+	//Todo: factorize as UiBlock
+	if (true)
+	{
+		$sUserPicturesFolder = '../images/user-pictures/';
+		$sUserDefaultPicture = appUserPreferences::GetPref('user_picture_placeholder', 'default-placeholder.png');
+		
+		$oP->add(
+			<<<HTML
+<fieldset><legend>UI:Preferences:ChooseAPlaceholder'</legend>
+<p>UI:Preferences:ChooseAPlaceholder+</p>
+<div class="ibo-preferences--user-preferences--picture-placeholder">
+HTML
+		);
+		foreach (scandir($sUserPicturesFolder) as $sUserPicture)
+		{
+			if ($sUserPicture === '.' || $sUserPicture === '..')
+			{
+				continue;
+			}
+			$sAdditionalClass = '';
+			if ($sUserDefaultPicture === $sUserPicture)
+			{
+				$sAdditionalClass = ' ibo-is-active';
+			}
+			$oP->add('<a class="ibo-preferences--user-preferences--picture-placeholder--image'.$sAdditionalClass.'" data-image-name="'.$sUserPicture.'" data-role="ibo-preferences--user-preferences--picture-placeholder--image" href="#"> <img src="'.$sUserPicturesFolder.$sUserPicture.'"/> </a>');
+		}
+		$oP->add_ready_script(
+			<<<JS
+$('[data-role="ibo-preferences--user-preferences--picture-placeholder--image"]').on('click',function(){
+	SetUserPreference('user_picture_placeholder', $(this).attr('data-image-name'), true);
+	$('[data-role="ibo-preferences--user-preferences--picture-placeholder--image"]').removeClass('ibo-is-active');
+	$(this).addClass('ibo-is-active');
+});
+JS
+
+		);
+		$oP->add(
+			<<<HTML
+</div>
+</fieldset>
+HTML
+		);
+	}

 	/** @var iPreferencesExtension $oLoginExtensionInstance */
 	foreach (MetaModel::EnumPlugins('iPreferencesExtension') as $oPreferencesExtensionInstance)
@@ -511,6 +559,7 @@ try
 				DisplayPreferences($oPage);
 		}
 	}
+	
 	$oPage->output();
 }
 catch(CoreException $e)