Bladeren bron

Finished buttons collapse expressions and improves

Igor 3 jaren geleden
bovenliggende
commit
01a4f5ba7c

+ 3 - 3
css/ivprog-visual-1.0.css

@@ -1088,15 +1088,15 @@ div.ui.dropdown.menu_commands.pause {
 
 .context_menu {
 	display: inline;
-	float: right;
-	margin: 0;
+	margin-left: 1rem;
 }
 
 .data_block_if span.textual_expression,
 .ui.dowhiletrue span.textual_expression,
 .ui.whiletrue span.textual_expression,
 .attribution span.textual_expression,
-.writer span.textual_expression {
+.writer span.textual_expression,
+.return span.textual_expression {
 	color: #2325a6;
 	font-weight: bold;
 	font-size: 1.2rem;

+ 1 - 1
js/visualUI/commands/contextualized_menu.js

@@ -17,7 +17,7 @@ export function renderMenu (command, dom_where_render, function_obj, dom_command
 	} else {
 
 		menu_div += '<a class="item" data-command="'+Models.COMMAND_TYPES.break+'"><i class="pause icon"></i> '+LocalizedStrings.getUI('btn_break')+' </a>';
-		menu_div += '<a class="item" data-command="'+Models.COMMAND_TYPES.switchcase+'"><i class="pause icon"></i> '+LocalizedStrings.getUI('btn_case')+' </a>';
+		menu_div += '<a class="item" data-command="'+Models.COMMAND_TYPES.switchcase+'"><i class="plus icon"></i> '+LocalizedStrings.getUI('btn_case')+' </a>';
 
 	}
 

+ 9 - 9
js/visualUI/commands/dowhiletrue.js

@@ -11,11 +11,11 @@ export function createFloatingCommand () {
 
 export function renderCommand (command, function_obj) {
 	var ret = '';
-	ret += '<div class="ui dowhiletrue command_container"> <i class="ui icon small sync command_drag"></i> <i class="ui icon times red button_remove_command"></i> <button class="ui icon button minimize_block_button tiny"><i class="icon window minimize"></i></button> <div class="ui context_menu"></div>  <span class="span_command_spec"> ' + LocalizedStrings.getUI('text_command_do') + ' </span>';
+	ret += '<div class="ui dowhiletrue command_container"> <i class="ui icon small sync command_drag"></i> <i class="ui icon times red button_remove_command"></i> <button class="ui icon button minimize_block_button tiny"><i class="icon window minimize"></i></button> <span class="span_command_spec"> ' + LocalizedStrings.getUI('text_command_do') + ' </span>';
 	ret += '<div class="ui block_commands" data-subblock="" data-idcommand="">';
 	ret += '</div>';
 	ret += ' <span class="span_command_spec"> ' + LocalizedStrings.getUI('text_command_do_until') + ' </span> <span class="span_command_spec"> ( </span> <div class="conditional_expression"></div> <span class="textual_expression"></span> <span class="span_command_spec"> ) </span>';
-	ret += ' <i class="ui icon unlock button_alternate_expression"></i>';
+	ret += ' <i class="ui icon unlock button_alternate_expression"></i> <div class="ui context_menu"></div> ';
 	ret += '</div>';
 
 	var el = $(ret);
@@ -43,10 +43,10 @@ export function renderCommand (command, function_obj) {
 			try {
 				var text = CodeGenerator.elementExpressionCode(command.expression);
 				if (text) {
-					$(el.find('.conditional_expression')[0]).toggle();
-					$(el.find('.textual_expression')[0]).text(text);
-					$(el.find('.textual_expression')[0]).toggle();
-					$(el.find('.button_alternate_expression')[0]).toggleClass('unlock').toggleClass('lock');
+					$(el.find('.conditional_expression')[el.find('.conditional_expression').length - 1]).toggle();
+					$(el.find('.textual_expression')[el.find('.textual_expression').length - 1]).text(text);
+					$(el.find('.textual_expression')[el.find('.textual_expression').length - 1]).toggle();
+					$(el.find('.button_alternate_expression')[el.find('.button_alternate_expression').length - 1]).toggleClass('unlock').toggleClass('lock');
 				}
 			} catch (e) {
 				command.lockexpression = false;
@@ -71,9 +71,9 @@ function addHandlers (command, function_obj, dowhiletrue_dom) {
 		if (command.expression) {
 			var text = CodeGenerator.elementExpressionCode(command.expression);
 			if (text) {
-				$(dowhiletrue_dom.find('.conditional_expression')[0]).toggle();
-				$(dowhiletrue_dom.find('.textual_expression')[0]).text(text);
-				$(dowhiletrue_dom.find('.textual_expression')[0]).toggle();
+				$(dowhiletrue_dom.find('.conditional_expression')[dowhiletrue_dom.find('.conditional_expression').length - 1]).toggle();
+				$(dowhiletrue_dom.find('.textual_expression')[dowhiletrue_dom.find('.textual_expression').length - 1]).text(text);
+				$(dowhiletrue_dom.find('.textual_expression')[dowhiletrue_dom.find('.textual_expression').length - 1]).toggle();
 
 				$(this).toggleClass('unlock').toggleClass('lock');
 				command.lockexpression = !command.lockexpression;

+ 3 - 2
js/visualUI/commands/repeatNtimes.js

@@ -16,7 +16,7 @@ export function renderCommand (command, function_obj) {
 		<i class="ui icon small sync command_drag"></i>
 		<i class="ui icon times red button_remove_command"></i>
 		<button class="ui icon button minimize_block_button tiny"><i class="icon window minimize"></i></button>
-		<div class="ui context_menu"></div>  <span class="span_command_spec"> ${LocalizedStrings.getUI('text_for')}
+		<span class="span_command_spec"> ${LocalizedStrings.getUI('text_for')}
 		</span>  <div class="ui attribution_expression">
 		<div class="ui variable_attribution"></div>
 		<span class="text_receives span_command_spec" style="margin-left: 10px;margin-right: 20px;"></span>
@@ -28,7 +28,8 @@ export function renderCommand (command, function_obj) {
 		<div class="ui incrementation_field"><span class="text_inc_receives span_command_spec"></span>
 		<div class="ui first_operand"></div><div class="ui operator"></div>
 		<div class="ui second_operand"></div></div>  <span class="span_command_spec"> </span>
-		<span class="textual_expression"></span> <i class="ui icon unlock button_alternate_expression"></i>`;
+		<span class="textual_expression"></span> <i class="ui icon unlock button_alternate_expression"></i>
+		<div class="ui context_menu"></div>`;
 	ret += '<div class="ui block_commands">';
 	ret += '</div>';
 	ret += '<span> </span>';

+ 34 - 3
js/visualUI/commands/return.js

@@ -4,32 +4,63 @@ import * as VariableValueMenu from './variable_value_menu';
 import * as CommandsManagement from '../commands';
 import * as GenericExpressionManagement from './generic_expression';
 import * as Models from '../ivprog_elements';
+import * as CodeGenerator from '../code_generator';
 
 export function createFloatingCommand () {
 	return $('<div class="ui return created_element"> <i class="ui icon small reply"></i> <span> '+LocalizedStrings.getUI('text_return')+' </span></div>');
 }
 
 export function renderCommand (command, function_obj) {
-	var el = $('<div class="ui return command_container"> <i class="ui icon small reply command_drag"></i> <i class="ui icon times red button_remove_command"></i> <span class="span_command_spec"> '+LocalizedStrings.getUI('text_return')+' </span>  <div class="expression_elements"></div></div>');
+	var el = $('<div class="ui return command_container"> <i class="ui icon small reply command_drag"></i> <i class="ui icon times red button_remove_command"></i> <span class="span_command_spec"> '+LocalizedStrings.getUI('text_return')+' </span>  <div class="expression_elements"></div><span class="textual_expression" style="display: none; margin-left: 1rem;"></span></div>');
 	el.data('command', command);
 
-	addHandlers(command, function_obj, el);
-
 	if (function_obj.return_type != Types.VOID) {
 		if (!command.variable_value_menu) {
 			command.variable_value_menu = [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)];
 		}
 		GenericExpressionManagement.renderExpression(command, function_obj, el.find('.expression_elements'), command.variable_value_menu);
+		el.append($('<i class="ui icon unlock button_alternate_expression" style="margin-left: 1rem;"></i>'));
+
+		if (command.lockexpression) {
+			if (command.variable_value_menu) {
+				try {
+					var text = CodeGenerator.elementExpressionCode(command.variable_value_menu);
+					if (text) {
+						$(el.find('.expression_elements')[0]).toggle();
+						$(el.find('.textual_expression')[0]).text(text);
+						$(el.find('.textual_expression')[0]).toggle();
+						$(el.find('.button_alternate_expression')[0]).toggleClass('unlock').toggleClass('lock');
+					}
+				} catch (e) {
+					command.lockexpression = false;
+				}
+			}
+		}
 	} else {
 		el.find('.expression_elements').remove();
 		command.variable_value_menu = null;
 	}
 	
+	addHandlers(command, function_obj, el);
+
 	return el;
 }
 
 function addHandlers (command, function_obj, return_dom) {
 
+	return_dom.find('.button_alternate_expression').on('click', function() {
+		if (command.variable_value_menu) {
+      var text = CodeGenerator.elementExpressionCode(command.variable_value_menu);
+			if (text) {
+				$(return_dom.find('.expression_elements')[0]).toggle();
+				$(return_dom.find('.textual_expression')[0]).text(text);
+				$(return_dom.find('.textual_expression')[0]).toggle();
+				$(this).toggleClass('unlock').toggleClass('lock');
+				command.lockexpression = !command.lockexpression;
+			}
+		}
+	});
+
 	return_dom.find('.button_remove_command').on('click', function() {
 		if (CommandsManagement.removeCommand(command, function_obj, return_dom)) {
 			return_dom.fadeOut(400, function() {

+ 1 - 1
js/visualUI/commands/switch.js

@@ -9,7 +9,7 @@ export function createFloatingCommand () {
 
 export function renderCommand (command, function_obj) {
 	var ret = '';
-	ret += '<div class="ui switch command_container"> <i class="ui icon small random command_drag" ></i> <i class="ui icon times red button_remove_command"></i> <div class="ui context_menu"></div> <span> '+LocalizedStrings.getUI('text_code_switch')+' ( <div class="ui variable_to_switch"></div> ) <div class="ui all_cases_div"></div></span>';
+	ret += '<div class="ui switch command_container"> <i class="ui icon small random command_drag" ></i> <i class="ui icon times red button_remove_command"></i> <span> '+LocalizedStrings.getUI('text_code_switch')+' ( <div class="ui variable_to_switch"></div> ) <div class="ui context_menu"></div> <div class="ui all_cases_div"></div></span>';
 	ret += '</div>';
 
 	var el = $(ret);

+ 2 - 2
js/visualUI/commands/whiletrue.js

@@ -11,10 +11,10 @@ export function createFloatingCommand () {
 
 export function renderCommand (command, function_obj) {
 	var ret = '';
-	ret += '<div class="ui whiletrue command_container"> <i class="ui icon small sync command_drag"></i> <i class="ui icon times red button_remove_command"></i><button class="ui icon button minimize_block_button tiny"><i class="icon window minimize"></i></button> <div class="ui context_menu"></div>  <span class="span_command_spec"> ' + LocalizedStrings.getUI('text_command_while') + ' </span>';
+	ret += '<div class="ui whiletrue command_container"> <i class="ui icon small sync command_drag"></i> <i class="ui icon times red button_remove_command"></i><button class="ui icon button minimize_block_button tiny"><i class="icon window minimize"></i></button> <span class="span_command_spec"> ' + LocalizedStrings.getUI('text_command_while') + ' </span>';
 	ret += '<span class="span_command_spec"> ( </span> <div class="conditional_expression"></div> <span class="textual_expression"></span> <span class="span_command_spec"> ) </span>';
 	ret += ' </span>';
-	ret += '<i class="ui icon unlock button_alternate_expression"></i>';
+	ret += '<i class="ui icon unlock button_alternate_expression"></i> <div class="ui context_menu"></div>';
 	ret += '<div class="ui block_commands">';
 	ret += '</div>';
 	ret += '<span> </span>';

+ 2 - 20
js/visualUI/commands/writer.js

@@ -40,28 +40,10 @@ export function renderCommand (command, function_obj) {
     command.content
   );
 
-  /*for (var i = 0; i < command.content.length; i ++) {
-		var new_div_item = $( '<div class="var_value_menu_div"></div>' );
-		var div_parent_with_handler = $( '<div class="div_parent_handler"></div>' );
-		div_parent_with_handler.append($('<i class="ui icon ellipsis vertical inverted handler"></i>'));
-		div_parent_with_handler.append(new_div_item);
-		div_parent_with_handler.append($('<i class="white inverted icon times handler"></i>'));
-
-		el.find('.all_elements_write').append(div_parent_with_handler);
-		VariableValueMenu.renderMenu(command, command.content[i], new_div_item, function_obj);
-
-		addHandlerIconAdd(el.find('.all_elements_write'), command, function_obj);
-
-		addHandlersManager(command, function_obj, el, div_parent_with_handler, command.content[i]);
-	}
-
-	if (command.content.length == 0) {
-		addHandlerIconAdd(el.find('.all_elements_write'), command, function_obj);
-	}*/
-
+ 
   addHandlers(command, function_obj, el);
 
-  if (command.content) {
+  if (command.content && command.lockexpression) {
     try {
       var text = CodeGenerator.elementExpressionCode(command.content);
       if (text) {