SGH / COMPONENTS

Commit 7383b38e10b5ff703024d766e92629bf1e7f09cc

Authored by Luigi Serra
1 parent eb240478

paper-card-controllet update

Inline Side-by-side
Showing 3 changed files with 253 additions and 201 deletions
controllets/paper-card-controllet/_paper-card-controllet.html deleted
View file @eb24047
1 -<link rel="import" href="../../bower_components/paper-material/paper-material.html"/>  
2 -<link rel="import" href="../../bower_components/paper-fab/paper-fab.html"/>  
3 -<link rel="import" href="../../bower_components/iron-icons/iron-icons.html"/>  
4 -  
5 -  
6 -<dom-module id="paper-card-controllet">  
7 -  
8 - <template>  
9 - <style>  
10 - :host {  
11 - color: #333;  
12 - font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;  
13 - display: inline-block;  
14 - margin: 0 8px 8px ;  
15 - font-size: 14px;  
16 - text-align: justify;  
17 - line-height: 10px;  
18 - --paper-fab-background: var(--accent-color);  
19 - }  
20 -  
21 - paper-material {  
22 - border-radius: 2px;  
23 - background-color: white;  
24 - }  
25 -  
26 - .preview {  
27 - position: relative;  
28 - margin-bottom: 0px;  
29 - /*max-width: 200px;  
30 - max-height: 200px;  
31 - min-width: 200px;  
32 - min-height: 200px;*/  
33 - }  
34 -  
35 - .legend {  
36 - position: absolute;  
37 - background: rgba(0,0,0,0.5);  
38 - bottom: 0;  
39 - color: white;  
40 - height: 40px;  
41 - padding: 0 16px;  
42 - left: 0; right: 0;  
43 - }  
44 -  
45 - paper-fab {  
46 - position: absolute;  
47 - right: 10px;  
48 - bottom: -18px;  
49 - --paper-fab-background:#2196F3;  
50 - }  
51 -  
52 - .content ::content {  
53 - padding: 0 16px 8px;  
54 - font-weight: 300;  
55 - color: var(--secondary-text-color);  
56 - line-height: 24px;  
57 - }  
58 - ::content.buttons {  
59 - margin-top: 8px;  
60 - }  
61 - ::content paper-button, ::content paper-icon-button {  
62 - font-weight: 500;  
63 - color: var(--accent-color);  
64 - }  
65 -  
66 - paper-material{  
67 - max-height: 260px;  
68 - max-width: 200px;  
69 - min-height: 260px;  
70 - min-width: 200px;  
71 - }  
72 -  
73 - #card_content{  
74 - overflow: hidden;  
75 - max-width: 200px;  
76 - max-height: 240px;  
77 - min-width: 200px;  
78 - min-height: 240px;  
79 - }  
80 -  
81 - #datalet_preview{  
82 -  
83 - -ms-transform: scale(0.95);  
84 - -moz-transform: scale(0.95);  
85 - -o-transform: scale(0.95);  
86 - -webkit-transform: scale(0.95);  
87 - transform: scale(0.95);  
88 -  
89 - }  
90 -  
91 - #text_preview{  
92 - font-size: smaller;  
93 - }  
94 -  
95 - </style>  
96 -  
97 - <paper-material elevation="{{elevation}}">  
98 - <div class="vertical layout">  
99 - <div class="preview">  
100 - <div id="card_content">  
101 - <template is="dom-if" if="{{checkType(type,'image')}}">  
102 - <img src="{{imageSrc}}">  
103 - </template>  
104 - <template is="dom-if" if="{{checkType(type,'datalet')}}">  
105 - <div id="datalet_preview"><content></content></div>  
106 - </template>  
107 - <template is="dom-if" if="{{checkType(type,'text')}}">  
108 - <div id="text_preview"><content></content></div>  
109 - </template>  
110 - </div>  
111 - <div class="horizontal layout center legend">  
112 - <span>{{legend}}</span>  
113 - <paper-fab mini icon="{{icon}}"></paper-fab>  
114 - </div>  
115 - </div>  
116 - <div class="content">  
117 - <p>{{text}}</p >  
118 - </div>  
119 - </div>  
120 - </paper-material>  
121 - </template>  
122 -  
123 - <script>  
124 - Polymer({  
125 - is:'paper-card-controllet',  
126 -  
127 - properties: {  
128 - width: {  
129 - type: Number,  
130 - value: 350,  
131 - /*observer: "_changeWidth",*/  
132 - },  
133 - height: {  
134 - type: Number,  
135 - value: 200  
136 - },  
137 -  
138 - legend:{  
139 - type: String,  
140 - value: "Legend"  
141 - },  
142 -  
143 - type:{  
144 - type: String,  
145 - value: "text"  
146 - },  
147 -  
148 - icon:{  
149 - type: String,  
150 - value: "home"  
151 - },  
152 -  
153 - imageSrc: {  
154 - type: String,  
155 - value:""  
156 - }  
157 - },  
158 - _changeWidth: function(data){  
159 - this.style.width = data + "px";  
160 - this.querySelector(".content").width = data + "px";  
161 - },  
162 -  
163 - checkType: function(type, check){  
164 - return (type == check);  
165 - },  
166 -  
167 - ready: function(){  
168 - }  
169 - })  
170 - </script>  
171 -  
172 -  
173 -</dom-module>  
174 \ No newline at end of file 0 \ No newline at end of file
controllets/paper-card-controllet/paper-card-controllet.html
  View file @7383b38
