Added Icon Maker mockup
Update .gitignore, ico-maker.yml, and 9 more files...
This commit is contained in:
4
.gitignore
vendored
4
.gitignore
vendored
@@ -11,3 +11,7 @@ node_modules/
|
|||||||
# Internal stuff
|
# Internal stuff
|
||||||
*.pdn
|
*.pdn
|
||||||
*.ai
|
*.ai
|
||||||
|
|
||||||
|
# Temp
|
||||||
|
static/resources/SortableJS
|
||||||
|
static/resources/Standalone
|
||||||
|
|||||||
8
data/applets/ico-maker.yml
Normal file
8
data/applets/ico-maker.yml
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
applets:
|
||||||
|
- id: "ico-maker"
|
||||||
|
resources:
|
||||||
|
scripts:
|
||||||
|
#- "https://cdn.nibblepoker.lu/SortableJS/1.15.6/Sortable.min.js"
|
||||||
|
- "applet://ico-maker.mjs"
|
||||||
|
stylesheets:
|
||||||
|
- "applet://ico-maker.css"
|
||||||
3
data/strings/en/ico-maker.yml
Normal file
3
data/strings/en/ico-maker.yml
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
# EN - Ico Maker
|
||||||
|
|
||||||
|
t01: ""
|
||||||
3
data/strings/fr/ico-maker.yml
Normal file
3
data/strings/fr/ico-maker.yml
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
# FR - Ico Maker
|
||||||
|
|
||||||
|
t01: ""
|
||||||
30
data/tools/ico-maker.yml
Normal file
30
data/tools/ico-maker.yml
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
tools:
|
||||||
|
- id: "ico-maker"
|
||||||
|
applet_id: "ico-maker"
|
||||||
|
metadata:
|
||||||
|
head:
|
||||||
|
title_key: "meta.title"
|
||||||
|
description_key: "meta.description"
|
||||||
|
opengraph:
|
||||||
|
title_key: "meta.title"
|
||||||
|
description_key: "meta.description"
|
||||||
|
type: null
|
||||||
|
url: null
|
||||||
|
image_url: "/resources/NibblePoker/images/tools/ico-maker/main.png"
|
||||||
|
image_type: null
|
||||||
|
twitter:
|
||||||
|
title_key: "meta.title"
|
||||||
|
description_key: "meta.description"
|
||||||
|
index:
|
||||||
|
priority: 100
|
||||||
|
enable: true
|
||||||
|
title_key: "meta.title"
|
||||||
|
preamble_key: "meta.description"
|
||||||
|
image_url: "/resources/NibblePoker/images/tools/ico-maker/main.png"
|
||||||
|
image_alt_key: ""
|
||||||
|
general:
|
||||||
|
icon: "fab fa-python"
|
||||||
|
title_key: "meta.title"
|
||||||
|
subtitle_key: "article.subtitle"
|
||||||
|
tags:
|
||||||
|
- "undefined"
|
||||||
@@ -1,4 +1,3 @@
|
|||||||
|
|
||||||
tools:
|
tools:
|
||||||
- id: "png-chunk-analyser"
|
- id: "png-chunk-analyser"
|
||||||
applet_id: "png-chunk-analyser"
|
applet_id: "png-chunk-analyser"
|
||||||
|
|||||||
@@ -54,6 +54,16 @@ call "%~dp0node_modules\.bin\terser" excel-password-remover.js -c -m -o excel-pa
|
|||||||
popd
|
popd
|
||||||
|
|
||||||
|
|
||||||
|
:js-applet-ico-maker
|
||||||
|
echo Minifying Ico Maker
|
||||||
|
pushd %CD%
|
||||||
|
cd %~dp0\..\static\resources\NibblePoker\applets\ico-maker\
|
||||||
|
echo ^> static\resources\NibblePoker\applets\ico-maker\ico-maker.mjs
|
||||||
|
call "%~dp0node_modules\.bin\rollup" ico-maker.mjs --file ico-maker.js
|
||||||
|
call "%~dp0node_modules\.bin\terser" ico-maker.js -c -m -o ico-maker.min.js
|
||||||
|
popd
|
||||||
|
|
||||||
|
|
||||||
:js-uuidgenerator-minify
|
:js-uuidgenerator-minify
|
||||||
echo Minifying UUID Generator
|
echo Minifying UUID Generator
|
||||||
pushd %CD%
|
pushd %CD%
|
||||||
|
|||||||
@@ -1,3 +0,0 @@
|
|||||||
.cursor-pointer {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|||||||
24
static/resources/NibblePoker/applets/ico-maker/ico-maker.mjs
Normal file
24
static/resources/NibblePoker/applets/ico-maker/ico-maker.mjs
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
/**!
|
||||||
|
* NibblePoker Ico Maker
|
||||||
|
* @author Herwin Bozet <herwin.bozet@nibblepoker.lu>
|
||||||
|
* @license Public Domain
|
||||||
|
*/
|
||||||
|
|
||||||
|
import {Sortable} from "../../../SortableJS/1.15.6/modular/sortable.core.esm.js"
|
||||||
|
|
||||||
|
export const appletId = "ico-maker";
|
||||||
|
|
||||||
|
{
|
||||||
|
const eIconPartsContainer = document.getElementById(`${appletId}-icon-parts-list`);
|
||||||
|
|
||||||
|
|
||||||
|
window.onload = function () {
|
||||||
|
|
||||||
|
// Setting up SortableJS
|
||||||
|
let sortable = Sortable.create(eIconPartsContainer, {
|
||||||
|
animation: 125, // ms, animation speed moving items when sorting, `0` — without animation
|
||||||
|
easing: "cubic-bezier(1, 0, 0, 1)", // Easing for animation. Defaults to null. See https://easings.net/ for examples.
|
||||||
|
|
||||||
|
});
|
||||||
|
};
|
||||||
|
}
|
||||||
208
templates/applets/ico-maker.jinja
Normal file
208
templates/applets/ico-maker.jinja
Normal file
@@ -0,0 +1,208 @@
|
|||||||
|
|
||||||
|
<section id="{{ applet_data.id }}-introduction">
|
||||||
|
{{ render_h2(l10n("introduction.title", "commons", user_lang)) }}
|
||||||
|
{{ render_paragraph(l10n("introduction.1", applet_data.id, user_lang)) }}
|
||||||
|
{{ render_paragraph(l10n("introduction.2", applet_data.id, user_lang)) }}
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="{{ applet_data.id }}-input">
|
||||||
|
{{ render_h2(l10n("input.title", "commons", user_lang)) }}
|
||||||
|
{{ render_paragraph(l10n("input.1", applet_data.id, user_lang)) }}
|
||||||
|
|
||||||
|
{{ render_file_input(applet_data.id + "-image-input-file", true, ".png, .bmp, .ico", true, false, user_lang) }}
|
||||||
|
|
||||||
|
<hr class="subtle">
|
||||||
|
|
||||||
|
<label for="{{ applet_data.id }}-enable-expert-mode" class="mr-xxs">
|
||||||
|
{{ l10n("enable.expert.mode", applet_data.id, user_lang) }}:
|
||||||
|
</label>
|
||||||
|
<input id="{{ applet_data.id }}-enable-expert-mode" class="r-m border" type="checkbox">
|
||||||
|
<!--<span class="ml-s t-italic t-muted">Toggles some uncommon features.</span>-->
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<label for="{{ applet_data.id }}-enable-binary-blobs" class="mr-xxs">
|
||||||
|
{{ l10n("enable.binary.blobs", applet_data.id, user_lang) }}:
|
||||||
|
</label>
|
||||||
|
<input id="{{ applet_data.id }}-enable-binary-blobs" class="r-m border" type="checkbox">
|
||||||
|
<span class="ml-s t-italic t-muted">Enables upload and inclusion in final <span class="t-monospace">.ico</span> file.</span>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
{{ render_button("<i class=\"fa-duotone fa-solid fa-plus\"></i>Add Text", False, None, "bkgd-blue") }}
|
||||||
|
|
||||||
|
<span class="f-right">
|
||||||
|
{{ render_button("<i class=\"fa-duotone fa-solid fa-remove\"></i>Remove Binary Blobs", False, None, "bkgd-orange") }}
|
||||||
|
{{ render_button("<i class=\"fa-duotone fa-solid fa-remove\"></i>Remove Everything", False, None, "bkgd-red") }}
|
||||||
|
</span>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="{{ applet_data.id }}-icon-parts">
|
||||||
|
{{ render_h2(l10n("idk01.title", "commons", user_lang)) }}
|
||||||
|
{{ render_paragraph(l10n("idk01.1", applet_data.id, user_lang)) }}
|
||||||
|
|
||||||
|
{{ render_button("<i class=\"fa-duotone fa-solid fa-download\"></i>Download <span class=\"t-monospace\">.ico</span>", False, None, "bkgd-green") }}
|
||||||
|
|
||||||
|
<div class="border r-m">
|
||||||
|
<table class="table-p-xxs ">
|
||||||
|
<tr>
|
||||||
|
<td class="bkgd-grid40 rl-m br t-size-14 t-noselect" rowspan="2">
|
||||||
|
<i class="fad fa-grip-vertical c-not-allowed px-xxs t-super-muted"></i>
|
||||||
|
</td>
|
||||||
|
<td class="w-full bkgd-gray">
|
||||||
|
<div class="px-xxs">
|
||||||
|
<p>Required ICO Headers</p>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="bkgd-gray">
|
||||||
|
<div class="px-xxs">
|
||||||
|
<p class="t-italic t-half-muted">
|
||||||
|
<i class="fa-duotone fa-solid fa-weight-hanging mr-xs"></i>1.23 KiB
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="{{ applet_data.id }}-icon-parts-list">
|
||||||
|
|
||||||
|
<div class="border r-m">
|
||||||
|
<table class="table-p-xxs table-v-center">
|
||||||
|
<tr>
|
||||||
|
<td class="bkgd-grid40 rl-m br t-size-14 t-noselect">
|
||||||
|
<i class="fad fa-grip-vertical cursor-pointer px-xxs"></i>
|
||||||
|
</td>
|
||||||
|
<td class="w-full bkgd-gray bb">
|
||||||
|
<div class="px-xxs">
|
||||||
|
<p class="t-bold">
|
||||||
|
<i class="fa-duotone fa-solid fa-image mr-xxs t-muted"></i>
|
||||||
|
MyFile.png
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td rowspan="3" class="bl bkgd-dark rr-m">BKGD IMG</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="bkgd-grid40 rl-m br t-size-14 t-noselect bt">
|
||||||
|
<i class="fad fa-caret-up cursor-pointer px-xxs"></i>
|
||||||
|
</td>
|
||||||
|
<td class="bkgd-gray">
|
||||||
|
<div class="px-xxs">
|
||||||
|
<p class="t-italic t-half-muted">
|
||||||
|
<i class="fa-duotone fa-solid fa-ruler-combined mr-xs"></i>32x32
|
||||||
|
<i class="fa-duotone fa-solid fa-weight-hanging mr-xs ml-m"></i>12.5 KiB
|
||||||
|
<i class="fa-duotone fa-solid fa-palette mr-xs ml-m"></i>32 bpp
|
||||||
|
<i class="fa-duotone fa-solid fa-swatchbook mr-xs ml-m"></i>256 colors
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="bkgd-grid40 rl-m br t-size-14 t-noselect">
|
||||||
|
<i class="fad fa-caret-down cursor-pointer px-xxs"></i>
|
||||||
|
</td>
|
||||||
|
<td class="bkgd-gray">
|
||||||
|
<div class="px-xxs">
|
||||||
|
{{ render_button("<i class=\"fa-duotone fa-solid fa-gear\"></i>Options", False, None, "bkgd-blue") }}
|
||||||
|
{{ render_button("<i class=\"fa-duotone fa-solid fa-trash\"></i>Remove", False, None, "bkgd-orange") }}
|
||||||
|
{{ render_button("<i class=\"fa-duotone fa-solid fa-file-circle-info\"></i>Details", False, None, "") }}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="border r-m">
|
||||||
|
<table class="table-p-xxs table-v-center">
|
||||||
|
<tr>
|
||||||
|
<td class="bkgd-grid40 rl-m br t-size-14 t-noselect">
|
||||||
|
<i class="fad fa-grip-vertical cursor-pointer px-xxs"></i>
|
||||||
|
</td>
|
||||||
|
<td class="w-full bkgd-gray bb">
|
||||||
|
<div class="px-xxs">
|
||||||
|
<p class="t-bold">
|
||||||
|
<i class="fa-duotone fa-solid fa-binary mr-xxs t-muted"></i>
|
||||||
|
Watermark.bin
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="bkgd-grid40 rl-m br t-size-14 t-noselect bt">
|
||||||
|
<i class="fad fa-caret-up cursor-pointer px-xxs"></i>
|
||||||
|
</td>
|
||||||
|
<td class="bkgd-gray">
|
||||||
|
<div class="px-xxs">
|
||||||
|
<p class="t-italic t-half-muted">
|
||||||
|
<i class="fa-duotone fa-solid fa-weight-hanging mr-xs"></i>12.5 KiB
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="bkgd-grid40 rl-m br t-size-14 t-noselect">
|
||||||
|
<i class="fad fa-caret-down cursor-pointer px-xxs"></i>
|
||||||
|
</td>
|
||||||
|
<td class="bkgd-gray">
|
||||||
|
<div class="px-xxs">
|
||||||
|
{{ render_button("<i class=\"fa-duotone fa-solid fa-trash\"></i>Remove", False, None, "bkgd-orange") }}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="border r-m">
|
||||||
|
<table class="table-p-xxs table-v-center">
|
||||||
|
<tr>
|
||||||
|
<td class="bkgd-grid40 rl-m br t-size-14 t-noselect">
|
||||||
|
<i class="fad fa-grip-vertical cursor-pointer px-xxs"></i>
|
||||||
|
</td>
|
||||||
|
<td class="w-full bkgd-gray bb">
|
||||||
|
<div class="px-xxs">
|
||||||
|
<p class="t-bold t-italic">
|
||||||
|
<i class="fa-duotone fa-solid fa-text-size mr-xxs t-muted"></i>
|
||||||
|
Custom Text
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="bkgd-grid40 rl-m br t-size-14 t-noselect bt">
|
||||||
|
<i class="fad fa-caret-up cursor-pointer px-xxs"></i>
|
||||||
|
</td>
|
||||||
|
<td class="bkgd-gray">
|
||||||
|
<div class="px-xxs">
|
||||||
|
<label for="test123" hidden>321</label>
|
||||||
|
<textarea name="test123" id="test123" cols="30" rows="6"
|
||||||
|
class="p-xxs border r-m w-full ta-resize-v"></textarea>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="bkgd-grid40 rl-m br t-size-14 t-noselect">
|
||||||
|
<i class="fad fa-caret-down cursor-pointer px-xxs"></i>
|
||||||
|
</td>
|
||||||
|
<td class="bkgd-gray">
|
||||||
|
<div class="px-xxs">
|
||||||
|
{{ render_button("<i class=\"fa-duotone fa-solid fa-gear\"></i>Options", False, None, "bkgd-blue") }}
|
||||||
|
{{ render_button("<i class=\"fa-duotone fa-solid fa-trash\"></i>Remove", False, None, "bkgd-orange") }}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
<section id="{{ applet_data.id }}-licenses">
|
||||||
|
{{ render_h2(l10n("licenses.title", "commons", user_lang)) }}
|
||||||
|
{{ render_paragraph(l10n("licenses.1", applet_data.id, user_lang)) }}
|
||||||
|
{{ render_paragraph(l10n("licenses.2", applet_data.id, user_lang)) }}
|
||||||
|
</section>
|
||||||
Reference in New Issue
Block a user