I am trying to create a simple app. It has a profile button, and when the profile button is pressed I would like it to be routed to the Userprofile page. I am quite new to Polymer and routing in general, and would appreciate if some could advice what I am doing wrong. Here is my code snippet. I am using polymer 1.6, and using app-route, app-location. I have defined them, and am using iron-pages to select the route (NOT SURE IF THAT IS CORRECT).
cst-tririga-ux.html
<!-- POLYMER IMPORTS -->
<link rel='import' href='../paper-icon-button/paper-icon-button.html'>
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../paper-badge/paper-badge.html">
<!-- APP TOOLBAR -->
<link rel="import" href='app-layout.html'>
<!-- IRON IMPORTS -->
<link rel="import" href="../iron-icons/iron-icons.html">
<link rel="import" href="../iron-pages/iron-pages.html">
<!-- TRIRIGA IMPORTS -->
<link rel="import" href="../triplat-view-behavior/triplat-view-behavior.html">
<link rel="import" href="../triplat-signout-button/triplat-signout-button.html">
<link rel="import" href="../triplat-ds/triplat-ds.html">
<!-- CUSTOM COMPONENTS -->
<link rel="import" href="profile/user-profile.html">
<link rel="import" href="notifications/notifications-view.html">
<dom-module id="cst-tririga-ux">
<template>
<style>
paper-input-container.my-class {
--paper-input-container-color: red;
--paper-input-container-focus-color: blue;
--paper-input-container-invalid-color: green;
--paper-input-container-input-color: black;
}
paper-badge {
--paper-badge-margin-left: -8px;
--paper-badge-margin-bottom: -12px;
--paper-badge-background: #D50000;
};
html, body {
margin: 0;
font-family: 'Roboto', 'Noto', sans-serif;
-webkit-font-smoothing: antialiased;
background: #f1f1f1;
max-height: 368px;
}
paper-icon-button {
--paper-icon-button-ink-color: white;
}
paper-icon-button + [main-title] {
margin-left: 24px;
}
app-header {
#apply(--layout-fixed-top);
color: #fff;
--app-header-background-rear-layer: {
background-color: #ef6c00;
};
}
app-drawer {
--app-drawer-scrim-background: rgba(0, 0, 100, 0.8);
--app-drawer-content-container: {
background-color: #f4f6f7;
}
}
app-toolbar {
/* Toolbar is the main header, so give it some color */
background-color: #1E88E5;
font-family: 'Roboto', Helvetica, sans-serif;
color: white;
--app-toolbar-font-size: 24px;
}
</style>
<!-- DECLARATIONS -->
<triplat-ds id="currentDS" name="currentUser" data="{{currentUser}}"></triplat-ds>
<triplat-ds id="myNotificationsDS" name="myNotifications" data="{{myNotifications}}"></triplat-ds>
<app-location use-hash-as-path route="{{route}}"></app-location>
<app-route route="{{route}}" pattern="/:view" data="{{routeData}}" tail="{{subroute}}"></app-route>
<body>
<app-header reveals>
<app-toolbar>
<paper-icon-button icon="menu" onclick="drawer.toggle()"></paper-icon-button>
<div main-title>Spork</div>
<paper-icon-button icon="account-circle" id="profile" on-tap="redirectToProfile"></paper-icon-button>
<paper-icon-button icon="mail" id="notifications"></paper-icon-button>
<paper-badge for="notifications" label="{{myNotifications.length}}"></paper-badge>
<triplat-signout-button></triplat-signout-button>
</app-toolbar>
<iron-pages selected="[[routeData.view]]" attr-for-selected="name">
<user-profile name="profile" route="{{subroute}}"></user-profile>
<notifications-view name="notifications" route="{{subroute}}"></notifications-view>
</iron-pages>
</app-header>
<app-drawer id="drawer" swipe-open>
<paper-menu selected="0">
<paper-item>Item One</paper-item>
<paper-item>Item Two</paper-item>
<paper-item>Item Three</paper-item>
</paper-menu>
</app-drawer>
</body>
</template>
<dom-module>
<script>
Polymer({
is: "cst-tririga-ux",
behaviors: [TriPlatViewBehavior],
// Display in browser title.
ready: function() {
var __dictionary__title = "Prudential CRE";
document.title = __dictionary__title;
},
redirectToProfile : function(el) {
var currUser = this.currentUser;
location.pathname = "/#/profile"
}
});
</script>
The user-profile and the notifications-view are just templates. Currently, when I am clicking on the my-profile button. Nothing seems to be happening. Not sure what I am doing wrong. Here is my user-profile.html
<dom-module id="user-profile">
<template>
<div>My user page</div>
</template>
</dom-module>
<script>
Polymer({
is: "user-profile",
});
</script>
Related
I have created a component with 2 paper-icon-buttons. This also include iron-icons. However when I click though ripple is seen. The icon image itself is missing.
Here is the code
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/iron-image/iron-image.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
<dom-module id="lightbox-app">
<template>
<style >
:host {
display: block;
position: fixed;
background: rgba(247, 245, 245, 0.8);
width: 100%;
height: 100%;
}
</style>
<paper-icon-button icon="favorite"style="color: red;" title="heart"></paper-icon-button>
<paper-icon-button icon="arrow-back" style="color: rgb(10, 10, 10);"></paper-icon-button>
<iron-image sizing = "cover" style = "width:calc(100% - 4px); height:180px; background-color: lightgray;"
preload fade src="https://firebasestorage.googleapis.com/v0/b/wishpix-5fff8.appspot.com/o/gn-01.jpg?alt=media&token=dd1a1f47-a2f8-464a-bb3c-0581ea7613d0"></iron-image>
</template>
<script>
/**
* #customElement
* #polymer
*/
class LightboxApp extends Polymer.Element {
static get is() { return 'lightbox-app'; }
static get properties() {
return {
prop1: {
type: String,
value: 'lightbox-app'
}
};
}
ready ()
{
super.ready();
}
}
window.customElements.define(LightboxApp.is, LightboxApp);
</script>
</dom-module>
As mentioned above while the ripple is seen on click, image is not seen
I want this...
Below is a paper-dialog implementation. It contains whitespace at the top and bottom of the dialog element. I want to eliminate the white space.
http://jsbin.com/bupicetoma/1/edit?html,output
<!doctype html>
<head>
<meta charset="utf-8">
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="paper-dialog/paper-dialog.html" rel="import">
<link href="paper-menu/paper-menu.html" rel="import">
<link href="paper-item/paper-item.html" rel="import">
</head>
<body>
<dom-module id="x-element">
<template>
<style>
--paper-menu {
margin: 0 !important;
padding: 0 !important;
}
paper-menu {
padding: 0 !important;
}
paper-item:hover {
background-color: red;
}
paper-item {
--paper-item: {
cursor: pointer;
margin: 0;
};
}
</style>
<button on-tap="show">Show</button>
<paper-dialog id="dia">
<paper-menu>
<paper-item>Item 1</paper-item>
<paper-item>Item 2</paper-item>
<paper-item>Item 3</paper-item>
</paper-menu>
</paper-dialog>
</template>
<script>
(function(){
Polymer({
is: "x-element",
properties: {},
show: function() {
this.$.dia.open();
}
});
})();
</script>
</dom-module>
<x-element></x-element>
</body>
... to resemble this.
I want the paper-menu inside the dialog to look like the following paper-menu without any whitespace.
http://jsbin.com/hovayitela/1/edit?html,output
<!doctype html>
<head>
<meta charset="utf-8">
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="paper-menu/paper-menu.html" rel="import">
<link href="paper-item/paper-item.html" rel="import">
</head>
<body>
<dom-module id="x-element">
<template>
<style>
--paper-menu {
margin: 0 !important;
padding: 0 !important;
}
paper-menu {
padding: 0 !important;
}
paper-item:hover {
background-color: red;
}
paper-item {
--paper-item: {
cursor: pointer;
margin: 0;
};
}
</style>
<paper-menu>
<paper-item>Item 1</paper-item>
<paper-item>Item 2</paper-item>
<paper-item>Item 3</paper-item>
</paper-menu>
</template>
<script>
(function(){
Polymer({
is: "x-element",
properties: {},
show: function() {
this.$.dia.open();
}
});
})();
</script>
</dom-module>
<x-element></x-element>
</body>
How can I accomplish this?
Your CSS mixin (--paper-menu) should be declared inside a rule (it's currently outside any rules). I would move that into the paper-menu rule:
paper-menu {
margin: 0 !important;
padding: 0 !important;
}
jsbin
FYI, that whitespace is from paper-dialog-shared-styles.html.
In my custom element's definition, I have the following code:
<dom-module id="dom-element">
<style>
p {
--test: brown;
color: var(--test);
}
</style>
<template>
<p>I'm a DOM element. This is my local DOM!</p>
</template>
<script>
Polymer({
is: "dom-element"
});
</script>
</dom-module>
However, the CSS custom property isn't working. Polymer just turns this:
p {
--test: brown;
color: var(--test);
}
into this:
p {
color: ;
}
But I want the output to be:
p {
color: brown;
}
The demo can be found here: http://plnkr.co/edit/ogMVPKNvc7SYISomWPWm?p=preview
If I don't use Polymer, and create the custom element in pure JavaScript, the CSS custom property works as expected.
I have searched Google, but didn't find something related. What's the problem here? How can I use the CSS custom property with Polymer?
Polymer 1's CSS shim (enabled by default) apparently doesn't handle the CSS variable declaration in the same rule that uses it, so you'd have to move the declaration to :host in this scenario.
<!-- inside dom-module's template -->
<style>
:host {
--test: brown;
}
p {
color: var(--test);
}
</style>
HTMLImports.whenReady(() => {
Polymer({
is: 'x-foo'
});
});
<head>
<base href="https://polygit.org/polymer+1.7.1/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<style>
:host {
--test: brown;
}
p {
color: var(--test);
}
</style>
<p>Hello world</p>
</template>
</dom-module>
</body>
However, you can enable native CSS properties in Polymer with a global setting (useNativeCSSProperties) declared before importing polymer.html, which would allow your code to work as-is:
<script>window.Polymer = {lazyRegister: true, useNativeCSSProperties: true};</script>
<!-- import polymer.html here -->
HTMLImports.whenReady(() => {
Polymer({
is: 'x-foo'
});
});
<head>
<script>window.Polymer = {dom: 'shadow', lazyRegister: 'max', useNativeCSSProperties: true};</script>
<base href="https://polygit.org/polymer+1.7.1/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<style>
p {
--test: brown;
color: var(--test);
}
</style>
<p>Hello world</p>
</template>
</dom-module>
</body>
codepen
Is it possible to use paper-tabs to swich between neon-animated pages? I followed this blog post to write the following code that should work according to the tutorial, however, it doesn't.
...
<paper-tabs selected="{{data.tabName}}" attr-for-selected="key" sticky>
<paper-tab key='foo'>Foo</paper-tab>
<paper-tab key='bar'>Bar</paper-tab>
<paper-tab key='baz'>Baz</paper-tab>
</paper-tabs>
</app-header>
<app-location route="{{route}}"></app-location>
<app-route route="{{route}}" pattern="/tabs/:tabName" data="{{data}}"></app-route>
<neon-animated-pages selected="{{data.tabName}}"
attr-for-selected="key"
entry-animation="slide-from-left-animation"
exit-animation="slide-right-animation">
<neon-animatable key='foo'> Foo </neon-animatable>
<neon-animatable key='bar'> Bar </neon-animatable>
<neon-animatable key='baz'> Baz </neon-animatable>
</neon-animated-pages>
I tried to use data-binding from paper-tabs in the app-header to neon-animatable-pages, is there still some js required?
Thanks in advance,
Stefan
As I see, problem is just by clicking on the tab it does not trigger route change so it wouldn't select the desired page. You could use links in the paper-tab elements to trigger this route change. From the docs:
To use links in tabs, add link attribute to paper-tab and put an element in paper-tab with a tabindex of -1.
So here is a complete example:
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/app-route/app-route.html">
<link rel="import" href="../../bower_components/app-route/app-location.html">
<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="../../bower_components/neon-animation/neon-animated-pages.html">
<link rel="import" href="../../bower_components/neon-animation/neon-animatable.html">
<link rel="import" href="../../bower_components/neon-animation/animations/slide-from-left-animation.html">
<link rel="import" href="../../bower_components/neon-animation/animations/slide-right-animation.html">
<dom-module id="my-app">
<template>
<style>
:host {
display: block;
}
paper-tabs {
background-color: grey;
--paper-tabs-selection-bar-color: white;
}
paper-tab[link] a {
#apply(--layout-horizontal);
#apply(--layout-center-center);
color: white;
text-decoration: none;
}
.page {
width: 100vw;
height: 50vh;
color: black;
font-size: 36px;
text-align: center;
vertical-align: middle;
line-height: 50vh;
}
.p1 {
background-color: yellow;
}
.p2 {
background-color: red;
}
.p3 {
background-color: cyan;
}
</style>
<app-location route="{{route}}"></app-location>
<app-route
route="{{route}}"
pattern="/:tab"
data="{{data}}"
tail="{{tail}}">
</app-route>
<div class="container">
<paper-tabs selected="{{tab}}" attr-for-selected="name">
<paper-tab name="foo" link>Foo</paper-tab>
<paper-tab name="bar" link>Bar</paper-tab>
<paper-tab name="baz" link>Baz</paper-tab>
</paper-tabs>
<neon-animated-pages selected="{{tab}}"
attr-for-selected="name"
entry-animation="slide-from-left-animation"
exit-animation="slide-right-animation">
<neon-animatable class="page p1" name="foo">Foo</neon-animatable>
<neon-animatable class="page p2" name="bar">Bar</neon-animatable>
<neon-animatable class="page p3" name="baz">Baz</neon-animatable>
</neon-animated-pages>
</div>
</template>
<script>
Polymer({
is: 'my-app',
properties: {
tab: {
type: String,
reflectToAttribute: true,
observer: '_tabChanged'
}
},
observers: [
'_routeTabChanged(data.tab)'
],
_tabChanged: function(tab) {
console.log('tab changed: ' + tab);
},
_routeTabChanged: function(tab) {
this.tab = tab || 'foo';
},
});
</script>
</dom-module>
Here is my layout. Without iron-list it works, but with it it gives me the error
Uncaught TypeError: this.$.selector.clearSelection is not a function
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../common-settings-service/common-settings-service.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html"/>
<link rel="import" href="../bower_components/paper-material/paper-material.html"/>
<link rel="import" href="../bower_components/iron-list/iron-list.html">
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html">
<dom-module id="common-settings">
<style>
:host {
display: block;
}
paper-material {
background: #FFFFFF;
}
.container {
#apply(--layout-horizontal);
}
.windowItem {
#apply(--layout-horizontal);
}
.list {
#apply(--layout-flex);
#apply(--layout-vertical);
}
.item {
#apply(--layout-horizontal);
margin: 16px 16px 0 16px;
padding: 20px;
border-radius: 8px;
background-color: white;
border: 1px solid #ddd;
}
</style>
<template>
<common-settings-service
id="commonSettings"
url="/board_service/common_settings/"
settings="{{settings}}"/>
<paper-material elevation="1">
<div class="container">
<h3> Настройки обработки</h3>
<h4>Окна</h4>
<div class="list">
<iron-list items="[[settings.timeWindows]]" as="item">
<template>
<div class="item">
Name: <span>[[item]]</span>
</div>
</template>
</iron-list>
</div>
While I don't know how to show you live demo I've been able to debug a little iron-list code. The problem is with the last line.
clearSelection: function() {
function unselect(item) {
var model = this._getModelFromItem(item);
if (model) {
model[this.selectedAs] = false;
}
}
if (Array.isArray(this.selectedItems)) {
this.selectedItems.forEach(unselect, this);
} else if (this.selectedItem) {
unselect.call(this, this.selectedItem);
}
this.$.selector.clearSelection();
},
Debugging shows that there is really no such function in selector. And this selector is actually array-selector element from polymer library. And it have such function in the source code.
Ok, so I've found the reason for this. They've changed API beetween 1.0.9 and 1.1.1. My polymer was version 1.0.9 and that's why it haven't worked.
I've updated all polymer elements to the latest version and now it works.