Closed thet closed 6 years ago
@thet overall it looks good to me; we only have one thing to discuss: I think we don't need the Cancel
button at all: people should accept the disclaimer or just close it.
I need to fix Pylint's error also.
@agnogueira comments?
+1 to remove the Cancel button
I think we need some CSS changes. In the code bellow I fix margin, remove border and oppacity:
button[name="collective.disclaimer.ok"] { background: #00FF00; margin: 1em 0; }
button[name="collective.disclaimer.ok"], button[name="collective.disclaimer.cancel"] { display: inline-block; padding: 0.5em; border-radius: 0.2em; color: black; border: none; }
@thet to fix the build you need to rebase.
@hvelarde @agnogueira done!
I added a button margin of margin: 1em
so that it has a margin to the text left of the button also.
Cancel button is gone.
@agnogueira in my tests there's no way to close the disclaimer besides selecting the OK
button; what happened to the X
link?
BTW, I really dislike the green button; I think that should be something more neutral.
does nothing happen when you click the "OK" button? I'm +1 for another color. I just don't know which.
the OK
works as expected; I'm just missing the X
we had before, but maybe you just removed it as part of the changes.
I think we must move the OK
button to the right part of the viewlet:
this way we'll use better the space; but we could fix that later; I think it's time to include webpack here.
Btw. this is how I integrated it in a testing instance: http://altach.rc.amkumma.web12.zoplo.com/
In a z3c.jbot directory the file: collective.disclaimer.browser.disclaimer.pt
<div id="viewlet-disclaimer" role="alert" style="display: none"
tal:attributes="data-enabled view/enabled;
data-last-modified view/last_modified">
<style type="text/css" media="screen">
#viewlet-disclaimer {
position: fixed;
box-sizing: border-box;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 20180525;
display: flex;
align-items: center;
justify-content: center;
}
.disclaimer-inner {
background-color: black;
color: white;
max-width: 80%;
padding: 2em;
border-radius: 0.5em;
opacity: 0.7;
}
.disclaimer-text {
display: inline-block;
}
button[name="collective.disclaimer.ok"] {
display: inline-block;
margin: 1em;
padding: 0.5em;
color: black;
background-color: #00FF00;
border-radius: 0.2em;
}
button[name="collective.disclaimer.ok"]:hover {
color: white;
}
.disclaimer-title {
font-weight: bold;
margin-bottom: 0.5em;
}
#viewlet-disclaimer p {
border-bottom: 0;
padding-bottom: 0;
text-align: left;
}
#viewlet-disclaimer p a:link,
#viewlet-disclaimer p a:visited,
#viewlet-disclaimer p a:hover {
color: #fff;
text-decoration: underline;
}
</style>
<div class="disclaimer-inner">
<div class="disclaimer-title" tal:content="view/title">Title</div>
<div class="disclaimer-text" tal:content="structure view/text">
Disclaimer
</div>
<button name="collective.disclaimer.ok" i18n:translate="title_button_ok">OK</button>
</div>
<script>
if (Storage !== undefined) {
$(document).ready(function () {
'use strict';
var enabled = $('#viewlet-disclaimer').attr('data-enabled');
if (enabled !== 'true') {
return;
}
var last_modified = $('#viewlet-disclaimer').attr('data-last-modified');
var last_seen = localStorage.getItem('collective.disclaimer');
if (last_seen === null || last_seen < last_modified) {
$('#visual-portal-wrapper').css('filter', 'blur(5px)');
$('#viewlet-disclaimer').show();
}
$('button[name="collective.disclaimer.ok"]').click(function (event) {
event.preventDefault();
localStorage.setItem('collective.disclaimer', last_modified);
$('#visual-portal-wrapper').css('filter', 'none');
$("#viewlet-disclaimer").hide();
});
});
}
</script>
</div>
tnx for reviewing!
First of all, thanks @hvelarde for saving us Europeans from the "General Data Protection Regulation" apocalypse!
Instead of just overwriting the template I'll see if these changes are useful for everyone:
First commit: the viewlet always set the local storage key, even if the viewlet text wasn't confirmed by closing it via the close link. I think it's better to explicitly ask for confirmation ("OK")
or let the user cancel and close the dialog which will him get the dialog presented after the next request. I removed the cancel button in my fifth commit, because it doesn't make too much sense... You have to confirm or quit.Second commit: when moving the viewlet via diazo into the thme, the script and css link were not moved. I included both in the viewlet element which fixes this.
Third commit: Add a
disclaimer-inner
wrapper to allow easier styling, e.g. positioning the viewlet centered on the website and darkening the whole background.Fourth commit: Register the controlpanel for any context. The correct registry is automatically acquired. This way, it's possible to set different disclaimer texts in a Lineage site with lineage.registry installed.