From 819e2b5f9f73a88412ba78633d5a0d0ce767a55c Mon Sep 17 00:00:00 2001
From: thomas girod <thgirod@hotmail.com>
Date: Tue, 30 Jul 2024 19:57:56 +0200
Subject: [PATCH] better download button style

---
 core/static/core/colors.scss                 |  4 +-
 core/static/core/header.scss                 |  9 +--
 core/static/core/style.scss                  | 34 ++++-----
 core/templates/core/user_pictures.jinja      | 74 +++++++++++---------
 eboutic/static/eboutic/css/eboutic.css       | 26 +------
 eboutic/templates/eboutic/eboutic_main.jinja |  4 +-
 6 files changed, 70 insertions(+), 81 deletions(-)

diff --git a/core/static/core/colors.scss b/core/static/core/colors.scss
index 9bb403e0..5453dd34 100644
--- a/core/static/core/colors.scss
+++ b/core/static/core/colors.scss
@@ -27,4 +27,6 @@ $twitblue: hsl(206, 82%, 63%);
 
 $shadow-color: rgb(223, 223, 223);
 
-$background-button-color: hsl(0, 0%, 95%);
\ No newline at end of file
+$background-button-color: hsl(0, 0%, 95%);
+
+$deepblue: #354a5f;
\ No newline at end of file
diff --git a/core/static/core/header.scss b/core/static/core/header.scss
index 5888a965..e1430bba 100644
--- a/core/static/core/header.scss
+++ b/core/static/core/header.scss
@@ -1,7 +1,8 @@
+@import "colors";
+
 $hovered-text-color: #c2c2c2;
 $text-color: white;
 
-$background-color: #354a5f;
 $background-color-hovered: #283747;
 
 $red-text-color: #eb2f06;
@@ -9,7 +10,7 @@ $hovered-red-text-color: #ff4d4d;
 
 .header {
   box-sizing: border-box;
-  background-color: $background-color;
+  background-color: $deepblue;
   box-shadow: 3px 3px 3px 0 #dfdfdf;
   border-radius: 0;
   width: 100%;
@@ -98,7 +99,7 @@ $hovered-red-text-color: #ff4d4d;
         border-radius: 0;
         margin: 0;
         box-sizing: border-box;
-        background-color: $background-color;
+        background-color: $deepblue;
         width: 45px;
         height: 25px;
         padding: 0;
@@ -213,7 +214,7 @@ $hovered-red-text-color: #ff4d4d;
           background-position: center center;
           background-size: cover;
           background-repeat: no-repeat;
-          background-color: $background-color;
+          background-color: $deepblue;
         }
 
         >.options {
diff --git a/core/static/core/style.scss b/core/static/core/style.scss
index de042bb9..3ba0f569 100644
--- a/core/static/core/style.scss
+++ b/core/static/core/style.scss
@@ -105,7 +105,7 @@ a:not(.button) {
 
   .collapse-header {
     color: white;
-    background-color: #354a5f;
+    background-color: $deepblue;
     padding: 5px 10px;
     display: flex;
     align-items: center;
@@ -206,34 +206,36 @@ a:not(.button) {
   width: 90%;
   margin: 20px auto 0;
 /*---------------------------------NAV---------------------------------*/
-
   .btn {
     font-size: 15px;
     font-weight: normal;
     color: white;
-    min-width: 60px;
-    padding: 5px 10px;
+    padding: 9px 13px;
     border: none;
     text-decoration: none;
 
     &.btn-blue {
-      background-color: #354a5f;
-    }
-
-    &.btn-blue:disabled {
-      background-color: rgba(70, 90, 126, 0.4);
-    }
-
-    &.btn-blue.clickable:not(:disabled):hover {
-      background-color: #2c3646;
+      background-color: $deepblue;
+      &:not(:disabled):hover {
+        background-color: darken($deepblue, 10%);
+      }
+      &:disabled {
+        background-color: rgba(70, 90, 126, 0.4);
+      }
     }
 
     &.btn-grey {
       background-color: grey;
+      &:not(:disabled):hover {
+        background-color: darken(gray, 15%);
+      }
+      &:disabled {
+        background-color: lighten(gray, 15%);
+      }
     }
 
-    &.btn-grey.clickable:not(:disabled):hover {
-      background-color: hsl(210, 5%, 30%);
+    i {
+      margin-right: 4px;
     }
   }
 
@@ -977,7 +979,7 @@ thead td {
 }
 
 thead {
-  background-color: #354a5f;
+  background-color: $deepblue;
   color: white;
 }
 
diff --git a/core/templates/core/user_pictures.jinja b/core/templates/core/user_pictures.jinja
index 0e09245e..d0502f4f 100644
--- a/core/templates/core/user_pictures.jinja
+++ b/core/templates/core/user_pictures.jinja
@@ -19,12 +19,14 @@
 
 {% block content %}
   <main>
-    {% if can_edit(profile, user) %}
+    {% if user.id == object.id and albums|length > 0 %}
       <div x-data="picture_download" x-cloak>
         <button
           :disabled="in_progress"
+          class="btn btn-blue"
           @click="download('{{ url("api:pictures") }}?users_identified={{ object.id }}')"
         >
+          <i class="fa fa-download"></i>
           {% trans %}Download all my pictures{% endtrans %}
         </button>
         <progress x-ref="progress" x-show="in_progress"></progress>
@@ -32,6 +34,7 @@
     {% endif %}
     {% for album, pictures in albums|items %}
       <h4>{{ album }}</h4>
+      <br />
       <div class="photos">
         {% for picture in pictures %}
           {% if picture.can_be_viewed_by(user) %}
@@ -60,11 +63,13 @@
       <br>
     {% endfor %}
   </main>
-{% endblock %}
+{% endblock content %}
+
 {% block script %}
 
   {{ super() }}
-  <script>
+  {% if user.id == object.id %}
+    <script>
     /**
      * @typedef Picture
      * @property {number} id
@@ -77,40 +82,41 @@
      * @property {string} thumb_url
      */
 
-    document.addEventListener("alpine:init", () => {
-      Alpine.data("picture_download", () => ({
-        in_progress: false,
+      document.addEventListener("alpine:init", () => {
+        Alpine.data("picture_download", () => ({
+          in_progress: false,
 
-        async download(url) {
-          this.in_progress = true;
-          const bar = this.$refs.progress;
-          bar.value = 0;
+          async download(url) {
+            this.in_progress = true;
+            const bar = this.$refs.progress;
+            bar.value = 0;
 
             /** @type Picture[] */
-          const pictures = await (await fetch(url)).json();
-          bar.max = pictures.length;
+            const pictures = await (await fetch(url)).json();
+            bar.max = pictures.length;
 
-          const fileHandle = await window.showSaveFilePicker({
-            _preferPolyfill: false,
-            suggestedName: "{%- trans -%} pictures {%- endtrans -%}.zip",
-            types: {},
-            excludeAcceptAllOption: false,
-          })
-          const zipWriter = new zip.ZipWriter(await fileHandle.createWritable());
+            const fileHandle = await window.showSaveFilePicker({
+              _preferPolyfill: false,
+              suggestedName: "{%- trans -%} pictures {%- endtrans -%}.zip",
+              types: {},
+              excludeAcceptAllOption: false,
+            })
+            const zipWriter = new zip.ZipWriter(await fileHandle.createWritable());
 
-          await Promise.all(pictures.map(p => {
-            const img_name = "IMG_" + p.date.replaceAll(/[:\-]/g, "_") + p.name.slice(p.name.lastIndexOf("."));
-            return zipWriter.add(
-              img_name,
-              new zip.HttpReader(p.full_size_url),
-              {level: 9, lastModDate: new Date(p.date), onstart: () => bar.value += 1}
-            );
-          }))
+            await Promise.all(pictures.map(p => {
+              const img_name = "IMG_" + p.date.replaceAll(/[:\-]/g, "_") + p.name.slice(p.name.lastIndexOf("."));
+              return zipWriter.add(
+                img_name,
+                new zip.HttpReader(p.full_size_url),
+                {level: 9, lastModDate: new Date(p.date), onstart: () => bar.value += 1}
+              );
+            }));
 
-          await zipWriter.close();
-          this.in_progress = false;
-        }
-      }))
-    });
-  </script>
-{% endblock %}
+            await zipWriter.close();
+            this.in_progress = false;
+          }
+        }))
+      });
+    </script>
+  {% endif %}
+{% endblock script %}
diff --git a/eboutic/static/eboutic/css/eboutic.css b/eboutic/static/eboutic/css/eboutic.css
index bc9757e2..43cadd3b 100644
--- a/eboutic/static/eboutic/css/eboutic.css
+++ b/eboutic/static/eboutic/css/eboutic.css
@@ -136,7 +136,7 @@
     right: 5px;
     padding: 5px;
     border-radius: 50%;
-    box-shadow: 0px 0px 12px 2px rgb(0 0 0 / 14%);
+    box-shadow: 0 0 12px 2px rgb(0 0 0 / 14%);
     background-color: white;
     width: 20px;
     height: 20px;
@@ -186,29 +186,7 @@
 }
 
 #eboutic .catalog-buttons button {
-    font-size: 15px!important;
-    font-weight: normal;
-    color: white;
     min-width: 60px;
-    padding: 10px 15px;
-}
-
-#eboutic .catalog-buttons .validate {
-    background-color: #354a5f;
-}
-#eboutic .catalog-buttons .clear {
-    background-color: gray;
-}
-#eboutic .catalog-buttons button i {
-    margin-right: 4px;
-}
-
-#eboutic .catalog-buttons button.validate:hover {
-    background-color: #2c3646;
-}
-
-#eboutic .catalog-buttons button.clear:hover {
-    background-color:hsl(210,5%,30%);
 }
 
 #eboutic .catalog-buttons form {
@@ -252,7 +230,7 @@
     }
 
     #eboutic .product-image {
-        margin-bottom: 0px;
+        margin-bottom: 0;
         max-width: 70px;
     }
 }
diff --git a/eboutic/templates/eboutic/eboutic_main.jinja b/eboutic/templates/eboutic/eboutic_main.jinja
index 3e1a2239..5652b84b 100644
--- a/eboutic/templates/eboutic/eboutic_main.jinja
+++ b/eboutic/templates/eboutic/eboutic_main.jinja
@@ -62,13 +62,13 @@
         </li>
       </ul>
       <div class="catalog-buttons">
-        <button @click="clear_basket()" class="clear">
+        <button @click="clear_basket()" class="btn btn-grey">
           <i class="fa fa-trash"></i>
           {% trans %}Clear{% endtrans %}
         </button>
         <form method="get" action="{{ url('eboutic:command') }}">
           {% csrf_token %}
-          <button class="validate">
+          <button class="btn btn-blue">
             <i class="fa fa-check"></i>
             <input type="submit" value="{% trans %}Validate{% endtrans %}"/>
           </button>