selection controllet and card update

Luigi Serra
1 parent 9d4a34db
Showing 2 changed files with 184 additions and 1 deletions
controllets/create-card-controllet/create-card-controllet.html
controllets/data-sevc-controllet/data-sevc-controllet.html
+<link rel="import" href="../../bower_components/polymer/polymer.html"/>
+<link rel="import" href="../../bower_components/paper-material/paper-material.html"/>
+<link rel="import" href="../../bower_components/paper-fab/paper-fab.html"/>
+<link rel="import" href="../../bower_components/iron-icons/iron-icons.html"/>
+<link rel="import" href="../../bower_components/paper-input/paper-textarea.html"/>
+
+<dom-module id="create-card-controllet">
+
+    <template>
+        <link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
+        <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
+        <style>
+            :host {
+                display: inline-block;
+                margin: 0 8px 8px ;
+                font-size: 14px;
+                text-align: justify;
+                line-height: 10px;
+                --paper-fab-background: var(--accent-color);
+                font-family: 'Roboto', sans-serif;
+                padding-bottom: 30px;
+            }
+
+            paper-material {
+                background-color: white;
+                border-width: 1em;
+                padding: 20px;
+            }
+
+            paper-fab {
+                position: absolute;
+/*                right: 10px;
+                bottom: 18px;*/
+                z-index: 10;
+                --paper-fab-background:#2196F3;
+            }
+
+            #content ::content {
+                /*padding: 0 16px 8px;*/
+                padding: 0 16px 8px;
+                font-weight: 300;
+                color: var(--secondary-text-color);
+                line-height: 24px;
+                max-height: 400px;
+                position:relative;
+                overflow: auto;
+            }
+            ::content.buttons {
+                margin-top: 8px;
+            }
+            ::content paper-button, ::content paper-icon-button {
+                font-weight: 500;
+                color: var(--accent-color);
+            }
+
+            .avatar
+            {
+                display: inline-block;
+                height: 2em;
+                width: 2em;
+                border-radius: 50%;
+                background: var(--paper-blue-500);
+                color: white;
+                line-height: 2em;
+                font-size: 1.87em;
+                text-align: center;
+            }
+
+            .title
+            {
+                position: relative;
+                left: 0px;
+                /*top: 0.60vh;
+                margin-left: 20px;*/
+            }
+
+            .big
+            {
+                font-size: 1.37em;
+                color: var(--google-grey-500);
+            }
+
+            .medium
+            {
+                font-size: 1em;
+                padding-bottom: 0.5em;
+                color : #000000;
+                font-weight: bold;
+            }
+
+            .small
+            {
+                font-size: 0.8em;
+                padding-top: 10px;
+                color: var(--paper-blue-500);
+                font-weight: bold;
+            }
+
+            paper-textarea{
+                width: 20vw;
+            }
+
+
+        </style>
+
+
+        <div class="horizontal layout">
+
+                <div class="legend vertical layout">
+
+                    <div class="title">
+                        <div id="toolbar_title" class="big">Title</div>
+                    </div>
+                    <br>
+                    <paper-material animated elevation="2">
+                       <paper-textarea class="custom_textarea" id="title" label="" maxlength="30"  rows="1"></paper-textarea>
+                    </paper-material>
+                    <br>
+                    <template is="dom-if" if="{{checkType(type, 'text')}}">
+
+                        <div class="title">
+                            <div id="toolbar_title" class="big">Text content</div>
+                        </div>
+                        <br>
+                        <paper-material animated elevation="2">
+                            <paper-textarea class="custom_textarea" id="text_content"
+                                                                    label=""
+                                                                    autoValidate="true"
+                                                                    allowedPattern="^(http[s]?:\\/\\/(www\\.)?|ftp:\\/\\/(www\\.)?|www\\.){1}([0-9A-Za-z-\\.@:%_\+~#=]+)+((\\.[a-zA-Z]{2,3})+)(/(.)*)?(\\?(.)*)?">
+
+                            </paper-textarea>
+                        </paper-material>
+
+                    </template>
+
+
+                    <template is="dom-if" if="{{checkType(type, 'link')}}">
+
+                        <div class="title">
+                            <div id="toolbar_title" class="big">Link</div>
+                        </div>
+                        <br>
+                        <paper-material animated elevation="2">
+                            <paper-textarea class="custom_textarea" id="link" label="" maxlength="4096"></paper-textarea>
+                        </paper-material>
+
+                    </template>
+
+                </div>
+
+               <!--<paper-fab mini icon="add-circle" on-click="_handleFabClick"></paper-fab>-->
+
+        </div>
+
+    </template>
+
+    <script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
+
+    <script>
+        Polymer({
+            is: "create-card-controllet",
+            properties: {
+                type:{
+                    type: String,
+                    value: "text"
+                }
+            },
+
+            ready: function(){
+            },
+
+
+            checkType: function(type, check){
+                return (type == check);
+            },
+
+            _handleFabClick: function(e){
+                this.fire('create-card-controllet_button-clicked', {data : this});
+            }
+        })
+    </script>
+
+</dom-module>
 \ No newline at end of file
@@ -336,7 +336,7 @@ Example:
                                 <iron-pages selected="{{DatasourceTabSelected}}">
                                     <div>
                                         <div class="card-content">
-                                            <paper-dropdown-menu id="datasets-sources" label="Available datasets">
+                                            <paper-dropdown-menu id="datasets-sources" name="datasets-sources" label="Available datasets">
                                                 <paper-menu class="dropdown-content">
                                                     <template is="dom-repeat" items="{{datasets}}" as="dataset" index-as="index">
                                                         <paper-item id="{{index}}" on-tap="_datasourceSelected">{{dataset.name}}</paper-item>