From 9dcb4bbfe535f92d5ae45f315e3ab735dbb5ea32 Mon Sep 17 00:00:00 2001 From: Stephen Abello Date: Thu, 20 Aug 2020 11:07:50 +0200 Subject: [PATCH] =?UTF-8?q?N=C2=B02847=20First=20step=20to=20convert=20use?= =?UTF-8?q?r=20preferences=20page=20to=20our=20new=20design?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/backoffice/pages/_all.scss | 3 +- css/backoffice/pages/_preferences.scss | 43 +++ .../pages/en.dictionary.itop.preferences.php | 25 ++ pages/preferences.php | 259 ++++++++++-------- 4 files changed, 221 insertions(+), 109 deletions(-) create mode 100644 css/backoffice/pages/_preferences.scss create mode 100644 dictionaries/ui/pages/en.dictionary.itop.preferences.php diff --git a/css/backoffice/pages/_all.scss b/css/backoffice/pages/_all.scss index c1b3efdf7..7d44d47e6 100644 --- a/css/backoffice/pages/_all.scss +++ b/css/backoffice/pages/_all.scss @@ -16,4 +16,5 @@ * You should have received a copy of the GNU Affero General Public License */ -@import "base"; \ No newline at end of file +@import "base"; +@import "preferences"; \ No newline at end of file diff --git a/css/backoffice/pages/_preferences.scss b/css/backoffice/pages/_preferences.scss new file mode 100644 index 000000000..c7c68ff8d --- /dev/null +++ b/css/backoffice/pages/_preferences.scss @@ -0,0 +1,43 @@ +$ibo-preferences--panel--width: 60% !default; +$ibo-preferences--panel--margin-x: auto !default; + +$ibo-preferences--user-preferences--picture-placeholder--image--diameter: 54px !default; +$ibo-preferences--user-preferences--picture-placeholder--image--border-radius: $ibo-border-radius-full !default; +$ibo-preferences--user-preferences--picture-placeholder--image--margin: 12px !default; +$ibo-preferences--user-preferences--picture-placeholder--image--background-color: $ibo-color-grey-300 !default; + +$ibo-preferences--user-preferences--picture-placeholder--image--active--border-color: $ibo-color-blue-800; +$ibo-preferences--user-preferences--picture-placeholder--image--hover--border-color: $ibo-color-blue-600; + +#ibo-main-content >.ibo-panel{ + width: $ibo-preferences--panel--width; + margin-left: $ibo-preferences--panel--margin-x; + margin-right: $ibo-preferences--panel--margin-x; +} + +.ibo-preferences--title{ + text-align: center; +} +.ibo-preferences--user-preferences--picture-placeholder{ + display: flex; + flex-direction: row; + flex-wrap: wrap; +} +.ibo-preferences--user-preferences--picture-placeholder--image{ + height: $ibo-preferences--user-preferences--picture-placeholder--image--diameter; + width: $ibo-preferences--user-preferences--picture-placeholder--image--diameter; + border-radius: $ibo-preferences--user-preferences--picture-placeholder--image--border-radius; + margin: $ibo-preferences--user-preferences--picture-placeholder--image--margin; + border: solid 3px $ibo-preferences--user-preferences--picture-placeholder--image--background-color; + + > img{ + border-radius: $ibo-preferences--user-preferences--picture-placeholder--image--border-radius; + background-color: $ibo-preferences--user-preferences--picture-placeholder--image--background-color; + } +} +.ibo-preferences--user-preferences--picture-placeholder--image.ibo-is-active{ + border-color: $ibo-preferences--user-preferences--picture-placeholder--image--active--border-color; +} +.ibo-preferences--user-preferences--picture-placeholder--image:hover{ + border-color: $ibo-preferences--user-preferences--picture-placeholder--image--hover--border-color; +} \ No newline at end of file diff --git a/dictionaries/ui/pages/en.dictionary.itop.preferences.php b/dictionaries/ui/pages/en.dictionary.itop.preferences.php new file mode 100644 index 000000000..50a38080b --- /dev/null +++ b/dictionaries/ui/pages/en.dictionary.itop.preferences.php @@ -0,0 +1,25 @@ + 'Preferences', + 'UI:Preferences:ChooseAPlaceholder' => 'User placeholder image', + 'UI:Preferences:ChooseAPlaceholder+' => 'Choose a placeholder image that will be displayed if the contact linked to your user doesn\'t have one', +)); \ No newline at end of file diff --git a/pages/preferences.php b/pages/preferences.php index ff0667ca1..ef139f3c9 100644 --- a/pages/preferences.php +++ b/pages/preferences.php @@ -17,6 +17,9 @@ * You should have received a copy of the GNU Affero General Public License */ +use Combodo\iTop\Application\UI\Component\Button\Button\Button; +use Combodo\iTop\Application\UI\Component\Html\Html\Html; +use Combodo\iTop\Application\UI\Component\Panel\Panel\Panel; use Combodo\iTop\Application\UI\Layout\PageContent\PageContentFactory; require_once('../approot.inc.php'); @@ -30,22 +33,22 @@ require_once(APPROOT.'/application/startup.inc.php'); */ function DisplayPreferences($oP) { - $oP->SetContentLayout(PageContentFactory::MakeStandardEmpty()); -// $oP->AddUiBlock(new \Combodo\iTop\Application\UI\Component\Breadcrumbs\Breadcrumbs()); + $oContentLayout = PageContentFactory::MakeStandardEmpty(); $oAppContext = new ApplicationContext(); $sURL = utils::GetAbsoluteUrlAppRoot().'pages/UI.php?'.$oAppContext->GetForLink(); - $oP->add('

 '.Dict::S('UI:Preferences')."

