From 692628653c2dfbe3d3c12ccb233d70e77d95a5e8 Mon Sep 17 00:00:00 2001 From: rubenwardy Date: Sat, 22 Dec 2018 11:23:58 +0000 Subject: [PATCH] Improve package creation form --- .gitignore | 2 +- app/public/static/bootstrap.css | 2 +- app/public/static/tagselector.js | 43 +++++++- app/scss/components.scss | 22 +--- app/scss/{main.scss => custom.scss} | 0 app/templates/base.html | 9 +- app/templates/macros/forms.html | 24 +++-- app/templates/packages/create_edit.html | 134 +++++++++++++----------- 8 files changed, 135 insertions(+), 101 deletions(-) rename app/scss/{main.scss => custom.scss} (100%) 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 = $('') + var tag = $('') .text(item.toString() + ' ') .data("id", item.id) .append('x') .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 = $('') + var tag = $('') .text(value) .data("id", id) .append(' x') .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 similarity index 100% rename from app/scss/main.scss rename to 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 @@ {% block title %}title{% endblock %} - {{ config.USER_APP_NAME }} - + {% block headextra %}{% endblock %} @@ -122,8 +122,9 @@ Report / DMCA - - - + + + + {% block scriptextra %}{% endblock %} 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 @@
{% if field.type != 'HiddenField' and label_visible %} {% if not label %}{% set label=field.label.text %}{% endif %} - + {% endif %} {{ field(class_='form-control', **kwargs) }} {% if field.errors %} @@ -13,9 +13,8 @@
{%- endmacro %} -{% macro form_includes() -%} +{% macro form_scripts() -%} - {% endmacro %} @@ -58,16 +57,17 @@
{% if field.type != 'HiddenField' and label_visible %} {% if not label %}{% set label=field.label.text %}{% endif %} - + {% endif %} -
+
+
{{ field(class_='form-control', **kwargs) }} {% if field.errors %} {% for e in field.errors %} -

{{ e }}

+
{{ e }}
{% endfor %} {% endif %}
@@ -77,13 +77,14 @@
{% if field.type != 'HiddenField' and label_visible %} {% if not label %}{% set label=field.label.text %}{% endif %} - + {% endif %} -
+
{{ field(class_='form-control', **kwargs) }} +
{% if field.errors %} {% for e in field.errors %}

{{ e }}

@@ -96,13 +97,14 @@
{% if field.type != 'HiddenField' and label_visible %} {% if not label %}{% set label=field.label.text %}{% endif %} - + {% endif %} -
+
{{ field(class_='form-control', **kwargs) }} +
{% if field.errors %} {% for e in field.errors %}

{{ e }}

@@ -134,7 +136,7 @@ {% macro render_submit_field(field, label=None, tabindex=None) -%} {% if not label %}{% set label=field.label.text %}{% 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,69 +7,10 @@ {% endif %} {% endblock %} -{% block content %} -

Create Package

+{% from "macros/forms.html" import render_field, render_submit_field, form_scripts, render_multiselect_field, render_mpackage_field, render_deps_field, package_lists %} -
- Have you read the Package Inclusion Policy and Guidance yet? - - View -
- - - {% 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.hidden_tag() }} - -

Package

- - {{ 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") }} -
- {{ render_field(form.license, class_="not_txp") }} -
- {{ render_field(form.media_license, class_="pkg_meta") }} - -
-

Dependency Info

- - {{ 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") }} -
- -

Repository and Links

- -
-

Enter the repo URL for the package. - If the repo uses git then the metadata will be automatically imported.

- -

Leave blank if you don't have a repo. Click skip if the import fails.

-
- - {{ render_field(form.repo, class_="pkg_repo") }} - -
- Next (Autoimport) - Skip Autoimport -
- -
- Importing... (This may take a while) -
- - {{ render_field(form.website, class_="pkg_meta") }} - {{ render_field(form.issueTracker, class_="pkg_meta") }} - {{ render_field(form.forums, class_="pkg_meta") }} -
{{ render_submit_field(form.submit) }}
-
+{% block scriptextra %} + {{ form_scripts() }} @@ -90,3 +31,72 @@ {% endif %} {% endblock %} + +{% block content %} +

Create Package

+ +
+ Have you read the Package Inclusion Policy and Guidance yet? + + View +
+ + + {{ package_lists() }} + +
+ {{ form.hidden_tag() }} + +
+ Package + + {{ 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") }} +
+ {{ render_field(form.license, class_="not_txp") }} +
+ {{ render_field(form.media_license, class_="pkg_meta") }} +
+ +
+ Package + + {{ 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") }} +
+ +
+ Repository and Links + +
+

Enter the repo URL for the package. + If the repo uses git then the metadata will be automatically imported.

+ +

Leave blank if you don't have a repo. Click skip if the import fails.

+
+ + {{ render_field(form.repo, class_="pkg_repo") }} + + +
+ Next (Autoimport) + Skip Autoimport +
+ +
+ Importing... (This may take a while) +
+ + {{ render_field(form.website, class_="pkg_meta") }} + {{ render_field(form.issueTracker, class_="pkg_meta") }} + {{ render_field(form.forums, class_="pkg_meta") }} +
+ +
{{ render_submit_field(form.submit) }}
+
+{% endblock %}