Implement edit mode for record view

src/components/app.html

@@ -49,7 +49,7 @@
             on-menu="{{ openMainMenu }}" on-record-menu="{{ openRecordMenu }}" editing="{{ editing }}"
             on-done="{{ editDone }}" on-cancel="{{ editCancel }}"></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-record-view id="recordView" class="view" on-back="{{ back }}" record="{{ selected }}" editing="{{ editing }}" style="display: none"></safe-record-view>
         <safe-dialog id="mainMenu">
             <div>Settings</div>
             <div>About</div>
@@ -113,6 +113,9 @@
                 var record = this.selected;
                 if (record) {
                     record.name = record.name || "Unnamed";
+                    record.fields = record.fields.filter(function(field) {
+                        return field.name || field.value;
+                    });
                     this.collection.save();
                 }
             },

src/components/header.html

@@ -41,7 +41,7 @@
                 -webkit-appearance: none;
                 border: none;
                 padding: 6px;
-                background: transparent;
+                background: #fff;
                 -webkit-transition: background 0.5s;
                 border-radius: 2px;
             }
@@ -50,9 +50,10 @@
                 background: rgba(255, 255, 255, 0.8);
             }
 
-            .name-input {
+            .name {
                 opacity: 0;
                 -webkit-transform: translate(0, 100%);
+                padding: 4px 6px;
             }
 
             :host.show-record .filter-input {
@@ -60,15 +61,11 @@
                 -webkit-transform: translate(0, -100%);
             }
 
-            :host.show-record .name-input {
+            :host.show-record .name {
                 opacity: 1;
                 -webkit-transform: translate(0, 0);
             }
 
-            :host.editing .name-input {
-                background: #fff;
-            }
-
             #leftIcon {
                 -webkit-transition: width 0.5s;
                 min-width: 0;
@@ -81,7 +78,12 @@
         <safe-shapeshifter id="leftIcon" shape="menu" on-click="{{ leftClicked }}"></safe-shapeshifter>
         <div class="middle" id="middle">
             <input id="filterInput" class="filter-input" value="{{ filterString }}" type="search" placeholder="type to filter..." />
-            <input id="nameInput" class="name-input" value="{{ record.name }}" placeholder="Enter title..." readonly="true"/>
+            <template if="{{ editing }}">
+                <input id="nameInput" class="name" value="{{ record.name }}" placeholder="Enter title..."/>
+            </template>
+            <template if="{{ !editing }}">
+                <div class="name">{{ record.name }}</div>
+            </template>
         </div>
         <safe-shapeshifter id="rightIcon" shape="plus" on-mousedown="{{ rightClicked }}"></safe-shapeshifter>
     </template>
@@ -90,14 +92,12 @@
             editing: false,
             recordChanged: function(oldRec, newRec) {
                 if (newRec) {
-                    this.$.nameInput.removeAttribute("disabled");
                     this.$.filterInput.setAttribute("disabled", "disabled");
                     this.classList.add("show-record");
                     this.$.leftIcon.shape = "arrow-left";
                     this.$.rightIcon.shape = "more";
                 } else {
                     this.$.filterInput.removeAttribute("disabled");
-                    this.$.nameInput.setAttribute("disabled", "disabled");
                     this.classList.remove("show-record");
                     this.$.leftIcon.shape = "menu";
                     this.$.rightIcon.shape = this.filterString ? "cancel" : "plus";
@@ -139,12 +139,10 @@
             editingChanged: function() {
                 if (this.editing) {
                     this.classList.add("editing");
-                    this.$.nameInput.removeAttribute("readonly");
                     this.$.leftIcon.shape = "cancel";
                     this.$.rightIcon.shape = "check";
                 } else {
                     this.classList.remove("editing");
-                    this.$.nameInput.setAttribute("readonly", true);
                     this.$.leftIcon.shape = this.record ? "arrow-left" : "menu";
                     this.$.rightIcon.shape = this.record ? "more" : "plus";
                 }

src/components/record-view.html

@@ -1,4 +1,4 @@
-<polymer-element name="safe-record-view" attributes="record">
+<polymer-element name="safe-record-view" attributes="record editing">
     <template>
         <style>
             :host {
@@ -21,38 +21,38 @@
                 border-bottom: solid 1px rgba(0, 0, 0, 0.1);
             }*/
 
-            .field > input {
+            .field > * {
                 border: none;
                 font-family: inherit;
                 font-size: inherit;
                 font-weight: inherit;
                 -webkit-appearance: none;
-                padding: 13.5px 15px;
+                padding: 6px;
+                margin: 8px;
                 display: block;
-                background-color: transparent;
                 text-overflow: ellipsis;
-                margin: 0;
+                border-radius: 2px;
             }
 
-            .field > input.label {
+            .field > input {
+                background: #f5f5f5;
+            }
+
+            .field > .label {
                 width: 100px;
                 text-align: right;
                 color: rgb(175, 175, 175);
                 font-size: 15px;
             }
 
-            .field > input.value {
+            .field > .value {
                 -webkit-box-flex: 1;
             }
 
             .add {
-                padding: 13.5px 15px;
-                min-height: 23px;
+                padding: 10px;
+                line-height: 0;
                 text-align: center;
-                font-size: 30px;
-                font-weight: 100;
-                line-height: 20px;
-                color: #000;
                 border-bottom: solid 1px rgba(0, 0, 0, 0.1);
                 background: #fff;
                 margin: 5px;
@@ -68,11 +68,21 @@
         </style>
         <template repeat="{{ field, i in record.fields }}">
             <div class="field">
-                <input class="value" value="{{ field.value }}" placeholder="Enter Content..." />
-                <input class="label" value="{{ field.name }}" placeholder="Enter Label..." />
+                <template if="{{ editing }}">
+                    <input class="value" value="{{ field.value }}" placeholder="Enter Content..."/>
+                    <input class="label" value="{{ field.name }}" placeholder="Enter Label..."/>
+                </template>
+                <template if="{{ !editing }}">
+                    <div class="value">{{ field.value }}</div>
+                    <div class="label">{{ field.name }}</div>
+                </template>
+            </div>
+        </template>
+        <template if="{{ editing }}">
+            <div class="add" on-click="{{ addField }}">
+                <safe-shapeshifter shape="plus"></safe-shapeshifter>
             </div>
         </template>
-        <div class="add" on-click="{{ addField }}">+</div>
     </template>
     <script>
         Polymer('safe-record-view', {
@@ -119,6 +129,19 @@
                 if (!this.animCount) {
                     this.fire("animation-end", {direction: event.animationName == "slideInFromRight" ? "in" : "out"});
                 }
+            },
+            editingChanged: function() {
+                if (this.editing) {
+                    this.classList.add("editing");
+                    // this.shadowRoot.querySelectorAll("input").array().forEach(function(el) {
+                    //     el.removeAttribute("readonly");
+                    // });
+                } else {
+                    this.classList.remove("editing");
+                    // this.shadowRoot.querySelectorAll("input").array().forEach(function(el) {
+                    //     el.setAttribute("readonly", true);
+                    // });
+                }
             }
         });
     </script>

src/components/shapeshifter.html

@@ -3,6 +3,8 @@
         <style>
             :host {
                 display: inline-block;
+                width: 30px;
+                height: 30px;
                 min-width: 30px;
                 min-height: 30px;
                 position: relative;