Forms: basic fields

css/includes/_base.scss

@@ -75,6 +75,7 @@
     --glpi-form-header-danger-fg: var(--tblr-danger);
     --glpi-form-header-danger-bg: color-mix(in srgb, var(--glpi-form-header-danger-fg), var(--tblr-bg-surface) 90%);
     --glpi-form-header-danger-border-color: color-mix(in srgb, var(--glpi-form-header-danger-fg), var(--tblr-bg-surface) 75%);
+    --glpi-form-toolbar-bg: #f5f5f5;
     --glpi-topbar-height: 79px;
     --glpi-contextbar-height: 56px;
     --glpi-content-margin: 20px;

css/includes/_includes.scss

@@ -40,11 +40,13 @@ $is-dark: false !default;
 @import "components/autocomplete";
 @import "components/asset-form";
 @import "components/buttons-group";
+@import "components/content-editable-inputs";
 @import "components/documentation";
 @import "components/debug-toolbar";
 @import "components/fileupload";
 @import "components/flatpickr";
 @import "components/floating-buttons";
+@import "components/form/form-editor";
 @import "components/fuzzy";
 @import "components/global-menu";
 @import "components/log_viewer";

css/includes/components/_content-editable-inputs.scss

@@ -0,0 +1,109 @@
+/*!
+ * ---------------------------------------------------------------------
+ *
+ * GLPI - Gestionnaire Libre de Parc Informatique
+ *
+ * http://glpi-project.org
+ *
+ * @copyright 2015-2024 Teclib' and contributors.
+ * @copyright 2003-2014 by the INDEPNET Development Team.
+ * @licence   https://www.gnu.org/licenses/gpl-3.0.html
+ *
+ * ---------------------------------------------------------------------
+ *
+ * LICENSE
+ *
+ * This file is part of GLPI.
+ *
+ * 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/>.
+ *
+ * ---------------------------------------------------------------------
+ */
+
+/**
+ * Styles for inputs that are disguised as "content editable" DOM elements
+ * This inputs may be more convenient than real "content-editable" elements for
+ * some use cases (richtext editor, ...)
+ */
+
+// Padding for content-editable inputs
+// Must not be too high as content-editable is usually done without padding
+$inline-input-padding: 2px 4px;
+
+.content-editable-h2 {
+    // Copy h2 styles
+    font-size: 1.2rem !important;
+    line-height: 1.5rem;
+    font-weight: var(--tblr-font-weight-medium);
+    border: 0;
+    padding: $inline-input-padding;
+    margin-bottom: 1rem;
+    background-color: transparent;
+
+    &:hover {
+        box-shadow: 0 0 0 0.25rem rgba(var(--tblr-primary-rgb), 0.20);
+    }
+}
+
+
+.content-editable-tinymce {
+    // Remove default border and padding, add similar hover style used on our inputs
+    .tox-tinymce {
+        border-color: transparent !important;
+        padding: $inline-input-padding;
+
+        &:hover {
+            box-shadow: 0 0 0 0.25rem rgba(var(--tblr-primary-rgb), 0.20);
+        }
+    }
+
+    // Status bar is empty here, do not display to gain some vertical space
+    .tox-statusbar {
+        display: none !important;
+    }
+
+    // Small left padding to match our content-editable inputs padding
+    .tox-toolbar__primary {
+        .tox-toolbar__group:first-child {
+            padding-left: 2px !important;
+        }
+    }
+
+    // Hide richtext actions toolbor
+    .tox-editor-header {
+        // Can't use "display: none" as tinymce doens't like it and it break
+        // the rendering of the header (probably caused by some calculations done
+        // on width)
+        opacity: 0;
+        height: 0;
+    }
+}
+
+// Simulate focus like a bootstrap input, needed for tinymce with some javascript
+// help to trigger and remove the class as needed
+.simulate-focus {
+    box-shadow: 0 0 0 0.25rem rgba(var(--tblr-primary-rgb), 0.20);
+
+    // Show richtext toolbar only when focused
+    .tox-editor-header {
+        opacity: unset;
+        height: unset;
+    }
+}
+
+// Class inside tinymce's iframe, remove internal padding
+.content-editable-tinymce-editor {
+    margin: 0 !important;
+    padding: 0 !important;
+}

css/includes/components/form/_form-editor.scss

@@ -0,0 +1,63 @@
+/*!
+ * ---------------------------------------------------------------------
+ *
+ * GLPI - Gestionnaire Libre de Parc Informatique
+ *
+ * http://glpi-project.org
+ *
+ * @copyright 2015-2024 Teclib' and contributors.
+ * @copyright 2003-2014 by the INDEPNET Development Team.
+ * @licence   https://www.gnu.org/licenses/gpl-3.0.html
+ *
+ * ---------------------------------------------------------------------
+ *
+ * LICENSE
+ *
+ * This file is part of GLPI.
+ *
+ * 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/>.
+ *
+ * ---------------------------------------------------------------------
+ */
+
+ .form-editor {
+    // Use all available parent space
+    flex-grow: 1;
+
+    // Subtle gradient to avoid white on white cards while still keeping a white/white connection to the active tab (experimental)
+    // TODO: keep / remove / tweak when the UX is more complete (questions, sections, ...)
+    background: linear-gradient(
+        169deg,
+        rgb(255,255,255) 0%,
+        rgb(254,254,254) 14%,
+        rgb(253,253,253) 22%,
+        rgb(252,252,252) 33%,
+        rgb(251,251,252) 41%,
+        rgb(248,250,252) 48%
+    );
+
+    .designer {
+        .form-details {
+            .card-title {
+                // Emphasis form title with an above average font size
+                font-size: 1.2rem !important;
+            }
+        }
+    }
+}
+
+.editor-footer {
+    border-top: 1px solid $border-color;
+    background: var(--glpi-form-toolbar-bg);
+}

