Skip to content

Commit

Permalink
Merge pull request #29 from ThomasCybulski/feature/adding-additional-…
Browse files Browse the repository at this point in the history 
…style-properties

Feature/adding additional style properties
  • Loading branch information
@ThomasCybulski
ThomasCybulski authored Jul 20, 2017
2 parents 10e14af + 8e644d0 commit 8339524
Show file tree
Hide file tree
Showing 10 changed files with 446 additions and 298 deletions.
1 change: 0 additions & 1 deletion .travis.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ sudo: required
before_script:
- npm install -g bower polymer-cli web-component-tester
- bower install
- polymer lint
- polymer build -v
node_js: '6'
dist: trusty
13 changes: 8 additions & 5 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ $ polymer serve
</span>
</paper-chip>

<paper-chip label="Custom Avatar Font and Icon Color" class="custom-avatar-font-color">
<paper-chip label="Custom avatar font-size and icon/font color" class="custom-avatar-font-color-and-size">
<span class="chip-background" slot="avatar">
<iron-icon icon="icons:favorite"></iron-icon>
</span>
Expand All @@ -100,9 +100,10 @@ $ polymer serve
--paper-chip-avatar-background-color: #64b5f6;
}
paper-chip.custom-avatar-font-color {
--paper-chip-avatar-font-color: red;
}
paper-chip.custom-avatar-font-color-and-size {
--paper-chip-avatar-font-color: red;
--paper-chip-font-size: 16px;
}
</style>
```

Expand All @@ -125,10 +126,12 @@ $ polymer serve
```html
<paper-chip-input label="+Add (Enter) -Delete (Backspace)" items='["one", "two", "three"]' closable></paper-chip-input>

<paper-chip-input label="+Add (Enter) -Delete (Backspace)">
<paper-chip-input always-float-label label="+Add (Enter) -Delete (Backspace)">
<paper-chip label="Default Tag" slot="input"></paper-chip>
<paper-chip label="Default Tag Closbale" closable slot="input"></paper-chip>
</paper-chip-input>

