Squashed commit of the following:

commit dd00d53895b824fbe4170c4a34b104303f722ccd
Merge: 2b3698e cb9ea12
Author: Robin Linus <robin_woll@capira.de>
Date:   Wed Feb 10 00:27:32 2016 -0600

    Merge branch 'name-device' into merge123

    # Conflicts:
    #	app/elements/buddy-finder/buddy-avatar.html
    #	app/elements/buddy-finder/buddy-finder.html
    #	app/elements/buddy-finder/personal-avatar.html
    #	app/index.html

commit cb9ea1235001f0cc23514cb622ce711cdc0538af
Author: Robin Linus <robin_woll@capira.de>
Date:   Tue Feb 9 23:43:49 2016 -0600

    #13 Feature Request: Name your device

commit 6fa43b56f4e705a19e68b62bc671a4948b6968fb
Author: Robin Linus <robin_woll@capira.de>
Date:   Fri Jan 1 19:54:56 2016 +0100

    Initial

commit fc55c86f5cf95039355d85be7409e68f27246696
Author: Robin Linus <robin_woll@capira.de>
Date:   Fri Jan 1 18:06:27 2016 +0100

    Fix fullscreen layout on iOS
This commit is contained in:
Robin Linus 2016-02-10 08:58:09 -06:00
parent 2b3698ece0
commit e66598d77f
8 changed files with 210 additions and 16 deletions

View file

@ -31,8 +31,8 @@
.paper-font-subhead {
text-align: center;
line-height: 22px;
margin-top: 2px;
margin-top: 0px;
line-height: 18px;
}
.paper-font-body1 {
@ -40,7 +40,8 @@
width: 100%;
font-size: 13px;
color: grey;
line-height: 13px;
margin-top: 0px !important;
line-height: 16px;
}
:host,
@ -91,11 +92,19 @@
},
status: {
type: String,
value: ''
value: '',
},
defaultStatus: {
computed: '_computeDefaultStatus(contact)'
}
},
_computeDisplayName: function(contact) {
contact = contact.name;
if (!contact.name.os) {
return contact.name;
}
return this._computeDeviceName(contact.name);
},
_computeDeviceName: function(contact) {
if (contact.model) {
return contact.os + ' ' + contact.model;
}
@ -103,7 +112,7 @@
return contact.os + ' ' + contact.browser;
},
_computeDisplayIcon: function(contact) {
contact = contact.name;
contact = contact.device || contact.name;
if (contact.type === 'mobile') {
return 'chat:phone-iphone';
}
@ -112,6 +121,11 @@
}
return 'chat:desktop-mac';
},
_computeDefaultStatus: function(contact) {
var status = contact.device ? this._computeDeviceName(contact.device) : '';
this.status = status;
return status;
},
attached: function() {
this.async(function() {
app.conn.addEventListener('file-offered', function(e) {
@ -131,21 +145,21 @@
}.bind(this), false);
app.conn.addEventListener('upload-complete', function(e) {
if (e.detail.from === this.contact.peerId) {
this.status = '';
this.status = this.defaultStatus;
}
}.bind(this), false);
app.conn.addEventListener('download-complete', function(e) {
if (e.detail.from === this.contact.peerId) {
this.status = '';
this.status = this.defaultStatus;
}
}.bind(this), false);
app.conn.addEventListener('file-declined', function(e) {
if (e.detail.from === this.contact.peerId) {
this.status = '';
this.status = this.defaultStatus;
}
}.bind(this), false);
app.conn.addEventListener('upload-error', function(e) {
this.status = '';
this.status = this.defaultStatus;
}.bind(this), false);
}, 200);
}

View file

@ -102,6 +102,7 @@
opacity: 1;
}
}
</style>
<div class="explanation2" hidden$="{{!_showExplanation}}">
Tap to send File.

View file

@ -0,0 +1,51 @@
<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../../bower_components/paper-input/paper-input.html">
<dom-module id="device-name-dialog">
<template>
<style>
:host {
display: block;
}
paper-dialog {
width: 400px;
max-width: 90%
}
</style>
<paper-dialog id="dialog" entry-animation="scale-up-animation" exit-animation="fade-out-animation" with-backdrop>
<h2>Name this Device</h2>
<p>
<paper-input id="input" value="{{deviceName}}" label="Name this Device" char-counter maxlength="18" on-keypress="_keyPressed" autofocus></paper-input>
</p>
<div class="buttons">
<paper-button dialog-dismiss>Cancel</paper-button>
<paper-button on-tap="_save">Rename</paper-button>
</div>
</paper-dialog>
</template>
<script>
'use strict';
Polymer({
is: 'device-name-dialog',
properties: {
deviceName: {
notify: true
}
},
open: function() {
this.$.dialog.open();
},
_keyPressed: function(e) {
if (e.which === 13 || e.charCode === 13) {
this.$.input.inputElement.blur();
this._save();
}
},
_save: function() {
this.$.dialog.close();
this.fire('save-device-name', this.deviceName);
}
});
</script>
</dom-module>