front/form/form.form.php

@@ -7,7 +7,7 @@
  *
  * http://glpi-project.org
  *
- * @copyright 2015-2023 Teclib' and contributors.
+ * @copyright 2015-2024 Teclib' and contributors.
  * @copyright 2003-2014 by the INDEPNET Development Team.
  * @licence   https://www.gnu.org/licenses/gpl-3.0.html
  *
@@ -40,5 +40,45 @@
 // Only super admins for now - TODO add specific rights
 Session::checkRight("config", UPDATE);
 
-// Show requested form
-Form::displayFullPageForItem($_GET['id'] ?? 0, ['admin', Form::getType()], []);
+// Read parameters
+$id = $_REQUEST['id'] ?? null;
+
+if (isset($_POST["add"])) {
+    // Create form
+    $form = new Form();
+    $form->check($id, CREATE);
+
+    if ($form->add($_POST)) {
+        if ($_SESSION['glpibackcreated']) {
+            Html::redirect($form->getLinkURL());
+        }
+    }
+    Html::back();
+} elseif (isset($_POST["update"])) {
+    // Update form
+    $form = new Form();
+    $form->check($id, UPDATE);
+    $form->update($_POST);
+    Html::back();
+} elseif (isset($_POST["delete"])) {
+    // Delete form
+    $form = new Form();
+    $form->check($id, DELETE);
+    $form->delete($_POST);
+    $form->redirectToList();
+} elseif (isset($_POST["restore"])) {
+    // Restore form
+    $form = new Form();
+    $form->check($id, DELETE);
+    $form->restore($_POST);
+    $form->redirectToList();
+} elseif (isset($_POST["purge"])) {
+    // Purge form
+    $form = new Form();
+    $form->check($id, PURGE);
+    $form->delete($_POST, true);
+    $form->redirectToList();
+} else {
+    // Show requested form
+    Form::displayFullPageForItem($id, ['admin', Form::getType()], []);
+}

front/form/form.php

@@ -7,7 +7,7 @@
  *
  * http://glpi-project.org
  *
- * @copyright 2015-2023 Teclib' and contributors.
+ * @copyright 2015-2024 Teclib' and contributors.
  * @copyright 2003-2014 by the INDEPNET Development Team.
  * @licence   https://www.gnu.org/licenses/gpl-3.0.html
  *

inc/define.php

@@ -608,7 +608,7 @@
         'config' => ['clipboard'],
         'webhook' => ['monaco', 'autocomplete'],
     ],
-    'admin'        => ['clipboard', 'monaco'],
+    'admin'        => ['clipboard', 'monaco', 'tinymce'],
     'preference'   => ['clipboard'],
     'self-service' => array_merge(['tinymce'], $reservations_libs),
     'tickets'      => [

install/empty_data.php

@@ -1962,6 +1962,7 @@ public function getEmptyData(): array
             ],
         ];
 
+        $ADDTODISPLAYPREF['Glpi\Form\Form'] = [1, 80, 86, 3, 4];
         $ADDTODISPLAYPREF['Cluster'] = [31, 19];
         $ADDTODISPLAYPREF['Domain'] = [3, 4, 2, 6, 7];
         $ADDTODISPLAYPREF['DomainRecord'] = [2, 3];

install/migrations/update_10.0.x_to_10.1.0/form.php

@@ -7,7 +7,7 @@
  *
  * http://glpi-project.org
  *
- * @copyright 2015-2023 Teclib' and contributors.
+ * @copyright 2015-2024 Teclib' and contributors.
  * @copyright 2003-2014 by the INDEPNET Development Team.
  * @licence   https://www.gnu.org/licenses/gpl-3.0.html
  *

js/common.js

@@ -1497,6 +1497,19 @@ $(() => {
             blockFormSubmit(form, e);
         }
     });
+
+    // Clear focus on content-editable-tinymce items when clicking outside of their content
+    $(document).on('click focus', 'body', function(e) {
+        if (
+            // Event must be outside of our simulate-focus item
+            $(e.target).closest('.simulate-focus').length == 0
+            // Special case when target is part of tinymce toolbar/aux, must NOT drop focus in this case
+            && $(e.target).closest('.tox-toolbar__overflow').length == 0
+            && $(e.target).closest('.tox-tinymce-aux').length == 0
+        ) {
+            $('.content-editable-tinymce').removeClass('simulate-focus');
+        }
+    });
 });
 
 /**

src/Form/AnswersSet.php

@@ -7,7 +7,7 @@
  *
  * http://glpi-project.org
  *
- * @copyright 2015-2023 Teclib' and contributors.
+ * @copyright 2015-2024 Teclib' and contributors.
  * @copyright 2003-2014 by the INDEPNET Development Team.
  * @licence   https://www.gnu.org/licenses/gpl-3.0.html
  *