From a70719619c7dce7cd371a9a7839536546b4d5417 Mon Sep 17 00:00:00 2001
From: Samantaz Fox <coding@samantaz.fr>
Date: Sat, 22 Apr 2023 17:50:34 +0200
Subject: [PATCH] HTML: Use new buttons for playlists (save/delete/add
 videos/etc...)

---
 assets/css/default.css                |  2 +-
 locales/en-US.json                    |  5 ++
 src/invidious/views/edit_playlist.ecr | 41 ++++++++++------
 src/invidious/views/playlist.ecr      | 70 +++++++++++++++++----------
 4 files changed, 75 insertions(+), 43 deletions(-)

diff --git a/assets/css/default.css b/assets/css/default.css
index 48cb4264..7a99a0db 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -219,7 +219,7 @@ div.thumbnail > .bottom-right-overlay {
 }
 
 .length, .top-left-overlay button {
-  background-color: rgba(35, 35, 35, 0.85);
+  background-color: rgba(35, 35, 35, 0.85) !important;
 }
 
 
diff --git a/locales/en-US.json b/locales/en-US.json
index e13ba968..d2466f5d 100644
--- a/locales/en-US.json
+++ b/locales/en-US.json
@@ -9,6 +9,10 @@
     "generic_subscribers_count_plural": "{{count}} subscribers",
     "generic_subscriptions_count": "{{count}} subscription",
     "generic_subscriptions_count_plural": "{{count}} subscriptions",
+    "generic_button_delete": "Delete",
+    "generic_button_edit": "Edit",
+    "generic_button_save": "Save",
+    "generic_button_rss": "RSS",
     "LIVE": "LIVE",
     "Shared `x` ago": "Shared `x` ago",
     "Unsubscribe": "Unsubscribe",
@@ -170,6 +174,7 @@
     "Title": "Title",
     "Playlist privacy": "Playlist privacy",
     "Editing playlist `x`": "Editing playlist `x`",
+    "playlist_button_add_items": "Add videos",
     "Show more": "Show more",
     "Show less": "Show less",
     "Watch on YouTube": "Watch on YouTube",
diff --git a/src/invidious/views/edit_playlist.ecr b/src/invidious/views/edit_playlist.ecr
index d2981886..bc4183bd 100644
--- a/src/invidious/views/edit_playlist.ecr
+++ b/src/invidious/views/edit_playlist.ecr
@@ -7,8 +7,32 @@
 
 <form class="pure-form" action="/edit_playlist?list=<%= plid %>" method="post">
     <div class="pure-g h-box">
-        <div class="pure-u-2-3">
+        <div class="pure-u-1-2">
             <h3><input class="pure-input-1" maxlength="150" name="title" type="text" value="<%= title %>"></h3>
+        </div>
+
+        <div class="pure-u-1-2 user-field">
+            <div class="pure-u-1-3">
+                <button type="submit" class="pure-button pure-button-secondary low-profile" dir="auto">
+                    <i class="icon ion-md-save"></i>&nbsp;<%= translate(locale, "generic_button_save") %>
+                </button>
+            </div>
+
+            <div class="pure-u-1-3">
+                <a class="pure-button pure-button-secondary low-profile" dir="auto" href="/delete_playlist?list=<%= plid %>">
+                    <i class="icon ion-md-trash"></i>&nbsp;<%= translate(locale, "generic_button_delete") %>
+                </a>
+            </div>
+            <div class="pure-u-1-3">
+                <a class="pure-button pure-button-secondary low-profile" dir="auto" href="/feed/playlist/<%= plid %>">
+                    <i class="icon ion-logo-rss"></i>&nbsp;<%= translate(locale, "generic_button_rss") %>
+                </a>
+            </div>
+        </div>
+    </div>
+
+    <div class="h-box">
+        <div class="pure-u-1-1">
             <b>
                 <%= HTML.escape(playlist.author) %> |
                 <%= translate_count(locale, "generic_videos_count", playlist.video_count) %> |
@@ -21,21 +45,6 @@
                 </select>
             </b>
         </div>
-        <div class="pure-u-1-3" style="text-align:right">
-            <h3>
-                <div class="pure-g user-field">
-                    <div class="pure-u-1-3">
-                        <a href="javascript:void(0)">
-                            <button type="submit" style="all:unset">
-                                <i class="icon ion-md-save"></i>
-                            </button>
-                        </a>
-                    </div>
-                    <div class="pure-u-1-3"><a href="/delete_playlist?list=<%= plid %>"><i class="icon ion-md-trash"></i></a></div>
-                    <div class="pure-u-1-3"><a href="/feed/playlist/<%= plid %>"><i class="icon ion-logo-rss"></i></a></div>
-                </div>
-            </h3>
-        </div>
     </div>
 
     <div class="h-box">
