Skip to content

Commit

Permalink
Fix the plugins list table
Browse files Browse the repository at this point in the history
  • Loading branch information
@Xpirix
Xpirix committed Oct 7, 2024
1 parent 3731666 commit 3ee659e
Show file tree
Hide file tree
Showing 3 changed files with 67 additions and 33 deletions.
86 changes: 55 additions & 31 deletions qgis-app/plugins/templates/plugins/plugin_list.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,46 +59,49 @@ <h2>{% if title %}{{title}}{% else %}{% trans "All plugins" %}{% endif %}</h2>
<div class="mt-3 is-flex is-justify-content-space-between is-flex-wrap-wrap">
<div>
<div class="field has-addons">
<p class="control">
<button id="grid-view-btn" class="button is-small is-info">
<span class="icon is-small">
<i class="fas fa-th"></i>
</span>
<span>Grid View</span>
</button>
</p>
<p class="control">
<button id="table-view-btn" class="button is-small">
<span class="icon is-small">
<i class="fas fa-table"></i>
</span>
<span>Table View</span>
</button>
</p>
<p class="control">
<button id="grid-view-btn" class="button is-small is-info">
<span class="icon is-small">
<i class="fas fa-th"></i>
</span>
<span>Grid View</span>
</button>
</p>
<p class="control">
<button id="table-view-btn" class="button is-small">
<span class="icon is-small">
<i class="fas fa-table"></i>
</span>
<span>Table View</span>
</button>
</p>
</div>
</div>
<div>
{% include "plugins/plugin_list_sort.html" %}
</div>
</div>

<div id="grid-view" class="columns is-multiline plugins-list-grid">
<div id="grid-view" class="columns is-multiline plugins-list-grid is-hidden">
{% for object in object_list %}
{% include "plugins/plugin_list_grid_card.html" %}
{% endfor %}
</div>

<div id="table-view" class="table_container box-content is-hidden">
<div id="table-view" class="table-container is-hidden pt-0">
<table class="table plugins-list-table">
<thead>
<tr>
<th class="pt-3 pb-3">&nbsp;</th>
<th class="pt-3 pb-3">{% trans "Name" %}</th>
{% if not user.is_anonymous %}<th class="pt-3 pb-3"><img title="{% trans "Approved" %}" src="{% static "images/tick_16.png" %}" alt="{% trans "Approved" %}"/></th>{% endif %}
<th class="pt-3 pb-3">{% trans "Downloads" %}</th>
<th class="pt-3 pb-3"><i class="fas fa-download" title="{% trans "Downloads" %}"></i></th>
<th class="pt-3 pb-3">{% trans "Author" %}</th>
<th class="pt-3 pb-3">{% trans "Latest Plugin Version" %}</th>
<th class="pt-3 pb-3">{% trans "Latest Version" %}</th>
<th class="pt-3 pb-3">{% trans "Created On" %}</th>
<th class="pt-3 pb-3">{% trans "Stars (votes)" %}</th>
<th><i class="fas fa-check" title="{% trans "Stable" %}"></i></th>
<th><i class="fas fa-flask" title="{% trans "Experimental" %}"></i></th>
{% if user.is_authenticated %}<th colspan="2" class="pt-3 pb-3">{% trans "Manage" %}</th>{% endif %}
</tr>
</thead>
Expand All @@ -125,7 +128,7 @@ <h2>{% if title %}{{title}}{% else %}{% trans "All plugins" %}{% endif %}</h2>
</span>
</td>
{% if not user.is_anonymous %}<td>{% if object.approved %}<img src="{% static "images/tick_16.png" %}" />{% else %}&mdash;{% endif %}</td>{% endif %}
<td>{{ object.downloads }}</td>
<td class="has-text-right">{{ object.downloads|intcomma }}</td>
{% if object.author %}
<td>
<a class="author" title="{% trans "See all plugins by"%} {{ object.author }}" href="{% url "author_plugins" object.author %}">
Expand All @@ -134,7 +137,11 @@ <h2>{% if title %}{{title}}{% else %}{% trans "All plugins" %}{% endif %}</h2>
</td>
{% endif %}
<td>{{ object.latest_version_date|local_timezone:"SHORT_NATURAL_DAY" }}</td>
<td>{{ object.created_on|local_timezone:"SHORT" }}</td>
<td><div><div class="star-ratings"><span style="width:{% widthratio object.average_vote 5 100 %}%" class="rating"></span></div> ({{ object.rating_votes }})</div></td>

