ranger/rangerhq-logbook
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ux: Tier 1 cleanup of wp_notes_page_callback — single H1, collapse triple welcome surfaces, footer support link

Browse Source 
Single-pass UX cleanup of the main WP Notes admin page. Functionality
unchanged; the page is shorter, has one H1, and stops contradicting
itself.

CHANGES
- Single H1 on the page (was five different H1s).
- Welcome/about content collapsed from THREE on-page surfaces (top
  dismissible notice + nested toggle + Show/Close button row) to one
  single description line linking to the dedicated About page where
  the long copy already lives.
- Two duplicate "Toggle Welcome Section" buttons with the SAME label
  but different targets — both removed.
- Embedded "What's New v3.0.0" changelog block deleted: it was
  hard-coded to v3.0.0 while the plugin reports v3.0.2. The real
  history is in CHANGELOG.md.
- "Buy me a coffee" button moved from page header to page footer —
  promo shouldn't be the first thing under the page title.
- Invalid HTML cleaned up (li outside ul, p wrapping div/ul) by way
  of removing the welcome blob that contained it.
- Dead bulk-action UI removed: per-row checkboxes and "Select all"
  header in both wp_notes_display_notes() and wp_notes_list_table()
  rendered but nothing acted on the selection. Removed with inline
  comments marking the spot for when real bulk-actions land. Edit
  form colspan adjusted to match the new column count.
- ~80 lines of inline style+script for the about-box dismissal
  removed (localStorage tracking, show/hide handlers, two style
  blocks). WordPress's notice notice-info is-dismissible + user-meta
  is the right path if a banner needs to return.
- toggleSection() JS helper removed (no toggles remain).
- Small CSS additions to inc/wp-notes-styles.php for the header
  banner and footer-support link.

ALSO FIXED
- PHP 8.2 deprecation: ${size}px → {$size}px in the dashboard
  list-table render. ${var} interpolation is deprecated since 8.2
  and will hard-error in 9.0.