diff --git a/src/invidious/views/playlist.ecr b/src/invidious/views/playlist.ecr
index 08995a83..8d4d116d 100644
--- a/src/invidious/views/playlist.ecr
+++ b/src/invidious/views/playlist.ecr
@@ -7,8 +7,51 @@
 <% end %>
 
 <div class="pure-g h-box">
-    <div class="pure-u-2-3">
+    <div class="pure-u-1-2">
         <h3><%= title %></h3>
+    </div>
+
+    <div class="pure-u-1-2 user-field">
+        <%- if playlist.is_a?(InvidiousPlaylist) && playlist.author == user.try &.email -%>
+            <div class="pure-u-1-3">
+                <a class="pure-button pure-button-secondary low-profile" dir="auto" href="/add_playlist_items?list=<%= plid %>">
+                    <i class="icon ion-md-add"></i>&nbsp;<%= translate(locale, "playlist_button_add_items") %>
+                </a>
+            </div>
+            <div class="pure-u-1-3">
+                <a class="pure-button pure-button-secondary low-profile" dir="auto" href="/edit_playlist?list=<%= plid %>">
+                    <i class="icon ion-md-create"></i>&nbsp;<%= translate(locale, "generic_button_edit") %>
+                </a>
+            </div>
+            <div class="pure-u-1-3">
+                <a class="pure-button pure-button-secondary low-profile" dir="auto" href="/delete_playlist?list=<%= plid %>">
+                    <i class="icon ion-md-trash"></i>&nbsp;<%= translate(locale, "generic_button_delete") %>
+                </a>
+            </div>
+        <%- else -%>
+            <div class="pure-u-1-3">
+                <%- if IV::Database::Playlists.exists?(playlist.id) -%>
+                    <a class="pure-button pure-button-secondary low-profile" dir="auto" href="/subscribe_playlist?list=<%= plid %>">
+                        <i class="icon ion-md-add"></i>&nbsp;<%= translate(locale, "Subscribe") %>
+                    </a>
+                <%- else -%>
+                    <a class="pure-button pure-button-secondary low-profile" dir="auto" href="/delete_playlist?list=<%= plid %>">
+                        <i class="icon ion-md-trash"></i>&nbsp;<%= translate(locale, "Unsubscribe") %>
+                    </a>
+                <%- end -%>
+            </div>
+        <%- end -%>
+
+        <div class="pure-u-1-3">
+            <a class="pure-button pure-button-secondary low-profile" dir="auto" href="/feed/playlist/<%= plid %>">
+                <i class="icon ion-logo-rss"></i>&nbsp;<%= translate(locale, "generic_button_rss") %>
+            </a>
+        </div>
+    </div>
+</div>
+
+<div class="h-box">
+    <div class="pure-u-1-1">
         <% if playlist.is_a? InvidiousPlaylist %>
             <b>
                 <% if playlist.author == user.try &.email %>
@@ -54,37 +97,12 @@
             </div>
         <% end %>
     </div>
-    <div class="pure-u-1-3" style="text-align:right">
-        <h3>
-            <div class="pure-g user-field">
-                <% if playlist.is_a?(InvidiousPlaylist) && playlist.author == user.try &.email %>
-                    <div class="pure-u-1-3"><a href="/edit_playlist?list=<%= plid %>"><i class="icon ion-md-create"></i></a></div>
-                    <div class="pure-u-1-3"><a href="/delete_playlist?list=<%= plid %>"><i class="icon ion-md-trash"></i></a></div>
-                <% else %>
-                    <% if Invidious::Database::Playlists.exists?(playlist.id) %>
-                        <div class="pure-u-1-3"><a href="/subscribe_playlist?list=<%= plid %>"><i class="icon ion-md-add"></i></a></div>
-                    <% else %>
-                        <div class="pure-u-1-3"><a href="/delete_playlist?list=<%= plid %>"><i class="icon ion-md-trash"></i></a></div>
-                    <% end %>
-                <% end %>
-                <div class="pure-u-1-3"><a href="/feed/playlist/<%= plid %>"><i class="icon ion-logo-rss"></i></a></div>
-            </div>
-        </h3>
-    </div>
 </div>
 
 <div class="h-box">
     <div id="descriptionWrapper"><%= playlist.description_html %></div>
 </div>
 
-<% if playlist.is_a?(InvidiousPlaylist) && playlist.author == user.try &.email %>
-<div class="h-box" style="text-align:right">
-    <h3>
-        <a href="/add_playlist_items?list=<%= plid %>"><i class="icon ion-md-add"></i></a>
-    </h3>
-</div>
-<% end %>
-
 <div class="h-box">
     <hr>
 </div>