selfhosted
/
padloc
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add editing mode for header

This commit is contained in:
Martin Kleinschrodt 2013-11-23 09:44:16 +01:00
parent 4a274865ec
commit cb9f17d5f8
4 changed files with 58 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -14,6 +14,7 @@
<link rel="import" href="src/components/record-item.html">
<link rel="import" href="src/components/list-view.html">
<link rel="import" href="src/components/record-view.html">
<link rel="import" href="src/components/test.html">
<link href='src/components/animations.css' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700' rel='stylesheet' type='text/css'>
<style>
@ -25,5 +26,6 @@
</head>
<body>
<safe-app></safe-app>
<!-- <x-test></x-test> -->
</body>
</html>

25
src/components/app.html
View File

@ -45,7 +45,9 @@
outline: none;
}
</style>
<safe-header filterString="{{ filterString }}" record="{{ selected }}" on-back="{{ back }}" on-add="{{ addRecord }}" on-menu="{{ openMainMenu }}" on-record-menu="{{ openRecordMenu }}"></safe-header>
<safe-header filterString="{{ filterString }}" record="{{ selected }}" on-back="{{ back }}" on-add="{{ addRecord }}"
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-dialog id="mainMenu">
@ -54,7 +56,7 @@
<div>Help</div>
</safe-dialog>
<safe-dialog id="recordMenu">
<div>Edit</div>
<div on-click="{{ startEditing }}">Edit</div>
<div class="negative" on-click="{{ confirmDelete }}" id="confirmButton">Delete</div>
</safe-dialog>
<safe-dialog id="confirmDialog">
@ -128,7 +130,6 @@
this.selected = record;
},
back: function() {
this.saveRecord();
this.openListView();
},
animationEnd: function(event, detail, sender) {
@ -144,6 +145,24 @@
},
openRecordMenu: function() {
this.$.recordMenu.open();
},
startEditing: function() {
this.editCopy = {
name: this.selected.name,
fields: this.selected.fields
};
this.editing = true;
},
editDone: function() {
this.editing = false;
this.editCopy = null;
this.saveRecord();
},
editCancel: function() {
this.editing = false;
this.collection.replace(this.selected, this.editCopy);
this.selected = this.editCopy;
this.editCopy = null;
}
});
</script>

37
src/components/header.html
View File

@ -1,4 +1,4 @@
<polymer-element name="safe-header" attributes="filterString record">
<polymer-element name="safe-header" attributes="filterString record editing">
<template>
<style>
:host {
@ -31,7 +31,7 @@
width: 100%;
height: 100%;
box-sizing: border-box;
-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
-webkit-transition: -webkit-transform 0.5s, opacity 0.5s, background 0.5s;
}
input {
@ -42,11 +42,12 @@
border: none;
padding: 6px;
background: transparent;
-webkit-transition: background 0.5s;
border-radius: 2px;
}
input[type=search] {
background: rgba(255, 255, 255, 0.8);
border-radius: 2px;
}
.name-input {
@ -64,6 +65,10 @@
-webkit-transform: translate(0, 0);
}
:host.editing .name-input {
background: #fff;
}
#leftIcon {
-webkit-transition: width 0.5s;
min-width: 0;
@ -76,12 +81,13 @@
<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..." />
<input id="nameInput" class="name-input" value="{{ record.name }}" placeholder="Enter title..." readonly="true"/>
</div>
<safe-shapeshifter id="rightIcon" shape="plus" on-mousedown="{{ rightClicked }}"></safe-shapeshifter>
</template>
<script>
Polymer("safe-header", {
editing: false,
recordChanged: function(oldRec, newRec) {
if (newRec) {
this.$.nameInput.removeAttribute("disabled");
@ -100,13 +106,19 @@
leftClicked: function() {
if (!this.record) {
this.fire("menu");
} else if (this.editing) {
this.fire("cancel");
} else {
this.fire("back");
}
},
rightClicked: function() {
if (this.record) {
this.fire("record-menu");
if (this.editing) {
this.fire("done");
} else {
this.fire("record-menu");
}
} else {
if (this.filterString) {
this.filterString = "";
@ -121,7 +133,20 @@
this.$.rightIcon.shape = "cancel";
} else {
this.classList.remove("filtering");
this.$.rightIcon.shape = this.record ? "arrow-left" : "plus";
this.$.rightIcon.shape = this.record ? "more" : "plus";
}
},
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";
}
}
})

3
src/model.js
View File

@ -50,6 +50,9 @@ define(["safe/crypto", "safe/util"], function(crypto, util) {
},
removeAt: function(from, to) {
this.records = util.remove(this.records, from, to);
},
replace: function(orig, repl) {
this.records[this.records.indexOf(orig)] = repl;
}
};