\n"); - $oP->add('
'); + $sTitleHtml = '

'.Dict::S('UI:Preferences:Title').'

'; + $sTitleHtmlBlock = new Html($sTitleHtml); + $oContentLayout->AddMainBlock($sTitleHtmlBlock); ////////////////////////////////////////////////////////////////////////// // // User Language selection // ////////////////////////////////////////////////////////////////////////// - - $oP->add('
'.Dict::S('UI:FavoriteLanguage').''); - $oP->add('
'); + $oUserLanguageBlock = new Panel('ibo-user-language-selection', Dict::S('UI:FavoriteLanguage'), array(), 'grey'); + $oUserLanguageStartForm = new Html(''); + $aLanguages = Dict::GetLanguages(); $aSortedlang = array(); foreach($aLanguages as $sCode => $aLang) @@ -61,52 +64,76 @@ function DisplayPreferences($oP) $aSortedlang[$aLang['description']] = $sCode; } ksort($aSortedlang); - $oP->add('

'.Dict::S('UI:Favorites:SelectYourLanguage').' '; foreach($aSortedlang as $sCode) { $sSelected = ($sCode == Dict::GetUserLanguage()) ? 'selected' : ''; - $oP->add(''); + $sUserLanguageBlockSelect .= ''; } - $oP->add('

'); - $oP->add(''); - $oP->add($oAppContext->GetForForm()); - $oP->add('

'); - $oP->add('  '); - $oP->add('

'); - $oP->add('
'); - $oP->add('
'); + $sUserLanguageBlockSelect .= '

