Skip to content

Commit

Permalink
Merge pull request #14 from MeTaNoV/issue-8
Browse files Browse the repository at this point in the history
Fixes Issue #8
  • Loading branch information
MeTaNoV committed Mar 12, 2016
2 parents a4cc09e + 35de008 commit a0d1dba
Show file tree
Hide file tree
Showing 4 changed files with 56 additions and 29 deletions.
8 changes: 5 additions & 3 deletions bower.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "firebase-element-extended",
"version": "1.0.4",
"version": "1.1.0",
"authors": [
"Pascal Gula aka MeTaNoV <pascal.gula@gmail.com>"
],
Expand Down Expand Up @@ -45,7 +45,8 @@
"iron-icon": "PolymerElements/iron-icon#^1.0.0",
"iron-iconset-svg": "PolymerElements/iron-iconset-svg#^1.0.0",
"iron-image": "PolymerElements/iron-image#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
"iron-media-query": "PolymerElements/iron-media-query#^1.0.0",
"paper-dialog-behavior": "PolymerElements/paper-dialog-behavior#^1.0.0",
"paper-button": "PolymerElements/paper-button#^1.0.0",
"paper-input": "PolymerElements/paper-input#^1.0.0",
Expand All @@ -55,9 +56,9 @@
"paper-menu": "PolymerElements/paper-menu#^1.0.0",
"paper-toast": "PolymerElements/paper-toast#^1.0.0",
"neon-animation": "PolymerElements/neon-animation#^1.0.0",
"firebase-element": "GoogleWebComponents/firebase-element#^1.0.0",
"gold-email-input": "PolymerElements/gold-email-input#^1.0.0",
"gold-password-input": "gold-password-input#^1.0.0",
"firebase-element": "GoogleWebComponents/firebase-element#^1.0.0",
"akc-meta": "akc42/akc-meta#^v1.0.0"
},
"devDependencies": {
Expand All @@ -66,6 +67,7 @@
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
"paper-toolbar": "PolymerElements/paper-toolbar#^1.0.0",
"paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0"
}
Expand Down
8 changes: 3 additions & 5 deletions demo/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -55,10 +55,9 @@
background-color: #3f51b5;
color: white;
};
}

/* Provied mobile friendly view */
@media (max-width: 600px) {
--paper-toolbar-content: {
padding: 0;
};
}

</style>
Expand Down Expand Up @@ -87,7 +86,6 @@ <h2 title-sign-in>Sign-In Dialog</h2>
<!-- App Toolbar -->
<paper-toolbar>
<paper-icon-button icon="menu"></paper-icon-button>
<paper-icon-button icon="info"></paper-icon-button>
<span class="title">Firebase Element eXtended Demo</span>
<firebase-account-menu></firebase-account-menu>
</paper-toolbar>
Expand Down
62 changes: 41 additions & 21 deletions firebase-account-menu.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,50 +2,62 @@

<link rel="import" href="../iron-icon/iron-icon.html">
<link rel="import" href="../iron-image/iron-image.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../iron-media-query/iron-media-query.html">

<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../paper-menu-button/paper-menu-button.html">
<link rel="import" href="../paper-menu/paper-menu.html">
<link rel="import" href="../paper-item/paper-item.html">

<link rel="import" href="../neon-animation/animations/scale-up-animation.html">
<link rel="import" href="../neon-animation/animations/fade-out-animation.html">

<link rel="import" href="./firebase-auth-dialog.html">
<link rel="import" href="./firebase-icons.html">
<link rel="import" href="./firebase-state.html">

