WebCompDev / COMPONENTS

Commit 8c7f320c1b267de2c27e8ef2ecdede4e38e93250

Authored by isisadmin
1 parent 905ac68d

public room

Inline Side-by-side
Showing 2 changed files with 44 additions and 36 deletions
controllets/animated-grid-controllet/animated-grid-controllet.html
  View file @8c7f320
... ... @@ -28,8 +28,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
28 28 }
29 29  
30 30 /* ---- grid-item ---- */
31   -
32   -
33 31 ::content .grid-item {float: left;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;border: 3px solid white;}
34 32 ::content .grid-sizer {width: 200px;}
35 33 ::content .grid-item-w20 {width: 200px;}
... ... @@ -37,31 +35,52 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
37 35 ::content .grid-item-w60 {width: 600px;}
38 36 ::content .grid-item-w80 {width: 80%;}
39 37 ::content .grid-item-w100 {width: 100%;}
40   -
41 38 ::content .grid-item-h200 {height: 200px;}
42 39 ::content .grid-item-h400 {height: 400px;}
43 40 ::content .grid-item-h600 {height: 600px;}
44 41 ::content .grid-item-h800 {height: 800px;}
  42 + ::content .grid-item-c4 {background-color: #2C29FF;}
  43 + /* ---- grid-item ---- */
45 44  
46   - ::content .grid-item-c0 {background-color: #0D47A1;}
47   - ::content .grid-item-c1 {background-color: #1976D2;}
48   - ::content .grid-item-c2 {background-color: #2196F3;}
49   - ::content .grid-item-c3 {background-color: #64B5F6;}
50   - ::content .grid-item-c4 {background-color: #BBDEFB;}
51   -
52   - ::content .room-body {background-color: #BBDEFB;}
53   -
  45 + ::content .room-body {color:#FFFFFF;}
54 46 ::content .room-subject
55 47 {
56 48 position: absolute;
57 49 width: 100%;
58 50 height: 30px;
59   - bottom: 20px;
  51 + bottom: 30px;
60 52 background-color: rgba(0,0,0,0.6);
61   - vertical-align: middle;
62 53 color: #FFFFFF;
63 54 }
64   -
  55 + ::content .room-subject span
  56 + {
  57 + top: 5px;
  58 + left: 5px;
  59 + position: relative;
  60 + text-overflow: ellipsis;
  61 + overflow: hidden;
  62 + white-space:nowrap;
  63 + text-overflow:ellipsis;
  64 + display:inline-block;
  65 + }
  66 + ::content .room-body span
  67 + {
  68 + top: 5px;
  69 + left: 5px;
  70 + position: relative;
  71 + text-overflow: ellipsis;
  72 + overflow: hidden;
  73 + text-overflow:ellipsis;
  74 + display:inline-block;
  75 + }
  76 + ::content .room-timestamp
  77 + {
  78 + position: absolute;
  79 + right:3px;
  80 + bottom: 3px;
  81 + font-size: 8px;
  82 + color: #CCCCCC;
  83 + }
65 84 </style>
66 85  
67 86 <template>
... ... @@ -146,8 +165,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
146 165  
147 166 var target = event.target;
148 167  
149   - if(target.classList[0] != "grid-item")
150   - return;
  168 + while(target.classList[0] != "grid-item")
  169 + target = target.parentElement;
151 170  
152 171 // configure the page animation
153 172 this.sharedElements = {
... ... @@ -161,8 +180,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
161 180  
162 181 this.fire('tile-click', {
163 182 tile: target,
164   - //data: {color: target._templateInstance.item.c}
165   - data: {color: target.classList[3], id:target.id}
  183 + data: {color: target.style.backgroundColor, id:target.id}
166 184 });
167 185  
168 186 }
... ...
controllets/fullsize-page-with-card-controllet/fullsize-page-with-card-controllet.html
  View file @8c7f320
... ... @@ -31,24 +31,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
31 31 height: 90%;
32 32 }
33 33  
34   - .grid-item-c0 {background-color: #0D47A1;}
35   - .grid-item-c1 {background-color: #1976D2;}
36   - .grid-item-c2 {background-color: #2196F3;}
37   - .grid-item-c3 {background-color: #64B5F6;}
38   - .grid-item-c4 {background-color: #BBDEFB;}
39   -
40   - .grid-item-c0-l {background-color: #1565C0;}
41   - .grid-item-c1-l {background-color: #1E88E5;}
42   - .grid-item-c2-l {background-color: #42A5F5;}
43   - .grid-item-c3-l {background-color: #90CAF9;}
44   - .grid-item-c4-l {background-color: #E3F2FD;}
45   -
46 34 </style>
47 35  
48 36 <template>
49 37  
50   - <div id="fixed" class$="[[_computeFixedBackgroundClass(color)]]"></div>
51   - <div id="card" class$="[[_computeCardClass(color)]]">
  38 + <div id="fixed" class="fixed" style$="background-color:{{color}}"></div>
  39 + <div id="card" class="card" style$="background-color:{{color}}">
52 40 <template is="dom-if" if="{{_checkUndefined(publicRoom)}}">
53 41 <iframe id="public_room_iframe" src="/public-room/{{publicRoom}}" width="100%" height="100%"></iframe>
54 42 </template>
... ... @@ -129,13 +117,15 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
129 117 },
130 118  
131 119 _computeCardClass: function(color) {
132   - var cls = 'card';
133   - return cls + ' ' + color;
  120 + //var cls = 'card';
  121 + //return cls + ' ' + color;
  122 + this.$.card = color;
134 123 },
135 124  
136 125 _computeFixedBackgroundClass: function(color) {
137   - var cls = 'fixed';
138   - return cls + ' ' + color + '-l';
  126 + //var cls = 'fixed';
  127 + //return cls + ' ' + color + '-l';
  128 + this.$.fixed = color;
139 129 }
140 130  
141 131 });
... ...