'; + $sUserLanguageBlockSelect .= ''; + $sUserLanguageBlockSelect .= $oAppContext->GetForForm(); + + //$oUserLanguageCancelButton = new Button('ibo-user-language-cancel', Dict::S('UI:Button:Cancel'), '', Dict::S('UI:Button:Cancel'), ) + $oUserLanguageBlockSelect = new Html($sUserLanguageBlockSelect); + $oUserLanguageCancelButton = new Button('ibo-user-language-cancel', Dict::S('UI:Button:Cancel'), '', Dict::S('UI:Button:Cancel'), '', '', '', 'regular', 'secondary', 'window.location.href='.$sURL); + $oUserLanguageSubmitButton = new Button('ibo-user-language-submit', Dict::S('UI:Button:Apply'), '', Dict::S('UI:Button:Apply'), 'submit', '', '', 'regular', 'green'); + $oUserLanguageEndForm = new Html(''); + + $oUserLanguageBlock->AddSubBlock($oUserLanguageStartForm); + $oUserLanguageBlock->AddSubBlock($oUserLanguageBlockSelect); + $oUserLanguageBlock->AddSubBlock($oUserLanguageCancelButton); + $oUserLanguageBlock->AddSubBlock($oUserLanguageSubmitButton); + $oUserLanguageBlock->AddSubBlock($oUserLanguageEndForm); + + $oContentLayout->AddMainBlock($oUserLanguageBlock); + ////////////////////////////////////////////////////////////////////////// // // Other (miscellaneous) settings // ////////////////////////////////////////////////////////////////////////// - - $oP->add('
'.Dict::S('UI:FavoriteOtherSettings').''); - $oP->add('
'); + $oMiscSettingsBlock = new Panel('ibo-misc-settings', Dict::S('UI:FavoriteOtherSettings'), array(), 'grey'); + + $oMiscSettingsStartForm = new Html(''); + $iDefaultPageSize = appUserPreferences::GetPref('default_page_size', MetaModel::GetConfig()->GetMinDisplayLimit()); - $oP->add('

'.Dict::Format('UI:Favorites:Default_X_ItemsPerPage', '').'

'); + $sMiscSettingsHtml = ''; + $sMiscSettingsHtml .= '

'.Dict::Format('UI:Favorites:Default_X_ItemsPerPage', '').'

'; $bShow = utils::IsArchiveMode() || appUserPreferences::GetPref('show_obsolete_data', MetaModel::GetConfig()->Get('obsolescence.show_obsolete_data')); $sSelected = $bShow ? ' checked="checked"' : ''; $sDisabled = utils::IsArchiveMode() ? 'disabled="disabled"' : ''; - $oP->add( + $sMiscSettingsHtml .= '

' .'' .'' - .'

'); + .'

'; - $oP->add(''); - $oP->add($oAppContext->GetForForm()); - $oP->add('

'); - $oP->add('  '); - $oP->add('

'); - $oP->add('
'); - $oP->add('
'); + $sMiscSettingsHtml .= ''; + $sMiscSettingsHtml .= $oAppContext->GetForForm(); + $oMiscSettingsCancelButton = new Button('ibo-misc-settings-cancel', Dict::S('UI:Button:Cancel'), '', Dict::S('UI:Button:Cancel'), '', '', '', 'regular', 'secondary', 'window.location.href='.$sURL); + $oMiscSettingsSubmitButton = new Button('ibo-misc-settings-submit', Dict::S('UI:Button:Apply'), '', Dict::S('UI:Button:Apply'), 'submit', '', '', 'regular', 'green'); + + + $oMiscSettingsHtml = new Html($sMiscSettingsHtml); + + $sMiscSettingsEndHtml = ''; + $oMiscSettingsEndHtmlBlock = new Html($sMiscSettingsEndHtml); + + $oMiscSettingsBlock->AddSubBlock($oMiscSettingsStartForm); + $oMiscSettingsBlock->AddSubBlock($oMiscSettingsHtml); + $oMiscSettingsBlock->AddSubBlock($oMiscSettingsCancelButton); + $oMiscSettingsBlock->AddSubBlock($oMiscSettingsSubmitButton); + $oMiscSettingsBlock->AddSubBlock($oMiscSettingsEndHtmlBlock); + + $oContentLayout->AddMainBlock($oMiscSettingsBlock); $oP->add_script( -<< 0)) { $('#v_default_page_size').html(''); - $('#other_submit').prop('disabled', false); + $('#ibo-misc-settings-submit').prop('disabled', false); return true; } else { $('#v_default_page_size').html(''); - $('#other_submit').prop('disabled', true); + $('#ibo-misc-settings-submit').prop('disabled', true); return false; } } EOF ); - ////////////////////////////////////////////////////////////////////////// // // Favorite Organizations // ////////////////////////////////////////////////////////////////////////// - $oP->add('
'.Dict::S('UI:FavoriteOrganizations').''); - $oP->p(Dict::S('UI:FavoriteOrganizations+')); - $oP->add('
'); + $oFavoriteOrganizationsBlock = new Panel('ibo-favorite-organizations', Dict::S('UI:FavoriteOrganizations'), array(), 'grey'); + + $sFavoriteOrganizationsHtml = ''; + $sFavoriteOrganizationsHtml .= Dict::S('UI:FavoriteOrganizations+'); + $sFavoriteOrganizationsHtml .= ''; // Favorite organizations: the organizations listed in the drop-down menu $sOQL = ApplicationMenu::GetFavoriteSiloQuery(); $oFilter = DBObjectSearch::FromOQL($sOQL); $oBlock = new DisplayBlock($oFilter, 'list', false); - $oBlock->Display($oP, 1, array('menu' => false, 'selection_mode' => true, 'selection_type' => 'multiple', 'cssCount'=> '.selectedCount', 'table_id' => 'user_prefs')); - $oP->add($oAppContext->GetForForm()); - $oP->add(''); - $oP->add('

