From 007a1368c110c3d49998c72d7e92cf737be8de18 Mon Sep 17 00:00:00 2001 From: Anthony Damhet <73399671+EchoLoGeek@users.noreply.github.com> Date: Fri, 28 Mar 2025 15:17:33 +0100 Subject: [PATCH] UIUX: Update documentation interface (#33604) * Set ui tools baseUrl Set the URL of the UI tools in a variable in the documentation class so that it can be easily reused * Group index factorization * Home page and contributing Update home page and add a page to contribute to this documentation * Remove blank line * Remove blank line 2 and indentation * Add missing translations / remove unused * remove trailing text * Remove indentation --------- Co-authored-by: Laurent Destailleur --- .../tools/ui/class/documentation.class.php | 45 ++- htdocs/admin/tools/ui/components/index.php | 9 +- htdocs/admin/tools/ui/content/index.php | 70 +++++ htdocs/admin/tools/ui/css/documentation.css | 47 +++- htdocs/admin/tools/ui/index.php | 46 +++- .../admin/tools/ui/resources/contributing.php | 260 ++++++++++++++++++ htdocs/admin/tools/ui/resources/index.php | 70 +++++ .../tools/ui/template/documentation_page.php | 116 ++++++++ htdocs/langs/en_US/uxdocumentation.lang | 30 +- 9 files changed, 669 insertions(+), 24 deletions(-) create mode 100644 htdocs/admin/tools/ui/content/index.php create mode 100644 htdocs/admin/tools/ui/resources/contributing.php create mode 100644 htdocs/admin/tools/ui/resources/index.php create mode 100644 htdocs/admin/tools/ui/template/documentation_page.php diff --git a/htdocs/admin/tools/ui/class/documentation.class.php b/htdocs/admin/tools/ui/class/documentation.class.php index 6b7f8f50cf1..93814472a85 100644 --- a/htdocs/admin/tools/ui/class/documentation.class.php +++ b/htdocs/admin/tools/ui/class/documentation.class.php @@ -83,13 +83,12 @@ class Documentation { global $hookmanager; - $hookmanager->initHooks(array('uidocumentation')); // Go back to Dolibarr $this->menu['BackToDolibarr'] = array( 'url' => DOL_URL_ROOT, - 'icon' => 'fas fa-arrow-left pictofixedwidth', + 'icon' => 'fas fa-arrow-left', 'submenu' => array(), ); @@ -107,7 +106,7 @@ class Documentation 'submenu' => array( 'Badges' => array( 'url' => dol_buildpath($this->baseUrl.'/components/badges.php', 1), - 'icon' => 'fas fa-certificate pictofixedwidth', + 'icon' => 'fas fa-certificate', 'submenu' => array(), 'summary' => array( 'DocBasicUsage' => '#badgesection-basicusage', @@ -121,7 +120,7 @@ class Documentation ), 'Buttons' => array( 'url' => dol_buildpath($this->baseUrl.'/components/buttons.php', 1), - 'icon' => 'fas fa-mouse pictofixedwidth', + 'icon' => 'fas fa-mouse', 'submenu' => array(), 'summary' => array( 'DocBasicUsage' => '#buttonsection-basicusage', @@ -131,7 +130,7 @@ class Documentation ), 'Icons' => array( 'url' => dol_buildpath($this->baseUrl.'/components/icons.php', 1), - 'icon' => 'far fa-flag pictofixedwidth', + 'icon' => 'far fa-flag', 'submenu' => array(), 'summary' => array( 'DocIconsList' => '#img-picto-section-list', @@ -140,7 +139,7 @@ class Documentation ), 'Progress' => array( 'url' => dol_buildpath($this->baseUrl.'/components/progress-bars.php', 1), - 'icon' => 'fas fa-battery-half pictofixedwidth', + 'icon' => 'fas fa-battery-half', 'submenu' => array(), 'summary' => array( 'DocBasicUsage' => '#progresse-section-basic-usage', @@ -150,7 +149,7 @@ class Documentation ), 'Event Message' => array( 'url' => dol_buildpath($this->baseUrl.'/components/event-message.php', 1), - 'icon' => 'fas fa-comments pictofixedwidth', + 'icon' => 'fas fa-comments', 'submenu' => array(), 'summary' => array( 'DocBasicUsage' => '#seteventmessagesection-basicusage', @@ -159,7 +158,7 @@ class Documentation ), 'Inputs' => array( 'url' => dol_buildpath($this->baseUrl.'/components/inputs.php', 1), - 'icon' => 'fas fa-comments pictofixedwidth', + 'icon' => 'fas fa-comments', 'submenu' => array(), 'summary' => array( 'DocBasicUsage' => '#setinputssection-basicusage', @@ -168,19 +167,16 @@ class Documentation ) ), ), - 'summary' => array( - 'keySum' => '#keySum' - ) ); // Elements $this->menu['Content'] = array( 'url' => dol_buildpath($this->baseUrl.'/content/index.php', 1), - 'icon' => 'fas fa-th-large', + 'icon' => 'far fa-file-alt', 'submenu' => array( 'Tables' => array( 'url' => dol_buildpath('admin/tools/ui/content/tables.php', 1), - 'icon' => 'fas fa-table pictofixedwidth', + 'icon' => 'fas fa-table', 'submenu' => array(), 'summary' => array( 'DocBasicUsage' => '#tablesection-basicusage', @@ -192,6 +188,24 @@ class Documentation ) ); + // Elements + $this->menu['Resources'] = array( + 'url' => dol_buildpath($this->baseUrl.'/resources/index.php', 1), + 'icon' => 'fas fa-wrench', + 'submenu' => array( + 'Contributing' => array( + 'url' => dol_buildpath($this->baseUrl.'/resources/contributing.php', 1), + 'icon' => 'fas fa-code', + 'submenu' => array(), + 'summary' => array( + 'DocContributeStep1' => '#contributesection-step1', + 'DocContributeStep2' => '#contributesection-step2', + 'DocContributeStep3' => '#contributesection-step3', + ), + ), + ) + ); + $parameters = array( 'baseUrl' => $this->baseUrl, ); @@ -289,10 +303,11 @@ class Documentation foreach ($menu as $key => $item) { $levelclass = (!empty($item['submenu'])) ? 'li-withsubmenu' : ''; $levelclass .= (in_array($key, $this->view)) ? ' active' : ''; + $levelclass .= ($key == 'BackToDolibarr') ? ' li-withseparator' : ''; - print '
  • '; + print '
  • '; print ''; - print ((!empty($item['icon'])) ? '' : ''); + print ((!empty($item['icon'])) ? '' : ''); print ''.$langs->transnoentities($key).''; print ((!empty($item['submenu'])) ? '' : ''); print ''; diff --git a/htdocs/admin/tools/ui/components/index.php b/htdocs/admin/tools/ui/components/index.php index 409d96d22a7..890d3b711de 100644 --- a/htdocs/admin/tools/ui/components/index.php +++ b/htdocs/admin/tools/ui/components/index.php @@ -40,12 +40,13 @@ $langs->load('uxdocumentation'); // $documentation = new Documentation($db); +$group = 'Components'; // Output html head + body - Param is Title -$documentation->docHeader(); +$documentation->docHeader($langs->trans('DocListLinks', $group)); // Set view for menu and breadcrumb -$documentation->view = array('Components'); +$documentation->view = array($group); // Output sidebar $documentation->showSidebar(); ?> @@ -56,8 +57,8 @@ $documentation->showSidebar(); ?>
    -

    trans('DocComponentsTitle'); ?>

    -

    trans('DocComponentsMainDescription'); ?>

    +

    trans($group); ?>

    +

    trans('DocGroupIndexDescription', $group); ?>

    showSummary(); ?>
    diff --git a/htdocs/admin/tools/ui/content/index.php b/htdocs/admin/tools/ui/content/index.php new file mode 100644 index 00000000000..596614b3985 --- /dev/null +++ b/htdocs/admin/tools/ui/content/index.php @@ -0,0 +1,70 @@ + + * 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'; + +// Load documentation translations +$langs->load('uxdocumentation'); + +// +$documentation = new Documentation($db); +$group = 'Content'; + +// Output html head + body - Param is Title +$documentation->docHeader($langs->trans('DocListLinks', $group)); + +// Set view for menu and breadcrumb +$documentation->view = array($group); + +// Output sidebar +$documentation->showSidebar(); ?> + +
    + + showBreadCrumb(); ?> + +
    + +

    trans($group); ?>

    +

    trans('DocGroupIndexDescription', $group); ?>

    + + showSummary(); ?> +
    + +
    +docFooter(); +?> diff --git a/htdocs/admin/tools/ui/css/documentation.css b/htdocs/admin/tools/ui/css/documentation.css index 3dbd1abdfb2..f493be974ee 100644 --- a/htdocs/admin/tools/ui/css/documentation.css +++ b/htdocs/admin/tools/ui/css/documentation.css @@ -1,3 +1,7 @@ +:root { + --flex-gap: 24px; /* Variable for gap */ +} + body.dolibarr-doc { background: rgb(232, 232, 232);font-family: "Segoe UI", sans-serif;font-weight: 400;font-style: normal;font-size: 0.9em;margin: 0; } @@ -21,6 +25,7 @@ body.dolibarr-doc { .doc-sidebar nav ul {margin: 12px 0 ;padding: 0;list-style: none;} .doc-sidebar nav ul li {} .doc-sidebar nav ul li.li-withsubmenu {} +.doc-sidebar nav ul li.li-withseparator {border-bottom:1px solid rgba(255,255,255,0.25);margin-bottom: 16px; padding-bottom: 16px} .doc-sidebar nav ul li a {text-decoration: none; color: rgba(255, 255, 255, 0.5);display: block;padding: 12px 24px;display: flex;align-items: baseline;justify-content: center;} .doc-sidebar nav ul li a i.menu-icon {margin-right: 12px; color: rgba(255, 255, 255, 1);} .doc-sidebar nav ul li a i.submenu-toggle {text-align: right;color: rgba(255, 255, 255, .25);margin-right: 0;font-size: 0.9em;} @@ -46,6 +51,8 @@ body.dolibarr-doc { /* MAIN WRAPPER */ /***************************/ .doc-wrapper {margin: 0;margin-left: 260px;} +.doc-wrapper .fa-info-circle {padding-left: 0;} +.doc-wrapper .fa-at, .doc-wrapper .fa-external-link-alt, .doc-wrapper .fa-share-alt {color: inherit;opacity: 1;} /* Breadcrumb */ .doc-wrapper .doc-breadcrumbs {display: flex;margin: 0;padding: 0;list-style: none;background: #fff;height: 75px;box-sizing: border-box;} @@ -62,6 +69,44 @@ body.dolibarr-doc { .doc-wrapper .doc-content-wrapper .warning p.documentation-text:first-child {margin-top:6px;} .doc-wrapper .doc-content-wrapper .warning p.documentation-text:last-child {margin-bottom:6px;} +/* Documentation block links */ +.doc-wrapper .doc-content-wrapper .doclinks-section {margin: 24px 0 32px 0;} +.doc-wrapper .doc-content-wrapper .doclinks-title {margin: 0;margin-bottom:12px;padding: 0;color: rgb(38,60,92);font-size: 1.3em;} +.doc-wrapper .doc-content-wrapper .doclinks-wrapper {display: flex;flex-wrap: wrap; gap: var(--flex-gap);} +.doc-wrapper .doc-content-wrapper .doclinks-wrapper .doc-link {display:block; background: #fff;padding: 16px 16px 20px 16px;box-sizing: border-box;border-radius: 5px;box-shadow: rgba(149, 157, 165, 0.2) 0px 4px 16px; cursor: pointer; transition: all .1s ease-in-out;} + +.doc-wrapper .doc-content-wrapper .doclinks-wrapper .doc-link.size-default {flex: 1; min-width: 280px;} +.doc-wrapper .doc-content-wrapper .doclinks-wrapper .doc-link.size-small { + --doclinks-items: 5; + width: calc((100% / var(--doclinks-items)) - (((var(--doclinks-items) - 1) / var(--doclinks-items)) * var(--flex-gap)));text-align: center; +} +.doc-wrapper .doc-content-wrapper .doclinks-wrapper .doc-link .link-icon {font-size: 2.4em; color: rgba(220, 220, 220, 1);margin-bottom: 8px;transition: all .1s ease-in-out;} +.doc-wrapper .doc-content-wrapper .doclinks-wrapper .doc-link .link-title {color: rgb(38,60,92);font-weight: 500;font-size: 1.1em;transition: all .1s ease-in-out;} +.doc-wrapper .doc-content-wrapper .doclinks-wrapper .doc-link.size-default .link-title {margin-bottom: 8px;} +.doc-wrapper .doc-content-wrapper .doclinks-wrapper .doc-link .link-content {color: rgba(64, 64, 64, 1); transition: all .1s ease-in-out;} + +.doc-wrapper .doc-content-wrapper .doclinks-wrapper .doc-link:hover {background: rgb(38,60,92);text-decoration: none;} +.doc-wrapper .doc-content-wrapper .doclinks-wrapper .doc-link:hover .link-icon {color: rgba(255, 255, 255, 0.75);} +.doc-wrapper .doc-content-wrapper .doclinks-wrapper .doc-link:hover .link-title {color: #fff;} +.doc-wrapper .doc-content-wrapper .doclinks-wrapper .doc-link:hover .link-content {color: #fff;} + +@media (max-width: 1200px) { + .doc-wrapper .doc-content-wrapper .doclinks-wrapper .doc-link.size-small { + --doclinks-items: 4; + } +} +@media (max-width: 860px) { + .doc-wrapper .doc-content-wrapper .doclinks-wrapper .doc-link.size-small { + --doclinks-items: 3; + } +} + +@media (max-width: 660px) { + .doc-wrapper .doc-content-wrapper .doclinks-wrapper .doc-link.size-small { + --doclinks-items: 2; + } +} + /* Documentation summary */ .doc-wrapper .doc-content-wrapper .summary-wrapper {margin-bottom: 32px;} .doc-wrapper .doc-content-wrapper ul.documentation-summary {margin: 0;padding: 0;color: rgba(0, 0, 0, .25);} @@ -86,4 +131,4 @@ body.dolibarr-doc { #documentation-scroll {background: rgb(0, 123, 140);height: 5px;position: absolute;top: 0;left:0} /* component icons */ -.documentation-fontawesome-icon-list span{ color: #333; } +.documentation-fontawesome-icon-list span {color: #333;} diff --git a/htdocs/admin/tools/ui/index.php b/htdocs/admin/tools/ui/index.php index 76baca72436..66372a6354e 100644 --- a/htdocs/admin/tools/ui/index.php +++ b/htdocs/admin/tools/ui/index.php @@ -54,8 +54,50 @@ $documentation->showSidebar(); ?> showBreadCrumb(); ?>
    - trans('WelcomeToDocumentation'); ?> - showSummary(1, 1); ?> +

    trans('WelcomeToDocumentation'); ?>

    +

    trans('WelcomeToDocumentationDescription'); ?>

    + +
    +

    trans('DocLinkSectionResources'); ?>

    +
    + +
    trans('DocHowContribute'); ?>
    +
    trans('DocHowContributeDescription'); ?>
    +     + +
    Dolibarr community
    +
    Meet and chat with the Dolibarr community on the dedicated forum
    +     +
    +
    + + menu; + + // Remove BackToDolibarr and Documentation Home from menu + // Remove Resources from menu (Set manually above) + unset($indexMenu['BackToDolibarr']); + unset($indexMenu['DocumentationHome']); + unset($indexMenu['Resources']); + + if (!empty($indexMenu)) { + foreach ($indexMenu as $keyMenu => $infosMenu) { + print '
    '; + print '

    '.$langs->trans($keyMenu).'

    '; + print '
    '; + if (!empty($infosMenu['submenu'])) { + foreach ($infosMenu['submenu'] as $keySubmenu => $infosSubmenu) { + print ''; + print '
    '; + print '
    '.$langs->trans($keySubmenu).'
    '; + print '    '; + } + } + print '
    '; + print '
    '; + } + } + ?>
    diff --git a/htdocs/admin/tools/ui/resources/contributing.php b/htdocs/admin/tools/ui/resources/contributing.php new file mode 100644 index 00000000000..54ce702e82c --- /dev/null +++ b/htdocs/admin/tools/ui/resources/contributing.php @@ -0,0 +1,260 @@ + + * 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'; + +// Load documentation translations +$langs->load('uxdocumentation'); + +// +$documentation = new Documentation($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('Contributing', $morejs); + +// Set view for menu and breadcrumb +// Menu must be set in constructor of documentation class +$documentation->view = array('Resources', 'Contributing'); + +// Output sidebar +$documentation->showSidebar(); ?> + +
    + + showBreadCrumb(); ?> + +
    + +

    trans('DocHowContribute'); ?>

    +

    trans('DocHowContributeDescription'); ?>

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

    trans('DocContributeStep1'); ?>

    +

    trans('DocContributeStep1Description'); ?>

    + + ', + ' * 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\';', + '', + '// Load documentation translations', + '$langs->load(\'uxdocumentation\');', + '', + '// Hooks', + '$hookmanager->initHooks(array(\'uidocumentation\'));', + '', + '//', + '$documentation = new Documentation($db);', + '', + '// Add more js', + '$morejs = [', + ' \'/includes/ace/src/ace.js\',', + ' \'/includes/ace/src/ext-statusbar.js\',', + ' \'/includes/ace/src/ext-language_tools.js\',', + '];', + '// Output html head + body - First param is title', + '$documentation->docHeader(\'DocMyPageTitle\', $morejs);', + '', + '// Set view for menu and breadcrumb', + '// Menu must be set in constructor of documentation class', + '$documentation->view = array(\'MyPageKey1\', \'MyPageKey2\');', + '', + '// Output sidebar', + '$documentation->showSidebar(); ?>', + '', + '
    ', + '', + ' showBreadCrumb(); ?>', + '
    ', + ' ', + '

    trans(\'DocMyPageTitle\'); ?>

    ', + '

    trans(\'DocMyPageDescription\'); ?>

    ', + ' ', + ' ', + ' showSummary(); ?>', + ' ', + ' ', + '
    ', + ' ', + '

    trans(\'DocMySectionTitle\'); ?>

    ', + '

    trans(\'DocMySectionText\'); ?>

    ', + ' ', + '
    ', + '
    ', + '

    trans(\'DocMySectionExample\'); ?>

    ', + '
    ', + '
    ', + ' \',', + ' \'

    Here you can put an example of your component

    \',', + ' \'
    \',', + ' );', + ' print $documentation->showCode($lines, \'html\'); ?>', + ' ', + '

    trans(\'DocMySectionText2\'); ?>

    ', + '
    ', + ' ', + ' ', + '
    ', + ' ', + '

    trans(\'DocMySectionTitle\'); ?>

    ', + '

    trans(\'DocMySectionText\'); ?>

    ', + ' ', + ' ', + '
    trans(\'DocExampleWarning\'); ?>
    ', + '
    trans(\'DocExampleInfo\'); ?>
    ', + '
    trans(\'DocExampleError\'); ?>
    ', + '
    trans(\'DocExampleGreen\'); ?>
    ', + '
    ', + ' ', + '
    ', + '
    ', + '', + 'docFooter();', + '?>', + ); + echo $documentation->showCode($lines, 'php'); ?> +
    + + +
    + +

    trans('DocContributeStep2'); ?>

    +

    trans('DocContributeStep2Description'); ?>

    +

    trans('DocContributeAddMenuEntry'); ?>

    + + menu[\'Components\'] = array(', + ' // url,', + ' // icon,', + ' \'submenu\' => array(', + ' ', + ' // Others menu entries ...', + ' ', + ' // My new menu entry', + ' \'MyComponent\' => array(', + ' // Url to my documentation page', + ' \'url\' => dol_buildpath($this->baseUrl.\'/components/mycomponenturl.php\', 1),', + ' // My component icon, use fontawesome class', + ' \'icon\' => \'fas fa-mouse\', // use fontawesome class here', + ' // You can add another submenu into this array', + ' \'submenu\' => array(),', + ' // Here is for build summary (LangKeySection => nameOfYourDiv)', + ' \'summary\' => array(', + ' \'MyLangKey1\' => \'#my-component-section1-div\',', + ' \'MyLangKey2\' => \'#my-component-section2-div\',', + ' ),', + ' ),', + ' )', + ');', + ); + echo $documentation->showCode($lines, 'php'); ?> +
    + + +
    + +

    trans('DocContributeStep3'); ?>

    +

    trans('DocContributeStep3Description'); ?>

    + + view = array(\'Components\', \'MyComponent\');', + ); + echo $documentation->showCode($lines, 'php'); ?> +
    + +
    + + + +docFooter(); +?> diff --git a/htdocs/admin/tools/ui/resources/index.php b/htdocs/admin/tools/ui/resources/index.php new file mode 100644 index 00000000000..b09524484a7 --- /dev/null +++ b/htdocs/admin/tools/ui/resources/index.php @@ -0,0 +1,70 @@ + + * 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'; + +// Load documentation translations +$langs->load('uxdocumentation'); + +// +$documentation = new Documentation($db); +$group = 'Resources'; + +// Output html head + body - Param is Title +$documentation->docHeader($langs->trans('DocListLinks', $group)); + +// Set view for menu and breadcrumb +$documentation->view = array($group); + +// Output sidebar +$documentation->showSidebar(); ?> + +
    + + showBreadCrumb(); ?> + +
    + +

    trans($group); ?>

    +

    trans('DocGroupIndexDescription', $group); ?>

    + + showSummary(); ?> +
    + +
    +docFooter(); +?> diff --git a/htdocs/admin/tools/ui/template/documentation_page.php b/htdocs/admin/tools/ui/template/documentation_page.php new file mode 100644 index 00000000000..5b38077cf7b --- /dev/null +++ b/htdocs/admin/tools/ui/template/documentation_page.php @@ -0,0 +1,116 @@ + + * 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'; + +// Load documentation translations +$langs->load('uxdocumentation'); + +// Hooks +$hookmanager->initHooks(array('uidocumentation')); + +// +$documentation = new Documentation($db); + +// Add more js +$morejs = [ + '/includes/ace/src/ace.js', + '/includes/ace/src/ext-statusbar.js', + '/includes/ace/src/ext-language_tools.js', +]; +// Output html head + body - First param is title +$documentation->docHeader('DocMyPageTitle', $morejs); + +// Set view for menu and breadcrumb +// Menu must be set in constructor of documentation class +$documentation->view = array('MyPageKey1', 'MyPageKey2'); + +// Output sidebar +$documentation->showSidebar(); ?> + +
    + + showBreadCrumb(); ?> + +
    + +

    trans('DocMyPageTitle'); ?>

    +

    trans('DocMyPageDescription'); ?>

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

    trans('DocMySectionTitle'); ?>

    +

    trans('DocMySectionText'); ?>

    + +
    +
    +

    trans('DocMySectionExample'); ?>

    +
    +
    + ', + '

    Here you can put an example of your component

    ', + '
    ', + ); + print $documentation->showCode($lines, 'html'); ?> + +

    trans('DocMySectionText2'); ?>

    +
    + + +
    + +

    trans('DocMySectionTitle'); ?>

    +

    trans('DocMySectionText'); ?>

    + + +
    trans('DocExampleWarning'); ?>
    +
    trans('DocExampleInfo'); ?>
    +
    trans('DocExampleError'); ?>
    +
    trans('DocExampleGreen'); ?>
    +
    + +
    + + +docFooter(); +?> diff --git a/htdocs/langs/en_US/uxdocumentation.lang b/htdocs/langs/en_US/uxdocumentation.lang index d9f213c789f..1b024e7ccc6 100644 --- a/htdocs/langs/en_US/uxdocumentation.lang +++ b/htdocs/langs/en_US/uxdocumentation.lang @@ -1,7 +1,13 @@ BackToDolibarr=Go back to Dolibarr -WelcomeToDocumentation=Welcome to UI Documentation. This section is under development, +WelcomeToDocumentation=Welcome to the Dolibarr UI/UX documentation ! +WelcomeToDocumentationDescription=This document aims to guide you through the different components of the Dolibarr user interface and help you use them effectively. Feel free to explore the different chapters of this documentation to discover the components of the Dolibarr interface and to learn how to use them effectively. DocumentationHome=UI Documentation DocBasicUsage=Basic usage +DocLinkSectionResources=Resources +DocHowContribute=How to contribute ? +DocHowContributeDescription=This documentation is currently being written. Learn how to contribute and enrich this documentation +DocListLinks=List of links - %s +DocGroupIndexDescription= This page brings together all the links from the "%s" section. # Components DocComponentsTitle=Components @@ -44,7 +50,6 @@ DocTableTitle=Tables DocTableMainDescription=Documentation and examples for tables. DocTableBasic=Basic usage DocTableBasicDescription=Here is a template for creating a basic data table. -DocTableClassExplain=nooddeven DocTableWithFilters=Filters row DocTableWithFiltersDescription=You can add a filters row using the following syntax. Your table must be into a form tag.
    In order to show inputs, you can use the Form Class (see #Inputs)
    Look at a list file to see how to use dynamic fields, not functionnal here. DocTableBeforeFilters=Use a custom line before cols filters @@ -116,3 +121,24 @@ DocInputsMainDescription = Documentation and examples for inputs DocInputsTitle = Inputs DocSearchInputUsage = Helper functions for search input + dynamic js filter DocSearchInputUsageDescription = The attribute values `data-search-tool-target`, `data-counter-target`, and `data-no-item-target` are CSS selectors, allowing you to target multiple search areas. Example: `data-search-tool-target=".zone01, .zone02, .zone03"` + +#Contributing +DocContributeStep1=Create your documentation page +DocContributeStep1Description=In order to create your page, you can copy the template/documentation_page.php file into the folder of your choice (Components, Content, ...) or you can copy/paste the code below into a new file. +DocContributeStep2=Set menu and summary +DocContributeStep2Description=The various menus (sidebar, summary) and the breadcrumbs are automatically populated by the menu defined in the Documentation class. In order to display your menu, you must fill in the menu array in setMenu() function. You can also use the setMenu hook. +DocContributeAddMenuEntry=Here is an example to add a menu entry in "Components" by the setMenu() function: +DocContributeStep3=Breadcrumb +DocContributeStep3Description=In order to correctly configure the breadcrumbs of your page, you must correctly fill $documentation->view in your view.
    You must precise all levels of your page. Let's take the previous example, we added MyComponent in the component section. +DocExampleError=Example error message +DocExampleGreen=Example green/success message +DocExampleInfo=Example info message +DocExampleWarning=Example warning message + +#Template +DocMyPageTitle=My page title +DocMyPageDescription=Main description for your page +DocMySectionTitle=Title of my section +DocMySectionText=A line of text to describe my component +DocMySectionText2=You can add more lines of text +DocMySectionExample=Here you can put an example of your component