Initial flex grid layout (#3 / WIP)

petitatelier · Mar 5, 2019 · 33ba3f2 · 33ba3f2
1 parent 2d1ce01
commit 33ba3f2
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 4 deletions.
diff --git a/packages/slideshow/dia-po.js b/packages/slideshow/dia-po.js
@@ -1,6 +1,17 @@
-import { LitElement, html, css } from "lit-element";
+import { LitElement, html } from "lit-element";
+import { CommonStyles, DiaPoStyles } from "./shared-styles.js";
 
 export class DiaPo extends LitElement {
+  static get styles() {
+    return [ CommonStyles, DiaPoStyles ];
+  };
+
+  render() {
+    return html`
+      <div>‹dia-po›</div>
+      <slot></slot>
+    `;
+  }
 
 }
 

diff --git a/packages/slideshow/dia-show.js b/packages/slideshow/dia-show.js
@@ -1,6 +1,17 @@
-import { LitElement, html, css } from "lit-element";
+import { LitElement, html } from "lit-element";
+import { CommonStyles, DiaShowStyles } from "./shared-styles.js";
 
 export class DiaShow extends LitElement {
+  static get styles() {
+    return [ CommonStyles, DiaShowStyles ];
+  };
+
+  render() {
+    return html`
+      <div>‹dia-show›</div>
+      <slot></slot>
+    `;
+  }
 
 }
 

diff --git a/packages/slideshow/dia-slide.js b/packages/slideshow/dia-slide.js
@@ -1,6 +1,17 @@
-import { LitElement, html, css } from "lit-element";
+import { LitElement, html } from "lit-element";
+import { CommonStyles, DiaSlideStyles } from "./shared-styles.js";
 
 export class DiaSlide extends LitElement {
+  static get styles() {
+    return [ CommonStyles, DiaSlideStyles ];
+  };
+
+  render() {
+    return html`
+      <div>‹dia-slide›</div>
+      <slot></slot>
+    `;
+  }
 
 }
 

diff --git a/packages/slideshow/dia-speaker.js b/packages/slideshow/dia-speaker.js
@@ -1,6 +1,17 @@
-import { LitElement, html, css } from "lit-element";
+import { LitElement, html } from "lit-element";
+import { CommonStyles, DiaSpeakerStyles } from "./shared-styles.js";
 
 export class DiaSpeaker extends LitElement {
+  static get styles() {
+    return [ CommonStyles, DiaSpeakerStyles ];
+  };
+
+  render() {
+    return html`
+      <div>‹dia-speaker›</div>
+      <slot></slot>
+    `;
+  }
 
 }
 

diff --git a/packages/slideshow/shared-styles.js b/packages/slideshow/shared-styles.js
@@ -0,0 +1,36 @@
+import { css } from "lit-element";
+
+const
+  CommonStyles = css`
+    :host[ hidden] { display: none }
+  `,
+  DiaShowStyles = css`
+    :host {
+      display: flex; flex-direction: column;
+      flex-grow: 1;
+      background-color: lightgray
+    }
+  `,
+  DiaSlideStyles = css`
+    :host {
+      display: flex; flex-grow: 1;
+      background-color: red
+    }
+  `,
+  DiaPoStyles = css`
+    :host {
+      display: flex; flex-direction: column;
+      flex-grow: 1;
+      background-color: green }
+  `,
+  DiaSpeakerStyles = css`
+    :host { display: block }
+  `;
+
+export {
+  CommonStyles,
+  DiaShowStyles,
+  DiaSlideStyles,
+  DiaPoStyles,
+  DiaSpeakerStyles
+};