'); - $oP->add('  '); - $oP->add('

'); - $oP->add('
'); - $oP->add('
'); + $sFavoriteOrganizationsHtml .= $oBlock->GetDisplay($oP, 1, array('menu' => false, 'selection_mode' => true, 'selection_type' => 'multiple', 'cssCount'=> '.selectedCount', 'table_id' => 'user_prefs')); + $sFavoriteOrganizationsHtml .= $oAppContext->GetForForm(); + $sFavoriteOrganizationsHtml .= ''; + $oFavoriteOrganizationsCancelButton = new Button('ibo-favorite-organizations-cancel', Dict::S('UI:Button:Cancel'), '', Dict::S('UI:Button:Cancel'), '', '', '', 'regular', 'secondary', 'window.location.href='.$sURL); + $oFavoriteOrganizationsSubmitButton = new Button('ibo-favorite-organizations-submit', Dict::S('UI:Button:Apply'), '', Dict::S('UI:Button:Apply'), 'submit', '', '', 'regular', 'green'); + + $sFavoriteOrganizationsEndHtml = ''; + $oFavoriteOrganizationsEndHtmlBlock = new Html($sFavoriteOrganizationsEndHtml) ; + $aFavoriteOrgs = appUserPreferences::GetPref('favorite_orgs', null); if ($aFavoriteOrgs == null) { @@ -202,6 +231,14 @@ EOF EOF ); } + + $oFavoriteOrganizationsHtmlBlock = new Html($sFavoriteOrganizationsHtml); + $oFavoriteOrganizationsBlock->AddSubBlock($oFavoriteOrganizationsHtmlBlock); + $oFavoriteOrganizationsBlock->AddSubBlock($oFavoriteOrganizationsCancelButton); + $oFavoriteOrganizationsBlock->AddSubBlock($oFavoriteOrganizationsSubmitButton); + $oFavoriteOrganizationsBlock->AddSubBlock($oFavoriteOrganizationsEndHtmlBlock); + + $oContentLayout->AddMainBlock($oFavoriteOrganizationsBlock); ////////////////////////////////////////////////////////////////////////// // @@ -209,30 +246,25 @@ EOF // ////////////////////////////////////////////////////////////////////////// - $oP->add('
'.Dict::S('Menu:MyShortcuts').''); - //$oP->p(Dict::S('UI:Menu:MyShortcuts+')); + $oShortcutsBlock = new Panel('ibo-shortcuts', Dict::S('Menu:MyShortcuts'), array(), 'grey'); + $sShortcutsHtml = ''; $oBMSearch = new DBObjectSearch('Shortcut'); $oBMSearch->AddCondition('user_id', UserRights::GetUserId(), '='); - //$aExtraParams = array('menu' => false, 'toolkit_menu' => false, 'display_limit' => false, 'localize_values' => $bLocalize, 'zlist' => 'details'); $aExtraParams = array(); $oBlock = new DisplayBlock($oBMSearch, 'list', false, $aExtraParams); - $oBlock->Display($oP, 'shortcut_list', array('view_link' => false, 'menu' => false, 'toolkit_menu' => false, 'selection_mode' => true, 'selection_type' => 'multiple', 'cssCount'=> '#shortcut_selection_count', 'table_id' => 'user_prefs_shortcuts')); - $oP->add('

