0ct0pu5/XBackBone
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Frontend for tag system

Browse source
This commit is contained in:
Sergio Brighenti 2020-03-17 16:25:46 +01:00
parent fd10fe21da
commit 753f1ca71c
5 changed files with 74 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
resources/templates/dashboard/grid.twig
View file

@ -34,11 +34,13 @@
</div>
</div>
</div>
<div class="overlay-rows-center">
<a class="btn btn-link btn-block text-light" href="{{ urlFor('/' ~ media.user_code ~ '/' ~ media.code ~ '.' ~ media.extension) }}" target="_blank"><i class="fas fa-external-link-alt fa-2x text-shadow-link"></i></a>
</div>
<div class="overlay-rows-bottom">
bottom
<a class="btn btn-link btn-block text-light overlay-rows-center" href="{{ urlFor('/' ~ media.user_code ~ '/' ~ media.code ~ '.' ~ media.extension) }}" target="_blank">
<div>
<i class="fas fa-external-link-alt fa-2x text-shadow-link"></i>
</div>
</a>
<div class="overlay-rows-bottom pl-3 pr-3 pb-1">
<a href="javascript:void(0)" class="badge badge-pill badge-success shadow-sm tag-add"><i class="fas fa-plus fa-sm fa-fw"></i></a>
</div>
</div>
</div>

9
resources/templates/dashboard/list.twig
View file

@ -40,9 +40,14 @@
<i class="far {{ mime2font(media.mimetype) }} fa-2x"></i>
{% endif %}
</td>
<td><span class="text-maxlen">{{ media.filename }}</span></td>
<td>
<span class="text-maxlen">{{ media.filename }}</span>
<p>
<a href="javascript:void(0)" class="badge badge-pill badge-success shadow-sm tag-add"><i class="fas fa-plus fa-sm fa-fw"></i></a>
</p>
</td>
<td>{{ media.size }}</td>
<td id="published_{{ media.id }}">
<td id="published_{{ media.id }}" class="text-center">
{% if media.published %}
<span class="badge badge-success"><i class="fas fa-check"></i></span>
{% else %}

4
resources/templates/user/index.twig
View file

@ -36,14 +36,14 @@
<pre>{{ user.user_code|default(lang('none')) }}</pre>
</td>
<td>{{ humanFileSize(user.current_disk_quota) }}{% if quota_enabled == 'on' %}/{{ user.max_disk_quota > 0 ? humanFileSize(user.max_disk_quota) : '∞' }}{% endif %}</td>
<td>
<td class="text-center">
{% if user.active %}
<span class="badge badge-success"><i class="fas fa-check"></i></span>
{% else %}
<span class="badge badge-danger"><i class="fas fa-times"></i></span>
{% endif %}
</td>
<td>
<td class="text-center">
{% if user.is_admin %}
<span class="badge badge-success"><i class="fas fa-check"></i></span>
{% else %}

14
src/css/app.css
View file

@ -184,4 +184,18 @@ body {
.pt-2d5 {
padding-top: .8rem
}
.bg-light {
border: 0 !important;
}
.form-control-verysm {
height: calc(1em + .2rem + 2px);
font-size: .8rem;
}
.tag-item {
user-select: none;
cursor: pointer;
}

44
src/js/app.js
View file

@ -29,6 +29,9 @@ var app = {
$('.bulk-selector').contextmenu(app.bulkSelect);
$('#bulk-delete').click(app.bulkDelete);
$('.tag-add').click(app.addTag);
$('.tag-item').dblclick(app.removeTag);
$('.alert').fadeTo(10000, 500).slideUp(500, function () {
$('.alert').slideUp(500);
});
@ -138,6 +141,47 @@ var app = {
});
});
$(this).addClass('disabled');
},
addTag: function (e) {
var $caller = $(this);
var $newAddTag = $caller.clone()
.click(app.addTag)
.appendTo($caller.parent());
var tagInput = $(document.createElement('input'))
.addClass('form-control form-control-verysm tag-input')
.keydown(function (e) {
if (e.keyCode === 13 || e.keyCode === 32) { // enter -> save tag
app.saveTag.call($(this)); // change context
if (e.keyCode === 32) { // space -> save and add new tag
$newAddTag.click();
}
return false;
}
})
.focusout(app.saveTag);
$caller.off()
.removeClass('badge-success badge-light')
.html(tagInput)
.children()
.focus();
},
saveTag: function () {
var tag = $(this).val();
if (tag === '') {
$(this).parent().remove();
}
console.log(tag);
var $newTag = $(document.createElement('span'))
.addClass('badge badge-pill badge-light shadow-sm tag-item')
.dblclick(app.removeTag)
.text(tag);
$(this).parent().replaceWith($newTag);
},
removeTag: function (e) {
e.preventDefault();
$(this).remove();
}
};