public room

isisadmin
1 parent fcc0fee3
Showing 2 changed files with 57 additions and 35 deletions
controllets/animated-grid-controllet/animated-grid-controllet.html
controllets/fullsize-page-with-card-controllet/fullsize-page-with-card-controllet.html
@@ -30,41 +30,47 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
         /* ---- grid-item ---- */
-        .grid-item
+        ::content .grid-item {float: left;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;border: 3px solid white;}
+        ::content .grid-sizer {width: 200px;}
+        ::content .grid-item-w20  {width:  200px;}
+        ::content .grid-item-w40  {width:  400px;}
+        ::content .grid-item-w60  {width:  600px;}
+        ::content .grid-item-w80  {width:  80%;}
+        ::content .grid-item-w100 {width:  100%;}
+
+        ::content .grid-item-h200 {height: 200px;}
+        ::content .grid-item-h400 {height: 400px;}
+        ::content .grid-item-h600 {height: 600px;}
+        ::content .grid-item-h800 {height: 800px;}
+
+        ::content .grid-item-c0 {background-color: #0D47A1;}
+        ::content .grid-item-c1 {background-color: #1976D2;}
+        ::content .grid-item-c2 {background-color: #2196F3;}
+        ::content .grid-item-c3 {background-color: #64B5F6;}
+        ::content .grid-item-c4 {background-color: #BBDEFB;}
+
+        ::content .room-body    {background-color: #BBDEFB;}
+
+        ::content .room-subject
         {
-            float: left;
-            box-sizing: border-box;
-            -moz-box-sizing: border-box;
-            -webkit-box-sizing: border-box;
-            border: 4px solid white;
+            position: absolute;
+            width: 100%;
+            height: 30px;
+            bottom: 20px;
+            background-color: rgba(0,0,0,0.6);
+            vertical-align: middle;
+            color: #FFFFFF;
         }
-        .grid-sizer {width: 200px;}
-        .grid-item-w20  {width:  200px;}
-        .grid-item-w40  {width:  400px;}
-        .grid-item-w60  {width:  600px;}
-        .grid-item-w80  {width:  80%;}
-        .grid-item-w100 {width:  100%;}
-
-        .grid-item-h200 {height: 200px;}
-        .grid-item-h400 {height: 400px;}
-        .grid-item-h600 {height: 600px;}
-        .grid-item-h800 {height: 800px;}
-
-        .grid-item-c0 {background-color: #0D47A1;}
-        .grid-item-c1 {background-color: #1976D2;}
-        .grid-item-c2 {background-color: #2196F3;}
-        .grid-item-c3 {background-color: #64B5F6;}
-        .grid-item-c4 {background-color: #BBDEFB;}
-
     </style>
     <template>
-        <div class="grid">
-            <template is="dom-repeat" items="{{data}}">
+        <div id="grid-container" class="grid">
+            <!--<template is="dom-repeat" items="{{data}}">
                 <div class$="{{item.b}} {{item.w}} {{item.h}} {{item.c}}">{{index}}</div>
-            </template>
+            </template>-->
+            <content></content>
         </div>
         <div class="grid-sizer"></div>
@@ -104,7 +110,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
         ready : function()
         {
-            var randW = 0;
+            /*var randW = 0;
             var randH = 0;
             var randC = 0;
             this.data = [];
@@ -121,7 +127,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
                                       h: 'grid-item-h'+((randH*200)+200),
                                       c: 'grid-item-c'+randC});
-            }
+            }*/
         },
         attached : function()
@@ -152,7 +158,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
             this.fire('tile-click', {
                 tile: target,
-                data: {color: target._templateInstance.item.c}
+                //data: {color: target._templateInstance.item.c}
+                data: {color: target.classList[3], id:target.id}
             });
         }
@@ -9,7 +9,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 <link rel="import" href="../../bower_components/polymer/polymer.html">
 <link rel="import" href="../../bower_components/neon-animation/neon-shared-element-animatable-behavior.html">
-<dom-module id="fullsize-page-with-card">
+<dom-module id="fullsize-page-with-card-controllet">
     <style>
@@ -21,14 +21,14 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
             position: absolute;
             top: 0;
             left: 0;
-            height: 100vh;
+            height: 100%;
             width: 100vw;
         }
         .card {
             position: relative;
             margin: 20px 20px 20px 20px;
-            height: 700px;
+            height: 90%;
         }
         .grid-item-c0 {background-color: #0D47A1;}
@@ -48,7 +48,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
     <template>
         <div id="fixed" class$="[[_computeFixedBackgroundClass(color)]]"></div>
-        <div id="card" class$="[[_computeCardClass(color)]]"></div>
+        <div id="card" class$="[[_computeCardClass(color)]]">
+            <template is="dom-if" if="{{_checkUndefined(publicRoom)}}">
+                <iframe src="/public-room/{{publicRoom}}" width="100%" height="100%"></iframe>
+            </template>
+        </div>
     </template>
@@ -58,7 +62,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
     Polymer({
-        is: 'fullsize-page-with-card',
+        is: 'fullsize-page-with-card-controllet',
         behaviors: [
             Polymer.NeonSharedElementAnimatableBehavior
@@ -66,6 +70,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
         properties: {
+            publicRoom : {
+              type: String
+            },
+
             color: {
                 type: String
             },
@@ -111,6 +119,13 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
         },
+        _checkUndefined: function(variable)
+        {
+          if(typeof variable === 'undefined')
+              return false;
+          return true;
+        },
+
         _computeCardClass: function(color) {
             var cls = 'card';
             return cls + ' ' + color;