Antoine/homegrade_theme_production
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

handling new smileys shortcodes

Browse Source
This commit is contained in:
Antoine M 2024-08-19 16:49:49 +02:00
parent c78cf7ce9f
commit 6aacf5334a
5 changed files with 90 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
resources/css/editor-content/gutenberg.css
View File

@ -42,20 +42,23 @@ article > *:not(.entry-content, .chapter-header-block),
}
}
.table-cell-icon {
.homegrade-shortcode-icon {
@apply mx-auto p-2 w-fit h-auto rounded-full flex items-center justify-center relative grow-0;
aspect-ratio: 1;
img {
@apply w-4 h-4;
}
}
.table-cell-icon--checked {
.homegrade-shortcode-icon--checked {
@apply bg-green-600;
}
.table-cell-icon--dashed,
.table-cell-icon--crossed {
.homegrade-shortcode-icon--dashed,
.homegrade-shortcode-icon--crossed {
@apply bg-white border-2 border-neutral-800;
}
.homegrade-shortcode-icon--smiley {
@apply p-0 !w-8 !h-8 object-contain object-center;
}
}
.wp-block-columns {

24
resources/img/graphic-assets/homegrade_smiley-pratique-bonne.svg Normal file
View File

@ -0,0 +1,24 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="smiley-pratique-bonne" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 39.85 39.85">
<defs>
<style>
.cls-1 {
fill: none;
stroke: #00a165;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2px;
}
.cls-2 {
fill: #00a165;
}
</style>
</defs>
<circle class="cls-1" cx="19.92" cy="19.92" r="18.92"/>
<g>
<path id="oeil-gauche" class="cls-2" d="M15.46,11.7h0c1.22,0,2.2.99,2.2,2.2v5.94h-4.4v-5.94c0-1.22.99-2.2,2.2-2.2Z"/>
<path id="oeil-droit" class="cls-2" d="M24.38,11.7h0c1.22,0,2.2.99,2.2,2.2v5.94h-4.4v-5.94c0-1.22.99-2.2,2.2-2.2Z"/>
</g>
<path id="bouche" class="cls-1" d="M27.9,24.75c-1.49,2.98-4.53,4.9-7.85,4.95-3.41.05-6.57-1.88-8.11-4.95"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 812 B

26
resources/img/graphic-assets/homegrade_smiley-pratique-intermediaire.svg Normal file
View File

@ -0,0 +1,26 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="smiley-pratique-intermediaire" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 39.85 39.85">
<defs>
<style>
.cls-1 {
fill: none;
stroke: #c24503;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2px;
}
.cls-2 {
fill: #c24503;
}
</style>
</defs>
<circle class="cls-1" cx="19.92" cy="19.92" r="18.92"/>
<g>
<g>
<rect id="oeil-gauche" class="cls-2" x="13.26" y="11.7" width="4.4" height="8.15"/>
<rect id="oeil-droit" class="cls-2" x="22.18" y="11.7" width="4.4" height="8.15"/>
</g>
<line id="bouche" class="cls-1" x1="11.02" y1="28.26" x2="28.82" y2="28.26"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 745 B

24
resources/img/graphic-assets/homegrade_smiley-pratique-mauvaise.svg Normal file
View File

@ -0,0 +1,24 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="smiley-pratique-mauvaise" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 39.85 39.85">
<defs>
<style>
.cls-1 {
fill: none;
stroke: #df1e1e;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2px;
}
.cls-2 {
fill: #df1e1e;
}
</style>
</defs>
<circle class="cls-1" cx="19.92" cy="19.92" r="18.92"/>
<g>
<rect id="oeil-gauche" class="cls-2" x="13.28" y="13.36" width="4.4" height="4.9"/>
<rect id="oeil-droit" class="cls-2" x="22.2" y="13.36" width="4.4" height="4.9"/>
<path id="bouche" class="cls-1" d="M12.27,29.13c3.36,1.13,5.03.86,5.93.4,1.61-.82,1.12-2.38,3.03-3.29,1.24-.59,3.05-.7,4.48-.1.83.35,1.47.92,1.86,1.6"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 793 B

18
resources/js/editor.js
View File

@ -20,37 +20,37 @@ function handleEditorShortCodes() {
const replacements = {
// ((v))
'\\(\\(v\\)\\)': `
<div class="table-cell-icon table-cell-icon--checked"><img src="${mainAppJsDynamicDatas.template_directory_uri}/resources/img/graphic-assets/table-cell--check.svg"
<div class="homegrade-shortcode-icon homegrade-shortcode-icon--checked"><img src="${mainAppJsDynamicDatas.template_directory_uri}/resources/img/graphic-assets/table-cell--check.svg"
alt="${mainAppJsDynamicDatas.yes}"/></div>
`,
// ((x))
'\\(\\(x\\)\\)': `
<img class="table-cell-icon table-cell-icon--crossed"
<img class="homegrade-shortcode-icon homegrade-shortcode-icon--crossed"
src="${mainAppJsDynamicDatas.template_directory_uri}/resources/img/graphic-assets/table-cell--cross.svg"
alt="Alternative"/>
`,
// ((-))
'\\(\\(-\\)\\)': `
<img class="table-cell-icon table-cell-icon--dashed"
<img class="homegrade-shortcode-icon homegrade-shortcode-icon--dashed"
src="${mainAppJsDynamicDatas.template_directory_uri}/resources/img/graphic-assets/table-cell--dash.svg"
alt="Alternative"/>
`,
// (:-))
'\\(:-\\)\\)': `
<img class="table-cell-icon table-cell-icon--crossed"
src="${mainAppJsDynamicDatas.template_directory_uri}/resources/img/graphic-assets/table-cell--cross.svg"
<img class="homegrade-shortcode-icon homegrade-shortcode-icon--smiley homegrade-shortcode-icon--smiley-good"
src="${mainAppJsDynamicDatas.template_directory_uri}/resources/img/graphic-assets/homegrade_smiley-pratique-bonne.svg"
alt="Possible"/>
`,
// (:-|)
'\\(:-\\|\\)': `
<img class="table-cell-icon table-cell-icon--crossed"
src="${mainAppJsDynamicDatas.template_directory_uri}/resources/img/graphic-assets/table-cell--cross.svg"
<img class="homegrade-shortcode-icon homegrade-shortcode-icon--smiley homegrade-shortcode-icon--smiley-neutral"
src="${mainAppJsDynamicDatas.template_directory_uri}/resources/img/graphic-assets/homegrade_smiley-pratique-intermediaire.svg"
alt="Alternative"/>
`,
// (:-()
'\\(:-\\(\\)': `
<img class="table-cell-icon table-cell-icon--crossed"
src="${mainAppJsDynamicDatas.template_directory_uri}/resources/img/graphic-assets/table-cell--cross.svg"
<img class="homegrade-shortcode-icon homegrade-shortcode-icon--smiley homegrade-shortcode-icon--smiley-bad"
src="${mainAppJsDynamicDatas.template_directory_uri}/resources/img/graphic-assets/homegrade_smiley-pratique-mauvaise.svg"
alt="Alternative"/>
`,
};