fix(administration): add theme preview

UI/AdministrationUI/UIxAdministration.m

@@ -1,8 +1,6 @@
 /* UIxAdministration.m - this file is part of SOGo
  *
- * Copyright (C) 2009 Inverse inc.
- *
- * Author: Francis Lachapelle <flachapelle@inverse.ca>
+ * Copyright (C) 2022 Inverse inc.
  *
  * This file is free software; you can redistribute it and/or modify
  * it under the terms of the GNU General Public License as published by
@@ -57,3 +55,12 @@
 }
 
 @end
+
+/* Theme Preview */
+
+@interface UIxThemePreview : UIxComponent
+@end
+
+
+@implementation UIxThemePreview
+@end

UI/AdministrationUI/UIxAdministrationAclEditor.m

@@ -259,7 +259,7 @@
       [users removeObjectForKey: currentUID];
   [clientObject removeAclsForUsers: [users allKeys]];
 
-  return [self jsCloseWithRefreshMethod: nil];
+  return [self responseWithStatus: 200];
 }
 
 - (BOOL) isPublicAccessEnabled

UI/AdministrationUI/product.plist

@@ -18,6 +18,10 @@
           protectedBy = "View";
           pageName = "UIxAdministrationAclEditor";
         };
+        UIxThemePreview = {
+          protectedBy = "View";
+          pageName    = "UIxThemePreview";
+        };
       };
     };
   };

UI/Templates/AdministrationUI/UIxAdministration.wox

@@ -32,6 +32,12 @@
             <md-icon>security</md-icon>
             <p class="sg-item-name"><var:string label:value="Rights"/></p>
           </md-list-item>
+          <md-list-item ng-click="app.go('theme')"
+                        ui-sref="administration.theme"
+                        ui-sref-active="md-default-theme md-background md-bg md-hue-1">
+            <md-icon>palette</md-icon>
+            <p class="sg-item-name"><var:string label:value="Theme Preview"/></p>
+          </md-list-item>
         </md-list>
       </md-content>
     </md-sidenav>

UI/Templates/AdministrationUI/UIxThemePreview.wox

