SGH / COMPONENTS

Commit 97f5fe0e671c4a669ac11cfe19eabb5c3dbb575f

Authored by Andrea Petta
1 parent 40eb0979

cocreation paper card controllet

Inline Side-by-side
Showing 1 changed file with 142 additions and 0 deletions
controllets/cocreation-paper-card-controllet/cocreation-paper-card-controllet.html 0 → 100644
  View file @97f5fe0
  1 +<link rel="import" href="../../bower_components/polymer/polymer.html"/>
  2 +<link rel="import" href="../../bower_components/paper-card/paper-card.html"/>
  3 +<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html"/>
  4 +<link rel="import" href="../../bower_components/paper-button/paper-button.html"/>
  5 +<link rel="import" href="../../bower_components/iron-icon/iron-icon.html"/>
  6 +<link rel="import" href="../../bower_components/iron-collapse/iron-collapse.html"/>
  7 +
  8 +
  9 +<dom-module id="cocreation-paper-card-controllet">
  10 +
  11 + <template>
  12 + <style>
  13 +
  14 + iron-icon{
  15 + padding-left: 5px;
  16 + padding-right: 5px;
  17 + --iron-icon-height: 16px;
  18 + --iron-icon-width: 16px;
  19 + }
  20 +
  21 + iron-icon.icon-from{
  22 + --iron-icon-fill-color : #000000;
  23 + }
  24 +
  25 + iron-icon.icon-to{
  26 + --iron-icon-fill-color : #ff0000;
  27 + }
  28 +
  29 + paper-card.cocreation {
  30 + width: 310px;
  31 + }
  32 +
  33 + .from, .to {
  34 + font-size: 13px;
  35 + color: #CCCCCC;
  36 + }
  37 +
  38 + .rate-content {
  39 + @apply(--layout-flex);
  40 + float: left;
  41 + width: 100%;
  42 + }
  43 +
  44 + .rate-header { @apply(--paper-font-headline); }
  45 + .rate-name { color: var(--paper-grey-600); margin: 10px 0; }
  46 +
  47 + paper-icon-button.rate-icon {
  48 + --iron-icon-fill-color: white;
  49 + --iron-icon-stroke-color: var(--paper-grey-600);
  50 + }
  51 +
  52 + .collapse-content {
  53 + width: 200px;
  54 + padding: 15px;
  55 + }
  56 +
  57 + iron-collapse.iron-collapse-over
  58 + {
  59 + position: absolute;
  60 + left: -1px;
  61 + margin:0;
  62 + padding:0;
  63 + z-index:10;
  64 + background-color: #FFFFFF;
  65 + border: solid 1px #E6E6E6;
  66 + border-top: none !important;
  67 + min-width: 310px;
  68 + min-height: 188px;
  69 + }
  70 + </style>
  71 +
  72 +
  73 + <paper-card class="cocreation">
  74 + <div class="rate-content">
  75 + <div class="card-content">
  76 + <div class="rate-header">{{name}}</div>
  77 + <div class="rate-name">{{owner}}</div>
  78 + <div>
  79 + <iron-icon class="icon-from" icon="alarm"></iron-icon>
  80 + <span class="from">{{from}}</span>
  81 + <iron-icon class="icon-to" icon="alarm-off"></iron-icon>
  82 + <span class="to">{{to}}</span>
  83 + </div>
  84 + </div>
  85 + <div class="card-actions">
  86 + <paper-button>Explore</paper-button>
  87 + <paper-icon-button icon="expand-less" on-click="_toggle" style="float:right;">
  88 + </paper-icon-button>
  89 + <iron-collapse class="iron-collapse-over" id="more_info" no-animation>
  90 + <div class="collapse-content">
  91 + {{goal}}
  92 + </div>
  93 + </iron-collapse>
  94 + </div>
  95 + </div>
  96 + </paper-card>
  97 +
  98 + </template>
  99 +
  100 + <script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
  101 +
  102 + <script>
  103 + Polymer({
  104 + is: "cocreation-paper-card-controllet",
  105 +
  106 + properties: {
  107 + name:{
  108 + type: String,
  109 + value: "text"
  110 + },
  111 + owner:{
  112 + type: String,
  113 + value: "text"
  114 + },
  115 + from:{
  116 + type: String,
  117 + value: "text"
  118 + },
  119 + to:{
  120 + type: String,
  121 + value: "text"
  122 + },
  123 + goal:{
  124 + type: String,
  125 + value: "text"
  126 + },
  127 + },
  128 +
  129 + attached: function(){
  130 + },
  131 +
  132 + _toggle: function(){
  133 + var moreInfo = this.$.more_info;
  134 + var iconButton = Polymer.dom(event).localTarget;
  135 + iconButton.icon = moreInfo.opened ? 'expand-less' : 'expand-more';
  136 + moreInfo.toggle();
  137 + }
  138 +
  139 + })
  140 + </script>
  141 +
  142 +</dom-module>
0 \ No newline at end of file 143 \ No newline at end of file