forked from Wavyzz/dolibarr
WIP : Documentation ux (#30735)
* Move documentation files to new folder * Documentation prototype Create a documentation class and views * Remove whitespace and add functions returns * Remove Google fonts * Remove return string * Phpcbf corrections * Phpcdf with good ruleset * add return null * resolve conflict with test_arrays.php * Return void for print functions * WIP progress bar * Add seteventmessage documentation for ui/ux * Add translations * Delete is of button * Clean titles * Change name of file event-message.php * Update before moving and rename files * Remove fr_FR lang file (all in en_US for the moment) * Add some css * Menu definition updated * Add jQuery, lib_head.js and lib_foot.js * Add missing button * Add missing button * move ui doc files * Remove old documentation files * Reupload test_arrays.php * Rename lang file * Move lang file * add htmlhead * Add parameter comment * Update tables.php * Update uxdocumentation.lang * Update tables.php * Update uxdocumentation.lang * Update progress-bars.php * Update tables.php --------- Co-authored-by: John BOTELLA <68917336+thersane-john@users.noreply.github.com> Co-authored-by: atm-lena <lena.papazian@atm-consulting.fr> Co-authored-by: Laurent Destailleur <eldy@destailleur.fr>
This commit is contained in:
Anthony Damhet
403
htdocs/admin/tools/ui/class/documentation.class.php
Normal file
403
htdocs/admin/tools/ui/class/documentation.class.php
Normal file
@@ -0,0 +1,403 @@
|
||||
<?php
|
||||
/* Copyright (C) 2024 Anthony Damhet <a.damhet@progiseize.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/>.
|
||||
*/
|
||||
|
||||
/**
|
||||
* \file htdocs/admint/tools/ui/class/uidoc.class.php
|
||||
* \ingroup ui
|
||||
* \brief File of class to manage UI documentation
|
||||
*/
|
||||
|
||||
/**
|
||||
* Class to manage UI documentation
|
||||
*/
|
||||
class Documentation
|
||||
{
|
||||
|
||||
/**
|
||||
* Views
|
||||
*
|
||||
* @var array
|
||||
*/
|
||||
public $view = array();
|
||||
|
||||
/**
|
||||
* Menu - Set in setMenu in order to use dol_buildpath and called in constructor
|
||||
*
|
||||
* @var array
|
||||
*/
|
||||
public $menu = array();
|
||||
|
||||
/**
|
||||
* Summary - Set in setSummary and called in constructor
|
||||
*
|
||||
* @var array
|
||||
*/
|
||||
public $summary = array();
|
||||
|
||||
/**
|
||||
* @var DoliDB Database handler.
|
||||
*/
|
||||
public $db;
|
||||
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*
|
||||
* @param DoliDB $db Database handler
|
||||
*/
|
||||
public function __construct(DoliDB $db)
|
||||
{
|
||||
$this->db = $db;
|
||||
|
||||
// https://www.figma.com/community/file/1393171578760389765/dolibarr-ui-ux-kit
|
||||
|
||||
// Menu Constructor
|
||||
$this->setMenu();
|
||||
}
|
||||
|
||||
/**
|
||||
* Set Documentation Menu
|
||||
*
|
||||
* @return mixed false if error, void if no errors
|
||||
*/
|
||||
private function setMenu()
|
||||
{
|
||||
|
||||
global $hookmanager;
|
||||
|
||||
|
||||
$hookmanager->initHooks(array('uidocumentation'));
|
||||
|
||||
$baseUrl = 'admin/tools/ui';
|
||||
|
||||
// Go back to Dolibarr
|
||||
$this->menu['BackToDolibarr'] = array(
|
||||
'url' => DOL_URL_ROOT,
|
||||
'icon' => 'fas fa-arrow-left pictofixedwidth',
|
||||
'submenu' => array(),
|
||||
);
|
||||
|
||||
// Home for Ui documentation
|
||||
$this->menu['DocumentationHome'] = array(
|
||||
'url' => dol_buildpath($baseUrl.'/index.php', 1),
|
||||
'icon' => 'fas fa-book',
|
||||
'submenu' => array(),
|
||||
);
|
||||
|
||||
// Components
|
||||
$this->menu['Components'] = array(
|
||||
'url' => dol_buildpath($baseUrl.'/components/index.php', 1),
|
||||
'icon' => 'fas fa-th-large',
|
||||
'submenu' => array(
|
||||
'Badges' => array(
|
||||
'url' => dol_buildpath($baseUrl.'/components/badges.php', 1),
|
||||
'icon' => 'fas fa-certificate pictofixedwidth',
|
||||
'submenu' => array(),
|
||||
'summary' => array(
|
||||
'DocBasicUsage' => '#badgesection-basicusage',
|
||||
'DocBadgeContextualVariations' => '#badgesection-contextvariations',
|
||||
'DocBadgeDefaultStatus' => '#badgesection-defaultstatus',
|
||||
'DocBadgePillBadges' => '#badgesection-pill',
|
||||
'DocBadgeDotBadges' => '#badgesection-dot',
|
||||
'DocBadgeLinks' => '#badgesection-links',
|
||||
'DocBadgeHelper' => '#badgesection-dolgetbadge'
|
||||
),
|
||||
),
|
||||
'Buttons' => array(
|
||||
'url' => dol_buildpath($baseUrl.'/components/buttons.php', 1),
|
||||
'icon' => 'fas fa-mouse pictofixedwidth',
|
||||
'submenu' => array(),
|
||||
'summary' => array(
|
||||
'DocBasicUsage' => '#buttonsection-basicusage',
|
||||
'DocButtonModal' => '#buttonsection-modals',
|
||||
'DocButtonSubmenu' => '#buttonsection-submenu',
|
||||
),
|
||||
),
|
||||
'Progress' => array(
|
||||
'url' => dol_buildpath($baseUrl.'/components/progress-bars.php', 1),
|
||||
'icon' => 'fas fa-battery-half pictofixedwidth',
|
||||
'submenu' => array(),
|
||||
'summary' => array(
|
||||
'DocBasicUsage' => '#progresse-section-basic-usage',
|
||||
'DocColorVariants' => '#progress-section-color',
|
||||
'DocStripedVariants' => '#progresse-section-stripped',
|
||||
),
|
||||
),
|
||||
'Event Message' => array(
|
||||
'url' => dol_buildpath($baseUrl.'/components/event-message.php', 1),
|
||||
'icon' => 'fas fa-comments pictofixedwidth',
|
||||
'submenu' => array(),
|
||||
'summary' => array(
|
||||
'DocBasicUsage' => '#seteventmessagesection-basicusage',
|
||||
'DocSetEventMessageContextualVariations' => '#seteventmessagesection-contextvariations',
|
||||
)
|
||||
),
|
||||
),
|
||||
'summary' => array(
|
||||
'keySum' => '#keySum'
|
||||
)
|
||||
);
|
||||
|
||||
// Elements
|
||||
$this->menu['Content'] = array(
|
||||
'url' => dol_buildpath($baseUrl.'/content/index.php', 1),
|
||||
'icon' => 'fas fa-th-large',
|
||||
'submenu' => array(
|
||||
'Tables' => array(
|
||||
'url' => dol_buildpath('admin/tools/ui/content/tables.php', 1),
|
||||
'icon' => 'fas fa-table pictofixedwidth',
|
||||
'submenu' => array(),
|
||||
'summary' => array(
|
||||
'DocBasicUsage' => '#tablesection-basicusage',
|
||||
'DocTableWithFilters' => '#tablesection-withfilters'
|
||||
),
|
||||
),
|
||||
)
|
||||
);
|
||||
|
||||
$parameters = array(
|
||||
'baseUrl' => $baseUrl,
|
||||
);
|
||||
$action = '';
|
||||
|
||||
$reshook = $hookmanager->executeHooks('setMenu', $parameters, $this, $action);
|
||||
if ($reshook < 0) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Output header + body
|
||||
*
|
||||
* @param string $title Title of page
|
||||
* @param string[] $arrayofjs Array of complementary js files
|
||||
* @param string[] $arrayofcss Array of complementary css files
|
||||
* @return void
|
||||
*/
|
||||
public function docHeader($title = '', $arrayofjs = [], $arrayofcss = [])
|
||||
{
|
||||
global $langs;
|
||||
$title = (!empty($title)) ? dol_escape_htmltag($title) : $langs->trans('Documentation');
|
||||
|
||||
$arrayofcss[] = 'admin/tools/ui/css/documentation.css';
|
||||
|
||||
top_htmlhead('', $title, 0, 0, $arrayofjs, $arrayofcss);
|
||||
|
||||
print '<body class="dolibarr-doc">';
|
||||
}
|
||||
|
||||
/**
|
||||
* Output close body + html
|
||||
* @return void
|
||||
*/
|
||||
public function docFooter()
|
||||
{
|
||||
global $conf, $langs;
|
||||
|
||||
// DIV FOR SCROLL ANIMATION
|
||||
print '<div id="documentation-scrollwrapper">';
|
||||
print '<div id="documentation-scroll"></div>';
|
||||
print '</div>';
|
||||
|
||||
// JS
|
||||
print '<script src="'.dol_buildpath('admin/tools/ui/js/documentation.js', 1).'"></script>';
|
||||
print '<script src="'.DOL_URL_ROOT.'/core/js/lib_foot.js.php?lang='.$langs->defaultlang.'"></script>';
|
||||
|
||||
print '</body>';
|
||||
print '</html>';
|
||||
|
||||
dol_htmloutput_events(0);
|
||||
}
|
||||
|
||||
/**
|
||||
* Output sidebar
|
||||
* @return void
|
||||
*/
|
||||
public function showSidebar()
|
||||
{
|
||||
print '<div class="doc-sidebar">';
|
||||
|
||||
// LOGO
|
||||
print '<div class="sidebar-logo">';
|
||||
if (is_readable(DOL_DOCUMENT_ROOT.'/theme/dolibarr_logo.svg')) {
|
||||
$urllogo = DOL_URL_ROOT.'/theme/dolibarr_logo.svg';
|
||||
print '<img src="'.$urllogo.'" />';
|
||||
}
|
||||
print '</div>';
|
||||
|
||||
// NAVIGATION
|
||||
print '<nav>';
|
||||
if (!empty($this->menu)) {
|
||||
$this->displayMenu($this->menu);
|
||||
}
|
||||
print '</nav>';
|
||||
|
||||
print '</div>';
|
||||
}
|
||||
|
||||
/**
|
||||
* Recursive function to set Menu
|
||||
*
|
||||
* @param array $menu $this->menu or submenus
|
||||
* @param int $level level of menu
|
||||
* @return void
|
||||
*/
|
||||
private function displayMenu($menu, $level = 0)
|
||||
{
|
||||
global $langs;
|
||||
$level++;
|
||||
|
||||
print '<ul>';
|
||||
foreach ($menu as $key => $item) {
|
||||
$levelclass = (!empty($item['submenu'])) ? 'li-withsubmenu' : '';
|
||||
$levelclass .= (in_array($key, $this->view)) ? ' active' : '';
|
||||
|
||||
print '<li class="'.$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 '<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>';
|
||||
if (!empty($item['submenu'])) {
|
||||
$this->displayMenu($item['submenu'], $level); // Appel récursif pour afficher les sous-menus
|
||||
}
|
||||
echo '</li>';
|
||||
}
|
||||
print '</ul>';
|
||||
}
|
||||
|
||||
/**
|
||||
* Output breadcrumb
|
||||
* @return void
|
||||
*/
|
||||
public function showBreadcrumb()
|
||||
{
|
||||
global $langs;
|
||||
|
||||
print '<nav class="doc-breadcrumbs">';
|
||||
print '<ul>';
|
||||
print '<li class="breadcrumb-item"><a href="'.$this->menu['DocumentationHome']['url'].'"><i class="'.$this->menu['DocumentationHome']['icon'].'" aria-hidden="true"></i></a></li>';
|
||||
if (!empty($this->view)) {
|
||||
$nb_entries = count($this->view);
|
||||
$i = 0;
|
||||
|
||||
$menu_entry = $this->menu;
|
||||
foreach ($this->view as $page) {
|
||||
$i++;
|
||||
if ($i < $nb_entries && isset($menu_entry[$page])) {
|
||||
print '<li class="breadcrumb-item"><a href="'.$menu_entry[$page]['url'].'">'.$langs->transnoentities($page).'</a></li>';
|
||||
$menu_entry = $menu_entry[$page]['submenu'];
|
||||
} else {
|
||||
print '<li class="breadcrumb-item">'.$langs->transnoentities($page).'</li>';
|
||||
}
|
||||
}
|
||||
} else {
|
||||
print '<li class="breadcrumb-item">'.$langs->trans('Documentation').'</li>';
|
||||
}
|
||||
print '</ul>';
|
||||
print '</nav>';
|
||||
}
|
||||
|
||||
/**
|
||||
* Output summary
|
||||
* @param int $showsubmenu Show Sub menus: 0 = No, 1 = Yes
|
||||
* @param int $showsubmenu_summary Show summary of sub menus: 0 = No, 1 = Yes
|
||||
* @return void
|
||||
*/
|
||||
public function showSummary($showsubmenu = 1, $showsubmenu_summary = 1)
|
||||
{
|
||||
|
||||
global $langs;
|
||||
|
||||
$i = 0;
|
||||
if (!empty($this->view)) :
|
||||
// On se place au bon niveau
|
||||
foreach ($this->view as $view) {
|
||||
$i++;
|
||||
if ($i == 1) {
|
||||
$menu_entry = $this->menu[$view];
|
||||
} else {
|
||||
$menu_entry = $menu_entry['submenu'][$view];
|
||||
}
|
||||
}
|
||||
endif;
|
||||
|
||||
if (!empty($menu_entry['summary']) || !empty($menu_entry['submenu'] && $showsubmenu)) {
|
||||
print '<div class="summary-wrapper">';
|
||||
$this->displaySummary($menu_entry);
|
||||
print '</div>';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Recursive function for Automatic Summary
|
||||
*
|
||||
* @param array $menu $this->menu or submenus
|
||||
* @param int $level level of menu
|
||||
* @param int $showsubmenu Show Sub menus: 0 = No, 1 = Yes
|
||||
* @param int $showsubmenu_summary Show summary of sub menus: 0 = No, 1 = Yes
|
||||
* @return void
|
||||
*/
|
||||
public function displaySummary($menu, $level = 0, $showsubmenu = 1, $showsubmenu_summary = 1)
|
||||
{
|
||||
|
||||
global $langs;
|
||||
|
||||
$level++;
|
||||
print '<ul class="documentation-summary level-'.$level.'"">';
|
||||
|
||||
if (!empty($menu['summary'])) :
|
||||
foreach ($menu['summary'] as $summary_label => $summary_link) {
|
||||
if ($summary_link[0] == '#') {
|
||||
$summary_link = $menu['url'].$summary_link;
|
||||
}
|
||||
|
||||
print '<li><a href="'.$summary_link.'">'.$langs->trans($summary_label).'</a></li>';
|
||||
}
|
||||
endif;
|
||||
|
||||
if ($showsubmenu && !empty($menu['submenu'])) {
|
||||
foreach ($menu['submenu'] as $key => $item) {
|
||||
print '<li class="summary-title ">';
|
||||
print '<h3 class="level-'.$level.'">'.$key.'</h3>';
|
||||
if ($showsubmenu_summary) {
|
||||
$this->displaySummary($item, $level);
|
||||
}
|
||||
print '</li>';
|
||||
}
|
||||
}
|
||||
print '</ul>';
|
||||
}
|
||||
|
||||
/**
|
||||
* Output a View Code area
|
||||
*
|
||||
* @param array $lines Lines of code to show
|
||||
* @return void
|
||||
*/
|
||||
public function showCode($lines = array())
|
||||
{
|
||||
print '<div class="documentation-code"><pre>';
|
||||
if (!empty($lines)) {
|
||||
foreach ($lines as $lineofcode) {
|
||||
print dol_htmlentities($lineofcode).'<br/>';
|
||||
}
|
||||
}
|
||||
print '</pre></div>';
|
||||
}
|
||||
}
|
||||
313
htdocs/admin/tools/ui/components/badges.php
Normal file
313
htdocs/admin/tools/ui/components/badges.php
Normal file
@@ -0,0 +1,313 @@
|
||||
<?php
|
||||
/*
|
||||
* Copyright (C) 2024 Anthony Damhet <a.damhet@progiseize.fr>
|
||||
*
|
||||
* This program and files/directory inner it is free software: you can
|
||||
* redistribute it and/or modify it under the terms of the
|
||||
* GNU Affero General Public License (AGPL) 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 AGPL for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU AGPL
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/agpl-3.0.html>.
|
||||
*/
|
||||
|
||||
$res=0;
|
||||
if (! $res && file_exists("../../main.inc.php")) : $res=@include '../../main.inc.php';
|
||||
endif;
|
||||
if (! $res && file_exists("../../../main.inc.php")) : $res=@include '../../../main.inc.php';
|
||||
endif;
|
||||
if (! $res && file_exists("../../../../main.inc.php")) : $res=@include '../../../../main.inc.php';
|
||||
endif;
|
||||
|
||||
// Protection if external user
|
||||
if ($user->socid > 0) : accessforbidden();
|
||||
endif;
|
||||
|
||||
// Includes
|
||||
dol_include_once('admin/tools/ui/class/documentation.class.php');
|
||||
|
||||
// Load documentation translations
|
||||
$langs->load('uxdocumentation');
|
||||
|
||||
//
|
||||
$documentation = new Documentation($db);
|
||||
|
||||
// Output html head + body - Param is Title
|
||||
$documentation->docHeader('Badges');
|
||||
|
||||
// Set view for menu and breadcrumb
|
||||
// Menu must be set in constructor of documentation class
|
||||
$documentation->view = array('Components','Badges');
|
||||
|
||||
// Output sidebar
|
||||
$documentation->showSidebar(); ?>
|
||||
|
||||
<div class="doc-wrapper">
|
||||
|
||||
<?php $documentation->showBreadCrumb(); ?>
|
||||
|
||||
<div class="doc-content-wrapper">
|
||||
|
||||
<h1 class="documentation-title"><?php echo $langs->trans('DocBadgeTitle'); ?></h1>
|
||||
<p class="documentation-text"><?php echo $langs->trans('DocBadgeMainDescription'); ?></p>
|
||||
|
||||
<!-- Summary -->
|
||||
<?php $documentation->showSummary(); ?>
|
||||
|
||||
<!-- Basic usage -->
|
||||
<div class="documentation-section" id="badgesection-basicusage">
|
||||
<h2 class="documentation-title"><?php echo $langs->trans('DocBasicUsage'); ?></h2>
|
||||
<p class="documentation-text"><?php echo $langs->trans('DocBadgeScaleDescription'); ?></p>
|
||||
<div class="documentation-example">
|
||||
<h1>Example heading <span class="badge badge-secondary">New</span></h1>
|
||||
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
|
||||
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
|
||||
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
|
||||
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
|
||||
<h6>Example heading <span class="badge badge-secondary">New</span></h6>
|
||||
</div>
|
||||
|
||||
<?php
|
||||
$lines = array(
|
||||
'<h1>Example heading <span class="badge badge-secondary">New</span></h1>',
|
||||
'<h2>Example heading <span class="badge badge-secondary">New</span></h2>',
|
||||
'<h3>Example heading <span class="badge badge-secondary">New</span></h3>',
|
||||
'<h4>Example heading <span class="badge badge-secondary">New</span></h4>',
|
||||
'<h5>Example heading <span class="badge badge-secondary">New</span></h5>',
|
||||
'<h6>Example heading <span class="badge badge-secondary">New</span></h6>'
|
||||
);
|
||||
echo $documentation->showCode($lines); ?>
|
||||
|
||||
<p class="documentation-text"><?php echo $langs->trans('DocBadgeUseOnLinksOrButtons'); ?></p>
|
||||
<div class="documentation-example">
|
||||
<button type="button" class="button">
|
||||
<?php echo $langs->trans('Notifications'); ?> <span class="badge badge-primary">4</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<?php
|
||||
$lines = array(
|
||||
'<button type="button" class="button">',
|
||||
' Notifications <span class="badge badge-primary">4</span>',
|
||||
'</button>',
|
||||
);
|
||||
echo $documentation->showCode($lines); ?>
|
||||
|
||||
<div class="warning">
|
||||
<p class="documentation-text"><?php echo $langs->trans('DocBadgeWarningAriaHidden1'); ?></p>
|
||||
<p class="documentation-text"><?php echo $langs->trans('DocBadgeWarningAriaHidden2'); ?></p>
|
||||
<p class="documentation-text"><strong><?php echo $langs->trans('DocBadgeWarningAriaHidden3'); ?></strong></p>
|
||||
</div>
|
||||
|
||||
<div class="documentation-example">
|
||||
<button type="button" class="button">
|
||||
Profile <span class="badge badge-primary" aria-label="9 unread messages" >9</span>
|
||||
<span class="sr-only">unread messages</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<?php
|
||||
$lines = array(
|
||||
'<button type="button" class="button">',
|
||||
' Profile <span class="badge badge-primary" aria-label="9 unread messages" >9</span>',
|
||||
' <span class="sr-only">unread messages</span>',
|
||||
'</button>',
|
||||
);
|
||||
echo $documentation->showCode($lines); ?>
|
||||
</div>
|
||||
|
||||
<!-- Contextual variations -->
|
||||
<div class="documentation-section" id="badgesection-contextvariations">
|
||||
<h2 class="documentation-title"><?php echo $langs->trans('DocBadgeContextualVariations'); ?></h2>
|
||||
<p class="documentation-text"><?php echo $langs->trans('DocBadgeContextualVariationsDescription'); ?></p>
|
||||
<div class="documentation-example">
|
||||
<span class="badge badge-primary">Primary</span>
|
||||
<span class="badge badge-secondary">Secondary</span>
|
||||
<span class="badge badge-success">Success</span>
|
||||
<span class="badge badge-danger">Danger</span>
|
||||
<span class="badge badge-warning">Warning</span>
|
||||
<span class="badge badge-info">Info</span>
|
||||
<span class="badge badge-light">Light</span>
|
||||
<span class="badge badge-dark">Dark</span>
|
||||
</div>
|
||||
<?php
|
||||
$lines = array(
|
||||
'<span class="badge badge-primary">Primary</span>',
|
||||
'<span class="badge badge-secondary">Secondary</span>',
|
||||
'<span class="badge badge-success">Success</span>',
|
||||
'<span class="badge badge-danger">Danger</span>',
|
||||
'<span class="badge badge-warning">Warning</span>',
|
||||
'<span class="badge badge-info">Info</span>',
|
||||
'<span class="badge badge-light">Light</span>',
|
||||
'<span class="badge badge-dark">Dark</span>',
|
||||
);
|
||||
echo $documentation->showCode($lines); ?>
|
||||
<div class="warning">
|
||||
<p class="documentation-text"><strong><?php echo $langs->trans('DocBadgeContextualVariationsWarning1'); ?></strong></p>
|
||||
<p class="documentation-text"><?php echo $langs->trans('DocBadgeContextualVariationsWarning2'); ?></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Default status -->
|
||||
<div class="documentation-section" id="badgesection-defaultstatus">
|
||||
<h2 class="documentation-title"><?php echo $langs->trans('DocBadgeDefaultStatus'); ?></h2>
|
||||
<p class="documentation-text"><?php echo $langs->trans('DocBadgeDefaultStatusDescription'); ?></p>
|
||||
<div class="documentation-example">
|
||||
<?php for ($i = 0; $i <= 9; $i++) : ?>
|
||||
<span class="badge badge-status<?php print $i; ?>" >status-<?php print $i; ?></span>
|
||||
<?php endfor; ?>
|
||||
</div>
|
||||
<?php
|
||||
$lines = array();
|
||||
for ($i = 0; $i <= 9; $i++) :
|
||||
$lines[] = '<span class="badge badge-status'.$i.'">status-'.$i.'</span>';
|
||||
endfor;
|
||||
echo $documentation->showCode($lines); ?>
|
||||
</div>
|
||||
|
||||
<!-- Pill badges -->
|
||||
<div class="documentation-section" id="badgesection-pill">
|
||||
<h2 class="documentation-title"><?php echo $langs->trans('DocBadgePillBadges'); ?></h2>
|
||||
<p class="documentation-text"><?php echo $langs->trans('DocBadgePillBadgesDescription'); ?></p>
|
||||
<div class="documentation-example">
|
||||
<span class="badge badge-pill badge-primary">Primary</span>
|
||||
<span class="badge badge-pill badge-secondary">Secondary</span>
|
||||
<span class="badge badge-pill badge-success">Success</span>
|
||||
<span class="badge badge-pill badge-danger">Danger</span>
|
||||
<span class="badge badge-pill badge-warning">Warning</span>
|
||||
<span class="badge badge-pill badge-info">Info</span>
|
||||
<span class="badge badge-pill badge-light">Light</span>
|
||||
<span class="badge badge-pill badge-dark">Dark</span>
|
||||
<?php for ($i = 0; $i <= 9; $i++) : ?>
|
||||
<span class="badge badge-pill badge-status<?php print $i; ?>">status<?php print $i; ?></span>
|
||||
<?php endfor; ?>
|
||||
</div>
|
||||
<?php
|
||||
$lines = array(
|
||||
'<span class="badge badge-pill badge-primary">Primary</span>',
|
||||
'<span class="badge badge-pill badge-secondary">Secondary</span>',
|
||||
'<span class="badge badge-pill badge-success">Success</span>',
|
||||
'<span class="badge badge-pill badge-danger">Danger</span>',
|
||||
'<span class="badge badge-pill badge-warning">Warning</span>',
|
||||
'<span class="badge badge-pill badge-info">Info</span>',
|
||||
'<span class="badge badge-pill badge-light">Light</span>',
|
||||
'<span class="badge badge-pill badge-dark">Dark</span>',
|
||||
);
|
||||
for ($i = 0; $i <= 9; $i++) :
|
||||
$lines[] = '<span class="badge badge-pill badge-status'.$i.'">status-'.$i.'</span>';
|
||||
endfor;
|
||||
echo $documentation->showCode($lines); ?>
|
||||
</div>
|
||||
|
||||
<!-- Dot badges -->
|
||||
<div class="documentation-section" id="badgesection-dot">
|
||||
<h2 class="documentation-title"><?php echo $langs->trans('DocBadgeDotBadges'); ?></h2>
|
||||
<p class="documentation-text"><?php echo $langs->trans('DocBadgeDotBadgesDescription'); ?></p>
|
||||
<div class="documentation-example">
|
||||
<span class="badge badge-dot badge-primary"></span>
|
||||
<span class="badge badge-dot badge-secondary"></span>
|
||||
<span class="badge badge-dot badge-success"></span>
|
||||
<span class="badge badge-dot badge-danger"></span>
|
||||
<span class="badge badge-dot badge-warning"></span>
|
||||
<span class="badge badge-dot badge-info"></span>
|
||||
<span class="badge badge-dot badge-light"></span>
|
||||
<span class="badge badge-dot badge-dark"></span>
|
||||
<?php for ($i = 0; $i <= 9; $i++) : ?>
|
||||
<span class="badge badge-dot badge-status<?php print $i; ?>"></span>
|
||||
<?php endfor; ?>
|
||||
</div>
|
||||
<?php
|
||||
$lines = array(
|
||||
'<span class="badge badge-dot badge-primary"></span>',
|
||||
'<span class="badge badge-dot badge-secondary"></span>',
|
||||
'<span class="badge badge-dot badge-success"></span>',
|
||||
'<span class="badge badge-dot badge-danger"></span>',
|
||||
'<span class="badge badge-dot badge-warning"></span>',
|
||||
'<span class="badge badge-dot badge-info"></span>',
|
||||
'<span class="badge badge-dot badge-light"></span>',
|
||||
'<span class="badge badge-dot badge-dark"></span>',
|
||||
);
|
||||
for ($i = 0; $i <= 9; $i++) :
|
||||
$lines[] = '<span class="badge badge-dot badge-status'.$i.'"></span>';
|
||||
endfor;
|
||||
echo $documentation->showCode($lines); ?>
|
||||
</div>
|
||||
|
||||
<!-- Links -->
|
||||
<div class="documentation-section" id="badgesection-links">
|
||||
<h2 class="documentation-title"><?php echo $langs->trans('DocBadgeLinks'); ?></h2>
|
||||
<p class="documentation-text"><?php echo $langs->trans('DocBadgeLinksDescription'); ?></p>
|
||||
<div class="documentation-example">
|
||||
<a href="#" class="badge badge-primary">Primary</a>
|
||||
<a href="#" class="badge badge-secondary">Secondary</a>
|
||||
<a href="#" class="badge badge-success">Success</a>
|
||||
<a href="#" class="badge badge-danger">Danger</a>
|
||||
<a href="#" class="badge badge-warning">Warning</a>
|
||||
<a href="#" class="badge badge-info">Info</a>
|
||||
<a href="#" class="badge badge-light">Light</a>
|
||||
<a href="#" class="badge badge-dark">Dark</a>
|
||||
<?php for ($i = 0; $i <= 9; $i++) : ?>
|
||||
<a href="#" class="badge badge-status<?php print $i; ?>" >status<?php print $i; ?></a>
|
||||
<?php endfor; ?>
|
||||
</div>
|
||||
<?php
|
||||
$lines = array(
|
||||
'<a href="#" class="badge badge-primary">Primary</a>',
|
||||
'<a href="#" class="badge badge-secondary">Secondary</a>',
|
||||
'<a href="#" class="badge badge-success">Success</a>',
|
||||
'<a href="#" class="badge badge-danger">Danger</a>',
|
||||
'<a href="#" class="badge badge-warning">Warning</a>',
|
||||
'<a href="#" class="badge badge-info">Info</a>',
|
||||
'<a href="#" class="badge badge-light">Light</a>',
|
||||
'<a href="#" class="badge badge-dark">Dark</a>',
|
||||
);
|
||||
for ($i = 0; $i <= 9; $i++) :
|
||||
$lines[] = '<a href="#" class="badge badge-status'.$i.'" >status'.$i.'</a>';
|
||||
endfor;
|
||||
echo $documentation->showCode($lines); ?>
|
||||
</div>
|
||||
|
||||
<!-- Use badge helper function -->
|
||||
<div class="documentation-section" id="badgesection-dolgetbadge">
|
||||
<h2 class="documentation-title"><?php echo $langs->trans('DocBadgeHelper'); ?></h2>
|
||||
<p class="documentation-text"><?php echo $langs->trans('DocBadgeHelperDescription'); ?></p>
|
||||
<div class="documentation-example">
|
||||
<?php print dolGetBadge('your label for accessibility', 'your label <u>with</u> <em>html</em>', 'primary'); ?>
|
||||
<?php print dolGetBadge('your label for accessibility', 'your label <u>with</u> <em>html</em>', 'danger', 'pill'); ?>
|
||||
<?php print dolGetBadge('your label for accessibility', 'your label', 'warning', 'dot'); ?>
|
||||
</div>
|
||||
<?php
|
||||
$lines = array(
|
||||
"/**",
|
||||
" * Function dolGetBadge",
|
||||
" *",
|
||||
" * @param string \$label label of badge no html : use in alt attribute for accessibility",
|
||||
" * @param string \$html optional : label of badge with html",
|
||||
" * @param string \$type type of badge : Primary Secondary Success Danger Warning Info Light Dark status0 status1 status2 status3 status4 status5 status6 status7 status8 status9",
|
||||
" * @param string \$mode Default '' , 'pill', 'dot'",
|
||||
" * @param string \$url the url for link",
|
||||
" * ... See more: core/lib/functions.lib.php ",
|
||||
"",
|
||||
"<?php print dolGetBadge('your label for accessibility', 'your label <u>with</u> <em>html</em>', 'primary'); ?>",
|
||||
"<?php print dolGetBadge('your label for accessibility', 'your label <u>with</u> <em>html</em>', 'danger', 'pill'); ?>",
|
||||
"<?php print dolGetBadge('your label for accessibility', 'your label', 'warning', 'dot'); ?>",
|
||||
);
|
||||
echo $documentation->showCode($lines); ?>
|
||||
</div>
|
||||
|
||||
<!-- -->
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<?php
|
||||
// Output close body + html
|
||||
$documentation->docFooter();
|
||||
?>
|
||||
361
htdocs/admin/tools/ui/components/buttons.php
Normal file
361
htdocs/admin/tools/ui/components/buttons.php
Normal file
@@ -0,0 +1,361 @@
|
||||
<?php
|
||||
/*
|
||||
* Copyright (C) 2024 Anthony Damhet <a.damhet@progiseize.fr>
|
||||
*
|
||||
* This program and files/directory inner it is free software: you can
|
||||
* redistribute it and/or modify it under the terms of the
|
||||
* GNU Affero General Public License (AGPL) 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 AGPL for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU AGPL
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/agpl-3.0.html>.
|
||||
*/
|
||||
|
||||
$res=0;
|
||||
if (! $res && file_exists("../../main.inc.php")) : $res=@include '../../main.inc.php';
|
||||
endif;
|
||||
if (! $res && file_exists("../../../main.inc.php")) : $res=@include '../../../main.inc.php';
|
||||
endif;
|
||||
if (! $res && file_exists("../../../../main.inc.php")) : $res=@include '../../../../main.inc.php';
|
||||
endif;
|
||||
|
||||
// Protection if external user
|
||||
if ($user->socid > 0) : accessforbidden();
|
||||
endif;
|
||||
|
||||
// Includes
|
||||
dol_include_once('admin/tools/ui/class/documentation.class.php');
|
||||
|
||||
// Load documentation translations
|
||||
$langs->load('uxdocumentation');
|
||||
|
||||
//
|
||||
$documentation = new Documentation($db);
|
||||
|
||||
// Output html head + body - Param is Title
|
||||
$documentation->docHeader('Buttons');
|
||||
|
||||
// Set view for menu and breadcrumb
|
||||
// Menu must be set in constructor of documentation class
|
||||
$documentation->view = array('Components','Buttons');
|
||||
|
||||
// Output sidebar
|
||||
$documentation->showSidebar(); ?>
|
||||
|
||||
<div class="doc-wrapper">
|
||||
|
||||
<?php $documentation->showBreadCrumb(); ?>
|
||||
|
||||
<div class="doc-content-wrapper">
|
||||
|
||||
<h1 class="documentation-title"><?php echo $langs->trans('DocButtonsTitle'); ?></h1>
|
||||
<p class="documentation-text"><?php echo $langs->trans('DocButtonsMainDescription'); ?></p>
|
||||
|
||||
<!-- Summary -->
|
||||
<?php $documentation->showSummary(); ?>
|
||||
|
||||
<!-- Example of simple usage -->
|
||||
<div class="documentation-section" id="buttonsection-basicusage">
|
||||
<h2 class="documentation-title"><?php echo $langs->trans('DocBasicUsage'); ?></h2>
|
||||
<p class="documentation-text"><?php echo $langs->trans('DocButtonBasicUsageDescription'); ?></p>
|
||||
<div class="documentation-example">
|
||||
<?php
|
||||
$label = 'My action label used for accessibility visually for impaired people';
|
||||
$user_right = 1;
|
||||
|
||||
$html = '<span class="fa fa-clone paddingright" aria-hidden="true"></span> My default action';
|
||||
$action_type = 'default';
|
||||
$id = 'button-id-1';
|
||||
$url = '#'.$id;
|
||||
print dolGetButtonAction($label, $html, $action_type, $url, $id, $user_right);
|
||||
|
||||
$html = '<span class="fa fa-trash-alt paddingright" aria-hidden="true"></span> My delete action';
|
||||
$action_type = 'delete';
|
||||
$id = 'button-id-2';
|
||||
$url = '#'.$id;
|
||||
print dolGetButtonAction($label, $html, $action_type, $url, $id, $user_right);
|
||||
|
||||
$html = '<span class="fa fa-radiation paddingright" aria-hidden="true"></span> My danger action';
|
||||
$action_type = 'danger';
|
||||
$id = 'button-id-3';
|
||||
$url = '#'.$id;
|
||||
print dolGetButtonAction($label, $html, $action_type, $url, $id, $user_right); ?>
|
||||
|
||||
<br><br>
|
||||
|
||||
<?php
|
||||
$user_right = 0;
|
||||
|
||||
$html = '<span class="fa fa-clone paddingright" aria-hidden="true"></span> My default action';
|
||||
$action_type = 'default';
|
||||
$id = 'button-id-4';
|
||||
$url = '#'.$id;
|
||||
print dolGetButtonAction($label, $html, $action_type, $url, $id, $user_right);
|
||||
|
||||
$html = '<span class="fa fa-trash-alt paddingright" aria-hidden="true"></span> My delete action';
|
||||
$action_type = 'delete';
|
||||
$id = 'button-id-5';
|
||||
$url = '#'.$id;
|
||||
print dolGetButtonAction($label, $html, $action_type, $url, $id, $user_right);
|
||||
|
||||
$html = '<span class="fa fa-radiation paddingright" aria-hidden="true"></span> My danger action';
|
||||
$action_type = 'danger';
|
||||
$id = 'button-id-6';
|
||||
$url = '#'.$id;
|
||||
print dolGetButtonAction($label, $html, $action_type, $url, $id, $user_right); ?>
|
||||
</div>
|
||||
<?php
|
||||
$lines = array(
|
||||
'<?php',
|
||||
'/**',
|
||||
' * Function dolGetButtonAction',
|
||||
' *',
|
||||
' * $label Label or tooltip of button if $text is provided. Also used as tooltip in title attribute. Can be escaped HTML content or full simple text.',
|
||||
' * $html Optional : short label on button. Can be escaped HTML content or full simple text.',
|
||||
' * $actionType default, danger, email, clone, cancel, delete, ...',
|
||||
' * $url Url for link or array of subbutton description',
|
||||
' * $id Attribute id of action button. Example \'action-delete\'. This can be used for full ajax confirm if this code is reused into the ->formconfirm() method.',
|
||||
' * $userRight User action right / 0 = No, 1 = Yes',
|
||||
' * $params Various params',
|
||||
' * ',
|
||||
' * See more in core/lib/functions.lib.php',
|
||||
' */',
|
||||
'print dolGetButtonAction($label, $html, $actionType, $url, $id, $userRight, $params);',
|
||||
);
|
||||
echo $documentation->showCode($lines); ?>
|
||||
</div>
|
||||
|
||||
<!-- Example of modal usage -->
|
||||
<div class="documentation-section" id="buttonsection-modals">
|
||||
<h2 class="documentation-title"><?php echo $langs->trans('DocButtonModal'); ?></h2>
|
||||
<p class="documentation-text"><?php echo $langs->trans('DocButtonModalDescription'); ?></p>
|
||||
<div class="documentation-example">
|
||||
<?php
|
||||
$userRight = 1;
|
||||
|
||||
$html = '<span class="fa fa-clone" paddingright" aria-hidden="true"></span> My default action';
|
||||
$actionType = 'default';
|
||||
$id = 'button-id-7';
|
||||
$url = '#'.$id;
|
||||
$params = array(
|
||||
'confirm' => true
|
||||
);
|
||||
print dolGetButtonAction($label, $html, $actionType, $url, $id, $userRight, $params);
|
||||
|
||||
$html = '<span class="fa fa-trash-alt paddingright" aria-hidden="true"></span> My delete action';
|
||||
$actionType = 'delete';
|
||||
$id = 'button-id-8';
|
||||
$url = $_SERVER['PHP_SELF'] . '?token='.newToken().'#'.$id;
|
||||
$params = array(
|
||||
'confirm' => array(
|
||||
'url' => 'your confirm action url',
|
||||
'title' => 'Your title to display',
|
||||
'action-btn-label' => 'Your confirm label',
|
||||
'cancel-btn-label' => 'Your cancel label',
|
||||
'content' => 'Content to display with <strong>HTML</strong> compatible <ul><li>test 01</li><li>test 02</li><li>test 03</li></ul>'
|
||||
)
|
||||
);
|
||||
print dolGetButtonAction($label, $html, $actionType, $url, $id, $userRight, $params);
|
||||
|
||||
$userRight = 0;
|
||||
|
||||
$html = '<span class="fa fa-clone" ></span> My default action';
|
||||
$actionType = 'delete';
|
||||
$id = 'button-id-9';
|
||||
$url = '#'.$id;
|
||||
$params = array(
|
||||
'confirm' => true
|
||||
);
|
||||
print dolGetButtonAction($label, $html, $actionType, $url, $id, $userRight, $params); ?>
|
||||
</div>
|
||||
<?php
|
||||
$lines = array(
|
||||
'<?php',
|
||||
'// Default parameters',
|
||||
'$params = array(',
|
||||
' \'confirm\' => true',
|
||||
');',
|
||||
'',
|
||||
'// Custom parameters',
|
||||
'$params = array(',
|
||||
' \'confirm\' => array(',
|
||||
' \'url\' => \'your confirm action url\',',
|
||||
' \'title\' => \'Your title to display\',',
|
||||
' \'action-btn-label\' => \'Your confirm label\',',
|
||||
' \'cancel-btn-label\' => \'Your cancel label\',',
|
||||
' \'content\' => \'Content to display with <strong>HTML</strong> compatible <ul><li>test 01</li><li>test 02</li><li>test 03</li></ul>\'',
|
||||
' )',
|
||||
');',
|
||||
'',
|
||||
'print dolGetButtonAction($label, $html, $actionType, $url, $id, $userRight, $params);',
|
||||
);
|
||||
echo $documentation->showCode($lines); ?>
|
||||
</div>
|
||||
|
||||
<!-- Example of subbutton usage -->
|
||||
<div class="documentation-section" id="buttonsection-submenu">
|
||||
<h2 class="documentation-title"><?php echo $langs->trans('DocButtonSubmenu'); ?></h2>
|
||||
<p class="documentation-text"><?php echo $langs->trans('DocButtonSubmenuDescription'); ?></p>
|
||||
<div class="documentation-example">
|
||||
<?php
|
||||
$userRight = 1;
|
||||
$html = '<span class="fa fa-clone" paddingright" aria-hidden="true"></span> My default action';
|
||||
$actionType = 'default';
|
||||
$id = 'button-id-7';
|
||||
$submenu_url = str_replace(DOL_URL_ROOT, '', $_SERVER['PHP_SELF']);
|
||||
$url = array(
|
||||
array(
|
||||
'lang'=>'documentation@documentation',
|
||||
'url'=> $submenu_url.'#'.$id,
|
||||
'label' => 'My SubAction 1',
|
||||
'perm' => 1
|
||||
),
|
||||
array(
|
||||
'lang'=>'documentation@documentation',
|
||||
'url'=> $submenu_url.'#'.$id,
|
||||
'label' => 'My SubAction 2',
|
||||
'perm' => 0
|
||||
),
|
||||
);
|
||||
$params = array();
|
||||
print dolGetButtonAction($label, $html, $actionType, $url, $id, $userRight, $params); ?>
|
||||
</div>
|
||||
<?php
|
||||
$lines = array(
|
||||
'<?php',
|
||||
'// Simple button',
|
||||
'$url = \'url_script\';',
|
||||
'print dolGetButtonAction($label, $html, $actionType, $url, $id, $userRight, $params);',
|
||||
'',
|
||||
'// Dropdown button',
|
||||
'$url = array(',
|
||||
' array(',
|
||||
' \'lang\' => \'langfile\',',
|
||||
' \'url\' => \'url_script_1\', // Url without DOL_URL_ROOT',
|
||||
' \'label\' => \'My SubAction 1\',',
|
||||
' \'perm\' => 1, // The user have the rights',
|
||||
' ),',
|
||||
' array(',
|
||||
' \'lang\' => \'langfile\',',
|
||||
' \'url\' => \'url_script_2\', // Url without DOL_URL_ROOT',
|
||||
' \'label\' => \'My SubAction 2\',',
|
||||
' \'perm\' => 0, // The user does not have the rights',
|
||||
' ),',
|
||||
');',
|
||||
'print dolGetButtonAction($label, $html, $actionType, $url, $id, $userRight, $params);'
|
||||
);
|
||||
echo $documentation->showCode($lines); ?>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Example of subbutton usage -->
|
||||
<div class="documentation-section" id="buttonsection-icon-btn">
|
||||
<h2 class="documentation-title"><?php echo $langs->trans('DocButtonIconsLowEmphasis'); ?></h2>
|
||||
<p class="documentation-text"><?php echo $langs->trans('DocButtonIconsDescriptionLowEmphasis'); ?></p>
|
||||
<div class="documentation-example">
|
||||
<?php
|
||||
$btnLabel = $langs->trans('Label');
|
||||
print ' <button class="btn-low-emphasis --btn-icon" title="'.dol_escape_htmltag($btnLabel).'" aria-label="'.dol_escape_htmltag($btnLabel).'" >'.img_picto($btnLabel, 'fa-arrow-right', 'aria-hidden="true"', 0, 0, 1).'</button>';
|
||||
|
||||
$btnLabel = $langs->trans('Reset');
|
||||
print ' <button class="btn-low-emphasis --btn-icon" title="'.dol_escape_htmltag($btnLabel).'" aria-label="'.dol_escape_htmltag($btnLabel).'" >'.img_picto($btnLabel, 'eraser', 'aria-hidden="true"', 0, 0, 1).'</button>';
|
||||
?>
|
||||
</div>
|
||||
<?php
|
||||
$lines = array(
|
||||
'<?php',
|
||||
'$btnLabel = $langs->trans(\'Label\');',
|
||||
'print \' <button class="btn-low-emphasis --btn-icon" title="\'.dol_escape_htmltag($btnLabel).\'" aria-label="\'.dol_escape_htmltag($btnLabel).\'" >\'.img_picto($btnLabel, \'fa-arrow-right\', \'aria-hidden="true"\', 0, 0, 1).\'</button>\';',
|
||||
'',
|
||||
'$btnLabel = $langs->trans(\'Reset\');',
|
||||
'print \' <button class="btn-low-emphasis --btn-icon" title="\'.dol_escape_htmltag($btnLabel).\'" aria-label="\'.dol_escape_htmltag($btnLabel).\'" >\'.img_picto($btnLabel, \'eraser\', \'aria-hidden="true"\', 0, 0, 1).\'</button>\';',
|
||||
|
||||
);
|
||||
echo $documentation->showCode($lines); ?>
|
||||
</div>
|
||||
|
||||
<!-- Example of subbutton usage -->
|
||||
<div class="documentation-section" id="buttonsection-icon-btn">
|
||||
<h2 class="documentation-title"><?php echo $langs->trans('DocButtonIconsForTitle'); ?></h2>
|
||||
<div class="documentation-example">
|
||||
<?php
|
||||
|
||||
|
||||
$btnLabel = $langs->trans('Label');
|
||||
print dolGetButtonTitle($btnLabel, '', 'fa fa-file', '#', '', 0); // Not Enough Permissions
|
||||
print dolGetButtonTitle($btnLabel, '', 'fa fa-file', '#', '', 1); // Active
|
||||
print dolGetButtonTitle($btnLabel, '', 'fa fa-file', '#', '', 2); // Active and selected
|
||||
print dolGetButtonTitle($btnLabel, '', 'fa fa-file', '#', '', -1); // Functionality is disabled
|
||||
print dolGetButtonTitle($btnLabel, '', 'fa fa-file', '#', '', -2); // Disabled without info
|
||||
|
||||
|
||||
?>
|
||||
</div>
|
||||
<?php
|
||||
$lines = array(
|
||||
'<?php',
|
||||
'$btnLabel = $langs->trans(\'Label\');',
|
||||
'$status = 0; // Not Enough Permissions',
|
||||
'print dolGetButtonTitle($btnLabel, \'\', \'fa fa-file\', \'#\', \'\', $status);',
|
||||
'$status = 1; // Active',
|
||||
'print dolGetButtonTitle($btnLabel, \'\', \'fa fa-file\', \'#\', \'\', $status);',
|
||||
'$status = 2; // Active and selected',
|
||||
'print dolGetButtonTitle($btnLabel, \'\', \'fa fa-file\', \'#\', \'\', $status);',
|
||||
'$status = -1; // Functionality is disabled',
|
||||
'print dolGetButtonTitle($btnLabel, \'\', \'fa fa-file\', \'#\', \'\', $status);',
|
||||
'$status = -2; // Disabled without info',
|
||||
'print dolGetButtonTitle($btnLabel, \'\', \'fa fa-file\', \'#\', \'\', $status);',
|
||||
);
|
||||
|
||||
echo $documentation->showCode($lines); ?><div class="documentation-example">
|
||||
<?php
|
||||
|
||||
|
||||
$btnLabel = $langs->trans('Label');
|
||||
print dolGetButtonTitle($btnLabel, '', 'fa fa-download', '#', '', 0, ['forcenohideoftext'=>1]); // Not Enough Permissions
|
||||
print dolGetButtonTitle($btnLabel, '', 'fa fa-download', '#', '', 1, ['forcenohideoftext'=>1]); // Active
|
||||
print dolGetButtonTitle($btnLabel, '', 'fa fa-download', '#', '', 2, ['forcenohideoftext'=>1]); // Active and selected
|
||||
print dolGetButtonTitle($btnLabel, '', 'fa fa-download', '#', '', -1, ['forcenohideoftext'=>1]); // Functionality is disabled
|
||||
print dolGetButtonTitle($btnLabel, '', 'fa fa-download', '#', '', -2, ['forcenohideoftext'=>1]); // Disabled without info
|
||||
|
||||
|
||||
?>
|
||||
</div>
|
||||
|
||||
<?php
|
||||
$lines = array(
|
||||
'<?php',
|
||||
'$btnLabel = $langs->trans(\'Label\');',
|
||||
'$status = 0; // Not Enough Permissions',
|
||||
'print dolGetButtonTitle($btnLabel, \'\', \'fa fa-download\', \'#\', \'\', $status, [\'forcenohideoftext\'=>1]);',
|
||||
'$status = 1; // Active',
|
||||
'print dolGetButtonTitle($btnLabel, \'\', \'fa fa-download\', \'#\', \'\', $status, [\'forcenohideoftext\'=>1]);',
|
||||
'$status = 2; // Active and selected',
|
||||
'print dolGetButtonTitle($btnLabel, \'\', \'fa fa-download\', \'#\', \'\', $status, [\'forcenohideoftext\'=>1]);',
|
||||
'$status = -1; // Functionality is disabled',
|
||||
'print dolGetButtonTitle($btnLabel, \'\', \'fa fa-download\', \'#\', \'\', $status, [\'forcenohideoftext\'=>1]);',
|
||||
'$status = -2; // Disabled without info',
|
||||
'print dolGetButtonTitle($btnLabel, \'\', \'fa fa-download\', \'#\', \'\', $status, [\'forcenohideoftext\'=>1]);',
|
||||
);
|
||||
echo $documentation->showCode($lines); ?>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<?php
|
||||
// Output close body + html
|
||||
$documentation->docFooter();
|
||||
?>
|
||||
174
htdocs/admin/tools/ui/components/event-message.php
Normal file
174
htdocs/admin/tools/ui/components/event-message.php
Normal file
@@ -0,0 +1,174 @@
|
||||
<?php
|
||||
/*
|
||||
* Copyright (C) 2024 Anthony Damhet <a.damhet@progiseize.fr>
|
||||
*
|
||||
* This program and files/directory inner it is free software: you can
|
||||
* redistribute it and/or modify it under the terms of the
|
||||
* GNU Affero General Public License (AGPL) 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 AGPL for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU AGPL
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/agpl-3.0.html>.
|
||||
*/
|
||||
|
||||
$res=0;
|
||||
if (! $res && file_exists("../../main.inc.php")) : $res=@include '../../main.inc.php';
|
||||
endif;
|
||||
if (! $res && file_exists("../../../main.inc.php")) : $res=@include '../../../main.inc.php';
|
||||
endif;
|
||||
if (! $res && file_exists("../../../../main.inc.php")) : $res=@include '../../../../main.inc.php';
|
||||
endif;
|
||||
|
||||
|
||||
// Protection if external user
|
||||
if ($user->socid > 0) : accessforbidden();
|
||||
endif;
|
||||
|
||||
// Includes
|
||||
dol_include_once('admin/tools/ui/class/documentation.class.php');
|
||||
|
||||
// Load documentation translations
|
||||
$langs->load('uxdocumentation');
|
||||
|
||||
$action = GETPOST('action', 'alpha');
|
||||
|
||||
if ($action == 'displayeventmessage') {
|
||||
setEventMessages($langs->trans('DocSetEventMessageUnique'), null);
|
||||
} elseif ($action == 'displayeventmessages') {
|
||||
$messageArray = [$langs->trans('DocSetEventMessage', '1'),
|
||||
$langs->trans('DocSetEventMessage', '2'),
|
||||
$langs->trans('DocSetEventMessage', '3')];
|
||||
setEventMessages(null, $messageArray);
|
||||
} elseif ($action == 'displayeventmessageok') {
|
||||
setEventMessages($langs->trans('DocSetEventMessageOK'), null);
|
||||
} elseif ($action == 'displayeventmessagewarning') {
|
||||
setEventMessages($langs->trans('DocSetEventMessageWarning'), null, 'warnings');
|
||||
} elseif ($action == 'displayeventmessageerror') {
|
||||
setEventMessages($langs->trans('DocSetEventMessageError'), null, 'errors');
|
||||
}
|
||||
|
||||
//
|
||||
$documentation = new Documentation($db);
|
||||
|
||||
// Output html head + body - Param is Title
|
||||
$documentation->docHeader('SetEventMessages');
|
||||
|
||||
// Set view for menu and breadcrumb
|
||||
// Menu must be set in constructor of documentation class
|
||||
$documentation->view = array('Components','Event Message');
|
||||
|
||||
// Output sidebar
|
||||
$documentation->showSidebar(); ?>
|
||||
|
||||
<div class="doc-wrapper">
|
||||
|
||||
<?php $documentation->showBreadCrumb(); ?>
|
||||
|
||||
<div class="doc-content-wrapper">
|
||||
|
||||
<h1 class="documentation-title"><?php echo $langs->trans('DocSetEventMessageTitle'); ?></h1>
|
||||
<p class="documentation-text"><?php echo $langs->trans('DocSetEventMessageMainDescription'); ?></p>
|
||||
|
||||
<!-- Summary -->
|
||||
<?php $documentation->showSummary(); ?>
|
||||
|
||||
<!-- Basic usage -->
|
||||
<div class="documentation-section" id="seteventmessagesection-basicusage">
|
||||
<h2 class="documentation-title"><?php echo $langs->trans('DocBasicUsage'); ?></h2>
|
||||
<p class="documentation-text"><?php echo $langs->trans('DocSetEventMessageDescription'); ?></p>
|
||||
<div class="documentation-example">
|
||||
<?php
|
||||
$label = 'My action label used for accessibility visually for impaired people';
|
||||
$user_right = 1;
|
||||
|
||||
$html = '<span class="fa fa-comment paddingright"></span>'.$langs->trans('DocSetEventMessageDisplayMessage');
|
||||
$action_type = 'displayeventmessage';
|
||||
$url = $_SERVER["PHP_SELF"].'?action=displayeventmessage';
|
||||
print dolGetButtonAction($label, $html, $action_type, $url, '', $user_right);
|
||||
|
||||
$label = 'My action label used for accessibility visually for impaired people';
|
||||
$user_right = 1;
|
||||
|
||||
$html = '<span class="fa fa-comments paddingright"></span>'.$langs->trans('DocSetEventMessageDisplayMessages');;
|
||||
$action_type = 'displayeventmessages';
|
||||
$url = $_SERVER["PHP_SELF"].'?action=displayeventmessages';
|
||||
print dolGetButtonAction($label, $html, $action_type, $url, '', $user_right); ?>
|
||||
</div>
|
||||
<?php
|
||||
$lines = array(
|
||||
'<?php',
|
||||
'/**',
|
||||
'* Function dolGetButtonAction',
|
||||
'*',
|
||||
'* Set event messages in dol_events session object. Will be output by calling dol_htmloutput_events',
|
||||
'* Note: Calling dol_htmloutput_events is done into pages by standard llxFooter() function',
|
||||
'*',
|
||||
'* @param string|null $mesg Message string',
|
||||
'* @param string[]|null $mesgs Message array',
|
||||
'* @param string $style Which style to use ("mesgs" by default, "warnings", "errors")',
|
||||
'* @param string $messagekey A key to be used to allow the feature "Never show this message during this session again"',
|
||||
'* @param int $noduplicate 1 means we do not add the message if already present in session stack',
|
||||
'* @return void',
|
||||
'* @see dol_htmloutput_events()',
|
||||
'*/',
|
||||
'',
|
||||
'setEventMessages("message", null);',
|
||||
'setEventMessages(null, messages[]);',
|
||||
);
|
||||
echo $documentation->showCode($lines); ?>
|
||||
</div>
|
||||
|
||||
<!-- Contextual variations -->
|
||||
<div class="documentation-section" id="seteventmessagesection-contextvariations">
|
||||
<h2 class="documentation-title"><?php echo $langs->trans('DocSetEventMessageContextualVariations'); ?></h2>
|
||||
<p class="documentation-text"><?php echo $langs->trans('DocSetEventMessageContextualVariationsDescription'); ?></p>
|
||||
<div class="documentation-example">
|
||||
<?php
|
||||
$label = 'My action label used for accessibility visually for impaired people';
|
||||
$user_right = 1;
|
||||
$html = '<span class="fa fa-comment paddingright"></span>'.$langs->trans('DocSetEventMessageDisplayOKMessage');;
|
||||
$action_type = 'displayeventmessageok';
|
||||
$url = $_SERVER["PHP_SELF"].'?action=displayeventmessageok#seteventmessagesection-contextvariations';
|
||||
$params['attr']['style'] = 'background: #446548';
|
||||
print dolGetButtonAction('', $html, $action_type, $url, '', $user_right, $params);
|
||||
|
||||
$label = 'My action label used for accessibility visually for impaired people';
|
||||
$user_right = 1;
|
||||
$html = '<span class="fa fa-comment paddingright"></span>'.$langs->trans('DocSetEventMessageDisplayWarningMessage');;
|
||||
$action_type = 'displayeventmessagewarning';
|
||||
$url = $_SERVER["PHP_SELF"].'?action=displayeventmessagewarning#seteventmessagesection-contextvariations';
|
||||
$params['attr']['style'] = 'background: #a28918';
|
||||
print dolGetButtonAction($label, $html, $action_type, $url, '', $user_right, $params);
|
||||
|
||||
$label = 'My action label used for accessibility visually for impaired people';
|
||||
$user_right = 1;
|
||||
$html = '<span class="fa fa-comment paddingright"></span>'.$langs->trans('DocSetEventMessageDisplayErrorMessage');;
|
||||
$action_type = 'displayeventmessageerror';
|
||||
$url = $_SERVER["PHP_SELF"].'?action=displayeventmessageerror#seteventmessagesection-contextvariations';
|
||||
$params['attr']['style'] = 'background: #a72947';
|
||||
print dolGetButtonAction($label, $html, $action_type, $url, '', $user_right, $params); ?>
|
||||
</div>
|
||||
<?php
|
||||
$lines = array(
|
||||
'setEventMessages("message", null)',
|
||||
'setEventMessages("message", null, "warnings")',
|
||||
'setEventMessages("message", null, "errors")'
|
||||
);
|
||||
echo $documentation->showCode($lines); ?>
|
||||
</div>
|
||||
<!-- -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<?php
|
||||
// Output close body + html
|
||||
$documentation->docFooter();
|
||||
|
||||
?>
|
||||
66
htdocs/admin/tools/ui/components/index.php
Normal file
66
htdocs/admin/tools/ui/components/index.php
Normal file
@@ -0,0 +1,66 @@
|
||||
<?php
|
||||
/*
|
||||
* Copyright (C) 2024 Anthony Damhet <a.damhet@progiseize.fr>
|
||||
*
|
||||
* This program and files/directory inner it is free software: you can
|
||||
* redistribute it and/or modify it under the terms of the
|
||||
* GNU Affero General Public License (AGPL) 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 AGPL for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU AGPL
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/agpl-3.0.html>.
|
||||
*/
|
||||
|
||||
$res=0;
|
||||
if (! $res && file_exists("../../main.inc.php")) : $res=@include '../../main.inc.php';
|
||||
endif;
|
||||
if (! $res && file_exists("../../../main.inc.php")) : $res=@include '../../../main.inc.php';
|
||||
endif;
|
||||
if (! $res && file_exists("../../../../main.inc.php")) : $res=@include '../../../../main.inc.php';
|
||||
endif;
|
||||
|
||||
// Protection if external user
|
||||
if ($user->socid > 0) : accessforbidden();
|
||||
endif;
|
||||
|
||||
// Includes
|
||||
dol_include_once('admin/tools/ui/class/documentation.class.php');
|
||||
|
||||
// Load documentation translations
|
||||
$langs->load('uxdocumentation');
|
||||
|
||||
//
|
||||
$documentation = new Documentation($db);
|
||||
|
||||
// Output html head + body - Param is Title
|
||||
$documentation->docHeader();
|
||||
|
||||
// Set view for menu and breadcrumb
|
||||
$documentation->view = array('Components');
|
||||
|
||||
// Output sidebar
|
||||
$documentation->showSidebar(); ?>
|
||||
|
||||
<div class="doc-wrapper">
|
||||
|
||||
<?php $documentation->showBreadCrumb(); ?>
|
||||
|
||||
<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>
|
||||
|
||||
<?php $documentation->showSummary(); ?>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<?php
|
||||
// Output close body + html
|
||||
$documentation->docFooter();
|
||||
?>
|
||||
264
htdocs/admin/tools/ui/components/progress-bars.php
Normal file
264
htdocs/admin/tools/ui/components/progress-bars.php
Normal file
@@ -0,0 +1,264 @@
|
||||
<?php
|
||||
/*
|
||||
* Copyright (C) 2024 Anthony Damhet <a.damhet@progiseize.fr>
|
||||
*
|
||||
* This program and files/directory inner it is free software: you can
|
||||
* redistribute it and/or modify it under the terms of the
|
||||
* GNU Affero General Public License (AGPL) 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 AGPL for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU AGPL
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/agpl-3.0.html>.
|
||||
*/
|
||||
|
||||
$res=0;
|
||||
if (! $res && file_exists("../../main.inc.php")) : $res=@include '../../main.inc.php';
|
||||
endif;
|
||||
if (! $res && file_exists("../../../main.inc.php")) : $res=@include '../../../main.inc.php';
|
||||
endif;
|
||||
if (! $res && file_exists("../../../../main.inc.php")) : $res=@include '../../../../main.inc.php';
|
||||
endif;
|
||||
|
||||
// Protection if external user
|
||||
if ($user->socid > 0) : accessforbidden();
|
||||
endif;
|
||||
|
||||
// Includes
|
||||
dol_include_once('admin/tools/ui/class/documentation.class.php');
|
||||
|
||||
// Load documentation translations
|
||||
$langs->load('uxdocumentation');
|
||||
|
||||
//
|
||||
$documentation = new Documentation($db);
|
||||
|
||||
// Output html head + body - Param is Title
|
||||
$documentation->docHeader('Progress-bars');
|
||||
|
||||
// Set view for menu and breadcrumb
|
||||
// Menu must be set in constructor of documentation class
|
||||
$documentation->view = array('Components','Progress');
|
||||
|
||||
// Output sidebar
|
||||
$documentation->showSidebar(); ?>
|
||||
|
||||
<div class="doc-wrapper">
|
||||
|
||||
<?php $documentation->showBreadCrumb(); ?>
|
||||
|
||||
<div class="doc-content-wrapper">
|
||||
|
||||
<h1 class="documentation-title"><?php echo $langs->trans('DocProgressBarsTitle'); ?></h1>
|
||||
<p class="documentation-text"><?php echo $langs->trans('DocProgressBarsMainDescription'); ?></p>
|
||||
|
||||
<!-- Summary -->
|
||||
<?php $documentation->showSummary(); ?>
|
||||
|
||||
<!-- Basic usage -->
|
||||
<div class="documentation-section" id="progresse-section-basic-usage">
|
||||
<h2 class="documentation-title"><?php echo $langs->trans('DocBasicUsage'); ?></h2>
|
||||
<p class="documentation-text"><?php echo $langs->trans('DocProgressBarsDescription'); ?></p>
|
||||
<div class="documentation-example">
|
||||
|
||||
<?php echo 'Xss'; ?>
|
||||
<div class="progress xxs spaced" title="10%">
|
||||
<div class="progress-bar" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
|
||||
<?php echo 'Xs'; ?>
|
||||
<div class="progress xs spaced" title="20%">
|
||||
<div class="progress-bar" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
|
||||
<?php echo 'Sm'; ?>
|
||||
<div class="progress sm spaced" title="40%">
|
||||
<div class="progress-bar" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
|
||||
<?php echo $langs->trans('Default'); ?>
|
||||
<div class="progress" title="80%">
|
||||
<div class="progress-bar" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php
|
||||
$lines = array(
|
||||
'<div class="progress xxs" title="10%">',
|
||||
' <div class="progress-bar" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>',
|
||||
'</div>',
|
||||
'',
|
||||
'<div class="progress xs" title="20%">',
|
||||
' <div class="progress-bar" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>',
|
||||
'</div>',
|
||||
'',
|
||||
'<div class="progress sm" title="40%">',
|
||||
' <div class="progress-bar" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>',
|
||||
'</div>',
|
||||
'',
|
||||
'<div class="progress" title="80%">',
|
||||
' <div class="progress-bar" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>',
|
||||
'</div>',
|
||||
);
|
||||
echo $documentation->showCode($lines); ?>
|
||||
|
||||
<p class="documentation-text"><?php echo $langs->trans('DocProgressCanBeSpaced'); ?></p>
|
||||
<div class="documentation-example">
|
||||
<div class="progress spaced" title="40%">
|
||||
<div class="progress-bar" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php
|
||||
$lines = array(
|
||||
'<div class="progress spaced" title="40%">',
|
||||
' <div class="progress-bar" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>',
|
||||
'</div>',
|
||||
);
|
||||
echo $documentation->showCode($lines); ?>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Colors usage -->
|
||||
<div class="documentation-section" id="progress-section-color">
|
||||
<h2 class="documentation-title"><?php echo $langs->trans('DocColorVariants'); ?></h2>
|
||||
<p class="documentation-text"><?php echo $langs->trans('DocColorVariantsDesc'); ?></p>
|
||||
<div class="documentation-example">
|
||||
<div class="progress spaced" title="40%">
|
||||
<div class="progress-bar progress-bar-success" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress spaced" title="40%">
|
||||
<div class="progress-bar progress-bar-warning" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress spaced" title="40%">
|
||||
<div class="progress-bar progress-bar-info" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress spaced" title="40%">
|
||||
<div class="progress-bar progress-bar-danger" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php
|
||||
$lines = array(
|
||||
'<div class="progress" title="40%">',
|
||||
' <div class="progress-bar progress-bar-success" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>',
|
||||
'</div>',
|
||||
'',
|
||||
'<div class="progress" title="40%">',
|
||||
' <div class="progress-bar progress-bar-warning" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>',
|
||||
'</div>',
|
||||
'',
|
||||
'<div class="progress" title="40%">',
|
||||
' <div class="progress-bar progress-bar-info" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>',
|
||||
'</div>',
|
||||
'',
|
||||
'<div class="progress" title="40%">',
|
||||
' <div class="progress-bar progress-bar-danger" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>',
|
||||
'</div>',
|
||||
'',
|
||||
|
||||
);
|
||||
echo $documentation->showCode($lines); ?>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Striped usage -->
|
||||
<div class="documentation-section" id="progresse-section-stripped">
|
||||
<h2 class="documentation-title"><?php echo $langs->trans('DocStripedVariants'); ?></h2>
|
||||
<p class="documentation-text"><?php echo $langs->trans('DocStripedVariantsDesc'); ?></p>
|
||||
|
||||
<div class="documentation-example">
|
||||
<div class="progress spaced progress-striped" title="40%">
|
||||
<div class="progress-bar progress-bar-success" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress spaced progress-striped" title="40%">
|
||||
<div class="progress-bar progress-bar-warning" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress spaced progress-striped" title="40%">
|
||||
<div class="progress-bar progress-bar-info" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress spaced progress-striped" title="40%">
|
||||
<div class="progress-bar progress-bar-danger" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php
|
||||
$lines = array(
|
||||
'<div class="progress progress-striped" title="40%">',
|
||||
' <div class="progress-bar progress-bar-success" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>',
|
||||
'</div>',
|
||||
'',
|
||||
'<div class="progress progress-striped" title="40%">',
|
||||
' <div class="progress-bar progress-bar-warning" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>',
|
||||
'</div>',
|
||||
'',
|
||||
'<div class="progress progress-striped" title="40%">',
|
||||
' <div class="progress-bar progress-bar-info" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>',
|
||||
'</div>',
|
||||
'',
|
||||
'<div class="progress progress-striped" title="40%">',
|
||||
' <div class="progress-bar progress-bar-danger" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>',
|
||||
'</div>',
|
||||
'',
|
||||
|
||||
);
|
||||
echo $documentation->showCode($lines); ?>
|
||||
</div>
|
||||
<!-- -->
|
||||
|
||||
|
||||
<!-- other usage -->
|
||||
<div class="documentation-section" id="progresse-section-stripped">
|
||||
<h2 class="documentation-title"><?php echo $langs->trans('DocOtherVariants'); ?></h2>
|
||||
<p class="documentation-text"><?php echo $langs->trans('DocOtherVariantsDesc'); ?></p>
|
||||
|
||||
<div class="documentation-example">
|
||||
.progress-bar-consumed
|
||||
<div class="progress spaced progress-bar-consumed" title="40%">
|
||||
<div class="progress-bar" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
.progress-bar-consumed-late
|
||||
<div class="progress spaced progress-bar-consumed" title="40%">
|
||||
<div class="progress-bar" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php
|
||||
$lines = array(
|
||||
'<div class="progress progress-striped" title="40%">',
|
||||
' <div class="progress-bar progress-bar-success" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>',
|
||||
'</div>',
|
||||
'',
|
||||
'<div class="progress progress-striped" title="40%">',
|
||||
' <div class="progress-bar progress-bar-warning" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>',
|
||||
'</div>',
|
||||
'',
|
||||
'<div class="progress progress-striped" title="40%">',
|
||||
' <div class="progress-bar progress-bar-info" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>',
|
||||
'</div>',
|
||||
'',
|
||||
'<div class="progress progress-striped" title="40%">',
|
||||
' <div class="progress-bar progress-bar-danger" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>',
|
||||
'</div>',
|
||||
'',
|
||||
|
||||
);
|
||||
echo $documentation->showCode($lines); ?>
|
||||
</div>
|
||||
<!-- -->
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<?php
|
||||
// Output close body + html
|
||||
$documentation->docFooter();
|
||||
?>
|
||||
382
htdocs/admin/tools/ui/components/test_arrays.php
Normal file
382
htdocs/admin/tools/ui/components/test_arrays.php
Normal file
@@ -0,0 +1,382 @@
|
||||
<?php
|
||||
|
||||
|
||||
// Load Dolibarr environment
|
||||
@include '../../main.inc.php';
|
||||
|
||||
// Security
|
||||
if ($dolibarr_main_prod) {
|
||||
accessforbidden('Access forbidden when $dolibarr_main_prod is set to 1');
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
* View
|
||||
*/
|
||||
|
||||
$form = new Form($db);
|
||||
|
||||
$usedolheader = 1; // 1 = Test inside a dolibarr page, 0 = Use hard coded header
|
||||
|
||||
// HEADER
|
||||
//--------
|
||||
|
||||
if (empty($usedolheader)) {
|
||||
header("Content-type: text/html; charset=UTF8");
|
||||
|
||||
// Security options
|
||||
header("X-Content-Type-Options: nosniff"); // With the nosniff option, if the server says the content is text/html, the browser will render it as text/html (note that most browsers now force this option to on)
|
||||
header("X-Frame-Options: SAMEORIGIN"); // Frames allowed only if on same domain (stop some XSS attacks)
|
||||
?>
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta name="robots" content="noindex,nofollow" />
|
||||
<meta name="author" content="Dolibarr Development Team">
|
||||
<title>Test page</title>
|
||||
<!-- Includes for JQuery (Ajax library) -->
|
||||
<link rel="stylesheet" type="text/css" href="<?php echo DOL_URL_ROOT ?>/includes/jquery/css/base/jquery-ui.css" />
|
||||
<!-- <link rel="stylesheet" type="text/css" href="<?php echo DOL_URL_ROOT ?>/includes/jquery/plugins/datatables/media/css/jquery.dataTables.css" /> -->
|
||||
<link rel="stylesheet" type="text/css" title="default" href="<?php echo DOL_URL_ROOT ?>/theme/eldy/style.css.php<?php echo (GETPOST("dol_use_jmobile") == 1) ? '?dol_use_jmobile=1&dol_optimize_smallscreen=1' : ''; ?>" />
|
||||
<!-- Includes JS for JQuery -->
|
||||
<script type="text/javascript" src="<?php echo DOL_URL_ROOT ?>/includes/jquery/js/jquery.min.js"></script>
|
||||
<!-- migration fixes for removed Jquery functions -->
|
||||
<script type="text/javascript" src="<?php echo DOL_URL_ROOT ?>/includes/jquery/js/jquery-migrate.min.js"></script>
|
||||
<script type="text/javascript" src="<?php echo DOL_URL_ROOT ?>/includes/jquery/plugins/tablednd/jquery.tablednd.0.6.min.js"></script>
|
||||
<!-- <script type="text/javascript" src="<?php echo DOL_URL_ROOT ?>/includes/jquery/plugins/datatables/media/js/jquery.dataTables.js"></script> -->
|
||||
<script type="text/javascript" src="<?php echo DOL_URL_ROOT ?>/includes/jquery/plugins/select2/select2.min.js?version=4.0.0-beta"></script>
|
||||
</head>
|
||||
|
||||
<body style="padding: 10px;">
|
||||
|
||||
|
||||
<?php
|
||||
} else {
|
||||
$arraycss = array();
|
||||
$arrayjs = array();
|
||||
/*
|
||||
$arraycss=array('/includes/jquery/plugins/datatables/media/css/jquery.dataTables.css',
|
||||
'/includes/jquery/plugins/datatables/extensions/Buttons/css/buttons.dataTables.min.css',
|
||||
'/includes/jquery/plugins/datatables/extensions/ColReorder/css/colReorder.dataTables.min.css'
|
||||
);
|
||||
$arrayjs=array('/includes/jquery/plugins/datatables/media/js/jquery.dataTables.js',
|
||||
'/includes/jquery/plugins/datatables/extensions/Buttons/js/dataTables.buttons.js',
|
||||
'/includes/jquery/plugins/datatables/extensions/Buttons/js/buttons.colVis.min.js',
|
||||
'/includes/jquery/plugins/datatables/extensions/Buttons/js/buttons.html5.min.js',
|
||||
'/includes/jquery/plugins/datatables/extensions/Buttons/js/buttons.flash.min.js',
|
||||
'/includes/jquery/plugins/datatables/extensions/Buttons/js/buttons.print.min.js',
|
||||
'/includes/jquery/plugins/datatables/extensions/ColReorder/js/dataTables.colReorder.min.js',
|
||||
'/includes/jszip/jszip.min.js',
|
||||
'/includes/pdfmake/pdfmake.min.js',
|
||||
'/includes/pdfmake/vfs_fonts.js'
|
||||
);
|
||||
*/
|
||||
|
||||
llxHeader('', '', '', '', 0, 0, $arrayjs, $arraycss);
|
||||
}
|
||||
|
||||
|
||||
// CONTENT
|
||||
//---------
|
||||
?>
|
||||
|
||||
<h2>
|
||||
This page is a sample of page using tables. It is designed to make test with<br>
|
||||
</h2>
|
||||
<div class="wordbreak">
|
||||
- css (add parameter &theme=newtheme to test another theme or edit css of current theme)<br>
|
||||
- jmobile (add parameter <a href="<?php echo $_SERVER["PHP_SELF"].'?dol_use_jmobile=1&dol_optimize_smallscreen=1'; ?>">dol_use_jmobile=1&dol_optimize_smallscreen=1</a> and switch to small screen < 570 to enable with emulated jmobile)<br>
|
||||
- no javascript / usage for bind people (add parameter <a href="<?php echo $_SERVER["PHP_SELF"].'?nojs=1'; ?>">nojs=1</a> to force disable javascript)<br>
|
||||
- tablednd<br>
|
||||
</div>
|
||||
|
||||
|
||||
<br><hr><br>Example 0a : Table with div+div+div containing a select that should be overflowed and truncated => Use this to align text or form<br>
|
||||
|
||||
<div class="tagtable centpercent">
|
||||
<div class="tagtr">
|
||||
<div class="tagtd maxwidthonsmartphone" style="overflow: hidden; white-space: nowrap;"> <!-- If you remove max-width, the jmobile overflow does not work -->
|
||||
<select name="hidedetails" class="centpercentonsmartphone"><option>aaaaaaaaaaaaaaafd sf sf gfd gfds fsd gfd fhfg hf dhfg hg fhfgdhfgdh gh gfdhdgf h gfdh dfhg dfgh dfgh fdgh gfd hfd hfd gs fgdf gaaaa</option><option>gdfs gdf g sdfg dfg fdsg dsfg dfs gdfs gds fgs gdfdf gd</option></select>
|
||||
</div>
|
||||
<div class="tagtd maxwidthonsmartphone" style="overflow: hidden; white-space: nowrap;"> <!-- If you remove max-width, the jmobile overflow does not work -->
|
||||
<select name="hidedetails" class="centpercentonsmartphone"><option>aaaaaaaaaaaaaaafd sf sf gfd gfds fsd gfd fhfg hf dhfg hg fhfgdhfgdh gh gfdhdgf h gfdh dfhg dfgh dfgh fdgh gfd hfd hfd gs fgdf gaaaa</option><option>gdfs gdf g sdfg dfg fdsg dsfg dfs gdfs gds fgs gdfdf gd</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br><hr><br>Example 0b: Table with div+form+div containing a select that should be overflowed and truncated => Use this to align text or form<br>
|
||||
|
||||
<div class="tagtable centpercent">
|
||||
<form action="xxx" method="POST" class="tagtr">
|
||||
<div class="tagtd maxwidthonsmartphone" style="overflow: hidden; white-space: nowrap;"> <!-- If you remove max-width, the jmobile overflow does not work -->
|
||||
<select name="hidedetails" class="centpercentonsmartphone"><option>aaaaaaaaaaaaaaafd sf sf gfd gfds fsd gfd fhfg hf dhfg hg fhfgdhfgdh gh gfdhdgf h gfdh dfhg dfgh dfgh fdgh gfd hfd hfd gs fgdf gaaaa</option><option>gdfs gdf g sdfg dfg fdsg dsfg dfs gdfs gds fgs gdfdf gd</option></select>
|
||||
</div>
|
||||
<div class="tagtd maxwidthonsmartphone" style="overflow: hidden; white-space: nowrap;"> <!-- If you remove max-width, the jmobile overflow does not work -->
|
||||
<select name="hidedetails" class="centpercentonsmartphone"><option>aaaaaaaaaaaaaaafd sf sf gfd gfds fsd gfd fhfg hf dhfg hg fhfgdhfgdh gh gfdhdgf h gfdh dfhg dfgh dfgh fdgh gfd hfd hfd gs fgdf gaaaa</option><option>gdfs gdf g sdfg dfg fdsg dsfg dfs gdfs gds fgs gdfdf gd</option></select>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<br><hr><br>Example 0c: Table with table+tr+td containing a select that should be overflowed and truncated => Use this to align text or form<br>
|
||||
|
||||
<table class="centpercent">
|
||||
<tr>
|
||||
<td class="tagtd maxwidthonsmartphone" style="overflow: hidden; white-space: nowrap;"> <!-- If you remove max-width, the jmobile overflow does not work -->
|
||||
<select name="hidedetails" class="centpercentonsmartphone"><option>aaaaaaaaaaaaaaafd sf sf gfd gfds fsd gfd fhfg hf dhfg hg fhfgdhfgdh gh gfdhdgf h gfdh dfhg dfgh dfgh fdgh gfd hfd hfd gs fgdf gaaaa</option><option>gdfs gdf g sdfg dfg fdsg dsfg dfs gdfs gds fgs gdfdf gd</option></select>
|
||||
</td>
|
||||
<td class="tagtd maxwidthonsmartphone" style="overflow: hidden; white-space: nowrap;"> <!-- If you remove max-width, the jmobile overflow does not work -->
|
||||
<select name="hidedetails" class="centpercentonsmartphone"><option>aaaaaaaaaaaaaaafd sf sf gfd gfds fsd gfd fhfg hf dhfg hg fhfgdhfgdh gh gfdhdgf h gfdh dfhg dfgh dfgh fdgh gfd hfd hfd gs fgdf gaaaa</option><option>gdfs gdf g sdfg dfg fdsg dsfg dfs gdfs gds fgs gdfdf gd</option></select>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
|
||||
|
||||
<br><hr><br>Example 1 : Standard table/thead/tbody/tr/th-td (no class pair/impair on td) => Use this if you need the drag and drop for lines or for long result tables<br>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
/*jQuery(document).ready(function() {
|
||||
$(document).ready(function() {
|
||||
var table = $('#tablelines3').DataTable( {
|
||||
scrollY: "300px",
|
||||
scrollX: true,
|
||||
scrollCollapse: true,
|
||||
paging: false,
|
||||
fixedColumns: {
|
||||
leftColumns: 1,
|
||||
rightColumns: 1
|
||||
}
|
||||
} );
|
||||
} );
|
||||
});*/
|
||||
</script>
|
||||
|
||||
|
||||
<?php
|
||||
include_once DOL_DOCUMENT_ROOT.'/product/class/product.class.php';
|
||||
$productspecimen = new Product($db);
|
||||
$productspecimen->initAsSpecimen();
|
||||
$object = $productspecimen;
|
||||
$param = '';
|
||||
$actioncode = '';
|
||||
$status = '';
|
||||
$filter = '';
|
||||
$filtert = '';
|
||||
$socid = 0;
|
||||
$type = 0;
|
||||
$usergroup = 0;
|
||||
|
||||
$sortfield = 'aaa';
|
||||
$sortorder = 'ASC';
|
||||
$tasksarray = array(1, 2, 3); // To force having several lines
|
||||
$tagidfortablednd = 'tablelines3';
|
||||
if (!isset($moreforfilter)) {
|
||||
$moreforfilter = '';
|
||||
}
|
||||
if (!empty($conf->use_javascript_ajax)) {
|
||||
include DOL_DOCUMENT_ROOT.'/core/tpl/ajaxrow.tpl.php';
|
||||
}
|
||||
|
||||
$nav = '';
|
||||
$nav .= '<form name="dateselect" action="'.$_SERVER["PHP_SELF"].'?mode=show_peruser'.$param.'">';
|
||||
if ($actioncode || GETPOSTISSET('actioncode')) {
|
||||
$nav .= '<input type="hidden" name="actioncode" value="'.$actioncode.'">';
|
||||
}
|
||||
if ($status || GETPOSTISSET('status')) {
|
||||
$nav .= '<input type="hidden" name="status" value="'.$status.'">';
|
||||
}
|
||||
if ($filter) {
|
||||
$nav .= '<input type="hidden" name="filter" value="'.$filter.'">';
|
||||
}
|
||||
if ($filtert) {
|
||||
$nav .= '<input type="hidden" name="filtert" value="'.$filtert.'">';
|
||||
}
|
||||
if ($socid) {
|
||||
$nav .= '<input type="hidden" name="socid" value="'.$socid.'">';
|
||||
}
|
||||
if (isset($showbirthday) && $showbirthday) {
|
||||
$nav .= '<input type="hidden" name="showbirthday" value="1">';
|
||||
}
|
||||
if (isset($pid) && $pid) {
|
||||
$nav .= '<input type="hidden" name="projectid" value="'.$pid.'">';
|
||||
}
|
||||
if ($type) {
|
||||
$nav .= '<input type="hidden" name="type" value="'.$type.'">';
|
||||
}
|
||||
if ($usergroup) {
|
||||
$nav .= '<input type="hidden" name="usergroup" value="'.$usergroup.'">';
|
||||
}
|
||||
$nav .= $form->selectDate($dateselect ?? '', 'dateselect', 0, 0, 1, '', 1, 0);
|
||||
$nav .= ' <input type="submit" name="submitdateselect" class="button" value="'.$langs->trans("Refresh").'">';
|
||||
$nav .= '</form>';
|
||||
|
||||
$limit = 10;
|
||||
print_barre_liste('Title of my list', 12, $_SERVER["PHP_SELF"], '', '', '', 'Text in middle', 20, 500, '', 0, $nav, '', $limit, 0, 0, 1);
|
||||
|
||||
$moreforfilter .= '<div class="divsearchfield">';
|
||||
$moreforfilter .= $langs->trans('This is a select list for a filter A (no combo forced)').': ';
|
||||
$cate_arbo = array('field1' => 'value1a into the select list A', 'field2' => 'value2a');
|
||||
$moreforfilter .= $form->selectarray('search_aaa', $cate_arbo, '', 1, 0, 0, '', 0, 0, 0, '', 'maxwidth300', 0); // List with no js combo
|
||||
$moreforfilter .= '</div>';
|
||||
|
||||
$moreforfilter .= '<div class="divsearchfield">';
|
||||
$moreforfilter .= $langs->trans('This is a select list for a filter B (auto combo)').': ';
|
||||
$cate_arbo = array('field1' => 'value1b into the select list B', 'field2' => 'value2b');
|
||||
$moreforfilter .= $form->selectarray('search_bbb', $cate_arbo, '', 1, 0, 0, '', 0, 0, 0, '', 'maxwidth300', -1); // List with js combo auto
|
||||
$moreforfilter .= '</div>';
|
||||
|
||||
$moreforfilter .= '<div class="divsearchfield">';
|
||||
$moreforfilter .= $langs->trans('This is a select list for a filter C (combo forced)').': ';
|
||||
$cate_arbo = array('field1' => 'value1c into the select list C', 'field2' => 'value2c');
|
||||
$moreforfilter .= $form->selectarray('search_ccc', $cate_arbo, '', 1, 0, 0, '', 0, 0, 0, '', 'maxwidth300', 1); // List with js combo forced
|
||||
$moreforfilter .= '</div>';
|
||||
|
||||
$moreforfilter .= '<div class="divsearchfield">';
|
||||
$moreforfilter .= $langs->trans('This is a select list for a filter D (combo forced)').': ';
|
||||
$cate_arbo = array('field1' => 'value1d into the select list D', 'field2' => 'value2d');
|
||||
$moreforfilter .= $form->selectarray('search_ddd', $cate_arbo, '', 1, 0, 0, '', 0, 0, 0, '', 'maxwidth300', 1); // List with js combo forced
|
||||
$moreforfilter .= '</div>';
|
||||
|
||||
if (!empty($moreforfilter)) {
|
||||
print '<div class="liste_titre liste_titre_bydiv centpercent">';
|
||||
print $moreforfilter;
|
||||
$parameters = array();
|
||||
$reshook = $hookmanager->executeHooks('printFieldPreListTitle', $parameters, $object); // Note that $action and $object may have been modified by hook
|
||||
print $hookmanager->resPrint;
|
||||
print '</div>';
|
||||
}
|
||||
|
||||
?>
|
||||
|
||||
<table class="stripe row-border order-column centpercent tagtable liste<?php echo $moreforfilter ? " listwithfilterbefore" : ""; ?>" id="tablelines3">
|
||||
<thead>
|
||||
<tr class="liste_titre">
|
||||
<?php print getTitleFieldOfList($langs->trans('title1'), 0, $_SERVER["PHP_SELF"], 'aaa', '', '', 'align="left"', $sortfield, $sortorder); ?>
|
||||
<?php print getTitleFieldOfList($langs->trans('title2'), 0, $_SERVER["PHP_SELF"], 'bbb', '', '', 'align="center"', $sortfield, $sortorder); ?>
|
||||
<?php print getTitleFieldOfList($langs->trans('title3'), 0, $_SERVER["PHP_SELF"], 'ccc', '', '', 'align="right"', $sortfield, $sortorder); ?>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="pair"><td><?php echo $productspecimen->getNomUrl(1); ?></td><td class="center">b1</td><td class="tdlineupdown right">c1</td></tr>
|
||||
<tr class="impair nowrap"><td>a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2</td><td align="center">b2</td><td class="tdlineupdown right">c2</td></tr>
|
||||
<tr class="pair"><td>a3</td><td class="center">b3</td><td class="tdlineupdown right">c3</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
<br>
|
||||
|
||||
|
||||
<!--
|
||||
<br><hr><br>Example 1b : Table using tags: table/thead/tbody/tr/th-td + dataTable => Use this for short result tables<br>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
$('#idtableexample2').dataTable( {
|
||||
<?php
|
||||
if ($optioncss == 'print') {
|
||||
print '\'dom\': \'lfrtip\',';
|
||||
} else {
|
||||
print '\'dom\': \'Blfrtip\',';
|
||||
}
|
||||
?>
|
||||
"colReorder": true,
|
||||
'buttons': [
|
||||
'colvis','copy', 'csv', 'excel', 'pdf', 'print'
|
||||
],
|
||||
"sPaginationType": "full_numbers",
|
||||
"lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "<?php echo $langs->trans('All'); ?>"]],
|
||||
"oLanguage": {
|
||||
"sLengthMenu": "<?php echo $langs->trans('Show'); ?> _MENU_ <?php echo $langs->trans('Entries'); ?>",
|
||||
"sSearch": "<?php echo $langs->trans('Search'); ?>:",
|
||||
"sZeroRecords": "<?php echo $langs->trans('NoRecordsToDisplay'); ?>",
|
||||
"sInfoEmpty": "<?php echo $langs->trans('NoEntriesToShow'); ?>",
|
||||
"sInfoFiltered": "(<?php echo $langs->trans('FilteredFrom'); ?> _MAX_ <?php echo $langs->trans('TotalEntries'); ?>)",
|
||||
"sInfo": "<?php echo $langs->trans('Showing'); ?> _START_ <?php echo $langs->trans('To'); ?> _END_ <?php echo $langs->trans('WTOf'); ?> _TOTAL_ <?php echo $langs->trans('Entries'); ?>",
|
||||
"oPaginate": {
|
||||
"sFirst": "<?php echo $langs->transnoentities('First'); ?>",
|
||||
"sLast": "<?php echo $langs->transnoentities('Last'); ?>",
|
||||
"sPrevious": "<?php echo $langs->transnoentities('Previous'); ?>",
|
||||
"sNext": "<?php echo $langs->transnoentities('Next'); ?>"
|
||||
}
|
||||
},
|
||||
"aaSorting": [[0,'desc']],
|
||||
/* To use in ajax mode
|
||||
"bProcessing": true,
|
||||
"stateSave": true,
|
||||
"bServerSide": true,
|
||||
"sAjaxSource": "../ajax.php",
|
||||
"aoColumnDefs": [
|
||||
{ "bSortable": false, "aTargets": [ 2,3,4 ] }
|
||||
],
|
||||
*/
|
||||
})
|
||||
});
|
||||
</script>
|
||||
-->
|
||||
|
||||
|
||||
<br><hr><br>Example 2 : Table using tags: div.tagtable+(div|form).tagtr+div[.tagtd] => Use this for tables that need to have a different form for each line, but AVOID IT if possible (drag and drop of lines does not work for this case, also height of title can't be forced to a minimum)<br><br>
|
||||
|
||||
|
||||
<?php
|
||||
$tasksarray = array(1, 2, 3); // To force having several lines
|
||||
$tagidfortablednd = 'tablelines';
|
||||
if (!empty($conf->use_javascript_ajax)) {
|
||||
include DOL_DOCUMENT_ROOT.'/core/tpl/ajaxrow.tpl.php';
|
||||
}
|
||||
?>
|
||||
<div class="tagtable centpercent liste_titre_bydiv" id="tablelines">
|
||||
<div class="tagtr liste_titre">
|
||||
<div class="tagtd">Title A<input type="hidden" name="cartitem" value="3"></div>
|
||||
<div class="tagtd">title B</div>
|
||||
<div class="tagtd">title C</div>
|
||||
<div class="tagtd">title D</div>
|
||||
</div>
|
||||
<div class="pair tagtr">
|
||||
<div class="tagtd">line4<input type="hidden" name="cartitem" value="3"></div>
|
||||
<div class="tagtd">dfsdf</div>
|
||||
<div class="tagtd"><input name="count" value="4" class="maxwidth50"></div>
|
||||
<div class="tagtd tdlineupdown">bbbb</div>
|
||||
</div>
|
||||
<div class="impair tagtr">
|
||||
<div class="tagtd">line5<input type="hidden" name="cartitemb" value="3"></div>
|
||||
<div class="tagtd">dfsdf</div>
|
||||
<div class="tagtd"><input name="countb" value="4" class="maxwidth50"></div>
|
||||
<div class="tagtd tdlineupdown">bbbb</div>
|
||||
</div>
|
||||
<div class="pair tagtr">
|
||||
<div class="tagtd">line6<input type="hidden" name="cartitem" value="3"></div>
|
||||
<div class="tagtd">jghjgh</div>
|
||||
<div class="tagtd">5</div>
|
||||
<div class="tagtd tdlineupdown">lll</div>
|
||||
</div>
|
||||
<!-- Using form into div make Firefox crazy (page loading does not end) -->
|
||||
<!-- <form class="liste_titre" method="POST" action="1.php">
|
||||
<div>line1<input type="hidden" name="cartitem" value="1"></div>
|
||||
<div><label><input type="checkbox" name="hidedetails" value="2"> A checkbox inside a cell</label></div>
|
||||
<div><input name="count" value="4"></div>
|
||||
<div><input type="submit" name="count2" class="button noshadow" value="aaa"></div>
|
||||
</form>
|
||||
<form class="impair" method="POST" action="2.php">
|
||||
<div>line2<input type="hidden" name="cartitem" value="2"></div>
|
||||
<div><select name="hidedetails"><option>aaaaaaaaaaaaaaafd sf sf gfd gfd gs fgdf gaaaa</option><option>gdfs gdf g sdfg dfg fdsg dsfg dfs gdfs gds fgs gdfdf gd</option></select></div>
|
||||
<div><input name="countb" value="4"></div>
|
||||
<div class="tdlineupdown"><input type="submit" value="xxx" class="button"></div>
|
||||
</form>-->
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<?php
|
||||
if (!empty($usedolheader)) {
|
||||
llxFooter();
|
||||
} else { ?>
|
||||
</body>
|
||||
<?php } ?>
|
||||
|
||||
</html>
|
||||
@@ -7,7 +7,7 @@ define("NOCSRFCHECK", 1); // We accept to go on this page from external web site
|
||||
|
||||
// Load Dolibarr environment
|
||||
require '../../main.inc.php';
|
||||
include_once DOL_DOCUMENT_ROOT.'/core/lib/date.lib.php';
|
||||
require_once DOL_DOCUMENT_ROOT.'/core/lib/date.lib.php';
|
||||
|
||||
// Security
|
||||
if ($dolibarr_main_prod) {
|
||||
176
htdocs/admin/tools/ui/content/tables.php
Normal file
176
htdocs/admin/tools/ui/content/tables.php
Normal file
@@ -0,0 +1,176 @@
|
||||
<?php
|
||||
/*
|
||||
* Copyright (C) 2024 Anthony Damhet <a.damhet@progiseize.fr>
|
||||
*
|
||||
* This program and files/directory inner it is free software: you can
|
||||
* redistribute it and/or modify it under the terms of the
|
||||
* GNU Affero General Public License (AGPL) 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 AGPL for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU AGPL
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/agpl-3.0.html>.
|
||||
*/
|
||||
|
||||
$res=0;
|
||||
if (! $res && file_exists("../../main.inc.php")) : $res=@include '../../main.inc.php';
|
||||
endif;
|
||||
if (! $res && file_exists("../../../main.inc.php")) : $res=@include '../../../main.inc.php';
|
||||
endif;
|
||||
if (! $res && file_exists("../../../../main.inc.php")) : $res=@include '../../../../main.inc.php';
|
||||
endif;
|
||||
|
||||
// Protection if external user
|
||||
if ($user->socid > 0) : accessforbidden();
|
||||
endif;
|
||||
|
||||
// Includes
|
||||
dol_include_once('admin/tools/ui/class/documentation.class.php');
|
||||
|
||||
// Load documentation translations
|
||||
$langs->load('uxdocumentation');
|
||||
|
||||
// Hooks
|
||||
$hookmanager->initHooks(array('uidocumentation'));
|
||||
|
||||
//
|
||||
$documentation = new Documentation($db);
|
||||
|
||||
// Output html head + body - Param is Title
|
||||
$documentation->docHeader('Tables');
|
||||
|
||||
// Set view for menu and breadcrumb
|
||||
// Menu must be set in constructor of documentation class
|
||||
$documentation->view = array('Content','Tables');
|
||||
|
||||
// Output sidebar
|
||||
$documentation->showSidebar(); ?>
|
||||
|
||||
<div class="doc-wrapper">
|
||||
|
||||
<?php $documentation->showBreadCrumb(); ?>
|
||||
|
||||
<div class="doc-content-wrapper">
|
||||
|
||||
<h1 class="documentation-title"><?php echo $langs->trans('DocTableTitle'); ?></h1>
|
||||
<p class="documentation-text"><?php echo $langs->trans('DocTableMainDescription'); ?></p>
|
||||
|
||||
<!-- Summary -->
|
||||
<?php $documentation->showSummary(); ?>
|
||||
|
||||
<!-- Basic usage -->
|
||||
<div class="documentation-section" id="tablesection-basicusage">
|
||||
|
||||
<h2 class="documentation-title"><?php echo $langs->trans('DocTableBasic'); ?></h2>
|
||||
|
||||
<p class="documentation-text"><?php echo $langs->trans('DocTableBasicDescription'); ?></p>
|
||||
<div class="documentation-example">
|
||||
<div class="div-table-responsive">
|
||||
<table class="tagtable nobottomiftotal liste">
|
||||
<tr class="liste_titre">
|
||||
<th class="wrapcolumntitle left liste_titre" title="First Name">First Name</th>
|
||||
<th class="wrapcolumntitle left liste_titre" title="Last Name">Last Name</th>
|
||||
<th class="wrapcolumntitle center liste_titre" title="Age">Age</th>
|
||||
<th class="wrapcolumntitle right liste_titre" title="Country">Country</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="left">John</td>
|
||||
<td class="left">Doe</td>
|
||||
<td class="center">37</td>
|
||||
<td class="right">U.S.A</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="left">Jack</td>
|
||||
<td class="left">Sparrow</td>
|
||||
<td class="center">29</td>
|
||||
<td class="right">Caribbean</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="left">Sacha</td>
|
||||
<td class="left">Ketchum</td>
|
||||
<td class="center">16</td>
|
||||
<td class="right">Kanto</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="left">Albert</td>
|
||||
<td class="left">Einstein</td>
|
||||
<td class="center">72</td>
|
||||
<td class="right">Germany</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
$lines = array(
|
||||
);
|
||||
echo $documentation->showCode($lines); ?>
|
||||
</div>
|
||||
|
||||
<!-- Basic usage -->
|
||||
<div class="documentation-section" id="tablesection-withfilters">
|
||||
|
||||
<h2 class="documentation-title"><?php echo $langs->trans('DocTableWithFilters'); ?></h2>
|
||||
|
||||
<p class="documentation-text"><?php echo $langs->trans('DocTableWithFiltersDescription'); ?></p>
|
||||
<div class="documentation-example">
|
||||
<div class="div-table-responsive">
|
||||
<table class="tagtable nobottomiftotal liste">
|
||||
<tr class="liste_titre_filter">
|
||||
<td><input></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr class="liste_titre">
|
||||
<th class="wrapcolumntitle left liste_titre" title="First Name">First Name</th>
|
||||
<th class="wrapcolumntitle left liste_titre" title="Last Name">Last Name</th>
|
||||
<th class="wrapcolumntitle center liste_titre" title="Age">Age</th>
|
||||
<th class="wrapcolumntitle right liste_titre" title="Country">Country</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="left">John</td>
|
||||
<td class="left">Doe</td>
|
||||
<td class="center">37</td>
|
||||
<td class="right">U.S.A</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="left">Jack</td>
|
||||
<td class="left">Sparrow</td>
|
||||
<td class="center">29</td>
|
||||
<td class="right">Caribbean</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="left">Sacha</td>
|
||||
<td class="left">Ketchum</td>
|
||||
<td class="center">16</td>
|
||||
<td class="right">Kanto</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="left">Albert</td>
|
||||
<td class="left">Einstein</td>
|
||||
<td class="center">72</td>
|
||||
<td class="right">Germany</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
$lines = array(
|
||||
);
|
||||
echo $documentation->showCode($lines); ?>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<?php
|
||||
// Output close body + html
|
||||
$documentation->docFooter();
|
||||
?>
|
||||
85
htdocs/admin/tools/ui/css/documentation.css
Normal file
85
htdocs/admin/tools/ui/css/documentation.css
Normal file
@@ -0,0 +1,85 @@
|
||||
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;
|
||||
}
|
||||
|
||||
/***************************/
|
||||
/* SIDEBAR */
|
||||
/***************************/
|
||||
.doc-sidebar {background: rgb(38,60,92); position: fixed; max-width: 260px; width: 260px; top: 0; left: 0;bottom:0; box-shadow: 6px 0 12px rgba(0, 0, 0, 0.1);height: 100%;}
|
||||
|
||||
/* Logo */
|
||||
.doc-sidebar .sidebar-logo {background: #fff;width: 100%;display: flex;height: 75px;}
|
||||
.doc-sidebar .sidebar-logo img {height:50px;width: auto;display: block;margin:auto;}
|
||||
|
||||
/* Navigation */
|
||||
.doc-sidebar nav {height: calc(100% - 85px);overflow-y: auto;box-sizing: border-box;}
|
||||
.doc-sidebar nav::-webkit-scrollbar {width: 6px;}
|
||||
.doc-sidebar nav::-webkit-scrollbar-track {background-color: rgba(38,60,92,1);}
|
||||
.doc-sidebar nav::-webkit-scrollbar-thumb {background-color: rgba(38,60,92,1);}
|
||||
.doc-sidebar nav:hover::-webkit-scrollbar-thumb {background-color: rgba(0,0,0,0.25);}
|
||||
|
||||
.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 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;}
|
||||
.doc-sidebar nav ul li a:hover i.submenu-toggle {color: rgba(255,255,255,1);}
|
||||
.doc-sidebar nav ul li a .label {flex: 1;}
|
||||
.doc-sidebar nav ul li a:hover {color:#fff;}
|
||||
.doc-sidebar nav ul li.active a {color: rgba(255, 255, 255, 1);}
|
||||
.doc-sidebar nav ul li.active a i.submenu-toggle {transform: rotate(90deg);color: rgba(255, 255, 255, 1);}
|
||||
|
||||
.doc-sidebar nav ul li.li-withsubmenu ul {margin: 0 0 0 16px;display: none;}
|
||||
.doc-sidebar nav ul li.li-withsubmenu ul li {}
|
||||
.doc-sidebar nav ul li.li-withsubmenu ul li a {padding: 12px 24px;}
|
||||
.doc-sidebar nav ul li.li-withsubmenu.active ul {display: block;}
|
||||
.doc-sidebar nav ul li.li-withsubmenu.active ul li {}
|
||||
.doc-sidebar nav ul li.li-withsubmenu.active ul li a {color: rgba(255, 255, 255, .5);}
|
||||
.doc-sidebar nav ul li.li-withsubmenu.active ul li a:hover {color: rgba(255, 255, 255, 1);}
|
||||
.doc-sidebar nav ul li.li-withsubmenu.active ul li.active a {color: rgba(255, 255, 255, 1);}
|
||||
.doc-sidebar nav ul li.li-withsubmenu.active ul li a i.submenu-toggle {color: rgba(255, 255, 255, .25);transform: rotate(0);}
|
||||
.doc-sidebar nav ul li.li-withsubmenu.active ul li.li-withsubmenu ul {display: none;}
|
||||
.doc-sidebar nav ul li.li-withsubmenu.active ul li.li-withsubmenu.active ul {display: block;}
|
||||
|
||||
/***************************/
|
||||
/* MAIN WRAPPER */
|
||||
/***************************/
|
||||
.doc-wrapper {margin: 0;margin-left: 260px;}
|
||||
|
||||
/* Breadcrumb */
|
||||
.doc-wrapper .doc-breadcrumbs {display: flex;margin: 0;padding: 0;list-style: none;background: #fff;height: 75px;box-sizing: border-box;}
|
||||
.doc-wrapper .doc-breadcrumbs ul {display: flex;margin: auto 32px;padding: 0;list-style: none;}
|
||||
.doc-wrapper .doc-breadcrumbs ul li {color:rgba(64, 64, 64, 1);}
|
||||
.doc-wrapper .doc-breadcrumbs ul li.breadcrumb-item:not(:last-child):after {display: inline-block;content:'/';margin: 0 8px;}
|
||||
.doc-wrapper .doc-breadcrumbs ul li a {color: rgba(38,60,92,1);text-decoration: none;font-weight: 500;}
|
||||
|
||||
.doc-wrapper .doc-content-wrapper {padding: 24px 32px;max-width: 960px;box-sizing: border-box; }
|
||||
.doc-wrapper .doc-content-wrapper h1.documentation-title {margin: 0;margin-bottom:16px;padding: 0;color: rgb(38,60,92);}
|
||||
.doc-wrapper .doc-content-wrapper p.documentation-text {margin: 0;margin-bottom:16px;line-height: 1.6;color:rgba(64, 64, 64, 1);}
|
||||
|
||||
.doc-wrapper .doc-content-wrapper .warning p.documentation-text {color: #887711;}
|
||||
.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 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);}
|
||||
.doc-wrapper .doc-content-wrapper ul.documentation-summary li {list-style: disc;margin-left: 16px;}
|
||||
.doc-wrapper .doc-content-wrapper ul.documentation-summary li ul {margin: 0;padding: 0 ;color: rgba(0, 0, 0, .25);}
|
||||
.doc-wrapper .doc-content-wrapper ul.documentation-summary li a {color: rgb(38, 60, 92); text-decoration: none;font-weight: 500;}
|
||||
.doc-wrapper .doc-content-wrapper ul.documentation-summary li a:hover {color: rgb(0, 123, 140);}
|
||||
|
||||
.doc-wrapper .doc-content-wrapper ul.documentation-summary li.summary-title {margin: 0;padding: 0;list-style: none;}
|
||||
.doc-wrapper .doc-content-wrapper ul.documentation-summary li.summary-title h3 {color: rgb(38,60,92);margin: 12px 0 6px 0;padding: 0;font-size: 1.2em;text-decoration: underline;}
|
||||
|
||||
/* Documentation section */
|
||||
.doc-wrapper .doc-content-wrapper .documentation-section {background: #fff;padding: 16px;border-radius: 4px;margin-bottom: 24px;}
|
||||
.doc-wrapper .doc-content-wrapper .documentation-section h2.documentation-title {margin: 0;margin-bottom:16px;padding: 0;color: rgb(38,60,92);}
|
||||
.doc-wrapper .doc-content-wrapper .documentation-section .documentation-example {border:1px dashed #ccc;box-sizing: border-box;padding: 16px;margin-bottom: 16px;}
|
||||
.doc-wrapper .doc-content-wrapper .documentation-section .documentation-code {background: var(--colorbacklinepairchecked);border:1px dashed #ccc;box-sizing: border-box;padding: 16px;margin-bottom: 16px;overflow: auto;}
|
||||
.doc-wrapper .doc-content-wrapper .documentation-section .documentation-code pre {margin: 0;padding: 0;tab-size: 24px;}
|
||||
|
||||
/* Documentation scroll indicator */
|
||||
#documentation-scrollwrapper {height: 5px;position: fixed;bottom: 0;left: 260px;right:0;z-index: 99;}
|
||||
#documentation-scroll {background: rgb(0, 123, 140);height: 5px;position: absolute;top: 0;left:0}
|
||||
64
htdocs/admin/tools/ui/index.php
Normal file
64
htdocs/admin/tools/ui/index.php
Normal file
@@ -0,0 +1,64 @@
|
||||
<?php
|
||||
/*
|
||||
* Copyright (C) 2024 Anthony Damhet <a.damhet@progiseize.fr>
|
||||
*
|
||||
* This program and files/directory inner it is free software: you can
|
||||
* redistribute it and/or modify it under the terms of the
|
||||
* GNU Affero General Public License (AGPL) 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 AGPL for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU AGPL
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/agpl-3.0.html>.
|
||||
*/
|
||||
|
||||
$res=0;
|
||||
if (! $res && file_exists("../main.inc.php")) : $res=@include '../main.inc.php';
|
||||
endif;
|
||||
if (! $res && file_exists("../../main.inc.php")) : $res=@include '../../main.inc.php';
|
||||
endif;
|
||||
if (! $res && file_exists("../../../main.inc.php")) : $res=@include '../../../main.inc.php';
|
||||
endif;
|
||||
|
||||
// Protection if external user
|
||||
if ($user->socid > 0) : accessforbidden();
|
||||
endif;
|
||||
|
||||
// Includes
|
||||
dol_include_once('admin/tools/ui/class/documentation.class.php');
|
||||
|
||||
// Load documentation translations
|
||||
$langs->load('uxdocumentation');
|
||||
|
||||
//
|
||||
$documentation = new Documentation($db);
|
||||
|
||||
// Output html head + body - Param is Title
|
||||
$documentation->docHeader();
|
||||
|
||||
// Set view for menu and breadcrumb
|
||||
$documentation->view = array('DocumentationHome');
|
||||
|
||||
// Output sidebar
|
||||
$documentation->showSidebar(); ?>
|
||||
|
||||
<div class="doc-wrapper">
|
||||
|
||||
<?php $documentation->showBreadCrumb(); ?>
|
||||
|
||||
<div class="doc-content-wrapper">
|
||||
<?php echo $langs->trans('WelcomeToDocumentation'); ?>
|
||||
<?php $documentation->showSummary(1, 1); ?>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<?php
|
||||
// Output close body + html
|
||||
$documentation->docFooter();
|
||||
?>
|
||||
31
htdocs/admin/tools/ui/js/documentation.js
Normal file
31
htdocs/admin/tools/ui/js/documentation.js
Normal file
@@ -0,0 +1,31 @@
|
||||
// MENU
|
||||
let navmenu = document.querySelector('.doc-sidebar nav ul');
|
||||
let navmenulinks = navmenu.querySelectorAll('a.link-withsubmenu');
|
||||
if(navmenulinks.length > 0) {
|
||||
navmenulinks.forEach(
|
||||
function (menulink) {
|
||||
menulink.addEventListener(
|
||||
'click', function (e) {
|
||||
e.preventDefault();
|
||||
if(menulink.parentNode.classList.contains('active')) {
|
||||
menulink.parentNode.classList.remove('active');
|
||||
} else {
|
||||
menulink.parentNode.classList.add('active');
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// VIEW SCROLL
|
||||
window.onscroll = function () {
|
||||
showscroll()
|
||||
};
|
||||
function showscroll()
|
||||
{
|
||||
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
|
||||
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
|
||||
var scrolled = (winScroll / height) * 100;
|
||||
document.getElementById("documentation-scroll").style.width = scrolled + "%";
|
||||
}
|
||||
81
htdocs/langs/en_US/uxdocumentation.lang
Normal file
81
htdocs/langs/en_US/uxdocumentation.lang
Normal file
@@ -0,0 +1,81 @@
|
||||
BackToDolibarr=Go back to Dolibarr
|
||||
WelcomeToDocumentation=Welcome to UI Documentation. This section is under developpement,
|
||||
DocumentationHome=UI Documentation
|
||||
DocBasicUsage=Basic usage
|
||||
|
||||
# Components
|
||||
DocComponentsTitle=Components
|
||||
DocComponentsMainDescription=Components section description is under developpment
|
||||
|
||||
# Badges
|
||||
DocBadgeTitle=Badges
|
||||
DocBadgeMainDescription=Documentation and examples for badges, our small count and labeling component.
|
||||
DocBadgeScaleDescription=Badges scale to match the size of the immediate parent element by using relative font sizing and em units.
|
||||
DocBadgeUseOnLinksOrButtons=Badges can be used as part of links or buttons to provide a counter.
|
||||
DocBadgeWarningAriaHidden1=Note that depending on how they are used, badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply be presented with the content of the badge. Depending on the specific situation, these badges may seem like random additional words or numbers at the end of a sentence, link, or button.
|
||||
DocBadgeWarningAriaHidden2=Unless the context is clear (as with the “Notifications” example, where it is understood that the “4” is the number of notifications), consider including additional context with a visually hidden piece of additional text.
|
||||
DocBadgeWarningAriaHidden3=Remember to use aria-label attribute for accessibility in Dolibarr. Don't forget to use aria-hidden on icons included in badges
|
||||
DocBadgeContextualVariations=Contextual variations
|
||||
DocBadgeContextualVariationsDescription=Add any of the below mentioned modifier classes to change the appearance of a badge.
|
||||
DocBadgeContextualVariationsWarning1=Conveying meaning to assistive technologies
|
||||
DocBadgeContextualVariationsWarning2=Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only class.
|
||||
DocBadgeDefaultStatus=Default status
|
||||
DocBadgeDefaultStatusDescription=Add any of the below mentioned modifier classes to change the appearance of a badge to be linked to a default status.
|
||||
DocBadgePillBadges=Pill badges
|
||||
DocBadgePillBadgesDescription=Use the .badge-pill modifier class to make badges more rounded (with a larger border-radius and additional horizontal padding).
|
||||
DocBadgeDotBadges=Dot badges
|
||||
DocBadgeDotBadgesDescription=.badge-dot modifier class to make badges circle.
|
||||
DocBadgeLinks=Links
|
||||
DocBadgeLinksDescription=Using the contextual .badge-* classes on an <a> element quickly provide actionable badges with hover and focus states.
|
||||
DocBadgeHelper=Use badge helper function
|
||||
DocBadgeHelperDescription=Using the dolGetBadge function provide in core/lib/functions.lib.php. <br><b>This function is recommended for code uniformisation and easy maintain</b>
|
||||
|
||||
# Buttons
|
||||
DocButtonsTitle=Buttons for action
|
||||
DocButtonsMainDescription=Documentation and examples for buttons.
|
||||
DocButtonBasicUsageDescription=Display a button depending on the action to be performed and user rights
|
||||
DocButtonModal=Buttons with confirm dialog
|
||||
DocButtonModalDescription=You can add a confirm dialog on all types of buttons but it will not work if user has no rights
|
||||
DocButtonSubmenu=Dropdown Buttons
|
||||
DocButtonSubmenuDescription=Fill the $url parameter with an array of url in order to create a dropdown button.
|
||||
|
||||
#Tables
|
||||
DocTableTitle=Tables
|
||||
DocTableMainDescription=
|
||||
DocTableBasic=Table
|
||||
DocTableBasicDescription=Table description
|
||||
DocTableWithFilters=Filters
|
||||
DocTableWithFiltersDescription=Filters descriptions
|
||||
|
||||
#Progress bars
|
||||
DocProgressBarsTitle = Progress bars
|
||||
DocProgressBarsMainDescription = Documentation and examples for using progress bars featuring support for stacked bars, animated backgrounds, and text labels.
|
||||
DocProgressBarsDescription = Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don’t use the HTML5 <progress> element, ensuring you can stack progress bars, animate them, and place text labels over them.
|
||||
DocProgressCanBeSpaced = You can add space separation by adding class .spaced
|
||||
DocColorVariants = Colors
|
||||
DocColorVariantsDesc = Use color utility classes to change the appearance of individual progress bars.
|
||||
DocStripedVariants = Striped
|
||||
DocStripedVariantsDesc = Add .progress-bar-striped to any .progress-bar to apply a stripe via CSS gradient over the progress bar’s background color.
|
||||
DocOtherVariants = Other
|
||||
DocOtherVariantsDesc =
|
||||
|
||||
# Set Event Message
|
||||
DocSetEventMessageTitle = Event Message
|
||||
DocSetEventMessageMainDescription = Documentation and examples for event message
|
||||
DocSetEventMessageContextualVariationsDescription = Fill the parameter "style" of function to change color of event message
|
||||
DocSetEventMessageContextualVariations = Contextual variations
|
||||
DocSetEventMessageDescription = Display one message or several messages
|
||||
DocSetEventMessageDisplayMessage = Display message
|
||||
DocSetEventMessageDisplayMessages = Display messages
|
||||
DocSetEventMessageDisplayOKMessage = Display "OK" message
|
||||
DocSetEventMessageDisplayWarningMessage = Display "Warning" message
|
||||
DocSetEventMessageDisplayErrorMessage = Display "Error" message
|
||||
DocSetEventMessageOK = OK Message
|
||||
DocSetEventMessageWarning = Warning Message
|
||||
DocSetEventMessageError = Error Message
|
||||
DocSetEventMessageUnique = Unique Message
|
||||
DocSetEventMessage = Message #%s
|
||||
|
||||
DocButtonIconsLowEmphasis = Low emphasis icon buttons
|
||||
DocButtonIconsDescriptionLowEmphasis = An icon button with low emphasis is typically a button that includes only an icon (no accompanying text) and has minimal styling to make it unobtrusive. Icon buttons with low emphasis are ideal for secondary or tertiary actions, like clear field, fill field, bookmarking, or sharing, especially in interfaces that have more prominent primary actions (like "Submit" or "Continue").
|
||||
DocButtonIconsForTitle = Buttons for list title
|
||||
@@ -1,338 +0,0 @@
|
||||
<?php
|
||||
//define("NOLOGIN",1); // This means this output page does not require to be logged.
|
||||
define("NOCSRFCHECK", 1); // We accept to go on this page from external web site.
|
||||
if (!defined('NOSESSION')) {
|
||||
define('NOSESSION', '1');
|
||||
}
|
||||
|
||||
require_once '../../main.inc.php';
|
||||
require_once DOL_DOCUMENT_ROOT.'/core/lib/functions.lib.php';
|
||||
|
||||
if ($dolibarr_main_prod) {
|
||||
accessforbidden('Access forbidden when $dolibarr_main_prod is set to 1');
|
||||
}
|
||||
|
||||
/*
|
||||
* View
|
||||
*/
|
||||
|
||||
header("Content-type: text/html; charset=UTF8");
|
||||
|
||||
// Security options
|
||||
header("X-Content-Type-Options: nosniff"); // With the nosniff option, if the server says the content is text/html, the browser will render it as text/html (note that most browsers now force this option to on)
|
||||
header("X-Frame-Options: SAMEORIGIN"); // Frames allowed only if on same domain (stop some XSS attacks)
|
||||
|
||||
?>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Documentation and examples for theme.">
|
||||
|
||||
<link href="<?php echo DOL_URL_ROOT ?>/theme/eldy/style.css.php" rel="stylesheet">
|
||||
</head>
|
||||
<body class="docpage" style="padding: 20px;">
|
||||
|
||||
<main role="main" >
|
||||
<h1 class="bd-title" id="content">Badges</h1>
|
||||
<p class="bd-lead">Documentation and examples for badges, our small count and labeling component.</p>
|
||||
|
||||
<h2 id="example">Example</h2>
|
||||
|
||||
<p>Badges scale to match the size of the immediate parent element by using relative font sizing and em units.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<h1>Example heading <span class="badge badge-secondary">New</span></h1>
|
||||
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
|
||||
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
|
||||
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
|
||||
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
|
||||
<h6>Example heading <span class="badge badge-secondary">New</span></h6>
|
||||
</div>
|
||||
|
||||
<figure class="highlight">
|
||||
<pre>
|
||||
|
||||
<h1>Example heading <span class="badge badge-secondary">New</span></h1>
|
||||
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
|
||||
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
|
||||
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
|
||||
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
|
||||
<h6>Example heading <span class="badge badge-secondary">New</span></h6>
|
||||
|
||||
</pre>
|
||||
</figure>
|
||||
|
||||
<p>Badges can be used as part of links or buttons to provide a counter.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<button type="button" class="button">
|
||||
Notifications <span class="badge badge-primary">4</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<figure class="highlight"><pre>
|
||||
<button type="button" class="button">
|
||||
Notifications <span class="badge badge-primary">4</span>
|
||||
</button>
|
||||
</pre></figure>
|
||||
|
||||
<div class="warning">
|
||||
<p>Note that depending on how they are used, badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply be presented with the content of the badge. Depending on the specific situation, these badges may seem like random additional words or numbers at the end of a sentence, link, or button.</p>
|
||||
|
||||
<p>Unless the context is clear (as with the “Notifications” example, where it is understood that the “4” is the number of notifications), consider including additional context with a visually hidden piece of additional text.</p>
|
||||
|
||||
<p><strong>Remember to use aria-label attribute for accessibility in Dolibarr. Don't forget to use aria-hidden on icons included in badges</strong></p>
|
||||
</div>
|
||||
|
||||
<div class="bd-example">
|
||||
<button type="button" class="button">
|
||||
Profile <span class="badge badge-primary" aria-label="9 unread messages" >9</span>
|
||||
<span class="sr-only">unread messages</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<figure class="highlight">
|
||||
<pre>
|
||||
|
||||
|
||||
<button type="button" class="btn btn-primary">
|
||||
Profile <span class="badge badge-light" aria-label="9 unread messages" >9</span>
|
||||
<span class="sr-only">unread messages</span>
|
||||
</button>
|
||||
|
||||
|
||||
</pre>
|
||||
</figure>
|
||||
|
||||
<h2 id="contextual-variations">Contextual variations</h2>
|
||||
|
||||
<p>Add any of the below mentioned modifier classes to change the appearance of a badge.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
|
||||
<span class="badge badge-primary">Primary</span>
|
||||
<span class="badge badge-secondary">Secondary</span>
|
||||
<span class="badge badge-success">Success</span>
|
||||
<span class="badge badge-danger">Danger</span>
|
||||
<span class="badge badge-warning">Warning</span>
|
||||
<span class="badge badge-info">Info</span>
|
||||
<span class="badge badge-light">Light</span>
|
||||
<span class="badge badge-dark">Dark</span>
|
||||
</div>
|
||||
|
||||
<figure class="highlight">
|
||||
<pre>
|
||||
|
||||
<span class="badge badge-primary">Primary</span>
|
||||
<span class="badge badge-secondary">Secondary</span>
|
||||
<span class="badge badge-success">Success</span>
|
||||
<span class="badge badge-danger">Danger</span>
|
||||
<span class="badge badge-warning">Warning</span>
|
||||
<span class="badge badge-info">Info</span>
|
||||
<span class="badge badge-light">Light</span>
|
||||
<span class="badge badge-dark">Dark</span>
|
||||
|
||||
</pre>
|
||||
</figure>
|
||||
|
||||
<div class="warning">
|
||||
<h5 id="conveying-meaning-to-assistive-technologies">Conveying meaning to assistive technologies</h5>
|
||||
|
||||
<p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only class.</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<h2 id="contextual-variations">Default status</h2>
|
||||
|
||||
<p>Add any of the below mentioned modifier classes to change the appearance of a badge to be linked to a default status.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<?php for ($i = 0; $i <= 9; $i++) : ?>
|
||||
<span class="badge badge-status<?php print $i; ?>" >status-<?php print $i; ?></span>
|
||||
<?php endfor; ?>
|
||||
</div>
|
||||
|
||||
<figure class="highlight"><pre><pre>
|
||||
<?php for ($i = 0; $i <= 9; $i++) : ?>
|
||||
<span class="badge badge-status<?php print $i; ?>" >status<?php print $i; ?></span>
|
||||
<?php endfor; ?>
|
||||
</pre></figure>
|
||||
|
||||
|
||||
<h2 id="pill-badges">Pill badges</h2>
|
||||
|
||||
<p>Use the .badge-pill modifier class to make badges more rounded (with a larger border-radius and additional horizontal padding).</p>
|
||||
|
||||
<div class="bd-example">
|
||||
|
||||
<span class="badge badge-pill badge-primary">Primary</span>
|
||||
<span class="badge badge-pill badge-secondary">Secondary</span>
|
||||
<span class="badge badge-pill badge-success">Success</span>
|
||||
<span class="badge badge-pill badge-danger">Danger</span>
|
||||
<span class="badge badge-pill badge-warning">Warning</span>
|
||||
<span class="badge badge-pill badge-info">Info</span>
|
||||
<span class="badge badge-pill badge-light">Light</span>
|
||||
<span class="badge badge-pill badge-dark">Dark</span>
|
||||
|
||||
<?php for ($i = 0; $i <= 9; $i++) : ?>
|
||||
<span class="badge badge-pill badge-status<?php print $i; ?>" >status<?php print $i; ?></span>
|
||||
<?php endfor; ?>
|
||||
|
||||
</div>
|
||||
|
||||
<figure class="highlight">
|
||||
<pre>
|
||||
|
||||
<span class="badge badge-pill badge-primary">Primary</span>
|
||||
<span class="badge badge-pill badge-secondary">Secondary</span>
|
||||
<span class="badge badge-pill badge-success">Success</span>
|
||||
<span class="badge badge-pill badge-danger">Danger</span>
|
||||
<span class="badge badge-pill badge-warning">Warning</span>
|
||||
<span class="badge badge-pill badge-info">Info</span>
|
||||
<span class="badge badge-pill badge-light">Light</span>
|
||||
<span class="badge badge-pill badge-dark">Dark</span>
|
||||
<?php for ($i = 0; $i <= 9; $i++) : ?>
|
||||
<span class="badge badge-pill badge-status<?php print $i; ?>" >status<?php print $i; ?></span>
|
||||
<?php endfor; ?>
|
||||
</pre></figure>
|
||||
|
||||
|
||||
|
||||
<h2 id="dot-badges">Dot badges</h2>
|
||||
|
||||
<p>.dot-pill modifier class to make badges circle.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
|
||||
<span class="badge badge-dot badge-primary"></span>
|
||||
<span class="badge badge-dot badge-secondary"></span>
|
||||
<span class="badge badge-dot badge-success"></span>
|
||||
<span class="badge badge-dot badge-danger"></span>
|
||||
<span class="badge badge-dot badge-warning"></span>
|
||||
<span class="badge badge-dot badge-info"></span>
|
||||
<span class="badge badge-dot badge-light"></span>
|
||||
<span class="badge badge-dot badge-dark"></span>
|
||||
|
||||
<?php for ($i = 0; $i <= 9; $i++) : ?>
|
||||
<span class="badge badge-dot badge-status<?php print $i; ?>" ></span>
|
||||
<?php endfor; ?>
|
||||
|
||||
</div>
|
||||
|
||||
<figure class="highlight">
|
||||
<pre>
|
||||
|
||||
<span class="badge badge-dot badge-primary"></span>
|
||||
<span class="badge badge-dot badge-secondary"></span>
|
||||
<span class="badge badge-dot badge-success"></span>
|
||||
<span class="badge badge-dot badge-danger"></span>
|
||||
<span class="badge badge-dot badge-warning"></span>
|
||||
<span class="badge badge-dot badge-info"></span>
|
||||
<span class="badge badge-dot badge-light"></span>
|
||||
<span class="badge badge-dot badge-dark"></span>
|
||||
<?php for ($i = 0; $i <= 9; $i++) : ?>
|
||||
<span class="badge badge-dot badge-status<?php print $i; ?>" ></span>
|
||||
<?php endfor; ?>
|
||||
</pre></figure>
|
||||
|
||||
|
||||
<div class="warning">
|
||||
<p>Note that depending on how they are used, badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply be presented with the content of the badge. Depending on the specific situation, these badges may seem like random additional words or numbers at the end of a sentence, link, or button.</p>
|
||||
|
||||
<p>Unless the context is clear (as with the “Notifications” example, where it is understood that the “4” is the number of notifications), consider including additional context with a visually hidden piece of additional text.</p>
|
||||
|
||||
<p><strong>Remember to use aria-label attribute for accessibility in Dolibarr. Don't forget to use aria-hidden on icons included in badges</strong></p>
|
||||
</div>
|
||||
|
||||
|
||||
<h2 id="links">Links</h2>
|
||||
|
||||
<p>Using the contextual .badge-* classes on an <a> element quickly provide <em>actionable</em> badges with hover and focus states.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
|
||||
<a href="#" class="badge badge-primary">Primary</a>
|
||||
<a href="#" class="badge badge-secondary">Secondary</a>
|
||||
<a href="#" class="badge badge-success">Success</a>
|
||||
<a href="#" class="badge badge-danger">Danger</a>
|
||||
<a href="#" class="badge badge-warning">Warning</a>
|
||||
<a href="#" class="badge badge-info">Info</a>
|
||||
<a href="#" class="badge badge-light">Light</a>
|
||||
<a href="#" class="badge badge-dark">Dark</a>
|
||||
<?php for ($i = 0; $i <= 9; $i++) : ?>
|
||||
<a href="#" class="badge badge-status<?php print $i; ?>" >status<?php print $i; ?></a>
|
||||
<?php endfor; ?>
|
||||
|
||||
</div>
|
||||
|
||||
<figure class="highlight"><pre>
|
||||
<a href="#" class="badge badge-primary">Primary</a>
|
||||
<a href="#" class="badge badge-secondary">Secondary</a>
|
||||
<a href="#" class="badge badge-success">Success</a>
|
||||
<a href="#" class="badge badge-danger">Danger</a>
|
||||
<a href="#" class="badge badge-warning">Warning</a>
|
||||
<a href="#" class="badge badge-info">Info</a>
|
||||
<a href="#" class="badge badge-light">Light</a>
|
||||
<a href="#" class="badge badge-dark">Dark</a>
|
||||
<?php for ($i = 0; $i <= 9; $i++) : ?>
|
||||
<a href="#" class="badge badge-status<?php print $i; ?>" >status<?php print $i; ?></a>
|
||||
<?php endfor; ?>
|
||||
</pre></figure>
|
||||
|
||||
|
||||
<h2 id="helper">Use badge helper function</h2>
|
||||
<p>Using the dolGetBadge function provide in core/lib/functions.lib.php. This function is recommended for code uniformisation and easy maintain</p>
|
||||
<?php print dolGetBadge('your label for accessibility', 'your label <u>with</u> <em>html</em>', 'primary') ?>
|
||||
<?php print dolGetBadge('your label for accessibility', 'your label <u>with</u> <em>html</em>', 'danger', 'pill') ?>
|
||||
<?php print dolGetBadge('your label for accessibility', 'your label <u>with</u> <em>html</em>', 'warning', 'dot') ?>
|
||||
|
||||
<figure class="highlight"><pre>
|
||||
<?php print dolGetBadge('your label for accessibility', 'your label <u>with</u> <em>html</em>', 'danger', 'pill') ?>
|
||||
<?php print dolGetBadge('your label for accessibility', 'your label <u>with</u> <em>html</em>', 'warning', 'dot') ?>
|
||||
</pre></figure>
|
||||
|
||||
<h2 id="helper">Use status helper function</h2>
|
||||
<p>Using the dolGetStatus function provide in core/lib/functions.lib.php. This function is recommended for code uniformisation and easy maintain</p>
|
||||
<?php
|
||||
$saveGlobalConf = getDolGlobalString('MAIN_STATUS_USES_CSS');
|
||||
$conf->global->MAIN_STATUS_USES_CSS = 1;
|
||||
?>
|
||||
<h4>Using hidden global conf MAIN_STATUS_USES_CSS=1</h4>
|
||||
<p><?php print dolGetStatus('your label for accessibility', 'your label', 'your label <u>with</u> <em>html</em>', 'status4') ?></p>
|
||||
<p><?php print dolGetStatus('your label for accessibility', 'your label', 'your label <u>with</u> <em>html</em>', 'status4', 1) ?></p>
|
||||
<p><?php print dolGetStatus('your label for accessibility', 'your label', 'your label <u>with</u> <em>html</em>', 'status4', 2) ?></p>
|
||||
<p><?php print dolGetStatus('your label for accessibility', 'your label', 'your label <u>with</u> <em>html</em>', 'status4', 3) ?></p>
|
||||
<p><?php print dolGetStatus('your label for accessibility', 'your label', 'your label <u>with</u> <em>html</em>', 'status4', 4) ?></p>
|
||||
<p><?php print dolGetStatus('your label for accessibility', 'your label', 'your label <u>with</u> <em>html</em>', 'status4', 5) ?></p>
|
||||
<p><?php print dolGetStatus('your label for accessibility', 'your label', 'your label <u>with</u> <em>html</em>', 'status4', 6) ?></p>
|
||||
|
||||
<?php $conf->global->MAIN_STATUS_USES_CSS = 0; ?>
|
||||
<h4>Disabled hidden global conf : MAIN_STATUS_USES_CSS=0</h4>
|
||||
<p><?php print dolGetStatus('your label for accessibility', 'your label', 'your label <u>with</u> <em>html</em>', 'status4', 1) ?></p>
|
||||
<p><?php print dolGetStatus('your label for accessibility', 'your label', 'your label <u>with</u> <em>html</em>', 'status4', 2) ?></p>
|
||||
<p><?php print dolGetStatus('your label for accessibility', 'your label', 'your label <u>with</u> <em>html</em>', 'status4', 3) ?></p>
|
||||
<p><?php print dolGetStatus('your label for accessibility', 'your label', 'your label <u>with</u> <em>html</em>', 'status4', 4) ?></p>
|
||||
<p><?php print dolGetStatus('your label for accessibility', 'your label', 'your label <u>with</u> <em>html</em>', 'status4', 5) ?></p>
|
||||
<p><?php print dolGetStatus('your label for accessibility', 'your label', 'your label <u>with</u> <em>html</em>', 'status4', 6) ?></p>
|
||||
|
||||
<?php $conf->global->MAIN_STATUS_USES_CSS = $saveGlobalConf; ?>
|
||||
|
||||
|
||||
<figure class="highlight"><pre>
|
||||
<?php print dolGetStatus('your label for accessibility', 'your label', 'your label <u>with</u> <em>html</em>', 'status4') ?>
|
||||
<?php print dolGetStatus('your label for accessibility', 'your label', 'your label <u>with</u> <em>html</em>', 'status4',1) ?>
|
||||
<?php print dolGetStatus('your label for accessibility', 'your label', 'your label <u>with</u> <em>html</em>', 'status4',2) ?>
|
||||
<?php print dolGetStatus('your label for accessibility', 'your label', 'your label <u>with</u> <em>html</em>', 'status4',3) ?>
|
||||
<?php print dolGetStatus('your label for accessibility', 'your label', 'your label <u>with</u> <em>html</em>', 'status4',4) ?>
|
||||
<?php print dolGetStatus('your label for accessibility', 'your label', 'your label <u>with</u> <em>html</em>', 'status4',5) ?>
|
||||
<?php print dolGetStatus('your label for accessibility', 'your label', 'your label <u>with</u> <em>html</em>', 'status4',6) ?>
|
||||
</pre></figure>
|
||||
|
||||
|
||||
</main>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user