greg/rss-reader
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

use fontawesome icons

Browse Source
This commit is contained in:
Greg Shuflin 2025-02-04 03:33:03 -08:00
parent 4277fa1041
commit d54049399e
3 changed files with 31 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
static/css/style.css
View File

@ -389,6 +389,13 @@ button:disabled {
background-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.1);
} }
.menu-icon {
display: inline-block;
width: 1.2em;
margin-right: 0.5rem;
text-align: center;
}
.feed-menu-item.delete { .feed-menu-item.delete {
color: var(--primary-red); color: var(--primary-red);
} }

24
static/js/app.js
View File

@ -106,7 +106,7 @@ function openFeed(feed) {
const menuButton = document.createElement('button'); const menuButton = document.createElement('button');
menuButton.className = 'feed-menu-button'; menuButton.className = 'feed-menu-button';
menuButton.innerHTML = '⋮'; menuButton.innerHTML = '<i class="fas fa-ellipsis-v"></i>';
menuButton.title = 'Feed options'; menuButton.title = 'Feed options';
menuButton.onclick = (e) => { menuButton.onclick = (e) => {
e.stopPropagation(); e.stopPropagation();
@ -117,9 +117,28 @@ function openFeed(feed) {
const menu = document.createElement('div'); const menu = document.createElement('div');
menu.className = 'feed-menu'; menu.className = 'feed-menu';
const copyItem = document.createElement('a');
copyItem.className = 'feed-menu-item copy';
copyItem.innerHTML = '<span class="menu-icon"><i class="fas fa-copy"></i></span> Copy feed URL';
copyItem.onclick = async (e) => {
e.stopPropagation();
try {
await navigator.clipboard.writeText(feed.url);
// Briefly show success feedback
const originalText = copyItem.innerHTML;
copyItem.innerHTML = '<span class="menu-icon"><i class="fas fa-check"></i></span> Copied!';
setTimeout(() => {
copyItem.innerHTML = originalText;
}, 1500);
} catch (error) {
console.error('Failed to copy URL:', error);
}
menu.classList.remove('show');
};
const deleteItem = document.createElement('a'); const deleteItem = document.createElement('a');
deleteItem.className = 'feed-menu-item delete'; deleteItem.className = 'feed-menu-item delete';
deleteItem.textContent = 'Remove Feed'; deleteItem.innerHTML = '<span class="menu-icon"><i class="fas fa-trash-alt"></i></span> Remove Feed';
deleteItem.onclick = async (e) => { deleteItem.onclick = async (e) => {
e.stopPropagation(); e.stopPropagation();
if (confirm(`Are you sure you want to delete "${feed.name}"?`)) { if (confirm(`Are you sure you want to delete "${feed.name}"?`)) {
@ -139,6 +158,7 @@ function openFeed(feed) {
menu.classList.remove('show'); menu.classList.remove('show');
}; };
menu.appendChild(copyItem);
menu.appendChild(deleteItem); menu.appendChild(deleteItem);
name.appendChild(menuButton); name.appendChild(menuButton);
name.appendChild(menu); name.appendChild(menu);

3
templates/index.html.tera
View File

@ -4,6 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RSS Reader</title> <title>RSS Reader</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="stylesheet" href="/static/css/style.css"> <link rel="stylesheet" href="/static/css/style.css">
</head> </head>
<body class="with-sidebar"> <body class="with-sidebar">
@ -14,7 +15,7 @@
<h1 class="top-bar-title">RSS Reader</h1> <h1 class="top-bar-title">RSS Reader</h1>
<div class="user-menu"> <div class="user-menu">
<button class="user-menu-button" id="userMenuButton"> <button class="user-menu-button" id="userMenuButton">
<span class="user-menu-icon">☰</span> <span class="user-menu-icon"><i class="fas fa-user"></i></span>
</button> </button>
<div class="user-menu-dropdown" id="userMenuDropdown"> <div class="user-menu-dropdown" id="userMenuDropdown">
<button class="user-menu-item" id="logoutButton">Logout</button> <button class="user-menu-item" id="logoutButton">Logout</button>