ok cancel, move styles and scripts

[thet]

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.

[hvelarde]

@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?

[agnogueira]

+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; }

[hvelarde]

@thet to fix the build you need to rebase.

[thet]

@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.

[hvelarde]

@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.

[thet]

does nothing happen when you click the "OK" button? I'm +1 for another color. I just don't know which.

[hvelarde]

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.

[thet]

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>

[thet]

tnx for reviewing!