WebCompDev / COMPONENTS

Commit 49cc918f02e3e87b584e429b91beef4dab164634

Authored by Luigi Serra
1 parent bf28e75e

selection controllet and card update

Inline Side-by-side
Showing 1 changed file with 116 additions and 36 deletions
controllets/create-card-controllet/create-card-controllet.html
  View file @49cc918
@@ -4,6 +4,8 @@ @@ -4,6 +4,8 @@
4 <link rel="import" href="../../bower_components/iron-icons/iron-icons.html"/> 4 <link rel="import" href="../../bower_components/iron-icons/iron-icons.html"/>
5 <link rel="import" href="../../bower_components/paper-input/paper-textarea.html"/> 5 <link rel="import" href="../../bower_components/paper-input/paper-textarea.html"/>
6 6
  7 +<link rel="import" href="../../controllets/paper-card-controllet/paper-card-controllet.html"/>
  8 +
7 <dom-module id="create-card-controllet"> 9 <dom-module id="create-card-controllet">
8 10
9 <template> 11 <template>
@@ -19,19 +21,19 @@ @@ -19,19 +21,19 @@
19 --paper-fab-background: var(--accent-color); 21 --paper-fab-background: var(--accent-color);
20 font-family: 'Roboto', sans-serif; 22 font-family: 'Roboto', sans-serif;
21 padding-bottom: 30px; 23 padding-bottom: 30px;
  24 + width: 100%;
22 } 25 }
23 26
24 paper-material { 27 paper-material {
25 background-color: white; 28 background-color: white;
26 border-width: 1em; 29 border-width: 1em;
27 - padding: 20px; 30 + padding: 5px;
  31 + margin-bottom: 20px;
28 } 32 }
29 33
30 paper-fab { 34 paper-fab {
31 - position: absolute;  
32 -/* right: 10px;  
33 - bottom: 18px;*/  
34 - z-index: 10; 35 + position: relative;
  36 + left: 90%;
35 --paper-fab-background:#2196F3; 37 --paper-fab-background:#2196F3;
36 } 38 }
37 39
@@ -56,8 +58,8 @@ @@ -56,8 +58,8 @@
56 .avatar 58 .avatar
57 { 59 {
58 display: inline-block; 60 display: inline-block;
59 - height: 2em;  
60 - width: 2em; 61 + height: 0.7em;
  62 + width: 0.7em;
61 border-radius: 50%; 63 border-radius: 50%;
62 background: var(--paper-blue-500); 64 background: var(--paper-blue-500);
63 color: white; 65 color: white;
@@ -96,59 +98,124 @@ @@ -96,59 +98,124 @@
96 font-weight: bold; 98 font-weight: bold;
97 } 99 }
98 100
99 - paper-textarea{  
100 - width: 20vw; 101 + paper-textarea.custom_textarea{
  102 + /*max-width:40vw;*/
101 } 103 }
102 104
  105 + div.vertical{
  106 + margin: 20px;
  107 + }
103 108
104 - </style>  
105 109
  110 + </style>
106 111
107 <div class="horizontal layout"> 112 <div class="horizontal layout">
108 113
109 - <div class="legend vertical layout"> 114 + <div class="vertical layout" style="width: 60%;">
110 115
  116 + <div class="horizontal layout">
  117 + <div class="avatar"></div>
111 <div class="title"> 118 <div class="title">
112 - <div id="toolbar_title" class="big">Title</div> 119 + <div class="big">Title</div>
  120 + <div class="small">This is the tile for your new card. It'll be visualized in the bottom black section.</div>
113 </div> 121 </div>
114 - <br>  
115 - <paper-material animated elevation="2">  
116 - <paper-textarea class="custom_textarea" id="title" label="" maxlength="30" rows="1"></paper-textarea>  
117 - </paper-material>  
118 - <br>  
119 - <template is="dom-if" if="{{checkType(type, 'text')}}"> 122 + </div>
120 123
  124 + <paper-material animated elevation="2">
  125 + <paper-textarea class="custom_textarea" id="title"
  126 + label=""
  127 + char-counter
  128 + maxlength="30"
  129 + rows="1"
  130 + value="{{title}}">
  131 +
  132 + </paper-textarea>
  133 + </paper-material>
  134 +
  135 + <template is="dom-if" if="{{checkType(type, 'link')}}">
  136 +
  137 + <div class="horizontal layout">
  138 + <div class="avatar"></div>
