Backups/Mango
1
0
Fork 0
mirror of https://github.com/hkalexling/Mango.git synced 2025-08-02 10:55:30 -04:00
Code Issues Projects Releases Wiki Activity

Add multi-select for cards in web interface

Browse Source
This commit is contained in:
Alex Ling 2020-07-30 08:32:00 +00:00
parent d4abee52db
commit e4fd7c58ee
3 changed files with 23 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
public/js/title.js
View File

@ -182,3 +182,11 @@ const setupUpload = (eid) => {
}
});
};
const deselectAll = () => {
$('.item .uk-card').each((i, e) => {
const data = e.__x.$data;
if (!data['disabled'])
data['selected'] = false;
});
};

14
src/views/components/card.html.ecr
View File

@ -35,12 +35,20 @@
onclick="location='<%= base_url %>book/<%= item.id %>'"
<% end %>>
<div class="uk-card uk-card-default">
<div class="uk-card-media-top">
<img data-src="<%= item.cover_url %>" data-width data-height alt="" uk-img
<div class="uk-card uk-card-default" x-data="{selected: false, hover: false, disabled: true}" :class="{selected: selected}"
<% if page == "title" && item.is_a?(Entry) && item.err_msg.nil? %>
x-init="disabled = false"
<% end %>>
<div class="uk-card-media-top uk-inline" @mouseenter="hover = true" @mouseleave="hover = false">
<img data-src="<%= item.cover_url %>" width="100%" height="100%" alt="" uk-img
<% if item.is_a? Entry && item.err_msg %>
class="grayscale"
<% end %>>
<div class="uk-overlay-primary uk-position-cover" x-show="!disabled && (selected || hover)">
<div class="uk-position-center">
<span class="fas fa-check-circle" @click.stop="selected = !selected; $dispatch(selected ? 'add' : 'remove')" :style="`color:${selected && 'orange'};transform:scale(3,3)`"></span>
</div>
</div>
</div>
<div class="uk-card-body">

4
src/views/title.html.ecr
View File

@ -1,4 +1,8 @@
<div>
<div class="uk-card uk-card-body uk-card-default uk-margin-bottom" uk-sticky x-data="{count: 0}" @add.window="count++" @remove.window="count--" x-show="count > 0" style="border:orange;border-style:solid;" x-cloak>
<p class="uk-display-inline" x-text="count + ' items selected'" style="color:orange"></p>
<a uk-icon="icon:close;" class="uk-align-right" @click="deselectAll(); count = 0"></a>
</div>
<h2 class=uk-title><span><%= title.display_name %></span>
&nbsp;
<% if is_admin %>