Redesign MoreOptions entity config screen

CHANGELOG.md

@@ -5,7 +5,7 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
-## [unreleased]
+## [Unreleased]
 
 ### Fixed
 - Fixed the issue where a ticket could be solved without a solution

public/css/moreoptions.scss

@@ -0,0 +1,113 @@
+/*
+ * -------------------------------------------------------------------------
+ * MoreOptions plugin for GLPI
+ * -------------------------------------------------------------------------
+ *
+ * MIT License
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * -------------------------------------------------------------------------
+ * @copyright Copyright (C) 2025 by the MoreOptions plugin team.
+ * @license   MIT https://opensource.org/licenses/mit-license.php
+ * @link      https://github.com/pluginsGLPI/moreoptions
+ * @link      https://gitlab.teclib.com/glpi-network/moreoptions/
+ * -------------------------------------------------------------------------
+ */
+
+// Everything below is scoped under .mo-config so it can never leak onto the
+// rest of the Entity form -- this stylesheet is loaded on every GLPI page
+// (see the add_css hook in setup.php), not just this one.
+.mo-config {
+    .mo-seg {
+        display: inline-flex;
+        gap: 2px;
+        padding: 2px;
+        background: var(--tblr-bg-surface-tertiary);
+        border: 1px solid var(--tblr-border-color);
+        border-radius: 5px;
+
+        input {
+            position: absolute;
+            opacity: 0;
+            pointer-events: none;
+        }
+
+        label {
+            display: inline-flex;
+            align-items: center;
+            gap: 5px;
+            font-size: 15px;
+            padding: 5px 11px;
+            border-radius: 3px;
+            white-space: nowrap;
+            cursor: pointer;
+            color: var(--tblr-secondary);
+            margin: 0;
+
+            i {
+                font-size: 15px;
+            }
+
+            &:hover {
+                color: var(--tblr-body-color);
+                font-weight: 500;
+            }
+        }
+
+        input:checked + label {
+            opacity: unset;
+            background: color-mix(in srgb, var(--glpi-palette-color-1), var(--tblr-bg-surface) 90%);
+            font-weight: 600;
+        }
+    }
+
+    // GLPI's own inherited-value badge, sitting outside the button group, to
+    // its left -- only worth showing while "Inherit" is actually selected.
+    .mo-inherited {
+        display: none;
+    }
+
+    .form-field:has(.mo-seg-inherit:checked) .mo-inherited {
+        display: inline-flex;
+        align-items: center;
+    }
+
+    .mo-pane {
+        display: none;
+
+        &.active {
+            display: block;
+        }
+    }
+
+    .mo-row-warn {
+        display: flex;
+        align-items: flex-start;
+        gap: 6px;
+        font-size: 13px;
+        color: var(--tblr-warning);
+        margin-top: 6px;
+
+        i {
+            font-size: 15px;
+            flex: none;
+            margin-top: 1px;
+        }
+    }
+}

setup.php

@@ -64,6 +64,8 @@ function plugin_init_moreoptions(): void
 
     Plugin::registerClass(Config::class, ['addtabon' => 'Entity']);
 
+    $PLUGIN_HOOKS[Hooks::ADD_CSS]['moreoptions'][] = 'css/moreoptions.scss';
+
     $PLUGIN_HOOKS[Hooks::ITEM_ADD]['moreoptions'][Entity::class] = [
         Config::class, 'addConfig',
     ];