drop palette preview pics

glpi-project · Oct 19, 2024 · 5192c7b · 5192c7b
1 parent 0644b93
commit 5192c7b
Show file tree

Hide file tree

Showing 37 changed files with 138 additions and 1 deletion.
diff --git a/css/palettes/_aerialgreen.scss b/css/palettes/_aerialgreen.scss
@@ -38,4 +38,8 @@
  --tblr-link-color-rgb: 69, 148, 54;
  --glpi-mainmenu-bg: #459436;
  --glpi-mainmenu-fg: #f4f6fa;
+ --glpi-palette-color-1: #459436;
+ --glpi-palette-color-2: #365731;
+ --glpi-palette-color-3: #8ec547;
+ --glpi-palette-color-4: #fec95c;
 }
diff --git a/css/palettes/_auror.scss b/css/palettes/_auror.scss
@@ -32,3 +32,9 @@
  */
 
 // This palette is literally just the default light palette. See "../includes/palette_light.scss".
+:root[data-glpi-theme="auror"] {
+ --glpi-palette-color-1: #1b2f62;
+ --glpi-palette-color-2: #fff;
+ --glpi-palette-color-3: #3a5693;
+ --glpi-palette-color-4: #fec95c;
+}
diff --git a/css/palettes/_auror_dark.scss b/css/palettes/_auror_dark.scss
@@ -67,4 +67,8 @@ $is-dark: true;
  --glpi-timeline-fup-bg: #1c2430;
  --glpi-timeline-fup-fg: #8892a8;
  --glpi-timeline-fup-border: #2f3d50;
+ --glpi-palette-color-1: #1b2f62;
+ --glpi-palette-color-2: #131425;
+ --glpi-palette-color-3: #3a5693;
+ --glpi-palette-color-4: #fec95c;
 }
diff --git a/css/palettes/_automn.scss b/css/palettes/_automn.scss
@@ -39,4 +39,8 @@
  --tblr-link-color-rgb: 192, 111, 61;
  --glpi-mainmenu-bg: #8b4d34;
  --glpi-mainmenu-fg: #f4f6fa;
+ --glpi-palette-color-1: #8b4d34;
+ --glpi-palette-color-2: #58372e;
+ --glpi-palette-color-3: #f2b265;
+ --glpi-palette-color-4: #c06f3d;
 }
diff --git a/css/palettes/_classic.scss b/css/palettes/_classic.scss
@@ -39,4 +39,8 @@
  --tblr-link-color-rgb: 101, 153, 0;
  --glpi-mainmenu-bg: #98a458;
  --glpi-mainmenu-fg: #000;
+ --glpi-palette-color-1: #E1D39E;
+ --glpi-palette-color-2: #877C52;
+ --glpi-palette-color-3: #C0CC7B;
+ --glpi-palette-color-4: #FEC95C;
 }
diff --git a/css/palettes/_clockworkorange.scss b/css/palettes/_clockworkorange.scss
@@ -37,4 +37,8 @@
  --tblr-link-color-rgb: 179, 56, 34;
  --glpi-mainmenu-bg: #b2341c;
  --glpi-mainmenu-fg: #fce7e4;
+ --glpi-palette-color-1: #1b2f62;
+ --glpi-palette-color-2: #131425;
+ --glpi-palette-color-3: #3a5693;
+ --glpi-palette-color-4: #fec95c;
 }
diff --git a/css/palettes/_dark.scss b/css/palettes/_dark.scss
@@ -37,4 +37,8 @@
  --tblr-link-color-rgb: 22, 21, 20;
  --glpi-mainmenu-bg: #161514;
  --glpi-mainmenu-fg: #fff;
+ --glpi-palette-color-1: #161514;
+ --glpi-palette-color-2: #fff;
+ --glpi-palette-color-3: #585957;
+ --glpi-palette-color-4: #3f403e;
 }
diff --git a/css/palettes/_darker.scss b/css/palettes/_darker.scss
@@ -66,4 +66,8 @@ $is-dark: true;
  --glpi-tabs-active-fg: var(--tblr-muted);
  --glpi-tabs-active-border-color: transparent;
  --glpi-itil-secondary-bg: #222121;
+ --glpi-palette-color-1: #161514;
+ --glpi-palette-color-2: #131e21;
+ --glpi-palette-color-3: #585957;
+ --glpi-palette-color-4: #3f403e;
 }
diff --git a/css/palettes/_flood.scss b/css/palettes/_flood.scss
@@ -41,4 +41,8 @@
  --glpi-mainmenu-fg: #f4f6fa;
  --glpi-search-bg: #fcf7f1;
  --glpi-search-fg: #756d61;
+ --glpi-palette-color-1: #006573;
+ --glpi-palette-color-2: #005572;
+ --glpi-palette-color-3: #81beaa;
+ --glpi-palette-color-4: #f4d4ad;
 }