NET DIFF: wp-notes.php -213 lines, total -111 lines across 4 files
(plus a new CHANGELOG entry). Storage model unchanged.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
David Keane
2026-05-25 07:37:07 +01:00
parent 05d8ad52ad
commit 930e605b2d
4 changed files with 108 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files
wp-notes.php
+25 -214
View File
@@ -731,217 +731,21 @@ function wp_notes_page_callback() {
?>
<div class="wrap">
<!-- Header Section with WordPress Admin Styling -->
<h1 class="wp-heading-inline">Welcome to WP Notes</h1>
<span class="page-title-action">Version <?php echo esc_html(WP_NOTES_VERSION); ?></span>
<!-- Footer Section with WordPress Admin Styling -->
<div class="wp-notes-footer postbox">
<div class="inside">
<div class="centered">
<a href="https://www.buymeacoffee.com/davidkeanek" target="_blank" class="button button-secondary"
aria-label="Support the developer by buying them a coffee">
<img src="https://img.buymeacoffee.com/button-api/?text=Buy%20me%20a%20coffee&emoji=&slug=davidkeanek&button_colour=FFDD00&font_colour=000000&font_family=Cookie&outline_colour=000000&coffee_colour=ffffff"
alt="Buy me a coffee button"
style="max-height: 35px;">
</a>
</div>
</div>
<h1 class="wp-heading-inline">WP Notes</h1>
<span class="page-title-action">v<?php echo esc_html(WP_NOTES_VERSION); ?></span>
<hr class="wp-header-end">
<p class="description" style="max-width: 720px;">
Log your daily tasks and keep a tidy work-log inside WordPress.
<a href="<?php echo esc_url(admin_url('admin.php?page=wp-notes-about')); ?>">Read more on the About page →</a>
</p>
<div class="wp-notes-header-banner">
<img src="<?php echo esc_url(WP_NOTES_URL); ?>assets/wp-notes-banner.jpg"
alt="WP Notes Banner"
class="wp-notes-banner-img">
</div>
<!-- WordPress Admin Notices Styling -->
<style>
.centered { text-align: center; }
.wp-notes-footer { margin: 20px 0; }
.wp-notes-footer .inside { padding: 20px; }
</style>
<!-- Dismissible Box with WordPress Admin Styling -->
<div id="wp-notes-about-box" class="notice notice-info is-dismissible">
<div class="about-content">
<h2>About WP Notes</h2>
<p>Thank you for using WP Notes! This plugin helps you manage your WordPress tasks and notes efficiently. Keep track of your todos, mark them as complete, and export your data for safekeeping.</p>
<p>I made this plugin for my website to log my daily tasks and notes as a logbook for my clients, so they can see the work done by me or you and get clear value for their investment.</p>
</div>
<button type="button" class="notice-dismiss" onclick="closeAboutBox()" aria-label="Dismiss this notice">
<span class="screen-reader-text">Dismiss this notice</span>
</button>
</div>
<!-- Action Buttons with WordPress Admin Styling -->
<div class="wp-notes-actions">
<button type="button" class="button" onclick="showAboutBoxAgain()" aria-label="Show the about message again">
Show Welcome Message
</button>
<button type="button" class="button" onclick="closeAboutBox()" aria-label="Close the about box">
Close About Box
</button>
</div>
<script>
function showAboutBoxAgain() {
document.getElementById('wp-notes-about-box').style.display = 'block';
// Remove the localStorage value every time they load the plugin page
localStorage.removeItem('wpNotesAboutDismissed'); // Remove dismissal flag
}
</script>
<!-- JavaScript to handle the dismiss action and remember it across page loads -->
<script>
document.addEventListener('DOMContentLoaded', function() {
// Check if the box has been dismissed previously
if (localStorage.getItem('wpNotesAboutDismissed') === 'true') {
// Check if the box has been dismissed within the last week
const lastDismissed = localStorage.getItem('wpNotesAboutLastDismissed');
const oneWeek = 7 * 24 * 60 * 60 * 1000; // 1 week in milliseconds
const now = Date.now();
if (!lastDismissed || (now - lastDismissed) > oneWeek) {
document.getElementById('wp-notes-about-box').style.display = 'block';
localStorage.removeItem('wpNotesAboutLastDismissed'); // Reset timestamp to show the message
}
}
}
);
function closeAboutBox() {
document.getElementById('wp-notes-about-box').style.display = 'none';
// Store dismissal in localStorage
localStorage.setItem('wpNotesAboutDismissed', 'true');
// Store the current time as the last dismissed time
localStorage.setItem('wpNotesAboutLastDismissed', Date.now());
}
</script>
<!-- Styles for the dismissible box -->
<style>
.wp-notes-about-box {
position: relative;
background: #f9f9f9;
padding: 20px;
border: 1px solid #ccd0d4;
border-radius: 4px;
margin: 20px 0;
}
.wp-notes-close-button {
position: absolute;
top: 10px;
right: 10px;
background: none;
border: none;
font-size: 18px;
color: #aaa;
cursor: pointer;
}
.wp-notes-close-button:hover {
color: #0073aa;
}
</style>
<p>
<button onclick="toggleSection('header')" style="background: #0073aa; color: #fff; border: none; padding: 8px 12px; cursor: pointer;">
Toggle Welcome Section
</button>
<div id="header" style="display: none; margin-top: 10px;">
<div class="wp-notes-welcome" style="background: #fff; padding: 20px; margin: 20px 0; border: 1px solid #ccc;">
<br>
<div class="wp-notes-header" style="margin-bottom: 30px;">
<img src="<?php echo esc_url(WP_NOTES_URL); ?>assets/wp-notes-banner.jpg"
style="max-width: 1200px; width: 100%; height: auto; margin-bottom: 20px;"
alt="WP Notes Banner">
<!-- What's New Section -->
<h1>Welcome to WP Notes v <?php echo esc_html(WP_NOTES_VERSION); ?></h1>
<p>
<div class="wp-notes-whatsnew" style="background: #fff; padding: 20px; margin: 20px 0; border: 1px solid #ccc;">
<button onclick="toggleSection('about-section')" style="background: #0073aa; color: #fff; border: none; padding: 8px 12px; cursor: pointer;">
Toggle Welcome Section
</button>
<!-- Section to Toggle -->
<div id="about-section" style="display: none; margin-top: 10px;">
<h1>About WP Notes</h1>
<p>
Thank you for using WP Notes! This plugin helps you manage your WordPress tasks and notes efficiently.
Keep track of your todo's, mark them as complete, and export your data for safekeeping. I made this
plugin for my website to log my daily tasks and notes as a logbook for my clients, so they can see the work
done by me or you and so PAY, as every task is important and the customers need to know what I've done.
</p>
<p>
<li>Log all your tasks and jobs so prove work is being done.</li>
<li>As you can see, this plugin is very flexible and can be used for a wide range of WordPress users.</li>
<li>I hope you find it useful too.</li>
</p>
<h1>What WP Notes Offers</h1>
<p>WP Notes is a versatile plugin that caters to a wide range of users:</p>
<p>We're excited to offer our plugin to our customers.</p>
<p>WP Notes is a versatile plugin that caters to a wide range of users:</p>
<p>We have several features for you to choose from:</p>
<ul>
<li><strong>Freelancers and site developers</strong> tracking work done on client sites.</li>
<li><strong>Teams</strong> wanting to document changes or keep a changelog in the dashboard.</li>
<li><strong>WordPress power users</strong> wanting a straightforward dashboard notes system.</li>
<li><strong>Small businesses</strong> needing a simple task management solution for WordPress.</li>
<li><strong>Students</strong> wanting to keep track of their daily tasks to prove work is being done.</li>
<li><strong>Teachers</strong> wanting to keep track of their students' progress with Email Notifications.</li>
</ul>
<p>
If you have any questions or feedback, feel free to reach out to us. Enjoy your note-taking experience!
</p>
<p>Join our community and unlock the full potential of WP Notes.</p>
</div>
</div>
</div>
<!-- What's New Section -->
<h1>What's New in WP Notes v <?php echo esc_html(WP_NOTES_VERSION); ?></h1>
<div class="wp-notes-versions" style="background: #fff; padding: 20px; margin: 20px 0; border: 1px solid #ccc;">
<button onclick="toggleSection('version-section')" style="background: #0073aa; color: #fff; border: none; padding: 8px 12px; cursor: pointer;">
Toggle What's New Section
</button>
<br>
<!-- Section to Toggle -->
<div id="version-section" style="display: none;">
<h3>Version 3.0.0 (Current)</h3>
<ul>
<li>Major Update: Removed activity tracking functionality for improved focus and privacy</li>
<li>Added Error Logging: Introduced a comprehensive error logging system to capture plugin-related errors</li>
<li>Added Welcome Section and Version history</li>
<li>Added Image to main menu</li>
<li>Fixed: Edit Function is now working correctly</li>
<li>Added: Popup notification with "Saved" status</li>
<li>Improved: Error handling and stability</li>
<li>Added: Documentation for enhanced error reporting</li>
<li>Feature: Ability to restore older notes</li>
<li>Added: "Created by," "Modified by," and "Edited by" fields</li>
<li>Improved: Task-tracking interface in dashboard</li>
<li>Added: Color, font, and size customization for notes</li>
<li>Enhanced: Edit and mark-as-done functions</li>
<li>Improved: AJAX-based updates for smoother editing</li>
<li>Added: Quick access to Create Note in Tools menu</li>
<li>Added: Create Note option in WP-Notes menu</li>
</ul>
</div>
</div>
</div>
</div>
<!-- JavaScript to toggle visibility of sections -->
<script>
function toggleSection(sectionId) {
var section = document.getElementById(sectionId);
if (section.style.display === "none") {
section.style.display = "block";
} else {
section.style.display = "none";
}
}
</script>
<!-- Note Creation Form with WordPress Admin Styling -->
<div class="postbox">
<div class="postbox-header">
@@ -1113,6 +917,15 @@ function wp_notes_page_callback() {
<div class="wp-notes-completed" id="completed-notes">
<?php wp_notes_display_notes('completed'); ?>
</div>
<!-- Footer: support link (lives at the BOTTOM, not the top) -->
<p class="wp-notes-footer-support">
<a href="https://www.buymeacoffee.com/davidkeanek" target="_blank" rel="noopener"
class="button button-secondary"
aria-label="Support the developer by buying them a coffee">
☕ Buy me a coffee
</a>
</p>
</div>
<?php
}
@@ -1131,12 +944,11 @@ function wp_notes_list_table() {
return;
}
/* Dashboard widget table. No checkbox column — bulk actions are not
wired up; re-add when there is something to act on. */
echo '<table class="wp-list-table widefat striped">
<thead>
<tr>
<th scope="col" class="manage-column column-cb check-column">
<input type="checkbox" id="select-all-notes">
</th>
<th scope="col" class="manage-column">Note</th>
<th scope="col" class="manage-column">Created By</th>
<th scope="col" class="manage-column">Created On</th>
@@ -1154,8 +966,7 @@ function wp_notes_list_table() {
$author = esc_html($note['author_name'] ?? 'Unknown');
echo "<tr>
<td><input type='checkbox' name='note_ids[]' value='$key' class='note-checkbox'></td>
<td style='color: $color; font-size: ${size}px; font-family: $font;'>$text</td>
<td style='color: $color; font-size: {$size}px; font-family: $font;'>$text</td>
<td>$author</td>
<td>$timestamp</td>
<td>