Put the modal into a custom panel, component formating

camptocamp · Nov 29, 2021 · 0b2927e · 0b2927e
1 parent 007aeb1
commit 0b2927e
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 89 deletions.
diff --git a/geoportal/interfaces/desktop_alt.html.mako b/geoportal/interfaces/desktop_alt.html.mako
@@ -60,6 +60,10 @@
       <gmf-auth-button slot="tool-button"></gmf-auth-button>
       <gmf-auth-panel slot="tool-panel-auth"></gmf-auth-panel>
 
+      <!-- custom feedback -->
+      <gmf-tool-button slot="tool-button" iconClasses="fas fa-file-signature" panelName="feedback"></gmf-tool-button>
+      <proj-feedback slot="tool-panel-feedback"></proj-feedback>
+
       <!-- Print -->
       <gmf-print-button slot="tool-button"></gmf-print-button>
       <div slot="tool-panel-print" class="row">

diff --git a/geoportal/vars.yaml b/geoportal/vars.yaml
@@ -154,7 +154,7 @@ vars:
         sitnFeedbackPath: custom/feedback
 
       static:
-        # Those tow lines should be commented in dev mode.
+        # Those two lines should be commented in dev mode.
         #  gmfCustomJavascriptUrl:
         #    name: '/etc/geomapfish/static/custom/custom.es.js'
         gmfCustomStylesheetUrl:
@@ -626,7 +626,7 @@ vars:
       - 185.127.205.3/24
 
   content_security_policy_main_img_src_extra: 'blob:'
-  content_security_policy_main_script_src_extra: "'unsafe-eval' http://localhost:3001"
+  content_security_policy_main_script_src_extra: "'unsafe-eval' https://localhost:3001"
 
   headers:
     dynamic: &header {}

diff --git a/webcomponents/feedback.ts b/webcomponents/feedback.ts
@@ -3,8 +3,6 @@ import {LitElement, html, css} from 'lit';
 
 @customElement('proj-feedback')
 export class ProjFeedback extends LitElement {
-  @state()
-  private show_modal = false;
   @state()
   private show_send = false;
   @state()
@@ -16,15 +14,28 @@ export class ProjFeedback extends LitElement {
   private subscriptions_ = [];
 
   static styles = css`
-    .modal-body,
-    .sitn-loader,
-    .modal-footer {
-      background-color: #fafafa;
+    input,
+    textarea {
+      margin: 5px 0 5px 5px;
+    }
+
+    input {
+      width: 32ch; /* 32 characters */
     }
 
-    input,
     textarea {
-      margin: 5px 0;
+      width: 30ch; /* 30 characters */
+    }
+
+    .modal-title {
+      color: var(--color-light);
+      padding-bottom: var(--app-margin);
+      margin-bottom: var(--app-margin);
+      margin-top: calc(var(--grid-gutter-width) / 2);
+      border-bottom-width: 0.06rem;
+      border-bottom-style: solid;
+      border-bottom-color: var(--color-light);
+      font-size: 0.8rem;
     }
   `;
 
@@ -46,87 +57,66 @@ export class ProjFeedback extends LitElement {
 
   render() {
     return html`<div class="modal-header">
-        <h4
-          class="modal-title"
-          @click=${() => {
-            this.show_modal = true;
+        <div class="modal-title">Signaler un problème</div>
+      </div>
+      <div class="modal-body">
+        <label for="email">Votre email (optionnel):</label><br />
+        <input
+          input="text"
+          placeholder="[email protected]"
+          name="email"
+          class="form-control"
+          id="email"
+          .value="${this.email}"
+          @input=${(e) => {
+            this.email = e.target.value;
           }}
+        />
+        <br />
+        <label for="email_optional">Inclure un membre du SITN (optionnel) :</label><br />
+        <input
+          type="text"
+          placeholder="[email protected]"
+          name="email_optional"
+          class="form-control"
+          id="email_optional"
+          .value="${this.email_optional}"
+          @input=${(e) => {
+            this.email_optional = e.target.value;
+          }}
+        />
+        <br />
+        <label for="feedback_text"> Votre description du problème concernant la carte :</label><br />
+        <textarea
+          rows="4"
+          cols="40"
+          class="form-control"
+          id="feedback_text"
+          .value="${this.feedback_text}"
+          @input=${(e) => {
+            this.feedback_text = e.target.value;
+          }}
+          maxlength="1000"
+          placeholder="Taille maximale: 1000 caractères"
         >
-          Signaler un problème
-        </h4>
-        ${this.show_modal
-          ? html`<button
-              type="button"
-              class="close"
-              aria-label="Close"
-              @click=${() => {
-                this.show_modal = false;
-              }}
-            >
-              <span aria-hidden="true">&times;</span>
-            </button>`
-          : ''}
+        </textarea>
+        <br />
+        <label for="permalink">L'URL ci-dessous sera envoyée au SITN:</label>
+        <input
+          type="text"
+          name="permalink"
+          class="form-control"
+          id="permalink"
+          .value="${this.permalink}"
+          readonly
+        />
+        <br />
+        Pour contacter le SITN directement:
+        <a href="mailto:[email protected]?subject=Problème Géoportail">[email protected]</a>
+      </div>
+      <div class="modal-footer">
+        <button type="submit" class="btn btn-primary" @click="${this.feedbackSubmit}">Envoyer</button>
       </div>
-      ${this.show_modal
-        ? html` <div class="modal-body">
-              <label for="email">Votre email (optionnel):</label><br />
-              <input
-                input="text"
-                placeholder="[email protected]"
-                name="email"
-                class="form-control"
-                id="email"
-                .value="${this.email}"
-                @input=${(e) => {
-                  this.email = e.target.value;
-                }}
-              />
-              <br />
-              <label for="email_optional">Inclure un membre du SITN (optionnel) :</label><br />
-              <input
-                type="text"
-                placeholder="[email protected]"
-                name="email_optional"
-                class="form-control"
-                id="email_optional"
-                .value="${this.email_optional}"
-                @input=${(e) => {
-                  this.email_optional = e.target.value;
-                }}
-              />
-              <br />
-              <label for="feedback_text"> Votre description du problème concernant la carte :</label><br />
-              <textarea
-                rows="4"
-                cols="40"
-                class="form-control"
-                id="feedback_text"
-                .value="${this.feedback_text}"
-                @input=${(e) => {
-                  this.feedback_text = e.target.value;
-                }}
-                maxlength="1000"
-                placeholder="Taille maximale: 1000 caractères"
-              >
-              </textarea>
-              <br />
-              <label for="permalink">L'URL ci-dessous sera envoyée au SITN:</label>
-              <input
-                type="text"
-                name="permalink"
-                class="form-control"
-                id="permalink"
-                .value="${this.permalink}"
-                readonly
-              />
-              <br />
-              Pour contacter le SITN directement:
-              <a href="mailto:[email protected]?subject=Problème Géoportail">[email protected]</a>
-            </div>
-            <div class="modal-footer">
-              <button type="submit" class="btn btn-primary" @click="${this.feedbackSubmit}">Envoyer</button>
-            </div>`
-        : ''}
       ${this.show_send
         ? html`<div class="sitn-loader">
             <div class="fas fa-spinner fa-spin"></div>
@@ -153,7 +143,6 @@ export class ProjFeedback extends LitElement {
       alert('Votre texte est trop long (max 1000 caractères).');
       return;
     }
-    this.show_modal = false;
     this.show_send = true;
 
     let url = new URL(this.url_);