Use single menu for all views; Some refactoring and nice effects
This commit is contained in:
Martin Kleinschrodt
parent
2d882b3a2d
commit
71dc8bb8fa
|
|
@ -7,6 +7,8 @@
|
|||
<script src="src/config.js"></script>
|
||||
<!-- // <script src="../../polymer/polymer.js"></script> -->
|
||||
<script src="bower_components/polymer/polymer.min.js"></script>
|
||||
<link rel="import" href="src/components/shapeshifter.html">
|
||||
<link rel="import" href="src/components/header.html">
|
||||
<link rel="import" href="src/components/app.html">
|
||||
<link rel="import" href="src/components/record-item.html">
|
||||
<link rel="import" href="src/components/list-view.html">
|
||||
|
|
|
|||
|
|
@ -20,6 +20,12 @@
|
|||
|
||||
}
|
||||
|
||||
safe-header {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.view {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
|
|
@ -38,8 +44,9 @@
|
|||
outline: none;
|
||||
}
|
||||
</style>
|
||||
<safe-list-view id="listView" class="view" collection="{{ collection }}" on-select-record="{{ selectRecord }}" on-delete-record="{{ deleteRecord }}" on-add-record="{{ addRecord }}"></safe-list-view>
|
||||
<safe-record-view id="recordView" class="view" on-back="{{ back }}" style="display: none;"></safe-record-view>
|
||||
<safe-header filterString="{{ filterString }}" record="{{ selected }}" on-back="{{ back }}" on-add="{{ addRecord }}"></safe-header>
|
||||
<safe-list-view id="listView" class="view" collection="{{ collection }}" filterString="{{ filterString }}" selected="{{ selected }}" on-delete-record="{{ deleteRecord }}"></safe-list-view>
|
||||
<safe-record-view id="recordView" class="view" on-back="{{ back }}" style="display: none;" record="{{ selected }}"></safe-record-view>
|
||||
</template>
|
||||
<script>
|
||||
Polymer("safe-app", {
|
||||
|
|
@ -51,28 +58,34 @@
|
|||
self.collection = coll;
|
||||
});
|
||||
},
|
||||
selectRecord: function(event, detail, sender) {
|
||||
this.openRecord(detail.record);
|
||||
selectedChanged: function(oldRec, newRec) {
|
||||
if (newRec) {
|
||||
this.openRecordView();
|
||||
} else {
|
||||
this.openListView();
|
||||
}
|
||||
},
|
||||
deleteRecord: function(event, detail, sender) {
|
||||
console.log("** delete ***", arguments);
|
||||
this.collection.remove(detail.record);
|
||||
this.collection.save();
|
||||
},
|
||||
openRecord: function(record) {
|
||||
this.$.recordView.record = record;
|
||||
openRecordView: function() {
|
||||
this.$.listView.style.display = "none";
|
||||
this.$.recordView.style.display = "block";
|
||||
},
|
||||
back: function(event, detail, sender) {
|
||||
this.$.recordView.style.display = "none";
|
||||
openListView: function() {
|
||||
this.$.listView.style.display = "block";
|
||||
var record = this.$.recordView.record;
|
||||
if (record.name || record.fields.length) {
|
||||
record.name = record.name || "Unnamed";
|
||||
this.collection.save();
|
||||
} else {
|
||||
this.collection.remove(record);
|
||||
this.$.recordView.style.display = "none";
|
||||
},
|
||||
saveRecord: function() {
|
||||
var record = this.selected;
|
||||
if (record) {
|
||||
if (record.name || record.fields.length) {
|
||||
record.name = record.name || "Unnamed";
|
||||
this.collection.save();
|
||||
} else {
|
||||
this.collection.remove(record);
|
||||
}
|
||||
}
|
||||
},
|
||||
addRecord: function() {
|
||||
|
|
@ -81,8 +94,12 @@
|
|||
fields: []
|
||||
};
|
||||
this.collection.add(record);
|
||||
this.openRecord(record);
|
||||
this.$.recordView.focusTitle();
|
||||
this.selected = record;
|
||||
// this.$.recordView.focusTitle();
|
||||
},
|
||||
back: function() {
|
||||
this.saveRecord();
|
||||
this.selected = null;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,105 @@
|
|||
<polymer-element name="safe-header" attributes="filterString record">
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
padding: 8px 0;
|
||||
background: rgba(245, 245, 245, 0.8);
|
||||
display: -webkit-box;
|
||||
/*-webkit-box-align: center;*/
|
||||
box-sizing: border-box;
|
||||
border-bottom: solid 1px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:host safe-shapeshifter {
|
||||
display: block;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.middle {
|
||||
-webkit-box-flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.middle > * {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
|
||||
}
|
||||
|
||||
input {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
-webkit-appearance: none;
|
||||
border: none;
|
||||
padding: 6px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
input[type=search] {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.name-input {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate(0, 100%);
|
||||
}
|
||||
|
||||
.show-record .filter-input {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate(0, -100%);
|
||||
}
|
||||
|
||||
.show-record .name-input {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate(0, 0);
|
||||
}
|
||||
</style>
|
||||
<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..." />
|
||||
</div>
|
||||
<safe-shapeshifter id="rightIcon" shape="plus" on-mousedown="{{ rightClicked }}"></safe-shapeshifter>
|
||||
</template>
|
||||
<script>
|
||||
Polymer("safe-header", {
|
||||
recordChanged: function(oldRec, newRec) {
|
||||
if (newRec) {
|
||||
this.$.nameInput.removeAttribute("disabled");
|
||||
this.$.filterInput.setAttribute("disabled", "disabled");
|
||||
this.$.middle.classList.add("show-record");
|
||||
this.$.leftIcon.shape = "arrow-left";
|
||||
this.$.rightIcon.shape = "more";
|
||||
} else {
|
||||
this.$.filterInput.removeAttribute("disabled");
|
||||
this.$.nameInput.setAttribute("disabled", "disabled");
|
||||
this.$.middle.classList.remove("show-record");
|
||||
this.$.leftIcon.shape = "menu";
|
||||
this.$.rightIcon.shape = "plus";
|
||||
}
|
||||
},
|
||||
leftClicked: function() {
|
||||
if (!this.record) {
|
||||
this.fire("menu");
|
||||
} else {
|
||||
this.fire("back");
|
||||
}
|
||||
},
|
||||
rightClicked: function() {
|
||||
if (!this.record) {
|
||||
this.fire("add");
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</polymer-element>
|
||||
|
|
@ -1,44 +1,6 @@
|
|||
<polymer-element name="safe-list-view" attributes="collection">
|
||||
<polymer-element name="safe-list-view" attributes="collection filterString selected">
|
||||
<template>
|
||||
<style>
|
||||
.list-header {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
background: rgb(245, 245, 245);
|
||||
display: -webkit-box;
|
||||
-webkit-box-align: center;
|
||||
box-sizing: border-box;
|
||||
border-bottom: solid 1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.list-header > input {
|
||||
border: none;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
-webkit-appearance: none;
|
||||
padding: 6px;
|
||||
display: block;
|
||||
-webkit-box-flex: 1;
|
||||
background: white;
|
||||
border-radius: 2px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.list-header > button {
|
||||
display: block;
|
||||
border: none;
|
||||
background: transparent;
|
||||
font-size: 30px;
|
||||
font-family: inherit;
|
||||
font-weight: 100;
|
||||
line-height: 15px;
|
||||
color: #000;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.list {
|
||||
padding-top: 50px;
|
||||
overflow: scroll;
|
||||
|
|
@ -48,8 +10,6 @@
|
|||
}
|
||||
</style>
|
||||
<div id="listHeader" class="list-header">
|
||||
<input value="{{ filterString }}" type="search" placeholder="type to filter..." />
|
||||
<button on-click="{{ addRecordClicked }}">+</button>
|
||||
</div>
|
||||
<div id="list" class="list">
|
||||
<template repeat="{{ record, i in filteredRecords}}">
|
||||
|
|
@ -70,14 +30,11 @@
|
|||
}) : this.collection.records;
|
||||
},
|
||||
recordClicked: function(event, detail, sender) {
|
||||
this.fire("select-record", {record: sender.templateInstance.model.record});
|
||||
this.selected = sender.templateInstance.model.record;
|
||||
},
|
||||
deleteClicked: function(event, detail, sender) {
|
||||
console.log("*** delete clicked ***", arguments);
|
||||
this.fire("delete-record", {record: sender.templateInstance.model.record});
|
||||
},
|
||||
addRecordClicked: function() {
|
||||
this.fire("add-record");
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,40 +1,12 @@
|
|||
<polymer-element name="safe-record-view" attributes="record">
|
||||
<template>
|
||||
<style>
|
||||
.header {
|
||||
padding: 8px;
|
||||
background: rgb(245, 245, 245);
|
||||
display: -webkit-box;
|
||||
border-bottom: solid 1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.header > input {
|
||||
border: none;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
padding: 6px;
|
||||
display: block;
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-box-align: center;
|
||||
background-color: transparent;
|
||||
/*background: white;*/
|
||||
/*border-radius: 2px;*/
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.header > button {
|
||||
display: block;
|
||||
border: none;
|
||||
background: transparent;
|
||||
font-size: 30px;
|
||||
font-family: inherit;
|
||||
font-weight: 100;
|
||||
line-height: 0;
|
||||
color: #000;
|
||||
margin-top: -1px;
|
||||
:host {
|
||||
padding-top: 50px;
|
||||
overflow: scroll;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.field {
|
||||
|
|
@ -89,10 +61,6 @@
|
|||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
</style>
|
||||
<div class="header">
|
||||
<button on-click="{{ back }}"><</button>
|
||||
<input id="titleInput" value="{{ record.name }}" placeholder="Enter Title..." />
|
||||
</div>
|
||||
<template repeat="{{ field, i in record.fields }}">
|
||||
<div class="field">
|
||||
<input class="value" value="{{ field.value }}" placeholder="Enter Content..." />
|
||||
|
|
@ -112,9 +80,6 @@
|
|||
value: ""
|
||||
};
|
||||
this.record.fields.push(field);
|
||||
},
|
||||
focusTitle: function() {
|
||||
this.$.titleInput.focus();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue