Commit 4710a0b6532fc10fbd56fdead2a36fa488064778
1 parent
7fb2403b
cocreation card
Showing
4 changed files
with
185 additions
and
90 deletions
controllets/cocreation-paper-card-controllet/cocreation-paper-card-controllet.html
| @@ -4,122 +4,198 @@ | @@ -4,122 +4,198 @@ | ||
| 4 | <link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html"/> | 4 | <link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html"/> |
| 5 | <link rel="import" href="../../bower_components/paper-button/paper-button.html"/> | 5 | <link rel="import" href="../../bower_components/paper-button/paper-button.html"/> |
| 6 | <link rel="import" href="../../bower_components/iron-icon/iron-icon.html"/> | 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 | <dom-module id="cocreation-paper-card-controllet"> | 11 | <dom-module id="cocreation-paper-card-controllet"> |
| 11 | 12 | ||
| 12 | <template> | 13 | <template> |
| 13 | <style> | 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 | position: absolute; | 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 | --iron-icon-height: 18px; | 93 | --iron-icon-height: 18px; |
| 84 | --iron-icon-width: 18px; | 94 | --iron-icon-width: 18px; |
| 85 | width: 24px; | 95 | width: 24px; |
| 86 | height: 24px; | 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 | <div class="card-content"> | 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> {{from}} | ||
| 174 | + </div> | ||
| 175 | + <div class="to"> | ||
| 176 | + <iron-icon class="icon-to" icon="alarm-off"></iron-icon> {{to}} | ||
| 177 | + </div> | ||
| 111 | </div> | 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 | </div> | 185 | </div> |
| 113 | <div class="card-actions"> | 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 | </div> | 198 | </div> |
| 122 | - </div> | ||
| 123 | </paper-card> | 199 | </paper-card> |
| 124 | 200 | ||
| 125 | </template> | 201 | </template> |
| @@ -133,23 +209,23 @@ | @@ -133,23 +209,23 @@ | ||
| 133 | properties: { | 209 | properties: { |
| 134 | name:{ | 210 | name:{ |
| 135 | type: String, | 211 | type: String, |
| 136 | - value: "text" | 212 | + value: "" |
| 137 | }, | 213 | }, |
| 138 | owner:{ | 214 | owner:{ |
| 139 | type: String, | 215 | type: String, |
| 140 | - value: "text" | 216 | + value: "" |
| 141 | }, | 217 | }, |
| 142 | from:{ | 218 | from:{ |
| 143 | type: String, | 219 | type: String, |
| 144 | - value: "text" | 220 | + value: "" |
| 145 | }, | 221 | }, |
| 146 | to:{ | 222 | to:{ |
| 147 | type: String, | 223 | type: String, |
| 148 | - value: "text" | 224 | + value: "" |
| 149 | }, | 225 | }, |
| 150 | goal:{ | 226 | goal:{ |
| 151 | type: String, | 227 | type: String, |
| 152 | - value: "text" | 228 | + value: "" |
| 153 | }, | 229 | }, |
| 154 | roomUrl: { | 230 | roomUrl: { |
| 155 | type: String, | 231 | type: String, |
| @@ -170,13 +246,11 @@ | @@ -170,13 +246,11 @@ | ||
| 170 | }, | 246 | }, |
| 171 | 247 | ||
| 172 | attached: function(){ | 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 | _handleDeleteClick: function(e){ | 256 | _handleDeleteClick: function(e){ |
controllets/select-dataset-controllet/select-dataset-controllet.html
| @@ -358,6 +358,7 @@ | @@ -358,6 +358,7 @@ | ||
| 358 | this.$.providers_datasets.innerHTML = ln["providersDatasets_" + ln["localization"]]; | 358 | this.$.providers_datasets.innerHTML = ln["providersDatasets_" + ln["localization"]]; |
| 359 | this.$.spod_users_datasets.innerHTML = ln["spodUsersDatasets_" + ln["localization"]]; | 359 | this.$.spod_users_datasets.innerHTML = ln["spodUsersDatasets_" + ln["localization"]]; |
| 360 | this.$.extended_datasets.innerHTML = ln["extendedDatasets_" + ln["localization"]]; | 360 | this.$.extended_datasets.innerHTML = ln["extendedDatasets_" + ln["localization"]]; |
| 361 | + | ||
| 361 | this.$.options_header.innerHTML = ln["datasets_" + ln["localization"]]; | 362 | this.$.options_header.innerHTML = ln["datasets_" + ln["localization"]]; |
| 362 | 363 | ||
| 363 | this.$.all.innerHTML = ln["all_" + ln["localization"]]; | 364 | this.$.all.innerHTML = ln["all_" + ln["localization"]]; |
| @@ -441,7 +442,7 @@ | @@ -441,7 +442,7 @@ | ||
| 441 | this.$.version_option.style.display = "block"; | 442 | this.$.version_option.style.display = "block"; |
| 442 | } | 443 | } |
| 443 | else if(this.tabIndex == 2) { | 444 | else if(this.tabIndex == 2) { |
| 444 | - this.$.options_header.style.display = "none"; | 445 | + this.$.options_header.style.display = "block"; |
| 445 | this.$.provider_option.style.display = "none"; | 446 | this.$.provider_option.style.display = "none"; |
| 446 | // this.$.view_option.style.display = "none"; | 447 | // this.$.view_option.style.display = "none"; |
| 447 | // this.$.search_option.style.display = "none"; | 448 | // this.$.search_option.style.display = "none"; |
locales/cocreation_paper_card_ln.js
0 → 100644
| 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 | \ No newline at end of file | 18 | \ No newline at end of file |
locales/controllet_ln.js
| @@ -252,8 +252,9 @@ ln["forward_it"] = "AVANTI"; | @@ -252,8 +252,9 @@ ln["forward_it"] = "AVANTI"; | ||
| 252 | ln["selectedUrl_it"] = "Url selezionato"; | 252 | ln["selectedUrl_it"] = "Url selezionato"; |
| 253 | ln["wrongUrl_it"] = "Url non valido o provider dati non ancora supportato."; | 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 | ln["spodUsersDatasets_it"] = "DATASET COCREATI"; | 256 | ln["spodUsersDatasets_it"] = "DATASET COCREATI"; |
| 257 | +ln["extendedDatasets_it"] = "RICERCA ESTESA"; | ||
| 257 | ln["datasets_it"] = "LISTA DEI DATASET"; | 258 | ln["datasets_it"] = "LISTA DEI DATASET"; |
| 258 | 259 | ||
| 259 | ln["provider_it"] = "Provider"; | 260 | ln["provider_it"] = "Provider"; |
| @@ -477,7 +478,8 @@ ln["selectedUrl_fr"] = "API URL sélectionné"; | @@ -477,7 +478,8 @@ ln["selectedUrl_fr"] = "API URL sélectionné"; | ||
| 477 | ln["wrongUrl_fr"] = "URL invalide ou fournisseur de données pas encore supporté."; | 478 | ln["wrongUrl_fr"] = "URL invalide ou fournisseur de données pas encore supporté."; |
| 478 | 479 | ||
| 479 | ln["providersDatasets_fr"] = "DATASET DE PROVIDER"; | 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 | ln["datasets_fr"] = "LISTE DE DATASET"; | 483 | ln["datasets_fr"] = "LISTE DE DATASET"; |
| 482 | 484 | ||
| 483 | ln["provider_fr"] = "Provider"; | 485 | ln["provider_fr"] = "Provider"; |
| @@ -702,6 +704,7 @@ ln["wrongUrl_nl"] = "Invalid url or data provider not supported yet."; | @@ -702,6 +704,7 @@ ln["wrongUrl_nl"] = "Invalid url or data provider not supported yet."; | ||
| 702 | 704 | ||
| 703 | ln["providersDatasets_nl"] = "PROVIDERS DATASETS"; | 705 | ln["providersDatasets_nl"] = "PROVIDERS DATASETS"; |
| 704 | ln["spodUsersDatasets_nl"] = "COCREATED DATASETS"; | 706 | ln["spodUsersDatasets_nl"] = "COCREATED DATASETS"; |
| 707 | +ln["extendedDatasets_nl"] = "FROM EXTENDED SEARCH"; | ||
| 705 | ln["datasets_nl"] = "DATASETS LIST"; | 708 | ln["datasets_nl"] = "DATASETS LIST"; |
| 706 | 709 | ||
| 707 | ln["provider_nl"] = "Provider"; | 710 | ln["provider_nl"] = "Provider"; |