Skip to content

Commit

Permalink
Improved License Input and Details UI #450
Browse files Browse the repository at this point in the history 
* Set Input Textarea to 15
* Added file-upload into form
* Changed <pre> to <textarea> in the details page
* Modified Navigation Bar and Renamed Scan Again Button

Signed-off-by: Akhil Raj <lf32.dev@gmail.com>
  • Loading branch information
@lf32
lf32 committed Jun 20, 2022
1 parent 49fe7a5 commit 747222d
Show file tree
Hide file tree
Showing 6 changed files with 89 additions and 78 deletions.
3 changes: 3 additions & 0 deletions scanpipe/templates/scanpipe/includes/navbar_header.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@
<a class="navbar-item" href="{% url 'project_list' %}">
Projects
</a>
<a class="navbar-item" href="{% url 'license_scan' %}">
Scan
</a>
<a class="navbar-item" href="https://scancodeio.readthedocs.org/" target="_blank">
Documentation
</a>
Expand Down
4 changes: 2 additions & 2 deletions scantext/forms.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,11 @@
from django import forms


class EditorForm(forms.Form):
class LicenseForm(forms.Form):
input_text = forms.CharField(
widget=forms.Textarea(
attrs={
"rows": 25,
"rows": 15,
"class": "textarea has-fixed-size",
"placeholder": "Paste your license text here.",
}
Expand Down
39 changes: 39 additions & 0 deletions scantext/templates/scantext/includes/license_detail_card.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
{% for license in result.licenses %}
<div class="licenses-card">
<div class="card-header is-flex is-justify-content-space-between">
<div class="card-header-title" title="{{ license.short_name }}">
{% if license.homepage_url %}
<a href="{{ license.homepage_url }}" title="{{ license.name }} ({{ license.short_name }})">{{ license.short_name }}</a> {% else %} {{ license.short_name }} {% endif %}
</div>
<div class="is-flex is-justify-content-row is-align-items-center">
<p class="lines tag is-6 mx-1 is-light is-info">
{% if license.start_line == license.end_line %} Line {{ license.start_line }} {% else %} Lines {{ license.start_line }} - {{ license.end_line }} {% endif %}
</p>
<p class="tag is-6 mx-1 is-light
{% if license.score == 100 %} is-success {% else %} is-warning {% endif %}">{{ license.score }}</p>
<p class="card-header-icon" aria-label="more options">
<span class="icon">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</p>
</div>
</div>
<div class="card-content is-hidden">
<div class="content">
<div class="is-flex is-justify-content-space-between">
<div>
<p class="subtitle is-5">Matched Text</p>
</div>
<div>
<p class="tag is-6 mx-1 is-light is-primary">{{ license.category }}</p>
<a class="tag is-6 mx-1 is-light is-link" href="{{ license.reference_url }}">ref</a>
<p class="tag is-6 mx-1 is-light is-info">
{% if license.start_line == license.end_line %} Line {{ license.start_line }} {% else %} Lines {{ license.start_line }} - {{ license.end_line }} {% endif %}
</p>
</div>
</div>
<textarea class="textarea has-fixed-size" rows="15" style="cursor: text;" disabled>{{ license.matched_text }}</textarea>
</div>
</div>
</div>
{% endfor %}
8 changes: 4 additions & 4 deletions scantext/templates/scantext/includes/license_summary_level.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,24 +4,24 @@
<div>
<p class="heading">Percentage Of License Text</p>
<p class="title">
<span>{{ expr.percentage_of_license_text }}</span>
<span>{{ result.percentage_of_license_text }}</span>
</p>
</div>
</div>
<div class="level-item has-text-centered">
<div>
<p class="heading">License Expressions</p>
<p class="title">
<span>{{ expr.license_expressions|length }}</span>
<span>{{ result.license_expressions|length }}</span>
</p>
</div>
</div>
<div class="level-item has-text-centered">
<div>
<p class="heading">Licenses</p>
<p class="title">
<span>{{ expr.licenses|length }}</span>
<span>{{ result.licenses|length }}</span>
</p>
</div>
</div>
</nav>
</nav>
72 changes: 14 additions & 58 deletions scantext/templates/scantext/license_detail.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,69 +6,26 @@
{% include 'scanpipe/includes/navbar_header.html' %}
<div class="mx-5 mb-2">{% include 'scanpipe/includes/messages.html' %}</div>

<section class="section p-0">
<div class="is-flex is-justify-content-space-between is-align-items-center mb-2">
<div class="mb-2">
<h1 class="title is-4">License Detection Summary</h1>
</div>
<div>
<a href="{% url 'license_scan' %}" class="button is-link">Scan Again</a>
</div>
<section class="mx-1 mb-0">
<div class="is-flex is-justify-content-space-between">
<h1 class="title is-4">License Detection Summary</h1>
<a href="{% url 'license_scan' %}" class="button is-link">New Scan</a>
</div>
</section>

<hr class="mx-5">
{% include "scantext/includes/license_summary_level.html" with expr=expr %}
<hr class="mx-5">
<hr class="mx-1 mt-0">
{% include 'scantext/includes/license_summary_level.html' with result=result %}
<hr class="mx-1">

<div class="columns mb-5">
<div class="columns mb-5 mx-1">
<div class="column is-half">
<p class="title is-4">Input License Text</p>
<pre>{{ text }}</pre>
<p class="title is-5">Input License Text</p>
<textarea class="textarea has-fixed-size" rows="25" style="cursor: text;" disabled>{{ text }}</textarea>
</div>
<div class="column is-half">
<p class="title is-4">Detected Licenses</p>
<p class="title is-5">Detected Licenses</p>
<div class="card">
{% for license in expr.licenses %}
<div class="licenses-card">
<div class="card-header is-flex is-justify-content-space-between">
<div class="card-header-title" title="{{ license.short_name }}">
{% if license.homepage_url %}
<a href="{{ license.homepage_url }}" title="{{ license.name }} ({{ license.short_name }})">{{ license.short_name }}</a>
{% else %} {{ license.short_name }} {% endif %}
</div>
<div class="is-flex is-justify-content-row is-align-items-center">
<p class="lines tag is-6 mx-1 is-light is-info">
{% if license.start_line == license.end_line %} Line {{ license.start_line }} {% else %} Lines {{ license.start_line }} - {{ license.end_line }} {% endif %}
</p>
<p class="tag is-6 mx-1 is-light
{% if license.score == 100 %} is-success {% else %} is-warning {% endif %}">{{ license.score }}</p>
<p class="card-header-icon" aria-label="more options">
<span class="icon">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</p>
</div>
</div>
<div class="card-content is-hidden">
<div class="content">
<div class="is-flex is-justify-content-space-between">
<div>
<p class="subtitle is-5">Matched Text</p>
</div>
<div>
<p class="tag is-6 mx-1 is-light is-primary">{{ license.category }}</p>
<a class="tag is-6 mx-1 is-light is-link" href="{{ license.reference_url }}">ref</a>
<p class="tag is-6 mx-1 is-light is-info">
{% if license.start_line == license.end_line %} Line {{ license.start_line }} {% else %} Lines {{ license.start_line }} - {{ license.end_line }} {% endif %}
</p>
</div>
</div>
<pre>{{ license.matched_text }}</pre>
</div>
</div>
</div>
{% endfor %}
{% include 'scantext/includes/license_detail_card.html' with result=result %}
</div>
</div>
</div>
Expand All @@ -93,7 +50,6 @@ <h1 class="title is-4">License Detection Summary</h1>
lineTag.remove('is-hidden')
}
})
})

})
</script>
{% endblock %}
{% endblock %}
41 changes: 27 additions & 14 deletions ...text/templates/scantext/license_scan.html → ...templates/scantext/license_scan_form.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,9 @@
{% include 'scanpipe/includes/navbar_header.html' %}
<div class="mx-5 mb-2">{% include 'scanpipe/includes/messages.html' %}</div>