'); + $sShortcutsHtml .= $oBlock->GetDisplay($oP, 'shortcut_list', array('view_link' => false, 'menu' => false, 'toolkit_menu' => false, 'selection_mode' => true, 'selection_type' => 'multiple', 'cssCount'=> '#shortcut_selection_count', 'table_id' => 'user_prefs_shortcuts')); + $sShortcutsHtml .='

'; $oSet = new DBObjectSet($oBMSearch); if ($oSet->Count() > 0) { $sButtons = ''; - $sButtons .= ' '; $sButtons .= ''; - $sButtons .= ' '; $sButtons .= ''; // Selection count updated by the pager, and used to enable buttons - $oP->add(''); - $oP->add('

'); - + $sShortcutsHtml .= ''; $sConfirmDelete = addslashes(Dict::S('UI:ShortcutDelete:Confirm')); $oP->add_ready_script( @@ -293,8 +325,9 @@ OnSelectionCountChange(); EOF ); } // if count > 0 - - $oP->add(''); + $oShortcutsHtmlBlock = new Html($sShortcutsHtml); + $oShortcutsBlock->AddSubBlock($oShortcutsHtmlBlock); + $oContentLayout->AddMainBlock($oShortcutsBlock); ////////////////////////////////////////////////////////////////////////// // @@ -316,16 +349,17 @@ EOF $bNewsroomEnabled = (MetaModel::GetConfig()->Get('newsroom_enabled') !== false); if ($bNewsroomEnabled && ($iCountProviders > 0)) { - $oP->add('
'.Dict::S('UI:Newsroom:Preferences').''); - - $oP->add('
'); + $oNewsroomBlock = new Panel('ibo-newsroom', Dict::S('UI:Newsroom:Preferences'), array(), 'grey'); + + $sNewsroomHtml = ''; + $sNewsroomHtml .= ''; $iNewsroomDisplaySize = (int)appUserPreferences::GetPref('newsroom_display_size', 7); if ($iNewsroomDisplaySize < 1) $iNewsroomDisplaySize = 1; if ($iNewsroomDisplaySize > 20) $iNewsroomDisplaySize = 20; $sInput = ''; $sIcon = ''; - $oP->p(Dict::Format('UI:Newsroom:DisplayAtMost_X_Messages', $sInput, $sIcon)); + $sNewsroomHtml .= Dict::Format('UI:Newsroom:DisplayAtMost_X_Messages', $sInput, $sIcon); /** * @var iNewsroomProvider[] $aProviders @@ -353,64 +387,73 @@ EOF $sPreferencesLink = ' - '.Dict::S('UI:Newsroom:ConfigurationLink').''; } $sChecked = appUserPreferences::GetPref('newsroom_provider_'.$sProviderClass, true) ? ' checked="" ' : ''; - $oP->p(' '.$sPreferencesLink); + $sNewsroomHtml .= '
'.$sPreferencesLink.'
'; } } + + $sNewsroomHtml .= ''; + $sNewsroomHtml .= $oAppContext->GetForForm(); - $oP->p(''); - $oP->add(''); - $oP->add($oAppContext->GetForForm()); - $oP->add('

'); - $oP->add('  '); - $oP->add('

