WebCompDev / COMPONENTS

Commit bf28e75eb2bd387cca128c891d4745c6a879506d

Authored by Luigi Serra
1 parent 9d4a34db

selection controllet and card update

Inline Side-by-side
Showing 2 changed files with 184 additions and 1 deletions
controllets/create-card-controllet/create-card-controllet.html 0 → 100644
  View file @bf28e75
  1 +<link rel="import" href="../../bower_components/polymer/polymer.html"/>
  2 +<link rel="import" href="../../bower_components/paper-material/paper-material.html"/>
  3 +<link rel="import" href="../../bower_components/paper-fab/paper-fab.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"/>
  6 +
  7 +<dom-module id="create-card-controllet">
  8 +
  9 + <template>
  10 + <link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
  11 + <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
  12 + <style>
  13 + :host {
  14 + display: inline-block;
  15 + margin: 0 8px 8px ;
  16 + font-size: 14px;
  17 + text-align: justify;
  18 + line-height: 10px;
  19 + --paper-fab-background: var(--accent-color);
  20 + font-family: 'Roboto', sans-serif;
  21 + padding-bottom: 30px;
  22 + }
  23 +
  24 + paper-material {
  25 + background-color: white;
  26 + border-width: 1em;
  27 + padding: 20px;
  28 + }
  29 +
  30 + paper-fab {
  31 + position: absolute;
  32 +/* right: 10px;
  33 + bottom: 18px;*/
  34 + z-index: 10;
  35 + --paper-fab-background:#2196F3;
  36 + }
  37 +
  38 + #content ::content {
  39 + /*padding: 0 16px 8px;*/
  40 + padding: 0 16px 8px;
  41 + font-weight: 300;
  42 + color: var(--secondary-text-color);
  43 + line-height: 24px;
  44 + max-height: 400px;
  45 + position:relative;
  46 + overflow: auto;
  47 + }
  48 + ::content.buttons {
  49 + margin-top: 8px;
  50 + }
  51 + ::content paper-button, ::content paper-icon-button {
  52 + font-weight: 500;
  53 + color: var(--accent-color);
  54 + }
  55 +
  56 + .avatar
  57 + {
  58 + display: inline-block;
  59 + height: 2em;
  60 + width: 2em;
  61 + border-radius: 50%;
  62 + background: var(--paper-blue-500);
  63 + color: white;
  64 + line-height: 2em;
  65 + font-size: 1.87em;
  66 + text-align: center;
  67 + }
  68 +
  69 + .title
  70 + {
  71 + position: relative;
  72 + left: 0px;
  73 + /*top: 0.60vh;
  74 + margin-left: 20px;*/
  75 + }
  76 +
  77 + .big
  78 + {
  79 + font-size: 1.37em;
  80 + color: var(--google-grey-500);
  81 + }
  82 +
  83 + .medium
  84 + {
  85 + font-size: 1em;
  86 + padding-bottom: 0.5em;
  87 + color : #000000;
  88 + font-weight: bold;
  89 + }
  90 +
  91 + .small
  92 + {
  93 + font-size: 0.8em;
  94 + padding-top: 10px;
  95 + color: var(--paper-blue-500);
  96 + font-weight: bold;
  97 + }
  98 +
  99 + paper-textarea{
  100 + width: 20vw;
  101 + }
  102 +
  103 +
  104 + </style>
  105 +
  106 +
  107 + <div class="horizontal layout">
  108 +
  109 + <div class="legend vertical layout">
  110 +
  111 + <div class="title">
  112 + <div id="toolbar_title" class="big">Title</div>
  113 + </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')}}">
  120 +
  121 + <div class="title">
  122 + <div id="toolbar_title" class="big">Text content</div>
  123 + </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})+)(/(.)*)?(\\?(.)*)?">
  130 +
  131 + </paper-textarea>
  132 + </paper-material>
  133 +
  134 + </template>
  135 +
  136 +
  137 + <template is="dom-if" if="{{checkType(type, 'link')}}">
  138 +
  139 + <div class="title">
  140 + <div id="toolbar_title" class="big">Link</div>
  141 + </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>
  146 +
  147 + </template>
  148 +
  149 + </div>
  150 +
  151 + <!--<paper-fab mini icon="add-circle" on-click="_handleFabClick"></paper-fab>-->
  152 +
  153 + </div>
  154 +
  155 + </template>
  156 +
  157 + <script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
  158 +
  159 + <script>
  160 + Polymer({
  161 + is: "create-card-controllet",
  162 + properties: {
  163 + type:{
  164 + type: String,
  165 + value: "text"
  166 + }
  167 + },
  168 +
  169 + ready: function(){
  170 + },
  171 +
  172 +
  173 + checkType: function(type, check){
  174 + return (type == check);
  175 + },
  176 +
  177 + _handleFabClick: function(e){
  178 + this.fire('create-card-controllet_button-clicked', {data : this});
  179 + }
  180 + })
  181 + </script>
  182 +
  183 +</dom-module>
0 184 \ No newline at end of file
... ...
controllets/data-sevc-controllet/data-sevc-controllet.html
  View file @bf28e75
... ... @@ -336,7 +336,7 @@ Example:
336 336 <iron-pages selected="{{DatasourceTabSelected}}">
337 337 <div>
338 338 <div class="card-content">
339   - <paper-dropdown-menu id="datasets-sources" label="Available datasets">
  339 + <paper-dropdown-menu id="datasets-sources" name="datasets-sources" label="Available datasets">
340 340 <paper-menu class="dropdown-content">
341 341 <template is="dom-repeat" items="{{datasets}}" as="dataset" index-as="index">
342 342 <paper-item id="{{index}}" on-tap="_datasourceSelected">{{dataset.name}}</paper-item>
... ...