WebCompDev / 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 0 \ No newline at end of file
controllets/paper-card-controllet/paper-card-controllet.html
  View file @7383b38
... ... @@ -20,23 +20,20 @@
20 20 }
21 21  
22 22 paper-material {
23   - border-radius: 2px;
24 23 background-color: white;
  24 + border-width: 1em;
25 25 }
26 26  
27   - .preview {
  27 + .footer {
28 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 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 37 color: white;
41 38 height: 50px;
42 39 padding: 0 16px;
... ... @@ -53,13 +50,13 @@
53 50  
54 51 #content ::content {
55 52 /*padding: 0 16px 8px;*/
56   - padding: 0 8px 4px;
  53 + padding: 0 16px 8px;
57 54 font-weight: 300;
58 55 color: var(--secondary-text-color);
59 56 line-height: 24px;
60 57 max-height: 400px;
61 58 position:relative;
62   - overflow: hidden;
  59 + overflow: auto;
63 60 }
64 61 ::content.buttons {
65 62 margin-top: 8px;
... ... @@ -68,31 +65,63 @@
68 65 font-weight: 500;
69 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 78 </style>
72 79  
73 80  
74 81 <paper-material animated elevation="{{elevation}}" flex>
  82 +
75 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 90 <template is="dom-if" if="{{legend}}">
  91 +
85 92 <div class="legend horizontal layout center">
86 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 118 </template>
  119 +
90 120 </div>
  121 +
91 122 </template>
92   - </div>
93 123  
94   - <div id="content">
95   - <content></content>
  124 + <div id="text">{{text}}</div>
96 125 </div>
97 126  
98 127 </div>
... ... @@ -122,14 +151,14 @@
122 151  
123 152 _changeWidth: function(data){
124 153 this.style.width = data + "px";
125   - this.querySelector("#content").width = (data-50) + "px";
  154 + //this.$.content.style.width = data + "px";
126 155 //$(this.$.content).perfectScrollbar();
127 156 },
128 157  
129 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 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 197 \ No newline at end of file
... ...