Use glpi-project/illustrations

glpi-project · Dec 17, 2024 · d5e814e · d5e814e
1 parent fba6b3e
commit d5e814e
Show file tree

Hide file tree

Showing 80 changed files with 145 additions and 2,828 deletions.
diff --git a/.phpstan-baseline.php b/.phpstan-baseline.php
@@ -3691,12 +3691,6 @@
 	'count' => 1,
 	'path' => __DIR__ . '/src/Glpi/System/RequirementsManager.php',
 ];
-$ignoreErrors[] = [
-	'message' => '#^PHPDoc tag @var with type SplFileInfo is not subtype of native type DirectoryIterator\\.$#',
-	'identifier' => 'varTag.nativeType',
-	'count' => 1,
-	'path' => __DIR__ . '/src/Glpi/UI/IllustrationManager.php',
-];
 $ignoreErrors[] = [
 	'message' => '#^Method Glpi\\\\UI\\\\ThemeManager\\:\\:getCustomThemesDirectory\\(\\) should return string but returns null\\.$#',
 	'identifier' => 'return.type',

diff --git a/.webpack.config.js b/.webpack.config.js
@@ -146,7 +146,7 @@ const config = {
     },
 };
 
-// Copy raw JS and SCSS files
+// Copy raw JS, SCSS files and SVG files
 const filesToCopy = [
     // JS files
     {
@@ -195,7 +195,19 @@ const filesToCopy = [
     {
         package: 'swagger-ui-dist',
         from: 'oauth2-redirect.html'
-    }
+    },
+    // SVG files
+    {
+        package: '@glpi-project/illustrations',
+        context: 'dist',
+        from: '*.svg',
+    },
+    // JSON files
+    {
+        package: '@glpi-project/illustrations',
+        context: 'dist',
+        from: '*.json',
+    },
 ];
 
 const copyPatterns = [];

diff --git a/css/includes/_base.scss b/css/includes/_base.scss
@@ -125,6 +125,12 @@
     --glpi-zindex-popover: #{$zindex-popover};
     --glpi-zindex-tooltip: #{$zindex-tooltip};
     --glpi-zindex-toast: #{$zindex-toast};
+
+    // Variables for @glpi-project/illustrations
+    --glpi-illustrations-background: white;
+    --glpi-illustrations-header-dark: var(--glpi-mainmenu-bg);
+    --glpi-illustrations-header-light: var(--glpi-helpdesk-header);
+    --glpi-illustrations-primary: var(--tblr-primary);
 }
 
 @media(prefers-reduced-motion) {

diff --git a/css/palettes/_aerialgreen.scss b/css/palettes/_aerialgreen.scss
@@ -36,6 +36,7 @@
     --tblr-secondary: #768363;
     --tblr-secondary-fg: #fcfcfc;
     --tblr-link-color-rgb: 69, 148, 54;
-    --glpi-mainmenu-bg: #459436;
+    --glpi-mainmenu-bg: #459436; // hsv(110°, 47%, 40%)
+    --glpi-helpdesk-header: hsl(111deg, 41%, 85%);
     --glpi-mainmenu-fg: #f4f6fa;
 }
diff --git a/css/palettes/_automn.scss b/css/palettes/_automn.scss
@@ -37,6 +37,7 @@
     --tblr-secondary: #757575;
     --tblr-secondary-fg: #f4f6fa;
     --tblr-link-color-rgb: 192, 111, 61;
-    --glpi-mainmenu-bg: #8b4d34;
+    --glpi-mainmenu-bg: #8b4d34; // hsv(17°, 46%, 37%)
+    --glpi-helpdesk-header: hsl(18deg, 41%, 85%);
     --glpi-mainmenu-fg: #f4f6fa;
 }
diff --git a/css/palettes/_classic.scss b/css/palettes/_classic.scss
@@ -37,6 +37,7 @@
     --tblr-secondary: #888373;
     --tblr-secondary-fg: #8f5a0a;
     --tblr-link-color-rgb: 101, 153, 0;
