From cddd016e5384397e24b3e95e81a7d3f72e4ffb7e Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Wed, 25 May 2022 13:35:27 -0400
Subject: [PATCH] fix(administration(js)): add rgba colors to theme preview

---
 UI/Templates/AdministrationUI/UIxThemePreview.wox     | 11 ++++++++++-
 .../js/Administration/ThemePreviewController.js       |  5 +++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/UI/Templates/AdministrationUI/UIxThemePreview.wox b/UI/Templates/AdministrationUI/UIxThemePreview.wox
index 3a22fb165..4a8420299 100644
--- a/UI/Templates/AdministrationUI/UIxThemePreview.wox
+++ b/UI/Templates/AdministrationUI/UIxThemePreview.wox
@@ -16,9 +16,18 @@
         <h3 class="md-title">Palettes</h3>
         <md-subheader>Accessible from <a href="https://material.angularjs.org/latest/api/directive/mdColors">md-colors</a> and <a href="https://material.angularjs.org/latest/api/service/$mdThemingProvider">$mdThemingProvider</a></md-subheader>
         <md-list ng-repeat="palette in ['primary', 'accent', 'warn', 'background']">
+          <md-subheader>
+            <div layout="row">
+              <strong flex="">{{ palette }}</strong>
+              <strong>{{ ctrl.defaultTheme.colors[palette].name }}</strong>
+            </div>
+          </md-subheader>
+          <md-divider><!-- divider --></md-divider>
           <md-list-item
             ng-repeat="hex in ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', 'A100', 'A200', 'A400', 'A700']"
-            md-colors="{backgroundColor: '{{ palette }}-{{ hex }}'}">{{ palette }}-{{ hex }}</md-list-item>
+            md-colors="{backgroundColor: '{{ palette }}-{{ hex }}'}">
+            <div flex=" ">{{ palette }}-{{ hex }}</div>
+            <div class="md-caption">{{ ctrl.getColor(palette + '-' + hex) }}</div></md-list-item>
         </md-list>
       </div>
       <div flex="50">
diff --git a/UI/WebServerResources/js/Administration/ThemePreviewController.js b/UI/WebServerResources/js/Administration/ThemePreviewController.js
index a83c50615..b72cdd425 100644
--- a/UI/WebServerResources/js/Administration/ThemePreviewController.js
+++ b/UI/WebServerResources/js/Administration/ThemePreviewController.js
@@ -25,10 +25,11 @@
   /**
    * @ngInject
    */
-  ThemePreviewController.$inject = ['$mdTheming'];
-  function ThemePreviewController($mdTheming) {
+  ThemePreviewController.$inject = ['$mdTheming', '$mdColors'];
+  function ThemePreviewController($mdTheming, $mdColors) {
     this.defaultTheme = $mdTheming.THEMES[$mdTheming.defaultTheme()];
     this.jsonDefaultTheme = JSON.stringify(this.defaultTheme, undefined, 2);
+    this.getColor = $mdColors.getThemeColor;
   }
 
   angular