N°2847 Add a user placeholder image selector in user preferences (poc, need to cleanup)
Stephen Abello
@@ -1088,7 +1088,7 @@ class UserRights
|
|||||||
public static function GetContactPicture($sName = '')
|
public static function GetContactPicture($sName = '')
|
||||||
{
|
{
|
||||||
// TODO: replace with console one
|
// 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))
|
if (empty($sName))
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -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--text-color: $ibo-color-white-100 !default;
|
||||||
$ibo-navigation-menu--user-welcome-message--toggler--padding-left : 6px !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--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-notifications--toggler--padding-left: 5px !default;
|
||||||
|
|
||||||
$ibo-navigation-menu--user-picture--image-collapsed--size: 36px !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{
|
.ibo-navigation-menu--user-picture--image{
|
||||||
width: $ibo-navigation-menu--user-picture--image-collapsed--size;
|
width: $ibo-navigation-menu--user-picture--image-collapsed--size;
|
||||||
border-radius: $ibo-navigation-menu--user-picture--image--border-radius;
|
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{
|
.ibo-navigation-menu--user-welcome-message, .ibo-navigation-menu--user-organization, .ibo-navigation-menu--user-notifications{
|
||||||
|
|||||||
@@ -4365,4 +4365,27 @@
|
|||||||
border: 2px solid black;
|
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);
|
||||||
}
|
}
|
||||||
BIN
images/user-pictures/boy-1.png
Normal file
|
After Width: | Height: | Size: 18 KiB |
BIN
images/user-pictures/boy-10.png
Normal file
|
After Width: | Height: | Size: 15 KiB |
BIN
images/user-pictures/boy-11.png
Normal file
|
After Width: | Height: | Size: 20 KiB |
BIN
images/user-pictures/boy-12.png
Normal file
|
After Width: | Height: | Size: 15 KiB |
BIN
images/user-pictures/boy-13.png
Normal file
|
After Width: | Height: | Size: 18 KiB |
BIN
images/user-pictures/boy-14.png
Normal file
|
After Width: | Height: | Size: 17 KiB |
BIN
images/user-pictures/boy-15.png
Normal file
|
After Width: | Height: | Size: 16 KiB |
BIN
images/user-pictures/boy-16.png
Normal file
|
After Width: | Height: | Size: 20 KiB |
BIN
images/user-pictures/boy-17.png
Normal file
|
After Width: | Height: | Size: 15 KiB |
BIN
images/user-pictures/boy-18.png
Normal file
|
After Width: | Height: | Size: 20 KiB |
BIN
images/user-pictures/boy-19.png
Normal file
|
After Width: | Height: | Size: 17 KiB |
BIN
images/user-pictures/boy-2.png
Normal file
|
After Width: | Height: | Size: 17 KiB |
BIN
images/user-pictures/boy-20.png
Normal file
|
After Width: | Height: | Size: 15 KiB |
BIN
images/user-pictures/boy-21.png
Normal file
|
After Width: | Height: | Size: 18 KiB |
BIN
images/user-pictures/boy-22.png
Normal file
|
After Width: | Height: | Size: 16 KiB |
BIN
images/user-pictures/boy-3.png
Normal file
|
After Width: | Height: | Size: 17 KiB |
BIN
images/user-pictures/boy-4.png
Normal file
|
After Width: | Height: | Size: 17 KiB |
BIN
images/user-pictures/boy-5.png
Normal file
|
After Width: | Height: | Size: 17 KiB |
BIN
images/user-pictures/boy-6.png
Normal file
|
After Width: | Height: | Size: 14 KiB |
BIN
images/user-pictures/boy-7.png
Normal file
|
After Width: | Height: | Size: 17 KiB |
BIN
images/user-pictures/boy-8.png
Normal file
|
After Width: | Height: | Size: 15 KiB |
BIN
images/user-pictures/boy-9.png
Normal file
|
After Width: | Height: | Size: 16 KiB |
BIN
images/user-pictures/boy.png
Normal file
|
After Width: | Height: | Size: 16 KiB |
BIN
images/user-pictures/girl-1.png
Normal file
|
After Width: | Height: | Size: 15 KiB |
BIN
images/user-pictures/girl-10.png
Normal file
|
After Width: | Height: | Size: 23 KiB |
BIN
images/user-pictures/girl-11.png
Normal file
|
After Width: | Height: | Size: 22 KiB |
BIN
images/user-pictures/girl-12.png
Normal file
|
After Width: | Height: | Size: 20 KiB |
BIN
images/user-pictures/girl-13.png
Normal file
|
After Width: | Height: | Size: 23 KiB |
BIN
images/user-pictures/girl-14.png
Normal file
|
After Width: | Height: | Size: 22 KiB |
BIN
images/user-pictures/girl-15.png
Normal file
|
After Width: | Height: | Size: 16 KiB |
BIN
images/user-pictures/girl-16.png
Normal file
|
After Width: | Height: | Size: 18 KiB |
BIN
images/user-pictures/girl-17.png
Normal file
|
After Width: | Height: | Size: 24 KiB |
BIN
images/user-pictures/girl-18.png
Normal file
|
After Width: | Height: | Size: 18 KiB |
BIN
images/user-pictures/girl-19.png
Normal file
|
After Width: | Height: | Size: 17 KiB |
BIN
images/user-pictures/girl-2.png
Normal file
|
After Width: | Height: | Size: 20 KiB |
BIN
images/user-pictures/girl-20.png
Normal file
|
After Width: | Height: | Size: 16 KiB |
BIN
images/user-pictures/girl-21.png
Normal file
|
After Width: | Height: | Size: 20 KiB |
BIN
images/user-pictures/girl-22.png
Normal file
|
After Width: | Height: | Size: 23 KiB |
BIN
images/user-pictures/girl-23.png
Normal file
|
After Width: | Height: | Size: 22 KiB |
BIN
images/user-pictures/girl-24.png
Normal file
|
After Width: | Height: | Size: 23 KiB |
BIN
images/user-pictures/girl-25.png
Normal file
|
After Width: | Height: | Size: 18 KiB |
BIN
images/user-pictures/girl-26.png
Normal file
|
After Width: | Height: | Size: 20 KiB |
BIN
images/user-pictures/girl-3.png
Normal file
|
After Width: | Height: | Size: 20 KiB |
BIN
images/user-pictures/girl-4.png
Normal file
|
After Width: | Height: | Size: 17 KiB |
BIN
images/user-pictures/girl-5.png
Normal file
|
After Width: | Height: | Size: 27 KiB |
BIN
images/user-pictures/girl-6.png
Normal file
|
After Width: | Height: | Size: 19 KiB |
BIN
images/user-pictures/girl-7.png
Normal file
|
After Width: | Height: | Size: 17 KiB |
BIN
images/user-pictures/girl-8.png
Normal file
|
After Width: | Height: | Size: 19 KiB |
BIN
images/user-pictures/girl-9.png
Normal file
|
After Width: | Height: | Size: 25 KiB |
BIN
images/user-pictures/girl.png
Normal file
|
After Width: | Height: | Size: 20 KiB |
BIN
images/user-pictures/user-profile-default-256px.png
Normal file
|
After Width: | Height: | Size: 3.0 KiB |
@@ -17,6 +17,8 @@
|
|||||||
* You should have received a copy of the GNU Affero General Public License
|
* 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.inc.php');
|
||||||
require_once(APPROOT.'/application/application.inc.php');
|
require_once(APPROOT.'/application/application.inc.php');
|
||||||
require_once(APPROOT.'/application/itopwebpage.class.inc.php');
|
require_once(APPROOT.'/application/itopwebpage.class.inc.php');
|
||||||
@@ -28,6 +30,8 @@ require_once(APPROOT.'/application/startup.inc.php');
|
|||||||
*/
|
*/
|
||||||
function DisplayPreferences($oP)
|
function DisplayPreferences($oP)
|
||||||
{
|
{
|
||||||
|
$oP->SetContentLayout(PageContentFactory::MakeStandardEmpty());
|
||||||
|
// $oP->AddUiBlock(new \Combodo\iTop\Application\UI\Component\Breadcrumbs\Breadcrumbs());
|
||||||
$oAppContext = new ApplicationContext();
|
$oAppContext = new ApplicationContext();
|
||||||
$sURL = utils::GetAbsoluteUrlAppRoot().'pages/UI.php?'.$oAppContext->GetForLink();
|
$sURL = utils::GetAbsoluteUrlAppRoot().'pages/UI.php?'.$oAppContext->GetForLink();
|
||||||
|
|
||||||
@@ -362,6 +366,50 @@ EOF
|
|||||||
$oP->add('</form>');
|
$oP->add('</form>');
|
||||||
$oP->add('</fieldset>');
|
$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 */
|
/** @var iPreferencesExtension $oLoginExtensionInstance */
|
||||||
foreach (MetaModel::EnumPlugins('iPreferencesExtension') as $oPreferencesExtensionInstance)
|
foreach (MetaModel::EnumPlugins('iPreferencesExtension') as $oPreferencesExtensionInstance)
|
||||||
@@ -511,6 +559,7 @@ try
|
|||||||
DisplayPreferences($oPage);
|
DisplayPreferences($oPage);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$oPage->output();
|
$oPage->output();
|
||||||
}
|
}
|
||||||
catch(CoreException $e)
|
catch(CoreException $e)
|
||||||
|
|||||||