<!--
`<firebase-account-menu>` is a navigation menu to be placed inside a `<paper-toolbar>` that provides and hook the authentication functionnality of `<firebase-auth-manager>`.
Signing up and signing in is done thanks to a self-registered `<firebase-auth-dialog>` declared somewhere else.
Signing Up and Signing In is done thanks to a self-registered `<firebase-auth-dialog>` declared somewhere else.
It also provides access to the menu dedicated to account actions with a default logout action.
Example:
<firebase-account-menu>
TODO PG: add paper-item item
<paper-item on-tap="menu1Open">Menu 1</paper-item>
<paper-item on-tap="menu2Open">Menu 2</paper-item>
</firebase-account-menu>
@group GoogleWebComponents Elements
@element firebase-account-menu
### Styling
The following custom properties and mixins are available for styling:
Custom property | Description | Default
----------------|-------------|----------
`--firebase-account-menu` | Mixin applied to the account menu | `{}`
`--firebase-account-menu-image` | Mixin applied to the iron-image | `{}`
@demo demo/index.html
@hero hero.svg
-->
<dom-module id="firebase-account-menu">
<template>
<style>
/* TODO PG: beautify and provide styling hook? */
:host {
display: block;

@apply(--firebase-account-menu);
}

#signedIn, #signedOut {
display: flex;
align-items: center;
@apply(--layout-horizontal);
@apply(--layout-center-center);
}

iron-image {
width: 45px;
height: 45px;
border-radius: 10px;
width: 40px;
height: 40px;
border-radius: 20px;

@apply(--firebase-account-menu-image);
}

#profileLabel {
Expand All @@ -57,24 +69,26 @@
}
</style>

<firebase-state logged="{{logged}}" profile="{{profile}}"></firebase-state>
<firebase-state logged="{{_logged}}" profile="{{_profile}}"></firebase-state>

<iron-media-query query="(max-width: 600px)" query-matches="{{_isMobile}}"></iron-media-query>

<paper-menu-button hidden$="[[!logged]]"
<paper-menu-button hidden$="[[!_logged]]"
vertical-offset="72"
horizontal-align="right"
horizontal-offset="12">
<paper-button id="signedIn" class="dropdown-trigger">
<iron-image src="[[profile.picture]]" sizing="cover"></iron-image>
<span id="profileLabel">[[profile.displayName]]</span>
<iron-image src="[[_profile.picture]]" sizing="cover"></iron-image>
<span id="profileLabel" hidden$="[[_isMobile]]">[[_profile.displayName]]</span>
<iron-icon icon="expand-more"></iron-icon>
</paper-button>
<paper-menu class="dropdown-content">
<!-- TODO PG: here comes the user specific menu... -->
<content></content>
<paper-item on-tap="signOutButton">Sign Out</paper-item>
</paper-menu>
</paper-menu-button>
<div id="signedOut" hidden$="[[logged]]">

<div id="signedOut" hidden$="[[_logged]]">
<paper-button on-tap="signUpButton">Sign-Up</paper-button>
<paper-button on-tap="signInButton">Sign-In</paper-button>
</div>
Expand All @@ -85,9 +99,15 @@
is: 'firebase-account-menu',

properties: {
profile: {
_logged: {
type: Boolean
},
_profile: {
type: Object
}
},
_isMobile: {
type: Boolean
},
},

get _firebaseAuthDialog() {
Expand Down
7 changes: 7 additions & 0 deletions firebase-auth-dialog.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,13 @@

<link rel="import" href="../iron-meta/iron-meta.html">
<link rel="import" href="../iron-icon/iron-icon.html">

<link rel="import" href="../paper-dialog-behavior/paper-dialog-behavior.html">
<link rel="import" href="../paper-dialog-behavior/paper-dialog-shared-styles.html">
<link rel="import" href="../paper-button/paper-button.html">

<link rel="import" href="../neon-animation/neon-animation-runner-behavior.html">

<link rel="import" href="../gold-email-input/gold-email-input.html">
<link rel="import" href="../gold-password-input/gold-password-input.html">
<link rel="import" href="../gold-password-input/gold-password-input-validator.html">
Expand Down Expand Up @@ -75,6 +78,10 @@ <h2 title-sign-in>Sign-In Dialog</h2>
display: block;
}

:host > ::content > *:first-child {
margin-top: 0;
}

.facebook {
color: white;
--iron-icon-fill-color: white;
Expand Down

0 comments on commit a0d1dba

Please sign in to comment.