Trabalhando no visual

Release.key

@@ -0,0 +1,51 @@
+-----BEGIN PGP PUBLIC KEY BLOCK-----
+
+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
+=53Sn
+-----END PGP PUBLIC KEY BLOCK-----

css/ivprog-visual-1.0.css

@@ -11,6 +11,7 @@ body {
   padding: 10px;
   padding-left: 6px;
   padding-right: 6px;
+  background-color: #1279c6;
 }
 
 .ivprog_visual_panel {
@@ -179,13 +180,14 @@ body {
 .ui.segment.ivprog_visual_panel {
 	padding: 3px;
 	margin-top: -5px;
-	background: #edf4ff;
+	background: white;
 }
 
 .ui.segment.function_div {
 	padding: 5px;
 	margin: 0;
 	margin-bottom: 5px;
+	background-color: #bddbff;
 }
 
 .ui.button.add_function_button,
@@ -475,7 +477,7 @@ div.function_name_div_updated:active,
     font-size: 150%;
 }
 
-.red.icon.times.remove_global,
+.yellow.icon.times.remove_global,
 .red.icon.times.remove_variable,
 .red.icon.times.remove_parameter {
 	float: right;
@@ -484,7 +486,7 @@ div.function_name_div_updated:active,
     opacity: 0;
 }
 
-.global_container:hover > .red.icon.times.remove_global, .variable_container:hover > .red.icon.times.remove_variable,
+.global_container:hover > .yellow.icon.times.remove_global, .variable_container:hover > .red.icon.times.remove_variable,
 .function_name_parameter:hover > .red.icon.times.remove_parameter {
 	opacity: 1;
 }
@@ -494,8 +496,9 @@ div.function_name_div_updated:active,
 }
 
 .ui.icon.button.add-globalVar-button.add_global_button {
-	padding: 8px;
-	margin-bottom: 4px;
+	padding: 7px;
+    margin-bottom: 4px;
+    padding-bottom: 9px;
 }
 .all_functions {
 	margin-top: -5px;
@@ -628,3 +631,55 @@ div.function_name_div_updated:active,
 .ui.dropdown.menu_start_rendered .text i {
     padding-right: 8px;
 }
+
+* {
+	font-family: 'Roboto', sans-serif;
+}
+
+.add_global_button i {
+	font-size: 130%;
+}
+
+.global_var .circle.add_global_button, .global_var i.back {
+	position: absolute;
+    margin-top: 22px;
+    margin-left: 22px;
+}
+.global_var .circle.add_global_button {
+	z-index: 100;
+	color: #bf80d4!important;
+	cursor: pointer;
+	font-style: 120%;
+}
+.global_var i.back {
+	z-index: 99;
+	color: white !important;
+}
+
+
+.global_container .global_const, .global_container .global_type {
+	font-size: 114%;
+}
+.global_container .editing_name_var {
+	font-size: 108%;
+}
+.global_container .global_const i {
+	font-size: 120%;
+}
+.global_container .span_value_variable {
+    font-size: 110%;
+}
+.global_container .global_type, .global_container .editing_name_var, .global_container .span_value_variable {
+	background: black;
+	border-radius: 5px;
+	padding: 4px;
+	margin-left: 5px;
+	margin-right: 5px;
+}
+.global_container .global_type:hover, .global_container .editing_name_var:hover, .global_container .span_value_variable:hover {
+	background-color: #545353;
+}
+.yellow.icon.times.remove_global {
+	color: yellow;
+	font-size: 125%;
+}

index.html

@@ -8,6 +8,7 @@
     <meta http-equiv="expires" content="-1">
     <meta http-equiv="pragma" content="no-cache">
     <title></title>
+    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
     <link rel="stylesheet" type="text/css" href="js/semantic/semantic.min.css">
     <link rel="stylesheet" type="text/css" href="css/ivprog-visual-1.0.css">
     <link rel="stylesheet" type="text/css" href="css/ivprog-term.css">
@@ -32,33 +33,14 @@
 
     <div class="content height_100">
    
-    <div class="ui one column doubling stackable grid container">
-      <div class="column">
-        <div class="ui container main_title">
-          <h2>iVProg</h2>
-          <span>interactive coding</span>
-        </div>
-
-        <div class="ui container content_margin">
-          <div class="content_sub_margin">
-              <div class="blue ui ivprog_format buttons">
-                <button class="ui button active visual_coding_button">Visual</button>
-                <button class="ui button textual_coding_button">Textual</button>
-              </div>
-            </div>
-          </div>
-
-      </div>
-    </div>
-
-    <div class="ui container main_title only_in_frame" style="display: none;">
+    <div class="ui container main_title only_in_frame">
       <h2>iVProg</h2>
-      <span class="subtext">interactive coding</span>
+      <span class="subtext" style="display: inline;">interactive coding</span>
     </div>
 
     <div class="ui raised container segment div_to_body">
 
-      <div class="ui icon menu center aligned container" style="width: 438px; margin-top: -25px;">
+      <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>
@@ -91,8 +73,11 @@
       <div class="ui one column container segment ivprog_visual_panel loading">
 
         <div class="global_var">
-          
-          <div class="ui icon button add-globalVar-button add_global_button"><i class="icon superscript"></i></div>
+          <i class="icon plus circle purple add_global_button"></i>
+          <i class="icon circle white back"></i>
+
+          <div class="ui icon button add-globalVar-button add_global_button purple"><i class="icon superscript"></i>
+          </div>
 
           <div class="list_globals"></div>
 

js/visualUI/functions.js

@@ -106,7 +106,8 @@ window.runCodeAssessment = runCodeAssessment;
 window.renderAlgorithm = AlgorithmManagement.renderAlgorithm;
 
 WatchJS.watch(program.globals, function(){
-  AlgorithmManagement.renderAlgorithm();
+  //
+  setTimeout(function(){ AlgorithmManagement.renderAlgorithm(); }, 300);
 }, 1);
 
 function addFunctionHandler () {
@@ -259,22 +260,6 @@ export function renderFunction (function_obj) {
   appender += (function_obj.is_main ? '<div class="div_start_minimize_v"> </div>' : '<button class="ui icon button large remove_function_button"><i class="red icon times"></i></button>')
     + '<button class="ui icon button tiny minimize_function_button"><i class="icon window minimize"></i></button>';
 
-  appender += '<div class="ui small icon buttons add_var_top_button"><div class="ui icon button add_var_button_function"><i class="icon superscript"></i></div>';
-  
-  appender += '<div class="ui icon button dropdown menu_commands" ><i class="icon code"></i> <div class="menu"> ';
-  appender += '<a class="item" data-command="'+Models.COMMAND_TYPES.reader+'"><i class="download icon"></i> ' +LocalizedStrings.getUI('text_read_var')+ '</a>'
-        + '<a class="item" data-command="'+Models.COMMAND_TYPES.writer+'"><i class="upload icon"></i> '+LocalizedStrings.getUI('text_write_var')+'</a>'
-        + '<a class="item" data-command="'+Models.COMMAND_TYPES.comment+'"><i class="quote left icon"></i> '+LocalizedStrings.getUI('text_comment')+'</a>'
-        + '<a class="item" data-command="'+Models.COMMAND_TYPES.attribution+'"><i class="arrow left icon"></i> '+LocalizedStrings.getUI('text_attribution')+'</a>'
-        + '<a class="item" data-command="'+Models.COMMAND_TYPES.functioncall+'"><i class="hand point right icon"></i> '+LocalizedStrings.getUI('text_functioncall')+'</a>'
-        + '<a class="item" data-command="'+Models.COMMAND_TYPES.iftrue+'" ><i class="random icon"></i> '+LocalizedStrings.getUI('text_iftrue')+'</a>'
-        + '<a class="item" data-command="'+Models.COMMAND_TYPES.repeatNtimes+'"><i class="sync icon"></i> '+LocalizedStrings.getUI('text_repeatNtimes')+'</a>'
-        + '<a class="item" data-command="'+Models.COMMAND_TYPES.whiletrue+'"><i class="sync icon"></i> '+LocalizedStrings.getUI('text_whiletrue')+'</a>'
-        + '<a class="item" data-command="'+Models.COMMAND_TYPES.dowhiletrue+'"><i class="sync icon"></i> '+LocalizedStrings.getUI('text_dowhiletrue')+'</a>'
-        + '<a class="item" data-command="'+Models.COMMAND_TYPES.switch+'"><i class="list icon"></i> '+LocalizedStrings.getUI('text_switch')+'</a>'
-        + '<a class="item" data-command="'+Models.COMMAND_TYPES.return+'"><i class="reply icon"></i> '+LocalizedStrings.getUI('text_btn_return')+'</a>'
-        + '</div></div></div>';
-
   appender += '<div class="function_signature_div">'+LocalizedStrings.getUI("function")+' ';
 
   if (function_obj.is_main) {
@@ -288,18 +273,29 @@ export function renderFunction (function_obj) {
   }
     
   appender += '</div> <span class="parethesis_function"> ) </span> </div>'
-    + (function_obj.is_hidden ? ' <div class="function_area" style="display: none;"> ' : ' <div class="function_area"> ')
+    + (function_obj.is_hidden ? ' <div class="function_area" style="display: none;"> ' : ' <div class="function_area"> ');
 
-    + '<div class="ui top attached segment variables_list_div">'
-    + '</div>'
+  appender += '<div class="ui icon button add_var_button_function" style="float: left;"><i class="icon superscript"></i></div>';
 
-    + '<div class="ui bottom attached segment commands_list_div" id="function_drag_cmd_">';
+  appender += '<div class="ui top attached segment variables_list_div"></div>';
+
+  appender += '<div class="ui icon button dropdown menu_commands" style="float: left;" ><i class="icon code"></i> <div class="menu"> ';
+  appender += '<a class="item" data-command="'+Models.COMMAND_TYPES.reader+'"><i class="download icon"></i> ' +LocalizedStrings.getUI('text_read_var')+ '</a>'
+        + '<a class="item" data-command="'+Models.COMMAND_TYPES.writer+'"><i class="upload icon"></i> '+LocalizedStrings.getUI('text_write_var')+'</a>'
+        + '<a class="item" data-command="'+Models.COMMAND_TYPES.comment+'"><i class="quote left icon"></i> '+LocalizedStrings.getUI('text_comment')+'</a>'
+        + '<a class="item" data-command="'+Models.COMMAND_TYPES.attribution+'"><i class="arrow left icon"></i> '+LocalizedStrings.getUI('text_attribution')+'</a>'
+        + '<a class="item" data-command="'+Models.COMMAND_TYPES.functioncall+'"><i class="hand point right icon"></i> '+LocalizedStrings.getUI('text_functioncall')+'</a>'
+        + '<a class="item" data-command="'+Models.COMMAND_TYPES.iftrue+'" ><i class="random icon"></i> '+LocalizedStrings.getUI('text_iftrue')+'</a>'
+        + '<a class="item" data-command="'+Models.COMMAND_TYPES.repeatNtimes+'"><i class="sync icon"></i> '+LocalizedStrings.getUI('text_repeatNtimes')+'</a>'
+        + '<a class="item" data-command="'+Models.COMMAND_TYPES.whiletrue+'"><i class="sync icon"></i> '+LocalizedStrings.getUI('text_whiletrue')+'</a>'
+        + '<a class="item" data-command="'+Models.COMMAND_TYPES.dowhiletrue+'"><i class="sync icon"></i> '+LocalizedStrings.getUI('text_dowhiletrue')+'</a>'
+        + '<a class="item" data-command="'+Models.COMMAND_TYPES.switch+'"><i class="list icon"></i> '+LocalizedStrings.getUI('text_switch')+'</a>'
+        + '<a class="item" data-command="'+Models.COMMAND_TYPES.return+'"><i class="reply icon"></i> '+LocalizedStrings.getUI('text_btn_return')+'</a>'
+        + '</div></div>';
 
-  appender += '</div>';
+  appender += '<div class="ui bottom attached segment commands_list_div" id="function_drag_cmd_"></div>';
 
-  appender += '<div class="function_close_div"></div>'
-    + '</div>'
-    + '</div>';
+  appender += '</div></div>';
 
   appender = $(appender);
 
@@ -348,7 +344,7 @@ export function initVisualUI () {
     addFunctionHandler();
   });
   $('.add_global_button').on('click', () => {
-    GlobalsManagement.addGlobal(program);
+    GlobalsManagement.addGlobal(program, true);
   });
 
   $('.run_button').on('click', () => {

js/visualUI/globals.js

@@ -11,14 +11,19 @@ import '../semantic/semantic.min.js';
 
 var counter_new_globals = 0;
 
-export function addGlobal (program) {
+export function addGlobal (program, is_from_click = false) {
 
 	var new_global = new Models.Variable(Types.INTEGER, LocalizedStrings.getUI('new_global') + '_' + counter_new_globals, 1);
 	counter_new_globals ++;
 
 	program.addGlobal(new_global);
 
-	renderGlobal(new_global);
+	var newe = renderGlobal(new_global);
+
+	if (is_from_click) {
+		newe.css('display', 'none');
+		newe.fadeIn();
+	}
 
 }
 
@@ -419,14 +424,14 @@ function updateColumnsAndRowsText (global_container, global_var) {
 
 export function renderGlobal (global_var) {
 
-	var element = '<div class="ui label global_container"><div class="global_const">const: ';
+	var element = '<div class="ui label global_container pink"><div class="global_const">const: ';
 
 	element += '<i class="ui icon toggle '+(global_var.is_constant?"on":"off")+' alternate_constant"></i></div>';
  	
  	element += '<div class="ui dropdown global_type">';
 
   	if (global_var.dimensions > 0) {
-  		element += '<div class="text">'+ i18n('ui:vector') + ':' + LocalizedStrings.getUI(global_var.type);
+  		element += '<div class="text">'+ LocalizedStrings.getUI('vector')+ ':' + LocalizedStrings.getUI(global_var.type);
   		for (var i = 0; i < global_var.dimensions; i ++) {
   			element += ' [ <span class="dimensions_'+i+'"></span> ] ';
   		}
@@ -461,7 +466,7 @@ export function renderGlobal (global_var) {
 
 	element += '<div class="ui div_valor_var">'+global_var.value+'</div>';    
 
-	element += ' <i class="red icon times remove_global"></i></div>';
+	element += ' <i class="yellow inverted icon times remove_global"></i></div>';
 
 	var complete_element = $(element);
 
@@ -480,6 +485,8 @@ export function renderGlobal (global_var) {
 		complete_element.find('.dimensions_0').text(global_var.columns);
 		complete_element.find('.dimensions_1').text(global_var.rows);
 	}
+
+	return complete_element;
 }
 
 var opened_name_value_matrix_global_v = false;