'); - $oP->add('
'); - $oP->add('
'); - } + $oNewsroomResetCacheButton = new Button('ibo-newsroom-reset-cache', Dict::S('UI:Newsroom:ResetCache'), '', Dict::S('UI:Newsroom:ResetCache'), '', '', '', 'regular', 'red', "$('#ibo-navigation-menu--notifications-menu').newsroom_menu('clearCache')"); + $oNewsroomCancelButton = new Button('ibo-newsroom-cancel', Dict::S('UI:Button:Cancel'), '', Dict::S('UI:Button:Cancel'), '', '', '', 'regular', 'secondary', 'window.location.href='.$sURL); + $oNewsroomSubmitButton = new Button('ibo-newsroom-submit', Dict::S('UI:Button:Apply'), '', Dict::S('UI:Button:Apply'), 'submit', '', '', 'regular', 'green'); - //Todo: factorize as UiBlock - if (true) - { - $sUserPicturesFolder = '../images/user-pictures/'; - $sUserDefaultPicture = appUserPreferences::GetPref('user_picture_placeholder', 'default-placeholder.png'); + + $sNewsroomEndHtml = ''; + $oNewsroomEndHtmlBlock = new Html($sNewsroomEndHtml); - $oP->add( - <<UI:Preferences:ChooseAPlaceholder' -

UI:Preferences:ChooseAPlaceholder+

-
-HTML - ); - foreach (scandir($sUserPicturesFolder) as $sUserPicture) + $oNewsroomHtmlBlock = new Html($sNewsroomHtml); + $oNewsroomBlock->AddSubBlock($oNewsroomHtmlBlock); + $oNewsroomBlock->AddSubBlock($oNewsroomResetCacheButton); + $oNewsroomBlock->AddSubBlock($oNewsroomCancelButton); + $oNewsroomBlock->AddSubBlock($oNewsroomSubmitButton); + $oNewsroomBlock->AddSubBlock($oNewsroomEndHtmlBlock); + $oContentLayout->AddMainBlock($oNewsroomBlock); + } + + ////////////////////////////////////////////////////////////////////////// + // + // User picture placeholder + // + ////////////////////////////////////////////////////////////////////////// + + $oUserPicturePlaceHolderBlock = new Panel('ibo-user-picture-placeholder', Dict::S('UI:Preferences:ChooseAPlaceholder'), array(), 'grey'); + + $sUserPicturesFolder = '../images/user-pictures/'; + $sUserDefaultPicture = appUserPreferences::GetPref('user_picture_placeholder', 'default-placeholder.png'); + $sUserPicturePlaceHolderHtml = ''; + $sUserPicturePlaceHolderHtml .= '

'.Dict::S('UI:Preferences:ChooseAPlaceholder+').'

'; + foreach (scandir($sUserPicturesFolder) as $sUserPicture) + { + if ($sUserPicture === '.' || $sUserPicture === '..') { - if ($sUserPicture === '.' || $sUserPicture === '..') - { - continue; - } - $sAdditionalClass = ''; - if ($sUserDefaultPicture === $sUserPicture) - { - $sAdditionalClass = ' ibo-is-active'; - } - $oP->add(' '); + continue; } - $oP->add_ready_script( - << '; + } + $oP->add_ready_script( + <<add( - << - HTML - ); - } - + ; + $oUserPicturePlaceHolderHtmlBlock = new Html($sUserPicturePlaceHolderHtml); + $oUserPicturePlaceHolderBlock->AddSubBlock($oUserPicturePlaceHolderHtmlBlock); + $oContentLayout->AddMainBlock($oUserPicturePlaceHolderBlock); + /** @var iPreferencesExtension $oLoginExtensionInstance */ foreach (MetaModel::EnumPlugins('iPreferencesExtension') as $oPreferencesExtensionInstance) { @@ -421,8 +464,8 @@ HTML // // Footer // - $oP->add('
'); $oP->add_ready_script("$('#fav_page_length').bind('keyup change', function(){ ValidateOtherSettings(); })"); + $oP->SetContentLayout($oContentLayout); } /////////////////////////////////////////////////////////////////////////////