From 46e66cfcba16f8dd156bdaee25c7d4f730d11c96 Mon Sep 17 00:00:00 2001 From: viglino Date: Mon, 26 Aug 2024 14:46:51 +0200 Subject: [PATCH] [VER] Story style sheet --- package.json | 2 +- page/css-dialog.html | 5 ++- page/onglet-miseenforme.css | 1 + page/onglet-miseenforme.html | 2 +- src/i18n.fr.js | 14 ++++++-- src/menu/onglet-miseenforme.js | 65 +++++++++++++++++++++++----------- 6 files changed, 63 insertions(+), 26 deletions(-) diff --git a/package.json b/package.json index 70c33b6..1a80bcb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mcstory", - "version": "4.3.2", + "version": "4.3.4", "description": "Editeur de cartes narratives", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", diff --git a/page/css-dialog.html b/page/css-dialog.html index c77272c..10a1534 100644 --- a/page/css-dialog.html +++ b/page/css-dialog.html @@ -7,11 +7,14 @@

diff --git a/page/onglet-miseenforme.css b/page/onglet-miseenforme.css index 035e056..6295731 100644 --- a/page/onglet-miseenforme.css +++ b/page/onglet-miseenforme.css @@ -101,6 +101,7 @@ max-height: calc(100dvh - 15em); display: block; font-size: 1em; + tab-size: 2; } .ol-ext-dialog.dialogCSS pre[aria-hidden="true"] { display: none; diff --git a/page/onglet-miseenforme.html b/page/onglet-miseenforme.html index e9bde9b..b2a8498 100644 --- a/page/onglet-miseenforme.html +++ b/page/onglet-miseenforme.html @@ -17,7 +17,7 @@

-
diff --git a/src/i18n.fr.js b/src/i18n.fr.js index 07dbee7..e61916d 100644 --- a/src/i18n.fr.js +++ b/src/i18n.fr.js @@ -117,11 +117,19 @@ Les indicateurs sont des valeurs séparées par des virgules. Vous pouvez alors helpStyleSheet: ` # Ajouter une feuille de style ---- -*Ajouter dus tyle à vos carte* +*Ajouter du style à vos carte* -Vous pouvez ajouter une feuille de style au [format Sass](https://fr.wikipedia.org/wiki/Sass_%28langage%29) qui s'appliquera à vos carte. -Cela vous permet de modifier la couleur, la forme, la police de caractère des élements de la carte (voir son comportement). +Vous pouvez ajouter une feuille de style au [format CSS](https://fr.wikipedia.org/wiki/Feuilles_de_style_en_cascade) qui s'appliquera à vos carte. +Cela vous permet de modifier la couleur, la forme, la police de caractère des élements de la carte (utiliser le menu pour avoir des exemples dans la boîte de dialogue). Attention, néanmoins, une mauvaise utilisation peut engendrer des comportements non prévus qui peuvent gèner l'utilisation de la carte au final. + +Vous pouvez utiliser les selecteurs \`story\` pour appliquer le style à la fenêtre de carte, \`dialog\` pour ne l'appliquer qu'aux dialogues ou \`body\` pour l'appliquer aux deux. +\`\`\`CSS +/* Afficher le texte en rouge (carte et dialogues) */ +body { + color: red; +} +\`\`\` `, infoShare: `# Partage`, loadCarte: `Charger une carte`, diff --git a/src/menu/onglet-miseenforme.js b/src/menu/onglet-miseenforme.js index 171ad47..90bc25b 100644 --- a/src/menu/onglet-miseenforme.js +++ b/src/menu/onglet-miseenforme.js @@ -15,28 +15,40 @@ import dlogCSS from '../../page/css-dialog.html'; /* Examples */ i18n.set('fr', { - cssColor: `// variables scss -$primary-color: #369; -$back-color: #ccf; - -color: $primary-color; -background-color: $back-color; -.title > img { - color: $back-color; + cssColor: `/* Titres en rouge sur fond noir + bords blancs */ +story .title { + color: #800; + text-shadow: 1px 1px #fff, 1px -1px #fff, -1px 1px #fff, -1px -1px #fff; + background-color: #000; +} +story .title h1, +story .title h2 { + padding-left: 2px; +} +/* Couleur de fond du logo */ +story .title > img { + color: #000; } `, cssMarianne: `// Font definition -@font-face { font-family: Marianne; font-style: normal; font-weight: 300; src: url(./fonts/Marianne-Light.woff2) format("woff2"),url(./fonts/Marianne-Light.woff) format("woff") } -@font-face { font-family: Marianne; font-style: italic; font-weight: 300; src: url(./fonts/Marianne-Light_Italic.woff2) format("woff2"),url(./fonts/Marianne-Light_Italic.woff) format("woff") } -@font-face { font-family: Marianne; font-style: normal; font-weight: 400; src: url(./fonts/Marianne-Regular.woff2) format("woff2"),url(./fonts/Marianne-Regular.woff) format("woff") } -@font-face { font-family: Marianne; font-style: italic; font-weight: 400; src: url(./fonts/Marianne-Regular_Italic.woff2) format("woff2"),url(./fonts/Marianne-Regular_Italic.woff) format("woff") } -@font-face { font-family: Marianne; font-style: normal; font-weight: 500; src: url(./fonts/Marianne-Medium.woff2) format("woff2"),url(./fonts/Marianne-Medium.woff) format("woff") } -@font-face { font-family: Marianne; font-style: italic; font-weight: 500; src: url(./fonts/Marianne-Medium_Italic.woff2) format("woff2"),url(./fonts/Marianne-Medium_Italic.woff) format("woff") } -@font-face { font-family: Marianne; font-style: normal; font-weight: 700; src: url(./fonts/Marianne-Bold.woff2) format("woff2"),url(./fonts/Marianne-Bold.woff) format("woff") } -@font-face { font-family: Marianne; font-style: italic; font-weight: 700; src: url(./fonts/Marianne-Bold_Italic.woff2) format("woff2"),url(./fonts/Marianne-Bold_Italic.woff) format("woff") } - -font-family: Marianne; -` +@font-face { font-family: Marianne; font-style: normal; font-weight: 300; src: url(https://ignf-ma-carte.github.io/mcviewer/fonts/Marianne-Light.woff2) format("woff2"),url(https://ignf-ma-carte.github.io/mcviewer/fonts/Marianne-Light.woff) format("woff") } +@font-face { font-family: Marianne; font-style: italic; font-weight: 300; src: url(https://ignf-ma-carte.github.io/mcviewer/fonts/Marianne-Light_Italic.woff2) format("woff2"),url(https://ignf-ma-carte.github.io/mcviewer/fonts/Marianne-Light_Italic.woff) format("woff") } +@font-face { font-family: Marianne; font-style: normal; font-weight: 400; src: url(https://ignf-ma-carte.github.io/mcviewer/fonts/Marianne-Regular.woff2) format("woff2"),url(https://ignf-ma-carte.github.io/mcviewer/fonts/Marianne-Regular.woff) format("woff") } +@font-face { font-family: Marianne; font-style: italic; font-weight: 400; src: url(https://ignf-ma-carte.github.io/mcviewer/fonts/Marianne-Regular_Italic.woff2) format("woff2"),url(https://ignf-ma-carte.github.io/mcviewer/fonts/Marianne-Regular_Italic.woff) format("woff") } +@font-face { font-family: Marianne; font-style: normal; font-weight: 500; src: url(https://ignf-ma-carte.github.io/mcviewer/fonts/Marianne-Medium.woff2) format("woff2"),url(https://ignf-ma-carte.github.io/mcviewer/fonts/Marianne-Medium.woff) format("woff") } +@font-face { font-family: Marianne; font-style: italic; font-weight: 500; src: url(https://ignf-ma-carte.github.io/mcviewer/fonts/Marianne-Medium_Italic.woff2) format("woff2"),url(https://ignf-ma-carte.github.io/mcviewer/fonts/Marianne-Medium_Italic.woff) format("woff") } +@font-face { font-family: Marianne; font-style: normal; font-weight: 700; src: url(https://ignf-ma-carte.github.io/mcviewer/fonts/Marianne-Bold.woff2) format("woff2"),url(https://ignf-ma-carte.github.io/mcviewer/fonts/Marianne-Bold.woff) format("woff") } +@font-face { font-family: Marianne; font-style: italic; font-weight: 700; src: url(https://ignf-ma-carte.github.io/mcviewer/fonts/Marianne-Bold_Italic.woff2) format("woff2"),url(https://ignf-ma-carte.github.io/mcviewer/fonts/Marianne-Bold_Italic.woff) format("woff") } + +body { + font-family: Marianne; +} +`, +cssRoundButton: `/* Boutons ronds */ +story .ol-control, +story .ol-control button { + border-radius: 1em; +}` }); /* Ajout onglet au Menu */ @@ -183,7 +195,7 @@ ongletMEF.querySelector('[data-attr="css"] button').addEventListener('click', () helpData(content); // Story value content.querySelector('.css').value = story.get('css') || ''; - // Exmaples + // Examples content.querySelectorAll('select option').forEach(o => { o.value = _T(o.value) }) @@ -192,6 +204,19 @@ ongletMEF.querySelector('[data-attr="css"] button').addEventListener('click', () // reset e.target.value = "" }) + // Prevent tab + content.querySelector('textarea').addEventListener('keydown', e => { + if (e.keyCode == 9) { + const start = e.target.selectionStart; + const end = e.target.selectionEnd; + // set textarea value to: text before caret + tab + text after caret + e.target.value = e.target.value.substring(0, start) + '\t' + e.target.value.substring(end); + // put caret at right position again + e.target.selectionStart = e.target.selectionEnd = start + 1; + + e.preventDefault(); + } + }) })