feat: add custom icons to moono-lexicon #70

carloslancha · 2020-06-19T13:46:38Z

https://issues.liferay.com/browse/IFI-1775

AFAIK moono-lisa (base skin for moono-lexicon) only supports PNG icons but all our clay icons are SVG, so with this pr I'm introducing a step in the build process to convert those SVG into 16px and 32px PNG.

CKEditorBuilder get all that individual icon files and creates a PNG sprite.

~~This is WIP. If you're fine with this approach I'll add the rest of the icons to finish de issue.~~

wincent

This is WIP. If you're fine with this approach I'll add the rest of the icons to finish de issue.

Approach makes sense to me.

wincent · 2020-06-22T08:03:14Z

ck.sh

+	local OUTPUT
+	OUTPUT=$(mktemp)


Is this a shellcheck thing?

wincent · 2020-06-22T08:04:39Z

ck.sh

+				cp -r skins/moono-lexicon ckeditor-dev/skins/moono-lexicon
+
+				# Convert svg icons to png
+				node svg-to-png.js


I'd move this file out of the repo root, into support/ (just to reduce top-level clutter).

I'd also name it with camelCase, to match the other script in there (checkSubmodule.js). (In case you're wondering, build-config.js is the name of the config file you get from the CKEditor website when you download a config, so we didn't change that one.)

Roger Roger

wincent · 2020-06-22T08:11:09Z

ck.sh

@@ -149,7 +153,7 @@ case "$COMMAND" in
 			echo
 			echo "This will reset the \"patches\" directory and replace these patches:"
 			echo
-			ls ../patches/*.patch | cat
+			find ../patches/*.patch | cat


shellcheck again?

The thing about this is you still have glob expansion going on, so both versions of this command get expanded as though you had typed (wrapped for readability):

ls ../patches/0001-LPS-89596-Cannot-Drag-Image-from-top-content-line-in.patch \ ../patches/0002-LPS-95472-Tabs-in-popups-not-appears-correctly-in-ma.patch \ ../patches/0003-LPS-85326-Remove-check-for-Webkit-browsers.patch \ ../patches/0004-LPP-36989-Remove-obsolete-summary-field-from-table-e.patch | cat

or:

find ../patches/0001-LPS-89596-Cannot-Drag-Image-from-top-content-line-in.patch \ ../patches/0002-LPS-95472-Tabs-in-popups-not-appears-correctly-in-ma.patch \ ../patches/0003-LPS-85326-Remove-check-for-Webkit-browsers.patch \ ../patches/0004-LPP-36989-Remove-obsolete-summary-field-from-table-e.patch | cat

Now, I imagine that the intent of the shellcheck advice is actually to avoid shell expansion, not to avoid ls as such... so if you want to do that, the command would be:

find ../patches -name '*.patch'

No glob expansion, because of the single quotes.

No useless cat (find, unlike ls, is always going to print one result per line, so it never needed cat; the purpose of it in ls | cat is to force one item per line).

shellcheck, yep

wincent · 2020-06-22T08:26:49Z

package.json

@@ -20,5 +20,8 @@
 		"postversion": "npx liferay-js-publish",
 		"format": "prettier --write \"skins/**/*.css\" \"support/*.js\" \"*.json\" \"*.md\"",
 		"format:check": "prettier --list-different \"support/*.js\" \"*.json\" \"*.md\""
+	},
+	"dependencies": {
+		"svg-to-png": "^4.0.0"


Bit worrying that this package was last updated 2 years ago.

In an empty project, adding svg-to-png downloads 55 MB of stuff:

$ du -sh . 55M .

43 MB of that is from phantomjs-prebuilt, which is deprecated:

$ du -sk * | sort -n -r | head -1 44332 phantomjs-prebuilt

But at least yarn audit is clean... for now...

$ yarn audit yarn audit v1.22.4 0 vulnerabilities found - Packages audited: 219 ✨ Done in 0.51s.

I haven't done an exhaustive search, but I did find svgexport on Stack Overflow. It has a bit over twice as many weekly downloads (7.6k vs 3.1k), and has been updated more recently (5 months ago).

Installing it pulls down 281 MB of crap:

$ du -sh . 281M .

But 278 MB of that is puppeteer:

$ cd node_modules $ du -sk * | sort -n -r | head -1 284600 puppeteer

And it also has a clean bill of yarn audit health:

$ yarn audit yarn audit v1.22.4 0 vulnerabilities found - Packages audited: 46 ✨ Done in 0.97s.

Just a quick skim over the source, it does look a bit more minimal/modern. I'd say it's a better choice than svg-to-png, but it might be worth a quick survey to see if there's nothing better out there.

I'll take a look

wincent · 2020-06-22T08:32:26Z

svg-to-png.js

+    console.log('PNG icons created');
+};
+
+convert();