View file

@ -0,0 +1,95 @@
<link rel="import" href="../../bower_components/paper-input/paper-input.html">
<link rel="import" href="../../bower_components/iron-localstorage/iron-localstorage.html">
<link rel="import" href="device-name-dialog.html">
<dom-module id="device-name">
<template>
<style>
:host {
display: inline-block;
cursor: pointer;
}
.name-label {
@apply(--paper-font-subhead);
text-align: center;
cursor: pointer;
width: 160px;
line-height: 18px !important;
}
:root {
/* Label and underline color when the input is not focused */
--paper-input-container-color: #333;
/* Label and underline color when the input is focused */
--paper-input-container-focus-color: #4285f4;
/* Label and underline color when the input is invalid */
--paper-input-container-invalid-color: red;
/* Input foreground color */
--paper-input-container-input-color: #333;
}
@media all and (max-height: 370px) {
:host {}
}
paper-dialog {
width: 300px;
text-align: left;
}
</style>
<div class="name-label" hidden$="{{name}}">My Name</div>
<div class="name-label" hidden$="{{!name}}">{{name}}</div>
<iron-localstorage name="device-name" value="{{name}}" iron-localstorage-load="_nameChanged"></iron-localstorage>
</template>
<script>
'use strict';
Polymer({
is: 'device-name',
properties: {
name: {
observer: '_nameChanged'
}
},
open: function() {
this.deviceNameDialog.open();
},
_nameChanged: function(name) {
if (!name) {
return;
}
this.cancelAsync(this.timer);
this.timer = this.async(function() {
if (!app.conn.notifyServer) {
this._nameChanged(name);
return;
}
this._sendNameToServer(name);
}, 300);
},
_sendNameToServer: function(name) {
app.conn.notifyServer({
serverMsg: 'device-name',
name: name
});
},
_initialize: function() {
console.log('initialize name');
},
get deviceNameDialog() {
var deviceNameDialog = document.querySelector('device-name-dialog');
if (!deviceNameDialog) {
deviceNameDialog = Polymer.Base.create('device-name-dialog');
deviceNameDialog.addEventListener('save-device-name', function(e) {
this.name = e.detail;
console.log(this.name);
}.bind(this));
document.body.appendChild(deviceNameDialog);
};
deviceNameDialog.deviceName = this.name;
return deviceNameDialog;
}
});
</script>
</dom-module>

View file

@ -1,5 +1,6 @@
<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="../../styles/icons.html">
<link rel="import" href="device-name.html">
<dom-module id="personal-avatar">
<template>
<style>
@ -11,6 +12,13 @@
bottom: 16px;
left: 50%;
margin-left: -180px;
z-index: 12;
cursor: pointer;
}
:host:hover iron-icon,
:host:hover device-name {
color: #3367d6;
}
iron-icon {
@ -44,11 +52,15 @@
height: 32px;
margin-bottom: 2px;
}
.slogan {
display: none;
}
}
</style>
<device-name id="deviceName"></device-name>
<iron-icon icon="chat:wifi-tethering"></iron-icon>
<div class="paper-font-body1">
Easily transfer data across devices.
<div class="paper-font-body1 slogan">
The easiest way to transfer data across devices.
</div>
<div class="paper-font-body1 discover">
Allow me to be discovered by: Everyone in this network.
@ -57,7 +69,13 @@
<script>
'use strict';
Polymer({
is: 'personal-avatar'
is: 'personal-avatar',
listeners: {
'tap': '_openDeviceNameDialog'
},
_openDeviceNameDialog: function() {
this.$.deviceName.open();
}
});
</script>
</dom-module>

View file

@ -49,6 +49,9 @@
if (window.webRTCSupported) {
this.$.p2p.initialize();
}
},
notifyServer: function(msg) {
this.$.ws.client.send({}, msg);
}
});
})();

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB