fixes #987 - Support custom css

dashboard-ui/css/site.css

@@ -1031,7 +1031,7 @@ h1 + .accentButton {
 }
 
 .dashboardFooter {
-    margin-top: 70px;
+    margin-top: 50px;
     text-align: center;
 }
 

dashboard-ui/dashboardgeneral.html

@@ -64,6 +64,11 @@
                                     <input id="txtLoginDisclaimer" type="text" />
                                     <div class="fieldDescription">${LabelLoginDisclaimerHelp}</div>
                                 </li>
+                                <li>
+                                    <label for="txtCustomCss">${LabelCustomCss}</label>
+                                    <textarea id="txtCustomCss" style="font-family:monospace;height:200px!important;"></textarea>
+                                    <div class="fieldDescription">${LabelCustomCssHelp}</div>
+                                </li>
                             </ul>
                         </div>
                     </div>

dashboard-ui/scripts/dashboardgeneral.js

@@ -1,6 +1,7 @@
 (function ($, document, window) {
 
     var brandingConfigKey = "branding";
+    var currentBrandingOptions;
 
     function loadPage(page, config, languageOptions) {
 
@@ -49,7 +50,10 @@
 
         ApiClient.getNamedConfiguration(brandingConfigKey).done(function (config) {
 
+            currentBrandingOptions = config;
+
             $('#txtLoginDisclaimer', page).val(config.LoginDisclaimer || '');
+            $('#txtCustomCss', page).val(config.CustomCss || '');
         });
 
     }).on('pageinit', "#dashboardGeneralPage", function () {
@@ -99,8 +103,15 @@
                     ApiClient.getNamedConfiguration(brandingConfigKey).done(function (brandingConfig) {
 
                         brandingConfig.LoginDisclaimer = $('#txtLoginDisclaimer', form).val();
+                        brandingConfig.CustomCss = $('#txtCustomCss', form).val();
+
+                        var cssChanged = currentBrandingOptions && brandingConfig.CustomCss != currentBrandingOptions.CustomCss;
 
                         ApiClient.updateNamedConfiguration(brandingConfigKey, brandingConfig).done(Dashboard.processServerConfigurationUpdateResult);
+
+                        if (cssChanged) {
+                            Dashboard.showDashboardRefreshNotification();
+                        }
                     });
 
                 });

dashboard-ui/scripts/dashboardpage.js

@@ -798,6 +798,7 @@
             text = "Thank you for supporting Media Browser.";
 
             $('.supporterIconContainer', page).html('<a class="imageLink supporterIcon" href="supporter.html" title="' + text + '"><img src="' + imgUrl + '" style="height:32px;vertical-align: middle; margin-right: .5em;" /></a><span style="position:relative;top:2px;text-decoration:none;">' + text + '</span>');
+            $('.supporterIconContainer', page).hide();
         } else {
 
             imgUrl = "css/images/supporter/nonsupporterbadge.png";

dashboard-ui/scripts/site.js

@@ -194,6 +194,15 @@ var Dashboard = {
         }
     },
 
+    importCss: function (url) {
+        if (document.createStyleSheet) {
+            document.createStyleSheet(url);
+        }
+        else {
+            $('<link rel="stylesheet" type="text/css" href="' + url + '" />').appendTo('head');
+        }
+    },
+
     showError: function (message) {
 
         $.mobile.loading('show', {
@@ -256,7 +265,7 @@ var Dashboard = {
 
             if (Dashboard.initialServerVersion != info.Version) {
 
-                Dashboard.showDashboardVersionWarning();
+                Dashboard.showDashboardRefreshNotification();
             }
         }
 
@@ -329,7 +338,7 @@ var Dashboard = {
         $('#serverRestartWarning').remove();
     },
 
-    showDashboardVersionWarning: function () {
+    showDashboardRefreshNotification: function () {
 
         var html = '<span style="margin-right: 1em;">' + Globalize.translate('MessagePleaseRefreshPage') + '</span>';
 
@@ -1331,6 +1340,7 @@ var Dashboard = {
                 ConnectionManager.addApiClient(ApiClient, true).fail(Dashboard.logout);
             } else {
                 Dashboard.logout();
+                return;
             }
         }
 
@@ -1345,6 +1355,8 @@ var Dashboard = {
         ConnectionManager.addApiClient(ApiClient);
     }
 
+    Dashboard.importCss(ApiClient.getUrl('Branding/Css'));
+
 })();
 
 $(function () {