diff --git a/htdocs/admin/tools/ui/class/documentation.class.php b/htdocs/admin/tools/ui/class/documentation.class.php index ec82e907a4d..0eae2e62ca2 100644 --- a/htdocs/admin/tools/ui/class/documentation.class.php +++ b/htdocs/admin/tools/ui/class/documentation.class.php @@ -230,6 +230,13 @@ class Documentation 'submenu' => array(), 'summary' => array(), ), + + 'ExperimentalUxInputAjaxFeedback' => array( + 'url' => dol_buildpath($this->baseUrl.'/experimental/experiments/input-feedback/index.php', 1), + 'icon' => 'fas fa-flask', + 'submenu' => array(), + 'summary' => array(), + ), ) ); diff --git a/htdocs/admin/tools/ui/experimental/experiments/freeze-tooltip/index.php b/htdocs/admin/tools/ui/experimental/experiments/freeze-tooltip/index.php index 065e39b883a..82e8e1ce96c 100644 --- a/htdocs/admin/tools/ui/experimental/experiments/freeze-tooltip/index.php +++ b/htdocs/admin/tools/ui/experimental/experiments/freeze-tooltip/index.php @@ -42,7 +42,8 @@ $langs->load('uxdocumentation'); $documentation = new Documentation($db); $group = 'ExperimentalUx'; -$experimentAssetsPath = 'admin/tools/ui/experimental/experiments/freeze-tooltip/assets/'; +$experimentAssetsPath = $documentation->baseUrl . '/experimental/experiments/freeze-tooltip/assets/'; + $js = [ $experimentAssetsPath . 'freeze-by-alt-keypress.js' ]; diff --git a/htdocs/admin/tools/ui/experimental/experiments/input-feedback/assets/feddback-01.css b/htdocs/admin/tools/ui/experimental/experiments/input-feedback/assets/feddback-01.css new file mode 100644 index 00000000000..f5cb656d812 --- /dev/null +++ b/htdocs/admin/tools/ui/experimental/experiments/input-feedback/assets/feddback-01.css @@ -0,0 +1,48 @@ +.processing-feedback { + background-size: 30px 30px !important; + background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.05) 50%, rgba(0, 0, 0, 0.05) 75%, transparent 75%, transparent) !important; + animation: input-background-loader 0.5s linear infinite; + +} + +@keyframes input-background-loader { + from { + background-position: 0 0; + } + to { + background-position: 60px 30px; + } +} + + +.success-feedback{ + animation: 1s ease-out success-feedback-animation; +} + +@-webkit-keyframes success-feedback-animation { + 0% { + outline: 3px solid rgba(255, 255, 255, 0); + } + 20% { + outline: 3px solid #8cd55b; + } + 100% { + outline: 3px solid rgba(255, 255, 255, 0); + } +} + +.fail-feedback { + animation: 1s ease-out fail-feedback-animation; +} + +@-webkit-keyframes fail-feedback-animation { + 0% { + outline: 3px solid rgba(255, 255, 255, 0); + } + 20% { + outline: 3px solid #d55b5b; + } + 100% { + outline: 3px solid rgba(255, 255, 255, 0); + } +} diff --git a/htdocs/admin/tools/ui/experimental/experiments/input-feedback/index.php b/htdocs/admin/tools/ui/experimental/experiments/input-feedback/index.php new file mode 100644 index 00000000000..9da34fba339 --- /dev/null +++ b/htdocs/admin/tools/ui/experimental/experiments/input-feedback/index.php @@ -0,0 +1,166 @@ + + * Copyright (C) 2024 Frédéric France + * + * This program is free software; you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation; either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +// Load Dolibarr environment +require '../../../../../../main.inc.php'; + +/** + * @var DoliDB $db + * @var HookManager $hookmanager + * @var Translate $langs + * @var User $user + */ + +// Protection if external user +if ($user->socid > 0) { + accessforbidden(); +} + +// Includes +require_once DOL_DOCUMENT_ROOT . '/admin/tools/ui/class/documentation.class.php'; + +// Load documentation translations +$langs->load('uxdocumentation'); + +// +$documentation = new Documentation($db); +$group = 'ExperimentalUx'; +$experimentName = 'ExperimentalUxInputAjaxFeedback'; + +$experimentAssetsPath = $documentation->baseUrl . '/experimental/experiments/input-feedback/assets/'; +$js = [ + '/includes/ace/src/ace.js', + '/includes/ace/src/ext-statusbar.js', + '/includes/ace/src/ext-language_tools.js', +]; +$css = [ + $experimentAssetsPath . 'feddback-01.css' +]; + +// Output html head + body - Param is Title +$documentation->docHeader($langs->trans($experimentName, $group), $js, $css); + +// Set view for menu and breadcrumb +$documentation->view = [$group, $experimentName]; + +// Output sidebar +$documentation->showSidebar(); ?> + +
+ + showBreadCrumb(); ?> + +
+ +

trans($experimentName); ?>

+ + showSummary(); ?> + +
+

Input Feedback (Experimental)

+ +

+ This experimental feature provides visual feedback on input fields based on their processing state. + Currently, it is only available in this documentation and may be integrated into the develop branch of Dolibarr in the future. +

+ +

How It Works

+
    +
  • Processing: The .processing-feedback class is applied while an action is being processed.
    • +
  • Success: Once successfully completed, the .success-feedback class is applied.
    • +
  • Failure: In case of an error, the .fail-feedback class is applied.
    • +
+ +

Live Demo

+ +
+ + + + +
+ ', + 'document.getElementById(\'btn-process-success\').addEventListener(\'click\', function () { + let input = document.getElementById(\'test-input-01\'); + input.classList.add(\'processing-feedback\'); + + setTimeout(() => { + input.classList.remove(\'processing-feedback\'); + input.classList.add(\'success-feedback\'); + setTimeout(() => { + input.classList.remove(\'success-feedback\'); + }, 1000); + }, 1500); +}); + + +document.getElementById(\'btn-process-fail\').addEventListener(\'click\', function () { + let input = document.getElementById(\'test-input-01\'); + input.classList.add(\'processing-feedback\'); + + setTimeout(() => { + input.classList.remove(\'processing-feedback\'); + input.classList.add(\'fail-feedback\'); + setTimeout(() => { + input.classList.remove(\'fail-feedback\'); + }, 1000); + }, 1500); +});', + '', + ); + echo $documentation->showCode($lines, 'html'); ?> +
+ + +
+ +
+docFooter(); +?> diff --git a/htdocs/langs/en_US/uxdocumentation.lang b/htdocs/langs/en_US/uxdocumentation.lang index f52321e27c9..87085c21cbc 100644 --- a/htdocs/langs/en_US/uxdocumentation.lang +++ b/htdocs/langs/en_US/uxdocumentation.lang @@ -160,4 +160,5 @@ ExperimentalUxContributionEnd = This structure ensures a clear and modular organ # Start experiements menu title ExperimentalUxFreezeTooltip = Tooltip freeze +ExperimentalUxInputAjaxFeedback = Input feedback # End experiements manu tyile