add search result count to nap room

Author: rohanb10

docs/changelog.md

@@ -10,6 +10,10 @@ PRs and other ideas are welcome.
 ## Changes ##
 
 **May 2021**
+#### 2.4.1 
+- show number of search results in the nap room
+- misc ui related fixes
+
 #### 2.4.0
 - Edit Snoozz times for sleeping tabs 🎉
 - Snooze Again for awoken tabs

external_assets/listing-1.jpg

@@ -28,7 +28,6 @@
 	</div>
 	<div id="time-container"></div>
 	<div id="no-tabs" class="hidden">
-		<span>No tabs found :(</span>
 		<div class="contain-clock">
 			<div class="face-1">
 				<div class="hour"></div>
@@ -52,6 +51,7 @@
 			<div class="bell"></div>
 			<div class="bell bell-2"></div>
 		</div>
+		<span>No tabs found :(</span>
 	</div>
 	<p id="api-message" class="hidden">Like most people, tabs may take 10 minutes to get out of bed. Mainly due to API restrictions, but also, laziness.</p>
 	<p id="history-message">Tabs in your Snoozz history are removed <a id="historyHref" href="./settings.html#history">-</a> after they wake up.</p>

external_assets/listing-1.png

@@ -108,8 +108,8 @@ <h4>Snoozz tabs using the right-click (context) menu</h4>
 			</div>
 			<div tabindex="0" class="btn"><div></div></div>
 			<div id="contextMenu" class="choice-list">
-				<div><input type="checkbox" id="startup"><label for="today-morning">On Browser Launch</label></div>
-				<div><input type="checkbox" id="in-an-hour"><label for="today-morning">In One Hour</label></div>
+				<div><input type="checkbox" id="startup"><label for="startup">On Browser Launch</label></div>
+				<div><input type="checkbox" id="in-an-hour"><label for="in-an-hour">In One Hour</label></div>
 				<div><input type="checkbox" id="today-morning"><label for="today-morning">This Morning</label></div>
 				<div><input type="checkbox" id="today-evening"><label for="today-evening">This Evening</label></div>
 				<div><input type="checkbox" id="tom-morning"><label for="tom-morning">Tomorrow Morning</label></div>

external_assets/listing-2.png

@@ -61,10 +61,5 @@
 		"month": {
 			"description": "Snooze till one month from now"
 		}
-	},
-	"browser_specific_settings": {
-		"gecko": {
-			"id": "snooze@snooze.me"
-		}
 	}
 }

external_assets/listing-3-edge.png

@@ -95,7 +95,7 @@ async function createNotification(id, title, imgUrl, message) {
 	await chrome.notifications.create(id, {type: 'basic', iconUrl: chrome.extension.getURL(imgUrl), title, message});
 }
 async function createWindow(tabId) {
-	return new Promise(r => chrome.windows.create({url: `/html/rise_and_shine.html#${tabId}`}, r));
+	return new Promise(r => chrome.windows.create({url: `/html/rise-and-shine.html#${tabId}`}, r));
 }
 
 /*	CONFIGURE	*/
@@ -151,14 +151,14 @@ async function openTab(tab, windowId, automatic = false) {
 async function openWindow(t, automatic = false) {
 	var targetWindowID, currentWindow = await getTabsInWindow();
 	if (currentWindow.length && currentWindow.filter(isDefault).length === currentWindow.length) {
-		await openExtensionTab(`/html/rise_and_shine.html#${t.id}`);
+		await openExtensionTab(`/html/rise-and-shine.html#${t.id}`);
 		targetWindowID = currentWindow[0].windowId;
 	} else {
 		var window = await createWindow(t.id);
 		targetWindowID = window.id;
 	}
 
-	// send message to map browser tabs to tab-list in rise_and_shine.html
+	// send message to map browser tabs to tab-list in rise-and-shine.html
 	var loadingCount = 0;
 	chrome.tabs.onUpdated.addListener(async function cleanTabsAfterLoad(id, state, title) {
 		if (loadingCount > t.tabs.length) {

external_assets/listing-3-ff.png

@@ -180,6 +180,7 @@ function search(t, query) {
 	// categories
 	if (matchQuery(query, getTimeGroup(t, 'wakeUpTime', true).map(tg => tg.replace(/_/g, ' ')))) return true;
 	if (matchQuery(query, getTimeGroup(t, 'timeCreated', true).map(tg => tg.replace(/_/g, ' ')))) return true;
+	if (matchQuery(query, getTimeGroup(t, 'modifiedTime', true).map(tg => tg.replace(/_/g, ' ')))) return true;
 	// absolute time
 	if ( t.opened && matchQuery(query, dayjs(t.opened).format('dddd DD MMMM A'))) return true;
 	if (!t.opened && t.wakeUpTime && matchQuery(query, dayjs(t.wakeUpTime).format('dddd DD MMMM A'))) return true;
@@ -191,6 +192,13 @@ function performSearch(searchQuery = '') {
 	var tabs = document.querySelectorAll('.tab');
 	if (tabs) tabs.forEach(t => t.classList.toggle('hidden', !search((CACHED_TABS).find(ct => ct.id == t.id), searchQuery)));
 	updateTimeGroups();
+	countSearchItems();
+}
+
+function countSearchItems() {
+	var all = document.querySelectorAll('.time-group .tab').length;
+	var visible = document.querySelectorAll('.time-group .tab:not(.hidden)').length;
+	document.querySelector('.search-container').setAttribute('data-search', `Showing ${visible} out of ${all} items`);
 }
 
 function buildTabActions(t, tabDiv) {

external_assets/listing-3.png

@@ -37,7 +37,7 @@ async function initialize() {
 	document.querySelector('code').addEventListener('click', _ => {
 		clipboard('about:addons')
 		document.querySelector('body > .copied').classList.add('toast');
-		setTimeout(_ => document.querySelector('body > .copied').remove('toast'), 4000)
+		setTimeout(_ => document.querySelector('body > .copied').classList.remove('toast'), 4000)
 	});
 
 	if (getBrowser() === 'safari') await chrome.runtime.getBackgroundPage(async bg => {await bg.wakeUpTask()});

external_assets/listing-4.png

@@ -15,6 +15,10 @@ body {
 	touch-action: none;
 	transition: opacity .3s ease-in-out;
 }
+#no-tabs span {
+	display: inline-block;
+	margin-top: 5em;
+}
 #no-tabs.hidden, .search-container.hidden, .instructions.hidden {
 	opacity: 0;
 	pointer-events: none;
@@ -369,15 +373,17 @@ body:not(.dark) p {
 	background-size: 202%;
 	background-position: right;
 }
-.search-container:not(.valid-search):focus-within:before {
+.search-container.valid-search:after, .search-container:not(.valid-search):focus-within:before {
 	content: '3 characters minimum';
 	position: absolute;
 	left: 0;
-	top: 120%;
+	top: 150%;
 	width: 100%;
 	text-align: center;
-	font-size: .9em;
-	color: #BBB;
+	color: var(--color);
+}
+.search-container.valid-search:after {
+	content: attr(data-search);
 }
 .input-wrapper:after {
 	content: '';

external_assets/logo-hd.png

@@ -9,7 +9,7 @@ img {
 }
 
 a {
-	color: #000;
+	color: var(--color);
 }
 
 h3 {

external_assets/safari-logo.png

@@ -203,7 +203,7 @@ kbd {
 code {
 	cursor: pointer;
 	font-size: 1.2em;
-	background-color: #ddd;
+	background-color: #999;
 	border-radius: .25em;
 	padding: .1em .2em;
 	user-select: none;