N°4684 - Align portal default theme with backoffice one (#702)

* Prepare SCSS files and move nav menu / main wrapper from Bootstrap positioning

* Small work on navigation menu

* Split bootstrap theme file into multiple files inside themes/

* Fix unit test missing css/ import path

* Better display for usercard

* Upload precompiled portal stylesheets to fix unit test based on portal.css

* Polish menu

* Stylize home tiles

* Stylize home tiles and layout pages

* Stylize home tiles and layout pages

* Stylize home tiles and layout pages

* Stylize home tiles and layout pages

* Define default font in a more elegant way

* Small implementation for open/close navigation_menu

* Fix navigation menu dropdown menu not working

* Fix menu colors

* Set  <html> lang attribute

* Add accessibility attributes to menu toggler

* Fix bricks / page title dot spacing

* new look adaptation

* Fix padding in manage brick

* Fix menu entries font size and color

* Change manage export color

* Fix icon size in tiles

* Add style to manage brick panels

* Redesign browse brick mosaic view

* Fix variable name collision

* - Set templates cache in dev mode to 1s
- Implements components classes JS
- Move navigations layouts outside the global layout
- Update tiles

* Fix tile description font size

* Redesign browse brick tree mode

* Tweak navigation menu css

* - use custom elements for js components
- adjust layouts

* Modify forms/modals

* Modify method name following code review

* Add a dropdown element to replace bootstrap one

* improvement to dropdown

* datatable prevent column sort icon to wrap

* update composer json file.
Without classmap-authoritative flag, classmap are not generated
There is no test folder

* remove colored circle in manage brick tile titles

* remove white span between title and title additional part in brick layout

* convert navigation menu js to custom element

* navigation menu (WIP)

* Improvement to dropdown

* Fix some caselog classes

* Improvement to dropdown

* Improvement to dropdown

* navigation menu (WIP)

* portal ui version  2025

* datatable sort icon issue on link sets

* portal ui settings

* Fix dropdown for browse brick

* add portal scss colors

* add alerts scss=

* Buttons improvement

* Correction list table action issue

* responsive adjustments

* restore ben-j erased stephen

* ipb-button integration

* remove table header bottom border

* remove brick page ipb-page--main-header duplicate

* Adjust button styel

* Fix browse brick buttons

* Correctly overload approot and fix scsss imports

* Fix treeview expand buttons, fix mosaic first display glitch and add animation to each mosaic tile drawn

* Fix treeview toolbar

* remove wrap from ipb-button-groups

* Fix hover and clickable space in mosaics

* Clean dropdown css

* Fix dropdown menu content for a better display

* Align pagination buttons with theme buttons

* Align pagination buttons with theme buttons

* Fix drowdown

* Add precompiled stylesheets for merge to main branch

---------

Co-authored-by: Benjamin Dalsass <95754414+bdalsass@users.noreply.github.com>
This commit is contained in:
Stephen Abello
2025-03-05 14:31:00 +01:00
committed by GitHub
parent c9c3b6c108
commit f095f93326
113 changed files with 17510 additions and 7731 deletions

View File

@@ -595,26 +595,26 @@ JS
// Opening thread
$oOutput->AddHtml(<<<HTML
<div class="caselog-thread ipb-is-html-content">
<div class="ipb-caselog-thread ipb-is-html-content">
HTML
);
// - Header
$oOutput->AddHtml(<<<HTML
<div class="caselog-thread--header">
<span class="caselog-thread--header-togglers">
<a href="#" class="caselog-thread--header-toggler caselog-thread--open-all-toggler" data-tooltip-content="{$sOpenAllEntriesTooltip}"><span class="fas fa-book-open"></span></a>
<a href="#" class="caselog-thread--header-toggler caselog-thread--close-all-toggler" data-tooltip-content="{$sCloseAllEntriesTooltip}"><span class="fas fa-book"></span></a>
<div class="ipb-caselog-thread--header">
<span class="ipb-caselog-thread--header-togglers">
<a href="#" class="ipb-caselog-thread--header-toggler ipb-caselog-thread--open-all-toggler" data-tooltip-content="{$sOpenAllEntriesTooltip}"><span class="fas fa-book-open"></span></a>
<a href="#" class="ipb-caselog-thread--header-toggler ipb-caselog-thread--close-all-toggler" data-tooltip-content="{$sCloseAllEntriesTooltip}"><span class="fas fa-book"></span></a>
</span>
<span class="caselog-thread--header-info pull-right">
<span class="caselog-thread--participants-count" data-tooltip-content="{$sUsersCountTooltip}">{$iNbUsers}<span class="fas fa-users"></span></span>
<span class="caselog-thread--messages-count" data-tooltip-content="{$sEntriesCountTooltip}">{$iNbEntries}<span class="fas fa-comment-alt"></span></span>
<span class="ipb-caselog-thread--header-info pull-right">
<span class="ipb-caselog-thread--participants-count" data-tooltip-content="{$sUsersCountTooltip}">{$iNbUsers}<span class="fas fa-users"></span></span>
<span class="ipb-caselog-thread--messages-count" data-tooltip-content="{$sEntriesCountTooltip}">{$iNbEntries}<span class="fas fa-comment-alt"></span></span>
</span>
</div>
HTML
);
// - Content
$oOutput->AddHtml(<<<HTML
<div class="caselog-thread--content">
<div class="ipb-caselog-thread--content">
HTML
);
@@ -673,24 +673,24 @@ HTML
if (($iEntryUserId !== $sLastUserId) || ($sEntryDate !== $sLastDate)) {
if ($sEntryDate !== $sLastDate) {
$oOutput->AddHtml(<<<HTML
<div class="caselog-thread--date">{$sEntryDate}</div>
<div class="ipb-caselog-thread--date">{$sEntryDate}</div>
HTML
);
}
// Open block
if ($iEntryUserId === $iCurrentUserId) {
$sEntryBlockClass = 'caselog-thread--block-me';
$sEntryBlockClass = 'ipb-caselog-thread--block-me';
}
else {
if (!array_key_exists($iEntryUserId, $aPeerColorClassCache)) {
$iPeerClassNumber = (count($aPeerColorClassCache) % 5) + 1;
$aPeerColorClassCache[$iEntryUserId] = 'caselog-thread--block-color-'.$iPeerClassNumber;
$aPeerColorClassCache[$iEntryUserId] = 'ipb-caselog-thread--block-color-'.$iPeerClassNumber;
}
$sEntryBlockClass = $aPeerColorClassCache[$iEntryUserId];
}
$oOutput->AddHtml(<<<HTML
<div class="caselog-thread--block {$sEntryBlockClass}">
<div class="ipb-caselog-thread--block {$sEntryBlockClass}">
HTML
);
@@ -702,31 +702,31 @@ HTML
$sEntryMedallionTooltip = utils::HtmlEntities($sEntryUserLogin);
$sEntryMedallionTooltipPlacement = ($iEntryUserId === $iCurrentUserId) ? 'left' : 'right';
$oOutput->AddHtml(<<<HTML
<div class="caselog-thread--block-medallion" style="{$sEntryMedallionStyle}" data-tooltip-content="{$sEntryMedallionTooltip}" data-placement="{$sEntryMedallionTooltipPlacement}">
<div class="ipb-caselog-thread--block-medallion" style="{$sEntryMedallionStyle}" data-tooltip-content="{$sEntryMedallionTooltip}" data-placement="{$sEntryMedallionTooltipPlacement}">
$sEntryMedallionContent
</div>
<div class="caselog-thread--block-user">{$sEntryMedallionTooltip}</div>
<div class="ipb-caselog-thread--block-user">{$sEntryMedallionTooltip}</div>
HTML
);
// Open entries
$oOutput->AddHtml(<<<HTML
<div class="caselog-thread--block-entries">
<div class="ipb-caselog-thread--block-entries">
HTML
);
}
// Prepare entry content
$sEntryId = 'caselog-thread--block-entry-'.$sThreadUniqueId.'-'.$i;
$sEntryId = 'ipb-caselog-thread--block-entry-'.$sThreadUniqueId.'-'.$i;
$sEntryHtml = AttributeText::RenderWikiHtml($aEntries[$i]['message_html'], true /* wiki only */);
$sEntryHtml = InlineImage::FixUrls($sEntryHtml);
// Add entry
$oOutput->AddHtml(<<<HTML
<div class="caselog-thread--block-entry" id="{$sEntryId}">
<div class="caselog-thread--block-entry-content">{$sEntryHtml}</div>
<div class="caselog-thread--block-entry-date">{$sEntryDatetime}</div>
<div class="caselog-thread--block-entry-toggler"><span class="fas fa-caret-up" title="{$sCloseEntryTooltip}"></span></div>
<div class="ipb-caselog-thread--block-entry" id="{$sEntryId}">
<div class="ipb-caselog-thread--block-entry-content">{$sEntryHtml}</div>
<div class="ipb-caselog-thread--block-entry-date">{$sEntryDatetime}</div>
<div class="ipb-caselog-thread--block-entry-toggler"><span class="fas fa-caret-up" title="{$sCloseEntryTooltip}"></span></div>
</div>
HTML
);
@@ -758,16 +758,16 @@ HTML
// Add JS handlers
$oOutput->AddJs(<<<JS
$('[data-field-id="{$this->oField->GetId()}"][data-form-path="{$this->oField->GetFormPath()}"]')
.on('click', '.caselog-thread--block-entry-toggler, .caselog-thread--block-entry.closed', function(){
$(this).closest('.caselog-thread--block-entry').toggleClass('closed');
.on('click', '.ipb-caselog-thread--block-entry-toggler, .ipb-caselog-thread--block-entry.closed', function(){
$(this).closest('.ipb-caselog-thread--block-entry').toggleClass('closed');
})
.on('click', '.caselog-thread--open-all-toggler', function(oEvent){
.on('click', '.ipb-caselog-thread--open-all-toggler', function(oEvent){
oEvent.preventDefault()
$('[data-field-id="{$this->oField->GetId()}"][data-form-path="{$this->oField->GetFormPath()}"]').find('.caselog-thread--block-entry').removeClass('closed');
$('[data-field-id="{$this->oField->GetId()}"][data-form-path="{$this->oField->GetFormPath()}"]').find('.ipb-caselog-thread--block-entry').removeClass('closed');
})
.on('click', '.caselog-thread--close-all-toggler', function(oEvent){
.on('click', '.ipb-caselog-thread--close-all-toggler', function(oEvent){
oEvent.preventDefault()
$('[data-field-id="{$this->oField->GetId()}"][data-form-path="{$this->oField->GetFormPath()}"]').find('.caselog-thread--block-entry').addClass('closed');
$('[data-field-id="{$this->oField->GetId()}"][data-form-path="{$this->oField->GetFormPath()}"]').find('.ipb-caselog-thread--block-entry').addClass('closed');
});
JS
);