Skip to content

Commit cb9de2d

Browse files
lf32lf32
committed
Improved License Input and Details UI #450
* 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 <[email protected]>
1 parent 49fe7a5 commit cb9de2d

File tree

7 files changed

+90
-79
lines changed

7 files changed

+90
-79
lines changed

‎scanpipe/templates/scanpipe/base.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -57,4 +57,4 @@
5757
<script src="{% static 'htmx-1.7.0.min.js' %}" crossorigin="anonymous" defer></script>
5858
{% block scripts %}{% endblock %}
5959
</body>
60-
</html>
60+
</html>

‎scanpipe/templates/scanpipe/includes/navbar_header.html

+3
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@
99
<a class="navbar-item" href="{% url 'project_list' %}">
1010
Projects
1111
</a>
12+
<a class="navbar-item" href="{% url 'license_scan' %}">
13+
Scan
14+
</a>
1215
<a class="navbar-item" href="https://scancodeio.readthedocs.org/" target="_blank">
1316
Documentation
1417
</a>

‎scantext/forms.py

+2-2
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,11 @@
2323
from django import forms
2424

2525

26-
class EditorForm(forms.Form):
26+
class LicenseForm(forms.Form):
2727
input_text = forms.CharField(
2828
widget=forms.Textarea(
2929
attrs={
30-
"rows": 25,
30+
"rows": 15,
3131
"class": "textarea has-fixed-size",
3232
"placeholder": "Paste your license text here.",
3333
}

‎scantext/templates/scantext/includes/license_detail_card.html

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
{% for license in result.licenses %}
2+
<div class="licenses-card">
3+
<div class="card-header is-flex is-justify-content-space-between">
4+
<div class="card-header-title" title="{{ license.short_name }}">
5+
{% if license.homepage_url %}
6+
<a href="{{ license.homepage_url }}" title="{{ license.name }} ({{ license.short_name }})">{{ license.short_name }}</a> {% else %} {{ license.short_name }} {% endif %}
7+
</div>
8+
<div class="is-flex is-justify-content-row is-align-items-center">
9+
<p class="lines tag is-6 mx-1 is-light is-info">
10+
{% if license.start_line == license.end_line %} Line {{ license.start_line }} {% else %} Lines {{ license.start_line }} - {{ license.end_line }} {% endif %}
11+
</p>
12+
<p class="tag is-6 mx-1 is-light
13+
{% if license.score == 100 %} is-success {% else %} is-warning {% endif %}">{{ license.score }}</p>
14+
<p class="card-header-icon" aria-label="more options">
15+
<span class="icon">
16+
<i class="fas fa-angle-down" aria-hidden="true"></i>
17+
</span>
18+
</p>
19+
</div>
20+
</div>
21+
<div class="card-content is-hidden">
22+
<div class="content">
23+
<div class="is-flex is-justify-content-space-between">
24+
<div>
25+
<p class="subtitle is-5">Matched Text</p>
26+
</div>
27+
<div>
28+
<p class="tag is-6 mx-1 is-light is-primary">{{ license.category }}</p>
29+
<a class="tag is-6 mx-1 is-light is-link" href="{{ license.reference_url }}">ref</a>
30+
<p class="tag is-6 mx-1 is-light is-info">
31+
{% if license.start_line == license.end_line %} Line {{ license.start_line }} {% else %} Lines {{ license.start_line }} - {{ license.end_line }} {% endif %}
32+
</p>
33+
</div>
34+
</div>
35+
<textarea class="textarea has-fixed-size" rows="15" style="cursor: text;" disabled>{{ license.matched_text }}</textarea>
36+
</div>
37+
</div>
38+
</div>
39+
{% endfor %}

‎scantext/templates/scantext/includes/license_summary_level.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -4,24 +4,24 @@
44
<div>
55
<p class="heading">Percentage Of License Text</p>
66
<p class="title">
7-
<span>{{ expr.percentage_of_license_text }}</span>
7+
<span>{{ result.percentage_of_license_text }}</span>
88
</p>
99
</div>
1010
</div>
1111
<div class="level-item has-text-centered">
1212
<div>
1313
<p class="heading">License Expressions</p>
1414
<p class="title">
15-
<span>{{ expr.license_expressions|length }}</span>
15+
<span>{{ result.license_expressions|length }}</span>
1616
</p>
1717
</div>
1818
</div>
1919
<div class="level-item has-text-centered">
2020
<div>
2121
<p class="heading">Licenses</p>
2222
<p class="title">
23-
<span>{{ expr.licenses|length }}</span>
23+
<span>{{ result.licenses|length }}</span>
2424
</p>
2525
</div>
2626
</div>
27-
</nav>
27+
</nav>

‎scantext/templates/scantext/license_detail.html

+14-58
Original file line numberDiff line numberDiff line change
@@ -6,69 +6,26 @@
66
{% include 'scanpipe/includes/navbar_header.html' %}
77
<div class="mx-5 mb-2">{% include 'scanpipe/includes/messages.html' %}</div>
88

9-
<section class="section p-0">
10-
<div class="is-flex is-justify-content-space-between is-align-items-center mb-2">
11-
<div class="mb-2">
12-
<h1 class="title is-4">License Detection Summary</h1>
13-
</div>
14-
<div>
15-
<a href="{% url 'license_scan' %}" class="button is-link">Scan Again</a>
16-
</div>
9+
<section class="mx-1 mb-0">
10+
<div class="is-flex is-justify-content-space-between">
11+
<h1 class="title is-4">License Detection Summary</h1>
12+
<a href="{% url 'license_scan' %}" class="button is-link">New Scan</a>
1713
</div>
1814
</section>
1915

20-
<hr class="mx-5">
21-
{% include "scantext/includes/license_summary_level.html" with expr=expr %}
22-
<hr class="mx-5">
16+
<hr class="mx-1 mt-0">
17+
{% include 'scantext/includes/license_summary_level.html' with result=result %}
18+
<hr class="mx-1">
2319

24-
<div class="columns mb-5">
20+
<div class="columns mb-5 mx-1">
2521
<div class="column is-half">
26-
<p class="title is-4">Input License Text</p>
27-
<pre>{{ text }}</pre>
22+
<p class="title is-5">Input License Text</p>
23+
<textarea class="textarea has-fixed-size" rows="25" style="cursor: text;" disabled>{{ text }}</textarea>
2824
</div>
2925
<div class="column is-half">
30-
<p class="title is-4">Detected Licenses</p>
26+
<p class="title is-5">Detected Licenses</p>
3127
<div class="card">
32-
{% for license in expr.licenses %}
33-
<div class="licenses-card">
34-
<div class="card-header is-flex is-justify-content-space-between">
35-
<div class="card-header-title" title="{{ license.short_name }}">
36-
{% if license.homepage_url %}
37-
<a href="{{ license.homepage_url }}" title="{{ license.name }} ({{ license.short_name }})">{{ license.short_name }}</a>
38-
{% else %} {{ license.short_name }} {% endif %}
39-
</div>
40-
<div class="is-flex is-justify-content-row is-align-items-center">
41-
<p class="lines tag is-6 mx-1 is-light is-info">
42-
{% if license.start_line == license.end_line %} Line {{ license.start_line }} {% else %} Lines {{ license.start_line }} - {{ license.end_line }} {% endif %}
43-
</p>
44-
<p class="tag is-6 mx-1 is-light
45-
{% if license.score == 100 %} is-success {% else %} is-warning {% endif %}">{{ license.score }}</p>
46-
<p class="card-header-icon" aria-label="more options">
47-
<span class="icon">
48-
<i class="fas fa-angle-down" aria-hidden="true"></i>
49-
</span>
50-
</p>
51-
</div>
52-
</div>
53-
<div class="card-content is-hidden">
54-
<div class="content">
55-
<div class="is-flex is-justify-content-space-between">
56-
<div>
57-
<p class="subtitle is-5">Matched Text</p>
58-
</div>
59-
<div>
60-
<p class="tag is-6 mx-1 is-light is-primary">{{ license.category }}</p>
61-
<a class="tag is-6 mx-1 is-light is-link" href="{{ license.reference_url }}">ref</a>
62-
<p class="tag is-6 mx-1 is-light is-info">
63-
{% if license.start_line == license.end_line %} Line {{ license.start_line }} {% else %} Lines {{ license.start_line }} - {{ license.end_line }} {% endif %}
64-
</p>
65-
</div>
66-
</div>
67-
<pre>{{ license.matched_text }}</pre>
68-
</div>
69-
</div>
70-
</div>
71-
{% endfor %}
28+
{% include 'scantext/includes/license_detail_card.html' with result=result %}
7229
</div>
7330
</div>
7431
</div>
@@ -93,7 +50,6 @@ <h1 class="title is-4">License Detection Summary</h1>
9350
lineTag.remove('is-hidden')
9451
}
9552
})
96-
})
97-
53+
})
9854
</script>
99-
{% endblock %}
55+
{% endblock %}

