Skip to content

Commit

Permalink
Merge pull request #9 from PolymerEl/dev
Browse files Browse the repository at this point in the history 
All other PR under one
  • Loading branch information
@urdeveloper
urdeveloper authored Jan 11, 2019
2 parents 5d59c35 + 9a24678 commit 272a50d
Show file tree
Hide file tree
Showing 4 changed files with 505 additions and 380 deletions.
181 changes: 117 additions & 64 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,52 +4,52 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">

<title>ud-stepper demo</title>

<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="../../paper-button/paper-button.html">
<link rel="import" href="../ud-stepper.html">

<custom-style>
<style is="custom-style" include="demo-pages-shared-styles">
ud-step {
height: 250px;
--ud-step-content-style: {
background-color: rgba(0, 0, 0, .1);
padding: 5px;
color: rgba(0, 0, 0, 0.8);
}
}

ud-stepper {
min-height: 350px;
}
.demo-actions {
display: flex;
flex-direction: row;
padding: 10px 0px 10px 0px;
align-items: center;
justify-content: space-between;
}
ud-step {
height: 250px;

.demo-actions .buttons {
display: flex;
flex-direction: row;
justify-content: flex-end;
--ud-step-content-style: {
background-color: rgba(0, 0, 0, .1);
padding: 5px;
color: rgba(0, 0, 0, 0.8);
}
}

.demo-actions .buttons .reset {
background-color: var(--paper-pink-400);
color: white;
}
ud-stepper {
min-height: 350px;
}

.demo-actions .buttons .toggle, .demo-actions .buttons .toggle-animation {
background-color: var(--paper-indigo-400);
color: white;
}
.demo-actions {
display: flex;
flex-direction: row;
padding: 10px 0px 10px 0px;
align-items: center;
justify-content: space-between;
}

.demo-actions .buttons {
display: flex;
flex-direction: row;
justify-content: flex-end;
}

.demo-actions .buttons .toggle,
.demo-actions .buttons .toggle-animation {
background-color: var(--paper-indigo-400);
color: white;
}

.demo-actions .buttons .reset {
background-color: var(--paper-pink-400);
color: white;
}
</style>
</custom-style>
</head>
Expand All @@ -68,13 +68,13 @@ <h3>Linear Stepper</h3>
<template>
<ud-stepper linear sizing="contain" animate>
<ud-step title="Step 1">
<div slot="content">Step 1 Content</div>
<div> Step 1 Content</div>
</ud-step>
<ud-step title="Step 2 with long title">
<div slot="content">Step 2 Content</div>
<ud-step title="Step 2 with veeeeeery long title">
<div>Step 2 Content</div>
</ud-step>
<ud-step title="Step 3">
<div slot="content">Step 3 Content</div>
<div>Step 3 Content</div>
</ud-step>
</ud-stepper>
</template>
Expand All @@ -93,13 +93,13 @@ <h3>Non-Linear Stepper</h3>
<template>
<ud-stepper vertical>
<ud-step title="Step 1 animate">
<div slot="content">Step 1 Content</div>
<div >Step 1 Content</div>
</ud-step>
<ud-step title="Step 2">
<div slot="content">Step 2 Content</div>
<div >Step 2 Content</div>
</ud-step>
<ud-step title="Step 3">
<div slot="content">Step 3 Content</div>
<div >Step 3 Content</div>
</ud-step>
</ud-stepper>
</template>
Expand All @@ -117,13 +117,13 @@ <h3>Linear Stepper with an editable step</h3>
<template>
<ud-stepper linear sizing="contain">
<ud-step title="Step 1" editable>
<div slot="content">Step 1 Content</div>
<div >Step 1 Content</div>
</ud-step>
<ud-step title="Step 2">
<div slot="content">Step 2 Content</div>
<div >Step 2 Content</div>
</ud-step>
<ud-step title="Step 3">
<div slot="content">Step 3 Content</div>
<div >Step 3 Content</div>
</ud-step>
</ud-stepper>
</template>
Expand All @@ -141,13 +141,13 @@ <h3>Linear Stepper with an optional step</h3>
<template>
<ud-stepper linear>
<ud-step title="Step 1">
<div slot="content">Step 1 Content</div>
<div >Step 1 Content</div>
</ud-step>
<ud-step title="Step 2" optional>
<div slot="content">Step 2 Content. You can skip me!</div>
<div >Step 2 Content. You can skip me!</div>
</ud-step>
<ud-step title="Step 3">
<div slot="content">Step 3 Content</div>
<div >Step 3 Content</div>
</ud-step>
</ud-stepper>
</template>
Expand All @@ -165,38 +165,91 @@ <h3>Linear Stepper with error state</h3>
<template>
<ud-stepper linear>
<ud-step title="Step 1" error>
<div slot="content">Step 1 Content</div>
<div >Step 1 Content</div>
</ud-step>
<ud-step title="Step 2">
<div slot="content">Step 2 Content. You can skip me!</div>
<div >Step 2 Content. You can skip me!</div>
</ud-step>
<ud-step title="Step 3">
<div slot="content">Step 3 Content</div>
<div >Step 3 Content</div>
</ud-step>
</ud-stepper>
</template>
</demo-snippet>
</div>
<div class="vertical-section-container centered">
<div class="demo-actions">
<h3>Custom action implementation </h3>
<div class="buttons">
<paper-button class="reset">Reset Stepper</paper-button>
<paper-button class="toggle">Toggle Orientation</paper-button>
</div>
</div>
<demo-snippet>
<template>
<dom-bind id="app">
<template>
<style>
paper-button {
background: white;
}
</style>
<ud-stepper linear>
<ud-step title="Step 1" hide-actions editable>
<div >
<div>Step 1 Content, custom action</div>
<paper-button raised on-tap="next">next</paper-button>
</div>
</ud-step>
<ud-step title="Step 2">
<div >
<div>Step 2 Content, custom action</div>
<div>
<paper-button raised on-tap="back">back</paper-button>
<paper-button raised on-tap="next">next</paper-button>
</div>
</div>
</ud-step>
<ud-step title="Step 3">
<div >Step 3 Content</div>
</ud-step>
</ud-stepper>
</template>

</dom-bind>
</template>
</demo-snippet>
</div>
<script>
window.addEventListener('WebComponentsReady', function () {
document.querySelectorAll('paper-button.reset').forEach(rs => {
rs.addEventListener('tap', (evt) => {
evt.target.parentElement.parentElement.parentElement.querySelector('ud-stepper').reset();
});
window.addEventListener('WebComponentsReady', function() {
console.info('ready');
app = document.querySelector('#app');

app.next = e => {
e.target.dispatchEvent(new CustomEvent('step-action', { detail: 'next', bubbles: true, composed: true }));
};
app.back = e => {
e.target.dispatchEvent(new CustomEvent('step-action', { detail: 'back', bubbles: true, composed: true }));
};

document.querySelectorAll('paper-button.reset').forEach(rs => {
rs.addEventListener('tap', (evt) => {
evt.target.parentElement.parentElement.parentElement.querySelector('ud-stepper').reset();
});
});

document.querySelectorAll('paper-button.toggle').forEach(rs => {
rs.addEventListener('tap', (evt) => {
evt.target.parentElement.parentElement.parentElement.querySelector('ud-stepper').toggleOrientation();
});
document.querySelectorAll('paper-button.toggle').forEach(rs => {
rs.addEventListener('tap', (evt) => {
evt.target.parentElement.parentElement.parentElement.querySelector('ud-stepper').toggleOrientation();
});
});

document.querySelectorAll('paper-button.toggle-animation').forEach(rs => {
rs.addEventListener('tap', (evt) => {
evt.target.parentElement.parentElement.parentElement.querySelector('ud-stepper').toggleAnimation();
});
document.querySelectorAll('paper-button.toggle-animation').forEach(rs => {
rs.addEventListener('tap', (evt) => {
evt.target.parentElement.parentElement.parentElement.querySelector('ud-stepper').toggleAnimation();
});
});
});
</script>
</body>

Expand Down
4 changes: 2 additions & 2 deletions ud-iconset.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@

<iron-iconset-svg size="24" name="ud">
<svg><defs>
<g id="check-circle"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path></g>
<g id="check"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path></g>
<g id="edit"> <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path></g>
<g id="warning"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"></path></g>
<g id="edit-circle"><path d="M5.923 15.545v2.532h2.532l7.467-7.467-2.532-2.532zM17.88 8.652c.263-.263.263-.69 0-.952L16.3 6.12c-.263-.263-.69-.263-.952 0l-1.236 1.236 2.532 2.532zM1 12C1 5.923 5.923 1 12 1s11 4.923 11 11-4.923 11-11 11S1 18.077 1 12z"/></g>
</defs></svg>
</iron-iconset-svg>
Loading

0 comments on commit 272a50d

Please sign in to comment.