Skip to content

Commit

Permalink
WIP : Documentation ux (#30735)
Browse files Browse the repository at this point in the history 
* 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>
  • Loading branch information
@EchoLoGeek @thersane-john @eldy
4 people authored Nov 14, 2024
1 parent 17fa660 commit 11057fa
Show file tree
Hide file tree
Showing 16 changed files with 2,456 additions and 394 deletions.
403 changes: 403 additions & 0 deletions htdocs/admin/tools/ui/class/documentation.class.php
View file

Large diffs are not rendered by default.

313 changes: 313 additions & 0 deletions htdocs/admin/tools/ui/components/badges.php
View file
Original file line number Diff line number Diff line change
@@ -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();
?>
Loading

0 comments on commit 11057fa

Please sign in to comment.