Illustration picker

.stylelintrc.js

@@ -17,7 +17,6 @@ module.exports = {
         "color-function-notation": null, // DISABLE: Expected modern color-function notation
         "declaration-block-no-redundant-longhand-properties": null, // DISABLE Expected shorthand property "flex-flow"
         "media-feature-range-notation": "prefix",
-        "selector-not-notation": "simple", //DISABLE Expected complex :not() pseudo-class notation
         "scss/at-rule-conditional-no-parentheses": null,
         "scss/no-global-function-names": null, // scssphp do not support usage of SASS modules
 

css/includes/_includes.scss

@@ -51,6 +51,7 @@ $is-dark: false !default;
 @import "components/form/form-destination";
 @import "components/fuzzy";
 @import "components/global-menu";
+@import "components/illustration-picker";
 @import "components/log_viewer";
 @import "components/browser_tree";
 @import "components/mini-tabs";
@@ -66,6 +67,7 @@ $is-dark: false !default;
 @import "components/sortable";
 @import "components/tabs";
 @import "components/tinymce";
+@import "components/utils";
 @import "components/creator_badge";
 @import "components/itilobject/footer";
 @import "components/itilobject/layout";

css/includes/components/_illustration-picker.scss

@@ -0,0 +1,45 @@
+/*!
+ * ---------------------------------------------------------------------
+ *
+ * GLPI - Gestionnaire Libre de Parc Informatique
+ *
+ * http://glpi-project.org
+ *
+ * @copyright 2015-2024 Teclib' and contributors.
+ * @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/>.
+ *
+ * ---------------------------------------------------------------------
+ */
+
+.illustration-selector {
+    padding-bottom: 7px;
+    border-color: var(--tblr-card-border-color);
+    box-shadow: var(--tblr-box-shadow-input) !important;
+    border-radius: 10px !important; // Must match border radius used for tinymce
+
+    &:hover {
+        border-color: var(--tblr-secondary);
+        cursor: pointer;
+    }
+
+    transition: border-color 0.3s;
+}

css/includes/components/_richtext.scss

@@ -54,9 +54,10 @@ body.mce-content-body {
     justify-content: flex-end;
 }
 
-.tox.tox-tinymce {
-    border: var(--tblr-border-width) solid var(--tblr-border-color);
+.tox.tox-tinymce:not(.content-editable-tinymce .tox.tox-tinymce) {
+    border: var(--tblr-border-width) solid var(--tblr-border-color) !important;
     border-radius: var(--tblr-border-radius);
+    box-shadow: var(--tblr-box-shadow-input) !important;
 }
 
 .rich_text_container {

css/includes/components/_utils.scss

@@ -0,0 +1,56 @@
+/*!
+ * ---------------------------------------------------------------------
+ *
+ * GLPI - Gestionnaire Libre de Parc Informatique
+ *
+ * http://glpi-project.org
+ *
+ * @copyright 2015-2024 Teclib' and contributors.
+ * @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/>.
+ *
+ * ---------------------------------------------------------------------
+ */
+
+.aspect-ratio-1 {
+    aspect-ratio: 1;
+}
+
+.border-secondary-hover {
+    border-color: transparent;
+
+    &:hover {
+        border-color: var(--tblr-secondary);
+    }
+
+    transition: border-color 0.3s;
+}
+
+// Apply the same font-size and line-height as btn-text.
+// Useful when replacing a btn-text content by a loading icon.
+.btn-text-loading {
+    font-size: var(--tblr-btn-font-size) !important;
+    line-height: var(--tblr-btn-line-height) !important;
+}
+
+.w-fit-content {
+    width: fit-content !important;
+}

css/includes/pages/_search.scss

@@ -280,7 +280,7 @@ table.search-results {
         vertical-align: bottom !important;// Fix alignment for when no sorting indicator element is present
     }
 
-    thead th[data-searchopt-id]:not([data-searchopt-id=""]):not([data-nosort]) {
+    thead th[data-searchopt-id]:not([data-searchopt-id=""], [data-nosort]) {
         cursor: pointer;
 
         .sort-indicator {

css/standalone/dashboard.scss

@@ -331,7 +331,7 @@ $break_tablet: 1400px;
         .edit-dashboard-properties {
             display: none;
 
-            input.dashboard-name:not(.submit):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not(.select2-search__field) {
+            input.dashboard-name:not(.submit, [type="submit"], [type="reset"], [type="checkbox"], [type="radio"], .select2-search__field) {
                 min-width: 200px;
                 resize: horizontal;
             }

css/standalone/marketplace.scss

@@ -446,7 +446,7 @@ $break_s_screen: 1400px;
                     padding: 8px 10px;
                 }
 
-                &:not(.current):not(.nb_plugin):not(.nav-disabled):hover {
+                &:not(.current, .nb_plugin, .nav-disabled):hover {
                     background-color: #ddd;
                     cursor: pointer;
                 }

js/common.js

@@ -1975,3 +1975,21 @@ window.displaySessionMessages = () => {
         });
     });
 };
+
+// Add/remove a special data attribute to bootstrap's modals when they are
+// displayed/hidden.
+// This is needed for e2e testing as bootstrap have some compatibility issues
+// with cypress.
+// See https://github.com/cypress-io/cypress/issues/25202.
+document.addEventListener('shown.bs.modal', (e) => {
+    const modal = e.target.closest('.modal');
+    if (modal) {
+        modal.setAttribute('data-cy-shown', 'true');
+    }
+});
+document.addEventListener('hidden.bs.modal', (e) => {
+    const modal = e.target.closest('.modal');
+    if (modal) {
+        modal.setAttribute('data-cy-shown', 'false');
+    }
+});