Bookmark style improvements

- Show times icon to remove bookmarks from list modal - Show MUC color for the times icon
conversejs · Dec 26, 2024 · b20948d · b20948d
1 parent b0896af
commit b20948d
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 13 deletions.
diff --git a/src/plugins/bookmark-views/components/templates/item.js b/src/plugins/bookmark-views/components/templates/item.js
@@ -18,7 +18,7 @@ export default (bm) => {
                 data-bookmark-name="${bm.getDisplayName()}"
                 title="${info_remove_bookmark}"
                 @click=${removeBookmarkViaEvent}>
-            <converse-icon class="fa fa-bookmark" size="1em"></converse-icon>
+            <converse-icon class="fa fa-times" size="1em"></converse-icon>
             </a>
         </div>
     `;

diff --git a/src/plugins/bookmark-views/components/templates/list.js b/src/plugins/bookmark-views/components/templates/list.js
@@ -1,35 +1,40 @@
 import bookmark_item from './item.js';
 import { __ } from 'i18n';
 import { _converse } from '@converse/headless';
-import { html } from "lit";
+import { html } from 'lit';
 
 const filterBookmark = (b, text) => b.get('name')?.includes(text) || b.get('jid')?.includes(text);
 
+/**
+ * @param {import('../bookmarks-list').default} el
+ */
 export default (el) => {
     const i18n_placeholder = __('Filter');
     const filter_text = el.model.get('text');
     const { bookmarks } = _converse.state;
-    const shown_bookmarks = filter_text ? bookmarks.filter(b => filterBookmark(b, filter_text)) : bookmarks;
+    const shown_bookmarks = filter_text ? bookmarks.filter((b) => filterBookmark(b, filter_text)) : bookmarks;
 
     return html`
         <form class="converse-form bookmarks-filter">
             <div class="btn-group w-100">
                 <input
                     .value=${filter_text ?? ''}
-                    @keydown="${ev => el.liveFilter(ev)}"
+                    @keydown="${(ev) => el.liveFilter(ev)}"
                     class="form-control"
-                    placeholder="${i18n_placeholder}"/>
+                    placeholder="${i18n_placeholder}"
+                />
 
-                <converse-icon size="1em" class="fa fa-times clear-input ${ !filter_text ? 'hidden' : '' }"
-                    @click=${el.clearFilter}>
+                <converse-icon
+                    size="1em"
+                    class="fa fa-times clear-input ${!filter_text ? 'hidden' : ''}"
+                    @click=${el.clearFilter}
+                >
                 </converse-icon>
             </div>
         </form>
 
         <div class="list-container list-container--bookmarks">
-            <div class="items-list bookmarks rooms-list">
-                ${ shown_bookmarks.map(bm => bookmark_item(bm)) }
-            </div>
+            <div class="items-list bookmarks rooms-list">${shown_bookmarks.map((bm) => bookmark_item(bm))}</div>
         </div>
     `;
-}
+};
diff --git a/src/plugins/bookmark-views/modals/bookmark-list.js b/src/plugins/bookmark-views/modals/bookmark-list.js
@@ -1,8 +1,8 @@
-import '../components/bookmarks-list.js';
+import { api } from "@converse/headless";
 import BaseModal from "plugins/modal/modal.js";
 import { html } from "lit";
 import { __ } from 'i18n';
-import { api } from "@converse/headless";
+import '../components/bookmarks-list.js';
 
 export default class BookmarkListModal extends BaseModal {
 

diff --git a/src/plugins/bookmark-views/styles/bookmarks.scss b/src/plugins/bookmark-views/styles/bookmarks.scss
@@ -13,4 +13,14 @@ converse-bookmarks {
     .list-item-link {
         padding: 0 1em;
     }
+    .available-chatroom {
+        &:hover {
+            .list-item-action {
+                opacity: 1 !important;
+                converse-icon svg {
+                    fill: var(--muc-color);
+                }
+            }
+        }
+    }
 }