WebCompDev / COMPONENTS

Commit 4710a0b6532fc10fbd56fdead2a36fa488064778

Authored by Renato De Donato
1 parent 7fb2403b

cocreation card

Inline Side-by-side
Showing 4 changed files with 185 additions and 90 deletions
controllets/cocreation-paper-card-controllet/cocreation-paper-card-controllet.html
  View file @4710a0b
... ... @@ -4,122 +4,198 @@
4 4 <link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html"/>
5 5 <link rel="import" href="../../bower_components/paper-button/paper-button.html"/>
6 6 <link rel="import" href="../../bower_components/iron-icon/iron-icon.html"/>
7   -<link rel="import" href="../../bower_components/iron-collapse/iron-collapse.html"/>
  7 +<link rel="import" href="../../bower_components/paper-tooltip/paper-tooltip.html">
8 8  
  9 +<script src="../../locales/cocreation_paper_card_ln.js"></script>
9 10  
10 11 <dom-module id="cocreation-paper-card-controllet">
11 12  
12 13 <template>
13 14 <style>
14 15  
15   - iron-icon{
16   - padding-left: 5px;
17   - padding-right: 5px;
18   - --iron-icon-height: 16px;
19   - --iron-icon-width: 16px;
  16 + #card_container {
  17 + height: 200px;
  18 + width: 300px;
  19 + margin-top: 32px;
  20 + margin-left: 32px;
  21 + margin-right: -3.7px;
20 22 }
21 23  
22   - iron-icon.icon-from{
23   - --iron-icon-fill-color : #000000;
  24 + #card_container * {
  25 + font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  26 + font-size: 16px;
  27 + line-height: 24px;
24 28 }
25 29  
26   - iron-icon.icon-to{
27   - --iron-icon-fill-color : #ff0000;
  30 + .card-content {
  31 + padding: 12px;
  32 + height: 103px;
  33 + /*overflow: hidden;*/
  34 + background: #E0E0E0;
28 35 }
29 36  
30   - paper-card.cocreation {
31   - width: 310px;
  37 + .card-actions {
  38 + padding: 12px;
  39 + height: 48px;
  40 + /*overflow: hidden;*/
  41 + border-color: #2196F3;
32 42 }
33 43  
34   - .from, .to {
35   - font-size: 13px;
36   - color: #CCCCCC;
  44 + paper-button {
  45 + height: 48px;
  46 + width: 136px;/*+2*/
  47 + padding: 12px;
  48 + margin: 0;
  49 + font-weight: 700;
  50 +
  51 + background: #FFFFFF;
  52 + color: #000000;
  53 + --paper-button-ink-color: #2196F3;
37 54 }
38 55  
39   - .rate-content {
40   - @apply(--layout-flex);
41   - float: left;
42   - width: 100%;
  56 + paper-button.info {
  57 + cursor: help;
  58 + float: right;
43 59 }
44 60  
45   - .rate-header { @apply(--paper-font-headline); }
46   - .rate-name { color: var(--paper-grey-600); margin: 10px 0; }
  61 + paper-button.info:hover {
  62 + color: #000000;
  63 + }
47 64  
48   - paper-icon-button.rate-icon {
49   - --iron-icon-fill-color: white;
50   - --iron-icon-stroke-color: var(--paper-grey-600);
  65 + paper-button:hover {
  66 + color: #2196F3;
51 67 }
52 68  
53   - .collapse-content {
54   - width: 200px;
55   - padding: 15px;
  69 + paper-icon-button[icon="info-outline"] {
  70 + cursor: help;
  71 + float: right;
  72 +
  73 + height: 48px;
  74 + width: 48px;
  75 + padding: 8px;
  76 + color: #000000;
56 77 }
57 78  
58   - iron-collapse.iron-collapse-over
59   - {
60   - position: absolute;
61   - left: -1px;
62   - margin:0;
63   - padding:0;
64   - z-index:10;
65   - background-color: #FFFFFF;
66   - border: solid 1px #E6E6E6;
67   - border-top: none !important;
68   - min-width: 310px;
69   - min-height: 188px;
70   - }
71   - .badge{
72   - position: absolute;
73   - right: 5px;
74   - bottom: 5px;
75   - background: #2196F3;
  79 + paper-tooltip {
  80 + min-width: 400px;
  81 + --paper-tooltip-background: black;
76 82 }
77 83  
78   - .delete{
  84 + paper-fab {
79 85 position: absolute;
80   - right: 14px;
81   - top: 23px;
82   - background: #2196F3;
  86 + z-index: 10;
  87 + --paper-fab-background:#2196F3;
  88 + }
  89 +
  90 + paper-fab.delete {
  91 + top: -12px;
  92 + right: -12px;
83 93 --iron-icon-height: 18px;
84 94 --iron-icon-width: 18px;
85 95 width: 24px;
86 96 height: 24px;
  97 + --paper-fab-background:#B6B6B6;
87 98 }
88 99  
89   - </style>
  100 + #card_container br {
  101 + display: block;
  102 + margin-top: 8px;
  103 + content: " ";
  104 + }
  105 +
  106 + #card_container p {
  107 + margin: 0;
  108 + padding: 0;
  109 + }
  110 +
  111 + #card_container p .title{
  112 + font-weight: 700;
  113 + color: #2196F3;
  114 + white-space: nowrap;
  115 + }
  116 +
  117 + #card_container p .description{
  118 + }
  119 +
  120 + #card_container .name{
  121 + font-size: 18px;
  122 + font-weight: 700;
  123 + color: #2196F3;
  124 + height: 32px;
  125 +
  126 + overflow: hidden;
  127 + white-space: nowrap;
  128 + text-overflow: ellipsis;
  129 + }
90 130  
  131 + #card_container .owner{
  132 + font-size: 14px;
  133 + height: 47px;
91 134  
92   - <paper-card class="cocreation">
93   - <div class="rate-content">
  135 + overflow: hidden;
  136 + white-space: nowrap;
  137 + text-overflow: ellipsis;
  138 + }
  139 +
  140 + #card_container .time{
  141 + display: flex;
  142 + flex-direction: row;
  143 + height: 24px;
  144 + }
  145 +
  146 + #card_container .from {
  147 + width: 50%;
  148 + font-size: 12px;
  149 + }
  150 +
  151 + #card_container .to {
  152 + width: 50%;
  153 + font-size: 12px;
  154 + }
  155 +
  156 + paper-fab.type {
  157 + bottom: -20px;
  158 + right: 12px;
  159 + cursor: auto;
  160 + }
  161 +
  162 + </style>
  163 +
  164 + <paper-card id="card_container">
