Improve batch mark UX (#97)

getmango · Dec 27, 2020 · ec5256d · ec5256d
1 parent 4e70707
commit ec5256d
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 2 deletions.
diff --git a/src/views/components/card.html.ecr b/src/views/components/card.html.ecr
@@ -35,7 +35,7 @@
       onclick="location='<%= base_url %>book/<%= item.id %>'" 
     <% end %>>
 
-    <div class="uk-card uk-card-default" x-data="{selected: false, hover: false, disabled: true}" :class="{selected: selected}"
+    <div class="uk-card uk-card-default" x-data="{selected: false, hover: false, disabled: true, selecting: false}" :class="{selected: selected}" @count.window="selecting = $event.detail.count > 0"
       <% if page == "title" && item.is_a?(Entry) && item.err_msg.nil? %>
         x-init="disabled = false"
       <% end %>>
@@ -45,6 +45,7 @@
           class="grayscale"
         <% end %>>
         <div class="uk-overlay-primary uk-position-cover" x-show="!disabled && (selected || hover)">
+          <div class="uk-height-1-1 uk-width-1-1" x-show="selecting" @click.stop="selected = !selected; $dispatch(selected ? 'add' : 'remove')"></div>
           <div class="uk-position-center">
             <span class="fas fa-check-circle fa-3x" @click.stop="selected = !selected; $dispatch(selected ? 'add' : 'remove')" :style="`color:${selected && 'orange'};`"></span>
           </div>

diff --git a/src/views/title.html.ecr b/src/views/title.html.ecr
@@ -1,5 +1,5 @@
 <div>
-  <div id="select-bar" class="uk-card uk-card-body uk-card-default uk-margin-bottom" uk-sticky="offset:10" x-data="{count: 0}" @add.window="count++" @remove.window="count--" x-show="count > 0" style="border:orange;border-style:solid;" x-cloak data-id="<%= title.id %>">
+  <div id="select-bar" class="uk-card uk-card-body uk-card-default uk-margin-bottom" uk-sticky="offset:10" x-data="{count: 0}" @add.window="count++; $dispatch('count', {count: count})" @remove.window="count--; $dispatch('count', {count: count})" x-show="count > 0" style="border:orange;border-style:solid;" x-cloak data-id="<%= title.id %>">
     <div class="uk-child-width-1-3" uk-grid>
       <div>
         <p x-text="count + ' items selected'" style="color:orange"></p>