Project Edit: Node types editing embedded

pillar/web/projects/routes.py

@@ -603,7 +603,8 @@ def edit_node_type(project_url, node_type_name):
             form.form_schema.data = json.dumps(form_schema, indent=4)
             form.dyn_schema.data = json.dumps(dyn_schema, indent=4)
             form.permissions.data = json.dumps(permissions, indent=4)
-    return render_template('projects/edit_node_type.html',
+
+    return render_template('projects/edit_node_type_embed.html',
                            form=form,
                            project=project,
                            api=api,

src/styles/_project-sharing.sass

@@ -160,10 +160,6 @@ ul.list-generic
 	margin: 0
 	padding: 0
 	list-style: none
-	width: 350px
-
-	+media-xs
-		width: 100%
 
 	> li
 		padding: 5px 0

src/templates/projects/edit.pug

@@ -80,7 +80,6 @@ ul.project-edit-tools
 
 		| {% endfor %}
 
-
 		ul.project-edit-tools.bottom
 			li.button-cancel
 				a#item_cancel.project-mode-edit(
@@ -96,7 +95,6 @@ ul.project-edit-tools
 					i.button-save-icon.pi-check
 					| Save Changes
 
-
 | {% endblock %}
 
 | {% block footer_scripts %}

src/templates/projects/edit_layout.pug

@@ -6,7 +6,7 @@
 	#project-side-container
 		#project_sidebar
 			ul.project-tabs
-				li.tabs-thumbnail(
+				li.tabs-thumbnail.active(
 					title="About",
 					data-toggle="tooltip",
 					data-placement="left",
@@ -83,9 +83,9 @@
 script.
 	/* UI Stuff */
 	$(window).on("load resize",function(){
-		$('#project-container').css('height', $(window).height());
+		containerResizeY($(window).height());
-		$('#project_context-header').css('width', $('#project_context-container').width());
 	});
+
 | {% endblock %}
 
 | {% block footer_navigation %}

src/templates/projects/edit_node_type.pug

@@ -1,88 +0,0 @@
-| {% extends 'layout.html' %}
-
-| {% set title = 'edit_node_types' %}
-
-| {% block page_title %}Project {{ project.name }}{% endblock %}
-
-| {% block body %}
-.container.box
-	form(
-		method='POST',
-		action="{{url_for('projects.edit_node_type', project_url=project.url, node_type_name=node_type['name'])}}")
-
-		#blog_container.post-create
-
-			| {% with errors = errors %}
-			| {% if errors %}
-			| {% for field in errors %}
-			.alert.alert-danger(role='alert')
-				strong {{field}}
-				| 						{% for message in errors[field] %}
-				| 								{{message}}|
-				| 						{% endfor %}
-			| 				{% endfor %}
-			| 		{% endif %}
-			| 		{% endwith %}
-
-			#blog_index-sidebar
-				.blog_project-sidebar
-					input.btn.btn-default.button-create(type='submit', value="Update {{ node_type['name'] }}")
-					a.btn.btn-default.button-back(href="{{ url_for('projects.view', project_url=project.url) }}")
-						| Back to Project
-
-			#blog_post-edit-container
-				#blog_post-edit-title
-					| Edit {{ node_type['name'] }}
-
-				#blog_post-edit-form
-					| {% for field in form %}
-					| {% if field.name == 'csrf_token' %}
-					| {{ field }}
-					| {% else %}
-					| {% if field.type == 'HiddenField' %}
-					| {{ field }}
-					| {% else %}
-					.form-group(class="{{field.name}}{% if field.errors %} error{% endif %}")
-						| {{ field.label }}
-						| {{ field(class='form-control') }}
-
-						| {% if field.errors %}
-						ul.error
-							| {% for error in field.errors %}
-							li {{ error }}
-							| {% endfor %}
-						| {% endif %}
-
-					| {% endif %}
-					| {% endif %}
-					| {% endfor %}
-
-| {% endblock %}
-
-| {% block footer_scripts%}
-script(src="https://cdn.jsdelivr.net/g/ace@1.2.3(noconflict/ace.js+noconflict/mode-json.js)")
-
-script.
-	var dynSchemaEditorContainer = $("<div>", {id: "dyn_schema_editor"});
-	$(".form-group.dyn_schema").before(dynSchemaEditorContainer);
-	var dynSchemaEditor = ace.edit("dyn_schema_editor");
-	dynSchemaEditor.getSession().setValue($("#dyn_schema").val());
-
-	var formSchemaEditorContainer = $("<div>", {id: "form_schema_editor"});
-	$(".form-group.form_schema").before(formSchemaEditorContainer);
-	var formSchemaEditor = ace.edit("form_schema_editor");
-	formSchemaEditor.getSession().setValue($("#form_schema").val());
-
-	var permissionsEditorContainer = $("<div>", {id: "permissions_editor"});
-	$(".form-group.permissions").before(permissionsEditorContainer);
-	var permissionsEditor = ace.edit("permissions_editor");
-	permissionsEditor.getSession().setValue($("#permissions").val());
-
-	$("form").submit(function(e) {
-		$("#dyn_schema").val(dynSchemaEditor.getSession().getValue());
-		$("#form_schema").val(formSchemaEditor.getSession().getValue());
-		$("#permissions").val(permissionsEditor.getSession().getValue());
-	});
-| {% endblock %}
-
-

src/templates/projects/edit_node_type_embed.pug

@@ -0,0 +1,94 @@
+form(
+	id="node-type-form",
+	method='POST',
+	action="{{url_for('projects.edit_node_type', project_url=project.url, node_type_name=node_type['name'])}}")
+
+	| {% with errors = errors %}
+	| {% if errors %}
+	| {% for field in errors %}
+	.alert.alert-danger(role='alert')
+		strong {{field}}
+		| 						{% for message in errors[field] %}
+		| 								{{message}}|
+		| 						{% endfor %}
+	| 				{% endfor %}
+	| 		{% endif %}
+	| 		{% endwith %}
+
+	.row
+		.col-md-9
+			h3 Editing: {{ node_type['name'] }}
+		.col-md-3
+			button.js-form-save.btn.btn-success.pull-right(style="margin-top: 15px;")
+				| Save Changes
+
+	.row
+		.col-md-12
+			| {% for field in form %}
+			| {% if field.name == 'csrf_token' %}
+			| {{ field }}
+			| {% else %}
+			| {% if field.type == 'HiddenField' %}
+			| {{ field }}
+			| {% else %}
+			.form-group(class="{{field.name}}{% if field.errors %} error{% endif %}")
+				| {{ field.label }}
+				| {{ field(class='form-control') }}
+
+				| {% if field.errors %}
+				ul.error
+					| {% for error in field.errors %}
+					li {{ error }}
+					| {% endfor %}
+				| {% endif %}
+
+			| {% endif %}
+			| {% endif %}
+			| {% endfor %}
+
+			button.js-form-save.btn.btn-success.pull-right
+				| Save Changes
+
+
+script.
+	$(document).ready(function(){
+		var dynSchemaEditorContainer = $("<div>", {id: "dyn_schema_editor"});
+		$(".form-group.dyn_schema").before(dynSchemaEditorContainer);
+		var dynSchemaEditor = ace.edit("dyn_schema_editor");
+		dynSchemaEditor.getSession().setValue($("#dyn_schema").val());
+
+		var formSchemaEditorContainer = $("<div>", {id: "form_schema_editor"});
+		$(".form-group.form_schema").before(formSchemaEditorContainer);
+		var formSchemaEditor = ace.edit("form_schema_editor");
+		formSchemaEditor.getSession().setValue($("#form_schema").val());
+
+		var permissionsEditorContainer = $("<div>", {id: "permissions_editor"});
+		$(".form-group.permissions").before(permissionsEditorContainer);
+		var permissionsEditor = ace.edit("permissions_editor");
+		permissionsEditor.getSession().setValue($("#permissions").val());
+
+
+		$('.js-form-save').on('click', function(e){
+			e.preventDefault();
+
+			var $node_type_form = $('#node-type-form');
+			var url = $node_type_form.attr('action');
+
+			// Update the hidden textareas by reading content of the editor
+			// before serializing the form
+			$("#dyn_schema").val(dynSchemaEditor.getSession().getValue());
+			$("#form_schema").val(formSchemaEditor.getSession().getValue());
+			$("#permissions").val(permissionsEditor.getSession().getValue());
+
+			var data = $node_type_form.serialize();
+
+			$.post(url, data, function(datata) {
+			})
+			.done(function(){
+				toastr.success("Node Type: {{ node_type['name'] | undertitle }}", "Saved")
+			})
+			.fail(function(){
+				toastr.error("Node Type: {{ node_type['name'] | undertitle }}", "Could not save")
+			});
+		});
+	});

src/templates/projects/edit_node_types.pug

@@ -10,22 +10,49 @@ span#project-edit-title
 | {% block project_context %}
 #node-edit-container
 	div(id="node-edit-form")
-		h3 Node Types
+		.row
+			.col-md-9
 				p.
 					Nodes are all the items that can be found in a project.
 					Everything is a node: a file, a folder, a comment. They are
-			defined with custom properties and properly presented to you.
+					defined with custom properties to be properly displayed.
-			When we add support for new node types in the future, it means we
+		.row
-			allow the creation of new items (such as textures).
+			.col-md-4.col-sm-6
+				h3 Node Types
 
 				| {% if current_user.has_cap('edit-project-node-types') %}
 				ul.list-generic
 					| {% for node_type in project.node_types %}
 					li
-				a(href="{{ url_for('projects.edit_node_type', project_url=project.url, node_type_name=node_type.name) }}")
+						a.js-item-open(
+							href="{{ url_for('projects.edit_node_type', project_url=project.url, node_type_name=node_type.name) }}",
+							data-url="{{ url_for('projects.edit_node_type', project_url=project.url, node_type_name=node_type.name) }}")
 							| {{ node_type.name | undertitle }}
 						.actions
 							span {{ node_type.name }}
 					| {% endfor %}
 				| {% endif %}
+
+			.col-md-8.col-sm-6
+				#node-edit-embed
+
 | {% endblock %}
+
+| {% block footer_scripts %}
+script(src="//cdn.jsdelivr.net/g/ace@1.2.3(noconflict/ace.js+noconflict/mode-json.js)")
+script.
+
+	$('.js-item-open').on('click', function(e){
+		e.preventDefault();
+
+		var item_url = $(this).data('url');
+
+		$.get(item_url, function(item_data) {
+			$('#node-edit-embed').html(item_data);
+		})
+		.fail(function(xhr){
+			toastr.error('Failed to open<br/>' + xhr);
+		});
+	});
+
+| {% endblock footer_scripts %}