4 Commits c3dd997d3c ... 59a0a6ef0e

Author SHA1 Message Date
  Marcelo Vilas Boas Correa Filho 59a0a6ef0e style: formatted the index file and fixed accessible ui nav bar 3 years ago
  Marcelo Vilas Boas Correa Filho b6d0fa38ba style: started styling properly the variable creation instances 3 years ago
  Marcelo Vilas Boas Correa Filho a8c0f9eee4 feat: added some border radius and changed the color for a more pleasure visualization 3 years ago
  Marcelo Vilas Boas Correa Filho 2d6072656c feat: increased border radius for buttons 3 years ago

+ 1 - 1
css/accessible/bootstrap/bootstrap.css

@@ -2527,7 +2527,7 @@ textarea.form-control {
   padding: 0.375rem 0.75rem;
   font-size: 1rem;
   line-height: 1.5;
-  border-radius: 0.25rem;
+  border-radius: 10px;
   transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
 

+ 12 - 9
css/accessible/design.css

@@ -1,7 +1,8 @@
 .container {
-    background-color: #191970;
+    background-color: #3d8bd4;
     width: 1020px;
     padding: 15px;
+    border-radius: 10px;
 }
 
 header {
@@ -35,13 +36,14 @@ fieldset {
     position: relative;
     display: block;
     margin-top: 15px;
+    border-radius: 10px;
 }
 
 legend {
     width: 200px;
     border: 3px solid silver;
     border-radius: 10px;
-    background-color: #191970;
+    background-color: #3d8bd4;
     margin-left: 50px;
 }
 
@@ -52,13 +54,6 @@ legend h1 {
     padding-left: 10px;
 }
 
-#botoes {
-    display: inline;
-    position: relative;
-    top: 0px;
-    left: 700px;
-}
-
 footer {
     width: 97%;
     color: #A7C0DC;
@@ -72,4 +67,12 @@ footer {
 footer h1 {
     color: #A7C0DC;
     font-size: 20px;
+}
+
+.acessible-terminal {
+    border-radius: 10px;
+}
+
+.acessible-terminal .bash-title {
+    border-radius: 10px 10px 0 0;
 }

+ 22 - 10
js/accessibleUI/modules/variables/variables-schemes.js

@@ -81,16 +81,28 @@ export function htmlVariableScheme() {
   }
 
   return `<li id="variable<variableId>Li">
-        <form id="variable<variableId>Form">
-            <select name="tipo" title="tipo da variável" id="variable<variableId>Type" variable-id="<variableId>">
-                ${variableTypesHtml}
-            </select>
-            <input type="text" title="nome da variável" id="variable<variableId>Name" value="<variableName>" variable-id="<variableId>">
-            <label for="variable<variableId>Value" tabindex="0" tile="recebe">recebe</label>
-            <input type="${variableTypes[0].htmlType}" id ="variable<variableId>Value" title="valor da variável" value="0" variable-id="<variableId>">
-            <button id="variable<variableId>Delete" type="button" class="btn btn-danger">Excluir</button>
-        </form> 
-    </li>`;
+            <form id="variable<variableId>Form">
+              <div class="row">
+                <div class="col-2">
+                  <select name="tipo" class="form-control" title="tipo da variável" id="variable<variableId>Type" variable-id="<variableId>">
+                      ${variableTypesHtml}
+                  </select>
+                </div>
+                <div class="col-2">
+                  <input type="text" class="form-control" title="nome da variável" id="variable<variableId>Name" value="<variableName>" variable-id="<variableId>">
+                </div>
+                <div class="col-1 text-center my-auto" style="margin-bottom: 0px !important">
+                  <label for="variable<variableId>Value" tabindex="0" tile="recebe">recebe</label>
+                </div>
+                <div class="col-2">
+                  <input type="${variableTypes[0].htmlType}" class="form-control" id ="variable<variableId>Value" title="valor da variável" value="0" variable-id="<variableId>">
+                </div>
+                <div class="col-1">
+                  <button id="variable<variableId>Delete" type="button" class="btn btn-danger">Excluir</button>
+                </div>
+              </div>
+            </form> 
+          </li>`;
 }
 
 // *********************************************************************************

+ 220 - 216
templates/index.html

@@ -18,273 +18,277 @@
     <script src="js/iassign-integration-functions.js"></script>
 
     <!-- Accessible UI CSS -->
-    <link rel="stylesheet" href="css/accessible/style.css"/>
-    <link rel="stylesheet" href="css/accessible/bootstrap/bootstrap.css"/>
-    <link rel="stylesheet" href="css/accessible/bootstrap/bootstrap-grid.css"/>
-    <link rel="stylesheet" href="css/accessible/bootstrap/bootstrap-reboot.css"/>
-    <link rel="stylesheet" href="css/accessible/design.css"/>
-    <link rel="stylesheet" href="css/accessible/forms_var_comand.css"/>
+    <link rel="stylesheet" href="css/accessible/style.css" />
+    <link rel="stylesheet" href="css/accessible/bootstrap/bootstrap.css" />
+    <link rel="stylesheet" href="css/accessible/bootstrap/bootstrap-grid.css" />
+    <link rel="stylesheet" href="css/accessible/bootstrap/bootstrap-reboot.css" />
+    <link rel="stylesheet" href="css/accessible/design.css" />
+    <link rel="stylesheet" href="css/accessible/forms_var_comand.css" />
 </head>
+
 <body>
-<!-- Change UI -->
-<div class="row">
-    <div class="col-12 text-center">
-        <div class="btn-group">
-            <button type="button" id="enableVisualUI">Interface interativa</button>
-            <button type="button" id="enableAccessibleUI">Interface acessível</button>
+    <!-- Change UI -->
+    <div class="row">
+        <div class="col-12 text-center">
+            <div class="btn-group">
+                <button type="button" id="enableVisualUI">Interface interativa</button>
+                <button type="button" id="enableAccessibleUI">Interface acessível</button>
+            </div>
         </div>
     </div>
-</div>
-<!-- Change UI -->
+    <!-- Change UI -->
 
-<!-- Visual UI -->
-<div id="visualInterface">
-    <div class="ui height_100 add_accordion" id="ui_main_div">
+    <!-- Visual UI -->
+    <div id="visualInterface">
+        <div class="ui height_100 add_accordion" id="ui_main_div">
 
-        <div class="title default_visual_title">
-            <i class="dropdown icon"></i>
-        </div>
+            <div class="title default_visual_title">
+                <i class="dropdown icon"></i>
+            </div>
 
-        <div class="content height_100">
+            <div class="content height_100">
 
-            <div class="ui raised container segment div_to_body">
+                <div class="ui raised container segment div_to_body">
 
-                <div class="ui container main_title only_in_frame">
-                    <h2>iVProg</h2>
-                </div>
+                    <div class="ui container main_title only_in_frame">
+                        <h2>iVProg</h2>
+                    </div>
 
-                <div class="ui icon menu center aligned container" style="width: 438px; margin-top: -20px;">
-                    <a class="item active visual_coding_button">
-                        <i class="window maximize outline icon"></i>
-                    </a>
-                    <a class="item textual_coding_button">
-                        <i class="code icon"></i>
-                    </a>
-                    <a class="item upload_file_button disabled">
-                        <i class="upload icon"></i>
-                    </a>
-                    <a class="item download_file_button disabled">
-                        <i class="download icon"></i>
-                    </a>
-                    <a class="item undo_button disabled">
-                        <i class="undo icon"></i>
-                    </a>
-                    <a class="item redo_button disabled">
-                        <i class="redo icon"></i>
-                    </a>
-                    <a id="run_button" class="item run_button">
-                        <i class="play icon"></i>
-                    </a>
-                    <a id="stop_button" class="item stop_button" style="display: none">
-                        <i class="stop icon"></i>
-                    </a>
-                    <a class="item assessment assessment_button">
-                        <i class="check icon"></i>
-                    </a>
-                    <!--<a class="item expand_button">
+                    <div class="ui icon menu center aligned container" style="width: 438px; margin-top: -20px;">
+                        <a class="item active visual_coding_button">
+                            <i class="window maximize outline icon"></i>
+                        </a>
+                        <a class="item textual_coding_button">
+                            <i class="code icon"></i>
+                        </a>
+                        <a class="item upload_file_button disabled">
+                            <i class="upload icon"></i>
+                        </a>
+                        <a class="item download_file_button disabled">
+                            <i class="download icon"></i>
+                        </a>
+                        <a class="item undo_button disabled">
+                            <i class="undo icon"></i>
+                        </a>
+                        <a class="item redo_button disabled">
+                            <i class="redo icon"></i>
+                        </a>
+                        <a id="run_button" class="item run_button">
+                            <i class="play icon"></i>
+                        </a>
+                        <a id="stop_button" class="item stop_button" style="display: none">
+                            <i class="stop icon"></i>
+                        </a>
+                        <a class="item assessment assessment_button">
+                            <i class="check icon"></i>
+                        </a>
+                        <!--<a class="item expand_button">
                       <i class="expand arrows alternate icon"></i>
                     </a>-->
-                    <a class="item help_button">
-                        <i class="help icon"></i>
-                    </a>
-                </div>
+                        <a class="item help_button">
+                            <i class="help icon"></i>
+                        </a>
+                    </div>
 
-                <div class="ui one column container segment ivprog_visual_panel loading">
+                    <div class="ui one column container segment ivprog_visual_panel loading">
 
-                    <div class="global_var">
+                        <div class="global_var">
 
 
-                        <div class="ui icon button add-globalVar-button add_global_button purple">
+                            <div class="ui icon button add-globalVar-button add_global_button purple">
 
-                            <i class="icons">
-                                <i class="icon superscript"
-                                   style="margin-top: -2px;margin-bottom: 2px;margin-left: 1px;margin-right: 1px; font-size: 18px;"></i>
-                                <i class="corner add icon inverted"
-                                   style="font-size: 10px;padding-top: 5px;padding-left: 7px;"></i>
-                            </i>
+                                <i class="icons">
+                                    <i class="icon superscript"
+                                        style="margin-top: -2px;margin-bottom: 2px;margin-left: 1px;margin-right: 1px; font-size: 18px;"></i>
+                                    <i class="corner add icon inverted"
+                                        style="font-size: 10px;padding-top: 5px;padding-left: 7px;"></i>
+                                </i>
 
-                        </div>
+                            </div>
 
-                        <div class="list_globals" id="listGlobalsHandle"></div>
+                            <div class="list_globals" id="listGlobalsHandle"></div>
 
-                    </div>
+                        </div>
 
-                    <div class="all_functions list-group" id="listWithHandle">
+                        <div class="all_functions list-group" id="listWithHandle">
 
-                    </div>
+                        </div>
 
 
-                    <div class="ui teal small labeled icon button add_function_button">
-                        <data class="i18n" value="ui:btn_function">Function</data>
-                        <i class="add icon"></i>
-                    </div>
-                    <div class="program_final"></div>
+                        <div class="ui teal small labeled icon button add_function_button">
+                            <data class="i18n" value="ui:btn_function">Function</data>
+                            <i class="add icon"></i>
+                        </div>
+                        <div class="program_final"></div>
 
-                </div>
+                    </div>
 
 
-                <div class="ui one column container segment ivprog_textual_panel loading" style="display: none;">
-                    <textarea id="ivprog-text-editor" class=".ivprog_textual_code"></textarea>
-                </div>
-                <div id='ivprog-term-div' class="six column wide">
+                    <div class="ui one column container segment ivprog_textual_panel loading" style="display: none;">
+                        <textarea id="ivprog-text-editor" class=".ivprog_textual_code"></textarea>
+                    </div>
+                    <div id='ivprog-term-div' class="six column wide">
 
+                    </div>
                 </div>
             </div>
+            <div class="dimmer_content_message">
+                <h3>Aconteceu um erro ao processar a atividade. <br> Recarregue a página para tentar novamente.</h3>
+                <button class="positive ui button" onclick="window.parent.location.reload()">Recarregar</button>
+            </div>
+            <script src="js/iassign-integration-functions.js"></script>
         </div>
-        <div class="dimmer_content_message">
-            <h3>Aconteceu um erro ao processar a atividade. <br> Recarregue a página para tentar novamente.</h3>
-            <button class="positive ui button" onclick="window.parent.location.reload()">Recarregar</button>
-        </div>
-        <script src="js/iassign-integration-functions.js"></script>
-    </div>
-</div>
-<!-- Visual UI -->
-
-<!-- Accessible UI -->
-<div class="container" id="accessibleInterface" style="display: none;">
-    <!-- Header -->
-    <div class="row" role="header">
-        <!-- Title -->
-        <div class="col-3">
-            <header>
-                <h1 tabindex="0">iVProg Acessível</h1>
-            </header>
-        </div>
-        <!-- Title -->
-
-        <!-- Screen reader shortcuts -->
-        <div class="col-9">
-            <nav id="nav_ir_para_conteudo" class="nav" role="navigation">
-                <a class="nav-link" href="#inicio" title="Alt + i" accesskey="i">Ir função inicio</a>
-                <a class="nav-link" href="#terminal" title="Alt + t" accesskey="t">Ir para o terminal</a>
-            </nav>
-        </div>
-        <!-- Screen reader shortcuts -->
     </div>
-    <!-- Header -->
-
-    <!-- Main container -->
-    <div id="main" class="row" role="main">
-        <div class="col-12">
-            <fieldset>
-                <legend>
-                    <h1 tabindex="0" id="inicio">Função início</h1>
-                </legend>
-
-                <ol id="htmlOlCommandsVariablesVariables"></ol>
-                <ol id="htmlOlCommandsVariablesOperations"></ol>
-                <div id="botoes">
-                    <div class="dropdown btn btn-primary" id="bt_add_comand">
-                        <a class="btn btn-primary dropdown-toggle" role="button" tabindex="0" id="dropdownMenuLink"
-                           data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                            Comandos
-                        </a>
-                        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
-                            <a class="dropdown-item" href="#" id="createVariableButton">
-                                Nova Variável
-                            </a>
-                            <a class="dropdown-item" href="#" id="assignVariableButton">
-                                Atribuição e Operações
-                            </a>
+    <!-- Visual UI -->
+
+    <!-- Accessible UI -->
+    <div class="container" id="accessibleInterface" style="display: none;">
+        <!-- Header -->
+        <nav class="navbar navbar-expand-lg navbar-dark">
+            <a class="navbar-brand" tabindex="0">iVProg Acessível</a>
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav">
+                    <li class="nav-item">
+                        <a class="nav-link" href="#inicio" title="Alt + i" accesskey="i">Ir função inicio</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#terminal" title="Alt + t" accesskey="t">Ir para o terminal</a>
+                    </li>
+                </ul>
+            </div>
+        </nav>
+        <!-- Header -->
+
+        <!-- Main container -->
+        <div id="main" class="row" role="main">
+            <div class="col-12">
+                <fieldset>
+                    <legend class="p-1">
+                        <h1 tabindex="0" id="inicio">Função início</h1>
+                    </legend>
+
+                    <ol id="htmlOlCommandsVariablesVariables"></ol>
+                    <ol id="htmlOlCommandsVariablesOperations"></ol>
+                    <div class="row">
+                        <div class="col-12 p-4" style="text-align: right;">
+                            <div id="botoes" class="btn-group">
+                                <div class="dropdown btn btn-primary" id="bt_add_comand">
+                                    <a class="btn btn-primary dropdown-toggle" role="button" tabindex="0"
+                                        id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
+                                        aria-expanded="false">
+                                        Comandos
+                                    </a>
+                                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
+                                        <a class="dropdown-item" href="#" id="createVariableButton">
+                                            Nova Variável
+                                        </a>
+                                        <a class="dropdown-item" href="#" id="assignVariableButton">
+                                            Atribuição e Operações
+                                        </a>
+                                    </div>
+                                </div>
+
+                                <button class="btn btn-success" id="runCodeButton">
+                                    Executar
+                                    <i id="runCodePlayIcon" class="play icon" style="display: inline;"></i>
+                                    <i id="runCodeStopIcon" class="stop icon" style="display: none;"></i>
+                                </button>
+                            </div>
                         </div>
                     </div>
-
-                    <button class="btn btn-success" id="runCodeButton">
-                        Executar
-                        <i id="runCodePlayIcon" class="play icon" style="display: inline;"></i>
-                        <i id="runCodeStopIcon" class="stop icon" style="display: none;"></i>
-                    </button>
-                </div>
-            </fieldset>
+                </fieldset>
+            </div>
         </div>
-    </div>
-    <!-- Main container -->
+        <!-- Main container -->
 
-    <!-- Terminal -->
-    <div class="row">
-        <div class="col-12">
-            <div id="terminal" style="width: 97%; margin-left: 2%"></div>
-        </div>
-    </div>
-    <!-- Terminal -->
+        <br/>
 
-    <!-- Debug only -->
-    <div class="row">
-        <div class="col-12">
-            <h5>Código gerado para debug - Código gerado</h5>
-            <div style="width: 97%; margin-left: 2%; background-color: wheat; color: black;">
-                <code id="generatedCode">
+        <!-- Terminal -->
+        <div class="row">
+            <div class="col-12">
+                <div id="terminal" class="acessible-terminal" style="width: 97%; margin-left: 2%"></div>
+            </div>
+        </div>
+        <!-- Terminal -->
+
+        <!-- Debug only -->
+        <div class="row">
+            <div class="col-12">
+                <h5>Código gerado para debug - Código gerado</h5>
+                <div style="width: 97%; margin-left: 2%; background-color: wheat; color: black;">
+                    <code id="generatedCode">
                 </code>
+                </div>
             </div>
         </div>
+        <!-- Debug only -->
     </div>
-    <!-- Debug only -->
-</div>
-<!-- Accessible UI -->
+    <!-- Accessible UI -->
 
-<!-- Accessible UI JS -->
+    <!-- Accessible UI JS -->
 </body>
 <script>
-  var mouseX;
-  var mouseY;
-  $(document).ready(() => {
-    var $buttons = $('.ivprog_format .button'),
-      handler = {
-        activate: function () {
-          $(this)
-            .addClass('active')
-            .siblings()
-            .removeClass('active');
+    var mouseX;
+    var mouseY;
+    $(document).ready(() => {
+        var $buttons = $('.ivprog_format .button'),
+            handler = {
+                activate: function () {
+                    $(this)
+                        .addClass('active')
+                        .siblings()
+                        .removeClass('active');
+                }
+            };
+
+        $buttons.on('click', handler.activate);
+        $('.ivprog_format_info').popup(
+            {
+                popup: $('.custom.popup'),
+                on: 'click'
+            });
+
+        $(".data_types_dropdown").dropdown();
+
+        $('.ui.dropdown').dropdown();
+
+        $('.ivprog_visual_panel').removeClass("loading");
+
+        $(document).mousemove(function (e) {
+            var parentOffset = $('.ivprog_visual_panel').offset();
+            ;
+            mouseX = e.pageX - parentOffset.left + 300;
+            mouseY = e.pageY - parentOffset.top + 100;
+            /*$('.created_element').css('top', mouseY);
+            $('.created_element').css('left', mouseX);*/
+        });
+        ivprogCore.LocalizedStrings.updateTagText();
+        ivprogCore.CodeEditor.initTextEditor("ivprog-text-editor");
+        iassingIntegration();
+        if (iLMparameters.iLM_PARAM_TeacherAutoEval == null) {
+            ivprogCore.initVisualUI();
         }
-      };
-
-    $buttons.on('click', handler.activate);
-    $('.ivprog_format_info').popup(
-      {
-        popup: $('.custom.popup'),
-        on: 'click'
-      });
-
-    $(".data_types_dropdown").dropdown();
 
-    $('.ui.dropdown').dropdown();
-
-    $('.ivprog_visual_panel').removeClass("loading");
-
-    $(document).mousemove(function (e) {
-      var parentOffset = $('.ivprog_visual_panel').offset();
-      ;
-      mouseX = e.pageX - parentOffset.left + 300;
-      mouseY = e.pageY - parentOffset.top + 100;
-      /*$('.created_element').css('top', mouseY);
-      $('.created_element').css('left', mouseX);*/
+        ivprogCore.initAccessibleUI();
     });
-    ivprogCore.LocalizedStrings.updateTagText();
-    ivprogCore.CodeEditor.initTextEditor("ivprog-text-editor");
-    iassingIntegration();
-    if (iLMparameters.iLM_PARAM_TeacherAutoEval == null) {
-      ivprogCore.initVisualUI();
-    }
-
-    ivprogCore.initAccessibleUI();
-  });
 </script>
 
 <!-- Accessible JS -->
 <script src="js/accessible/bootstrap/bootstrap.bundle.js"></script>
 <script src="js/accessible/bootstrap/bootstrap.js"></script>
 <script>
-  const visualInterface = document.getElementById('visualInterface');
-  const accessibleInterface = document.getElementById('accessibleInterface');
-
-  document.getElementById('enableVisualUI').addEventListener('click', (event) => {
-    visualInterface.style.display = 'block';
-    accessibleInterface.style.display = 'none';
-  });
-
-  document.getElementById('enableAccessibleUI').addEventListener('click', (event) => {
-    visualInterface.style.display = 'none';
-    accessibleInterface.style.display = 'block';
-  });
+    const visualInterface = document.getElementById('visualInterface');
+    const accessibleInterface = document.getElementById('accessibleInterface');
+
+    document.getElementById('enableVisualUI').addEventListener('click', (event) => {
+        visualInterface.style.display = 'block';
+        accessibleInterface.style.display = 'none';
+    });
+
+    document.getElementById('enableAccessibleUI').addEventListener('click', (event) => {
+        visualInterface.style.display = 'none';
+        accessibleInterface.style.display = 'block';
+    });
 </script>
-</html>
+
+</html>