Skip to content

Commit d8a7071

Browse files
tdrueztdruez
committed
refine the UI for content selection
Signed-off-by: tdruez <tdruez@aboutcode.org>
1 parent 07ce56d commit d8a7071

5 files changed

Lines changed: 58 additions & 44 deletions

File tree

‎scancodeio/static/main.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,25 @@
122122
.modal.is-medium-size .modal-card {
123123
width: 800px;
124124
}
125+
.json-section-option {
126+
cursor: pointer;
127+
border: 2px solid transparent;
128+
transition:
129+
border-color 0.15s ease,
130+
background-color 0.15s ease;
131+
}
132+
.json-section-option:hover {
133+
border-color: var(--bulma-success);
134+
}
135+
.json-section-option:has(input:checked) {
136+
border-color: var(--bulma-success);
137+
background-color: hsla(
138+
var(--bulma-success-h),
139+
var(--bulma-success-s),
140+
var(--bulma-success-l),
141+
0.08
142+
);
143+
}
125144
.modal.is-desktop-size .modal-card {
126145
width: 960px;
127146
}

‎scanpipe/templates/scanpipe/dropdowns/project_download_dropdown.html‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
{% load humanize %}
21
<div class="dropdown is-hoverable is-right">
32
<div class="dropdown-trigger">
43
<a aria-haspopup="true" aria-controls="dropdown-download-{{ project.slug }}">
@@ -10,12 +9,7 @@
109
<span class="dropdown-item">
1110
Download results as:
1211
</span>
13-
<a href="#" class="dropdown-item modal-button" data-target="modal-json-download"
14-
data-url="{% url 'project_results' project.slug 'json' %}"
15-
data-package-count="{{ project.package_count|intcomma }}"
16-
data-dependency-count="{{ project.dependency_count|intcomma }}"
17-
data-resource-count="{{ project.resource_count|intcomma }}"
18-
data-relation-count="{{ project.relation_count|intcomma }}">
12+
<a href="#" class="dropdown-item modal-button" data-target="modal-json-download-{{ project.slug }}">
1913
<strong>JSON</strong>
2014
</a>
2115
<a href="{% url 'project_results' project.slug 'xlsx' %}" class="dropdown-item">
@@ -52,4 +46,5 @@
5246
</a>
5347
</div>
5448
</div>
55-
</div>
49+
</div>
50+
{% include "scanpipe/modals/project_json_download_modal.html" with project=project only %}

‎scanpipe/templates/scanpipe/includes/project_downloads.html‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,8 @@
1-
{% load humanize %}
21
<article class="message is-success">
32
<div class="message-body p-3">
43
<span class="icon"><i class="fa-solid fa-download"></i></span>
54
Download results:
6-
<a href="#" class="tag is-success is-medium ml-2 modal-button" data-target="modal-json-download"
7-
data-url="{% url 'project_results' project.slug 'json' %}"
8-
data-package-count="{{ project.package_count|intcomma }}"
9-
data-dependency-count="{{ project.dependency_count|intcomma }}"
10-
data-resource-count="{{ project.resource_count|intcomma }}"
11-
data-relation-count="{{ project.relation_count|intcomma }}"
12-
aria-haspopup="true">
5+
<a href="#" class="tag is-success is-medium ml-2 modal-button" data-target="modal-json-download-{{ project.slug }}" aria-haspopup="true">
136
JSON
147
</a>
158
<a class="tag is-success is-medium" href="{% url 'project_results' project.slug 'xlsx' %}">

‎scanpipe/templates/scanpipe/modals/project_json_download_modal.html‎