94 165 <div class="card-content">
95   - <div class="rate-header">{{name}}</div>
96   - <div class="rate-name">{{owner}}</div>
97   - <div>
98   - <iron-icon class="icon-from" icon="alarm"></iron-icon>
99   - <span class="from">{{from}}</span>
100   - <iron-icon class="icon-to" icon="alarm-off"></iron-icon>
101   - <span class="to">{{to}}</span>
102   - <template is="dom-if" if="{{!checkRoomType(roomType)}}">
103   - <paper-fab mini disabled icon="assessment" class="badge data"></paper-fab>
104   - </template>
105   - <template is="dom-if" if="{{checkRoomType(roomType)}}">
106   - <paper-fab mini disabled icon="description" class="badge knowledge"></paper-fab>
107   - </template>
108   - <template is="dom-if" if="{{isOwner}}">
109   - <paper-fab class="delete" mini icon="delete" on-click="_handleDeleteClick" style="background-color: #b6b6b6;"></paper-fab>
110   - </template>
  166 + <template is="dom-if" if="{{isOwner}}">
  167 + <paper-fab id="card_delete" class="delete" mini icon="delete" on-click="_handleDeleteClick"></paper-fab>
  168 + </template>
  169 + <div class="name">{{name}}</div>
  170 + <div class="owner">{{owner}}</div>
  171 + <div class="time">
  172 + <div class="from">
  173 + <iron-icon class="icon-from" icon="alarm"></iron-icon>&nbsp; {{from}}
  174 + </div>
  175 + <div class="to">
  176 + <iron-icon class="icon-to" icon="alarm-off"></iron-icon>&nbsp; {{to}}
  177 + </div>
