totole/build-gmail-clone-with-vue-3
1
0
Fork 0
mirror of https://github.com/kevin-DL/build-gmail-clone-with-vue-3.git synced 2026-01-11 18:54:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

Spacing improved on bulk actions

Browse Source
This commit is contained in:
Jeffrey Biles
2020-03-23 17:05:39 -07:00
parent 6d30810e40
commit f6114cf7d1
1 changed files with 41 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/components/BulkActionBar.vue
View File

@@ -1,28 +1,32 @@
<template>
<div class="bulk-action-bar">
<span v-if="!allAreSelected && numberSelected > 0">-</span> <!-- later on this minus sign will be in the checkbox, as it is in gmail -->
<input type="checkbox" :checked="allAreSelected" @click="bulkSelect">
<div class="bulk-action-bar">
<span class="checkbox">
<input type="checkbox" :checked="allAreSelected" @click="bulkSelect">
<span v-if="!allAreSelected && numberSelected > 0">-</span> <!-- later on this minus sign will be in the checkbox, as it is in gmail -->
</span>
<button @click="emailSelection.markRead()"
:disabled="Array.from(emailSelection.emails).every(e => e.read)"
v-if="actions.includes('markRead')">
Mark Read
</button>
<button @click="emailSelection.markUnread()"
:disabled="Array.from(emailSelection.emails).every(e => !e.read)"
v-if="actions.includes('markUnread')">
Mark Unread
</button>
<button @click="emailSelection.archive()"
:disabled="numberSelected == 0"
v-if="actions.includes('archive')">
Archive
</button>
<button @click="emailSelection.moveToInbox()"
:disabled="numberSelected == 0"
v-if="actions.includes('moveToInbox')">
Move to Inbox
</button>
<span class="buttons">
<button @click="emailSelection.markRead()"
:disabled="Array.from(emailSelection.emails).every(e => e.read)"
v-if="actions.includes('markRead')">
Mark Read
</button>
<button @click="emailSelection.markUnread()"
:disabled="Array.from(emailSelection.emails).every(e => !e.read)"
v-if="actions.includes('markUnread')">
Mark Unread
</button>
<button @click="emailSelection.archive()"
:disabled="numberSelected == 0"
v-if="actions.includes('archive')">
Archive
</button>
<button @click="emailSelection.moveToInbox()"
:disabled="numberSelected == 0"
v-if="actions.includes('moveToInbox')">
Move to Inbox
</button>
</span>
</div>
</template>
@@ -63,5 +67,19 @@
</script>
<style scoped>
.bulk-action-bar {
width: 100%;
max-width: 1000px;
margin: auto;
text-align: left;
}
input {
margin: 5px;
}
.checkbox {
margin-right: 6px;
margin-left: 3px;
}
</style>