Propagate previous changes to other themes

portal/assets/themes/clouds/custom_overlay.css

@@ -0,0 +1,17 @@
+/*
+===============================================================================
+ This file may contain extra CSS rules loaded on all apps page (*if* the app
+ nginx's conf does include the appropriate snippet) for the small YunoHost
+ button in bottom-right corner + portal overlay.
+
+ The yunohost button corresponds to : #ynh-overlay-switch
+ The yunohost portal overlay / iframe corresponds to : #ynh-overlay
+
+ BE CAREFUL that you should *not* add too-general rules that apply to
+ non-yunohost elements (for instance all 'a' or 'p' elements...) as it will
+ likely break app's rendering
+===============================================================================
+*/
+#ynh-overlay-switch {
+  background-image: url("./cloud.png");
+}

portal/assets/themes/clouds/custom_portal.css

@@ -1,3 +1,10 @@
+/*
+===============================================================================
+ This file contain extra CSS rules to customize the YunoHost user portal and
+ can be used to customize app tiles, buttons, etc...
+===============================================================================
+*/
+
 /* Make page texts black */
 .user-container h2,
 .user-container small,
@@ -9,8 +16,6 @@ a.app-tile,
   color: black !important;
 }
 
-/* The layout is slightly different, the apps are scollable but not the headers and footers */
-
 .ynh-user-portal {
   background-image: url("background.jpg");
   background-repeat: no-repeat;
@@ -36,7 +41,3 @@ a.app-tile,
   z-index: 10;
   background-image: url("./cloud.png");
 }
-
-#ynh-overlay-switch {
-  background-image: url("./cloud.png");
-}

portal/assets/themes/clouds/custom_portal.js

@@ -0,0 +1,33 @@
+/*
+===============================================================================
+ This JS file may be used to customize the YunoHost user portal *and* also
+ will be loaded in all app pages if the app nginx's conf does include the
+ appropriate snippet.
+
+ You can monkeypatch init_portal (loading of the user portal) and
+ init_portal_button_and_overlay (loading of the button and overlay...) to do
+ custom stuff
+===============================================================================
+*/
+
+/*
+ * Monkeypatch init_portal to customize the app tile style
+ *
+init_portal_original = init_portal;
+init_portal = function()
+{
+    init_portal_original();
+    // Some stuff here
+}
+*/
+
+/*
+ * Monkey patching example to do custom stuff when loading inside an app
+ *
+init_portal_button_and_overlay_original = init_portal_button_and_overlay;
+init_portal_button_and_overlay = function()
+{
+    init_portal_button_and_overlay_original();
+    // Custom stuff to do when loading inside an app
+}
+*/

portal/assets/themes/default/custom_overlay.css