<section class="section pt-0">
<div class="is-flex is-justify-content-space-between is-align-items-center mb-2">
<div class="mb-2">
<h1 class="title is-5">Scan License</h1>
</div>
<div>
<a href="{% url 'project_list' %}" class="button is-link">Go to Projects</a>
</div>
<section class="mx-5 mb-4">
<div class="mb-4">
<h1 class="title is-4">Scan License</h1>
</div>
<form method="post" action="{% url 'license_scan' %}">
{% csrf_token %}
Expand All @@ -26,9 +21,9 @@ <h1 class="title is-5">Scan License</h1>
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">Choose a file to scan…</span>
<span class="file-label-text">Choose a file to scan…</span>
</span>
<span class="file-name">/home/user/dev/license-text.txt</span>
<span class="file-name is-hidden"></span>
</label>
</div>
<div class="column is-half">
Expand All @@ -38,13 +33,31 @@ <h1 class="title is-5">Scan License</h1>
</form>
</section>
</div>
{% endblock %} {% block scripts %}
{% endblock %}

{% block scripts %}
<script>
let form = document.querySelector('form');
const fileInput = document.querySelector('#id_input_file');
fileInput.onchange = updateFile;

// Update the file name on upload
function updateFile() {
const fileName = document.querySelector('.file-name');
console.log(fileInput.files)
if (fileInput.files.length > 0) {
fileName.classList.remove('is-hidden')
fileName.innerHTML = fileInput.files[0].name;
}
}

// let form = document.querySelector('form');

// form.addEventListener('submit', (event) => {

// if (!form["id_input_file"].files.length && !form["id_input_text"].value.length) return false;
// if (!form["id_input_file"].files.length && !form["id_input_text"].value.length) {
// console.log("err");
// }
// });

</script>
{% endblock %} -->
{% endblock %}

0 comments on commit 747222d

Please sign in to comment.