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

Add in/out animations; some styling changes

This commit is contained in:
Martin Kleinschrodt 2013-11-19 21:08:38 +01:00
parent a2dc112099
commit 88c8f8907e
6 changed files with 125 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@ -13,6 +13,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 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>
body {

19
src/components/animations.css Normal file
View File

@ -0,0 +1,19 @@
@-webkit-keyframes slideInFromRight {
from {-webkit-transform: translate(100%, 0); opacity: 0;}
to {-webkit-transform: translate(0, 0); opacity: 1;}
}
@-webkit-keyframes slideInFromLeft {
from {-webkit-transform: translate(-100%, 0); opacity: 0;}
to {-webkit-transform: translate(0, 0); opacity: 1;}
}
@-webkit-keyframes slideOutToRight {
from {-webkit-transform: translate(0, 0); opacity: 1;}
to {-webkit-transform: translate(100%, 0); opacity: 0;}
}
@-webkit-keyframes slideOutToLeft {
from {-webkit-transform: translate(0, 0); opacity: 1;}
to {-webkit-transform: translate(-100%, 0); opacity: 0;}
}

35
src/components/app.html
View File

@ -1,4 +1,4 @@
<polymer-element name="safe-app">
<polymer-element name="safe-app" on-animation-end="{{ animationEnd }}">
<template>
<style>
:host {
@ -17,6 +17,7 @@
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
background: #fafafa;
}
@ -46,7 +47,7 @@
</style>
<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>
<safe-record-view id="recordView" class="view" on-back="{{ back }}" record="{{ selected }}" style="display: none"></safe-record-view>
</template>
<script>
Polymer("safe-app", {
@ -61,8 +62,6 @@
selectedChanged: function(oldRec, newRec) {
if (newRec) {
this.openRecordView();
} else {
this.openListView();
}
},
deleteRecord: function(event, detail, sender) {
@ -70,12 +69,22 @@
this.collection.save();
},
openRecordView: function() {
this.$.listView.style.display = "none";
this.$.recordView.style.display = "block";
this.$.listView.startOutAnimation();
var self = this;
setTimeout(function() {
self.$.recordView.startInAnimation();
self.$.recordView.style.display = "block";
}, 300);
},
openListView: function() {
this.$.listView.style.display = "block";
this.$.recordView.style.display = "none";
this.$.recordView.startOutAnimation();
var self = this;
setTimeout(function() {
self.$.listView.startInAnimation();
self.$.listView.style.display = "block";
}, 300);
},
saveRecord: function() {
var record = this.selected;
@ -98,7 +107,15 @@
},
back: function() {
this.saveRecord();
this.selected = null;
this.openListView();
},
animationEnd: function(event, detail, sender) {
if (detail.direction == "out") {
event.srcElement.style.display = "none";
if (event.srcElement.id == "recordView") {
this.selected = null;
}
}
}
});
</script>

39
src/components/list-view.html
View File

@ -1,8 +1,8 @@
<polymer-element name="safe-list-view" attributes="collection filterString selected">
<polymer-element name="safe-list-view" attributes="collection filterString selected" on-webkitAnimationEnd="{{ animationEnd }}">
<template>
<style>
.list {
padding-top: 50px;
padding-top: 47px;
overflow: scroll;
-webkit-overflow-scrolling: touch;
height: 100%;
@ -23,6 +23,12 @@
filterString: "applyFilter",
"collection.records": "applyFilter"
},
enteredView: function() {
var self = this;
this.addEventListener("webkitAnimationEnd", function() {
this.animationEnd.apply(self, arguments);
}, false);
},
applyFilter: function() {
var fs = this.filterString;
this.filteredRecords = fs ? this.collection.records.filter(function(rec) {
@ -34,6 +40,35 @@
},
deleteClicked: function(event, detail, sender) {
this.fire("delete-record", {record: sender.templateInstance.model.record});
},
startOutAnimation: function() {
this.animCount = 0;
var self = this;
this.$.list.children.array().forEach(function(item) {
var display = window.getComputedStyle(item, null).getPropertyValue("display");
if (display != "none") {
self.animCount++;
item.style["-webkit-animation"] = "slideOutToLeft 0.4s ease " + (Math.random()/5) + "s both";
}
});
},
startInAnimation: function() {
this.animCount = 0;
var self = this;
this.$.list.children.array().forEach(function(item) {
var display = window.getComputedStyle(item, null).getPropertyValue("display");
if (display != "none") {
self.animCount++;
item.style["-webkit-animation"] = "slideInFromLeft 0.4s ease " + (Math.random()/5) + "s both";
}
});
},
animationEnd: function(event) {
this.animCount--;
if (!this.animCount) {
var direction = event.animationName == "slideOutToLeft" ? "out" : "in";
this.fire("animation-end", {direction: direction});
}
}
});
</script>

8
src/components/record-item.html
View File

@ -5,12 +5,14 @@
display: block;
padding: 13.5px 15px;
min-height: 23px;
}
:host:not(:last-child) {
background: #fff;
border-bottom: solid 1px rgba(0, 0, 0, 0.1);
}
/*:host:not(:last-child) {
border-bottom: solid 1px rgba(0, 0, 0, 0.1);
}*/
:host:hover {
background: rgba(0, 0, 0, 0.05);
}

38
src/components/record-view.html
View File

@ -2,7 +2,7 @@
<template>
<style>
:host {
padding-top: 50px;
padding-top: 47px;
overflow: scroll;
-webkit-overflow-scrolling: touch;
height: 100%;
@ -12,6 +12,7 @@
.field {
display: -webkit-box;
border-bottom: solid 1px rgba(0, 0, 0, 0.1);
background: #fff;
}
/*.field:not(:last-child) {
@ -51,6 +52,7 @@
line-height: 20px;
color: #000;
border-bottom: solid 1px rgba(0, 0, 0, 0.1);
background: #fff;
}
.add:hover {
@ -71,6 +73,12 @@
</template>
<script>
Polymer('safe-record-view', {
enteredView: function() {
var self = this;
this.addEventListener("webkitAnimationEnd", function() {
this.animationEnd.apply(self, arguments);
}, false);
},
back: function() {
this.fire("back");
},
@ -80,6 +88,34 @@
value: ""
};
this.record.fields.push(field);
},
startOutAnimation: function() {
this.animCount = 0;
var self = this;
this.shadowRoot.children.array().forEach(function(item) {
var display = window.getComputedStyle(item, null).getPropertyValue("display");
if (display != "none") {
self.animCount++;
item.style["-webkit-animation"] = "slideOutToRight 0.4s ease " + (Math.random()/5) + "s both";
}
});
},
startInAnimation: function() {
this.animCount = 0;
var self = this;
this.shadowRoot.children.array().forEach(function(item) {
var display = window.getComputedStyle(item, null).getPropertyValue("display");
if (display != "none") {
self.animCount++;
item.style["-webkit-animation"] = "slideInFromRight 0.4s ease " + (Math.random()/5) + "s both";
}
});
},
animationEnd: function(event) {
this.animCount--;
if (!this.animCount) {
this.fire("animation-end", {direction: event.animationName == "slideInFromRight" ? "in" : "out"});
}
}
});
</script>