Add create-album dialog

partitioncloud/modules/albums.py

@@ -118,18 +118,17 @@ def partition(album_uuid, partition_uuid):
     )
 
 
-@bp.route("/create-album", methods=["GET", "POST"])
+@bp.route("/create-album", methods=["POST"])
 @login_required
 def create_album():
     current_user = User(user_id=session.get("user_id"))
 
-    if request.method == "POST":
     name = request.form["name"]
     db = get_db()
     error = None
 
     if not name or name.strip() == "":
-            error = "Un nom est requis."
+        error = "Un nom est requis. L'album n'a pas été créé"
 
     if error is None:
         while True:
@@ -161,9 +160,7 @@ def create_album():
         return redirect(f"/albums/{uuid}")
 
     flash(error)
-        return render_template("albums/create-album.html", user=current_user)
+    return redirect(request.referrer)
-
-    return render_template("albums/create-album.html", user=current_user)
 
 
 @bp.route("/<uuid>/join")

partitioncloud/static/style.css

@@ -1,11 +1,11 @@
-@import url('https://augustin64.fr/static/font/iosevka.css');
+@import url('https://www.augustin64.fr/static/font/iosevka.css');
 
 
 /** Color Schemes */
 /* Themes used: Catppuccin Latte & Moccha
  * https://github.com/catppuccin/catppuccin */
 
-/* Light theme : catppuccin Latte */
+/* Dark theme: Catpuccin Mocha */
 :root {
     --color-rosewater: #f5e0dc;
     --color-flamingo: #f2cdcd;
@@ -37,7 +37,7 @@
     --font-family: Iosevka Web;
 }
 
-/* Dark theme: Catpuccin Mocha */
+/* Light theme: Catppuccin Latte */
 @media (prefers-color-scheme: light) {
     :root {
         --color-rosewater: #dc8a78;
@@ -78,10 +78,14 @@
 
 
 /** Generic things */
-h1 {
+h1, #sidebar>h2 {
     margin-left: 30px;
 }
 
+h2 {
+    color: var(--color-subtext1);
+}
+
 a {
     text-decoration: none;
     color: var(--color-blue);
@@ -269,10 +273,26 @@ img.partition-thumbnail {
     background-color: var(--color-blue);
   }
 
-/** Sidebar: "settings" */
+/** Sidebar content */
+#new-album-button {
+    text-align: center;
+    margin: 10px;
+    background-color: var(--color-surface1);
+    padding: 8px 0;
+    border-radius: 5px;
+    color: var(--color-text);
+    border: 2px solid var(--color-overlay0);
+}
+
+#new-album-button:hover {
+    border-color: var(--color-blue);
+    background-color: var(--color-surface0);
+}
+
 #albums {
     overflow: scroll;
     height: 70vh;
+    padding: 0 5px;
 }
 
 #albums div {
@@ -324,11 +344,11 @@ button#logout, a#delete-album {
     color: var(--color-red);
 }
 
-button#logout>svg {
+#settings-container svg.icon {
     scale: 0.9;
     position: absolute;
-    top: 7px;
     left: 10px;
+    transform: translateY(-17%);
 }
 
 #settings-container>.user {

partitioncloud/templates/albums/create-album.html

@@ -1,13 +0,0 @@
-{% extends 'base.html' %}
-
-{% block header %}
-  <h1>{% block title %}Nouvel Album{% endblock %}</h1>
-{% endblock %}
-
-{% block content %}
-  <form method="post">
-    <label for="name">Nom</label>
-    <input name="name" id="name" required>
-    <input type="submit" value="Créer">
-  </form>
-{% endblock %}

partitioncloud/templates/base.html

@@ -18,6 +18,16 @@
     <!-- This div contains needed needed dialogs for the page 
     They will only appear if the user clicks a button for one of them -->
     {% block dialogs %}{% endblock %}
+    {% if g.user %}
+    <dialog id="create-album">
+      <h2>Créer un nouvel album</h2>
+      <form action="/albums/create-album" method="post">
+        <input type="text" name="name" id="name" placeholder="Nom" required><br/>
+        <input type="submit" value="Créer">
+      </form>
+      <a href="#!" class="close-dialog">Close</a>
+    </dialog>
+    {% endif %}
     <div class="mask" id="!"></div>
   </div>
   <div id="main-container">
@@ -48,7 +58,14 @@
         <input id="search-submit" type="submit" value="Go">
       </form>
       {% endif %}
-      <h1>Albums</h1>
+      <h2>Albums</h2>
+      {% if g.user %}
+      <a href="#create-album">
+        <div id="new-album-button">
+            Créer un album
+        </div>
+      </a>
+      {% endif %}
       <section id="albums">
         {% if not g.user %}
           <div style="text-align: center;"><i>Connectez vous pour avoir accès à vos albums</i></div>
@@ -69,7 +86,7 @@
         {% if g.user %}
           <a href="{{ url_for('auth.logout') }}">
             <button id="logout">
-              <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-logout" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                 <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                 <path d="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2"></path>
                 <path d="M9 12h12l-3 -3"></path>
@@ -79,7 +96,19 @@
             </button>
           </a><br/>
           {% if g.user.access_level == 1 %}
-            <a href="/admin"><button>Panneau admin</button></a><br/>
+            <a href="/admin"><button>
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+              <path d="M12 21a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3a12 12 0 0 0 8.5 3c.568 1.933 .635 3.957 .223 5.89"></path>
+              <path d="M19.001 19m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path>
+              <path d="M19.001 15.5v1.5"></path>
+              <path d="M19.001 21v1.5"></path>
+              <path d="M22.032 17.25l-1.299 .75"></path>
+              <path d="M17.27 20l-1.3 .75"></path>
+              <path d="M15.97 17.25l1.3 .75"></path>
+              <path d="M20.733 20l1.3 .75"></path>
+            </svg>Panneau admin
+            </button></a><br/>
           {% endif %}
           <div class="user">
             <div class="user-profile-picture" style="background-color:{{ user.color }};"