From b66fd8daefcdd056ff4bd15b05da848cc9a9c617 Mon Sep 17 00:00:00 2001 From: Anthony Damhet <73399671+EchoLoGeek@users.noreply.github.com> Date: Fri, 25 Jul 2025 21:20:26 +0200 Subject: [PATCH] UIUX Add titles to documentation (#34801) --- .../tools/ui/class/documentation.class.php | 9 + htdocs/admin/tools/ui/content/titles.php | 209 ++++++++++++++++++ htdocs/langs/en_US/uxdocumentation.lang | 11 + 3 files changed, 229 insertions(+) create mode 100644 htdocs/admin/tools/ui/content/titles.php diff --git a/htdocs/admin/tools/ui/class/documentation.class.php b/htdocs/admin/tools/ui/class/documentation.class.php index aaa1bb6364e..f7064c29d6e 100644 --- a/htdocs/admin/tools/ui/class/documentation.class.php +++ b/htdocs/admin/tools/ui/class/documentation.class.php @@ -174,6 +174,15 @@ class Documentation 'url' => dol_buildpath($this->baseUrl.'/content/index.php', 1), 'icon' => 'far fa-file-alt', 'submenu' => array( + 'Titles' => array( + 'url' => dol_buildpath('admin/tools/ui/content/titles.php', 1), + 'icon' => 'fas fa-heading', + 'submenu' => array(), + 'summary' => array( + 'DocBasicUsage' => '#titlesection-basicusage', + 'DocTitleWithFilters' => '#titlesection-withfilters', + ), + ), 'Tables' => array( 'url' => dol_buildpath('admin/tools/ui/content/tables.php', 1), 'icon' => 'fas fa-table', diff --git a/htdocs/admin/tools/ui/content/titles.php b/htdocs/admin/tools/ui/content/titles.php new file mode 100644 index 00000000000..e3b7b73cb18 --- /dev/null +++ b/htdocs/admin/tools/ui/content/titles.php @@ -0,0 +1,209 @@ + + * Copyright (C) 2024 Frédéric France + * + * This program is free software; you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation; either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +// Load Dolibarr environment +require '../../../../main.inc.php'; + +/** + * @var DoliDB $db + * @var HookManager $hookmanager + * @var Translate $langs + * @var User $user + */ + +// Protection if external user +if ($user->socid > 0) { + accessforbidden(); +} + +// Includes +require_once DOL_DOCUMENT_ROOT . '/admin/tools/ui/class/documentation.class.php'; +require_once DOL_DOCUMENT_ROOT . '/core/class/html.form.class.php'; + +// Load documentation translations +$langs->load('uxdocumentation'); + +// Hooks +$hookmanager->initHooks(array('uidocumentation')); + +// +$documentation = new Documentation($db); +$form = new Form($db); + +$morejs = [ + '/includes/ace/src/ace.js', + '/includes/ace/src/ext-statusbar.js', + '/includes/ace/src/ext-language_tools.js', +]; +// Output html head + body - Param is Title +$documentation->docHeader('Titles', $morejs); + +// Set view for menu and breadcrumb +// Menu must be set in constructor of documentation class +$documentation->view = array('Content','Titles'); + +// Output sidebar +$documentation->showSidebar(); ?> + +
+ + showBreadCrumb(); ?> + +
+ +

trans('DocTitleTitle'); ?>

+

trans('DocTitleMainDescription'); ?>

+ + + showSummary(); ?> + + +
+ +

trans('DocBasicUsage'); ?>

+ +

transnoentities('DocTitleBasicDescription'); ?>

+
    +
  • trans('DocTitleIconUsageMethod1', dol_buildpath('/admin/tools/ui/components/icons.php#img-picto-section-list', 1)); ?>
    • +
  • trans('DocTitleIconUsageMethod2', dol_buildpath('/admin/tools/ui/components/icons.php#icon-section-list', 1)); ?>
    • +
  • trans('DocTitleIconUsageMethod3'); ?>
    • +
+
+ trans('DocMyPageTitle'), '', 'info'); ?> +
+ trans('DocMyPageTitle').'", "", "info");', + '', + '// Title with fontawesome icon, see list of icons in components/icons section', + '// use like this: ICONCLASS_FAMILYCLASS_COLOR', + 'print load_fiche_titre("'.$langs->trans('DocMyPageTitle').'", "", "fa-rocket_fas_#b0bb39");', + '', + '// Title with custom image icon, 4th parameter must be 1', + 'print load_fiche_titre("'.$langs->trans('DocMyPageTitle').'", "", "IMAGE_URL", 1);', + ); + echo $documentation->showCode($lines, 'php'); ?> + +

trans('DocTitleMoreContentDescription'); ?>

+
+ trans('DocMyPageTitle'), ''.img_picto('', 'add', '', 0, 0, 0, '', 'valignmiddle btnTitle-icon').'', 'fa-rocket_fas_#b0bb39'); ?> +
+ \'.img_picto("", "add").\'\';', + 'print load_fiche_titre("'.$langs->trans('DocMyPageTitle').'", $moreHtmlRight, "fa-rocket_fas_#b0bb39");', + '', + '// Title with badge', + '$moreHtmlRight = \'Secondary\';', + 'print load_fiche_titre("'.$langs->trans('DocMyPageTitle').'", $moreHtmlRight, "fa-rocket_fas_#b0bb39");', + + '', + '// Title with form', + '$moreHtmlRight = \'
...
\';', + 'print load_fiche_titre("'.$langs->trans('DocMyPageTitle').'", $moreHtmlRight, "fa-rocket_fas_#b0bb39");', + '', + '// Set ID for table and css class', + '$tableID = \'tableid\';', + '$moreclass = \'class1 class2\';', + 'print load_fiche_titre("'.$langs->trans('DocMyPageTitle').'", $moreHtmlRight, "fa-rocket_fas_#b0bb39", 0, $tableID, $moreclass);', + '', + '// Add html between title and right content', + '$moreContent = \'MyHTMLContent\';', + 'print load_fiche_titre("'.$langs->trans('DocMyPageTitle').'", $moreHtmlRight, "fa-rocket_fas_#b0bb39", 0, $tableID, $moreclass, $moreContent);', + ); + echo $documentation->showCode($lines, 'php'); ?> +
+ + +
+ +

