Skip to content
This repository was archived by the owner on Jan 13, 2025. It is now read-only.

Update eslint to the latest version 🚀 #855

Merged
merged 14 commits into from
Jul 7, 2017
Merged

Update eslint to the latest version 🚀 #855

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
6d24940
chore(package): update eslint to version 4.1.0
greenkeeper[bot] Jun 24, 2017
d38161c
chore: Update eslint and fix lines that break the rules
amsheehan Jun 29, 2017
7b0ab6c
Merge branch 'master' into greenkeeper/eslint-4.1.0
lynnmercier Jul 6, 2017
1528ed7
feat(layout-grid): Implement layout grid alignment. (#885)
yeelan0319 Jul 6, 2017
3812fbd
fix(fab): FAB z-index is wrong (#888)
touficbatache Jul 6, 2017
6e0a8c9
feat(framework-examples): Add Vue continuous slider example (#827)
Jul 6, 2017
78946c4
fix(toolbar): Increase fixed toolbar's z-index from 1 to 4(#897)
trimox Jul 6, 2017
28bf7a9
chore(package): update testdouble to version 3.2.0 (#865)
lynnmercier Jul 6, 2017
4be947f
feat(snackbar): Implement full-featured Snackbar component (#852)
amsheehan Jul 7, 2017
5b10478
fix(infrastructure): Downgrade closure-compiler (#915)
lynnmercier Jul 7, 2017
c38c4c6
chore(package): update eslint to version 4.1.0
greenkeeper[bot] Jun 24, 2017
028238f
chore: Update eslint and fix lines that break the rules
amsheehan Jun 29, 2017
9387ea4
chore: Update eslint and fix lines that break the rules
amsheehan Jun 29, 2017
a93a33b
Merge branch 'greenkeeper/eslint-4.1.0' of github.com:material-compon…
amsheehan Jul 7, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions demos/fab.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@
position: fixed;
bottom: 1rem;
right: 1rem;
z-index: 1;
}

@media(min-width: 1024px) {
Expand Down
22 changes: 14 additions & 8 deletions demos/layout-grid.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,11 +69,6 @@
max-width: 1280px;
}

.demo-grid.left-align {
margin-left: 0;
margin-right: auto;
}

.demo-grid-legend {
margin: 16px 0 8px 0;
}
Expand Down Expand Up @@ -288,7 +283,8 @@
</div>
</div>

<div class="demo-grid-legend">Grid with max width (1280px) and center alignment</div>
<h2 class="demo-grid-legend">Grid with max width</h2>
<div class="demo-grid-legend">Grid with max width (1280px) and center alignment by default</div>
<div class="demo-grid mdc-layout-grid max-width">
<div class="mdc-layout-grid__inner">
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4"></div>
Expand All @@ -298,15 +294,15 @@
</div>

<div class="demo-grid-legend">Grid with max width (1280px) and left alignment</div>
<div class="demo-grid mdc-layout-grid max-width left-align">
<div class="demo-grid mdc-layout-grid max-width mdc-layout-grid--align-left">
<div class="mdc-layout-grid__inner">
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4"></div>
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4"></div>
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4"></div>
</div>
</div>

<div class="demo-grid-legend">Fixed column width layout grid</div>
<h2 class="demo-grid-legend">Fixed column width layout grid</h2>
<div class="mdc-layout-grid">
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell">
Expand Down Expand Up @@ -338,6 +334,7 @@
</div>
</div>
</div>
<div class="demo-grid-legend">Fixed column width layout grid and center alignment by default</div>
<div class="demo-grid mdc-layout-grid mdc-layout-grid--fixed-column-width">
<div class="mdc-layout-grid__inner">
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-1"></div>
Expand All @@ -346,6 +343,15 @@
</div>
</div>

<div class="demo-grid-legend">Fixed column width layout grid and right alignment</div>
<div class="demo-grid mdc-layout-grid mdc-layout-grid--fixed-column-width mdc-layout-grid--align-right">
<div class="mdc-layout-grid__inner">
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-1"></div>
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-1"></div>
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-1"></div>
</div>
</div>

<div class="demo-ruler"><div id="current"></div></div>
</section>

Expand Down
126 changes: 100 additions & 26 deletions demos/snackbar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,15 @@
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<style>
/* initialize it off screen. */
.loading .example .mdc-snackbar { transform: translateY(100%); }
.loading .example .mdc-snackbar { transform: translateY(200%); }

.mdc-theme--dark {
background-color: #333;
}

.mdc-theme--dark .hero {
background-color: #2d2d2d;
}

/* Override style for hero example. */
.hero .mdc-snackbar {
Expand All @@ -43,6 +51,9 @@
padding-bottom: 8px;
}

.demo-activate-button {
margin-top: 14px;
}

</style>
</head>
Expand Down Expand Up @@ -88,33 +99,26 @@ <h2 class="mdc-typography--title">Basic Example</h2>
</div>
<label for="multiline" id="multiline-label">Multiline</label>
</div>
<br/>

<div class="mdc-checkbox-wrapper">
<div class="mdc-checkbox-wrapper__layout">
<div class="mdc-checkbox">
<input type="checkbox"
class="mdc-checkbox__native-control"
id="action-on-bottom"
aria-labelledby="action-on-bottom-label" />
<div class="mdc-checkbox__background">
<div class="mdc-form-field">
<div class="mdc-checkbox" id="action-on-bottom-checkbox">
<input type="checkbox" class="mdc-checkbox__native-control" id="action-on-bottom" aria-labelledby="action-on-bottom-label" />
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark__path" fill="none" stroke="white"
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
</div>
<label for="action-on-bottom" id="action-on-bottom-label">Action On Bottom</label>
</div>
<br/>

<div class="mdc-checkbox-wrapper">
<div class="mdc-checkbox-wrapper__layout">
<div class="mdc-form-field">
<div class="mdc-checkbox">
<input type="checkbox"
checked
class="mdc-checkbox__native-control"
id="dismiss-on-action"
aria-labelledby="dismiss-on-action-label" />
<input type="checkbox" checked class="mdc-checkbox__native-control" id="dismiss-on-action" aria-labelledby="dismiss-on-action-label" />
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark__path" fill="none" stroke="white"
Expand All @@ -125,19 +129,27 @@ <h2 class="mdc-typography--title">Basic Example</h2>
</div>
<label for="dismiss-on-action" id="dismiss-on-action-label">Dismiss On Action</label>
</div>
<br/>

<div class="field">
<label for="message">Message Text</label>
<input type="text" id="message" value="Message deleted">
<button type="button" class="mdc-button mdc-button--raised mdc-button--primary" id="toggle-dark-theme">Toggle Dark Theme</button>
<br/>

<div class="mdc-textfield">
<input type="text" id="message" class="mdc-textfield__input" value="Message deleted">
<label class="mdc-textfield__label" for="message">Message Text</label>
</div>
<br/>

<div class="field">
<label for="action">Action Text</label>
<input type="text" id="action" value="Undo">
<div class="mdc-textfield">
<input type="text" id="action" class="mdc-textfield__input" value="Undo">
<label class="mdc-textfield__label" for="action">Action Text</label>
</div>
<br/>

<button type="button" id="show-snackbar">Show</button>
<button type="button" id="show-rtl-snackbar">Show RTL</button>
<button type="button" class="demo-activate-button mdc-button mdc-button--raised mdc-button--secondary" id="show-snackbar">Show</button>
<button type="button" class="demo-activate-button mdc-button mdc-button--raised mdc-button--secondary" id="show-rtl-snackbar">Show RTL</button>
<button type="button" class="demo-activate-button mdc-button mdc-button--raised mdc-button--secondary" id="show-start-aligned-snackbar">Show Start Aligned</button>
<button type="button" class="demo-activate-button mdc-button mdc-button--raised mdc-button--secondary" id="show-start-aligned-rtl-snackbar">Show Start Aligned (RTL)</button>

<div id="mdc-js-snackbar"
class="mdc-snackbar demo-hidden"
Expand All @@ -161,6 +173,28 @@ <h2 class="mdc-typography--title">Basic Example</h2>
</div>
</div>
</div>
<div id="mdc-align-start-js-snackbar"
class="mdc-snackbar mdc-snackbar--align-start demo-hidden"
aria-live="assertive"
aria-atomic="true"
aria-hidden="true">
<div class="mdc-snackbar__text"></div>
<div class="mdc-snackbar__action-wrapper">
<button type="button" class="mdc-button mdc-snackbar__action-button"></button>
</div>
</div>
<div dir="rtl">
<div id="mdc-align-start-rtl-js-snackbar"
class="mdc-snackbar mdc-snackbar--align-start demo-hidden"
aria-live="assertive"
aria-atomic="true"
aria-hidden="true">
<div class="mdc-snackbar__text"></div>
<div class="mdc-snackbar__action-wrapper">
<button type="button" class="mdc-button mdc-snackbar__action-button"></button>
</div>
</div>
</div>
</div>
</section>
</main>
Expand All @@ -171,28 +205,52 @@ <h2 class="mdc-typography--title">Basic Example</h2>
var MDCSnackbar = global.mdc.snackbar.MDCSnackbar;
var snackbar = new MDCSnackbar(document.getElementById('mdc-js-snackbar'));
var rtlSnackbar = new MDCSnackbar(document.getElementById('mdc-rtl-js-snackbar'));
var alignStartSnackbar = new MDCSnackbar(document.getElementById('mdc-align-start-js-snackbar'));
var alignStartRTLSnackbar = new MDCSnackbar(document.getElementById('mdc-align-start-rtl-js-snackbar'));
var messageInput = document.getElementById('message');
var actionInput = document.getElementById('action');
var multilineInput = document.getElementById('multiline');
var actionOnBottomInput = document.getElementById('action-on-bottom');
var actionOnBottomCheckbox = document.getElementById('action-on-bottom-checkbox');
var dismissOnActionInput = document.getElementById('dismiss-on-action');
var textFields = document.querySelectorAll('.mdc-textfield');

// Since Action on Bottom cannot be checked if Multi-line Input
// is not, we start with a disabled Action on Bottom option
actionOnBottomCheckbox.classList.add('mdc-checkbox--disabled');
actionOnBottomInput.disabled = true;
actionOnBottomInput.checked = false;

var show = function(sb) {
snackbar.dismissesOnAction = dismissOnActionInput.checked;
var data = {
message: messageInput.value,
actionOnBottom: actionOnBottomInput.checked,
multiline: multilineInput.checked
multiline: multilineInput.checked,
timeout: 2750
};

if (actionInput.value) {
data.actionText = actionInput.value;
data.actionHandler = function() {
console.log(data);
}
}

sb.show(data);
};

multilineInput.addEventListener('click', function () {
if (!multilineInput.checked) {
actionOnBottomCheckbox.classList.add('mdc-checkbox--disabled');
actionOnBottomInput.disabled = true;
actionOnBottomInput.checked = false;
} else {
actionOnBottomCheckbox.classList.remove('mdc-checkbox--disabled');
actionOnBottomInput.disabled = false;
}
});

document.getElementById('show-snackbar').addEventListener('click', function() {
show(snackbar);
});
Expand All @@ -201,6 +259,22 @@ <h2 class="mdc-typography--title">Basic Example</h2>
show(rtlSnackbar);
});

document.getElementById('show-start-aligned-snackbar').addEventListener('click', function() {
show(alignStartSnackbar);
});

document.getElementById('show-start-aligned-rtl-snackbar').addEventListener('click', function() {
show(alignStartRTLSnackbar);
});

document.getElementById('toggle-dark-theme').addEventListener('click', function(evt) {
document.body.classList.contains('mdc-theme--dark') ? document.body.classList.remove('mdc-theme--dark') : document.body.classList.add('mdc-theme--dark');
});

textFields.forEach(function(tf) {
mdc.textfield.MDCTextfield.attachTo(tf);
})

// Remove any element hiding after loading.
window.onload = function() { document.body.className = ''; };
})(this);
Expand Down
Loading