From 0c377c3363f416fc6442ac0db79cc5625ae2ff4f Mon Sep 17 00:00:00 2001 From: Alexandre Aubin Date: Tue, 19 Mar 2019 00:17:53 +0100 Subject: [PATCH] Rename css/js files for semantic + explain their purpose --- access.lua | 4 +- .../css/{ynhpanel.css => ynh_overlay.css} | 14 ++ .../css/{ynh-style.css => ynh_portal.css} | 6 + .../assets/js/{ynhpanel.js => ynh_portal.js} | 23 ++- portal/assets/themes/default/custom.css | 148 ------------------ portal/assets/themes/default/custom.js | 11 -- portal/footer.ms | 4 +- portal/header.ms | 4 +- 8 files changed, 42 insertions(+), 172 deletions(-) rename portal/assets/css/{ynhpanel.css => ynh_overlay.css} (91%) rename portal/assets/css/{ynh-style.css => ynh_portal.css} (99%) rename portal/assets/js/{ynhpanel.js => ynh_portal.js} (96%) delete mode 100644 portal/assets/themes/default/custom.css delete mode 100644 portal/assets/themes/default/custom.js diff --git a/access.lua b/access.lua index a171562..5542fc0 100644 --- a/access.lua +++ b/access.lua @@ -328,8 +328,8 @@ end if hlp.is_logged_in() then -- serve ynhpanel files - serveAsset("/ynhpanel.js", "js/ynhpanel.js") - serveAsset("/ynhpanel.css", "css/ynhpanel.css") + serveAsset("/ynh_portal.js", "js/ynh_portal.js") + serveAsset("/ynh_overlay.css", "css/ynh_overlay.css") -- serve theme's files -- TODO : don't forget to open a PR to enable access to those -- in yunohost_panel.conf.inc diff --git a/portal/assets/css/ynhpanel.css b/portal/assets/css/ynh_overlay.css similarity index 91% rename from portal/assets/css/ynhpanel.css rename to portal/assets/css/ynh_overlay.css index 1dd356f..fab7849 100644 --- a/portal/assets/css/ynhpanel.css +++ b/portal/assets/css/ynh_overlay.css @@ -1,3 +1,17 @@ +/* +=============================================================================== + This file contains 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 +=============================================================================== +*/ /* ****************************************************************** General diff --git a/portal/assets/css/ynh-style.css b/portal/assets/css/ynh_portal.css similarity index 99% rename from portal/assets/css/ynh-style.css rename to portal/assets/css/ynh_portal.css index 544fc18..a02f4e2 100644 --- a/portal/assets/css/ynh-style.css +++ b/portal/assets/css/ynh_portal.css @@ -1,3 +1,9 @@ +/* +=============================================================================== + This file contain CSS rules loaded on the YunoHost user portal. +=============================================================================== +*/ + /* ========================================================================== 0 = Fonts 1 = Global diff --git a/portal/assets/js/ynhpanel.js b/portal/assets/js/ynh_portal.js similarity index 96% rename from portal/assets/js/ynhpanel.js rename to portal/assets/js/ynh_portal.js index fc54cec..0a1aada 100644 --- a/portal/assets/js/ynhpanel.js +++ b/portal/assets/js/ynh_portal.js @@ -1,9 +1,18 @@ -/* ---------------------------------------------------------- - Utilities ----------------------------------------------------------- */ +/* +=============================================================================== + This JS file is loaded : + - in the YunoHost user portal + - on every app page if the app nginx's conf does include the ynh snippet +=============================================================================== +*/ -/* Console log fix --------------------------- */ +/* +===================== + Utilities +===================== +*/ + +/* Console log fix */ if (typeof(console) === 'undefined') { var console = {}; console.log = console.error = console.info = console.debug = console.warn = console.trace = console.dir = console.dirxml = console.group = console.groupEnd = console.time = console.timeEnd = console.assert = console.profile = function() {}; @@ -220,7 +229,7 @@ window.addEvent(document, 'DOMContentLoaded', function() { }); // -// This function is called when ynhpanel.js is included in an app +// This function is called when ynh_portal.js is included in an app // // It will create the small yunohost "portal button" usually in the bottom // right corner and initialize the portal overlay, shown when clicking the @@ -308,7 +317,7 @@ function init_portal() Array.each(document.getElementsByClassName("app-tile"), function(el) { // Set first-letter data attribute. el.querySelector('.first-letter').innerHTML = el.getAttribute("data-appname").substring(0, 2); - // handle app links so they work both in plain info page and in the info iframe called from ynhpanel.js + // handle app links so they work both in plain info page and in the info iframe called from ynh_portal.js window.addEvent(el, 'click', function(event) { // if asked to open in new tab if (event.ctrlKey || event.shiftKey || event.metaKey diff --git a/portal/assets/themes/default/custom.css b/portal/assets/themes/default/custom.css deleted file mode 100644 index 716c15a..0000000 --- a/portal/assets/themes/default/custom.css +++ /dev/null @@ -1,148 +0,0 @@ -/* ========================================================================== - Default Theme - - 0 = Colors - ========================================================================== */ - -/* ========================================================================== - 0 = Colors - ========================================================================== */ - -.bluebg { - background: #3498DB!important; -} -.bluebg:hover:after, -.bluebg:focus:after, -.bluebg:hover:before, -.bluebg:focus:before { - background: #16527A!important; -} - -.purplebg { - background: #9B59B6!important; -} -.purplebg:hover:after, -.purplebg:focus:after, -.purplebg:hover:before, -.purplebg:focus:before { - background: #532C64!important; -} - -.redbg { - background: #E74C3C!important; -} -.redbg:hover:after, -.redbg:focus:after, -.redbg:hover:before, -.redbg:focus:before { - background: #921E12!important; -} - -.orangebg { - background: #F39C12!important; -} -.orangebg:hover:after, -.orangebg:focus:after, -.orangebg:hover:before, -.orangebg:focus:before { - background: #7F5006!important; -} - -.greenbg { - background: #2ECC71!important; -} -.greenbg:hover:after, -.greenbg:focus:after, -.greenbg:hover:before, -.greenbg:focus:before { - background: #176437!important; -} - -.darkbluebg { - background: #34495E!important; -} -.darkbluebg:hover:after, -.darkbluebg:focus:after, -.darkbluebg:hover:before, -.darkbluebg:focus:before { - background: #07090C!important; -} - -.lightbluebg { - background: #6A93D4!important; -} -.lightbluebg:hover:after, -.lightbluebg:focus:after, -.lightbluebg:hover:before, -.lightbluebg:focus:before { - background: #2B5394!important; -} - -.yellowbg { - background: #F1C40F!important; -} -.yellowbg:hover:after, -.yellowbg:focus:after, -.yellowbg:hover:before, -.yellowbg:focus:before { - background: #796307!important; -} - - -.lightpinkbg { - background: #F76F87!important; -} -.lightpinkbg:hover:after, -.lightpinkbg:focus:after, -.lightpinkbg:hover:before, -.lightpinkbg:focus:before { - background: #DA0C31!important; -} - -/* Following colors are not used yet */ -.pinkbg { - background: #D66D92!important; -} -.pinkbg:hover:after, -.pinkbg:focus:after, -.pinkbg:hover:before, -.pinkbg:focus:before { - background: #992B52!important; -} - -.turquoisebg { - background: #1ABC9C!important; -} -.turquoisebg:hover:after, -.turquoisebg:focus:after, -.turquoisebg:hover:before, -.turquoisebg:focus:before { - background: #0B4C3F!important; -} -.lightyellow { - background: #FFC973!important; -} -.lightyellow:hover:after, -.lightyellow:focus:after, -.lightyellow:hover:before, -.lightyellow:focus:before { - background: #F39500!important; -} -.lightgreen { - background: #B5F36D!important; -} -.lightgreen:hover:after, -.lightgreen:focus:after, -.lightgreen:hover:before, -.lightgreen:focus:before { - background: #77CF11!important; -} -.purpledarkbg { - background: #8E44AD!important; -} -.purpledarkbg:hover:after, -.purpledarkbg:focus:after, -.purpledarkbg:hover:before, -.purpledarkbg:focus:before { - background: #432051!important; -} \ No newline at end of file diff --git a/portal/assets/themes/default/custom.js b/portal/assets/themes/default/custom.js deleted file mode 100644 index 6f7c280..0000000 --- a/portal/assets/themes/default/custom.js +++ /dev/null @@ -1,11 +0,0 @@ -var app_tile_colors = ['redbg','purpledarkbg','darkbluebg','orangebg','greenbg','darkbluebg','purpledarkbg','yellowbg','lightpinkbg','pinkbg','turquoisebg','yellowbg','lightbluebg','purpledarkbg', 'bluebg']; - -function set_app_tile_style(el) -{ - // Select a color value from the App label - randomColorNumber = parseInt(el.textContent, 36) % app_tile_colors.length; - // Add color class. - el.classList.add(app_tile_colors[randomColorNumber]); -} - -Array.each(document.getElementsByClassName("app-tile"), set_app_tile_style); diff --git a/portal/footer.ms b/portal/footer.ms index ea5505c..992a577 100644 --- a/portal/footer.ms +++ b/portal/footer.ms @@ -10,9 +10,9 @@ - + {{#theme}} - + {{/theme}} diff --git a/portal/header.ms b/portal/header.ms index d6d66ea..7769ae9 100644 --- a/portal/header.ms +++ b/portal/header.ms @@ -12,8 +12,8 @@ - - + +