-    --glpi-mainmenu-bg: #98a458;
+    --glpi-mainmenu-bg: #98a458; // hsl(69°, 30%, 49%)
+    --glpi-helpdesk-header: hsl(70deg, 26%, 85%);
     --glpi-mainmenu-fg: #000;
 }
diff --git a/css/palettes/_clockworkorange.scss b/css/palettes/_clockworkorange.scss
@@ -35,6 +35,7 @@
     --tblr-primary-rgb: 252, 121, 98;
     --tblr-primary-fg: #fff;
     --tblr-link-color-rgb: 179, 56, 34;
-    --glpi-mainmenu-bg: #b2341c;
+    --glpi-mainmenu-bg: #b2341c; // hsl(10deg, 73%, 40%);
+    --glpi-helpdesk-header: hsl(11deg, 65%, 85%);
     --glpi-mainmenu-fg: #fce7e4;
 }
diff --git a/css/palettes/_dark.scss b/css/palettes/_dark.scss
@@ -35,6 +35,7 @@
     --tblr-primary-rgb: 88, 89, 87;
     --tblr-primary-fg: #fff;
     --tblr-link-color-rgb: 22, 21, 20;
-    --glpi-mainmenu-bg: #161514;
+    --glpi-mainmenu-bg: #161514; // hsl(30deg, 5%, 8%)
+    --glpi-helpdesk-header: hsl(31deg, 5%, 75%);
     --glpi-mainmenu-fg: #fff;
 }
diff --git a/css/palettes/_darker.scss b/css/palettes/_darker.scss
@@ -55,7 +55,9 @@ $is-dark: true;
     --tblr-muted: #aaa;
     --tblr-badge-bg: var(--tblr-light);
     --tblr-badge-color: var(--tblr-dark);
-    --glpi-mainmenu-bg: #242323;
+    --glpi-mainmenu-bg: #242323; // hsl(0deg, 1%, 14%)
+    --glpi-helpdesk-header: #1f1e1e;
+    --glpi-illustrations-header-light: hsl(31deg, 5%, 75%);
     --glpi-mainmenu-fg: #f4f6fa;
     --glpi-form-header-border-color: transparent;
     --glpi-form-header-fg: var(--tblr-light);

diff --git a/css/palettes/_flood.scss b/css/palettes/_flood.scss
@@ -37,7 +37,8 @@
     --tblr-link-color-rgb: 0, 101, 115;
     --tblr-badge-bg: #d0d9f0;
     --tblr-badge-color: rgb(58, 73, 102);
-    --glpi-mainmenu-bg: #006573;
+    --glpi-mainmenu-bg: #006573; // hsl(187deg, 100%, 23%);
+    --glpi-helpdesk-header: hsl(188deg, 92%, 90%);
     --glpi-mainmenu-fg: #f4f6fa;
     --glpi-search-bg: #fcf7f1;
     --glpi-search-fg: #756d61;

diff --git a/css/palettes/_greenflat.scss b/css/palettes/_greenflat.scss
@@ -34,6 +34,7 @@
 :root[data-glpi-theme="greenflat"] {
     --tblr-primary-rgb: 254, 201, 92;
     --tblr-link-color-rgb: 0, 122, 88;
-    --glpi-mainmenu-bg: #09a071;
+    --glpi-mainmenu-bg: #09a071; // hsl(161deg, 89%, 33%)
+    --glpi-helpdesk-header: hsl(162deg, 82%, 85%);
     --glpi-mainmenu-fg: #fff;
 }
diff --git a/css/palettes/_hipster.scss b/css/palettes/_hipster.scss
@@ -37,6 +37,7 @@
     --tblr-secondary: #d6665a;
     --tblr-secondary-fg: #fff;
     --tblr-link-color-rgb: 117, 164, 139;
-    --glpi-mainmenu-bg: #d6665a;
+    --glpi-mainmenu-bg: #d6665a; // hsl(6deg, 60%, 60%)
+    --glpi-helpdesk-header: hsl(7deg, 54%, 85%);
     --glpi-mainmenu-fg: #ffd2ca;
 }