<paper-chip-input disabled label="+Add (Enter) -Delete (Backspace)" items='["one", "two", "three"]' closable></paper-chip-input>
```

## Example: Autocomplete field with tags
Expand Down
Binary file modified analysis.json
View file
Binary file not shown.
9 changes: 3 additions & 6 deletions bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "paper-chip",
"version": "2.0.8",
"version": "2.0.9",
"authors": [
"Thomas Cybulski <[email protected]>"
],
Expand All @@ -9,7 +9,7 @@
"license": "MIT",
"homepage": "https://github.com/ThomasCybulski/paper-chip",
"dependencies": {
"polymer": "Polymer/polymer#^v2.0.1",
"polymer": "Polymer/polymer#^v2.0.2",
"paper-icon-button": "PolymerElements/paper-icon-button#^2.0.0",
"paper-input": "PolymerElements/paper-input#^2.0.1",
"paper-item": "PolymerElements/paper-item#^2.0.0",
Expand All @@ -26,9 +26,6 @@
"iron-component-page": "PolymerElements/iron-component-page#^3.0.1",
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^2.0.0",
"web-component-tester": "Polymer/web-component-tester#^v6.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.1"
},
"resolutions": {
"polymer": "^v2.0.1"
"webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.3"
}
}
252 changes: 128 additions & 124 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,170 +2,174 @@
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">

<title>paper-chip demo</title>
<title>paper-chip demo</title>

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>

<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>

<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
<link rel="import" href="../../iron-icons/iron-icons.html">
<link rel="import" href="../../paper-input/paper-input.html">
<link rel="import" href="../../paper-toast/paper-toast.html">
<link rel="import" href="../paper-chip.html">
<link rel="import" href="../paper-chip-input.html">
<link rel="import" href="../paper-chip-input-autocomplete.html">
<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
<link rel="import" href="../../iron-icons/iron-icons.html">
<link rel="import" href="../../paper-input/paper-input.html">
<link rel="import" href="../../paper-toast/paper-toast.html">
<link rel="import" href="../paper-chip.html">
<link rel="import" href="../paper-chip-input.html">
<link rel="import" href="../paper-chip-input-autocomplete.html">

<script src="states.js"></script>
<script src="states.js"></script>

<style is="custom-style" include="demo-pages-shared-styles">
<style is="custom-style" include="demo-pages-shared-styles">

</style>
</style>
</head>

<body unresolved>

<paper-toast id="toast"></paper-toast>
<paper-toast id="toast"></paper-toast>

<div class="vertical-section-container centered">
<h3>Basic paper-chip's</h3>
<demo-snippet>
<template>
<paper-chip label="Basic"></paper-chip>
<div class="vertical-section-container centered">
<h3>Basic paper-chip's</h3>
<demo-snippet>
<template>
<paper-chip label="Basic"></paper-chip>

<paper-chip label="Basic with Avatar Text">
<span class="chip-background" slot="avatar">
<paper-chip label="Basic with Avatar Text">
<span class="chip-background" slot="avatar">
<span>T</span>
</span>
</paper-chip>
</span>
</paper-chip>

<paper-chip label="Closable" closable></paper-chip>
<paper-chip label="Closable" closable></paper-chip>

<paper-chip label="Closable and image" closable>
<img class="chip-image" slot="avatar" src="avatar.png" alt="Contact Person">
</paper-chip>
<paper-chip label="Closable and image" closable>
<img class="chip-image" slot="avatar" src="avatar.png" alt="Contact Person">
</paper-chip>

<paper-chip label="Closable and icon" closable>
<span class="chip-background" slot="avatar">
<paper-chip label="Closable and icon" closable>
<span class="chip-background" slot="avatar">
<iron-icon icon="icons:favorite"></iron-icon>
</span>
</paper-chip>
</paper-chip>

</template>
</demo-snippet>
</template>
</demo-snippet>

<h3>paper-chip's with custom styles</h3>
<demo-snippet>
<template>
<paper-chip label="Custom Label Color" class="custom-label-color"></paper-chip>
<h3>paper-chip's with custom styles</h3>
<demo-snippet>
<template>
<paper-chip label="Custom label color" class="custom-label-color"></paper-chip>

<paper-chip label="Custom Background Color" class="custom-background"></paper-chip>
<paper-chip label="Custom background color" class="custom-background"></paper-chip>

<paper-chip label="No hover effect" no-hover></paper-chip>
<paper-chip label="No hover effect" no-hover></paper-chip>

<paper-chip label="Custom Avatar Background Color" class="custom-avatar-background">
<span class="chip-background" slot="avatar">
<span>T</span>
</span>
</paper-chip>
<paper-chip label="Custom avatar background color" class="custom-avatar-background">
<span class="chip-background" slot="avatar">
<span>T</span>
</span>
</paper-chip>

<paper-chip label="Custom Avatar Font and Icon Color" class="custom-avatar-font-color">
<span class="chip-background" slot="avatar">
<iron-icon icon="icons:favorite"></iron-icon>
</span>
</paper-chip>
<paper-chip label="Custom avatar font-size and icon/font color" class="custom-avatar-font-color-and-size">
<span class="chip-background" slot="avatar">
<iron-icon icon="icons:favorite"></iron-icon>
</span>
</paper-chip>

<style is="custom-style">
paper-chip.custom-label-color {
--paper-chip-label-color: #4db6ac;
}

<style is="custom-style">
paper-chip.custom-label-color {
--paper-chip-label-color: #4db6ac;
}
paper-chip.custom-background {
--paper-chip-background-color: #64b5f6;
}

paper-chip.custom-background {
--paper-chip-background-color: #64b5f6;
}
paper-chip.custom-avatar-background {
--paper-chip-avatar-background-color: #64b5f6;
}

paper-chip.custom-avatar-background {
--paper-chip-avatar-background-color: #64b5f6;
}
paper-chip.custom-avatar-font-color-and-size {
--paper-chip-avatar-font-color: red;
--paper-chip-font-size: 16px;
}
</style>

paper-chip.custom-avatar-font-color {
--paper-chip-avatar-font-color: red;
}
</style>
</template>
</demo-snippet>

</template>
</demo-snippet>
<h3>paper-chip's used as tags</h3>
<demo-snippet>
<template>

<h3>paper-chip's used as tags</h3>
<demo-snippet>
<template>
<paper-chip-input label="+Add (Enter) -Delete (Backspace)" items='["one", "two", "three"]' closable></paper-chip-input>

<paper-chip-input label="+Add (Enter) -Delete (Backspace)" items='["one", "two", "three"]' closable></paper-chip-input>
<paper-chip-input always-float-label label="+Add (Enter) -Delete (Backspace)">
<paper-chip label="Default Tag" slot="input"></paper-chip>
<paper-chip label="Default Tag Closable" closable slot="input"></paper-chip>
</paper-chip-input>

<paper-chip-input label="+Add (Enter) -Delete (Backspace)">
<paper-chip label="Default Tag" slot="input"></paper-chip>
<paper-chip label="Default Tag Closable" closable slot="input"></paper-chip>
</paper-chip-input>
<paper-chip-input disabled label="+Add (Enter) -Delete (Backspace)" items='["one", "two", "three"]' closable></paper-chip-input>

</template>
</demo-snippet>
</template>
</demo-snippet>

<h3>paper-chip's from autocomplete</h3>
<demo-snippet>
<template>
<h3>paper-chip's from autocomplete</h3>
<demo-snippet>
<template>

<paper-chip-input-autocomplete id="paper-chip-input-autocomplete" label="+Add (Enter) -Delete (Backspace)" closable></paper-chip-input-autocomplete>
<paper-chip-input-autocomplete id="paper-chip-input-autocomplete" label="+Add (Enter) -Delete (Backspace)" closable></paper-chip-input-autocomplete>

</template>
</demo-snippet>
</template>
</demo-snippet>

</div>
</div>
</body>

</html>
<script>
$(document).ready(function () {
$(this).scrollTop(0);
});

window.addEventListener('WebComponentsReady', function () {

var allPaperChips = document.querySelectorAll('paper-chip[closable]')

allPaperChips.forEach(function (paperChip) {
paperChip.addEventListener("chip-removed", function () {
var toast = document.querySelector('paper-toast');
toast.text = 'Removed paper-chip with label "' + paperChip.label + '"';
toast.open();
});
});

var allPaperChipInputs = document.querySelectorAll('paper-chip-input')

allPaperChipInputs.forEach(function (paperChipInput) {
paperChipInput.addEventListener("chip-removed", function (event) {
var toast = document.querySelector('paper-toast');
toast.text = 'Removed paper-chip with label "' + event.detail.chipLabel + '"';
toast.open();
});
});

var allPaperChipInputAutocomplete = document.querySelectorAll('paper-chip-input-autocomplete')

allPaperChipInputAutocomplete.forEach(function (paperChipInputAutocomplete) {
paperChipInputAutocomplete.addEventListener("chip-removed", function (event) {
var toast = document.querySelector('paper-toast');
toast.text = 'Removed paper-chip with label "' + event.detail.chipLabel + '"';
toast.open();
});
});

var element = document.querySelector('paper-chip-input-autocomplete');
element.source = states;
});
$(document).ready(function () {
$(this).scrollTop(0);
});

window.addEventListener('WebComponentsReady', function () {

var allPaperChips = document.querySelectorAll('paper-chip[closable]')

allPaperChips.forEach(function (paperChip) {
paperChip.addEventListener("chip-removed", function () {
var toast = document.querySelector('paper-toast');
toast.text = 'Removed paper-chip with label "' + paperChip.label + '"';
toast.open();
});
});

var allPaperChipInputs = document.querySelectorAll('paper-chip-input')

allPaperChipInputs.forEach(function (paperChipInput) {
paperChipInput.addEventListener("chip-removed", function (event) {
var toast = document.querySelector('paper-toast');
toast.text = 'Removed paper-chip with label "' + event.detail.chipLabel + '"';
toast.open();
});
});

var allPaperChipInputAutocomplete = document.querySelectorAll('paper-chip-input-autocomplete')

allPaperChipInputAutocomplete.forEach(function (paperChipInputAutocomplete) {
paperChipInputAutocomplete.addEventListener("chip-removed", function (event) {
var toast = document.querySelector('paper-toast');
toast.text = 'Removed paper-chip with label "' + event.detail.chipLabel + '"';
toast.open();
});
});

var element = document.querySelector('paper-chip-input-autocomplete');
element.source = states;
});

</script>
3 changes: 2 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,9 @@

<title>paper-chip</title>

<script src="../webcomponentsjs/webcomponents-loader.js"></script>
<script src="../webcomponentsjs/webcomponents-lite.js"></script>

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-component-page/iron-component-page.html">
</head>

Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "paper-chip",
"version": "2.0.8",
"version": "2.0.9",
"private": false,
"main": "paper-chip.html",
"repository": "https://github.com/ThomasCybulski/paper-chip",
Expand Down
Loading

0 comments on commit 8339524

Please sign in to comment.