Improving Private button design

Author: krishnaGauss

openlibrary/i18n/messages.pot

@@ -296,7 +296,7 @@ msgstr ""
 msgid "UnfollowFollow"
 msgstr ""
 
-#: Follow.html
+#: Follow.html lists/list_follow.html
 msgid "Follow"
 msgstr ""
 
@@ -6301,7 +6301,11 @@ msgid "You"
 msgstr ""
 
 #: lists/list_follow.html
-msgid "Private"
+msgid "This patron has not enabled following"
+msgstr ""
+
+#: lists/list_follow.html
+msgid "🔒︎"
 msgstr ""
 
 #: lists/list_follow.html

openlibrary/plugins/openlibrary/js/book-page-lists.js

@@ -20,7 +20,6 @@ export function initListsSection(elem) {
                 fetchPartials(ids.work, ids.edition)
                     .then((resp) => {
                         // Check response code, continue if not 4XX or 5XX
-
                         return resp.json()
                     })
                     .then((data) => {
@@ -43,6 +42,8 @@ export function initListsSection(elem) {
                                 showAllLink.classList.remove('hidden')
                             }
                         }
+                        // Initialize private buttons after content is loaded
+                        initPrivateButtonsAfterLoad(listSection)
                     })
             }
         })
@@ -55,6 +56,20 @@ export function initListsSection(elem) {
     intersectionObserver.observe(elem)
 }
 
+/**
+ * Initialize private buttons after the lists section has been loaded
+ * @param {HTMLElement} container - The container that now has the loaded content
+ */
+function initPrivateButtonsAfterLoad(container) {
+    const privateButtons = container.querySelectorAll('.list-follow-card__private-button')
+    if (privateButtons.length > 0) {
+        import(/* webpackChunkName: "private-buttons" */ './private-button')
+            .then(module => {
+                module.initPrivateButtons(privateButtons)
+            })
+    }
+}
+
 async function fetchPartials(workId, editionId) {
     const params = {}
     if (workId) {

openlibrary/plugins/openlibrary/js/private-button.js

@@ -0,0 +1,12 @@
+import { FadingToast } from './Toast'
+
+export function initPrivateButtons(buttons) {
+    buttons.forEach(button => {
+        button.addEventListener('click', (event) => {
+            event.preventDefault();
+            const toast = new FadingToast('This patron has not enabled following', null, 3000);
+            toast.show();
+
+        });
+    });
+}

openlibrary/templates/lists/list_follow.html

@@ -53,9 +53,12 @@
                         $if is_public:
                             $:render_follow_button(owner_username, is_subscribed)
                         $else:
-                            <button class="list-follow-card__private-button" disabled>
-                                <span class="pvt-text">$_('Private')</span>
-                            </button>
+                            <div title="$_('This patron has not enabled following')">
+                                <button class="list-follow-card__private-button" >
+                                    <span class="pvt-icon">$_('🔒︎')</span>
+                                    <span class="pvt-text">$_('Follow')</span>
+                                </button>
+                            </div>
                 </div>
             </div>
         $else:

static/css/components/list-follow.less

@@ -131,7 +131,7 @@
     background-color: @grey;
     border: none;
     cursor: not-allowed;
-    pointer-events: none;
+    pointer-events: auto;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -144,6 +144,11 @@
       box-shadow: none; // Remove default shadow if present
       margin: 0;
       letter-spacing: 0.2px;
+      margin-top: 1px;
+    }
+    .pvt-icon {
+      color: @white;
+      font-size: 14px;
     }
   }
   &__title {