diff --git a/css/palettes/_icecream.scss b/css/palettes/_icecream.scss
@@ -37,6 +37,7 @@
     --tblr-secondary: #113f59;
     --tblr-secondary-fg: #a9e3e4;
     --tblr-link-color-rgb: 20, 146, 148;
-    --glpi-mainmenu-bg: #113f59;
+    --glpi-mainmenu-bg: #113f59; // hsl(202deg, 68%, 21%)
+    --glpi-helpdesk-header: hsl(203deg, 63%, 85%);
     --glpi-mainmenu-fg: #f3edd3;
 }
diff --git a/css/palettes/_lightblue.scss b/css/palettes/_lightblue.scss
@@ -37,6 +37,7 @@
     --tblr-link-color-rgb: 44, 115, 167;
     --tblr-badge-bg: #d0d9f0;
     --tblr-badge-color: rgb(58, 73, 102);
-    --glpi-mainmenu-bg: #1a7ab2;
+    --glpi-mainmenu-bg: #1a7ab2; // hsl(202deg, 75%, 40%)
+    --glpi-helpdesk-header: hsl(203deg, 70%, 85%);
     --glpi-mainmenu-fg: #f4f6fa;
 }
diff --git a/css/palettes/_midnight.scss b/css/palettes/_midnight.scss
@@ -55,6 +55,8 @@ $is-dark: true;
     --tblr-badge-bg: var(--tblr-light);
     --tblr-badge-color: var(--tblr-dark);
     --glpi-mainmenu-bg: var(--tblr-body-bg);
+    --glpi-helpdesk-header: #1f1e1e;
+    --glpi-illustrations-header-light: hsl(31deg, 5%, 75%);
     --glpi-mainmenu-fg: var(--tblr-body-color);
     --glpi-form-header-fg: #6ba8f3;
     --glpi-form-header-border-color: transparent;

diff --git a/css/palettes/_premiumred.scss b/css/palettes/_premiumred.scss
@@ -35,6 +35,7 @@
     --tblr-primary-rgb: 251, 99, 86;
     --tblr-primary-fg: #fff;
     --tblr-link-color-rgb: 200, 50, 38;
-    --glpi-mainmenu-bg: #a2291f;
+    --glpi-mainmenu-bg: #a2291f; // hsl(5deg, 68%, 38%)
+    --glpi-helpdesk-header: hsl(6deg, 63%, 85%);
     --glpi-mainmenu-fg: #f3eae9;
 }
diff --git a/css/palettes/_purplehaze.scss b/css/palettes/_purplehaze.scss
@@ -35,6 +35,7 @@
     --tblr-primary-rgb: 115, 110, 185;
     --tblr-primary-fg: #fff;
     --tblr-link-color-rgb: 86, 75, 127;
-    --glpi-mainmenu-bg: #353166;
+    --glpi-mainmenu-bg: #353166; // hsl(245deg, 35%, 30%)
+    --glpi-helpdesk-header: hsl(246deg, 58%, 85%);
     --glpi-mainmenu-fg: #fff;
 }
diff --git a/css/palettes/_teclib.scss b/css/palettes/_teclib.scss
@@ -35,6 +35,7 @@
     --tblr-primary-rgb: 188, 218, 26;
     --tblr-primary-fg: #353b17;
     --tblr-link-color-rgb: 169, 88, 185;
-    --glpi-mainmenu-bg: #a958b9;
+    --glpi-mainmenu-bg: #a958b9; // hsl(290deg, 41%, 54%)
+    --glpi-helpdesk-header: hsl(291deg, 37%, 85%);
     --glpi-mainmenu-fg: #fff;
 }
diff --git a/css/palettes/_vintage.scss b/css/palettes/_vintage.scss
@@ -35,6 +35,7 @@
     --tblr-primary-rgb: 249, 32, 29;
     --tblr-primary-fg: #fff;
     --tblr-link-color-rgb: 191, 8, 5;
