diff --git a/Twitch Notes/twitch-notes.css b/Twitch Notes/twitch-notes.css
index 7d55def..d21d286 100644
--- a/Twitch Notes/twitch-notes.css
+++ b/Twitch Notes/twitch-notes.css
@@ -285,3 +285,13 @@
max-width: 90vw;
overflow: auto;
}
+
+.twitch-notes-user-list-user {
+ padding: 1rem;
+ border-bottom: var(--border-width-default) solid var(--color-border-base) !important;
+ cursor: pointer;
+}
+
+.twitch-notes-user-list-user[data-active] {
+ background: #772ce833;
+}
diff --git a/Twitch Notes/twitch-notes.js b/Twitch Notes/twitch-notes.js
index 996e887..38563b7 100644
--- a/Twitch Notes/twitch-notes.js
+++ b/Twitch Notes/twitch-notes.js
@@ -51,6 +51,104 @@
settings: {},
}));
},
+ showAllNotes: () => {
+ let activeNote = null;
+ const blurredBackground = createElement('div', null, 'twitch-notes-blurred-background');
+ const container = createElement('div', null, 'twitch-notes-center-floating-container', {
+ padding: '0',
+ paddingTop: '1rem',
+ width: '100%',
+ height: 'calc(320px + 5rem)'
+ });
+ const closeButton = createElement('button', xButton, 'twitch-notes-settings-close-button', {
+ position: 'absolute',
+ top: '1rem',
+ right: '1rem',
+ });
+
+ const title = createElement('div', 'Notes:', 'twitch-note-title', {
+ borderBottom: '1px solid #FFFFFF19',
+ paddingBottom: '1rem',
+ });
+ container.appendChild(title);
+
+ const content = createElement('div', null, null, {
+ display: 'flex',
+ flexDirection: 'row',
+ flexWrap: 'no-wrap',
+ width: '100%',
+ height: '320px'
+ });
+ container.appendChild(content);
+ closeButton.addEventListener('click', () => {
+ blurredBackground.remove();
+ });
+ container.appendChild(closeButton);
+
+ const userList = createElement('div', null, null, {
+ borderRight: '1px solid #FFFFFF19',
+ height: '320px',
+ minWidth: '240px',
+ overflowY: 'auto',
+ overflowX: 'hidden',
+ });
+
+ const noteContainer = createElement('div', null, null, {
+ height: '320px',
+ padding: '1rem',
+ width: '100%',
+ opacity: '0',
+ });
+
+ const note = createElement('div', null, null, {
+ marginBottom: '3rem',
+ border: '1px solid #FFFFFF19',
+ height: 'calc(320px - 7rem)',
+ width: '100%',
+ padding: '6px',
+ outline: 'none',
+ overflowY: 'auto',
+ overflowX: 'hidden',
+ }, {
+ contentEditable: 'true',
+ });
+ const saveNote = createElement('button', 'Save Note', 'twitch-notes-settings-button', {
+ position: 'absolute',
+ bottom: '1rem',
+ left: '1rem'
+ });
+
+ saveNote.addEventListener('click', () => {
+ if(!activeNote) {
+ return;
+ }
+ Notes.saveNote(activeNote, note.innerHTML);
+ })
+
+ for(let user of Notes.getSavedUserList()) {
+ const userLine = createElement('div', user, 'twitch-notes-user-list-user');
+ userLine.addEventListener('click', () => {
+ const list = document.getElementsByClassName('twitch-notes-user-list-user');
+ for(let i = 0; i < list.length; i++) {
+ list.item(i).removeAttribute('data-active');
+ }
+ userLine.setAttribute('data-active', 'true');
+ noteContainer.style.opacity = '1';
+ note.innerHTML = Notes.getNote(user);
+ activeNote = user;
+ });
+ userList.appendChild(userLine);
+ }
+
+ noteContainer.appendChild(note);
+ noteContainer.appendChild(saveNote);
+
+ content.appendChild(userList);
+ content.appendChild(noteContainer);
+
+ blurredBackground.appendChild(container);
+ document.body.appendChild(blurredBackground);
+ },
importNotesConflictResolve: (user, resultsContainer, container, blurredBackground) => {
const diffBlurredBackground = createElement('div', null, 'twitch-notes-blurred-background');
const diffContainer = createElement('div', 'Select which note to keep for ' + user + '
You can modify notes to merge them and keep updated one
', 'twitch-notes-center-floating-container');
@@ -65,7 +163,8 @@
const valueStyle = {
minWidth: '320px',
padding: '6px',
- border: '1px solid #FFFFFF19'
+ border: '1px solid #FFFFFF19',
+ outline: 'none',
};
const valueAttr = {contentEditable: 'true'};
@@ -273,7 +372,7 @@
document.body.appendChild(blurredBackground);
},
openAllNotes: () => {
- console.log('TODO: Implement Open All Notes functionality');
+ Notes.showAllNotes();
}
}
@@ -507,10 +606,10 @@
const openAllNotes = createChatSettingsLine('View All Notes');
settingsContent.appendChild(openAllNotes);
- exportNotes.addEventListener('click', Notes.exportNotes);
- importNotes.addEventListener('click', Notes.importNotes);
- clearData.addEventListener('click', Notes.clearAllData);
- openAllNotes.addEventListener('click', Notes.openAllNotes);
+ exportNotes.addEventListener('click', () => {Notes.exportNotes(); toggleSettings()});
+ importNotes.addEventListener('click', () => {Notes.importNotes(); toggleSettings()});
+ clearData.addEventListener('click', () => {Notes.clearAllData(); toggleSettings()});
+ openAllNotes.addEventListener('click', () => {Notes.openAllNotes(); toggleSettings()});
settingsPopover.appendChild(settingsScrollableArea);
@@ -532,7 +631,6 @@
settingsWindow.style.display = 'block';
settingsWindowOpen = true;
}
- console.log('toggle settings');
}
const xButton = ``;