mirror of
https://github.com/notion-enhancer/notion-enhancer.git
synced 2025-04-05 13:19:03 +00:00
Extension: Notion Icons (#250)
* Upload mod.js, styles.css, and icons.json * Move icon.json to notion-enhancer/icons * Update mod.js to work with the new icons repo
This commit is contained in:
Ryo Hilmawan
GitHub
parent
1568d31b0c
commit
afd7879ec6
364
mods/notion-icons/mod.js
Normal file
364
mods/notion-icons/mod.js
Normal file
@ -0,0 +1,364 @@
|
|||||||
|
/*
|
||||||
|
* notion-icons
|
||||||
|
* (c) 2019 jayhxmo (https://jaymo.io/)
|
||||||
|
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||||
|
* (c) 2020 CloudHill
|
||||||
|
* under the MIT license
|
||||||
|
*/
|
||||||
|
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const { createElement } = require('../../pkg/helpers.js'),
|
||||||
|
fs = require('fs-extra');
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
id: '2d1f4809-9581-40dd-9bf3-4239db406483',
|
||||||
|
tags: ['extension'],
|
||||||
|
name: 'notion icons',
|
||||||
|
desc:
|
||||||
|
'Use custom icon sets directly in Notion.',
|
||||||
|
version: '1.0.0',
|
||||||
|
author: 'jayhxmo',
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
key: 'hide',
|
||||||
|
label: 'hide icon sets by default.',
|
||||||
|
type: 'toggle',
|
||||||
|
value: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'json',
|
||||||
|
label: 'insert custom json',
|
||||||
|
type: 'file',
|
||||||
|
extensions: ['json'],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
hacks: {
|
||||||
|
'renderer/preload.js'(store, __exports) {
|
||||||
|
let garbageCollector = [];
|
||||||
|
const iconsUrl = 'https://raw.githubusercontent.com/notion-enhancer/icons/main/';
|
||||||
|
|
||||||
|
function getAsync(urlString, callback) {
|
||||||
|
let httpReq = new XMLHttpRequest();
|
||||||
|
httpReq.onreadystatechange = function() {
|
||||||
|
if (httpReq.readyState == 4 && httpReq.status == 200) callback(httpReq.responseText);
|
||||||
|
};
|
||||||
|
httpReq.open('GET', urlString, true);
|
||||||
|
httpReq.send(null);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Retrieve Icons data
|
||||||
|
let notionIconsData;
|
||||||
|
getAsync(iconsUrl + 'icons.json', iconsData => {
|
||||||
|
notionIconsData = JSON.parse(iconsData);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Retrieve custom Icons data
|
||||||
|
let customIconsData;
|
||||||
|
if (store().json) {
|
||||||
|
customIconsData = JSON.parse(
|
||||||
|
fs.readFileSync(store().json)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function getTab(n, button = false) {
|
||||||
|
return document.querySelector(
|
||||||
|
`.notion-media-menu > :first-child > :first-child > :nth-child(${n}) ${button ? 'div' : ''}`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function isCurrentTab(n) {
|
||||||
|
return getTab(n).childNodes.length > 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Submits the icon's url as an image link
|
||||||
|
function setPageIcon(iconUrl) {
|
||||||
|
const input = document.querySelector('input[type=url]');
|
||||||
|
|
||||||
|
const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
|
||||||
|
window.HTMLInputElement.prototype, 'value'
|
||||||
|
).set;
|
||||||
|
nativeInputValueSetter.call(input, iconUrl);
|
||||||
|
|
||||||
|
input.dispatchEvent(
|
||||||
|
new Event('input', { bubbles: true })
|
||||||
|
);
|
||||||
|
|
||||||
|
input.dispatchEvent(
|
||||||
|
new KeyboardEvent('keydown', { bubbles: true, cancelable: true, keyCode: 13 })
|
||||||
|
);
|
||||||
|
|
||||||
|
removeIcons();
|
||||||
|
}
|
||||||
|
|
||||||
|
function addIconsTab() {
|
||||||
|
// Disconnect observer if the modal is open.
|
||||||
|
if (document.querySelector('.notion-overlay-container'))
|
||||||
|
overlayContainerObserver.disconnect();
|
||||||
|
|
||||||
|
// Prevent Icons tab duplication
|
||||||
|
if (getTab(5)) {
|
||||||
|
removeIcons();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Change 'Upload an image' to 'Upload'
|
||||||
|
getTab(2, true).innerText = 'Upload';
|
||||||
|
|
||||||
|
// Initialize Icons tab
|
||||||
|
const iconsTab = getTab(3).cloneNode(true);
|
||||||
|
iconsTab.className = 'notion-icons--tab'
|
||||||
|
iconsTab.firstChild.innerText = 'Icons';
|
||||||
|
iconsTab.firstChild.addEventListener('click', renderIconsOverlay);
|
||||||
|
|
||||||
|
// Insert Icons tab
|
||||||
|
const tabStrip = getTab(1).parentElement;
|
||||||
|
tabStrip.insertBefore(iconsTab, tabStrip.lastChild);
|
||||||
|
|
||||||
|
// Remove the Icons overlay when clicking...
|
||||||
|
const closeTriggers = [
|
||||||
|
// The fog layer
|
||||||
|
document.querySelector('.notion-overlay-container [style*="width: 100vw; height: 100vh;"]'),
|
||||||
|
// The first three buttons
|
||||||
|
...Array.from( Array(3), (e, i) => getTab(i + 1, true) ),
|
||||||
|
// The remove button
|
||||||
|
getTab(5).lastChild,
|
||||||
|
];
|
||||||
|
|
||||||
|
closeTriggers.forEach(trigger => {
|
||||||
|
trigger.addEventListener('click', removeIcons);
|
||||||
|
garbageCollector.push(trigger);
|
||||||
|
})
|
||||||
|
|
||||||
|
// Remove the Icons overlay when pressing the Escape key
|
||||||
|
document.querySelector('.notion-media-menu')
|
||||||
|
.addEventListener('keydown', e => {
|
||||||
|
if (e.keyCode === 27) removeIcons();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderIconSet(iconData) {
|
||||||
|
const iconSet = createElement(
|
||||||
|
'<div class="notion-icons--icon-set"></div>'
|
||||||
|
)
|
||||||
|
|
||||||
|
try {
|
||||||
|
|
||||||
|
const authorText = iconData.author
|
||||||
|
? iconData.authorUrl
|
||||||
|
? ` by <a target="_blank" href="${iconData.authorUrl}" style="opacity: 0.6;">${iconData.author}</a>`
|
||||||
|
: ` by <span style="opacity: 0.6;">${iconData.author}</span>`
|
||||||
|
: '';
|
||||||
|
|
||||||
|
const iconSetToggle = createElement(
|
||||||
|
`<div class="notion-icons--toggle">
|
||||||
|
<svg viewBox="0 0 100 100" class="triangle"><polygon points="5.9,88.2 50,11.8 94.1,88.2"></polygon></svg>
|
||||||
|
<div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${iconData.name}${authorText}</div>
|
||||||
|
<div class="notion-icons--spinner" style="margin-left: auto; margin-right: 8px; width: 1.2em; height: 1.2em;">
|
||||||
|
<img src="/images/loading-spinner.4dc19970.svg" />
|
||||||
|
</div>
|
||||||
|
</div>`
|
||||||
|
);
|
||||||
|
|
||||||
|
const iconSetBody = createElement(
|
||||||
|
'<div class="notion-icons--body"></div>'
|
||||||
|
);
|
||||||
|
|
||||||
|
iconSet.append(iconSetToggle);
|
||||||
|
iconSet.append(iconSetBody);
|
||||||
|
|
||||||
|
const promiseArray = [];
|
||||||
|
// Render Icons
|
||||||
|
for (let i = 0; i < (iconData.count || iconData.source.length); i++) {
|
||||||
|
|
||||||
|
const iconUrl = iconData.sourceUrl
|
||||||
|
? Array.isArray(iconData.source)
|
||||||
|
? `${iconData.sourceUrl}/${iconData.source[i]}.${iconData.extension}`
|
||||||
|
: `${iconData.sourceUrl}/${iconData.source}_${i}.${iconData.extension}`
|
||||||
|
: iconData.source[i];
|
||||||
|
|
||||||
|
const icon = createElement(`<div class="notion-icons--icon"><img src="${iconUrl}" /></div>`);
|
||||||
|
|
||||||
|
iconSetBody.append(icon);
|
||||||
|
garbageCollector.push(icon);
|
||||||
|
icon.addEventListener('click', () => setPageIcon(iconUrl));
|
||||||
|
console.log(iconUrl)
|
||||||
|
|
||||||
|
// Make sure elements load
|
||||||
|
promiseArray.push(
|
||||||
|
new Promise((resolve, reject) => {
|
||||||
|
icon.firstChild.onload = resolve;
|
||||||
|
icon.firstChild.onerror = () => {
|
||||||
|
reject();
|
||||||
|
icon.classList.add('error');
|
||||||
|
icon.innerHTML = '!';
|
||||||
|
};
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hide spinner after all icons finish loading
|
||||||
|
(async () => {
|
||||||
|
const spinner = iconSetToggle.querySelector('.notion-icons--spinner'),
|
||||||
|
loadPromise = Promise.all(promiseArray);
|
||||||
|
loadPromise.then(
|
||||||
|
() => spinner.remove(),
|
||||||
|
() => {
|
||||||
|
iconSet.classList.add('alert')
|
||||||
|
spinner.remove();
|
||||||
|
}
|
||||||
|
)
|
||||||
|
})();
|
||||||
|
|
||||||
|
// Set up Toggle
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
iconSetBody.style.height = iconSetBody.style.maxHeight = `${iconSetBody.offsetHeight}px`;
|
||||||
|
if (store().hide) iconSetToggle.click();
|
||||||
|
});
|
||||||
|
|
||||||
|
iconSetToggle.addEventListener('click', e => {
|
||||||
|
if (e.target.nodeName === 'A') return;
|
||||||
|
iconSet.classList.toggle('hidden-set')
|
||||||
|
iconSetBody.style.height = iconSet.classList.contains('hidden-set')
|
||||||
|
? 0
|
||||||
|
: iconSetBody.style.maxHeight;
|
||||||
|
});
|
||||||
|
|
||||||
|
} catch (err) {
|
||||||
|
iconSet.classList.add('error');
|
||||||
|
iconSet.innerHTML = `Invalid Icon Set: ${iconData.name}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
return iconSet;
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderIconsOverlay() {
|
||||||
|
if (!isCurrentTab(4)) {
|
||||||
|
// Switch to 3rd tab so that the link can be inputed in the underlay
|
||||||
|
if (!isCurrentTab(3)) getTab(3, true).click();
|
||||||
|
|
||||||
|
// Set active bar on Icons Tab
|
||||||
|
const iconsTab = getTab(4);
|
||||||
|
const activeBar = createElement(
|
||||||
|
`<div id="notion-icons--active-bar"></div>`
|
||||||
|
)
|
||||||
|
activeBar.style = 'border-bottom: 2px solid var(--theme--text); position: absolute; bottom: -1px; left: 8px; right: 8px;';
|
||||||
|
iconsTab.append(activeBar);
|
||||||
|
getTab(4).style.position = 'relative';
|
||||||
|
getTab(3).className = 'hide-active-bar';
|
||||||
|
|
||||||
|
// Convert Icons data into renderable
|
||||||
|
const iconSets = [];
|
||||||
|
|
||||||
|
if (customIconsData && customIconsData.icons) {
|
||||||
|
customIconsData.icons.forEach(i => {
|
||||||
|
iconSets.push( renderIconSet(i) );
|
||||||
|
});
|
||||||
|
|
||||||
|
// Divider
|
||||||
|
iconSets.push(
|
||||||
|
createElement(
|
||||||
|
'<div style="height: 1px; margin-bottom: 9px; border-bottom: 1px solid var(--theme--table-border);"></div>'
|
||||||
|
)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (notionIconsData && notionIconsData.icons) {
|
||||||
|
notionIconsData.icons.forEach(i => {
|
||||||
|
i.sourceUrl = i.sourceUrl || (iconsUrl + i.source);
|
||||||
|
iconSets.push( renderIconSet(i) );
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create Icons overlay
|
||||||
|
const notionIcons = createElement(
|
||||||
|
'<div id="notion-icons"></div>'
|
||||||
|
);
|
||||||
|
iconSets.forEach( set => notionIcons.append(set) );
|
||||||
|
|
||||||
|
// Insert Icons overlay
|
||||||
|
document.querySelector('.notion-media-menu > .notion-scroller')
|
||||||
|
.append(notionIcons);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function removeIcons() {
|
||||||
|
const notionIcons = document.getElementById('notion-icons'),
|
||||||
|
activeBar = document.getElementById('notion-icons--active-bar');
|
||||||
|
|
||||||
|
if (notionIcons)
|
||||||
|
notionIcons.remove();
|
||||||
|
|
||||||
|
if (activeBar) {
|
||||||
|
activeBar.remove();
|
||||||
|
getTab(4).style.position = '';
|
||||||
|
}
|
||||||
|
getTab(3).className = '';
|
||||||
|
|
||||||
|
if (garbageCollector.length) {
|
||||||
|
for (let i = 0; i < garbageCollector.length; i++) {
|
||||||
|
garbageCollector[i] = null;
|
||||||
|
}
|
||||||
|
garbageCollector = [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Wait for DOM change before adding the Icons tab
|
||||||
|
// (React does not render immediately on click)
|
||||||
|
const overlayContainerObserver = new MutationObserver(list => {
|
||||||
|
if (list) addIconsTab()
|
||||||
|
});
|
||||||
|
|
||||||
|
function initializeIcons() {
|
||||||
|
overlayContainerObserver.observe(
|
||||||
|
document.querySelector('.notion-overlay-container'),
|
||||||
|
{ attributes: true, childList: true, characterData: true }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize icons tab when clicking on notion page icons
|
||||||
|
function initializeIconTriggerListener() {
|
||||||
|
const iconTriggers = document.querySelectorAll('.notion-record-icon[aria-disabled="false"]');
|
||||||
|
|
||||||
|
iconTriggers.forEach(trigger => {
|
||||||
|
trigger.removeEventListener('click', initializeIcons);
|
||||||
|
trigger.addEventListener('click', initializeIcons);
|
||||||
|
|
||||||
|
garbageCollector.push(trigger);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('readystatechange', () => {
|
||||||
|
if (document.readyState !== 'complete') return false;
|
||||||
|
let queue = [];
|
||||||
|
const observer = new MutationObserver((list, observer) => {
|
||||||
|
if (!queue.length) requestAnimationFrame(() => process(queue));
|
||||||
|
queue.push(...list);
|
||||||
|
});
|
||||||
|
observer.observe(document.body, {
|
||||||
|
childList: true,
|
||||||
|
subtree: true,
|
||||||
|
});
|
||||||
|
function process(list) {
|
||||||
|
queue = [];
|
||||||
|
for (let { addedNodes } of list) {
|
||||||
|
if (
|
||||||
|
addedNodes[0] && (
|
||||||
|
(
|
||||||
|
addedNodes[0].classList && (
|
||||||
|
addedNodes[0].className === 'notion-page-content' ||
|
||||||
|
addedNodes[0].classList.contains('notion-record-icon') ||
|
||||||
|
addedNodes[0].classList.contains('notion-page-block') ||
|
||||||
|
addedNodes[0].classList.contains('notion-callout-block')
|
||||||
|
)
|
||||||
|
) || addedNodes[0].nodeName === 'A'
|
||||||
|
)
|
||||||
|
) {
|
||||||
|
initializeIconTriggerListener();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
170
mods/notion-icons/styles.css
Normal file
170
mods/notion-icons/styles.css
Normal file
@ -0,0 +1,170 @@
|
|||||||
|
/*
|
||||||
|
* notion-icons
|
||||||
|
* (c) 2019 jayhxmo (https://jaymo.io/)
|
||||||
|
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||||
|
* (c) 2020 CloudHill
|
||||||
|
* under the MIT license
|
||||||
|
*/
|
||||||
|
|
||||||
|
.hide-active-bar > :nth-child(2) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notion-icons--tab,
|
||||||
|
.notion-icons--tab > div {
|
||||||
|
color: var(--theme--text) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notion-icons--tab > div:hover,
|
||||||
|
.notion-icons--icon:hover,
|
||||||
|
.notion-icons--toggle:hover {
|
||||||
|
background: var(--theme--interactive_hover);
|
||||||
|
box-shadow: 0 0 0 0.5px var(--theme--interactive_hover-border) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#notion-icons {
|
||||||
|
position: absolute;
|
||||||
|
top: 1px;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 9999;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: stretch;
|
||||||
|
background: var(--theme--card);
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: 8px 12px;
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notion-icons--icon-set {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
color: var(--theme--text);
|
||||||
|
font-size: 11px;
|
||||||
|
line-height: 1.5;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
font-weight: 600;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.notion-icons--icon-set.error {
|
||||||
|
color: var(--theme--text_red);
|
||||||
|
background: var(--theme--line_red);
|
||||||
|
border: 1px solid var(--theme--select_red);
|
||||||
|
padding: 8px 16px;
|
||||||
|
}
|
||||||
|
.notion-icons--icon-set.error::after {
|
||||||
|
content: '!';
|
||||||
|
display: block;
|
||||||
|
font-size: 1.6em;
|
||||||
|
line-height: 0.9;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notion-icons--icon-set.alert .notion-icons--toggle {
|
||||||
|
color: var(--theme--line_yellow-text);
|
||||||
|
background: var(--theme--line_yellow);
|
||||||
|
border: 1px solid var(--theme--select_yellow);
|
||||||
|
margin-left: -1px;
|
||||||
|
margin-right: -1px;
|
||||||
|
}
|
||||||
|
.notion-icons--icon-set.alert .notion-icons--toggle:hover {
|
||||||
|
background: var(--theme--select_yellow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.notion-icons--toggle {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
user-select: none;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
padding: 0.25em;
|
||||||
|
border-radius: 2px;
|
||||||
|
transition: background 200ms, margin-bottom 200ms ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notion-icons--toggle .triangle {
|
||||||
|
width: 0.9em;
|
||||||
|
height: 1em;
|
||||||
|
margin: 0 0.75em 0 0.5em;
|
||||||
|
transition: transform 200ms ease-out 0s;
|
||||||
|
transform: rotateZ(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.notion-icons--toggle a {
|
||||||
|
color: var(--theme-text);
|
||||||
|
transition: color 20ms ease-in;
|
||||||
|
}
|
||||||
|
.notion-icons--toggle a:hover {
|
||||||
|
color: var(--theme--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.notion-icons--body {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: flex-start;
|
||||||
|
flex-grow: 1;
|
||||||
|
margin-left: 1.2em;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: height 200ms ease-in, opacity 200ms ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hidden-set {
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
.hidden-set .notion-icons--toggle {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
.hidden-set .triangle {
|
||||||
|
transform: rotateZ(90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hidden-set .notion-icons--body {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notion-icons--icon {
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
transition: background 20ms ease-in;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 3px;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notion-icons--icon.error {
|
||||||
|
font-size: 20px;
|
||||||
|
background: var(--theme--line_yellow);
|
||||||
|
border: 1px solid var(--theme--select_yellow);
|
||||||
|
color: var(--theme--text_yellow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.notion-icons--icon.error:hover {
|
||||||
|
background: var(--theme--select_yellow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.notion-icons--icon img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notion-icons--spinner img {
|
||||||
|
animation: rotation 1.3s infinite linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rotation {
|
||||||
|
from {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: rotate(359deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user