@@ -0,0 +1,63 @@
+<?xml version="1.0" standalone="yes"?>
+<!DOCTYPE container>
+<container
+    xmlns="http://www.w3.org/1999/xhtml"
+    xmlns:var="http://www.skyrix.com/od/binding"
+    xmlns:const="http://www.skyrix.com/od/constant"
+    xmlns:label="OGo:label">
+
+  <md-toolbar layout="row" layout-align="space-between center" class="sg-toolbar-main">
+    <var:component className="UIxTopnavToolbar" />
+  </md-toolbar>
+
+  <md-content class="md-padding">
+    <div class="md-margin" layout="row" layout-padding="">
+      <div flex="50">
+        <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-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-list>
+      </div>
+      <div flex="50">
+        <h3 class="md-title">Foregrounds</h3>
+        <md-list>
+          <md-subheader>Accessible from <a href="https://material.angularjs.org/latest/api/service/$mdThemingProvider">$mdThemingProvider</a> only</md-subheader>
+          <md-list-item class="foreground-1">foreground-1</md-list-item>
+          <md-list-item class="foreground-2">foreground-2</md-list-item>
+          <md-list-item class="foreground-3">foreground-3</md-list-item>
+          <md-list-item class="foreground-4">foreground-4</md-list-item>
+          <md-list-item class="background-contrast">background-contrast</md-list-item>
+          <md-list-item class="background-contrast-secondary">background-contrast-secondary</md-list-item>
+        </md-list>
+        <h3 class="md-title">Backgrounds</h3>
+        <md-list>
+          <md-subheader>Accessible from <a href="https://material.angularjs.org/latest/api/service/$mdThemingProvider">$mdThemingProvider</a> only</md-subheader>
+          <md-list-item class="background-default">background-default ({{ctrl.defaultTheme.colors.background.hues.default }})</md-list-item>
+          <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-item md-colors="{backgroundColor: 'background-hue-1'}">background-hue-1 ({{ctrl.defaultTheme.colors.background.hues['hue-1'] }})</md-list-item>
+          <md-list-item md-colors="{backgroundColor: 'background-hue-2'}">background-hue-2 ({{ctrl.defaultTheme.colors.background.hues['hue-2'] }})</md-list-item>
+          <md-list-item md-colors="{backgroundColor: 'background-hue-3'}">background-hue-3 ({{ctrl.defaultTheme.colors.background.hues['hue-3'] }})</md-list-item>
+        </md-list>
+      </div>
+    </div>
+    <div class="md-margin" layout="row" layout-padding="">
+      <div flex="50">
+        <h3 class="md-title">Components Colors</h3>
+        <div layout="row" ng-repeat="palette in ['primary', 'accent', 'warn']">
+          <md-button class="md-flex md-raised md-{{ palette }}">{{ palette }} ({{ctrl.defaultTheme.colors[palette].hues.default }})</md-button>
+          <md-button class="md-flex md-raised md-{{ palette }} md-hue-1">hue-1 ({{ctrl.defaultTheme.colors[palette].hues['hue-1'] }})</md-button>
+          <md-button class="md-flex md-raised md-{{ palette }} md-hue-2">hue-2 ({{ctrl.defaultTheme.colors[palette].hues['hue-2'] }})</md-button>
+          <md-button class="md-flex md-raised md-{{ palette }} md-hue-3">hue-3 ({{ctrl.defaultTheme.colors[palette].hues['hue-3'] }})</md-button>
+        </div>
+      </div>
+      <div flex="50">
+        <h3 class="md-title">Theme Definition</h3>
+        <md-content><pre>{{ ctrl.jsonDefaultTheme }}</pre></md-content>
+      </div>
+    </div>
+  </md-content>
+
+</container>

UI/WebServerResources/js/Administration/Administration.app.js

@@ -45,6 +45,16 @@
           stateUser: stateUser,
           stateFolder: stateFolder
         }
+      })
+      .state('administration.theme', {
+        url: '/theme',
+        views: {
+          module: {
+            templateUrl: 'UIxThemePreview', // UI/Templates/Administration/UIxThemePreview.wox
+            controller: 'ThemePreviewController',
+            controllerAs: 'ctrl'
+          }
+        }
       });
 
     // if none of the above states are matched, use this as the fallback

UI/WebServerResources/js/Administration/ThemePreviewController.js

@@ -0,0 +1,39 @@
+/* -*- Mode: javascript; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+
+(function() {
+  'use strict';
+
+  /**
+   * @ngInject
+   */
+  configure.$inject = ['$mdThemingProvider'];
+  function configure($mdThemingProvider) {
+
+    $mdThemingProvider.registerStyles([
+      '.foreground-1 { color: "{{foreground-1}}" }',
+      '.foreground-2 { color: "{{foreground-2}}" }',
+      '.foreground-3 { color: "{{foreground-3}}" }',
+      '.foreground-4 { color: "{{foreground-4}}" }',
+      '.background-contrast { color: "{{background-contrast}}" }',
+      '.background-contrast-secondary { color: "{{background-contrast-secondary}}" }',
+      '.background-default { background-color: "{{background-default}}" }',
+    ].join(''));
+
+    $mdThemingProvider.generateThemesOnDemand(false);
+  }
+
+  /**
+   * @ngInject
+   */
+  ThemePreviewController.$inject = ['$mdTheming'];
+  function ThemePreviewController($mdTheming) {
+    this.defaultTheme = $mdTheming.THEMES[$mdTheming.defaultTheme()];
+    this.jsonDefaultTheme = JSON.stringify(this.defaultTheme, undefined, 2);
+  }
+
+  angular
+    .module('SOGo.AdministrationUI')
+    .config(configure)
+    .controller('ThemePreviewController', ThemePreviewController);
+
+})();