<td>{% if object.stable %}<a href="{% url "version_download" object.package_name object.stable.version %}" title="{% trans "Download the stable version" %}" >{{ object.stable.version }}</a>{% else %}&mdash;{% endif %}</td>
<td>{% if object.experimental %}<a href="{% url "version_download" object.package_name object.experimental.version %}" title="{% trans "Download the experimental version" %}" >{{ object.experimental.version }}</a>{% else %}&mdash;{% endif %}</td>
{% if user.is_authenticated %}
{% if user in object.editors or user.is_staff %}
<td>
Expand All @@ -161,18 +168,35 @@ <h2>{% if title %}{{title}}{% else %}{% trans "All plugins" %}{% endif %}</h2>


<script>
document.getElementById('table-view-btn').addEventListener('click', function() {
document.getElementById('table-view').classList.remove('is-hidden');
document.getElementById('grid-view').classList.add('is-hidden');
this.classList.add('is-info');
document.getElementById('grid-view-btn').classList.remove('is-info');
$('#table-view-btn').on('click', function() {
$('#table-view').removeClass('is-hidden');
$('#grid-view').addClass('is-hidden');
$(this).addClass('is-info');
$('#grid-view-btn').removeClass('is-info');
localStorage.setItem('view', 'table');
});

$('#grid-view-btn').on('click', function() {
$('#grid-view').removeClass('is-hidden');
$('#table-view').addClass('is-hidden');
$(this).addClass('is-info');
$('#table-view-btn').removeClass('is-info');
localStorage.setItem('view', 'grid');
});

document.getElementById('grid-view-btn').addEventListener('click', function() {
document.getElementById('grid-view').classList.remove('is-hidden');
document.getElementById('table-view').classList.add('is-hidden');
this.classList.add('is-info');
document.getElementById('table-view-btn').classList.remove('is-info');
$(document).ready(function() {
const view = localStorage.getItem('view');
if (view === 'table') {
$('#table-view').removeClass('is-hidden');
$('#grid-view').addClass('is-hidden');
$('#table-view-btn').addClass('is-info');
$('#grid-view-btn').removeClass('is-info');
} else {
$('#grid-view').removeClass('is-hidden');
$('#table-view').addClass('is-hidden');
$('#grid-view-btn').addClass('is-info');
$('#table-view-btn').removeClass('is-info');
}
});
</script>
<div class="mt-3 mb-3">
Expand Down
9 changes: 8 additions & 1 deletion qgis-app/static/style/scss/bulma/components/plugins-list.sass
View file
Original file line number Diff line number Diff line change
Expand Up @@ -315,6 +315,13 @@ div
border-right: 3px solid #4D6370
border-top: 3px solid #4D6370

.table_container
.table-container
max-width: 100%
overflow: auto
max-height: 50dvh
thead
position: sticky
top: 0
background: white
padding-top: 3rem
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)
5 changes: 4 additions & 1 deletion qgis-app/static/style/scss/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ mark {
background: $white;
border-radius: 10px;
padding: 2rem;
box-shadow: 0rem 0rem 1rem rgba(204, 210, 214, 0.5294117647);
box-shadow: 0rem 0rem 1rem rgba(204, 210, 214, 0.5);
}

h2 {
Expand Down Expand Up @@ -228,6 +228,9 @@ p {
border: none;
}
}
.container {
max-width: unset;
}
}

a.is-active > span {
Expand Down

0 comments on commit 3ee659e

Please sign in to comment.