121 <div class="title"> 139 <div class="title">
122 - <div id="toolbar_title" class="big">Text content</div> 140 + <div class="big">Link</div>
  141 + <div class="small">This is the link you want to share.</div>
123 </div> 142 </div>
124 - <br>  
125 - <paper-material animated elevation="2">  
126 - <paper-textarea class="custom_textarea" id="text_content"  
127 - label=""  
128 - autoValidate="true"  
129 - allowedPattern="^(http[s]?:\\/\\/(www\\.)?|ftp:\\/\\/(www\\.)?|www\\.){1}([0-9A-Za-z-\\.@:%_\+~#=]+)+((\\.[a-zA-Z]{2,3})+)(/(.)*)?(\\?(.)*)?"> 143 + </div>
130 144
131 - </paper-textarea>  
132 - </paper-material> 145 + <paper-material animated elevation="2">
  146 + <paper-textarea class="custom_textarea" id="link"
  147 + label=""
  148 + auto-validate
  149 + pattern="^(http[s]?:\\/\\/(www\\.)?|ftp:\\/\\/(www\\.)?|www\\.){1}([0-9A-Za-z-\\.@:%_\+~#=]+)+((\\.[a-zA-Z]{2,3})+)(/(.)*)?(\\?(.)*)?"
  150 + error-message="Urls only!"
  151 + value="{{link}}">
  152 +
  153 + </paper-textarea>
  154 + </paper-material>
133 155
134 - </template> 156 + </template>
135 157
136 158
137 - <template is="dom-if" if="{{checkType(type, 'link')}}"> 159 + <template is="dom-if" if="{{checkType(type, 'text')}}">
138 160
  161 + <div class="horizontal layout">
  162 + <div class="avatar"></div>
139 <div class="title"> 163 <div class="title">
140 - <div id="toolbar_title" class="big">Link</div> 164 + <div class="big">Text content</div>
  165 + <div class="small">It's the text content of your card. It'll be visualize in the body(yellow top section).</div>
141 </div> 166 </div>
142 - <br>  
143 - <paper-material animated elevation="2">  
144 - <paper-textarea class="custom_textarea" id="link" label="" maxlength="4096"></paper-textarea>  
145 - </paper-material> 167 + </div>
146 168
147 - </template> 169 + <paper-material animated elevation="2">
  170 + <paper-textarea class="custom_textarea" id="text"
  171 + label=""
  172 + char-counter
  173 + max-rows="6"
  174 + rows="6"
  175 + maxlength="1024"
  176 + value="{{text}}">
  177 +
  178 + </paper-textarea>
  179 + </paper-material>
  180 +
  181 + </template>
148 182
  183 + <div class="horizontal layout">
  184 + <div class="avatar"></div>
  185 + <div class="title">
  186 + <div class="big">Comment</div>
  187 + <div class="small">Copy and paste/drag and drop in the textarea the url of datasource</div>
  188 + </div>
149 </div> 189 </div>
150 190
151 - <!--<paper-fab mini icon="add-circle" on-click="_handleFabClick"></paper-fab>--> 191 + <paper-material animated elevation="2">
  192 + <paper-textarea class="custom_textarea" id="comment"
  193 + label=""
  194 + char-counter
  195 + maxlength="100"
  196 + value="{{comment}}">
  197 +
  198 + </paper-textarea>
  199 + </paper-material>
  200 +
  201 + </div>
  202 +
  203 + <div class="vertical layout" style="width: 40%;">
  204 +
  205 + <paper-fab mini icon="add-circle" on-click="_handleFabClick"></paper-fab>
  206 +
  207 + <div id="card_preview">
  208 + <paper-card-controllet
  209 + class="grid-item"
  210 + width="300"
  211 + height="300"
  212 + type="{{type}}"
  213 + text="{{comment}}"
  214 + legend="{{title}}">
  215 + </paper-card-controllet>
  216 + </div>
  217 + </div>
  218 +
152 219
153 </div> 220 </div>
154 221
@@ -163,6 +230,19 @@ @@ -163,6 +230,19 @@
163 type:{ 230 type:{
164 type: String, 231 type: String,
165 value: "text" 232 value: "text"
  233 + },
  234 +
  235 + title:{
  236 + type: String,
  237 + value: "Title"
  238 + },
  239 + content:{
  240 + type: String,
  241 + value: undefined
  242 + },
  243 + comment:{
  244 + type: String,
  245 + value: "comment"
166 } 246 }
167 }, 247 },
168 248