First part of the layout experiment

roberthartung · May 16, 2014 · 87cc392 · 87cc392
1 parent 0f5dc50
commit 87cc392
Show file tree

Hide file tree

Showing 10 changed files with 213 additions and 0 deletions.
diff --git a/web/experiments/layout/main.dart b/web/experiments/layout/main.dart
@@ -0,0 +1,6 @@
+import 'package:polymer/polymer.dart';
+
+@initMethod
+void main() {
+
+}
diff --git a/web/experiments/layout/main.html b/web/experiments/layout/main.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+
+<html>
+  <head>
+  	<meta charset="utf-8">
+  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>main</title>
+    <link rel="import" href="packages/polymer/polymer.html">
+    <link rel="import" href="wi-layout.html">
+    <link rel="import" href="wi-container.html">
+    <link rel="import" href="wi-dock.html">
+    <link rel="import" href="wi-menubar.html">
+    <style>
+      wi-layout {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        background-color: #ccc;
+      }
+
+      #menubar {
+        background-color: green;
+        height: 30px;
+      }
+
+      #dock1 {
+        background-color: red;
+      }
+
+      #dock2 {
+        background-color: yellow;
+      }
+
+      #dock3 {
+        background-color: blue;
+      }
+
+      #dock4 {
+        background-color: purple;
+      }
+    </style>
+  </head>
+
+  <body>   
+    <wi-layout>
+      <wi-container horizontal>
+        <wi-menubar id="menubar"></wi-menubar>
+        <wi-dock id="dock1"></wi-dock>
+        <wi-dock id="dock2"></wi-dock>
+        <wi-container vertical>
+          <wi-dock id="dock3"></wi-dock>
+          <wi-dock id="dock4"></wi-dock>
+        </wi-container>
+      </wi-container>
+    </wi-layout>
+    <script type="application/dart;component=1" src="main.dart"></script>
+    <!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
+    <script src="packages/browser/dart.js"></script>
+  </body>
+</html>
diff --git a/web/experiments/layout/wi-container.dart b/web/experiments/layout/wi-container.dart
@@ -0,0 +1,29 @@
+library webide.layout.container;
+
+import 'package:polymer/polymer.dart';
+
+@CustomTag('wi-container')
+class WiContainer extends PolymerElement {
+  WiContainer.created() : super.created();
+
+  @published bool horizontal = false;
+
+  @published bool vertical = false;
+
+  void enteredView() {
+    super.enteredView();
+
+    print(this.toString() + " enteredView");
+
+    if(horizontal) 
+        classes.add('horizontal');
+
+    if(vertical)
+        classes.add('vertical');
+  }
+
+  @override
+  void ready() {
+    super.ready();
+  }
+}
diff --git a/web/experiments/layout/wi-container.html b/web/experiments/layout/wi-container.html
@@ -0,0 +1,22 @@
+<polymer-element name="wi-container">
+  <template>
+    <style>
+      :host {
+        display: -webkit-flex;
+        display: flex;
+        flex-grow: 1;
+      }
+
+      :host(.vertical) {
+        flex-direction: row;
+      }
+
+      :host(.horizontal) {
+        flex-direction: column;
+      }
+    </style>
+    <content></content>
+  </template>
+
+  <script type="application/dart;component=1" src="wi-container.dart"></script>
+</polymer-element>
diff --git a/web/experiments/layout/wi-dock.dart b/web/experiments/layout/wi-dock.dart
@@ -0,0 +1,19 @@
+library webide.layout.dock;
+
+import 'package:polymer/polymer.dart';
+
+@CustomTag('wi-dock')
+class WiDock extends PolymerElement {
+  WiDock.created() : super.created();
+
+  void enteredView() {
+    super.enteredView();
+
+    print(this.toString() + " enteredView");
+  }
+
+  @override
+  void ready() {
+    super.ready();
+  }
+}
diff --git a/web/experiments/layout/wi-dock.html b/web/experiments/layout/wi-dock.html
@@ -0,0 +1,12 @@
+<polymer-element name="wi-dock">
+  <template>
+    <style>
+      :host {
+        flex-grow: 1;
+      }
+    </style>
+    <content></content>
+  </template>
+
+  <script type="application/dart;component=1" src="wi-dock.dart"></script>
+</polymer-element>
diff --git a/web/experiments/layout/wi-layout.dart b/web/experiments/layout/wi-layout.dart
@@ -0,0 +1,19 @@
+library webide.layout;
+
+import 'package:polymer/polymer.dart';
+
+@CustomTag('wi-layout')
+class WiLayout extends PolymerElement {
+  WiLayout.created() : super.created();
+
+  void enteredView() {
+    super.enteredView();
+
+    print(this.toString() + " enteredView");
+  }
+
+  @override
+  void ready() {
+    super.ready();
+  }
+}
diff --git a/web/experiments/layout/wi-layout.html b/web/experiments/layout/wi-layout.html
@@ -0,0 +1,14 @@
+<polymer-element name="wi-layout">
+  <template>
+    <style>
+      :host {
+        display: -webkit-flex;
+        display: flex;
+        flex-grow: 1;
+      }
+    </style>
+    <content></content>
+  </template>
+
+  <script type="application/dart;component=1" src="wi-layout.dart"></script>
+</polymer-element>
diff --git a/web/experiments/layout/wi-menubar.dart b/web/experiments/layout/wi-menubar.dart
@@ -0,0 +1,18 @@
+library webide.layout.menubar;
+
+import 'package:polymer/polymer.dart';
+
+@CustomTag('wi-menubar')
+class WiMenuBar extends PolymerElement {
+  WiMenuBar.created() : super.created();
+
+  @override
+  void polymerCreated() {
+    super.polymerCreated();
+  }
+
+  @override
+  void ready() {
+    super.ready();
+  }
+}
diff --git a/web/experiments/layout/wi-menubar.html b/web/experiments/layout/wi-menubar.html
@@ -0,0 +1,12 @@
+<polymer-element name="wi-menubar">
+  <template>
+    <style>
+      :host {
+        display: block;
+      }
+    </style>
+    <content></content>
+  </template>
+
+  <script type="application/dart;component=1" src="wi-menubar.dart"></script>
+</polymer-element>