feat (theme): new section theme

src/adonisjs/public/report/js/report-annotations.js

@@ -142,7 +142,7 @@ class ReportManager {
     const cases = await this._requestCases()
 
     if (cases != null) {
-      let table = '"user id","annotation id","oranization level","global score","student year",' +
+      let table = '"user id","annotation id","organization level","global score","student year",' +
         '"used categories","right","right (inferred)","total ideas","right encapsulated",' +
         '"right encapsulated (inferred)","wrong","wrong encapsulated","coverage score",' +
         '"accuracy score","accuracy score (inferred)","encapsulated score","self order score",' +

src/adonisjs/public/templates/sections/basic-dynamic.md

@@ -0,0 +1,5 @@
+# Presentation (cell_mutant_sliders) #
+
+___ Template ___
+
+* template: sections/basic

src/adonisjs/public/templates/sections/basic-static.md

@@ -0,0 +1,8 @@
+___ Flow ___
+
+* Sequential:
+  * _sequential_
+
+___ Data ___
+
+* theme: sections(blue)

src/adonisjs/public/themes/sections/atividade.html

@@ -0,0 +1,33 @@
+<div style="color:white;background-color:#009be5">
+  <br>
+  <div class="d-flex"><div class="col-6" style="font-size:32px;font-weight:400">Seção 1</div></div>
+  <br>
+  <div class="d-flex">
+    <div class="col-1" style="font-weight:200">Resumo</div>
+    <div class="col-1" style="font-weight:200">Pré-teste</div>
+    <div class="col-1" style="font-weight:200">Vídeos</div>
+    <div class="col-1" style="font-weight:900;text-decoration:underline">Atividade</div>
+    <div class="col-1" style="font-weight:200">Pós-teste</div>
+    <div class="col-1" style="font-weight:200">Conclusão</div>
+  </div>
+  <br>
+</div>
+<div class="styt-main-frame">
+  <br>
+  <div class="styt-main">
+     <div class="styt-main-text">
+        <dcc-styler xstyle="out" targeted="action">
+           {knot}
+        </dcc-styler>
+     </div>
+  </div>
+  <br>
+</div>
+<div class="d-flex">
+  <span id="action-1-wrapper" class="styt-button-frame">
+    <span id="action-1" class="styt-button"></span>
+  </span>
+  <span id="action-2-wrapper" class="styt-button-frame" style="display:none">
+    <span id="action-2" class="styt-button"></span>
+  </span>
+</div>

src/adonisjs/public/themes/sections/conclusao.html

@@ -0,0 +1,33 @@
+<div style="color:white;background-color:#009be5">
+  <br>
+  <div class="d-flex"><div class="col-6" style="font-size:32px;font-weight:400">Seção 1</div></div>
+  <br>
+  <div class="d-flex">
+    <div class="col-1" style="font-weight:200">Resumo</div>
+    <div class="col-1" style="font-weight:200">Pré-teste</div>
+    <div class="col-1" style="font-weight:200">Vídeos</div>
+    <div class="col-1" style="font-weight:200">Atividade</div>
+    <div class="col-1" style="font-weight:200">Pós-teste</div>
+    <div class="col-1" style="font-weight:900;text-decoration:underline">Conclusão</div>
+  </div>
+  <br>
+</div>
+<div class="styt-main-frame">
+  <br>
+  <div class="styt-main">
+     <div class="styt-main-text">
+        <dcc-styler xstyle="out" targeted="action">
+           {knot}
+        </dcc-styler>
+     </div>
+  </div>
+  <br>
+</div>
+<div class="d-flex">
+  <span id="action-1-wrapper" class="styt-button-frame">
+    <span id="action-1" class="styt-button"></span>
+  </span>
+  <span id="action-2-wrapper" class="styt-button-frame" style="display:none">
+    <span id="action-2" class="styt-button"></span>
+  </span>
+</div>

src/adonisjs/public/themes/sections/css/blue/theme.css

@@ -0,0 +1,9 @@
+@charset "UTF-8";
+
+.styt-button, .styt-button-option {
+   background-color: #234a98;
+}
+
+.dcc-button-theme {
+   background-color: #234a98;
+}

src/adonisjs/public/themes/sections/css/dcc-annotation.css

@@ -0,0 +1,7 @@
+@charset "UTF-8";
+
+/* Annotation DCC */
+
+.dcc-text-annotation {
+   background-color: #ffaa0078;
+}

src/adonisjs/public/themes/sections/css/dcc-context-menu.css

@@ -0,0 +1,16 @@
+.dcc-context-menu {
+   position: absolute;
+   background-color: white;
+   border-radius: 1px;
+   box-shadow: 0px 0px 0px 5px rgba(0,0,0,0.5);
+   margin: 5px;
+}
+
+.dcc-context-menu-item {
+   margin: 2px;
+}
+
+.dcc-context-menu-item:hover {
+   cursor: pointer;
+   background-color: gray;
+}

src/adonisjs/public/themes/sections/css/dcc-input-table.css

@@ -0,0 +1,17 @@
+@charset "UTF-8";
+
+/* Input Table DCC */
+
+.dcc-input-table-theme table {
+   border: 1px solid darkgray;
+}
+
+.dcc-input-table-theme th {
+   border: 1px solid darkgray;
+   background-color: lightgray;
+   font-weight: bold;
+}
+
+.dcc-input-table-theme td {
+   border: 1px solid darkgray;
+}

src/adonisjs/public/themes/sections/css/dcc-input-typed.css

@@ -0,0 +1,5 @@
+@charset "UTF-8";
+
+.dcc-input-typed-theme {
+   font-size: 30px;
+}

src/adonisjs/public/themes/sections/css/dcc-state-select.css

@@ -0,0 +1,49 @@
+@charset "UTF-8";
+
+/* Selector DCC */
+
+.dcc-state-select-theme:hover {
+   cursor: pointer;
+}
+
+.dcc-state-select-0-theme {
+   background-color: #d3d3d385;
+}
+
+.dcc-state-select-1-theme {
+   background-color: #90ee9078;
+}
+
+.dcc-state-select-2-theme {
+   background-color: #87cefac9;
+}
+
+.dcc-state-select-3-theme {
+   background-color: #ffff77;
+}
+
+.dcc-state-select-4-theme {
+   background-color: #f0808078;
+}
+
+/* Selector DCC - Evidence */
+
+.dcc-state-select-undefined {
+   background-color: #d3d3d385;
+}
+
+.dcc-state-select-positive-plus {
+   background-color: #90ee9078;
+}
+
+.dcc-state-select-positive {
+   background-color: #87cefac9;
+}
+
+.dcc-state-select-neutral {
+   background-color: #ffff77;
+}
+
+.dcc-state-select-negative {
+   background-color: #f0808078;
+}

src/adonisjs/public/themes/sections/css/default/theme.css

@@ -0,0 +1,9 @@
+@charset "UTF-8";
+
+.styt-button, .styt-button-option {
+   background-color: gray;
+}
+
+.dcc-button-theme {
+   background-color: gray;
+}

src/adonisjs/public/themes/sections/css/presentation.css

@@ -0,0 +1,33 @@
+@charset "UTF-8";
+
+/* Player Panel */
+.sty-player-panel {
+   flex: 10%;
+   max-height: 100%;
+   display: flex;
+   flex-direction: column;
+   overflow: hidden;
+}
+
+.player-item {
+   max-width: 100%;
+}
+
+/* Knot Rendering */
+
+h1 {
+   text-align: center;
+}
+
+.alert-message {
+   font-size: 20pt;
+   color: blue;
+   font-weight: bold;
+}
+
+.central-buttons {
+   display: flex;
+   flex-direction: row;
+   max-width: 100%;
+   justify-content: center;
+}