Commit ca944b54 authored by Stephan Großberndt's avatar Stephan Großberndt
Browse files

[TASK] Change Polymer 3 TYPO3 theme from HTML to JS

parent 4065db45
<!--
Implemented with help of
https://gerrit.wikimedia.org/r/plugins/gitiles/operations/puppet/+/refs/heads/production/modules/gerrit/files/homedir/review_site/static/gerrit-theme.html
https://gerrit-review.googlesource.com/Documentation/pg-plugin-dev.html
https://gerrit-review.googlesource.com/Documentation/config-themes.html
-->
<dom-module id="typo3-styles">
<script>
Gerrit.install(function (plugin) {
plugin.registerStyleModule('app-theme-light', 'typo3-light-style');
plugin.registerStyleModule('app-theme', 'typo3-common-style');
plugin.registerCustomComponent('footer-left', 'typo3-custom-links');
});
</script>
</dom-module>
<dom-module id="typo3-light-style">
<template>
<style>
html {
--header-background-color: white;
}
</style>
</template>
</dom-module>
<dom-module id="typo3-common-style">
<template>
<style>
html {
--border-width: 0 0 3px 0;
--border-style: solid;
--header-box-shadow: 0 3px 3px 2px rgba(0, 0, 0, 0.075), 0 0 2px rgba(0, 0, 0, 0.2);
}
</style>
</template>
</dom-module>
<dom-module id="typo3-custom-links">
<template>
<style>
a {
color: var(--link-color);
}
</style>
| <a href="https://typo3.org/legal-notice/">Legal Notice</a>
| <a href="https://typo3.org/privacy-policy">Privacy Policy</a>
</template>
<script>
Polymer({is: 'typo3-custom-links'});
</script>
</dom-module>
<dom-module id="typo3-header-logo">
<script>
Gerrit.install(plugin => {
const domHook = plugin.hook('header-title', {replace: true});
domHook.onAttached(element => {
const el = element.appendChild(document.createElement('div'));
el.title = 'TYPO3 Code Review';
const logo_name = window.localStorage.getItem('dark-theme') ? 'typo3_logo_dark_1604607499.cache.svg' : 'typo3_logo_1604607499.cache.svg';
el.style.cssText = 'height: 1.8em; width: 4em; background: url(/static/' + logo_name + ') no-repeat left top / 4em 1.8em;';
});
});
</script>
</dom-module>
/*
TYPO3 Theming-Plugin
Implemented with help of
https://gerrit-review.googlesource.com/Documentation/pg-plugin-dev.html
https://gerrit-review.googlesource.com/Documentation/pg-plugin-endpoints.html
https://gerrit-review.googlesource.com/Documentation/config-themes.html
https://gerrit.googlesource.com/gerrit/+/8e744788852904125567506550546e0df8a08eac/polygerrit-ui/app/samples/theme-plugin.js
https://gerrit.wikimedia.org/r/plugins/gitiles/operations/puppet/+/refs/heads/production/modules/gerrit/files/homedir/review_site/static/gerrit-theme.html
*/
const CustomCommonStyle = document.createElement('dom-module');
CustomCommonStyle.innerHTML = `
<template>
<style>
html {
--border-width: 0 0 3px 0;
--border-style: solid;
--header-box-shadow: 0 3px 3px 2px rgba(0, 0, 0, 0.075), 0 0 2px rgba(0, 0, 0, 0.2);
}
</style>
</template>
`;
CustomCommonStyle.register('typo3-common-style');
const CustomLightStyle = document.createElement('dom-module');
CustomLightStyle.innerHTML = `
<template>
<style>
html {
--header-background-color: white;
}
</style>
</template>
`;
CustomLightStyle.register('typo3-light-style');
Gerrit.install(plugin => {
plugin.registerStyleModule('app-theme', 'typo3-common-style');
plugin.registerStyleModule('app-theme-light', 'typo3-light-style');
const domHookHeader = plugin.hook('header-title', {replace: true});
domHookHeader.onAttached(element => {
const headerDiv = element.appendChild(document.createElement('div'));
headerDiv.title = 'TYPO3 Code Review';
const logo_name = window.localStorage.getItem('dark-theme') ? 'typo3_logo_dark_1604607499.cache.svg' : 'typo3_logo_1604607499.cache.svg';
headerDiv.style.cssText = 'height: 1.8em; width: 4em; background: url(/static/' + logo_name + ') no-repeat left top / 4em 1.8em;';
});
const domHookFooterLeft = plugin.hook('footer-left');
domHookFooterLeft.onAttached(element => {
element.appendChild(document.createTextNode(' | '))
const legalNoticeLink = element.appendChild(document.createElement('a'));
legalNoticeLink.href = 'https://typo3.org/legal-notice';
legalNoticeLink.style = 'color: var(--link-color)';
legalNoticeLink.textContent = 'Legal Notice';
element.appendChild(document.createTextNode(' | '))
const privacyPolicyLink = element.appendChild(document.createElement('a'));
privacyPolicyLink.href = 'https://typo3.org/privacy-policy';
privacyPolicyLink.style = 'color: var(--link-color)';
privacyPolicyLink.textContent = 'Privacy Policy';
});
});
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment