Polymer: Style different core-icon-buttons differently - html

I want to add two core-icon buttons one right-top of a (custom) post-card polymer component and the other at the bottom-center. How do I do this? The current code applies to both the core-icon-buttons (below). Is there a way to qualify the styling of core-icon-button by the icon type?
<template>
<style>
....
core-icon-button {
content: '.icon clear';
position: absolute;
top: 3px;
right: 3px;
color: blue;
}
....
</style>
<core-icon-button icon="clear"></core-icon-button>
<core-icon-button icon="thumb-up"></core-icon-button>
</template>

You are free to use standard well-known HTML elements’ ids/classes for that:
<template>
<style>
.clearbtn { color: white }
#thumbupbtn { left: 100px }
</style>
<core-icon-button class="clearbtn" icon="clear"></core-icon-button>
<core-icon-button id="thumpupbtn" icon="thumb-up"></core-icon-button>
</template>
You might as well use CSS selectors for that:
<style>
core-icon-button[icon="clear"] { color: white }
core-icon-button[icon="thumb-up"] { left: 100px }
</style>
Hope it helps.

Related

Applying CSS to Polymer custom element with iron-media-query

I'm trying to achieve a simple 'media-query' behavior on my custom element using <iron-media-query> from the Polymer API.
Assume i have a container with some text on top the top, and below it is the main content..
My goal is to write media queries so that when the element is displayed on a big screen (just bigger than 768px for my testing), i can do some simple margin and padding modifications to the elements local DOM styles.
I just can't make it work.
Is there something i completely missed here ?
<link rel="import" href="../../bower_components/polymer/polymer.html"/>
<link rel="import" href="../../bower_components/iron-media-query/iron-media-query.html" />
<iron-media-query query="(max-width:768px)" query-matches="{{isMobilePhone}}"></iron-media-query>
<template is="dom-if" if="{{isMobilePhone}}">
<style>
#title {
color: #000000;
font-size: 1.8em;
}
</style>
</template>
<template>
<style>
:host {
background-color: gray;
flex-direction: column;
margin: auto;
margin-top: 40px;
display: flex;
width: 90%;
flex-grow: 1;
max-width: 1300px;
}
#title {
color: #7DB8C9;
font-size: 1.3em;
}
.content-wrapper {
height: 100%;
}
</style>
<p id="title">
[[title]]
</p>
<div class="content-wrapper">
<content select=".content"></content>
</div>
</template>
<script>
Polymer({
is: 'content-container',
properties: {
title: String,
isMobilePhone: Boolean
},
listeners: {
'tap': 'spit'
},
spit: function() {
console.log("BOOL: " + this.isMobilePhone);
}
});
</script> </dom-module>
I also tried copying the whole template ( with styles and markup ) inside the 'if' template and just modify the styles i want, but it doesn't work either.
(Everything is inside the same file, which is content-container.html)
One of the easiest ways to achieve this (which is the one used in the iron-media-query demo) is to use Polymer's annotated attribute bindings together with attribute selectors.
A simple example of an element's template would look like this
<template>
<style>
.content-wrapper ::content {
color: blue;
}
.content-wrapper[mobile-layout] ::content {
color: green;
}
</style>
<iron-media-query query="(max-width:768px)" query-matches="{{isMobilePhone}}"></iron-media-query>
<div class="content-wrapper" mobile-layout$="[[isMobilePhone]]">
<content></content>
</div>
</template>
Here's a fiddle showing it in action
<style> tags anywhere inside a <dom-module> (even dom-if) are applied to the element immediately (as seen in this demo), so putting <style> inside a dom-if would not give you conditional styles.
And if the only purpose of using <iron-media-query> was to add a conditional <style>, you don't need the element at all. Just use the media query normally in CSS:
<style>
...
#title {
color: #7DB8C9;
font-size: 1.3em;
}
#media (max-width:768px) {
#title {
color: #000000;
font-size: 1.8em;
}
}
</style>
codepen