‎scantext/templates/scantext/license_scan.html renamed to ‎scantext/templates/scantext/license_scan_form.html

+27-14
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,9 @@
66
{% include 'scanpipe/includes/navbar_header.html' %}
77
<div class="mx-5 mb-2">{% include 'scanpipe/includes/messages.html' %}</div>
88

9-
<section class="section pt-0">
10-
<div class="is-flex is-justify-content-space-between is-align-items-center mb-2">
11-
<div class="mb-2">
12-
<h1 class="title is-5">Scan License</h1>
13-
</div>
14-
<div>
15-
<a href="{% url 'project_list' %}" class="button is-link">Go to Projects</a>
16-
</div>
9+
<section class="mx-5 mb-4">
10+
<div class="mb-4">
11+
<h1 class="title is-4">Scan License</h1>
1712
</div>
1813
<form method="post" action="{% url 'license_scan' %}">
1914
{% csrf_token %}
@@ -26,9 +21,9 @@ <h1 class="title is-5">Scan License</h1>
2621
<span class="file-icon">
2722
<i class="fas fa-upload"></i>
2823
</span>
29-
<span class="file-label">Choose a file to scan…</span>
24+
<span class="file-label-text">Choose a file to scan…</span>
3025
</span>
31-
<span class="file-name">/home/user/dev/license-text.txt</span>
26+
<span class="file-name is-hidden"></span>
3227
</label>
3328
</div>
3429
<div class="column is-half">
@@ -38,13 +33,31 @@ <h1 class="title is-5">Scan License</h1>
3833
</form>
3934
</section>
4035
</div>
41-
{% endblock %} {% block scripts %}
36+
{% endblock %}
37+
38+
{% block scripts %}
4239
<script>
43-
let form = document.querySelector('form');
40+
const fileInput = document.querySelector('#id_input_file');
41+
fileInput.onchange = updateFile;
42+
43+
// Update the file name on upload
44+
function updateFile() {
45+
const fileName = document.querySelector('.file-name');
46+
console.log(fileInput.files)
47+
if (fileInput.files.length > 0) {
48+
fileName.classList.remove('is-hidden')
49+
fileName.innerHTML = fileInput.files[0].name;
50+
}
51+
}
52+
53+
// let form = document.querySelector('form');
4454

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

47-
// if (!form["id_input_file"].files.length && !form["id_input_text"].value.length) return false;
57+
// if (!form["id_input_file"].files.length && !form["id_input_text"].value.length) {
58+
// console.log("err");
59+
// }
4860
// });
61+
4962
</script>
50-
{% endblock %} -->
63+
{% endblock %}

0 commit comments

Comments
 (0)