Lines changed: 35 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,45 @@
1-
<div class="modal" id="modal-json-download">
1+
{% load humanize %}
2+
<div class="modal" id="modal-json-download-{{ project.slug }}">
23
<div class="modal-background"></div>
34
<div class="modal-card">
45
<header class="modal-card-head">
5-
<p class="modal-card-title">Download JSON results</p>
6+
<p class="modal-card-title">
7+
<span class="icon-text">
8+
<span class="icon has-text-success"><i class="fa-solid fa-download"></i></span>
9+
<span>Download JSON results</span>
10+
</span>
11+
</p>
612
<button class="delete" aria-label="close"></button>
713
</header>
8-
<form action="" method="get">
14+
<form action="{% url 'project_results' project.slug 'json' %}" method="get">
915
<section class="modal-card-body">
10-
<p class="mb-3">Select the sections to include in the JSON output:</p>
11-
<div class="field">
12-
<label class="checkbox">
13-
<input type="checkbox" name="sections" value="packages" checked>
14-
Packages (<span data-label="packageCount">0</span>)
16+
<p class="has-text-grey mb-4">Select the sections to include in the JSON output.</p>
17+
<label class="json-section-option box has-border-radius p-3 mb-2 is-flex is-align-items-center">
18+
<span class="icon has-text-success is-size-4 mr-3"><i class="fa-solid fa-box"></i></span>
19+
<span class="has-text-weight-semibold is-flex-grow-1">Packages</span>
20+
<span class="tag is-light has-text-weight-bold mr-2">{{ project.package_count|intcomma }}</span>
21+
<input type="checkbox" class="width-1 height-1" name="sections" value="packages" checked>
22+
</label>
23+
<label class="json-section-option box has-border-radius p-3 mb-2 is-flex is-align-items-center">
24+
<span class="icon has-text-success is-size-4 mr-3"><i class="fa-solid fa-layer-group"></i></span>
25+
<span class="has-text-weight-semibold is-flex-grow-1">Dependencies</span>
26+
<span class="tag is-light has-text-weight-bold mr-2">{{ project.dependency_count|intcomma }}</span>
27+
<input type="checkbox" class="width-1 height-1" name="sections" value="dependencies" checked>
28+
</label>
29+
<label class="json-section-option box has-border-radius p-3 mb-2 is-flex is-align-items-center">
30+
<span class="icon has-text-success is-size-4 mr-3"><i class="fa-solid fa-folder-open"></i></span>
31+
<span class="has-text-weight-semibold is-flex-grow-1">Resources</span>
32+
<span class="tag is-light has-text-weight-bold mr-2">{{ project.resource_count|intcomma }}</span>
33+
<input type="checkbox" class="width-1 height-1" name="sections" value="files" checked>
34+
</label>
35+
{% if project.relation_count %}
36+
<label class="json-section-option box has-border-radius p-3 mb-0 is-flex is-align-items-center">
37+
<span class="icon has-text-success is-size-4 mr-3"><i class="fa-solid fa-link"></i></span>
38+
<span class="has-text-weight-semibold is-flex-grow-1">Relations</span>
39+
<span class="tag is-light has-text-weight-bold mr-2">{{ project.relation_count|intcomma }}</span>
40+
<input type="checkbox" class="width-1 height-1" name="sections" value="relations" checked>
1541
</label>
16-
</div>
17-
<div class="field">
18-
<label class="checkbox">
19-
<input type="checkbox" name="sections" value="dependencies" checked>
20-
Dependencies (<span data-label="dependencyCount">0</span>)
21-
</label>
22-
</div>
23-
<div class="field">
24-
<label class="checkbox">
25-
<input type="checkbox" name="sections" value="files" checked>
26-
Resources (<span data-label="resourceCount">0</span>)
27-
</label>
28-
</div>
29-
<div class="field">
30-
<label class="checkbox">
31-
<input type="checkbox" name="sections" value="relations" checked>
32-
Relations (<span data-label="relationCount">0</span>)
33-
</label>
34-
</div>
42+
{% endif %}
3543
</section>
3644
<input type="hidden" name="filtered" value="1">
3745
<footer class="modal-card-foot is-justify-content-flex-end">

‎scanpipe/templates/scanpipe/project_list.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,6 @@
5858
{% block modals %}
5959
{% include 'scanpipe/modals/run_modal.html' %}
6060
{% include "scanpipe/modals/projects_download_modal.html" %}
61-
{% include "scanpipe/modals/project_json_download_modal.html" %}
6261
{% include "scanpipe/modals/projects_report_modal.html" %}
6362
{% include "scanpipe/modals/projects_archive_modal.html" %}
6463
{% include "scanpipe/modals/projects_delete_modal.html" %}

0 commit comments

Comments
 (0)