paper-drawer-panel's closeDrawer() not closing with custom header element

UPDATE I was able to close the drawer with document.querySelector('paper-drawer-panel').forceNarrow = true;. I was going to delete this question but maybe I will leave this up to see if there is a way to do this proper with closeDrawer()
I wrote my own custom header, which doesn't use any of the paper header behaviors. It's just it's own custom element html styled header with no behavior or features.
I implemented paper-drawer-panel which worked great with my custom header. However, I can not get closeDrawer() to close the drawer. I see the function itself is function () { this.selected = 'main' }, but not sure how that applies to the inner code of paper-drawer-panel.
How can I make paper-drawer-panel's closeDrawer() to close the drawer?
index.html:
<template is="dom-bind" id="app">
<paper-drawer-panel>
<div drawer>
<drawer-custom></drawer-custom>
</div>
<div main>
<header-custom></header-custom>
<video-selection data-route="home" tabindex="-1"></video-selection>
</div>
</paper-drawer-panel>
</template>
app/elements/drawer-custom.html:
<dom-module id="drawer-custom">
<template>
<style include="iron-flex iron-flex-alignment">
:host {
background-color: var(--brown-color);
height: 1000px;
width: 100%;
overflow-x: hidden;
outline: none;
display: block;
padding-right: 1px;
--iron-icon-height: 42px;
--iron-icon-width: 42px;
}
.v-center {
#apply(--layout-vertical);
#apply(--layout-center-center);
}
#close-drawer {
height: 130px;
width: 100%;
background-color: var(--pink-color);
padding-right: 1px;
}
#contact {
background-color: #a9483b;
height: 130px;
width: 100%;
padding-right: 1px;
}
</style>
<div on-click="_closeDrawer" id="close-drawer" class="v-center">
<iron-icon src='../images/menu-button-close.svg'></iron-icon>
</div>
<div id="contact">
contact
</div>
</template>
<script>
Polymer({
is: 'drawer-custom',
_closeDrawer: function() {
document.querySelector('paper-drawer-panel').closeDrawer();
}
})
</script>
</dom-module>
Solution:
when I added <paper-icon-button> as a child to paper-drawer-panel then the function closeDrawer() worked.

Can't apply styles to dynamically created nodes

I created a custom element and I take html from its <content> and on created I use Polymer.dom(this.root).appendChild(paperItem) (paperItem was created via iteration on HTML I'd received from <content>) to insert that into local DOM. Well, I can't style <paper-item> from template's <style> tag no matter what I do. Even Polymer.updateStyles(); doesn't help. What am I getting wrongly?
Here explain how to apply styles to distributed children.
<dom-module id="my-element">
<template>
<style>
:host {
display: block;
border: 1px solid red;
}
#child-element {
background: yellow;
}
/* styling elements distributed to content (via ::content) requires */
/* selecting the parent of the <content> element for compatibility with */
/* shady DOM . This can be :host or a wrapper element. */
.content-wrapper > ::content .special {
background: orange;
}
</style>
<div id="child-element">In local DOM!</div>
<div class="content-wrapper"><content></content></div>
</template>
<script>
Polymer({
is: 'my-element'
});
</script>
</dom-module>
<my-element>
<div class="special">Here will have a different css </div>
</my-element>

How Polymer Hero Transition works

First off I'm having a tough time understanding the fundamentals of the hero-transition within Polymer. I am attempting to build a hero transition card like the one in the example provided by them, which can be found here.
Below I've built the mini card and I'm just trying to understand the transition and how the larger card works with the smaller one.
My specific question is, how does the transition bind to each element? Do I need to complete the CSS for both before I can begin playing with the core-animated-pages? Does having an embedded template matter?
Any guidance would be extremely helpful.
<script src="../components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="../components/core-animated-pages/core-animated-pages.html">
<link rel="import" href="../components/core-animated-pages/transitions/hero-transition.html">
<link rel="import" href="../components/paper-button/paper-button.html">
<link rel="import" href="../components/core-image/core-image.html">
<link rel="import" href="../components/paper-shadow/paper-shadow.html">
<polymer-element name="chip-card">
<template>
<style>
#page2 {
width: 100%;
height: 100%;
}
#paper_shadow {
position: relative;
display: inline-block;
font-family:'Roboto', sans-serif;
font-size: 12px;
color: white;
}
#chip_body {
height: 400px;
width: 300px;
background-color: aqua;
color: black;
}
#chip_top {
background-color: deeppink;
background-image: url();
background-size: cover;
background-position: center center;
width: 100%;
position: relative;
}
#chip_bottom {
background-color: #fbfbfb;
width: 100%;
height: 20%;
position: relative;
font-size: 1.2em;
word-wrap: break-word;
}
#text {
padding-left: 5%;
padding-right: 2.5%;
overflow: hidden;
}
#coreImage {
display: block;
}
#card_container {
width: 70%;
height: 600px;
background-color: aqua;
color: black;
}
#card_right {
height: 100%;
width: 30%;
}
#card_left {
background-color: darkblue;
height: 100%;
width;
70%;
}
#card_left_top {
padding-right: 20px;
padding-top: 20px;
background-color: skyblue;
}
#circle {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: red;
}
#header_text {
}
#card_content {
width:100%;
background-color: lightcoral;
}
</style>
<core-animated-pages transitions="hero-transition" selected={{page}}>
<section>
<paper-shadow z="1" id='paper_shadow' on-mouseover="{{raise}}" on-mouseout="{{lower}}" animated=true; hero-p="" on-tap="{{transition}}">
<div id="chip_body" hero-id="chip_body" vertical layout center justified>
<div id="chip_top" flex>
<div id="coreImage">
<content select="#core-image"></content>
</div>
</div>
<div id="chip_bottom" vertical layout start-justified>
<div id='text'>
<content select="#chip_bottom"></content>
</div>
</div>
</div>
</paper-shadow>
</section>
<section id="page2">
<div id="card_container" hero-id="chip_body" on-tap="{{transition}}" hero=""></div>
</section>
</core-animated-pages>
</template>
<script>
Polymer('chip-card', {
page: 0,
raise: function() {
this.$.paper_shadow.setZ(2);
},
lower: function() {
this.$.paper_shadow.setZ(1);
},
transition: function(e) {
if (this.page === 0) {
this.$.paper_shadow = e.currentTarget;
this.page = 1;
} else {
this.page = 0;
}
}
});
</script>
</polymer-element>
you are actually very close to a working transition with the code you have.
I've implemented a more complicated hero transition on my website and took some code from there to get yours to work.
<core-animated-pages transitions="hero-transition" selected={{page}}>
<section>
<paper-shadow z="1" id='paper_shadow' on-mouseover="{{raise}}" on-mouseout="{{lower}}" hero-p on-tap="{{transition}}">
<div id="chip_body" hero-id="chip_body" hero vertical layout center justified>
<div id="chip_top" flex>
<div id="coreImage">
<content select="#core-image"></content>
</div>
</div>
<div id="chip_bottom" vertical layout start-justified>
<div id='text'>
<content select="#chip_bottom"></content>
</div>
</div>
</div>
</paper-shadow>
</section>
<section id="page2">
<div id="card_container" hero-id="chip_body" on-tap="{{transition}}" hero></div>
</section>
</core-animated-pages>
I've made but a few adjustments.
First off, any hero parent element, with the hero-p attribute, should contain just that attribute. So no need for the quotation marks :)
<paper-shadow hero-p .. >
Every element that's part of the Hero transition, needs a hero attribute.
Again, without the quotation marks. <div id="chip_body" .. hero .. >
And the same thing goes for the element you're transitioning to.
<div id="card_container" .. hero .. >
I've put a working version of your code on my website.
There's page containing the <chip-card> element and a second page containing the working template file.
Index page
Template file
Please note : I edited the reference to webcomponentsjs to conform with my folder structure.
Feel free to ask me if there's anything else!