@@ -20,23 +20,20 @@ @@ -20,23 +20,20 @@
20 } 20 }
21 21
22 paper-material { 22 paper-material {
23 - border-radius: 2px;  
24 background-color: white; 23 background-color: white;
  24 + border-width: 1em;
25 } 25 }
26 26
27 - .preview { 27 + .footer {
28 position: relative; 28 position: relative;
29 - margin-bottom: 24px;  
30 - }  
31 - .preview img {  
32 - border-top-right-radius: 2px;  
33 - border-top-left-radius: 2px;  
34 - width: 100%; 29 + /*margin-bottom: 24px;*/
35 } 30 }
  31 +
36 .legend { 32 .legend {
37 - position: absolute;  
38 - background: rgba(0,0,0,0.4);  
39 - bottom: -50px; 33 + position: relative;
  34 + top: -50px;
  35 + background: rgba(0,0,0,0.8);
  36 + bottom: 0;
40 color: white; 37 color: white;
41 height: 50px; 38 height: 50px;
42 padding: 0 16px; 39 padding: 0 16px;
@@ -53,13 +50,13 @@ @@ -53,13 +50,13 @@
53 50
54 #content ::content { 51 #content ::content {
55 /*padding: 0 16px 8px;*/ 52 /*padding: 0 16px 8px;*/
56 - padding: 0 8px 4px; 53 + padding: 0 16px 8px;
57 font-weight: 300; 54 font-weight: 300;
58 color: var(--secondary-text-color); 55 color: var(--secondary-text-color);
59 line-height: 24px; 56 line-height: 24px;
60 max-height: 400px; 57 max-height: 400px;
61 position:relative; 58 position:relative;
62 - overflow: hidden; 59 + overflow: auto;
63 } 60 }
64 ::content.buttons { 61 ::content.buttons {
65 margin-top: 8px; 62 margin-top: 8px;
@@ -68,31 +65,63 @@ @@ -68,31 +65,63 @@
68 font-weight: 500; 65 font-weight: 500;
69 color: var(--accent-color); 66 color: var(--accent-color);
70 } 67 }
  68 +
  69 + #text{
  70 + position:relative;
  71 + top: -50px;
  72 + height: auto;
  73 + padding: 8px 8px 8px 8px;
  74 + font-size: 10px;
  75 + color: rgba(0,0,0,0.4);
  76 + font-family: 'Roboto', sans-serif;
  77 + }
71 </style> 78 </style>
72 79
73 80
74 <paper-material animated elevation="{{elevation}}" flex> 81 <paper-material animated elevation="{{elevation}}" flex>
  82 +
75 <div class="vertical layout"> 83 <div class="vertical layout">
76 - <div class="preview"> 84 + <div id="content">
  85 + <content></content>
  86 + </div>
77 87
78 - <!--<template is="dom-if" if="{{checkType(type,'image')}}">  
79 - <template is="dom-if" if="{{img}}">  
80 - <img src="{{img}}" height="{{height}}" alt="">  
81 - </template>  
82 - </template>--> 88 + <div class="footer">
83 89
84 <template is="dom-if" if="{{legend}}"> 90 <template is="dom-if" if="{{legend}}">
  91 +
