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-23 15:41:33 +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> <template>
<div class="bulk-action-bar"> <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 --> <span class="checkbox">
<input type="checkbox" :checked="allAreSelected" @click="bulkSelect"> <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()" <span class="buttons">
:disabled="Array.from(emailSelection.emails).every(e => e.read)" <button @click="emailSelection.markRead()"
v-if="actions.includes('markRead')"> :disabled="Array.from(emailSelection.emails).every(e => e.read)"
Mark Read v-if="actions.includes('markRead')">
</button> Mark Read
<button @click="emailSelection.markUnread()" </button>
:disabled="Array.from(emailSelection.emails).every(e => !e.read)" <button @click="emailSelection.markUnread()"
v-if="actions.includes('markUnread')"> :disabled="Array.from(emailSelection.emails).every(e => !e.read)"
Mark Unread v-if="actions.includes('markUnread')">
</button> Mark Unread
<button @click="emailSelection.archive()" </button>
:disabled="numberSelected == 0" <button @click="emailSelection.archive()"
v-if="actions.includes('archive')"> :disabled="numberSelected == 0"
Archive v-if="actions.includes('archive')">
</button> Archive
<button @click="emailSelection.moveToInbox()" </button>
:disabled="numberSelected == 0" <button @click="emailSelection.moveToInbox()"
v-if="actions.includes('moveToInbox')"> :disabled="numberSelected == 0"
Move to Inbox v-if="actions.includes('moveToInbox')">
</button> Move to Inbox
</button>
</span>
</div> </div>
</template> </template>
@@ -63,5 +67,19 @@
</script> </script>
<style scoped> <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> </style>