-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Extract title/description to vaadin-login-overlay (#48)
- Make vaadin-login-overlay-element extend vaadin-overlay template - Move title/description to vaadin-login-overlay - Remove props from mixin - Pass through to vloe props set on vaadin-login-overlay - Move styles to vaadin-login-overlary-element - Move tests related to title/description Fix #45
- Loading branch information
1 parent
1b79bbb
commit 7ad5e3b
Showing
10 changed files
with
277 additions
and
214 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,100 @@ | ||
<!-- | ||
@license | ||
Vaadin Login | ||
Copyright (C) 2018 Vaadin Ltd | ||
This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ | ||
--> | ||
|
||
<link rel="import" href="../../polymer/polymer-element.html"> | ||
<link rel="import" href="../../vaadin-overlay/src/vaadin-overlay.html"> | ||
|
||
<dom-module id="vaadin-login-overlay-element-template"> | ||
<template> | ||
<style> | ||
[part="overlay"] { | ||
outline: none; | ||
} | ||
|
||
[part="card"] { | ||
max-width: 100%; | ||
box-sizing: border-box; | ||
overflow: hidden; | ||
display: flex; | ||
flex-direction: column; | ||
} | ||
|
||
[part="brand"] { | ||
box-sizing: border-box; | ||
overflow: hidden; | ||
flex-grow: 1; | ||
flex-shrink: 0; | ||
display: flex; | ||
flex-direction: column; | ||
justify-content: flex-end; | ||
} | ||
|
||
[part="brand"] h1 { | ||
color: inherit; | ||
margin: 0; | ||
} | ||
</style> | ||
<section part="card"> | ||
<div part="brand"> | ||
<h1>[[title]]</h1> | ||
<p>[[description]]</p> | ||
</div> | ||
<div part="form"> | ||
<slot></slot> | ||
</div> | ||
</section> | ||
</template> | ||
<script> | ||
(function() { | ||
let memoizedTemplate; | ||
|
||
/** | ||
* The overlay element | ||
* | ||
* @memberof Vaadin | ||
* @private | ||
*/ | ||
class LoginOverlayElement extends Vaadin.OverlayElement { | ||
static get is() { | ||
return 'vaadin-login-overlay-element'; | ||
} | ||
|
||
static get properties() { | ||
return { | ||
title: { | ||
type: String | ||
}, | ||
description: { | ||
type: String | ||
} | ||
}; | ||
} | ||
|
||
static get template() { | ||
if (!memoizedTemplate) { | ||
// Clone the superclass template | ||
memoizedTemplate = super.template.cloneNode(true); | ||
|
||
// Retrieve the elements from component's template | ||
const thisTemplate = Polymer.DomModule.import(this.is + '-template', 'template'); | ||
const card = thisTemplate.content.querySelector('[part=card]'); | ||
const styles = thisTemplate.content.querySelector('style'); | ||
|
||
// Append elements to cloned template | ||
const content = memoizedTemplate.content.querySelector('#content'); | ||
content.replaceChild(card, content.children[0]); | ||
content.appendChild(styles); | ||
} | ||
|
||
return memoizedTemplate; | ||
} | ||
} | ||
|
||
customElements.define(LoginOverlayElement.is, LoginOverlayElement); | ||
})(); | ||
</script> | ||
</dom-module> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.