-    --glpi-mainmenu-bg: #064260;
+    --glpi-mainmenu-bg: #064260; // hsl(200deg, 88%, 20%)
+    --glpi-helpdesk-header: hsl(201deg, 83%, 85%);
     --glpi-mainmenu-fg: #fff;
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
         "@fullcalendar/rrule": "^4.4.2",
         "@fullcalendar/timegrid": "^4.4.2",
         "@fullcalendar/timeline": "^4.4.3",
+        "@glpi-project/illustrations": "^0.1.2",
         "@tabler/core": "^1.0.0-beta20",
         "@tabler/icons-webfont": "^3.23.0",
         "animate.css": "^4.1.1",

diff --git a/phpunit/functional/Glpi/Helpdesk/DefaultDataManagerTest.php b/phpunit/functional/Glpi/Helpdesk/DefaultDataManagerTest.php
@@ -366,7 +366,7 @@ public function testDefaultTilesAreValid(): void
     {
         // Arrange: load valid illustration names
         $illustration_manager = new IllustrationManager();
-        $valid_illustrations = $illustration_manager->getAllIllustrationsNames();
+        $valid_icons = $illustration_manager->getAllIconsIds();
 
         // Act: load the default tiles
         $profile_tiles = (new Profile_Tile())->find([]);
@@ -384,7 +384,7 @@ public function testDefaultTilesAreValid(): void
             $this->assertInstanceOf(TileInterface::class, $tile);
             $this->assertNotEmpty($tile->getTitle());
             $this->assertNotEmpty($tile->getDescription());
-            $this->assertContains($tile->getIllustration(), $valid_illustrations);
+            $this->assertContains($tile->getIllustration(), $valid_icons);
             $this->assertNotEmpty($tile->getTileUrl());
         }
     }

diff --git a/phpunit/functional/Glpi/Helpdesk/Tile/TilesManagerTest.php b/phpunit/functional/Glpi/Helpdesk/Tile/TilesManagerTest.php
@@ -67,13 +67,13 @@ public function testTilesCanBeAddedToHelpdeskProfiles(): void
         $manager->addTile($profile, ExternalPageTile::class, [
             'title'        => "GLPI project",
             'description'  => "Link to GLPI project website",
-            'illustration' => "request-service.svg",
+            'illustration' => "request-service",
             'url'          => "https://glpi-project.org",
         ]);
         $manager->addTile($profile, GlpiPageTile::class, [
             'title'        => "FAQ",
             'description'  => "Link to the FAQ",
-            'illustration' => "browse-help.svg",
+            'illustration' => "browse-kb",
             'page'         => GlpiPageTile::PAGE_FAQ,
         ]);
 
@@ -86,14 +86,14 @@ public function testTilesCanBeAddedToHelpdeskProfiles(): void
         $this->assertInstanceOf(ExternalPageTile::class, $first_tile);
         $this->assertEquals("GLPI project", $first_tile->getTitle());
         $this->assertEquals("Link to GLPI project website", $first_tile->getDescription());
-        $this->assertEquals("request-service.svg", $first_tile->getIllustration());
+        $this->assertEquals("request-service", $first_tile->getIllustration());
         $this->assertEquals("https://glpi-project.org", $first_tile->getTileUrl());
 
         $second_tile = $tiles[1];
         $this->assertInstanceOf(GlpiPageTile::class, $second_tile);
         $this->assertEquals("FAQ", $second_tile->getTitle());
         $this->assertEquals("Link to the FAQ", $second_tile->getDescription());
-        $this->assertEquals("browse-help.svg", $second_tile->getIllustration());
+        $this->assertEquals("browse-kb", $second_tile->getIllustration());
         $this->assertEquals("/glpi/front/helpdesk.faq.php", $second_tile->getTileUrl());
     }
 
@@ -113,7 +113,7 @@ public function testTilesCantBeAddedToCentralProfiles(): void
         $manager->addTile($profile, ExternalPageTile::class, [
             'title'        => "GLPI project",
             'description'  => "Link to GLPI project website",
-            'illustration' => "request-service.svg",
+            'illustration' => "request-service",
             'url'          => "https://glpi-project.org",
         ]);
     }