onclick event with div tag

I tried something with div tag as follows,
<style type="text/css">
#hello{
visibility: visible;
cursor: pointer;
position: absolute;
}
#list{
visibility: hidden;
cursor: pointer;
position: absolute;
top: 30px;
z-index: 1;
background-color: aqua;
}
#second{
position: absolute;
}
</style>
<div id="hello" onclick="{if(list.style.visibility=='hidden'){list.style.visibility='visible';}else{list.style.visibility='hidden'};}">Hello user</div><br/>
<div id="second">Welcome to smartdata</div>
<div id="list">
Home <br/>
SignOut <br/>
</div>
It is working fine but the problem is list is not displaying on the first click. Any thing wrong with my code.??
Your code doesn't work as you expect it to due to the way element.style works.
Check this MDN link on element.style: https://developer.mozilla.org/en/DOM/element.style
Since the style property has the same (and highest) priority in the
CSS cascade as an inline style declaration via the style attribute, it
is useful for setting style on one specific element.
However, it is not useful for learning about the element's style in
general, since it represents only the CSS declarations set in the
element's inline style attribute, not those that come from style
rules elsewhere, such as style rules in the section, or
external style sheets.
So when you first run your code and even if your element.style.hidden is declared in the external CSS sheet, the style declaration remains empty and you need to perform additional checks.
if (!list.style.visibility || list.style.visibility === 'hidden') {...}
You can take a look at the fiddle to see it work: http://jsfiddle.net/Kk6TJ/1/
Also:
It's best to use triple equal === to perform strict comparison without converting variable type.
You don't need curly braces in your event handlers. If you were hoping that they would create scope - they don't! Only functions in JavaScript have scope.
list.style.visibility=='hidden' is a false statement on first click
try this
{if(list.style.visibility=='hidden' || list.style.visibility='')
<style type="text/css">
#hello{
visibility: visible;
cursor: pointer;
position: absolute;
}
#list{
visibility: hidden;
cursor: pointer;
position: absolute;
top: 30px;
z-index: 1;
background-color: aqua;
}
#second{
position: absolute;
}
</style>
<div id="hello" onclick="{if(list.style.visibility=='hidden' || list.style.visibility==''){list.style.visibility='visible';}else{list.style.visibility='hidden'};}">Hello user</div><br/>
<div id="second">Welcome to smartdata</div>
<div id="list">
Home <br/>
SignOut <br/>
</div>​
This is because your if..else are not in order. Re-ordering of decision statement corrected the behavior, Now first click is showing the menu items.
Also, If you run your script and watch it in firebug console you'll see your javascript code is throwing warning on first click.
I've updated your code -
<style type="text/css">
#hello{
visibility: visible;
cursor: pointer;
position: absolute;
}
#list{
visibility: hidden;
cursor: pointer;
position: absolute;
top: 30px;
z-index: 1;
background-color: aqua;
}
#second{
position: absolute;
}
</style>
<script type="text/javascript">
function Clickme()
{
var list = document.getElementById('list');
if(list.style.visibility=='visible')
{
list.style.visibility='hidden';
}
else
{
list.style.visibility='visible'
}
}
</script>
<div id="hello" onclick="Clickme();">Hello user</div><br/>
<div id="second">Welcome to smartdata</div>
<div id="list">
Home <br/>
SignOut <br/>
</div>
Styles defined in style tags and css files are not in the element.style.property property, they are available if the element has its style set inline <element style="property:value;"> or explicitly element.style.property = value;
To get styles for an element defined in style tags/sheets use window.getComputedStyle(element, null).getPropertyValue(property);`
So you can either inline the styles on list, use getComputedStyle getPropertyValue or use the fact that list.style.visibility is going to be empty on the first click.
Go for something like this -
if(list.style.visibility=="visible")
{
list.style.visibility="hidden";
}
else
{
list.style.visibility="visible"
}