From bdbaa4e67c2d6f85a49383c7b1157d69aa2b4cd6 Mon Sep 17 00:00:00 2001
From: SamTV12345 <40429738+samtv12345@users.noreply.github.com>
Date: Wed, 30 Jul 2025 22:50:14 +0200
Subject: [PATCH] feat: continued with pad link functionality
---
src/static/js/scroll.ts | 1 -
src/static/skins/colibris/index.css | 36 +++++++++++++--
src/static/skins/colibris/index.js | 70 +++++++++++++++++++++++++++--
src/static/skins/colibris/pad.js | 15 ++++++-
src/templates/pad.html | 2 +-
5 files changed, 113 insertions(+), 11 deletions(-)
diff --git a/src/static/js/scroll.ts b/src/static/js/scroll.ts
index 74c246243..d4fe5a5d3 100644
--- a/src/static/js/scroll.ts
+++ b/src/static/js/scroll.ts
@@ -16,7 +16,6 @@ class Scroll {
this.outerWin = outerWin;
this.doc = this.outerWin.contentDocument!;
this.rootDocument = document;
- console.log(this.rootDocument)
}
scrollWhenCaretIsInTheLastLineOfViewportWhenNecessary(rep: RepModel, isScrollableEvent: boolean, innerHeight: number) {
diff --git a/src/static/skins/colibris/index.css b/src/static/skins/colibris/index.css
index 89807e0df..f7690ffa9 100644
--- a/src/static/skins/colibris/index.css
+++ b/src/static/skins/colibris/index.css
@@ -167,16 +167,44 @@ body nav {
max-width: 56rem;
}
+.break-column {
+ flex-basis: 100%;
+ width: 0;
+}
+
ul {
list-style-type: none;
}
+.recent-pad {
+ padding: 0.75rem 1.5rem;
+ display: flex;
+ position: relative;
+ flex-direction: column;
+}
+
+.recent-pad:hover a {
+ color: var(--ep-color);
+}
+
+.recent-pad-arrow {
+ position: absolute;
+ right: 1rem;
+}
+
+.recent-pad a {
+ font-size: 0.875rem;
+ line-height: 1.25rem;
+ font-weight: 800;
+}
+
+a, a:visited, a:hover, a:active {
+ color: inherit;
+}
+
.pad-datalist h2 {
border-bottom: 1px solid var(--muted-border);
- padding-left: 1.5rem;
- padding-right: 1.5rem;
- padding-top: 1rem;
- padding-bottom: 1rem;
+ padding: 1rem 1.5rem;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #e5e7eb;
diff --git a/src/static/skins/colibris/index.js b/src/static/skins/colibris/index.js
index 628512806..9bc40fc90 100644
--- a/src/static/skins/colibris/index.js
+++ b/src/static/skins/colibris/index.js
@@ -19,7 +19,7 @@ window.customStart = () => {
parentStyle.display = 'flex';
parentStyle.justifyContent = 'center';
parentStyle.alignItems = 'center';
- parentStyle.height = '100%';
+ parentStyle.maxHeight = '100%';
recentPadList.remove();
} else {
/**
@@ -30,15 +30,79 @@ window.customStart = () => {
/**
* @param {Pad} pad
*/
+
+ const arrowIcon = '';
+ const clockIcon = '';
+ const personalIcon = '';
recentPadListData.forEach((pad) => {
const li = document.createElement('li');
+
+
+ li.style.cursor = 'pointer';
+
li.className = 'recent-pad';
const padPath = `${window.location.href}p/${pad.name}`;
const link = document.createElement('a');
+ link.style.textDecoration = 'none';
+
link.href = padPath;
- link.innerText = pad;
+ link.innerText = pad.name;
li.appendChild(link);
- //https://v0.dev/chat/etherpad-design-clone-qZnwOrVRXxH
+
+
+ const arrowIconElement = document.createElement('span');
+ arrowIconElement.className = 'recent-pad-arrow';
+ arrowIconElement.innerHTML = arrowIcon;
+ li.appendChild(arrowIconElement);
+
+ const nextRow = document.createElement('div');
+
+ nextRow.style.display = 'flex';
+ nextRow.style.gap = '10px';
+ nextRow.style.marginTop = '10px';
+
+ const clockIconElement = document.createElement('span');
+ clockIconElement.className = 'recent-pad-clock';
+ clockIconElement.innerHTML = clockIcon;
+
+ nextRow.appendChild(clockIconElement);
+
+ const time = new Date(pad.timestamp);
+ const userLocale = navigator.language || 'en-US';
+
+ const formattedTime = time.toLocaleDateString(userLocale, {
+ year: 'numeric',
+ month: '2-digit',
+ day: '2-digit',
+ hour: '2-digit',
+ minute: '2-digit',
+ });
+ const timeElement = document.createElement('span');
+ timeElement.className = 'recent-pad-time';
+ timeElement.innerText = formattedTime;
+
+ nextRow.appendChild(timeElement);
+
+ const personalIconElement = document.createElement('span');
+ personalIconElement.className = 'recent-pad-personal';
+ personalIconElement.innerHTML = personalIcon;
+
+ personalIconElement.style.marginLeft = '5px';
+
+ const members = document.createElement('span');
+ members.className = 'recent-pad-members';
+ members.innerText = pad.members;
+
+
+ nextRow.appendChild(personalIconElement);
+ nextRow.appendChild(members);
+ li.appendChild(nextRow);
+
+ li.addEventListener('click', () => {
+ window.location.href = padPath;
+ });
+
+ // https://v0.dev/chat/etherpad-design-clone-qZnwOrVRXxH
recentPadList.appendChild(li);
});
}
diff --git a/src/static/skins/colibris/pad.js b/src/static/skins/colibris/pad.js
index cf4c7e777..95c3cb626 100644
--- a/src/static/skins/colibris/pad.js
+++ b/src/static/skins/colibris/pad.js
@@ -12,11 +12,22 @@ window.customStart = () => {
localStorage.setItem('recentPads', JSON.stringify([]));
}
const recentPadsList = JSON.parse(localStorage.getItem('recentPads'));
- if (!recentPadsList.includes(padName)) {
+ if (!recentPadsList.some((pad) => pad.name === padName)) {
if (recentPadsList.length >= 10) {
recentPadsList.shift(); // Remove the oldest pad if we have more than 10
}
- recentPadsList.push(padName);
+ recentPadsList.push({
+ name: padName,
+ timestamp: new Date().toISOString(), // Store the timestamp for sorting
+ members: 0,
+ });
+ localStorage.setItem('recentPads', JSON.stringify(recentPadsList));
+ } else {
+ // Update the timestamp if the pad already exists
+ const existingPad = recentPadsList.find((pad) => pad.name === padName);
+ if (existingPad) {
+ existingPad.timestamp = new Date().toISOString();
+ }
localStorage.setItem('recentPads', JSON.stringify(recentPadsList));
}
};
diff --git a/src/templates/pad.html b/src/templates/pad.html
index 6dd9a0ef8..abc9b7a7d 100644
--- a/src/templates/pad.html
+++ b/src/templates/pad.html
@@ -164,7 +164,7 @@
<% e.end_block(); %>
-
+
About
Powered by
Etherpad