forked from Wavyzz/dolibarr
Merge pull request #32074 from thersane-john/new_doc_icons
New doc for icon list
This commit is contained in:
Laurent Destailleur
@@ -127,6 +127,15 @@ class Documentation
|
||||
'DocButtonSubmenu' => '#buttonsection-submenu',
|
||||
),
|
||||
),
|
||||
'Icons' => array(
|
||||
'url' => dol_buildpath($baseUrl.'/components/icons.php', 1),
|
||||
'icon' => 'far fa-flag pictofixedwidth',
|
||||
'submenu' => array(),
|
||||
'summary' => array(
|
||||
'DocIconsList' => '#img-picto-section-list',
|
||||
'DocIconsFontAwesomeList' => '#icon-section-list',
|
||||
),
|
||||
),
|
||||
'Progress' => array(
|
||||
'url' => dol_buildpath($baseUrl.'/components/progress-bars.php', 1),
|
||||
'icon' => 'fas fa-battery-half pictofixedwidth',
|
||||
|
||||
@@ -110,7 +110,7 @@ $documentation->showSidebar(); ?>
|
||||
$lines = array(
|
||||
'<?php',
|
||||
'/**',
|
||||
'* Function dolGetButtonAction',
|
||||
'* Function setEventMessages',
|
||||
'*',
|
||||
'* 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',
|
||||
|
||||
186
htdocs/admin/tools/ui/components/icons.php
Normal file
186
htdocs/admin/tools/ui/components/icons.php
Normal file
@@ -0,0 +1,186 @@
|
||||
<?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('Icons');
|
||||
|
||||
// Set view for menu and breadcrumb
|
||||
// Menu must be set in constructor of documentation class
|
||||
$documentation->view = array('Components','Icons');
|
||||
|
||||
// Output sidebar
|
||||
$documentation->showSidebar(); ?>
|
||||
|
||||
<div class="doc-wrapper">
|
||||
|
||||
<?php $documentation->showBreadCrumb(); ?>
|
||||
|
||||
<div class="doc-content-wrapper">
|
||||
|
||||
<h1 class="documentation-title"><?php echo $langs->trans('DocIconsTitle'); ?></h1>
|
||||
<p class="documentation-text"><?php echo $langs->trans('DocIconsMainDescription'); ?></p>
|
||||
|
||||
<!-- Summary -->
|
||||
<?php $documentation->showSummary(); ?>
|
||||
|
||||
|
||||
<!-- List of usage font awesome icon -->
|
||||
<div class="documentation-section" id="img-picto-section-list">
|
||||
|
||||
<?php
|
||||
|
||||
$iconFileName = 'shims.json';
|
||||
$iconFilePath = DOL_DOCUMENT_ROOT . '/theme/common/fontawesome-5/metadata';
|
||||
|
||||
$fontAwesomeIconRaw = file_get_contents($iconFilePath. '/' .$iconFileName);
|
||||
if ($fontAwesomeIconRaw === false) {
|
||||
dol_print_error($db, 'Error missing file '. $iconFilePath . '/' . $iconFileName);
|
||||
}
|
||||
|
||||
$fontAwesomeIcons = json_decode($fontAwesomeIconRaw);
|
||||
if ($fontAwesomeIcons === null) {
|
||||
dol_print_error($db, 'Error decoding '. $iconFilePath . '/' . $iconFileName);
|
||||
}
|
||||
?>
|
||||
|
||||
<h2 class="documentation-title"><?php echo $langs->trans('DocIconsList'); ?></h2>
|
||||
<?php /* <p class="documentation-text"><?php echo $langs->trans('DocDocIconsListDescription'); ?></p>*/ ?>
|
||||
<div class="documentation-example">
|
||||
<div class="documentation-fontawesome-icon-list">
|
||||
<?php
|
||||
foreach (getImgPictoNameList() as $iconName) {
|
||||
$labelAlt = 'Text on title tag for tooltip';
|
||||
$iconCode = img_picto($iconName, $iconName);
|
||||
print '<div class="info-box ">
|
||||
<span class="info-box-icon bg-infobox-expensereport">
|
||||
'.$iconCode.'
|
||||
</span>
|
||||
<div class="info-box-content">
|
||||
<div class="info-box-title" >'. $iconName .'</div>
|
||||
<div class="info-box-lines">
|
||||
<div class="info-box-line spanoverflow nowrap">
|
||||
<div class="inline-block nowraponall">
|
||||
<div class="documentation-code"><pre>'.dol_htmlentities('img_picto(\''.$labelAlt.'\', '.$iconName.')').'</pre></div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /.info-box-lines -->
|
||||
</div><!-- /.info-box-content -->
|
||||
</div>';
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- -->
|
||||
|
||||
|
||||
<!-- List of usage font awesome icon -->
|
||||
<div class="documentation-section" id="icon-section-list">
|
||||
|
||||
<?php
|
||||
|
||||
$iconFileName = 'shims.json';
|
||||
$iconFilePath = DOL_DOCUMENT_ROOT . '/theme/common/fontawesome-5/metadata';
|
||||
|
||||
$fontAwesomeIconRaw = file_get_contents($iconFilePath. '/' .$iconFileName);
|
||||
if ($fontAwesomeIconRaw === false) {
|
||||
dol_print_error($db, 'Error missing file '. $iconFilePath . '/' . $iconFileName);
|
||||
}
|
||||
|
||||
$fontAwesomeIcons = json_decode($fontAwesomeIconRaw);
|
||||
if ($fontAwesomeIcons === null) {
|
||||
dol_print_error($db, 'Error decoding '. $iconFilePath . '/' . $iconFileName);
|
||||
}
|
||||
?>
|
||||
|
||||
<h2 class="documentation-title"><?php echo $langs->trans('DocIconsList'); ?></h2>
|
||||
<?php /* <p class="documentation-text"><?php echo $langs->trans('DocDocIconsListDescription'); ?></p>*/ ?>
|
||||
<div class="documentation-example">
|
||||
|
||||
<div class="documentation-fontawesome-icon-list">
|
||||
|
||||
<?php
|
||||
$alreadyDisplay = [];
|
||||
if ($fontAwesomeIcons && is_array($fontAwesomeIcons)) {
|
||||
foreach ($fontAwesomeIcons as $iconData) {
|
||||
$class= $iconData[1]??'fa';
|
||||
if (!empty($iconData[2])) {
|
||||
$class.= ' fa-'.$iconData[2]??'';
|
||||
} else {
|
||||
$class.= ' fa-'.$iconData[0]??'';
|
||||
}
|
||||
|
||||
if (in_array($class, $alreadyDisplay)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
$alreadyDisplay[] = $class;
|
||||
$iconCode = '<span class="'.$class.'" ></span>';
|
||||
|
||||
|
||||
print '<div class="info-box ">
|
||||
<span class="info-box-icon bg-infobox-expensereport">
|
||||
'.$iconCode.'
|
||||
</span>
|
||||
<div class="info-box-content">
|
||||
<div class="info-box-title" >'. ($iconData[2]??($iconData[0]??'')) .'</div>
|
||||
<div class="info-box-lines">
|
||||
<div class="info-box-line spanoverflow nowrap">
|
||||
<div class="inline-block nowraponall">
|
||||
<div class="documentation-code"><pre>'.dol_htmlentities($iconCode).'</pre></div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /.info-box-lines -->
|
||||
</div><!-- /.info-box-content -->
|
||||
</div>';
|
||||
}
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php
|
||||
// Output close body + html
|
||||
$documentation->docFooter();
|
||||
?>
|
||||
@@ -78,8 +78,12 @@ body.dolibarr-doc {
|
||||
.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 .info-box .documentation-code {padding: 3px 16px; margin-bottom: 5px;}
|
||||
.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}
|
||||
|
||||
/* component icons */
|
||||
.documentation-fontawesome-icon-list span{ color: #333; }
|
||||
|
||||
@@ -5161,43 +5161,7 @@ function img_picto($titlealt, $picto, $moreatt = '', $pictoisfullpath = 0, $srco
|
||||
return $enabledisablehtml;
|
||||
}
|
||||
|
||||
if (empty($srconly) && in_array($pictowithouttext, array(
|
||||
'1downarrow', '1uparrow', '1leftarrow', '1rightarrow', '1uparrow_selected', '1downarrow_selected', '1leftarrow_selected', '1rightarrow_selected',
|
||||
'accountancy', 'accounting_account', 'account', 'accountline', 'action', 'add', 'address', 'ai', 'angle-double-down', 'angle-double-up', 'asset',
|
||||
'back', 'bank_account', 'barcode', 'bank', 'bell', 'bill', 'billa', 'billr', 'billd', 'birthday-cake', 'bom', 'bookcal', 'bookmark', 'briefcase-medical', 'bug', 'building',
|
||||
'card', 'calendarlist', 'calendar', 'calendarmonth', 'calendarweek', 'calendarday', 'calendarperuser', 'calendarpertype', 'hourglass',
|
||||
'cash-register', 'category', 'chart', 'check', 'clock', 'clone', 'close_title', 'code', 'cog', 'collab', 'company', 'contact', 'country', 'contract', 'conversation', 'cron', 'cross', 'cubes',
|
||||
'check-circle', 'check-square', 'circle', 'stop-circle', 'currency', 'multicurrency',
|
||||
'chevron-left', 'chevron-right', 'chevron-down', 'chevron-top',
|
||||
'chevron-double-left', 'chevron-double-right', 'chevron-double-down', 'chevron-double-top',
|
||||
'commercial', 'companies',
|
||||
'delete', 'dolly', 'dollyrevert', 'donation', 'download', 'dynamicprice',
|
||||
'edit', 'ellipsis-h', 'email', 'entity', 'envelope', 'eraser', 'establishment', 'expensereport', 'external-link-alt', 'external-link-square-alt', 'eye',
|
||||
'filter', 'file', 'file-o', 'file-code', 'file-export', 'file-import', 'file-upload', 'autofill', 'folder', 'folder-open', 'folder-plus', 'font',
|
||||
'gears', 'generate', 'generic', 'globe', 'globe-americas', 'graph', 'grip', 'grip_title', 'group',
|
||||
'hands-helping', 'help', 'holiday',
|
||||
'id-card', 'images', 'incoterm', 'info', 'intervention', 'inventory', 'intracommreport', 'jobprofile',
|
||||
'key', 'knowledgemanagement',
|
||||
'label', 'language', 'layout', 'line', 'link', 'list', 'list-alt', 'listlight', 'loan', 'lock', 'lot', 'long-arrow-alt-right',
|
||||
'margin', 'map-marker-alt', 'member', 'meeting', 'minus', 'money-bill-alt', 'movement', 'mrp', 'note', 'next',
|
||||
'off', 'on', 'order',
|
||||
'paiment', 'paragraph', 'play', 'pdf', 'phone', 'phoning', 'phoning_mobile', 'phoning_fax', 'playdisabled', 'previous', 'poll', 'pos', 'printer', 'product', 'propal', 'proposal', 'puce',
|
||||
'stock', 'resize', 'service', 'stats',
|
||||
'security', 'setup', 'share-alt', 'sign-out', 'split', 'stripe', 'stripe-s', 'switch_off', 'switch_on', 'switch_on_grey', 'switch_on_warning', 'switch_on_red', 'tools', 'unlink', 'uparrow', 'user', 'user-tie', 'vcard', 'wrench',
|
||||
'github', 'google', 'jabber', 'microsoft', 'skype', 'twitter', 'facebook', 'linkedin', 'instagram', 'snapchat', 'youtube', 'google-plus-g', 'whatsapp',
|
||||
'generic', 'home', 'hrm', 'members', 'products', 'invoicing',
|
||||
'partnership', 'payment', 'payment_vat', 'pencil-ruler', 'pictoconfirm', 'preview', 'project', 'projectpub', 'projecttask', 'question', 'refresh', 'region',
|
||||
'salary', 'shipment', 'state', 'supplier_invoice', 'supplier_invoicea', 'supplier_invoicer', 'supplier_invoiced',
|
||||
'technic', 'ticket',
|
||||
'error', 'warning',
|
||||
'recent', 'reception', 'recruitmentcandidature', 'recruitmentjobposition', 'replacement', 'resource', 'recurring','rss',
|
||||
'shapes', 'skill', 'square', 'sort-numeric-down', 'status', 'stop-circle', 'supplier', 'supplier_proposal', 'supplier_order', 'supplier_invoice',
|
||||
'terminal', 'tick', 'timespent', 'title_setup', 'title_accountancy', 'title_bank', 'title_hrm', 'title_agenda', 'trip',
|
||||
'uncheck', 'undo', 'url', 'user-cog', 'user-injured', 'user-md', 'vat', 'website', 'workstation', 'webhook', 'world', 'private',
|
||||
'conferenceorbooth', 'eventorganization',
|
||||
'stamp', 'signature',
|
||||
'webportal'
|
||||
))) {
|
||||
if (empty($srconly) && in_array($pictowithouttext, getImgPictoNameList())) {
|
||||
$fakey = $pictowithouttext;
|
||||
$facolor = '';
|
||||
$fasize = '';
|
||||
@@ -5430,6 +5394,53 @@ function img_picto($titlealt, $picto, $moreatt = '', $pictoisfullpath = 0, $srco
|
||||
return '<img src="'.$fullpathpicto.'"'.($notitle ? '' : ' alt="'.dol_escape_htmltag($alt).'"').(($notitle || empty($titlealt)) ? '' : ' title="'.dol_escape_htmltag($titlealt).'"').($moreatt ? ' '.$moreatt.($morecss ? ' class="'.$morecss.'"' : '') : ' class="inline-block'.($morecss ? ' '.$morecss : '').'"').'>'; // Alt is used for accessibility, title for popup
|
||||
}
|
||||
|
||||
/**
|
||||
* Get all usage icon name for img_picto
|
||||
* @return string[]
|
||||
*/
|
||||
function getImgPictoNameList()
|
||||
{
|
||||
|
||||
return array(
|
||||
'1downarrow', '1uparrow', '1leftarrow', '1rightarrow', '1uparrow_selected', '1downarrow_selected', '1leftarrow_selected', '1rightarrow_selected',
|
||||
'accountancy', 'accounting_account', 'account', 'accountline', 'action', 'add', 'address', 'ai', 'angle-double-down', 'angle-double-up', 'asset',
|
||||
'back', 'bank_account', 'barcode', 'bank', 'bell', 'bill', 'billa', 'billr', 'billd', 'birthday-cake', 'bom', 'bookcal', 'bookmark', 'briefcase-medical', 'bug', 'building',
|
||||
'card', 'calendarlist', 'calendar', 'calendarmonth', 'calendarweek', 'calendarday', 'calendarperuser', 'calendarpertype', 'hourglass',
|
||||
'cash-register', 'category', 'chart', 'check', 'clock', 'clone', 'close_title', 'code', 'cog', 'collab', 'company', 'contact', 'country', 'contract', 'conversation', 'cron', 'cross', 'cubes',
|
||||
'check-circle', 'check-square', 'circle', 'stop-circle', 'currency', 'multicurrency',
|
||||
'chevron-left', 'chevron-right', 'chevron-down', 'chevron-top',
|
||||
'chevron-double-left', 'chevron-double-right', 'chevron-double-down', 'chevron-double-top',
|
||||
'commercial', 'companies',
|
||||
'delete', 'dolly', 'dollyrevert', 'donation', 'download', 'dynamicprice',
|
||||
'edit', 'ellipsis-h', 'email', 'entity', 'envelope', 'eraser', 'establishment', 'expensereport', 'external-link-alt', 'external-link-square-alt', 'eye',
|
||||
'filter', 'file', 'file-o', 'file-code', 'file-export', 'file-import', 'file-upload', 'autofill', 'folder', 'folder-open', 'folder-plus', 'font',
|
||||
'gears', 'generate', 'generic', 'globe', 'globe-americas', 'graph', 'grip', 'grip_title', 'group',
|
||||
'hands-helping', 'help', 'holiday',
|
||||
'id-card', 'images', 'incoterm', 'info', 'intervention', 'inventory', 'intracommreport', 'jobprofile',
|
||||
'key', 'knowledgemanagement',
|
||||
'label', 'language', 'layout', 'line', 'link', 'list', 'list-alt', 'listlight', 'loan', 'lock', 'lot', 'long-arrow-alt-right',
|
||||
'margin', 'map-marker-alt', 'member', 'meeting', 'minus', 'money-bill-alt', 'movement', 'mrp', 'note', 'next',
|
||||
'off', 'on', 'order',
|
||||
'paiment', 'paragraph', 'play', 'pdf', 'phone', 'phoning', 'phoning_mobile', 'phoning_fax', 'playdisabled', 'previous', 'poll', 'pos', 'printer', 'product', 'propal', 'proposal', 'puce',
|
||||
'stock', 'resize', 'service', 'stats',
|
||||
'security', 'setup', 'share-alt', 'sign-out', 'split', 'stripe', 'stripe-s', 'switch_off', 'switch_on', 'switch_on_grey', 'switch_on_warning', 'switch_on_red', 'tools', 'unlink', 'uparrow', 'user', 'user-tie', 'vcard', 'wrench',
|
||||
'github', 'google', 'jabber', 'microsoft', 'skype', 'twitter', 'facebook', 'linkedin', 'instagram', 'snapchat', 'youtube', 'google-plus-g', 'whatsapp',
|
||||
'generic', 'home', 'hrm', 'members', 'products', 'invoicing',
|
||||
'partnership', 'payment', 'payment_vat', 'pencil-ruler', 'pictoconfirm', 'preview', 'project', 'projectpub', 'projecttask', 'question', 'refresh', 'region',
|
||||
'salary', 'shipment', 'state', 'supplier_invoice', 'supplier_invoicea', 'supplier_invoicer', 'supplier_invoiced',
|
||||
'technic', 'ticket',
|
||||
'error', 'warning',
|
||||
'recent', 'reception', 'recruitmentcandidature', 'recruitmentjobposition', 'replacement', 'resource', 'recurring', 'rss',
|
||||
'shapes', 'skill', 'square', 'sort-numeric-down', 'status', 'stop-circle', 'supplier', 'supplier_proposal', 'supplier_order', 'supplier_invoice',
|
||||
'terminal', 'tick', 'timespent', 'title_setup', 'title_accountancy', 'title_bank', 'title_hrm', 'title_agenda', 'trip',
|
||||
'uncheck', 'undo', 'url', 'user-cog', 'user-injured', 'user-md', 'vat', 'website', 'workstation', 'webhook', 'world', 'private',
|
||||
'conferenceorbooth', 'eventorganization',
|
||||
'stamp', 'signature',
|
||||
'webportal'
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Show a picto called object_picto (generic function)
|
||||
*
|
||||
|
||||
@@ -79,3 +79,9 @@ 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
|
||||
|
||||
# Fontawesome icons
|
||||
DocIconsTitle = Icons used by Dolibarr
|
||||
DocIconsList = List of usable icons with img_picto function
|
||||
DocIconsMainDescription = Dolibarr use a part of fontawesome 5 icons
|
||||
DocIconsFontAwesomeList = List of usable fontawesome icons
|
||||
|
||||
Reference in New Issue
Block a user