Improve package creation form

8 files changed, 126 insertions, 92 deletions

diff --git a/.gitignore b/.gitignore
index 2d4a60d..64fb527 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,7 +1,7 @@
 config.cfg
 config.prod.cfg
 *.sqlite
-main.css
+custom.css
 tmp
 log.txt
 *.rdb
diff --git a/app/public/static/bootstrap.css b/app/public/static/bootstrap.css
index dc66061..47ac439 100644
--- a/app/public/static/bootstrap.css
+++ b/app/public/static/bootstrap.css
@@ -11,7 +11,7 @@
  * Copyright 2011-2018 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  */
-@import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic");
+/* @import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic"); */
 :root {
   --blue: #375a7f;
   --indigo: #6610f2;
diff --git a/app/public/static/tagselector.js b/app/public/static/tagselector.js
index 2c69e6d..5b9af55 100644
--- a/app/public/static/tagselector.js
+++ b/app/public/static/tagselector.js
@@ -5,13 +5,25 @@
  * https://petprojects.googlecode.com/svn/trunk/GPL-LICENSE.txt
  */
 (function($) {
+	function hide_error(input) {
+		var err = input.parent().parent().find(".invalid-remaining");
+		err.hide();
+	}
+
+	function show_error(input, msg) {
+		var err = input.parent().parent().find(".invalid-remaining");
+		console.log(err.length);
+		err.text(msg);
+		err.show();
+	}
+
 	$.fn.selectSelector = function(source, name, select) {
 		return this.each(function() {
 				var selector = $(this),
 					input = $('input[type=text]', this);
 
 				selector.click(function() { input.focus(); })
-					.delegate('.tag a', 'click', function() {
+					.delegate('.badge a', 'click', function() {
 						var id = $(this).parent().data("id");
 						for (var i = 0; i < source.length; i++) {
 							if (source[i].id == id) {
@@ -23,13 +35,14 @@
 					});
 
 				function addTag(item) {
-					var tag = $('<span class="tag"/>')
+					var tag = $('<span class="badge badge-pill badge-primary"/>')
 						.text(item.toString() + ' ')
 						.data("id", item.id)
 						.append('<a>x</a>')
 						.insertBefore(input);
 					input.attr("placeholder", null);
 					select.find("option[value=" + item.id + "]").attr("selected", "selected")
+					hide_error(input);
 				}
 
 				function recreate() {
@@ -42,6 +55,13 @@
 				}
 				recreate();
 
+				input.focusout(function(e) {
+					var value = input.val().trim()
+					if (value != "") {
+						show_error(input, "Please select an existing tag, it;s not possible to add custom ones.");
+					}
+				})
+
 				input.keydown(function(e) {
 						if (e.keyCode === $.ui.keyCode.TAB && $(this).data('ui-autocomplete').menu.active)
 							e.preventDefault();
@@ -92,7 +112,7 @@
 				}
 
 				selector.click(function() { input.focus(); })
-					.delegate('.tag a', 'click', function() {
+					.delegate('.badge a', 'click', function() {
 						var id = $(this).parent().data("id");
 						for (var i = 0; i < selected.length; i++) {
 							if (selected[i] == id) {
@@ -113,13 +133,14 @@
 				}
 
 				function addTag(id, value) {
-					var tag = $('<span class="tag"/>')
+					var tag = $('<span class="badge badge-pill badge-primary"/>')
 						.text(value)
 						.data("id", id)
 						.append(' <a>x</a>')
 						.insertBefore(input);
 
 					input.attr("placeholder", null);
+					hide_error(input);
 				}
 
 				function recreate() {
@@ -147,6 +168,18 @@
 
 				result.change(readFromResult);
 
+				input.focusout(function() {
+					var item = input.val();
+					if (item.length == 0) {
+						input.data("ui-autocomplete").search("");
+					} else if (item.match(/^([a-z0-9_]+)$/)) {
+						selectItem(item);
+						recreate();
+						input.val("");
+					}
+					return true;
+				});
+
 				input.keydown(function(e) {
 						if (e.keyCode === $.ui.keyCode.TAB && $(this).data('ui-autocomplete').menu.active)
 							e.preventDefault();
@@ -159,7 +192,7 @@
 								recreate();
 								input.val("");
 							} else {
-								alert("Only lowercase alphanumeric and number names allowed.");
+								show_error(input, "Only lowercase alphanumeric and number names allowed.");
 							}
 							e.preventDefault();
 							return true;
diff --git a/app/scss/components.scss b/app/scss/components.scss
index f19b4c8..4789a79 100644
--- a/app/scss/components.scss
+++ b/app/scss/components.scss
@@ -38,27 +38,15 @@
 	white-space: nowrap;
 	background: transparent;
 }
-.bulletselector .tag {
-	background: #375D81;
-	border-radius: 3px;
-    -moz-border-radius: 3px;
-	color: #FFF;
+.bulletselector .badge {
 	float: left;
-	height: 15px;
-	padding: 0.1em 0.4em 0.5em;
+	padding: 0.4em 0.8em;
 	margin-right: 0.3em;
-	margin-bottom: 0.3em;
-    vertical-align: baseline;
-}
-.bulletselector .tag a {
-	color: #FFF;
-	cursor: pointer;
-}
-.bulletselector .tag a:hover {
-	color: #0099CC;
-	text-decoration: none;
 }
 
+.invalid-remaining {
+	display: none;
+}
 
 .t-mll tr td:not(:first-child) {
 	text-align: left;
diff --git a/app/scss/main.scss b/app/scss/custom.scss
index c95ebfd..c95ebfd 100644
--- a/app/scss/main.scss
+++ b/app/scss/custom.scss
diff --git a/app/templates/base.html b/app/templates/base.html
index c80e080..b49b47d 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -7,7 +7,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>{% block title %}title{% endblock %} - {{ config.USER_APP_NAME }}</title>
 	<link rel="stylesheet" type="text/css" href="/static/bootstrap.css">
-	<link rel="stylesheet" type="text/css" href="/static/main.css">
+	<link rel="stylesheet" type="text/css" href="/static/custom.css">
 	{% block headextra %}{% endblock %}
 </head>
 
@@ -122,8 +122,9 @@
 		<a href="{{ url_for('flatpage', path='help/reporting') }}">Report / DMCA</a>
 	</footer>
 
-	<script src="static/jquery.min.js"></script>
-	<script src="static/popper.min.js"></script>
-	<script src="static/bootstrap.min.js"></script>
+	<script src="/static/jquery.min.js"></script>
+	<script src="/static/popper.min.js"></script>
+	<script src="/static/bootstrap.min.js"></script>
+	{% block scriptextra %}{% endblock %}
 </body>
 </html>
diff --git a/app/templates/macros/forms.html b/app/templates/macros/forms.html
index 66f305b..e53beec 100644
--- a/app/templates/macros/forms.html
+++ b/app/templates/macros/forms.html
@@ -2,7 +2,7 @@
 	<div class="form-group {% if field.errors %}has-error{% endif %} {{ kwargs.pop('class_', '') }}">
 		{% if field.type != 'HiddenField' and label_visible %}
 			{% if not label %}{% set label=field.label.text %}{% endif %}
-			<label for="{{ field.id }}" class="control-label">{{ label|safe }}</label>
+			<label for="{{ field.id }}">{{ label|safe }}</label>
 		{% endif %}
 		{{ field(class_='form-control', **kwargs) }}
 		{% if field.errors %}
@@ -13,9 +13,8 @@
 	</div>
 {%- endmacro %}
 
-{% macro form_includes() -%}
+{% macro form_scripts() -%}
 	<link href="/static/jquery-ui.min.css" rel="stylesheet" type="text/css">
-	<script src="/static/jquery.min.js"></script>
 	<script src="/static/jquery-ui.min.js"></script>
 	<script src="/static/tagselector.js"></script>
 {% endmacro %}
@@ -58,16 +57,17 @@
 	<div class="form-group {% if field.errors %}has-error{% endif %} {{ kwargs.pop('class_', '') }}">
 		{% if field.type != 'HiddenField' and label_visible %}
 			{% if not label %}{% set label=field.label.text %}{% endif %}
-			<label for="{{ field.id }}" class="control-label">{{ label|safe }}</label>
+			<label for="{{ field.id }}">{{ label|safe }}</label>
 		{% endif %}
-		<div class="multichoice_selector bulletselector">
+		<div class="multichoice_selector bulletselector form-control">
 			<input type="text" placeholder="Start typing to see suggestions">
 			<div class="clearboth"></div>
 		</div>
+		<div class="invalid-remaining invalid-feedback"></div>
 		{{ field(class_='form-control', **kwargs) }}
 		{% if field.errors %}
 			{% for e in field.errors %}
-				<p class="help-block">{{ e }}</p>
+				<div class="invalid-feedback">{{ e }}</div>
 			{% endfor %}
 		{% endif %}
 	</div>
@@ -77,13 +77,14 @@
 	<div class="form-group {% if field.errors %}has-error{% endif %} {{ kwargs.pop('class_', '') }}">
 		{% if field.type != 'HiddenField' and label_visible %}
 			{% if not label %}{% set label=field.label.text %}{% endif %}
-			<label for="{{ field.id }}" class="control-label">{{ label|safe }}</label>
+			<label for="{{ field.id }}">{{ label|safe }}</label>
 		{% endif %}
-		<div class="metapackage_selector bulletselector">
+		<div class="metapackage_selector bulletselector form-control">
 			<input type="text" placeholder="Comma-seperated values">
 			<div class="clearboth"></div>
 		</div>
 		{{ field(class_='form-control', **kwargs) }}
+		<div class="invalid-remaining invalid-feedback"></div>
 		{% if field.errors %}
 			{% for e in field.errors %}
 				<p class="help-block">{{ e }}</p>
@@ -96,13 +97,14 @@
 	<div class="form-group {% if field.errors %}has-error{% endif %} {{ kwargs.pop('class_', '') }}">
 		{% if field.type != 'HiddenField' and label_visible %}
 			{% if not label %}{% set label=field.label.text %}{% endif %}
-			<label for="{{ field.id }}" class="control-label">{{ label|safe }}</label>
+			<label for="{{ field.id }}">{{ label|safe }}</label>
 		{% endif %}
-		<div class="deps_selector bulletselector">
+		<div class="deps_selector bulletselector form-control">
 			<input type="text" placeholder="Comma-seperated values">
 			<div class="clearboth"></div>
 		</div>
 		{{ field(class_='form-control', **kwargs) }}
+		<div class="invalid-remaining invalid-feedback"></div>
 		{% if field.errors %}
 			{% for e in field.errors %}
 				<p class="help-block">{{ e }}</p>
@@ -134,7 +136,7 @@
 {% macro render_submit_field(field, label=None, tabindex=None) -%}
 	{% if not label %}{% set label=field.label.text %}{% endif %}
 	{#<button type="submit" class="form-control btn btn-default btn-primary">{{label}}</button>#}
-	<input type="submit" value="{{label}}"
+	<input type="submit" value="{{label}}" class="btn btn-primary"
 		   {% if tabindex %}tabindex="{{ tabindex }}"{% endif %}
 		   >
 {%- endmacro %}
diff --git a/app/templates/packages/create_edit.html b/app/templates/packages/create_edit.html
index 7e9392e..be61b1c 100644
--- a/app/templates/packages/create_edit.html
+++ b/app/templates/packages/create_edit.html
@@ -7,6 +7,31 @@
 	{% endif %}
 {% endblock %}
 
+{% from "macros/forms.html" import render_field, render_submit_field, form_scripts, render_multiselect_field, render_mpackage_field, render_deps_field, package_lists %}
+
+{% block scriptextra %}
+	{{ form_scripts() }}
+
+	<script src="/static/simplemde.min.js"></script>
+	<link rel="stylesheet" type="text/css" href="/static/simplemde.min.css">
+	<script>
+		var simplemde = new SimpleMDE({ element: $("#desc")[0] });
+	</script>
+
+	{% if enable_wizard %}
+		<script src="/static/url.min.js"></script>
+		<script src="/static/polltask.js"></script>
+		<script src="/static/package_create.js"></script>
+		<noscript>
+			<div class="box box_grey alert alert-warning">
+				<span class="icon_message"></span>
+				Javascript is needed to automatically import metadata from VCS.
+			</div>
+		</noscript>
+	{% endif %}
+	<script src="/static/package_edit.js"></script>
+{% endblock %}
+
 {% block content %}
 	<h1>Create Package</h1>
 
@@ -17,76 +42,61 @@
 	</div>
 
 
-	{% from "macros/forms.html" import render_field, render_submit_field, form_includes, render_multiselect_field, render_mpackage_field, render_deps_field, package_lists %}
-	{{ form_includes() }}
 	{{ package_lists() }}
 
 	<form method="POST" action="" class="tableform">
 		{{ form.hidden_tag() }}
 
-		<h2 class="pkg_meta">Package</h2>
-
-		{{ render_field(form.type, class_="pkg_meta") }}
-		{{ render_field(form.name, class_="pkg_meta") }}
-		{{ render_field(form.title, class_="pkg_meta") }}
-		{{ render_field(form.shortDesc, class_="pkg_meta") }}
-		{{ render_field(form.desc, class_="pkg_meta") }}
-		{{ render_multiselect_field(form.tags, class_="pkg_meta") }}
-		<div class="pkg_meta">
-			{{ render_field(form.license, class_="not_txp") }}
-		</div>
-		{{ render_field(form.media_license, class_="pkg_meta") }}
+		<fieldset>
+			<legend>Package</legend>
+
+			{{ render_field(form.type, class_="pkg_meta") }}
+			{{ render_field(form.name, class_="pkg_meta") }}
+			{{ render_field(form.title, class_="pkg_meta") }}
+			{{ render_field(form.shortDesc, class_="pkg_meta") }}
+			{{ render_field(form.desc, class_="pkg_meta") }}
+			{{ render_multiselect_field(form.tags, class_="pkg_meta") }}
+			<div class="pkg_meta">
+				{{ render_field(form.license, class_="not_txp") }}
+			</div>
+			{{ render_field(form.media_license, class_="pkg_meta") }}
+		</fieldset>
 
-		<div class="pkg_meta">
-			<h2 class="not_txp">Dependency Info</h2>
+		<fieldset class="pkg_meta">
+			<legend class="not_txp">Package</legend>
 
 			{{ render_mpackage_field(form.provides_str, class_="not_txp", placeholder="Comma separated list") }}
 			{{ render_deps_field(form.harddep_str, class_="not_txp not_game", placeholder="Comma separated list") }}
 			{{ render_deps_field(form.softdep_str, class_="not_txp not_game", placeholder="Comma separated list") }}
-		</div>
+		</fieldset>
 
-		<h2 class="pkg_meta">Repository and Links</h2>
+		<fieldset>
+			<legend class="pkg_meta">Repository and Links</legend>
 
-		<div class="pkg_wiz_1">
-			<p>Enter the repo URL for the package.
-			If the repo uses git then the metadata will be automatically imported.</p>
+			<div class="pkg_wiz_1">
+				<p>Enter the repo URL for the package.
+				If the repo uses git then the metadata will be automatically imported.</p>
 
-			<p>Leave blank if you don't have a repo. Click skip if the import fails.</p>
-		</div>
+				<p>Leave blank if you don't have a repo. Click skip if the import fails.</p>
+			</div>
 
-		{{ render_field(form.repo, class_="pkg_repo") }}
+			{{ render_field(form.repo, class_="pkg_repo") }}
 
-		<div class="pkg_wiz_1">
-			<a id="pkg_wiz_1_next" class="btn btn-primary">Next (Autoimport)</a>
-			<a id="pkg_wiz_1_skip" class="btn btn-default">Skip Autoimport</a>
-		</div>
 
-		<div class="pkg_wiz_2">
-			Importing... (This may take a while)
-		</div>
+			<div class="pkg_wiz_1">
+				<a id="pkg_wiz_1_next" class="btn btn-primary">Next (Autoimport)</a>
+				<a id="pkg_wiz_1_skip" class="btn btn-default">Skip Autoimport</a>
+			</div>
 
-		{{ render_field(form.website, class_="pkg_meta") }}
-		{{ render_field(form.issueTracker, class_="pkg_meta") }}
-		{{ render_field(form.forums, class_="pkg_meta") }}
-		<div class="pkg_meta">{{ render_submit_field(form.submit) }}</div>
-	</form>
+			<div class="pkg_wiz_2">
+				Importing... (This may take a while)
+			</div>
 
-	<script src="/static/simplemde.min.js"></script>
-	<link rel="stylesheet" type="text/css" href="/static/simplemde.min.css">
-	<script>
-		var simplemde = new SimpleMDE({ element: $("#desc")[0] });
-	</script>
+			{{ render_field(form.website, class_="pkg_meta") }}
+			{{ render_field(form.issueTracker, class_="pkg_meta") }}
+			{{ render_field(form.forums, class_="pkg_meta") }}
+		</fieldset>
 
-	{% if enable_wizard %}
-		<script src="/static/url.min.js"></script>
-		<script src="/static/polltask.js"></script>
-		<script src="/static/package_create.js"></script>
-		<noscript>
-			<div class="box box_grey alert alert-warning">
-				<span class="icon_message"></span>
-				Javascript is needed to automatically import metadata from VCS.
-			</div>
-		</noscript>
-	{% endif %}
-	<script src="/static/package_edit.js"></script>
+		<div class="pkg_meta">{{ render_submit_field(form.submit) }}</div>
+	</form>
 {% endblock %}