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 4 <link rel="import" href="../../bower_components/iron-icons/iron-icons.html"/>
5 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 9 <dom-module id="create-card-controllet">
8 10  
9 11 <template>
... ... @@ -19,19 +21,19 @@
19 21 --paper-fab-background: var(--accent-color);
20 22 font-family: 'Roboto', sans-serif;
21 23 padding-bottom: 30px;
  24 + width: 100%;
22 25 }
23 26  
24 27 paper-material {
25 28 background-color: white;
26 29 border-width: 1em;
27   - padding: 20px;
  30 + padding: 5px;
  31 + margin-bottom: 20px;
28 32 }
29 33  
30 34 paper-fab {
31   - position: absolute;
32   -/* right: 10px;
33   - bottom: 18px;*/
34   - z-index: 10;
  35 + position: relative;
  36 + left: 90%;
35 37 --paper-fab-background:#2196F3;
36 38 }
37 39  
... ... @@ -56,8 +58,8 @@
56 58 .avatar
57 59 {
58 60 display: inline-block;
59   - height: 2em;
60   - width: 2em;
  61 + height: 0.7em;
  62 + width: 0.7em;
61 63 border-radius: 50%;
62 64 background: var(--paper-blue-500);
63 65 color: white;
... ... @@ -96,59 +98,124 @@
96 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 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 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 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 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 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 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 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 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 220 </div>
154 221  
... ... @@ -163,6 +230,19 @@
163 230 type:{
164 231 type: String,
165 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  
... ...