111 178 </div>
  179 + <template is="dom-if" if="{{!checkRoomType(roomType)}}">
  180 + <paper-fab mini icon="assessment" class="type" noink></paper-fab>
  181 + </template>
  182 + <template is="dom-if" if="{{checkRoomType(roomType)}}">
  183 + <paper-fab mini icon="description" class="type" noink></paper-fab>
  184 + </template>
112 185 </div>
113 186 <div class="card-actions">
114   - <paper-button on-click="_onExplore">Explore</paper-button>
115   - <paper-icon-button icon="expand-less" on-click="_toggle" style="float:right;"></paper-icon-button>
116   - <iron-collapse class="iron-collapse-over" id="more_info" no-animation>
117   - <div class="collapse-content">
118   - {{goal}}
119   - </div>
120   - </iron-collapse>
  187 + <paper-button on-click="_onExplore"><span id="explore"></span></paper-button>
  188 + <paper-button id="goal_button" class="info"><span id="goal"></span></paper-button>
  189 + <!--<paper-icon-button id="goal_button" icon="info-outline" noink></paper-icon-button>-->
  190 +
  191 + <paper-tooltip for="goal_button" position="bottom" offset="-8">
  192 + <p>
  193 + <span class="title" id="tooltip_goal"></span>
  194 + <br>
  195 + <span class="description">{{goal}}</span>
  196 + </p>
  197 + </paper-tooltip>
