diff --git a/main.js b/main.js
index db46ae0f19e0d28528b5789600b2ee8789fcf719..b3482feed0b3c8b122fb61d38a94c01862b33051 100644
--- a/main.js
+++ b/main.js
@@ -54,7 +54,11 @@ function setAutocompleteParameters() {
* Load the editor and add css
*/
function loadEditor() {
- editor = ace.edit("editor");
+ editor = ace.edit("editor", {
+ autoScrollEditorIntoView: true,
+ maxLines: 40,
+ minLines: 2
+ });
editor.setTheme("ace/theme/tomorrow_night_blue");
editor.session.setMode("ace/mode/css");
editor.getSession().setUseWorker(false); // Disable syntax checking, not working in chrome extension V3
@@ -70,7 +74,7 @@ function loadEditor() {
});
setAutocompleteParameters();
editor.getSession().on('change', function () {
- updateCss();
+ updateCss();
});
}
@@ -154,8 +158,8 @@ $(document).on('input', '#loopList span', function () {
});
});
-$(document).on('click', '#doc', function(){
- chrome.tabs.create({'url': "/README.html" } );
+$(document).on('click', '#doc', function () {
+ chrome.tabs.create({ 'url': "/README.html" });
});
var allParameters;
@@ -458,7 +462,7 @@ $('#upload').on('change', function () {
* Function trigger when new message received.
* @param {type, data} message parameters
*/
- function onMessage({ type, data }) {
+function onMessage({ type, data }) {
console.log('onMessage', type, data);
switch (type) {
case 'updateUi': {
@@ -500,4 +504,10 @@ $(document).tooltip({
container: 'body',
placement: 'top left',
trigger: 'hover'
+});
+$(function () {
+ $("#accordion").accordion({
+ collapsible: true,
+ heightStyle: "content"
+ });
});
\ No newline at end of file
diff --git a/popup.html b/popup.html
index bd412b69ad6cc0c0e9340569222fdbd3a4fb7229..6bbefe7aed18e2a1049171d85b5a18480460c0aa 100644
--- a/popup.html
+++ b/popup.html
@@ -24,8 +24,9 @@
<div class="audioI"></div>
</div>
</div>
- <details open>
- <summary>
+
+ <div id="accordion">
+ <h3>
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-code"
@@ -44,11 +45,13 @@
<line x1="14" y1="4" x2="10" y2="20"></line>
</svg>
CSSLSD
- </summary>
- <div id="editor"></div>
- </details>
- <details open>
- <summary>
+ </h3>
+ <div>
+ <div id="editor"></div>
+
+ </div>
+
+ <h3>
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-variable"
@@ -68,51 +71,52 @@
<path d="M8 16c1.5 0 3 -2 4 -3.5s2.5 -3.5 4 -3.5"></path>
</svg>
PARAMETRES
- </summary>
- <table>
- <thead>
- <tr>
- <th>
- <a title="Glisser-deposer, dupliquer et supprimer la ligne."
- >Actions</a
- >
- </th>
- <th>
- <a
- title="Nom de votre parametre a utiliser avec des crochets dans le code CSS-LSD"
- >Nom</a
- >
- </th>
- <th>
- <a
- title="0:1 (plage decimale) #000:#fff (plage hexadecimale) A;B;C (liste)"
- >Type</a
- >
- </th>
- <th>
- <a title="r (aleatoire) d (decimal) i:1 (increment de 1)"
- >Options</a
- >
- </th>
- <th>
- <a
- title="cc:1 (control change 1) note:1 (note 1) pb (pitch bend)"
- >MIDI</a
- >
- </th>
- <th>
- <a
- title="loud (volume) low|lomi|mid|mihi|hi (puissance plage de frequence) onset:E (note de type E) attack (attaque d'un son)"
- >Audio</a
- >
- </th>
- </tr>
- </thead>
- <tbody id="parameters"></tbody>
- </table>
- </details>
- <details>
- <summary>
+ </h3>
+ <div>
+ <table>
+ <thead>
+ <tr>
+ <th>
+ <a title="Glisser-deposer, dupliquer et supprimer la ligne."
+ >Actions</a
+ >
+ </th>
+ <th>
+ <a
+ title="Nom de votre parametre a utiliser avec des crochets dans le code CSS-LSD"
+ >Nom</a
+ >
+ </th>
+ <th>
+ <a
+ title="0:1 (plage decimale) #000:#fff (plage hexadecimale) A;B;C (liste)"
+ >Type</a
+ >
+ </th>
+ <th>
+ <a
+ title="r (aleatoire) d (decimal) i:1 (increment de 1)"
+ >Options</a
+ >
+ </th>
+ <th>
+ <a
+ title="cc:1 (control change 1) note:1 (note 1) pb (pitch bend)"
+ >MIDI</a
+ >
+ </th>
+ <th>
+ <a
+ title="loud (volume) low|lomi|mid|mihi|hi (puissance plage de frequence) onset:E (note de type E) attack (attaque d'un son)"
+ >Audio</a
+ >
+ </th>
+ </tr>
+ </thead>
+ <tbody id="parameters"></tbody>
+ </table>
+ </div>
+ <h3>
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-repeat"
@@ -130,22 +134,23 @@
<path d="M20 12v3a3 3 0 0 1 -3 3h-13m3 3l-3 -3l3 -3"></path>
</svg>
BOUCLES
- </summary>
- <table width="100%">
- <thead>
- <tr>
- <th>Nom</th>
- <th>Temps</th>
- <th>Changes</th>
- <th>Actions</th>
- <th></th>
- </tr>
- </thead>
- <tbody id="loopList"></tbody>
- </table>
- </details>
- <details>
- <summary>
+ </h3>
+ <div>
+ <table width="100%">
+ <thead>
+ <tr>
+ <th>Nom</th>
+ <th>Temps</th>
+ <th>Changes</th>
+ <th>Actions</th>
+ <th></th>
+ </tr>
+ </thead>
+ <tbody id="loopList"></tbody>
+ </table>
+ </div>
+
+ <h3>
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-file-text"
@@ -168,16 +173,43 @@
<line x1="9" y1="17" x2="15" y2="17"></line>
</svg>
CHARGER / TELECHARGER
- </summary>
- <table>
- <tr>
- <td>
- <input id="upload" type="file" />
- <label for="upload">
+ </h3>
+ <div>
+ <table>
+ <tr>
+ <td>
+ <input id="upload" type="file" />
+ <label for="upload">
+ <svg
+ title="Chargez votre fichier .json"
+ xmlns="http://www.w3.org/2000/svg"
+ class="icon icon-tabler icon-tabler-file-upload"
+ width="24"
+ height="24"
+ viewBox="0 0 24 24"
+ stroke-width="1.5"
+ stroke="currentColor"
+ fill="none"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ >
+ <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+ <path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
+ <path
+ d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"
+ ></path>
+ <line x1="12" y1="11" x2="12" y2="17"></line>
+ <polyline points="9 14 12 11 15 14"></polyline>
+ </svg>
+ </label>
+ <span>Charger</span>
+ </td>
+ <td>
<svg
- title="Chargez votre fichier .json"
+ title="Telechargez votre fichier .json"
+ id="download"
xmlns="http://www.w3.org/2000/svg"
- class="icon icon-tabler icon-tabler-file-upload"
+ class="icon icon-tabler icon-tabler-file-download"
width="24"
height="24"
viewBox="0 0 24 24"
@@ -193,39 +225,15 @@
d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"
></path>
<line x1="12" y1="11" x2="12" y2="17"></line>
- <polyline points="9 14 12 11 15 14"></polyline>
+ <polyline points="9 14 12 17 15 14"></polyline>
</svg>
- </label>
- <span>Charger</span>
- </td>
- <td>
- <svg
- title="Telechargez votre fichier .json"
- id="download"
- xmlns="http://www.w3.org/2000/svg"
- class="icon icon-tabler icon-tabler-file-download"
- width="24"
- height="24"
- viewBox="0 0 24 24"
- stroke-width="1.5"
- stroke="currentColor"
- fill="none"
- stroke-linecap="round"
- stroke-linejoin="round"
- >
- <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
- <path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
- <path
- d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"
- ></path>
- <line x1="12" y1="11" x2="12" y2="17"></line>
- <polyline points="9 14 12 17 15 14"></polyline>
- </svg>
- <span>Telecharger</span>
- </td>
- </tr>
- </table>
- </details>
+ <span>Telecharger</span>
+ </td>
+ </tr>
+ </table>
+ </div>
+ </div>
+
<p style="text-align: center">
© 2022 - Universite de Lille - <a id="doc">Voir la documentation</a>
</p>
diff --git a/style.css b/style.css
index cd3fac4b187d39ccacaed61a664140fa1b95070b..ec1777b4cd3a675d650e0cadc9cba53e71aac493 100644
--- a/style.css
+++ b/style.css
@@ -165,7 +165,9 @@ details[open] > *:not(summary) {
transform: var(--details-translate, translateY(-0.5em));
}
}
-summary {
+h3 {
+ border-top: rgba(255, 255, 255, 0.3) solid 1px;
+ padding: 6px;
font-size: 17px;
cursor: pointer;
}
@@ -199,16 +201,18 @@ tbody > tr {
.icon-tabler-minus {
cursor: pointer;
}
-
-body::-webkit-scrollbar {
- width: 6px;
+.ace_scrollbar {
+ right:4px;
+}
+body::-webkit-scrollbar, .ace_scrollbar::-webkit-scrollbar {
+ width: 10px;
}
-body::-webkit-scrollbar-track {
+body::-webkit-scrollbar-track, .ace_scrollbar::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
-body::-webkit-scrollbar-thumb {
+body::-webkit-scrollbar-thumb, .ace_scrollbar::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.3);
border-radius: 10px;
}