mirror of
https://github.com/Dolibarr/dolibarr.git
synced 2025-12-05 09:08:09 +01:00
UIUX : Giff UX Doc : add experiment ux ajax input feedback (#33661)
* New experiment Tooltip freeze * fix tooltip ception * clean * New giff experimental input feedback * New giff experimental input feedback --------- Co-authored-by: Laurent Destailleur <eldy@destailleur.fr>
This commit is contained in:
John BOTELLA
@@ -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(),
|
||||
),
|
||||
)
|
||||
);
|
||||
|
||||
|
||||
@@ -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'
|
||||
];
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,166 @@
|
||||
<?php
|
||||
/*
|
||||
* Copyright (C) 2024 Anthony Damhet <a.damhet@progiseize.fr>
|
||||
* Copyright (C) 2024 Frédéric France <frederic.france@free.fr>
|
||||
*
|
||||
* This program is free software; you can redistribute it and/or modify
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation; either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
// Load Dolibarr environment
|
||||
require '../../../../../../main.inc.php';
|
||||
|
||||
/**
|
||||
* @var DoliDB $db
|
||||
* @var HookManager $hookmanager
|
||||
* @var Translate $langs
|
||||
* @var User $user
|
||||
*/
|
||||
|
||||
// Protection if external user
|
||||
if ($user->socid > 0) {
|
||||
accessforbidden();
|
||||
}
|
||||
|
||||
// Includes
|
||||
require_once DOL_DOCUMENT_ROOT . '/admin/tools/ui/class/documentation.class.php';
|
||||
|
||||
// Load documentation translations
|
||||
$langs->load('uxdocumentation');
|
||||
|
||||
//
|
||||
$documentation = new Documentation($db);
|
||||
$group = '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(); ?>
|
||||
|
||||
<div class="doc-wrapper">
|
||||
|
||||
<?php $documentation->showBreadCrumb(); ?>
|
||||
|
||||
<div class="doc-content-wrapper">
|
||||
|
||||
<h1 class="documentation-title"><?php echo $langs->trans($experimentName); ?></h1>
|
||||
|
||||
<?php $documentation->showSummary(); ?>
|
||||
|
||||
<div class="documentation-section" >
|
||||
<h2 class="documentation-title" >Input Feedback (Experimental)</h2>
|
||||
|
||||
<p>
|
||||
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 <code>develop</code> branch of Dolibarr in the future.
|
||||
</p>
|
||||
|
||||
<h3>How It Works</h3>
|
||||
<ul>
|
||||
<li><strong>Processing:</strong> The <code>.processing-feedback</code> class is applied while an action is being processed.</li>
|
||||
<li><strong>Success:</strong> Once successfully completed, the <code>.success-feedback</code> class is applied.</li>
|
||||
<li><strong>Failure:</strong> In case of an error, the <code>.fail-feedback</code> class is applied.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Live Demo</h3>
|
||||
|
||||
<div class="documentation-example">
|
||||
<input type="text" id="test-input-01" placeholder="Type something..." />
|
||||
<button id="btn-process-fail" type="button" class="button" >Processing will fail</button>
|
||||
<button id="btn-process-success" type="button" class="button" >Processing will success</button>
|
||||
<script>
|
||||
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);
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
<?php
|
||||
$lines = array(
|
||||
'<script>',
|
||||
'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);
|
||||
});',
|
||||
'</script>',
|
||||
);
|
||||
echo $documentation->showCode($lines, 'html'); ?>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<?php
|
||||
// Output close body + html
|
||||
$documentation->docFooter();
|
||||
?>
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user