You shouldn't fire off an async function and then just walk away. Instead, something like this:

convert() .catch(error => { console.log(error); process.exit(1); });

All of this to avoid an "unhandled promise rejection" error.

Once we have top-level await broadly available, this will be nicer:

try { await convert(); } catch (error) { console.log(error); process.exit(1); }

wincent · 2020-06-22T08:32:50Z

skins/moono-lexicon/icons/italic.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+	<path class="lexicon-icon-outline italic-i-stem" d="M165.23 512h92.562l60.343-342.235h-92.526z"></path>
+	<path class="lexicon-icon-outline italic-i-dot" d="M330.423 16.713c-10.935-11.154-24.503-16.713-40.704-16.713-15.762 0-29.221 5.559-40.338 16.713-11.154 11.118-16.713 24.832-16.713 41.033 0 15.323 5.559 28.489 16.713 39.643 11.118 11.118 24.576 16.713 40.338 16.713 16.201 0 29.769-5.559 40.704-16.713 10.862-11.154 16.347-24.357 16.347-39.643 0-16.238-5.486-29.915-16.347-41.033z"></path>
+</svg>


Sucks that we'll have to keep these in sync manually, but at least you're making a nice script to automate the build

Why not add a dependency on @clayui/css? Don't we publish these in images/icons?

Good idea.

└── @clayui └── css ├── CHANGELOG.md ├── LICENSE.txt ├── README.md ├── index.js ├── lib │ ├── css │ │ ├── atlas.css │ │ ├── atlas.css.map │ │ ├── base.css │ │ ├── base.css.map │ │ ├── bootstrap.css │ │ └── bootstrap.css.map │ ├── images │ │ └── icons │ │ ├── add-cell.svg │ │ ├── add-column.svg │ │ ├── add-role.svg │ │ ├── add-row.svg │ │ ├── adjust.svg │ │ ├── ...

Yep, I was thinking about adding it as a dependency. Wondering if we can take advantage of it and use scss variables so we don't need to hardcode'em...

Anyway, @jbalsas @wincent Clay has tons of icons we don't need here, plus not all the names are the same CKEditor needs, so to do this we'll need to create some mapping file in the skin to copy and rename only the icons we need.

That sounds exactly like the type of work for a build script 😂

I wouldn't mind hardcoding them temporarily and see where that lead us

carloslancha · 2020-06-22T16:44:01Z

@wincent @jbalsas updated pr. I talked offline with @drakonux and we agreed that for now we can go without different state colors.

jbalsas · 2020-06-22T16:52:06Z

So... how does this look? Is it already applied? Can you share a screenshot for our delight? :D

wincent

Looks fine to me. Some nits inline.

wincent · 2020-06-22T16:54:55Z

skins/moono-lexicon/icons/icons.json

+            "output": "align-image-right"
+        }
+    ]
+}


Might be a bit prettier as:

{ "dir": "../../../node_modules/@clayui/css/lib/images/icons", "icons": { "align-center": "justifycenter", "align-image-center": "align-image-center", "align-image-left": "align-image-left", "align-image-right": "align-image-right", "align-justify": "justifyblock", "align-left": "justifyleft", "align-right": "justifyright", "bold": "bold", "chain-broken": "unlink", "change-list": "replace", "code": "source", "cut": "cut", "flag-full": "anchor", "full-size": "maximize", "hidden": "hidden", "indent-less": "outdent", "indent-more": "indent", "italic": "italic", "link": "link", "list-ol": "numberedlist", "list-ul": "bulletedlist", "paste": "copy", "picture": "image", "quote-right": "blockquote", "redo": "redo", "remove-style": "removeformat", "search": "find", "separator": "horizontalrule", "strikethrough": "strike", "subscript": "subscript", "superscript": "superscript", "table": "table", "underline": "underline", "undo": "undo" } }