121 198 </div>
122   - </div>
123 199 </paper-card>
124 200  
125 201 </template>
... ... @@ -133,23 +209,23 @@
133 209 properties: {
134 210 name:{
135 211 type: String,
136   - value: "text"
  212 + value: ""
137 213 },
138 214 owner:{
139 215 type: String,
140   - value: "text"
  216 + value: ""
141 217 },
142 218 from:{
143 219 type: String,
144   - value: "text"
  220 + value: ""
145 221 },
146 222 to:{
147 223 type: String,
148   - value: "text"
  224 + value: ""
149 225 },
150 226 goal:{
151 227 type: String,
152   - value: "text"
  228 + value: ""
153 229 },
154 230 roomUrl: {
155 231 type: String,
... ... @@ -170,13 +246,11 @@
170 246 },
171 247  
172 248 attached: function(){
173   - },
  249 + cocreation_room_ln["ln"] = ODE.user_language;
174 250  
175   - _toggle: function(){
176   - var moreInfo = this.$.more_info;
177   - var iconButton = Polymer.dom(event).localTarget;
178   - iconButton.icon = moreInfo.opened ? 'expand-less' : 'expand-more';
179   - moreInfo.toggle();
  251 + this.$.goal.innerHTML = cocreation_room_ln["goal_" + cocreation_room_ln["ln"]];
  252 + this.$.tooltip_goal.innerHTML = cocreation_room_ln["goal_" + cocreation_room_ln["ln"]];
  253 + this.$.explore.innerHTML = cocreation_room_ln["explore_" + cocreation_room_ln["ln"]];
180 254 },
181 255  
182 256 _handleDeleteClick: function(e){
... ...
controllets/select-dataset-controllet/select-dataset-controllet.html
  View file @4710a0b
... ... @@ -358,6 +358,7 @@
358 358 this.$.providers_datasets.innerHTML = ln["providersDatasets_" + ln["localization"]];
359 359 this.$.spod_users_datasets.innerHTML = ln["spodUsersDatasets_" + ln["localization"]];
360 360 this.$.extended_datasets.innerHTML = ln["extendedDatasets_" + ln["localization"]];
  361 +
361 362 this.$.options_header.innerHTML = ln["datasets_" + ln["localization"]];
362 363  
363 364 this.$.all.innerHTML = ln["all_" + ln["localization"]];
... ... @@ -441,7 +442,7 @@
441 442 this.$.version_option.style.display = "block";
442 443 }
443 444 else if(this.tabIndex == 2) {
444   - this.$.options_header.style.display = "none";
  445 + this.$.options_header.style.display = "block";
445 446 this.$.provider_option.style.display = "none";
446 447 // this.$.view_option.style.display = "none";
447 448 // this.$.search_option.style.display = "none";
... ...
locales/cocreation_paper_card_ln.js 0 → 100644
  View file @4710a0b
  1 +cocreation_room_ln = [];
  2 +
  3 +/*EN*/
  4 +cocreation_room_ln["explore_en"] = "EXPLORE";
  5 +cocreation_room_ln["goal_en"] = "GOAL";
  6 +
  7 +/*IT*/
  8 +cocreation_room_ln["explore_it"] = "ESPLORA";
  9 +cocreation_room_ln["goal_it"] = "GOAL";
  10 +
  11 +/*FR*/
  12 +cocreation_room_ln["explore_fr"] = "EXPLORE";
  13 +cocreation_room_ln["goal_fr"] = "GOAL";
  14 +
  15 +/*NL*/
  16 +cocreation_room_ln["explore_nl"] = "EXPLORE";
  17 +cocreation_room_ln["goal_nl"] = "GOAL";
0 18 \ No newline at end of file
... ...
locales/controllet_ln.js
  View file @4710a0b
... ... @@ -252,8 +252,9 @@ ln[&quot;forward_it&quot;] = &quot;AVANTI&quot;;
252 252 ln["selectedUrl_it"] = "Url selezionato";
253 253 ln["wrongUrl_it"] = "Url non valido o provider dati non ancora supportato.";
254 254  
255   -ln["providersDatasets_it"] = "DATASETS DEI PROVIDER";
  255 +ln["providersDatasets_it"] = "DATASET DEI PROVIDER";
256 256 ln["spodUsersDatasets_it"] = "DATASET COCREATI";
  257 +ln["extendedDatasets_it"] = "RICERCA ESTESA";
257 258 ln["datasets_it"] = "LISTA DEI DATASET";
258 259  
259 260 ln["provider_it"] = "Provider";
... ... @@ -477,7 +478,8 @@ ln[&quot;selectedUrl_fr&quot;] = &quot;API URL sélectionné&quot;;
477 478 ln["wrongUrl_fr"] = "URL invalide ou fournisseur de données pas encore supporté.";
478 479  
479 480 ln["providersDatasets_fr"] = "DATASET DE PROVIDER";
480   -ln["spodUsersDatasets_fr"] = "DATASET COCRÉÉ";
  481 +ln["spodUsersDatasets_fr"] = "DATASET COCRÉE";
  482 +ln["extendedDatasets_fr"] = "RECHERCHE AVANCÉE";
481 483 ln["datasets_fr"] = "LISTE DE DATASET";
482 484  
483 485 ln["provider_fr"] = "Provider";
... ... @@ -702,6 +704,7 @@ ln[&quot;wrongUrl_nl&quot;] = &quot;Invalid url or data provider not supported yet.&quot;;
702 704  
703 705 ln["providersDatasets_nl"] = "PROVIDERS DATASETS";
704 706 ln["spodUsersDatasets_nl"] = "COCREATED DATASETS";
  707 +ln["extendedDatasets_nl"] = "FROM EXTENDED SEARCH";
705 708 ln["datasets_nl"] = "DATASETS LIST";
706 709  
707 710 ln["provider_nl"] = "Provider";
... ...