mirror of
https://github.com/Dolibarr/dolibarr.git
synced 2025-12-09 02:58:23 +01:00
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 <eldy@destailleur.fr>
This commit is contained in:
Anthony Damhet
@@ -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 '<li class="'.$levelclass.' level-'.$level.'">';
|
||||
print '<li class="'.trim($levelclass).' level-'.$level.'">';
|
||||
print '<a href="'.$item['url'].'" class="'.((!empty($item['submenu'])) ? 'link-withsubmenu' : '').'">';
|
||||
print ((!empty($item['icon'])) ? '<i class="menu-icon '.$item['icon'].'" aria-hidden="true"></i>' : '');
|
||||
print ((!empty($item['icon'])) ? '<i class="menu-icon '.$item['icon'].' pictofixedwidth" aria-hidden="true"></i>' : '');
|
||||
print '<span class="label">'.$langs->transnoentities($key).'</span>';
|
||||
print ((!empty($item['submenu'])) ? '<i class="submenu-toggle fas fa-chevron-right" aria-hidden="true"></i>' : '');
|
||||
print '</a>';
|
||||
|
||||
@@ -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(); ?>
|
||||
|
||||
<div class="doc-content-wrapper">
|
||||
|
||||
<h1 class="documentation-title"><?php echo $langs->trans('DocComponentsTitle'); ?></h1>
|
||||
<p class="documentation-text"><?php echo $langs->trans('DocComponentsMainDescription'); ?></p>
|
||||
<h1 class="documentation-title"><?php echo $langs->trans($group); ?></h1>
|
||||
<p class="documentation-text"><?php echo $langs->trans('DocGroupIndexDescription', $group); ?></p>
|
||||
|
||||
<?php $documentation->showSummary(); ?>
|
||||
</div>
|
||||
|
||||
70
htdocs/admin/tools/ui/content/index.php
Normal file
70
htdocs/admin/tools/ui/content/index.php
Normal file
@@ -0,0 +1,70 @@
|
||||
<?php
|
||||
/*
|
||||
* Copyright (C) 2024 Anthony Damhet <a.damhet@progiseize.fr>
|
||||
* Copyright (C) 2024 Frédéric France <frederic.france@free.fr>
|
||||
*
|
||||
* 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 <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
// 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(); ?>
|
||||
|
||||
<div class="doc-wrapper">
|
||||
|
||||
<?php $documentation->showBreadCrumb(); ?>
|
||||
|
||||
<div class="doc-content-wrapper">
|
||||
|
||||
<h1 class="documentation-title"><?php echo $langs->trans($group); ?></h1>
|
||||
<p class="documentation-text"><?php echo $langs->trans('DocGroupIndexDescription', $group); ?></p>
|
||||
|
||||
<?php $documentation->showSummary(); ?>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<?php
|
||||
// Output close body + html
|
||||
$documentation->docFooter();
|
||||
?>
|
||||
@@ -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;}
|
||||
|
||||
@@ -54,8 +54,50 @@ $documentation->showSidebar(); ?>
|
||||
<?php $documentation->showBreadCrumb(); ?>
|
||||
|
||||
<div class="doc-content-wrapper">
|
||||
<?php echo $langs->trans('WelcomeToDocumentation'); ?>
|
||||
<?php $documentation->showSummary(1, 1); ?>
|
||||
<h1 class="documentation-title"><?php echo $langs->trans('WelcomeToDocumentation'); ?></h1>
|
||||
<p class="documentation-text"><?php echo $langs->trans('WelcomeToDocumentationDescription'); ?></p>
|
||||
|
||||
<div class="doclinks-section">
|
||||
<h2 class="doclinks-title"><?php echo $langs->trans('DocLinkSectionResources'); ?></h2>
|
||||
<div class="doclinks-wrapper" style="justify-content: space-between;">
|
||||
<a class="doc-link size-default" href="<?php print dol_buildpath($documentation->baseUrl.'/resources/contributing.php', 1); ?>">
|
||||
<div class="link-title"><span class="fas fa-info-circle paddingright"></span> <?php print $langs->trans('DocHowContribute'); ?></div>
|
||||
<div class="link-content"><?php print $langs->trans('DocHowContributeDescription'); ?></div>
|
||||
</a>
|
||||
<a class="doc-link size-default" href="https://www.dolibarr.fr/forum/" target="_blank">
|
||||
<div class="link-title"><span class="fas fa-external-link-alt paddingright"></span> Dolibarr community</div>
|
||||
<div class="link-content">Meet and chat with the Dolibarr community on the dedicated forum</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php
|
||||
$indexMenu = $documentation->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 '<div class="doclinks-section">';
|
||||
print '<h2 class="doclinks-title">'.$langs->trans($keyMenu).'</h2>';
|
||||
print '<div class="doclinks-wrapper flex-fix" style="justify-content: flex-start;">';
|
||||
if (!empty($infosMenu['submenu'])) {
|
||||
foreach ($infosMenu['submenu'] as $keySubmenu => $infosSubmenu) {
|
||||
print '<a href="'.$infosSubmenu['url'].'" class="doc-link size-small">';
|
||||
print '<div class="link-icon"><span class="'.$infosSubmenu['icon'].'"></span></div>';
|
||||
print '<div class="link-title">'.$langs->trans($keySubmenu).'</div>';
|
||||
print '</a>';
|
||||
}
|
||||
}
|
||||
print '</div>';
|
||||
print '</div>';
|
||||
}
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
260
htdocs/admin/tools/ui/resources/contributing.php
Normal file
260
htdocs/admin/tools/ui/resources/contributing.php
Normal file
@@ -0,0 +1,260 @@
|
||||
<?php
|
||||
/*
|
||||
* Copyright (C) 2024 Anthony Damhet <a.damhet@progiseize.fr>
|
||||
* Copyright (C) 2024 Frédéric France <frederic.france@free.fr>
|
||||
*
|
||||
* 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 <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
// 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(); ?>
|
||||
|
||||
<div class="doc-wrapper">
|
||||
|
||||
<?php $documentation->showBreadCrumb(); ?>
|
||||
|
||||
<div class="doc-content-wrapper">
|
||||
|
||||
<h1 class="documentation-title"><?php echo $langs->trans('DocHowContribute'); ?></h1>
|
||||
<p class="documentation-text"><?php echo $langs->trans('DocHowContributeDescription'); ?></p>
|
||||
|
||||
<!-- Summary -->
|
||||
<?php $documentation->showSummary(); ?>
|
||||
|
||||
<!-- First Step -->
|
||||
<div class="documentation-section" id="contributesection-step1">
|
||||
<h2 class="documentation-title"><?php echo $langs->trans('DocContributeStep1'); ?></h2>
|
||||
<p class="documentation-text"><?php echo $langs->trans('DocContributeStep1Description'); ?></p>
|
||||
|
||||
<?php
|
||||
$lines = array(
|
||||
'<?php',
|
||||
'/*',
|
||||
' * Copyright (C) 2024 Anthony Damhet <a.damhet@progiseize.fr>',
|
||||
' * Copyright (C) 2024 Frédéric France <frederic.france@free.fr>',
|
||||
' *',
|
||||
' * 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 <https://www.gnu.org/licenses/>.',
|
||||
' */',
|
||||
'',
|
||||
'// 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(); ?>',
|
||||
'',
|
||||
'<div class="doc-wrapper">',
|
||||
'',
|
||||
' <?php $documentation->showBreadCrumb(); ?>',
|
||||
' <div class="doc-content-wrapper">',
|
||||
' ',
|
||||
' <h1 class="documentation-title"><?php print $langs->trans(\'DocMyPageTitle\'); ?></h1>',
|
||||
' <p class="documentation-text"><?php print $langs->trans(\'DocMyPageDescription\'); ?></p>',
|
||||
' ',
|
||||
' <!-- Summary -->',
|
||||
' <?php $documentation->showSummary(); ?>',
|
||||
' ',
|
||||
' <!-- Section 1 -->',
|
||||
' <div class="documentation-section" id="my-section-name">',
|
||||
' ',
|
||||
' <h2 class="documentation-title"><?php print $langs->trans(\'DocMySectionTitle\'); ?></h2>',
|
||||
' <p class="documentation-text"><?php print $langs->trans(\'DocMySectionText\'); ?></p>',
|
||||
' ',
|
||||
' <div class="documentation-example">',
|
||||
' <div class="div-table-responsive">',
|
||||
' <p><?php print $langs->trans(\'DocMySectionExample\'); ?></p>',
|
||||
' </div>',
|
||||
' </div>',
|
||||
' <?php',
|
||||
' $lines = array(',
|
||||
' \'<div class="div-table-responsive">\',',
|
||||
' \' <p>Here you can put an example of your component</p>\',',
|
||||
' \'</div>\',',
|
||||
' );',
|
||||
' print $documentation->showCode($lines, \'html\'); ?>',
|
||||
' ',
|
||||
' <p class="documentation-text"><?php print $langs->trans(\'DocMySectionText2\'); ?></p>',
|
||||
' </div>',
|
||||
' ',
|
||||
' <!-- Section 2-->',
|
||||
' <div class="documentation-section" id="my-section2-name">',
|
||||
' ',
|
||||
' <h2 class="documentation-title"><?php print $langs->trans(\'DocMySectionTitle\'); ?></h2>',
|
||||
' <p class="documentation-text"><?php print $langs->trans(\'DocMySectionText\'); ?></p>',
|
||||
' ',
|
||||
' <!-- Display messages -->',
|
||||
' <div class="warning"><?php print $langs->trans(\'DocExampleWarning\'); ?></div>',
|
||||
' <div class="info"><?php print $langs->trans(\'DocExampleInfo\'); ?></div>',
|
||||
' <div class="error"><?php print $langs->trans(\'DocExampleError\'); ?></div>',
|
||||
' <div class="green"><?php print $langs->trans(\'DocExampleGreen\'); ?></div>',
|
||||
' </div>',
|
||||
' ',
|
||||
' </div>',
|
||||
'</div>',
|
||||
'',
|
||||
'<?php',
|
||||
'// Output close body + html',
|
||||
'$documentation->docFooter();',
|
||||
'?>',
|
||||
);
|
||||
echo $documentation->showCode($lines, 'php'); ?>
|
||||
</div>
|
||||
|
||||
<!-- Second Step -->
|
||||
<div class="documentation-section" id="contributesection-step2">
|
||||
|
||||
<h2 class="documentation-title"><?php print $langs->trans('DocContributeStep2'); ?></h2>
|
||||
<p class="documentation-text"><?php print $langs->trans('DocContributeStep2Description'); ?></p>
|
||||
<p class="documentation-text"><?php print $langs->trans('DocContributeAddMenuEntry'); ?></p>
|
||||
|
||||
<?php
|
||||
$lines = array(
|
||||
'<?php',
|
||||
'// in SetMenu() function, search "Components" and fill submenu',
|
||||
' ',
|
||||
'// Components',
|
||||
'$this->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'); ?>
|
||||
</div>
|
||||
|
||||
<!-- Third Step -->
|
||||
<div class="documentation-section" id="contributesection-step3">
|
||||
|
||||
<h2 class="documentation-title"><?php print $langs->trans('DocContributeStep3'); ?></h2>
|
||||
<p class="documentation-text"><?php print $langs->trans('DocContributeStep3Description'); ?></p>
|
||||
|
||||
<?php
|
||||
$lines = array(
|
||||
'<?php',
|
||||
'',
|
||||
'// Set view for menu and breadcrumb',
|
||||
'$documentation->view = array(\'Components\', \'MyComponent\');',
|
||||
);
|
||||
echo $documentation->showCode($lines, 'php'); ?>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<?php
|
||||
// Output close body + html
|
||||
$documentation->docFooter();
|
||||
?>
|
||||
70
htdocs/admin/tools/ui/resources/index.php
Normal file
70
htdocs/admin/tools/ui/resources/index.php
Normal file
@@ -0,0 +1,70 @@
|
||||
<?php
|
||||
/*
|
||||
* Copyright (C) 2024 Anthony Damhet <a.damhet@progiseize.fr>
|
||||
* Copyright (C) 2024 Frédéric France <frederic.france@free.fr>
|
||||
*
|
||||
* 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 <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
// 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(); ?>
|
||||
|
||||
<div class="doc-wrapper">
|
||||
|
||||
<?php $documentation->showBreadCrumb(); ?>
|
||||
|
||||
<div class="doc-content-wrapper">
|
||||
|
||||
<h1 class="documentation-title"><?php echo $langs->trans($group); ?></h1>
|
||||
<p class="documentation-text"><?php echo $langs->trans('DocGroupIndexDescription', $group); ?></p>
|
||||
|
||||
<?php $documentation->showSummary(); ?>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<?php
|
||||
// Output close body + html
|
||||
$documentation->docFooter();
|
||||
?>
|
||||
116
htdocs/admin/tools/ui/template/documentation_page.php
Normal file
116
htdocs/admin/tools/ui/template/documentation_page.php
Normal file
@@ -0,0 +1,116 @@
|
||||
<?php
|
||||
/*
|
||||
* Copyright (C) 2024 Anthony Damhet <a.damhet@progiseize.fr>
|
||||
* Copyright (C) 2024 Frédéric France <frederic.france@free.fr>
|
||||
*
|
||||
* 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 <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
// 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(); ?>
|
||||
|
||||
<div class="doc-wrapper">
|
||||
|
||||
<?php $documentation->showBreadCrumb(); ?>
|
||||
|
||||
<div class="doc-content-wrapper">
|
||||
|
||||
<h1 class="documentation-title"><?php print $langs->trans('DocMyPageTitle'); ?></h1>
|
||||
<p class="documentation-text"><?php print $langs->trans('DocMyPageDescription'); ?></p>
|
||||
|
||||
<!-- Summary -->
|
||||
<?php $documentation->showSummary(); ?>
|
||||
|
||||
<!-- Section 1 -->
|
||||
<div class="documentation-section" id="my-section-name">
|
||||
|
||||
<h2 class="documentation-title"><?php print $langs->trans('DocMySectionTitle'); ?></h2>
|
||||
<p class="documentation-text"><?php print $langs->trans('DocMySectionText'); ?></p>
|
||||
|
||||
<div class="documentation-example">
|
||||
<div class="div-table-responsive">
|
||||
<p><?php print $langs->trans('DocMySectionExample'); ?></p>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
$lines = array(
|
||||
'<div class="div-table-responsive">',
|
||||
' <p>Here you can put an example of your component</p>',
|
||||
'</div>',
|
||||
);
|
||||
print $documentation->showCode($lines, 'html'); ?>
|
||||
|
||||
<p class="documentation-text"><?php print $langs->trans('DocMySectionText2'); ?></p>
|
||||
</div>
|
||||
|
||||
<!-- Section 2-->
|
||||
<div class="documentation-section" id="my-section2-name">
|
||||
|
||||
<h2 class="documentation-title"><?php print $langs->trans('DocMySectionTitle'); ?></h2>
|
||||
<p class="documentation-text"><?php print $langs->trans('DocMySectionText'); ?></p>
|
||||
|
||||
<!-- Display messages -->
|
||||
<div class="warning"><?php print $langs->trans('DocExampleWarning'); ?></div>
|
||||
<div class="info"><?php print $langs->trans('DocExampleInfo'); ?></div>
|
||||
<div class="error"><?php print $langs->trans('DocExampleError'); ?></div>
|
||||
<div class="green"><?php print $langs->trans('DocExampleGreen'); ?></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php
|
||||
// Output close body + html
|
||||
$documentation->docFooter();
|
||||
?>
|
||||
@@ -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=<b>nooddeven</b>
|
||||
DocTableWithFilters=Filters row
|
||||
DocTableWithFiltersDescription=You can add a filters row using the following syntax. Your table must be into a form tag. <br>In order to show inputs, you can use the Form Class (see <a href="%s">#Inputs</a>) <br><span class="opacitylow"><i>Look at a list file to see how to use dynamic fields, not functionnal here.</i></span>
|
||||
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 <b>setMenu()</b> function. You can also use the setMenu hook.
|
||||
DocContributeAddMenuEntry=<b><u>Here is an example to add a menu entry in "Components" by the setMenu() function:</u></b>
|
||||
DocContributeStep3=Breadcrumb
|
||||
DocContributeStep3Description=In order to correctly configure the breadcrumbs of your page, you must correctly fill $documentation->view in your view. <br><b>You must precise all levels of your page.</b> 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
|
||||
|
||||
Reference in New Issue
Block a user