diff --git a/css/palettes/_greenflat.scss b/css/palettes/_greenflat.scss
@@ -36,4 +36,8 @@
  --tblr-link-color-rgb: 0, 122, 88;
  --glpi-mainmenu-bg: #09a071;
  --glpi-mainmenu-fg: #fff;
+ --glpi-palette-color-1: #09a071;
+ --glpi-palette-color-2: #004630;
+ --glpi-palette-color-3: #007a58;
+ --glpi-palette-color-4: #fec95c;
 }
diff --git a/css/palettes/_hipster.scss b/css/palettes/_hipster.scss
@@ -39,4 +39,8 @@
  --tblr-link-color-rgb: 117, 164, 139;
  --glpi-mainmenu-bg: #d6665a;
  --glpi-mainmenu-fg: #ffd2ca;
+ --glpi-palette-color-1: #dc9b74;
+ --glpi-palette-color-2: #75a48b;
+ --glpi-palette-color-3: #42282e;
+ --glpi-palette-color-4: #d6665a;
 }
diff --git a/css/palettes/_icecream.scss b/css/palettes/_icecream.scss
@@ -39,4 +39,8 @@
  --tblr-link-color-rgb: 20, 146, 148;
  --glpi-mainmenu-bg: #113f59;
  --glpi-mainmenu-fg: #f3edd3;
+ --glpi-palette-color-1: #113f59;
+ --glpi-palette-color-2: #19bec0;
+ --glpi-palette-color-3: #f3edd3;
+ --glpi-palette-color-4: #d54f58;
 }
diff --git a/css/palettes/_lightblue.scss b/css/palettes/_lightblue.scss
@@ -39,4 +39,8 @@
  --tblr-badge-color: rgb(58, 73, 102);
  --glpi-mainmenu-bg: #1a7ab2;
  --glpi-mainmenu-fg: #f4f6fa;
+ --glpi-palette-color-1: #1a7ab2;
+ --glpi-palette-color-2: #41b1ff;
+ --glpi-palette-color-3: #7cc7f1;
+ --glpi-palette-color-4: #fff;
 }
diff --git a/css/palettes/_midnight.scss b/css/palettes/_midnight.scss
@@ -68,4 +68,8 @@ $is-dark: true;
  --glpi-timeline-fup-bg: #1c2430;
  --glpi-timeline-fup-fg: #8892a8;
  --glpi-timeline-fup-border: #2f3d50;
+ --glpi-palette-color-1: #000;
+ --glpi-palette-color-2: #1b1b1b;
+ --glpi-palette-color-3: #858585;
+ --glpi-palette-color-4: #c2c2c2;
 }
diff --git a/css/palettes/_premiumred.scss b/css/palettes/_premiumred.scss
@@ -37,4 +37,8 @@
  --tblr-link-color-rgb: 200, 50, 38;
  --glpi-mainmenu-bg: #a2291f;
  --glpi-mainmenu-fg: #f3eae9;
+ --glpi-palette-color-1: #a2291f;
+ --glpi-palette-color-2: #621913;
+ --glpi-palette-color-3: #e2392b;
+ --glpi-palette-color-4: #c83226;
 }
diff --git a/css/palettes/_purplehaze.scss b/css/palettes/_purplehaze.scss
@@ -37,4 +37,8 @@
  --tblr-link-color-rgb: 86, 75, 127;
  --glpi-mainmenu-bg: #353166;
  --glpi-mainmenu-fg: #fff;
+ --glpi-palette-color-1: #363268;
+ --glpi-palette-color-2: #564b7f;
+ --glpi-palette-color-3: #8783c2;
+ --glpi-palette-color-4: #fff;
 }
diff --git a/css/palettes/_teclib.scss b/css/palettes/_teclib.scss
@@ -37,4 +37,8 @@
  --tblr-link-color-rgb: 169, 88, 185;
  --glpi-mainmenu-bg: #a958b9;
  --glpi-mainmenu-fg: #fff;
+ --glpi-palette-color-1: #ba77c8;
+ --glpi-palette-color-2: #8e21a1;
+ --glpi-palette-color-3: #f1f1f2;
+ --glpi-palette-color-4: #bcda1a;
 }
diff --git a/css/palettes/_vintage.scss b/css/palettes/_vintage.scss
@@ -37,4 +37,8 @@
  --tblr-link-color-rgb: 191, 8, 5;
  --glpi-mainmenu-bg: #064260;
  --glpi-mainmenu-fg: #fff;
+ --glpi-palette-color-1: #064260;
+ --glpi-palette-color-2: #700618;
+ --glpi-palette-color-3: #bf0805;
+ --glpi-palette-color-4: #f2ef9f;
 }
