From b28d4ee5d72cfbd02edca8d00c87d340aa3d1ef1 Mon Sep 17 00:00:00 2001 From: Alexandre Aubin Date: Tue, 19 Mar 2019 01:12:21 +0100 Subject: [PATCH] Propagate previous changes to other themes --- portal/assets/themes/clouds/custom.js | 0 .../assets/themes/clouds/custom_overlay.css | 17 ++++++ .../clouds/{custom.css => custom_portal.css} | 13 ++--- portal/assets/themes/clouds/custom_portal.js | 33 ++++++++++++ .../assets/themes/default/custom_overlay.css | 2 +- portal/assets/themes/random/custom.css | 6 --- .../assets/themes/random/custom_overlay.css | 14 +++++ portal/assets/themes/random/custom_portal.css | 13 +++++ .../random/{custom.js => custom_portal.js} | 52 +++++++++++++------ portal/assets/themes/vapor/custom.js | 0 portal/assets/themes/vapor/custom_overlay.css | 14 +++++ .../vapor/{custom.css => custom_portal.css} | 7 +++ portal/assets/themes/vapor/custom_portal.js | 33 ++++++++++++ 13 files changed, 175 insertions(+), 29 deletions(-) delete mode 100644 portal/assets/themes/clouds/custom.js create mode 100644 portal/assets/themes/clouds/custom_overlay.css rename portal/assets/themes/clouds/{custom.css => custom_portal.css} (70%) create mode 100644 portal/assets/themes/clouds/custom_portal.js delete mode 100644 portal/assets/themes/random/custom.css create mode 100644 portal/assets/themes/random/custom_overlay.css create mode 100644 portal/assets/themes/random/custom_portal.css rename portal/assets/themes/random/{custom.js => custom_portal.js} (67%) delete mode 100644 portal/assets/themes/vapor/custom.js create mode 100644 portal/assets/themes/vapor/custom_overlay.css rename portal/assets/themes/vapor/{custom.css => custom_portal.css} (91%) create mode 100644 portal/assets/themes/vapor/custom_portal.js diff --git a/portal/assets/themes/clouds/custom.js b/portal/assets/themes/clouds/custom.js deleted file mode 100644 index e69de29..0000000 diff --git a/portal/assets/themes/clouds/custom_overlay.css b/portal/assets/themes/clouds/custom_overlay.css new file mode 100644 index 0000000..7f1a000 --- /dev/null +++ b/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"); +} diff --git a/portal/assets/themes/clouds/custom.css b/portal/assets/themes/clouds/custom_portal.css similarity index 70% rename from portal/assets/themes/clouds/custom.css rename to portal/assets/themes/clouds/custom_portal.css index 9b45b42..868e1ae 100644 --- a/portal/assets/themes/clouds/custom.css +++ b/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"); -} diff --git a/portal/assets/themes/clouds/custom_portal.js b/portal/assets/themes/clouds/custom_portal.js new file mode 100644 index 0000000..80c27bd --- /dev/null +++ b/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 +} +*/ diff --git a/portal/assets/themes/default/custom_overlay.css b/portal/assets/themes/default/custom_overlay.css index ce40a24..0074f3e 100644 --- a/portal/assets/themes/default/custom_overlay.css +++ b/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 diff --git a/portal/assets/themes/random/custom.css b/portal/assets/themes/random/custom.css deleted file mode 100644 index b9f3ad9..0000000 --- a/portal/assets/themes/random/custom.css +++ /dev/null @@ -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; -} diff --git a/portal/assets/themes/random/custom_overlay.css b/portal/assets/themes/random/custom_overlay.css new file mode 100644 index 0000000..0074f3e --- /dev/null +++ b/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 +=============================================================================== +*/ diff --git a/portal/assets/themes/random/custom_portal.css b/portal/assets/themes/random/custom_portal.css new file mode 100644 index 0000000..9018fb6 --- /dev/null +++ b/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; +} diff --git a/portal/assets/themes/random/custom.js b/portal/assets/themes/random/custom_portal.js similarity index 67% rename from portal/assets/themes/random/custom.js rename to portal/assets/themes/random/custom_portal.js index acb7783..0524a95 100644 --- a/portal/assets/themes/random/custom.js +++ b/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 - Array.each(document.getElementsByClassName("app-tile"), ynhLib.set_app_tile_style); + // set apps colors + Array.each(document.getElementsByClassName("app-tile"), ynhLib.set_app_tile_style); - // log color css string - var chosenLogoStyleString = ynhLib.logo.makeLogoStyleString(); + // log color css string + var chosenLogoStyleString = ynhLib.logo.makeLogoStyleString(); - // set logo color in portal - var ynhLogo = document.getElementById("ynh-logo"); - if (ynhLogo) ynhLogo.setAttribute("style", chosenLogoStyleString); + // set logo color in portal + var ynhLogo = document.getElementById("ynh-logo"); + 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) - var overlaySwitch = document.getElementById("ynh-overlay-switch"); - if (overlaySwitch) overlaySwitch.setAttribute("style", chosenLogoStyleString); +/*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(); -}); + // 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); +} diff --git a/portal/assets/themes/vapor/custom.js b/portal/assets/themes/vapor/custom.js deleted file mode 100644 index e69de29..0000000 diff --git a/portal/assets/themes/vapor/custom_overlay.css b/portal/assets/themes/vapor/custom_overlay.css new file mode 100644 index 0000000..0074f3e --- /dev/null +++ b/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 +=============================================================================== +*/ diff --git a/portal/assets/themes/vapor/custom.css b/portal/assets/themes/vapor/custom_portal.css similarity index 91% rename from portal/assets/themes/vapor/custom.css rename to portal/assets/themes/vapor/custom_portal.css index dba5e05..ead4d5b 100644 --- a/portal/assets/themes/vapor/custom.css +++ b/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 ========================================================================== */ diff --git a/portal/assets/themes/vapor/custom_portal.js b/portal/assets/themes/vapor/custom_portal.js new file mode 100644 index 0000000..80c27bd --- /dev/null +++ b/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 +} +*/