added option for floating button to open settings

dist/config.js

@@ -11,6 +11,9 @@ var klaroConfig = {
     // when starting up. If undefined, Klaro will use 'klaro'.
     elementID: 'klaro',
 
+    // Shows a small flaoting button to open settings modal.
+    showFloatingButton: true,
+
     // You can override CSS style variables here. For IE11, Klaro will
     // dynamically inject the variables into the CSS. If you still consider
     // supporting IE9-10 (which you probably shouldn't) you need to use Klaro
@@ -253,10 +256,13 @@ var klaroConfig = {
             // An optional callback function that will be called each time
             // the consent state for the service changes (true=consented). Passes
             // the `service` config as the second parameter as well.
-            callback: function(consent, service) {
+            callback: function (consent, service) {
                 // This is an example callback function.
                 console.log(
-                    'User consent for service ' + service.name + ': consent=' + consent
+                    'User consent for service ' +
+                        service.name +
+                        ': consent=' +
+                        consent
                 );
                 // To be used in conjunction with Matomo 'requireCookieConsent' Feature, Matomo 3.14.0 or newer
                 // For further Information see https://matomo.org/faq/new-to-piwik/how-can-i-still-track-a-visitor-without-cookies-even-if-they-decline-the-cookie-consent/
@@ -320,7 +326,7 @@ var klaroConfig = {
             title: 'Surveillance Camera',
             purposes: ['security'],
         },
-/*        {
+        /*        {
             name: 'googleFonts',
             title: 'Google Fonts',
             purposes: ['styling'],

src/components/app.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import ConsentNotice from './consent-notice';
+import FloatingButton from './floating-button';
 
 export default class App extends React.Component {
     constructor(props) {
@@ -82,6 +83,13 @@ export default class App extends React.Component {
                     config={config}
                     manager={manager}
                 />
+                <FloatingButton
+                    t={t}
+                    show={!show}
+                    hide={hide}
+                    config={config}
+                    manager={manager}
+                />
             </div>
         );
     }

src/components/floating-button.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+export default class FloatingButton extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            modal: false,
+            confirming: false,
+        };
+    }
+
+    render() {
+        const { config, show, manager, t } = this.props;
+
+        const showModal = (e) => {
+            e.preventDefault();
+            klaro.show();
+            sessionStorage.setItem('triggerElement', e.target.id);
+        };
+
+        if (!show) return <div />;
+        console.log(config);
+        const noticeIsVisible =
+            !config.mustConsent &&
+            manager.confirmed &&
+            config.showFloatingButton;
+
+        return (
+            <button
+                className={`floating-button ${
+                    !noticeIsVisible ? 'floating-button-hidden' : ''
+                }`}
+                id="floating-button"
+                onClick={showModal}
+            >
+                {t(['floatingButtonTitle'])}
+            </button>
+        );
+    }
+}

src/scss/floating-button.scss

@@ -0,0 +1,52 @@
+/* The Floating-Button */
+.floating-button {
+    display: block;
+    z-index: 999;
+
+    position: fixed;
+    transition: all 0.2s;
+    cursor: pointer;
+    bottom: 0;
+    right: 20px;
+    box-shadow: $cm-box-shadow-light-sm;
+    @include var(border-top-left-radius, border-radius);
+    @include var(border-top-right-radius, border-radius);
+    text-decoration: none;
+    max-width: 300px;
+    @include var(border-width, border-width);
+    @include var(border-style, border-style);
+    @include var(border-color, green2);
+    color: gray;
+    border-bottom-color: rgb(187, 187, 187);
+    border-bottom-style: solid;
+    border-bottom-width: 3px;
+    border-bottom: none;
+    font-size: 14px;
+    font-weight: 700;
+    padding: 7px 14px;
+
+    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px !important;
+
+    @media (max-width: 1159px) {
+        bottom: 300px;
+        right: -70px;
+        -webkit-transform: rotate(-90deg) !important;
+        transform: rotate(-90deg) !important;
+    }
+
+    &.is-active,
+    &:hover,
+    &:active {
+        color: rgba(255, 255, 255, 0.9);
+        text-decoration: none;
+    }
+    &:hover,
+    &:active,
+    &:focus {
+        @include var(background-color, light1);
+    }
+}
+
+.floating-button-hidden {
+    display: none !important;
+}

src/scss/klaro.scss

@@ -2,6 +2,7 @@
 @import './vars';
 
 .klaro {
+    @import './floating-button';
 
     $btn-margin-right: 0.5em;
 
@@ -11,7 +12,7 @@
     // buttons use their own font-family setting so we need to override it explicitly...
     button {
         @include var(font-family, font-family);
-        @include var(font-size, font-size);    
+        @include var(font-size, font-size);
     }
 
     &.cm-as-context-notice {
@@ -70,7 +71,6 @@
         }
 
         .cm-btn {
-
             @include var(color, button-text-color);
             @include var(background-color, dark2);
             @include var(border-radius, border-radius);
@@ -301,7 +301,6 @@
                         }
 
                         &.cm-toggle-all {
-
                             @include var(border-top-width, border-width);
                             @include var(border-top-style, border-style);
                             @include var(border-top-color, dark2);

src/translations/de.yml

@@ -11,6 +11,7 @@ consentModal:
     name: Datenschutzerklärung
     text: Um mehr zu erfahren, lesen Sie bitte unsere {privacyPolicy}.
   title: Dienste, die wir nutzen möchten
+floatingButtonTitle: Cookies
 consentNotice:
   changeDescription:
     Seit Ihrem letzten Besuch gab es Änderungen, bitte erneuern Sie

src/translations/en.ref.yml

@@ -4,6 +4,7 @@ privacyPolicy:
 consentModal:
   title: Services we would like to use
   description: Here you can assess and customize the services that we'd like to use on this website. You're in charge! Enable or disable services as you see fit.
+floatingButtonTitle: Cookies
 consentNotice:
   testing: Testing mode!
   title: Cookie Consent

src/translations/en.yml

@@ -3,67 +3,68 @@ acceptAll: Accept all
 acceptSelected: Accept selected
 close: Close
 consentModal:
-    description:
-        Here you can assess and customize the services that we'd like to use
-        on this website. You're in charge! Enable or disable services as you see fit.
-    title: Services we would like to use
+  description:
+    Here you can assess and customize the services that we'd like to use
+    on this website. You're in charge! Enable or disable services as you see fit.
+  title: Services we would like to use
+floatingButtonTitle: Cookies
 consentNotice:
-    changeDescription: There were changes since your last visit, please renew your consent.
-    title: Cookie Consent
-    description:
-        Hi! Could we please enable some additional services for {purposes}?
-        You can always change or withdraw your consent later.
-    learnMore: Let me choose
-    testing: Testing mode!
+  changeDescription: There were changes since your last visit, please renew your consent.
+  title: Cookie Consent
+  description:
+    Hi! Could we please enable some additional services for {purposes}?
+    You can always change or withdraw your consent later.
+  learnMore: Let me choose
+  testing: Testing mode!
 contextualConsent:
-    acceptAlways: Always
-    acceptOnce: 'Yes'
-    description: Do you want to load external content supplied by {title}?
+  acceptAlways: Always
+  acceptOnce: 'Yes'
+  description: Do you want to load external content supplied by {title}?
 decline: I decline
 ok: That's ok
 poweredBy: Realized with Klaro!
 privacyPolicy:
-    name: privacy policy
-    text: To learn more, please read our {privacyPolicy}.
+  name: privacy policy
+  text: To learn more, please read our {privacyPolicy}.
 purposeItem:
-    service: service
-    services: services
+  service: service
+  services: services
 purposes:
-    advertising:
-        description:
-            These services process personal information to show you personalized
-            or interest-based advertisements.
-        title: Advertising
-    functional:
-        description:
-            'These services are essential for the correct functioning of this
-            website. You cannot disable them here as the service would not work correctly
-            otherwise.
+  advertising:
+    description:
+      These services process personal information to show you personalized
+      or interest-based advertisements.
+    title: Advertising
+  functional:
+    description:
+      'These services are essential for the correct functioning of this
+      website. You cannot disable them here as the service would not work correctly
+      otherwise.
 
-            '
-        title: Service Provision
-    marketing:
-        description:
-            These services process personal information to show you relevant
-            content about products, services or topics that you might be interested in.
-        title: Marketing
-    performance:
-        description:
-            'These services process personal information to optimize the service
-            that this website offers.
+      '
+    title: Service Provision
+  marketing:
+    description:
+      These services process personal information to show you relevant
+      content about products, services or topics that you might be interested in.
+    title: Marketing
+  performance:
+    description:
+      'These services process personal information to optimize the service
+      that this website offers.
 
-            '
-        title: Performance Optimization
+      '
+    title: Performance Optimization
 save: Save
 service:
-    disableAll:
-        description: Use this switch to enable or disable all services.
-        title: Enable or disable all services
-    optOut:
-        description: This services is loaded by default (but you can opt out)
-        title: (opt-out)
-    purpose: purpose
-    purposes: purposes
-    required:
-        description: This services is always required
-        title: (always required)
+  disableAll:
+    description: Use this switch to enable or disable all services.
+    title: Enable or disable all services
+  optOut:
+    description: This services is loaded by default (but you can opt out)
+    title: (opt-out)
+  purpose: purpose
+  purposes: purposes
+  required:
+    description: This services is always required
+    title: (always required)