Add record menu with option to delete record from there

src/components/app.html

@@ -45,14 +45,23 @@
                 outline: none;
             }
         </style>
-        <safe-header filterString="{{ filterString }}" record="{{ selected }}" on-back="{{ back }}" on-add="{{ addRecord }}" on-menu="{{ openMenu }}"></safe-header>
-        <safe-list-view id="listView" class="view" collection="{{ collection }}" filterString="{{ filterString }}" selected="{{ selected }}" on-delete-record="{{ deleteRecord }}"></safe-list-view>
+        <safe-header filterString="{{ filterString }}" record="{{ selected }}" on-back="{{ back }}" on-add="{{ addRecord }}" on-menu="{{ openMainMenu }}" on-record-menu="{{ openRecordMenu }}"></safe-header>
+        <safe-list-view id="listView" class="view" collection="{{ collection }}" filterString="{{ filterString }}" selected="{{ selected }}"></safe-list-view>
         <safe-record-view id="recordView" class="view" on-back="{{ back }}" record="{{ selected }}" style="display: none"></safe-record-view>
-        <safe-dialog id="menu">
+        <safe-dialog id="mainMenu">
             <div>Settings</div>
             <div>About</div>
             <div>Help</div>
         </safe-dialog>
+        <safe-dialog id="recordMenu">
+            <div>Edit</div>
+            <div class="negative" on-click="{{ confirmDelete }}" id="confirmButton">Delete</div>
+        </safe-dialog>
+        <safe-dialog id="confirmDialog">
+            <div class="title">Are you sure you want to delete this record?</div>
+            <div>Cancel</div>
+            <div class="negative" on-click="{{ deleteRecord }}">Delete</div>
+        </safe-idalog>
     </template>
     <script>
         Polymer("safe-app", {
@@ -63,15 +72,23 @@
                     coll.fetch();
                     self.collection = coll;
                 });
+                // this.$.confirmButton.addEventListener("click", function() {
+                //     this.confirmDelete.apply(self, arguments);
+                // });
             },
             selectedChanged: function(oldRec, newRec) {
                 if (newRec) {
                     this.openRecordView();
                 }
             },
-            deleteRecord: function(event, detail, sender) {
-                this.collection.remove(detail.record);
+            confirmDelete: function() {
+                console.log("*** confirm delete ***");
+                this.$.confirmDialog.open();
+            },
+            deleteRecord: function() {
+                this.collection.remove(this.selected);
                 this.collection.save();
+                this.openListView();
             },
             openRecordView: function() {
                 this.$.listView.startOutAnimation();
@@ -122,8 +139,11 @@
                     }
                 }
             },
-            openMenu: function() {
-                this.$.menu.open();
+            openMainMenu: function() {
+                this.$.mainMenu.open();
+            },
+            openRecordMenu: function() {
+                this.$.recordMenu.open();
             }
         });
     </script>

src/components/dialog.html

@@ -35,6 +35,18 @@
                 -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
                 -webkit-transform: translate3d(0, 100%, 0);
                 opacity: 0;
+                cursor: pointer;
+            }
+
+            .title {
+                background: transparent;
+                color: #fff;
+                cursor: default;
+            }
+
+            .negative {
+                background: red;
+                color: #fff;
             }
 
             :host.open .inner > * {

src/components/header.html

@@ -105,10 +105,14 @@
                 }
             },
             rightClicked: function() {
-                if (this.filterString) {
-                    this.filterString = "";
-                } else if (!this.record) {
-                    this.fire("add");
+                if (this.record) {
+                    this.fire("record-menu");
+                } else {
+                    if (this.filterString) {
+                        this.filterString = "";
+                    } else {
+                        this.fire("add")
+                    }
                 }
             },
             filterStringChanged: function() {

src/components/list-view.html

@@ -41,9 +41,6 @@
             recordClicked: function(event, detail, sender) {
                 this.selected = sender.templateInstance.model.record;
             },
-            deleteClicked: function(event, detail, sender) {
-                this.fire("delete-record", {record: sender.templateInstance.model.record});
-            },
             startOutAnimation: function() {
                 this.animCount = 0;
                 var self = this;

src/components/record-item.html

@@ -76,17 +76,9 @@
         </style>
         <div class="inner">
             {{record.name}}
-            <div class="delete" on-click="{{ deleteClicked }}">x</div>
         </div>
     </template>
     <script>
-        Polymer('safe-record-item', {
-            ready: function() {
-            },
-            deleteClicked: function(event) {
-                this.fire("delete");
-                event.stopPropagation();
-            }
-        });
+        Polymer('safe-record-item');
     </script>
 </polymer-element>