From 66ed93bc5749e8118138bff9b14a4c884280af2a Mon Sep 17 00:00:00 2001 From: transcaffeine Date: Sun, 28 Jul 2024 17:57:30 +0200 Subject: [PATCH] initial commit --- appinfo/info.xml | 17 ++++++++++ css/pride.css | 3 ++ js/pride.js | 66 +++++++++++++++++++++++++++++++++++++ lib/AppInfo/Application.php | 27 +++++++++++++++ 4 files changed, 113 insertions(+) create mode 100644 appinfo/info.xml create mode 100644 css/pride.css create mode 100644 js/pride.js create mode 100644 lib/AppInfo/Application.php diff --git a/appinfo/info.xml b/appinfo/info.xml new file mode 100644 index 0000000..729b96b --- /dev/null +++ b/appinfo/info.xml @@ -0,0 +1,17 @@ + + + pride + Pride + Add pride flags to your nextcloud + + 0.1.0 + cnvpl + + Pride + customization + https://github.com/finallycoffee/nextcloud-pride/issues + + + + diff --git a/css/pride.css b/css/pride.css new file mode 100644 index 0000000..06982fa --- /dev/null +++ b/css/pride.css @@ -0,0 +1,3 @@ +.files-list__row-icon .folder-icon svg { + fill: url("#gradient-pride"); +} diff --git a/js/pride.js b/js/pride.js new file mode 100644 index 0000000..08787f3 --- /dev/null +++ b/js/pride.js @@ -0,0 +1,66 @@ +const flags = [ + { + id: 'pride', + colors: ['#E04641', '#DE7E41', '#E4D56F', '#55B85F', '#2473B5', '#6F5DA5'], + transform: 'rotate(90)' + }, { + id: 'trans', + colors: ['#55CDFC', '#F7A8B8', '#FFFFFF', '#F7A8B8', '#55CDFC'], + transform: 'rotate(90)' + } +]; + +const generateGradient = colors => { + const steps = colors.length; + return colors.map((color, index) => { return [ + [color, (index / steps)], + [color, (index + 1) / steps] + ]}).flat(); +}; + +const generateStops = (colors, opacity) => { + return generateGradient(colors).map(([color, offset]) => { + return ``; + }); +}; + +const makeLinearGradientSvg = (id, colors, opacity, transform) => { + return ` + + + ${generateStops(colors, opacity).join('\n')} + + + + + `; +}; + +flags.forEach(flag => { + const svg_html = makeLinearGradientSvg(flag.id, flag.colors, flag.opacity ?? '0.8', flag.transform ?? 'rotate(0)'); + const container = document.createElement('div'); + container.classList.add('hidden-visually'); + container.ariaHidden = true; + container.innerHTML = svg_html; + const style_c = document.createElement('style'); + style_c.textContent = ` + body { + --image-background-pride-${flag.id}: url('data:image/svg+xml;base64,${btoa(svg_html)}'); + } + #app-navigation .active, + .button-vue--vue-primary, + .preview-card__header, + .profile__primary-action-button, + .app-navigation-entry.active { + background-image: var(--image-background-pride-trans); + } + .material-design-icon__svg, + .checkbox-radio-switch svg { + fill: url(#gradient-trans); + } + `; + document.body.prepend(container); + document.head.prepend(style_c); +}); diff --git a/lib/AppInfo/Application.php b/lib/AppInfo/Application.php new file mode 100644 index 0000000..384a1df --- /dev/null +++ b/lib/AppInfo/Application.php @@ -0,0 +1,27 @@ +get(IConfig::class); + } + + public function boot(IBootContext $ctx): void { + Util::addStyle(self::APP_ID, 'pride'); + Util::addScript(self::APP_ID, 'pride'); + } +}