First basic ui; add bower config file with polymer dependency
This commit is contained in:
Martin Kleinschrodt
parent
f8e6fe6ea3
commit
b0b9a14cec
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"name": "safe",
|
||||
"version": "0.0.0",
|
||||
"homepage": "https://github.com/MaKleSoft/safe",
|
||||
"authors": [
|
||||
"Martin Kleinschrodt <martin@maklesoft.com>"
|
||||
],
|
||||
"main": "index.html",
|
||||
"license": "MIT",
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"node_modules",
|
||||
"bower_components",
|
||||
"test",
|
||||
"tests"
|
||||
],
|
||||
"dependencies": {
|
||||
"polymer": "~0.0.20131107"
|
||||
},
|
||||
"private": true
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<!-- 1. Load Polymer before any code that touches the DOM. -->
|
||||
<!-- // <script src="../../polymer/polymer.js"></script> -->
|
||||
<script src="bower_components/polymer/polymer.min.js"></script>
|
||||
<script src="lib/sjcl.js"></script>
|
||||
<script src="src/safe.js"></script>
|
||||
<script src="src/crypto.js"></script>
|
||||
<script src="src/model.js"></script>
|
||||
<!-- 2. Load a component -->
|
||||
<link rel="import" href="src/components/app.html">
|
||||
<link rel="import" href="src/components/record-item.html">
|
||||
<link rel="import" href="src/components/record-view.html">
|
||||
<style>
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 3. Declare the component by its tag. -->
|
||||
<safe-app></safe-app>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,196 @@
|
|||
<polymer-element name="safe-app">
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.view {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
<div class="view" id="list">
|
||||
<input value="{{ filterString }}" placeholder="type to filter..."></input>
|
||||
<template repeat="{{ record, i in filteredRecords}}">
|
||||
<safe-record-item record="{{ record }}" on-click="{{ recordClicked }}" index="{{ i }}"></safe-record-item>
|
||||
</template>
|
||||
</div>
|
||||
<safe-record-view id="detail" on-back="{{ back }}" style="display: none;"></safe-record-view>
|
||||
</template>
|
||||
<script>
|
||||
Polymer("safe-app", {
|
||||
ready: function() {
|
||||
this.records = [
|
||||
{name: "First", fields: [
|
||||
{name: "myfield", value: "test"},
|
||||
{name: "another field", value: "Hello World!"},
|
||||
{name: "myfield", value: "test"},
|
||||
{name: "another field", value: "Hello World!"},
|
||||
{name: "myfield", value: "test"},
|
||||
{name: "another field", value: "Hello World!"},
|
||||
{name: "myfield", value: "test"},
|
||||
{name: "another field", value: "Hello World!"}
|
||||
]},
|
||||
{name: "Second", fields: [
|
||||
{name: "myfield", value: "test"},
|
||||
{name: "another field", value: "Hello World!"},
|
||||
{name: "myfield", value: "test"},
|
||||
{name: "another field", value: "Hello World!"},
|
||||
{name: "myfield", value: "test"},
|
||||
{name: "another field", value: "Hello World!"},
|
||||
{name: "myfield", value: "test"},
|
||||
{name: "another field", value: "Hello World!"}
|
||||
]},
|
||||
{name: "Third", fields: [
|
||||
{name: "myfield", value: "test"},
|
||||
{name: "another field", value: "Hello World!"},
|
||||
{name: "myfield", value: "test"},
|
||||
{name: "another field", value: "Hello World!"},
|
||||
{name: "myfield", value: "test"},
|
||||
{name: "another field", value: "Hello World!"},
|
||||
{name: "myfield", value: "test"},
|
||||
{name: "another field", value: "Hello World!"}
|
||||
]},
|
||||
{name: "Fourth", fields: [
|
||||
{name: "myfield", value: "test"},
|
||||
{name: "another field", value: "Hello World!"},
|
||||
{name: "myfield", value: "test"},
|
||||
{name: "another field", value: "Hello World!"},
|
||||
{name: "myfield", value: "test"},
|
||||
{name: "another field", value: "Hello World!"},
|
||||
{name: "myfield", value: "test"},
|
||||
{name: "another field", value: "Hello World!"}
|
||||
]},
|
||||
{name: "Fifth", fields: [
|
||||
{name: "myfield", value: "test"},
|
||||
{name: "another field", value: "Hello World!"},
|
||||
{name: "myfield", value: "test"},
|
||||
{name: "another field", value: "Hello World!"},
|
||||
{name: "myfield", value: "test"},
|
||||
{name: "another field", value: "Hello World!"},
|
||||
{name: "myfield", value: "test"},
|
||||
{name: "another field", value: "Hello World!"}
|
||||
]},
|
||||
{name: "Sixth", fields: [
|
||||
{name: "myfield", value: "test"},
|
||||
{name: "another field", value: "Hello World!"},
|
||||
{name: "myfield", value: "test"},
|
||||
{name: "another field", value: "Hello World!"},
|
||||
{name: "myfield", value: "test"},
|
||||
{name: "another field", value: "Hello World!"},
|
||||
{name: "myfield", value: "test"},
|
||||
{name: "another field", value: "Hello World!"}
|
||||
]},
|
||||
{name: "Seventh", fields: [
|
||||
{name: "myfield", value: "test"},
|
||||
{name: "another field", value: "Hello World!"},
|
||||
{name: "myfield", value: "test"},
|
||||
{name: "another field", value: "Hello World!"},
|
||||
{name: "myfield", value: "test"},
|
||||
{name: "another field", value: "Hello World!"},
|
||||
{name: "myfield", value: "test"},
|
||||
{name: "another field", value: "Hello World!"}
|
||||
]},
|
||||
{name: "Eight", fields: [
|
||||
{name: "myfield", value: "test"},
|
||||
{name: "another field", value: "Hello World!"},
|
||||
{name: "myfield", value: "test"},
|
||||
{name: "another field", value: "Hello World!"},
|
||||
{name: "myfield", value: "test"},
|
||||
{name: "another field", value: "Hello World!"},
|
||||
{name: "myfield", value: "test"},
|
||||
{name: "another field", value: "Hello World!"}
|
||||
]},
|
||||
{name: "Nine", fields: [
|
||||
{name: "myfield", value: "test"},
|
||||
{name: "another field", value: "Hello World!"},
|
||||
{name: "myfield", value: "test"},
|
||||
{name: "another field", value: "Hello World!"},
|
||||
{name: "myfield", value: "test"},
|
||||
{name: "another field", value: "Hello World!"},
|
||||
{name: "myfield", value: "test"},
|
||||
{name: "another field", value: "Hello World!"}
|
||||
]},
|
||||
{name: "Ten", fields: [
|
||||
{name: "myfield", value: "test"},
|
||||
{name: "another field", value: "Hello World!"},
|
||||
{name: "myfield", value: "test"},
|
||||
{name: "another field", value: "Hello World!"},
|
||||
{name: "myfield", value: "test"},
|
||||
{name: "another field", value: "Hello World!"},
|
||||
{name: "myfield", value: "test"},
|
||||
{name: "another field", value: "Hello World!"}
|
||||
]},
|
||||
{name: "Eleven", fields: [
|
||||
{name: "myfield", value: "test"},
|
||||
{name: "another field", value: "Hello World!"},
|
||||
{name: "myfield", value: "test"},
|
||||
{name: "another field", value: "Hello World!"},
|
||||
{name: "myfield", value: "test"},
|
||||
{name: "another field", value: "Hello World!"},
|
||||
{name: "myfield", value: "test"},
|
||||
{name: "another field", value: "Hello World!"}
|
||||
]},
|
||||
{name: "Twelve", fields: [
|
||||
{name: "myfield", value: "test"},
|
||||
{name: "another field", value: "Hello World!"},
|
||||
{name: "myfield", value: "test"},
|
||||
{name: "another field", value: "Hello World!"},
|
||||
{name: "myfield", value: "test"},
|
||||
{name: "another field", value: "Hello World!"},
|
||||
{name: "myfield", value: "test"},
|
||||
{name: "another field", value: "Hello World!"}
|
||||
]},
|
||||
{name: "Thirteen"},
|
||||
{name: "Fourteen"},
|
||||
{name: "Fiveteen"},
|
||||
{name: "Sexteen"},
|
||||
{name: "Seventeen"},
|
||||
{name: "Eighteen"},
|
||||
{name: "Nineteen"},
|
||||
{name: "Twenty"},
|
||||
{name: "Twenty One"},
|
||||
{name: "Twenty Two"},
|
||||
{name: "Twenty Three"},
|
||||
{name: "Twenty Four"},
|
||||
{name: "Twenty Five"},
|
||||
{name: "Twenty Six"},
|
||||
{name: "Twenty Eight"},
|
||||
{name: "Twenty Nine"},
|
||||
{name: "Thirty"},
|
||||
{name: "Thirty One"},
|
||||
{name: "Thirty Two"},
|
||||
{name: "Thirty Three"},
|
||||
{name: "Thirty Four"},
|
||||
{name: "Thirty Five"},
|
||||
];
|
||||
this.filteredRecords = this.records;
|
||||
},
|
||||
recordClicked: function(event, detail, sender) {
|
||||
this.$.detail.record = sender.templateInstance.model.record;
|
||||
this.$.list.style.display = "none";
|
||||
this.$.detail.style.display = "block";
|
||||
},
|
||||
back: function(event, detail, sender) {
|
||||
this.$.detail.style.display = "none";
|
||||
this.$.list.style.display = "block";
|
||||
},
|
||||
filterStringChanged: function(oldVal, newVal) {
|
||||
this.filteredRecords = newVal ? this.records.filter(function(rec) {
|
||||
return rec.name.toLowerCase().search(newVal.toLowerCase()) != -1;
|
||||
}) : this.records;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</polymer-element>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<polymer-element name="safe-record-item" attributes="record index" constructor="RecordItem">
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
display: block;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
:host:not(:last-child) {
|
||||
border-bottom: solid 1px;
|
||||
}
|
||||
|
||||
:host:active:hover {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
</style>
|
||||
{{record.name}}
|
||||
</template>
|
||||
<script>
|
||||
Polymer('safe-record-item', {
|
||||
ready: function() {
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</polymer-element>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<polymer-element name="safe-record-view" attributes="record">
|
||||
<template>
|
||||
<style>
|
||||
.header {
|
||||
padding: 10px;
|
||||
font-weight: bold;
|
||||
border-bottom: solid 2px;
|
||||
}
|
||||
|
||||
.field {
|
||||
/*padding: 10px;*/
|
||||
}
|
||||
|
||||
.field:not(:last-child) {
|
||||
border-bottom: solid 1px;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 12px;
|
||||
color: #bbb;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.value {
|
||||
padding: 0 10px 10px 10px;
|
||||
}
|
||||
</style>
|
||||
<div class="header">
|
||||
<button on-click="{{ back }}">back</button>
|
||||
{{ record.name }}
|
||||
</div>
|
||||
<template repeat="{{ field, i in record.fields }}">
|
||||
<div class="field">
|
||||
<div class="label">{{ field.name }}</div>
|
||||
<div class="value">{{ field.value }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
<script>
|
||||
Polymer('safe-record-view', {
|
||||
back: function() {
|
||||
this.fire("back");
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</polymer-element>
|
||||
Loading…
Reference in New Issue