feat: Adding delete icon on UI (#12)

ViBiOh · Apr 15, 2020 · f95de89 · f95de89
1 parent 71b1cae
commit f95de89
Show file tree

Hide file tree

Showing 8 changed files with 197 additions and 13 deletions.
diff --git a/pkg/ui/ui.go b/pkg/ui/ui.go
@@ -5,6 +5,7 @@ import (
 	"html/template"
 	"net/http"
 	"os"
+	"strings"
 
 	"github.com/ViBiOh/httputils/v3/pkg/httperror"
 	"github.com/ViBiOh/httputils/v3/pkg/templates"
@@ -36,11 +37,32 @@ func New(targetApp target.App) (App, error) {
 	}, nil
 }
 
+// SVG render a svg in given coolor
+func (a app) SVG(w http.ResponseWriter, name, fill string) {
+	tpl := a.tpl.Lookup(fmt.Sprintf("svg-%s", name))
+	if tpl == nil {
+		httperror.NotFound(w)
+		return
+	}
+
+	w.Header().Set("Content-Type", "image/svg+xml")
+
+	if err := templates.WriteTemplate(tpl, w, fill, "text/xml"); err != nil {
+		httperror.InternalServerError(w, err)
+		return
+	}
+}
+
 // Handler for request. Should be use with net/http
 func (a app) Handler() http.Handler {
 	version := os.Getenv("VERSION")
 
 	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		if strings.HasPrefix(r.URL.Path, "/svg") {
+			a.SVG(w, strings.TrimPrefix(r.URL.Path, "/svg/"), r.URL.Query().Get("fill"))
+			return
+		}
+
 		content := map[string]interface{}{
 			"Version": version,
 		}

diff --git a/templates/form_buttons.html b/templates/form_buttons.html
@@ -0,0 +1,6 @@
+{{ define "form_buttons" }}
+  <p class="padding no-margin center">
+    <a href="#" class="button white">Cancel</a>
+    <button type="submit" class="button bg-primary">{{ . }}</button>
+  </p>
+{{ end }}
diff --git a/templates/index.html b/templates/index.html
@@ -25,14 +25,16 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     {{ template "favicon" . }}
     {{ template "style-color" . }}
+    {{ template "style-icon" . }}
     {{ template "style-button" . }}
+    {{ template "style-modal" . }}
     {{ template "style" . }}
   </head>
 
   <body class="no-margin">
     <div class="content">
       <header class="padding">
-        <h1 class="title">
+        <h1 class="no-margin no-padding">
           <a href="/" class="no-style clear">Ketchup</a>
         </h1>
       </header>

diff --git a/templates/ketchup.html b/templates/ketchup.html
@@ -1,22 +1,93 @@
+{{ define "delete-modal" }}
+  <div id="delete-modal-{{ .ID }}" class="modal">
+    <div class="modal-content">
+      <h2 class="header">Confirmation</h2>
+
+      <form method="delete" action="/api/targets/{{ .ID }}">
+        <p class="padding no-margin center">
+          Are you sure you want to delete <strong>{{ .Repository }}</strong>?
+        </p>
+
+        {{ template "form_buttons" "Confirm" }}
+      </form>
+    </div>
+  </div>
+{{ end }}
+
+
 {{ define "targets" }}
 <style>
+  {{ range . }}
+    #delete-modal-{{ .ID }}:target,
+    #edit-modal-{{ .ID }}:target,
+  {{ end }}
+  #action-modal:target {
+    display: flex;
+    z-index: 5;
+  }
+
+  {{ range . }}
+    #delete-modal-{{ .ID }}:target ~ .content,
+    #edit-modal-{{ .ID }}:target ~ .content,
+  {{ end }}
+  #action-modal:target ~ .content {
+    display: flex;
+    z-index: 5;
+  }
+
+  .target {
+    display: flex;
+  }
 </style>
 
-<div>
+<script>
+    /**
+     * Go back from state.
+     */
+    function goBack() {
+      const previousHash = document.location.hash;
+      document.location.hash = '';
+
+      if (/success$/gim.test(previousHash)) {
+        window.location.reload(true);
+      }
+    }
+
+    /**
+     * Handle Previous/next.
+     */
+    window.onkeyup = e => {
+      switch(e.key) {
+        case 'Escape':
+          goBack();
+          break;
+      }
+    };
+</script>
+
+<article>
   {{ range $index, $target := . }}
-    <p>
-      <div>{{ $target.Repository }}</div>
+    {{ template "delete-modal" $target }}
 