wincent · 2020-06-22T16:55:50Z

support/svgToPng.js

+
+const sourceIconsPath = path.join(path.dirname(configFilePath), '../', iconsConfig.dir)
+
+for (const icon of iconsConfig.icons) {


If you change the JSON, here would be:

for (const [source, output] of Object.entries(iconsConfig.icons)) {

wincent · 2020-06-22T16:56:21Z

support/svgToPng.js

+let rawdata = fs.readFileSync(configFilePath)
+let iconsConfig = JSON.parse(rawdata)


const, not let.

Also, rawdata → rawData

wincent · 2020-06-22T16:57:18Z

support/svgToPng.js

+let rawdata = fs.readFileSync(configFilePath)
+let iconsConfig = JSON.parse(rawdata)
+
+const sourceIconsPath = path.join(path.dirname(configFilePath), '../', iconsConfig.dir)


The whole point of join is that you don't have to specify path separators, so '../' → '..'.

wincent · 2020-06-22T16:58:06Z

support/svgToPng.js

+const fs = require('fs')
+const path = require( 'path' )
+const sharp = require("sharp")


Looks like you need to run Prettier over this file (missing semi-colons, below too; inconsistent bracket spacing, mixed quotes; indents off below).

carloslancha · 2020-06-22T20:03:47Z

@wincent @jbalsas I just pushed what I had for you to see the approach, I was saturated (don't know if that's the correct word but 🤷), didn't format and that stuff, sorry for not specifying.

I'll add an screenshot tomorrow, it's working, just need to review if the color is the correct one (and fix some icons that are not ok in clay, but that's another task for them).

carloslancha · 2020-06-23T10:06:26Z

@wincent @jbalsas updated PR:

We're now using sharp for png conversion:

$ du -sh .
44 M    .

$ yarn audit
yarn audit v1.22.4
0 vulnerabilities found - Packages audited: 88
✨  Done in 0.45s.

This is how it looks in portal

As you can see there some of things we need to take care about:

Icons size

In Clay all svg icons are 512x512, but those dimensions are supposed to refer to the viewbox, not to the icon itself.

For example, the Bold icon, is not supposed to fill the entire viewbox (if we resize it to 16x16 the icon height should be 11.98px). That's why some icons looks that big.

Custom plugins

Custom plugins like image selector defines their icon in portal:

editor.ui.addButton('ImageSelector', {
	command: 'imageselector',
	icon: instance.path + 'assets/image.png',
	label: editor.lang.common.image,
});

so we need to change those icons in portal.

Missing icons

There're some icons that are not ready yet (listed here). That's why some of the buttons appear with default ckeditor ones.

Once Lexicon takes care of it and Clay add it to the library we'll just need to add them to icons.json and rebuild.

wincent

lg2m

wincent · 2020-06-23T13:59:27Z

skins/moono-lexicon/icons/icons.json

+        "bold": "bold",
+        "italic": "italic",
+        "underline": "underline",
+        "strikethrough": "strike",
+        "subscript": "subscript",
+        "superscript": "superscript",
+        "remove-style": "removeformat",
+        "list-ol": "numberedlist",
+        "list-ul": "bulletedlist",
+        "indent-more": "indent",
+        "indent-less": "outdent",
+        "quote-right": "blockquote",
+        "align-left": "justifyleft",
+        "align-center": "justifycenter",
+        "align-right": "justifyright",
+        "align-justify": "justifyblock",
+        "link": "link",
+        "chain-broken": "unlink",
+        "flag-full": "anchor",
+        "picture": "image",
+        "table2": "table",
+        "separator": "horizontalrule",
+        "full-size": "maximize",
+        "change-list": "replace",
+        "search": "find",
+        "undo": "undo",
+        "redo": "redo",
+        "paste": "copy",
+        "cut": "cut",
+        "code": "source",
+        "hidden": "hidden",
+        "align-image-center": "align-image-center",
+        "align-image-left": "align-image-left",
+        "align-image-right": "align-image-right"


You know, that deep down in your soul, you yearn to sort this.

Actually I thought about inverting key-value so the key is CKEditor button name and value the Clay icon name, makes more sense in a skin (and I'm thinking now that it could solve possible issues if we need to use the same Clay icon in more than one button)... So... you'll get your sorting...

wincent · 2020-06-23T14:10:14Z

support/svgToPng.js

+for (const [source, output] of Object.entries(iconsConfig.icons)) {
+	var svgData = fs.readFileSync(`${sourceIconsPath}/${source}.svg`, 'utf8');
+
+	svgData = svgData.replace(/\<svg/g, '<svg fill="#6B6C7E"');


This is the only brittle part of this whole business. What if the Clay SVGs ever start including a fill attribute? You'd get two fill attributes then (at the moment, looks like only the "flags" ones do, for obvious reasons.) Why do you use g here? I'd expect one svg per file (looking at the Clay SVGs, that's the case for all the ones that we care about here).

Feel free to ship this as-is, but if you want to be a little tighter you could do something like:

svgData = svgData .replace(/\s+fill="[^"]+"/, '') .replace(/<svg/, '<svg fill="#6b6c7e"');

(ie. strip fill attribute, if any, then add new attribute). I probably wouldn't bother, but mentioning it just for completeness.

wincent · 2020-06-23T14:11:46Z

For example, the Bold icon, is not supposed to fill the entire viewbox (if we resize it to 16x16 the icon height should be 11.98px). That's why some icons looks that big.

I presume you're going to adjust in some way?

carloslancha · 2020-06-23T14:30:56Z

I presume you're going to adjust in some way?

Nope, I can't, that's something that need to be fixed in Clay.

wincent · 2020-06-23T14:50:43Z

I presume you're going to adjust in some way?

Nope, I can't, that's something that need to be fixed in Clay.

What would be fixed there? I read you description but I don't get exactly what is wrong and what would be needed. Why does it only affect some icons? Do we have a Clay ticket for the change that you would need to be made there? And are you sure that change won't break something else elsewhere?

Nope, I can't

You sure? You have a script where you can run arbitrary transformations.

carloslancha · 2020-06-23T19:29:37Z

I'll try to explain it better.

All Clay icons are made in 512x512px (resized to 32x32 or 16x16) viewbox base, but that doesn't mean that the icons must fill the entire available space.

For example, this is the Lexicon definition of the bold icon in 16x16:

As you can see the viewbox is 16x16, but the icon doesn't fill the entire container.

This is the definition of the link icon in 16x16:

In this case the viewbox is the same, 16x16, but the icon is bigger than the bold one. This is to control the visual weights of the icons, each one has its own size inside the same viewbox.

Now, this is the svg of the bold icon in Clay:

it fills the entire space, so we need to fix the icons that are not following the definition.

You sure? You have a script where you can run arbitrary transformations.
I should have said "I should not". That would be a huge task checking the size of each icon and resizing them on build time, and that wouldn't solve the problem, and the fact, that they're not well build in Clay, and this problem will prevail everywhere we're using those icons.

@drakonux was going to move this, but if he's no time tomorrow I can help and start opening thickets in Clay.

…pi folder to upload it, sharp needs this folder to generate the icons inside

…color

pat270 · 2020-06-24T00:12:16Z

I was checking the CKEditor 4 demo and was wondering if we could do something like:

.cke_hidpi .cke_button_icon {
    background-size: 1.75rem !important;
    background-position: center !important;
}

.cke_hidpi .cke_button__undo_icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20class='lexicon-icon-outline'%20d='M73.4%20137.4l96-96c12.5-12.5%2032.8-12.5%2045.3%200s12.5%2032.8%200%2045.3l-41.2%2041.2H288c88.2%200%20160%2071.8%20160%20160s-71.8%20160-160%20160c-17.7%200-32-14.3-32-32s14.3-32%2032-32c52.9%200%2096-43.1%2096-96s-43.1-96-96-96H173l41.4%2041.4c12.5%2012.5%2012.5%2032.8%200%2045.3-6.2%206.2-14.4%209.4-22.6%209.4-8.2%200-16.4-3.1-22.6-9.4l-95.8-96c-12.5-12.5-12.5-32.7%200-45.2z'%20fill='%236b6c7e'/%3E%3C/svg%3E") !important !important;
}

.cke_hidpi .cke_button__redo_icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20class='lexicon-icon-outline'%20d='M438.6%20137.6l-96-96c-12.5-12.5-32.8-12.5-45.3%200s-12.5%2032.8%200%2045.3l41.2%2041.2H224c-88.2%200-160%2071.8-160%20160s71.8%20160%20160%20160c17.7%200%2032-14.3%2032-32s-14.3-32-32-32c-52.9%200-96-43.1-96-96s43.1-96%2096-96h115l-41.4%2041.4c-12.5%2012.5-12.5%2032.8%200%2045.3%206.2%206.2%2014.4%209.4%2022.6%209.4s16.4-3.1%2022.6-9.4l95.8-95.8c12.5-12.7%2012.5-32.9%200-45.4z'%20fill='%236b6c7e'/%3E%3C/svg%3E") !important !important;
}

.cke_hidpi .cke_button__bold_icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20class='lexicon-icon-outline'%20d='M262.217%200c25.307%200%2047.689%203.511%2067.182%2010.459%2019.456%206.985%2035.913%2016.603%2049.298%2028.891%2013.349%2012.288%2023.589%2026.843%2030.647%2043.703s10.606%2035.145%2010.606%2054.894c0%2026.478-7.058%2049.591-21.175%2069.339s-32.146%2033.207-54.053%2040.448c12.654%202.889%2024.466%207.936%2035.401%2015.177%2010.971%207.205%2020.553%2016.018%2028.855%2026.368%208.265%2010.35%2014.848%2022.272%2019.712%2035.73%204.864%2013.495%207.314%2028.16%207.314%2044.069%200%2020.699-3.767%2039.826-11.301%2057.417-7.57%2017.591-18.249%2032.622-32.146%2045.129-13.861%2012.507-30.683%2022.382-50.395%2029.623-19.712%207.131-41.728%2010.752-66.085%2010.752H75.995v-512h186.222zm-15.36%20211.602c23.369%200%2041.509-5.778%2054.418-17.335s19.346-27.209%2019.346-46.921c0-19.749-6.217-35.255-18.615-46.592-12.398-11.301-31.049-16.969-55.845-16.969h-70.839v127.817h71.534zm10.24%20217.344c24.832%200%2044.069-5.888%2057.673-17.701%2013.641-11.776%2020.443-28.05%2020.443-48.75%200-20.224-6.473-36.718-19.346-49.481-12.91-12.763-32.037-19.127-57.307-19.127h-83.237v135.058h81.774z'%20fill='%236b6c7e'/%3E%3C/svg%3E") !important;
}

.cke_hidpi .cke_button__italic_icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20class='lexicon-icon-outline%20italic-i-stem'%20d='M165.23%20512h92.562l60.343-342.235h-92.526z'%20fill='%236b6c7e'/%3E%3Cpath%20class='lexicon-icon-outline%20italic-i-dot'%20d='M330.423%2016.713C319.488%205.559%20305.92%200%20289.719%200c-15.762%200-29.221%205.559-40.338%2016.713-11.154%2011.118-16.713%2024.832-16.713%2041.033%200%2015.323%205.559%2028.489%2016.713%2039.643%2011.118%2011.118%2024.576%2016.713%2040.338%2016.713%2016.201%200%2029.769-5.559%2040.704-16.713%2010.862-11.154%2016.347-24.357%2016.347-39.643%200-16.238-5.486-29.915-16.347-41.033z'%20fill='%236b6c7e'/%3E%3C/svg%3E") !important !important;
}

It looks like we can overwrite the moono-lisa CSS. If you need the SVG's converted to data uris just give me a list and colors you want for each.

Edit: The good thing about this pattern is you can adjust the icon size without having to generate a whole new set of PNG's. If bold is too big:

.cke_hidpi .cke_button__bold_icon { background-size: 1.5rem !important; }

carloslancha · 2020-06-24T12:29:16Z

@wincent I pushed a couple of commits applying your feedback, if lg2y please merge it.

@pat270 thx for the idea! Please, take a look to the slack conversation we're having about this.

wincent · 2020-06-24T13:43:30Z

@wincent I pushed a couple of commits applying your feedback, if lg2y please merge it.

Changes lg2m. So based on Slack, my understanding is that we're going to:

Merge this because it "works" and the sizing issues are not bad enough to make this unshippable (ie. the unskinned version looks like 💩 and this version still looks better).
We want to fix the icons in Clay (independently of this).
The Slack thread discusses trade-offs of the two main approaches (SVGs encoded as data URIs vs PNGs); consensus seems to be emerging, and once we have it we can adjust this solution accordingly, but in the meantime there is no harm in shipping it.

Carlos Lancha added 2 commits June 19, 2020 15:46

feat: add support for svg icons in moono-lexicon

b0c5983

feat: add italic icon

c4a5cf9

carloslancha changed the title ~~feat: add italic icon~~ WIP feat: add italic icon Jun 19, 2020

carloslancha changed the title ~~WIP feat: add italic icon~~ WIP feat: add custom icons to moono-lexicon Jun 19, 2020

chore: fix shellcheck issues in ck.sh | #69

15ad2b0

wincent reviewed Jun 22, 2020

View reviewed changes

Carlos Lancha added 3 commits June 22, 2020 12:21

chore: fix shellcheck issues in ck.sh | #69

711f1a5

feat: move svg to png to support directory

970d414

feat: use sharp to generate png icons directly from clay

768b170

wincent reviewed Jun 22, 2020

View reviewed changes

Carlos Lancha added 3 commits June 23, 2020 10:55

feat: format and change icons JSON format

8acb98c

feat: change svg color before generating png

845af6f

feat: use table2 icon

8e70348

carloslancha changed the title ~~WIP feat: add custom icons to moono-lexicon~~ feat: add custom icons to moono-lexicon Jun 23, 2020

chore: update yarn.lock

499ed54

wincent approved these changes Jun 23, 2020

View reviewed changes

Carlos Lancha added 2 commits June 23, 2020 21:36

feat: Invert icons.json source-output logic and add .gitignore to hid…

933ac85

…pi folder to upload it, sharp needs this folder to generate the icons inside

feat: Remove any fill attribute present in the svg before adding the …

549dee3

…color

carloslancha merged commit f6ebdb5 into liferay:master Jun 24, 2020

pat270 mentioned this pull request Jun 29, 2020

Update Icon: Bold, Italic, Underline liferay/clay#3364

Closed


		const sourceIconsPath = path.join(path.dirname(configFilePath), '../', iconsConfig.dir)

		for (const icon of iconsConfig.icons) {

		let rawdata = fs.readFileSync(configFilePath)
		let iconsConfig = JSON.parse(rawdata)

feat: add custom icons to moono-lexicon #70

feat: add custom icons to moono-lexicon #70

Conversation

carloslancha commented Jun 19, 2020 • edited Loading

wincent left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

carloslancha commented Jun 22, 2020

jbalsas commented Jun 22, 2020

wincent left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

carloslancha commented Jun 22, 2020 • edited Loading

carloslancha commented Jun 23, 2020

Icons size

Custom plugins

Missing icons

wincent left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wincent commented Jun 23, 2020

carloslancha commented Jun 23, 2020

wincent commented Jun 23, 2020

carloslancha commented Jun 23, 2020

pat270 commented Jun 24, 2020 • edited Loading

carloslancha commented Jun 24, 2020

wincent commented Jun 24, 2020 • edited Loading

carloslancha commented Jun 19, 2020 •

edited

Loading

carloslancha commented Jun 22, 2020 •

edited

Loading

pat270 commented Jun 24, 2020 •

edited

Loading

wincent commented Jun 24, 2020 •

edited

Loading