85 <div class="legend horizontal layout center"> 92 <div class="legend horizontal layout center">
86 <span>{{legend}}</span> 93 <span>{{legend}}</span>
87 - <template is="dom-if" if="{{icon}}">  
88 - <paper-fab mini icon="{{icon}}"></paper-fab> 94 + <!-- Adding icon based on card type -->
  95 +
  96 + <template is="dom-if" if="{{checkType(type, 'text')}}">
  97 +
  98 + <paper-fab mini icon="create"></paper-fab>
  99 +
  100 + </template>
  101 +
  102 + <template is="dom-if" if="{{checkType(type, 'image')}}">
  103 +
  104 + <paper-fab mini icon="perm-media"></paper-fab>
  105 +
  106 + </template>
  107 +
  108 + <template is="dom-if" if="{{checkType(type, 'datalet')}}">
  109 +
  110 + <paper-fab mini icon="assessment"></paper-fab>
  111 +
  112 + </template>
  113 +
  114 + <template is="dom-if" if="{{checkType(type, 'link')}}">
  115 +
  116 + <paper-fab mini icon="link"></paper-fab>
  117 +
89 </template> 118 </template>
  119 +
90 </div> 120 </div>
  121 +
91 </template> 122 </template>
92 - </div>  
93 123
94 - <div id="content">  
95 - <content></content> 124 + <div id="text">{{text}}</div>
96 </div> 125 </div>
97 126
98 </div> 127 </div>
@@ -122,14 +151,14 @@ @@ -122,14 +151,14 @@
122 151
123 _changeWidth: function(data){ 152 _changeWidth: function(data){
124 this.style.width = data + "px"; 153 this.style.width = data + "px";
125 - this.querySelector("#content").width = (data-50) + "px"; 154 + //this.$.content.style.width = data + "px";
126 //$(this.$.content).perfectScrollbar(); 155 //$(this.$.content).perfectScrollbar();
127 }, 156 },
128 157
129 _changeHeight: function(data){ 158 _changeHeight: function(data){
130 - this.style.height = data + "px";  
131 - this.querySelector("#content").height = (data-50) + "px";  
132 - //$(this.$.content).perfectScrollbar(); 159 + this.style.height = (data + 20) + "px";
  160 + this.$.content.style.height = data + "px";
  161 + //$(this.$.content).perfectScrollbar();
133 }, 162 },
134 163
135 checkType: function(type, check){ 164 checkType: function(type, check){
controllets/paper-card-controllet/paper-card-controllet__.html 0 → 100644
  View file @7383b38
  1 +<link rel="import" href="../../bower_components/polymer/polymer.html"/>
  2 +<link rel="import" href="../../bower_components/paper-material/paper-material.html"/>
  3 +<link rel="import" href="../../bower_components/paper-fab/paper-fab.html"/>
  4 +<link rel="import" href="../../bower_components/iron-icons/iron-icons.html"/>
  5 +
  6 +<dom-module id="paper-card-controllet">
  7 +
  8 + <template>
  9 + <link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
  10 + <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
  11 + <style>
  12 + :host {
  13 + display: inline-block;
  14 + margin: 0 8px 8px ;
  15 + font-size: 14px;
  16 + line-height: 10px;
  17 + --paper-fab-background: var(--accent-color);
  18 + font-family: 'Roboto', sans-serif;
  19 + }
  20 +
  21 + paper-material {
  22 + background-color: white;
  23 + border-width: 1em;
  24 + }
  25 +
  26 + .header {
  27 + position: relative;
  28 + /*margin-bottom: 24px;*/
  29 + }
  30 +
  31 +
  32 + .title
  33 + {
  34 + position: relative;
  35 + margin-left: 40px;
  36 + }
  37 +
  38 + .big
  39 + {
  40 + font-size: 1em;
  41 + padding: 8px;
  42 + }
  43 +
  44 + .small
  45 + {
  46 + font-size: 0.8em;
  47 + padding-top: 10px;
  48 + font-weight: bold;
  49 + }
  50 +
  51 + .legend {
  52 + position: relative;
  53 + float: left;
  54 + width: 100%;
  55 + background: rgba(0,0,0,0.2);
  56 + bottom: 0;
  57 + color: white;
  58 + height: 50px;
  59 + padding: 0 16px;
  60 + left: 0; right: 0;
  61 + }
  62 + paper-fab {
  63 + position: absolute;
  64 + left: 10px;
  65 + margin-top: 24px;
  66 + z-index: 10;
  67 + --paper-fab-background:#2196F3;
  68 + }
  69 +
  70 + #content ::content {
  71 + /*padding: 0 16px 8px;*/
  72 + padding: 0 16px 8px;
  73 + font-weight: 300;
  74 + color: var(--secondary-text-color);
  75 + line-height: 24px;
  76 + max-height: 400px;
  77 + position:relative;
  78 + overflow: auto;
  79 + }
  80 + ::content.buttons {
  81 + margin-top: 8px;
  82 + }
  83 + ::content paper-button, ::content paper-icon-button {
  84 + font-weight: 500;
  85 + color: var(--accent-color);
  86 + }
  87 +
  88 + #text{
  89 + position:relative;
  90 + height: auto;
  91 + padding: 8px 8px 8px 8px;
  92 + font-size: 10px;
  93 + color: rgba(0,0,0,0.4);
  94 + font-family: 'Roboto', sans-serif;
  95 + }
  96 + </style>
  97 +
  98 +
  99 + <paper-material animated elevation="{{elevation}}" flex>
  100 +
  101 + <div class="vertical layout">
  102 +
  103 + <div class="header">
  104 +
  105 + <template is="dom-if" if="{{legend}}">
  106 +
  107 + <div class="legend horizontal layout center">
  108 + <div class="title flex">
  109 + <div class="big">{{legend}}</div>
  110 + <!--<div class="small">Copy and paste/drag and drop in the textarea the url of datasource</div>-->
  111 + </div>
  112 + <!-- Adding icon based on card type -->
  113 +
  114 + <template is="dom-if" if="{{checkType(type, 'text')}}">
  115 +
  116 + <paper-fab mini icon="create"></paper-fab>
  117 +
  118 + </template>
  119 +
  120 + <template is="dom-if" if="{{checkType(type, 'image')}}">
  121 +
  122 + <paper-fab mini icon="perm-media"></paper-fab>
  123 +
  124 + </template>
  125 +
  126 + <template is="dom-if" if="{{checkType(type, 'datalet')}}">
  127 +
  128 + <paper-fab mini icon="assessment"></paper-fab>
  129 +
  130 + </template>
  131 +
  132 + <template is="dom-if" if="{{checkType(type, 'link')}}">
  133 +
  134 + <paper-fab mini icon="link"></paper-fab>
  135 +
  136 + </template>
  137 +
  138 + <!--<div id="text">
  139 + Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e
  140 + della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal
  141 + sedicesimo secolo.
  142 + </div>-->
  143 +
  144 + </div>
  145 +
  146 + </template>
  147 +
  148 + <div id="content">
  149 + <content></content>
  150 + </div>
  151 + </div>
  152 +
  153 + </div>
  154 + </paper-material>
  155 +
  156 + </template>
  157 +
  158 + <script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
  159 +
  160 + <script>
  161 + Polymer({
  162 + is: "paper-card-controllet",
  163 + properties: {
  164 + width: {
  165 + type: Number,
  166 + observer: "_changeWidth",
  167 + },
  168 + height: {
  169 + type: Number,
  170 + observer: "_changeHeight",
  171 + },
  172 + type:{
  173 + type: String,
  174 + value: "text"
  175 + }
  176 + },
  177 +
  178 + _changeWidth: function(data){
  179 + this.style.width = data + "px";
  180 + //this.$.content.style.width = data + "px";
  181 + //$(this.$.content).perfectScrollbar();
  182 + },
  183 +
  184 + _changeHeight: function(data){
  185 + this.style.height = (data + 20) + "px";
  186 + this.$.content.style.height = data + "px";
  187 + //$(this.$.content).perfectScrollbar();
  188 + },
  189 +
  190 + checkType: function(type, check){
  191 + return (type == check);
  192 + }
  193 + })
  194 + </script>
  195 +
  196 +</dom-module>
0 \ No newline at end of file 197 \ No newline at end of file