@@ -2,7 +2,7 @@
 ===============================================================================
  This file may contain extra CSS rules loaded on all apps page (*if* the app
  nginx's conf does include the appropriate snippet) for the small YunoHost
- button in bottom-right corner + portal overlay. 
+ button in bottom-right corner + portal overlay.
 
  The yunohost button corresponds to : #ynh-overlay-switch
  The yunohost portal overlay / iframe corresponds to : #ynh-overlay

portal/assets/themes/random/custom.css

@@ -1,6 +0,0 @@
-.app-tile:focus:after,
-.app-tile:hover:after,
-.app-tile:focus:before,
-.app-tile:hover:before {
-  background:var(--background-color, red) !important;
-}

portal/assets/themes/random/custom_overlay.css

@@ -0,0 +1,14 @@
+/*
+===============================================================================
+ This file may contain extra CSS rules loaded on all apps page (*if* the app
+ nginx's conf does include the appropriate snippet) for the small YunoHost
+ button in bottom-right corner + portal overlay.
+
+ The yunohost button corresponds to : #ynh-overlay-switch
+ The yunohost portal overlay / iframe corresponds to : #ynh-overlay
+
+ BE CAREFUL that you should *not* add too-general rules that apply to
+ non-yunohost elements (for instance all 'a' or 'p' elements...) as it will
+ likely break app's rendering
+===============================================================================
+*/

portal/assets/themes/random/custom_portal.css

@@ -0,0 +1,13 @@
+/*
+===============================================================================
+ This file contain extra CSS rules to customize the YunoHost user portal and
+ can be used to customize app tiles, buttons, etc...
+===============================================================================
+*/
+
+.app-tile:focus:after,
+.app-tile:hover:after,
+.app-tile:focus:before,
+.app-tile:hover:before {
+  background:var(--background-color, red) !important;
+}

portal/assets/themes/random/custom_portal.js

@@ -1,3 +1,14 @@
+/*
+===============================================================================
+ This JS file may be used to customize the YunoHost user portal *and* also
+ will be loaded in all app pages if the app nginx's conf does include the
+ appropriate snippet.
+
+ You can monkeypatch init_portal (loading of the user portal) and
+ init_portal_button_and_overlay (loading of the button and overlay...) to do
+ custom stuff
+===============================================================================
+*/
 
 var ynhLib = {
 
@@ -75,10 +86,6 @@ var ynhLib = {
     return fullQueue;
   },
 
-  onWindowLoad: function(func){
-    window.onload = ynhLib.queue(window.onload, func);
-  },
-
   //
   //                              SET APP ICON STYLE
 
@@ -106,20 +113,33 @@ var ynhLib = {
 // ######################################################################
 // ######################################################################
 
-ynhLib.onWindowLoad(function () {
+/* Monkeypatch init_portal to customize the app tile style */
+init_portal_original = init_portal;
+init_portal = function()
+{
+    init_portal_original();
 
-  // set apps colors
+    // set apps colors
-  Array.each(document.getElementsByClassName("app-tile"), ynhLib.set_app_tile_style);
+    Array.each(document.getElementsByClassName("app-tile"), ynhLib.set_app_tile_style);
 
-  // log color css string
+    // log color css string
-  var chosenLogoStyleString = ynhLib.logo.makeLogoStyleString();
+    var chosenLogoStyleString = ynhLib.logo.makeLogoStyleString();
 
-  // set logo color in portal
+    // set logo color in portal
-  var ynhLogo = document.getElementById("ynh-logo");
+    var ynhLogo = document.getElementById("ynh-logo");
-  if (ynhLogo) ynhLogo.setAttribute("style", chosenLogoStyleString);
+    if (ynhLogo) ynhLogo.setAttribute("style", chosenLogoStyleString);
+}
 
-  // set overlay switch color in apps (NOTE: this is not always working, there is probably a problem of loading order)
+/*Monkey patching example to do custom stuff when loading inside an app */
-  var overlaySwitch = document.getElementById("ynh-overlay-switch");
+init_portal_button_and_overlay_original = init_portal_button_and_overlay;
-  if (overlaySwitch) overlaySwitch.setAttribute("style", chosenLogoStyleString);
+init_portal_button_and_overlay = function()
+{
+    init_portal_button_and_overlay_original();
 
-});
+    // log color css string
+    var chosenLogoStyleString = ynhLib.logo.makeLogoStyleString();
+
+    // set overlay switch color in apps (NOTE: this is not always working, there is probably a problem of loading order)
+    var overlaySwitch = document.getElementById("ynh-overlay-switch");
+    if (overlaySwitch) overlaySwitch.setAttribute("style", chosenLogoStyleString);
+}

portal/assets/themes/vapor/custom_overlay.css

@@ -0,0 +1,14 @@
+/*
+===============================================================================
+ This file may contain extra CSS rules loaded on all apps page (*if* the app
+ nginx's conf does include the appropriate snippet) for the small YunoHost
+ button in bottom-right corner + portal overlay.
+
+ The yunohost button corresponds to : #ynh-overlay-switch
+ The yunohost portal overlay / iframe corresponds to : #ynh-overlay
+
+ BE CAREFUL that you should *not* add too-general rules that apply to
+ non-yunohost elements (for instance all 'a' or 'p' elements...) as it will
+ likely break app's rendering
+===============================================================================
+*/

portal/assets/themes/vapor/custom_portal.css

@@ -1,3 +1,10 @@
+/*
+===============================================================================
+ This file contain extra CSS rules to customize the YunoHost user portal and
+ can be used to customize app tiles, buttons, etc...
+===============================================================================
+*/
+
 /* ==========================================================================
    Vaporwave theme
    ========================================================================== */

portal/assets/themes/vapor/custom_portal.js

@@ -0,0 +1,33 @@
+/*
+===============================================================================
+ This JS file may be used to customize the YunoHost user portal *and* also
+ will be loaded in all app pages if the app nginx's conf does include the
+ appropriate snippet.
+
+ You can monkeypatch init_portal (loading of the user portal) and
+ init_portal_button_and_overlay (loading of the button and overlay...) to do
+ custom stuff
+===============================================================================
+*/
+
+/*
+ * Monkeypatch init_portal to customize the app tile style
+ *
+init_portal_original = init_portal;
+init_portal = function()
+{
+    init_portal_original();
+    // Some stuff here
+}
+*/
+
+/*
+ * Monkey patching example to do custom stuff when loading inside an app
+ *
+init_portal_button_and_overlay_original = init_portal_button_and_overlay;
+init_portal_button_and_overlay = function()
+{
+    init_portal_button_and_overlay_original();
+    // Custom stuff to do when loading inside an app
+}
+*/