From ac0648ce0bccc34ac5fa5b5ad6d717b7feea51fb Mon Sep 17 00:00:00 2001
From: Sylvain Jermini <sylvain.jermini@syjer.com>
Date: Mon, 24 Jun 2024 19:58:15 +0200
Subject: [PATCH] port project banner to lit

---
 .../src/project-banner/project-banner.ts      | 32 ++++++++++-----
 frontend/admin/src/styles.ts                  | 39 +++++++++++++++++++
 .../alfio/web-templates/admin-index.ms        |  4 +-
 .../project-banner/project-banner.html        | 25 ------------
 .../feature/project-banner/project-banner.js  | 28 -------------
 5 files changed, 62 insertions(+), 66 deletions(-)
 delete mode 100644 src/main/webapp/alfio-admin-v1/js/admin/feature/project-banner/project-banner.html
 delete mode 100644 src/main/webapp/alfio-admin-v1/js/admin/feature/project-banner/project-banner.js

diff --git a/frontend/admin/src/project-banner/project-banner.ts b/frontend/admin/src/project-banner/project-banner.ts
index e8d8392d52..f2d7512b7e 100644
--- a/frontend/admin/src/project-banner/project-banner.ts
+++ b/frontend/admin/src/project-banner/project-banner.ts
@@ -1,7 +1,8 @@
-import { LitElement, html } from 'lit';
+import { LitElement, html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js'
 import { when } from 'lit/directives/when.js';
 import { ConfigurationService } from '../service/configuration';
+import { retroCompat, textColors, row } from '../styles'
 
 @customElement('alfio-project-banner')
 export class ProjectBanner extends LitElement {
@@ -12,32 +13,43 @@ export class ProjectBanner extends LitElement {
     @property({ type: String, attribute: 'data-alfio-version' })
     alfioVersion?: string;
 
+    static styles = [
+        retroCompat,
+        textColors,
+        row,
+        css` :host { --alfio-row-cols: 3 }`
+    ];
+
     render() {
         const notFullBanner = () => html`
             <div>
                 <h5 class="text-muted">Powered by <a href="https://alf.io" target="_blank">Alf.io</a> v.${this.alfioVersion}</h5>
                 <small><a href="https://github.com/alfio-event/alf.io/issues" target="_blank" rel="noopener">report an issue</a> or <a href="https://github.com/alfio-event/alf.io/discussions" target="_blank" rel="nofollow noopener noreferrer">ask for help</a></small>
                 <div class="wMarginTop10px">
-                    <a class="btn btn-xs btn-success" href="https://alf.io/usage-form/" target="_blank" rel="noopener">Tell us about you!</a>
+                    <sl-button variant="success" size="small" href="https://alf.io/usage-form/" target="_blank" rel="noopener">Tell us about you!</sl-button>
                 </div>
             </div>
         `;
 
         const fullBanner = () => html`
-            <div class="alert">
+            <div>
                 <h3 class="text-center">Thank you for using Alf.io!</h3>
                 <h4> We don't track usage in any way, because we respect your privacy<br>
                 ...but we're very happy that you've decided to use Alf.io and we'd love to hear your story! </h4>
-                <div class="mb-3">&nbsp;</div>
+                <div>&nbsp;</div>
                 <div class="row">
-                    <div class="col-xs-12 col-lg-2 col-lg-offset-3">
-                        <a class="btn btn-primary" href="https://alf.io/usage-form/" target="_blank" rel="noopener"><i class="fa fa-bullhorn"></i> Tell us about you!</a>
+                    <div>
+                        <sl-button variant="primary" href="https://alf.io/usage-form/" target="_blank" rel="noopener">
+                            Tell us about you!
+                        </sl-button>
                     </div>
-                    <div class="col-xs-12 col-lg-2">
-                        <a class="btn btn-success ml-2" href="https://opencollective.com/alfio/contribute" target="_blank" rel="noopener"><i class="fa fa-handshake-o"></i> Contribute on OpenCollective</a>
+                    <div>
+                        <sl-button variant="success" href="https://opencollective.com/alfio/contribute" target="_blank" rel="noopener">
+                            Contribute on OpenCollective
+                        </sl-button>
                     </div>
-                    <div class="col-xs-12 col-lg-2">
-                        <button type="button" class="btn btn-default ml-3" @click=${this.dismiss} ng-click="$ctrl.dismiss()">Dismiss</button>
+                    <div>
+                        <sl-button type="button" class="btn btn-default ml-3" @click=${this.dismiss} ng-click="$ctrl.dismiss()">Dismiss</sl-button>
                     </div>
                 </div>
             </div>
diff --git a/frontend/admin/src/styles.ts b/frontend/admin/src/styles.ts
index 70a7f064ec..7b4c1d2a63 100644
--- a/frontend/admin/src/styles.ts
+++ b/frontend/admin/src/styles.ts
@@ -81,3 +81,42 @@ export const form = css`
         display: inline-block;
     }
 `;
+
+
+// imported minimal common css part from bootstrap
+export const retroCompat = css`
+
+h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
+    font-family: inherit;
+    font-weight: 500;
+    line-height: 1.1;
+    color: inherit
+}
+
+h1,.h1,h2,.h2,h3,.h3 {
+    margin-top: 22px;
+    margin-bottom: 11px
+}
+
+
+h4,.h4,h5,.h5,h6,.h6 {
+    margin-top: 11px;
+    margin-bottom: 11px
+}
+
+h1,.h1 { font-size: 41px }
+h2,.h2 { font-size: 34px }
+h3,.h3 { font-size: 28px }
+h4,.h4 { font-size: 20px }
+h5,.h5 { font-size: 16px }
+h6,.h6 { font-size: 14px }
+
+small,.small { font-size: 87% }
+
+a { color: #337ab7; text-decoration: none }
+a:hover,a:focus { color: #23527c; text-decoration: underline }
+a:focus { outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px }
+
+.wMarginTop10px { margin-top: 10px; }
+
+`;
\ No newline at end of file
diff --git a/src/main/resources/alfio/web-templates/admin-index.ms b/src/main/resources/alfio/web-templates/admin-index.ms
index b198caa844..f6050f5bf8 100644
--- a/src/main/resources/alfio/web-templates/admin-index.ms
+++ b/src/main/resources/alfio/web-templates/admin-index.ms
@@ -115,7 +115,6 @@
     <script nonce="{{nonce}}" src="{{contextPath}}/resources/js/admin/feature/internationalization-editor/internationalization-editor.js"></script>
     <script nonce="{{nonce}}" src="{{contextPath}}/resources/js/admin/feature/copy-event/copy-event.js"></script>
     <script nonce="{{nonce}}" src="{{contextPath}}/resources/js/admin/feature/metadata-editor/metadata-editor.js"></script>
-    <script nonce="{{nonce}}" src="{{contextPath}}/resources/js/admin/feature/project-banner/project-banner.js"></script>
     <script nonce="{{nonce}}" src="{{contextPath}}/resources/js/admin/feature/polls/polls.js"></script>
     <script nonce="{{nonce}}" src="{{contextPath}}/resources/js/admin/feature/export-reservations/export-reservations.js"></script>
     <script nonce="{{nonce}}" src="{{contextPath}}/resources/js/admin/feature/open-generated-link/open-generated-link.js"></script>
@@ -246,8 +245,7 @@
                 </div>
             </div>
             <footer class="text-center" ng-if="!ctrl.displaySidebar">
-                <project-banner data-full-banner="{{displayProjectBanner}}" data-alfio-version="'{{alfioVersion}}'"></project-banner>
-                <!-- <alfio-project-banner data-full-banner="{{displayProjectBanner}}" data-alfio-version="{{alfioVersion}}"></alfio-project-banner> -->
+                <alfio-project-banner data-full-banner="{{displayProjectBanner}}" data-alfio-version="{{alfioVersion}}" class="container alert" style="display:block"></alfio-project-banner>
             </footer>
         </div>
     </div>
diff --git a/src/main/webapp/alfio-admin-v1/js/admin/feature/project-banner/project-banner.html b/src/main/webapp/alfio-admin-v1/js/admin/feature/project-banner/project-banner.html
deleted file mode 100644
index 8bc3f9bc13..0000000000
--- a/src/main/webapp/alfio-admin-v1/js/admin/feature/project-banner/project-banner.html
+++ /dev/null
@@ -1,25 +0,0 @@
-<div ng-if="!$ctrl.fullBanner">
-    <h5 class="text-muted">Powered by <a href="https://alf.io" target="_blank">Alf.io</a> v.{{$ctrl.alfioVersion}}</h5>
-    <small><a href="https://github.com/alfio-event/alf.io/issues" target="_blank" rel="noopener">report an issue</a> or <a href="https://github.com/alfio-event/alf.io/discussions" target="_blank" rel="nofollow noopener noreferrer">ask for help</a></small>
-    <div class="wMarginTop10px">
-        <a class="btn btn-xs btn-success" href="https://alf.io/usage-form/" target="_blank" rel="noopener">Tell us about you!</a>
-    </div>
-</div>
-
-<div class="alert" ng-if="$ctrl.fullBanner">
-    <h3 class="text-center">Thank you for using Alf.io!</h3>
-    <h4> We don't track usage in any way, because we respect your privacy<br>
-        ...but we're very happy that you've decided to use Alf.io and we'd love to hear your story! </h4>
-    <div class="mb-3">&nbsp;</div>
-    <div class="row">
-        <div class="col-xs-12 col-lg-2 col-lg-offset-3">
-            <a class="btn btn-primary" href="https://alf.io/usage-form/" target="_blank" rel="noopener"><i class="fa fa-bullhorn"></i> Tell us about you!</a>
-        </div>
-        <div class="col-xs-12 col-lg-2">
-            <a class="btn btn-success ml-2" href="https://opencollective.com/alfio/contribute" target="_blank" rel="noopener"><i class="fa fa-handshake-o"></i> Contribute on OpenCollective</a>
-        </div>
-        <div class="col-xs-12 col-lg-2">
-            <button type="button" class="btn btn-default ml-3" ng-click="$ctrl.dismiss()">Dismiss</button>
-        </div>
-    </div>
-</div>
\ No newline at end of file
diff --git a/src/main/webapp/alfio-admin-v1/js/admin/feature/project-banner/project-banner.js b/src/main/webapp/alfio-admin-v1/js/admin/feature/project-banner/project-banner.js
deleted file mode 100644
index d1011a46e7..0000000000
--- a/src/main/webapp/alfio-admin-v1/js/admin/feature/project-banner/project-banner.js
+++ /dev/null
@@ -1,28 +0,0 @@
-(function () {
-    "use strict";
-
-    angular.module('adminApplication')
-        .component('projectBanner', {
-            bindings: {
-                fullBanner: '<',
-                alfioVersion: '<'
-            },
-            controller: ['ConfigurationService', '$window', ProjectBannerController],
-            templateUrl: window.ALFIO_CONTEXT_PATH + '/resources/js/admin/feature/project-banner/project-banner.html'
-        });
-
-    function ProjectBannerController(ConfigurationService, $window) {
-        var ctrl = this;
-        ctrl.$onInit = function() {
-            ctrl.dismiss = function() {
-                ConfigurationService.update({
-                    key: 'SHOW_PROJECT_BANNER',
-                    value: 'false'
-                }).then(function() {
-                    ctrl.fullBanner = false;
-                    $window.location.reload();
-                })
-            };
-        };
-    }
-})();
\ No newline at end of file