-      <span class="{{ if ne $target.CurrentVersion $target.LatestVersion }}danger{{ else }}success{{ end }}">
-        {{ $target.CurrentVersion }}
-      </span>
+    <div class="padding target">
+      <span>
+        <p class="no-margin">{{ $target.Repository }}</p>
 
-      {{ if ne $target.CurrentVersion $target.LatestVersion }}
-        <span>
-          -> <a class="success" href="https://github.com/{{ $target.Repository }}/releases/tag/{{ $target.LatestVersion }}" rel="noopener noreferrer" target="_blank">{{ $target.LatestVersion }}</a>
+        <span class="{{ if ne $target.CurrentVersion $target.LatestVersion }}danger{{ else }}success{{ end }}">
+          {{ $target.CurrentVersion }}
         </span>
-      {{ end }}
-    </p>
+
+        {{ if ne $target.CurrentVersion $target.LatestVersion }}
+          <span>
+            -> <a class="success" href="https://github.com/{{ $target.Repository }}/releases/tag/{{ $target.LatestVersion }}" rel="noopener noreferrer" target="_blank">{{ $target.LatestVersion }}</a>
+          </span>
+        {{ end }}
+      </span>
+
+      <a href="#delete-modal-{{ .ID }}" class="button button-icon" alt="Delete">
+        <img class="icon" src="/svg/times?fill=silver" alt="Delete">
+      </a>
+    </div>
   {{ end }}
-</div>
+</article>
 {{ end }}
diff --git a/templates/style-icon.html b/templates/style-icon.html
@@ -0,0 +1,33 @@
+{{ define "style-icon" }}
+  <style>
+    :root {
+      --icon-size: 2.4rem;
+      --icon-large: 4.8rem;
+    }
+
+    .icon {
+      background-position: center center;
+      background-repeat: no-repeat;
+      color: var(--white);
+      display: inline-block;
+      height: var(--icon-size);
+      text-decoration: none;
+      vertical-align: middle;
+      width: var(--icon-size);
+    }
+
+    .icon-large {
+      height: var(--icon-large);
+      width: var(--icon-large);
+    }
+
+    .icon-overlay {
+      height: var(--icon-large);
+      left: calc((100% - var(--icon-large)) / 2);
+      position: absolute;
+      top: calc((100% - var(--icon-large)) / 2);
+      width: var(--icon-large);
+      pointer-events: none;
+    }
+  </style>
+{{ end }}
diff --git a/templates/style-modal.html b/templates/style-modal.html
@@ -0,0 +1,27 @@
+{{ define "style-modal" }}
+  {{ $root := . }}
+
+  <style>
+    .modal {
+      align-items: center;
+      background-color: rgba(84, 84, 84, 0.75);
+      display: none;
+      height: 100vh;
+      justify-content: center;
+      left: 0;
+      pointer-events: none;
+      position: fixed;
+      top: 0;
+      width: 100vw;
+    }
+
+    .modal-content {
+      background-color: var(--dark);
+      display: flex;
+      flex-direction: column;
+      max-height: 100%;
+      max-width: 100%;
+      pointer-events: auto;
+    }
+  </style>
+{{ end }}
diff --git a/templates/style.html b/templates/style.html
@@ -49,6 +49,22 @@
       text-align: left;
     }
 
+    .center {
+      text-align: center;
+    }
+
+    .padding {
+      padding: 1rem;
+    }
+
+    .no-padding {
+      padding: 0;
+    }
+
+    .no-margin {
+      margin: 0;
+    }
+
     @media screen and (max-width: 424px) {
       .container {
         height: auto;

diff --git a/templates/svg.html b/templates/svg.html
@@ -0,0 +1,7 @@
+{{ define "svg-edit" }}
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="{{ . }}" d="M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z"/></svg>
+{{ end }}
+
+{{ define "svg-times" }}
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="{{ . }}" d="M323.1 441l53.9-53.9c9.4-9.4 9.4-24.5 0-33.9L279.8 256l97.2-97.2c9.4-9.4 9.4-24.5 0-33.9L323.1 71c-9.4-9.4-24.5-9.4-33.9 0L192 168.2 94.8 71c-9.4-9.4-24.5-9.4-33.9 0L7 124.9c-9.4 9.4-9.4 24.5 0 33.9l97.2 97.2L7 353.2c-9.4 9.4-9.4 24.5 0 33.9L60.9 441c9.4 9.4 24.5 9.4 33.9 0l97.2-97.2 97.2 97.2c9.3 9.3 24.5 9.3 33.9 0z"/></svg>
+{{ end }}