diff --git a/css/palettes/previews/aerialgreen.png b/css/palettes/previews/aerialgreen.png
diff --git a/css/palettes/previews/auror.png b/css/palettes/previews/auror.png
diff --git a/css/palettes/previews/auror_dark.png b/css/palettes/previews/auror_dark.png
diff --git a/css/palettes/previews/automn.png b/css/palettes/previews/automn.png
diff --git a/css/palettes/previews/classic.png b/css/palettes/previews/classic.png
diff --git a/css/palettes/previews/clockworkorange.png b/css/palettes/previews/clockworkorange.png
diff --git a/css/palettes/previews/dark.png b/css/palettes/previews/dark.png
diff --git a/css/palettes/previews/darker.png b/css/palettes/previews/darker.png
diff --git a/css/palettes/previews/flood.png b/css/palettes/previews/flood.png
diff --git a/css/palettes/previews/greenflat.png b/css/palettes/previews/greenflat.png
diff --git a/css/palettes/previews/hipster.png b/css/palettes/previews/hipster.png
diff --git a/css/palettes/previews/icecream.png b/css/palettes/previews/icecream.png
diff --git a/css/palettes/previews/lightblue.png b/css/palettes/previews/lightblue.png
diff --git a/css/palettes/previews/midnight.png b/css/palettes/previews/midnight.png
diff --git a/css/palettes/previews/premiumred.png b/css/palettes/previews/premiumred.png
diff --git a/css/palettes/previews/purplehaze.png b/css/palettes/previews/purplehaze.png
diff --git a/css/palettes/previews/teclib.png b/css/palettes/previews/teclib.png
diff --git a/css/palettes/previews/vintage.png b/css/palettes/previews/vintage.png
diff --git a/templates/pages/setup/general/preferences_setup.html.twig b/templates/pages/setup/general/preferences_setup.html.twig
@@ -123,12 +123,75 @@
  }, __('CSV delimiter'), field_options) }}
 
  <script>
+ function getThemeRules() {
+ // Calculate list of relevant CSS rules only once
+ if (window._theme_rules === undefined) {
+ window._theme_rules = [];
+ const stylesheets = document.styleSheets;
+ for (let i = 0; i < stylesheets.length; i++) {
+ if (stylesheets[i].href) {
+ const rules = stylesheets[i].cssRules;
+ for (let j = 0; j < rules.length; j++) {
+ if (rules[j]['selectorText'] !== undefined && rules[j]['selectorText'].includes('data-glpi-theme')) {
+ window._theme_rules.push(rules[j]);
+ }
+ }
+ }
+ }
+ }
+ return window._theme_rules;
+ }
+
+ function getThemePreviewURL(theme_id) {
+ const resolve_color_value = (palette_rule, prop_name) => {
+ let value = palette_rule.getPropertyValue(prop_name).trim();
+ if (value.startsWith('var(')) {
+ // The color is a CSS variable, resolve it
+ value = resolve_color_value(palette_rule, value.substring(4, value.length - 1).trim());
+ }
+ return value;
+ }
+
+ const theme_rules = getThemeRules();
+ const palette_colors = {};
+
+ for (let j = 0; j < theme_rules.length; j++) {
+ if (theme_rules[j]['selectorText'] !== undefined && theme_rules[j]['selectorText'].includes(`data-glpi-theme="${theme_id}"`)) {
+ for (let k = 1; k < 5; k++) {
+ const color = resolve_color_value(theme_rules[j].style, `--glpi-palette-color-${k}`);
+ if (color !== '') {
+ palette_colors[`--glpi-palette-color-${k}`] = color;
+ }
+ }
+ }
+ }
+
+ if (Object.keys(palette_colors).length === 4) {
+ const canvas = document.createElement('canvas');
+ canvas.width = 60;
+ canvas.height = 20;
+ const ctx = canvas.getContext('2d');
+ // draw the 4 colors as quadrants
+ ctx.fillStyle = palette_colors['--glpi-palette-color-1'] ?? 'white';
+ ctx.fillRect(0, 0, 30, 10);
+ ctx.fillStyle = palette_colors['--glpi-palette-color-2'] ?? 'white';
+ ctx.fillRect(30, 0, 30, 10);
+ ctx.fillStyle = palette_colors['--glpi-palette-color-3'] ?? 'white';
+ ctx.fillRect(0, 10, 30, 10);
+ ctx.fillStyle = palette_colors['--glpi-palette-color-4'] ?? 'white';
+ ctx.fillRect(30, 10, 30, 10);
+ return canvas.toDataURL();
+ }
+ return `{{ path('/front/palette_preview.php')}}?key=${theme_id}`;
+ }
+
  function formatThemes(theme) {
  if (!theme.id) {
  return theme.text;
  }
+
  return $('<span></span>').html(
- `<img src="{{ path('/front/palette_preview.php') }}?key=${theme.id}" /> ${theme.text}`
+ `<img src="${getThemePreviewURL(theme.id)}" /> ${theme.text}`
  );
  }
  $('select[name="palette"]').on('change', function(e) {