trans('DocTitleWithFilters'); ?>

+ +

trans('DocTitleWithFiltersDescription', dol_buildpath('admin/tools/ui/components/inputs.php', 1)); ?>

+
+ trans('DocMyPageTitle'); + $page = 1; + $file = '#'; + $options = ''; + $sortfield = ''; + $sortorder = ''; + $morehtmlcenter = ''; + $num = 21; + $totalnboflines = 56; + $picto = 'facture'; + $pictoisfullpath = 0; + $morehtmlright = dolGetButtonTitle($langs->trans('ViewList'), '', 'fas fa-bars', '#', '', 1); + $morehtmlright .= dolGetButtonTitle($langs->trans('ViewKanban'), '', 'fas fa-grip-horizontal', '#', '', 1); + $morehtmlright .= ''; + $morehtmlright .= ''.img_picto('', 'add', '', 0, 0, 0, '', 'valignmiddle btnTitle-icon').''; + $morecss = ''; + $limit = 20; + $selectlimitsuffix = 0; + $hidenavigation = 0; + $pagenavastextinput = 1; + $morehtmlrightbeforearrow = ''; + print_barre_liste($title, $page, $file, $options, $sortfield, $sortorder, $morehtmlcenter, $num, $totalnboflines, $picto, $pictoisfullpath, $morehtmlright, $morecss, $limit, $selectlimitsuffix, $hidenavigation, $pagenavastextinput, $morehtmlrightbeforearrow); ?> +
+ as a substring.', + ' * @param int|null $page Numero of page to show in navigation links (required)', + ' * @param string $file Url of page (required)', + ' * @param string $options More parameters for links (\'\' by default, does not include sortfield neither sortorder). Value must be \'urlencoded\' before calling function.', + ' * @param ?string $sortfield Field to sort on (\'\' by default)', + ' * @param ?string $sortorder Order to sort (\'\' by default)', + ' * @param string $morehtmlcenter String in the middle (\'\' by default). We often find here string $massaction coming from $form->selectMassAction()', + ' * @param int $num Number of records found by select with limit+1', + ' * @param int|string $totalnboflines Total number of records/lines for all pages (if known). Use a negative value of number to not show number. Use \'\' if unknown.', + ' * @param string $picto Icon to use before title (should be a 32x32 transparent png file)', + ' * @param int $pictoisfullpath 1=Icon name is a full absolute url of image', + ' * @param string $morehtmlright More html to show (after arrows)', + ' * @param string $morecss More css to the table', + ' * @param int $limit Max number of lines (-1 = use default, 0 = no limit, > 0 = limit).', + ' * @param int|string $selectlimitsuffix Suffix for limit ID of -1 to hide the select limit combo', + ' * @param int $hidenavigation Force to hide the arrows and page for navigation', + ' * @param int $pagenavastextinput 1=Do not suggest list of pages to navigate but suggest the page number into an input field.', + ' * @param string $morehtmlrightbeforearrow More html to show (before arrows)', + ' * @return void', + ' */', + 'print_barre_liste($title, $page, $file, $options, $sortfield, $sortorder, $morehtmlcenter, $num, $totalnboflines, $picto, $pictoisfullpath, $morehtmlright, $morecss, $limit, $selectlimitsuffix, $hidenavigation, $pagenavastextinput, $morehtmlrightbeforearrow);', + ); + echo $documentation->showCode($lines, 'php'); ?> +
+ +
+ +
+ +docFooter(); +?> diff --git a/htdocs/langs/en_US/uxdocumentation.lang b/htdocs/langs/en_US/uxdocumentation.lang index dc0681edfa2..f6252bc40b5 100644 --- a/htdocs/langs/en_US/uxdocumentation.lang +++ b/htdocs/langs/en_US/uxdocumentation.lang @@ -166,3 +166,14 @@ ExperimentalUxFreezeTooltip = Tooltip freeze ExperimentalUxInputAjaxFeedback = Input feedback ExperimentalUxIntuitiveSelect = Intuitive table lines selection # End experiements manu tyile + +# Title section +DocTitleTitle=Page title +DocTitleMainDescription=Documentation and examples for page titles. +DocTitleBasicDescription=Use load_fiche_titre() function if you need to display a title with an icon. There are 3 ways to define your icon: +DocTitleIconUsageMethod1=Use a dolibarr icon shortcut. See icons list +DocTitleIconUsageMethod2=Use a icon from FontAwesome (use like this: fa-rocket_fas_#b0bb39). See icons list +DocTitleIconUsageMethod3=Use your image. You must set the 4th parameter to 1. +DocTitleMoreContentDescription=You can further customize the headings by adding an ID or CSS class(es), or adding content. See the examples below. +DocTitleWithFilters=Display title with filters, buttons or navigation +DocTitleWithFiltersDescription=If you want to display a title with many navigation options like on list pages, you can use the print_barre_liste() function which is a bit more complex. See code below or core/lib/functions.lib.php file to see how it works. \ No newline at end of file