Improvements

- Fixed issue with tags type - Improvements into Demo Page - Added pt-tags-input dependency to bower.json
plusTTeam · Dec 6, 2017 · def517d · def517d
1 parent a2e0625
commit def517d
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 14 deletions.
diff --git a/bower.json b/bower.json
@@ -7,7 +7,8 @@
     "paper-tabs": "PolymerElements/paper-tabs#^2.0.0",
     "paper-input": "PolymerElements/paper-input#^2.0.4",
     "wysiwyg-e": "miztroh/wysiwyg-e#^2.1.0",
-    "iron-pages": "PolymerElements/iron-pages#^2.0.1"
+    "iron-pages": "PolymerElements/iron-pages#^2.0.1",
+    "pt-tags-input": "plusTTeam/pt-tags-input#^1.0.0"
   },
   "devDependencies": {
     "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^2.0.0",

diff --git a/demo/index.html b/demo/index.html
@@ -19,13 +19,38 @@
   </head>
   <body>
     <div class="vertical-section-container centered">
-      <h3>Basic pt-multilang-input demo</h3>
+      <h3>Textarea pt-multilang-input demo</h3>
       <demo-snippet>
         <template>
           <pt-multilang-input type="textarea" label="Multiple Languages Input" languages='[{"name": "es", "label": "🇻🇪", "description": "Spanish"}, {"name": "en","label": "🇺🇸","description": "English"}]'>
           </pt-multilang-input>
         </template>
       </demo-snippet>
+
+      <h3>Input pt-multilang-input demo</h3>
+      <demo-snippet>
+        <template>
+          <pt-multilang-input type="input" label="Multiple Languages Input" languages='[{"name": "es", "label": "🇻🇪", "description": "Spanish"}, {"name": "en","label": "🇺🇸","description": "English"}]'>
+          </pt-multilang-input>
+        </template>
+      </demo-snippet>
+
+      <h3>Tags pt-multilang-input demo</h3>
+      <demo-snippet>
+        <template>
+          <pt-multilang-input type="tags" label="Multiple Languages Input" languages='[{"name": "es", "label": "🇻🇪", "description": "Spanish"}, {"name": "en","label": "🇺🇸","description": "English"}]'>
+          </pt-multilang-input>
+        </template>
+      </demo-snippet>
+
+
+      <h3>WYSIWYG pt-multilang-input demo</h3>
+      <demo-snippet>
+        <template>
+          <pt-multilang-input type="wysiwyg" label="Multiple Languages Input" languages='[{"name": "es", "label": "🇻🇪", "description": "Spanish"}, {"name": "en","label": "🇺🇸","description": "English"}]'>
+          </pt-multilang-input>
+        </template>
+      </demo-snippet>
     </div>
   </body>
 </html>
diff --git a/pt-multilang-input.html b/pt-multilang-input.html
@@ -5,6 +5,7 @@
 <link rel="import" href="../paper-input/paper-input.html">
 <link rel="import" href="../paper-input/paper-textarea.html">
 <link rel="import" href="../wysiwyg-e/wysiwyg-e.html">
+<link rel="import" href="../pt-tags-input/pt-tags-input.html">
 <link rel="import" href="../wysiwyg-e/tools/bold.html" async>
 <link rel="import" href="../wysiwyg-e/tools/italic.html" async>
 <link rel="import" href="../wysiwyg-e/tools/underline.html" async>
@@ -36,28 +37,33 @@
 			}
 
 			paper-tabs{
-				--paper-tabs-selection-bar-color: white;
-				background:  var(--paper-indigo-500);
-				color: white;
+				--paper-tabs-selection-bar-color: var(--tabs-color, white);
+				background: var(--tabs-background, var(--paper-indigo-500));
+				color: var(--tabs-color, white);
+        --paper-tabs:{
+          height: 40px;
+        }
 			}
 
 			wysiwyg-e{
 				width: 100%;
 				min-width: 40vw;
 				min-height: 30vh;
-				--wysiwyg-toolbar-background: var(--paper-indigo-500);
+				--wysiwyg-toolbar-background: var(--tabs-background, var(--paper-indigo-500));
 			}
 		</style>
 
-		<paper-tabs selected="{{selected}}" fit-container >
+		<paper-tabs selected="{{selected}}" fit-container>
 			<template is="dom-repeat" items="[[languages]]" as="lang">
 				<paper-tab>
 					[[lang.label]] &nbsp; [[lang.description]]
 				</paper-tab>
 			</template>
-		</paper-tabs>
+    </paper-tabs>
+
 		<iron-pages id="ironPages" selected="[[selected]]">
-		</iron-pages>
+    </iron-pages>
+
   </template>
 
   <script>
@@ -129,7 +135,7 @@
           element.dataLang = lang.name;
           element.label = `${this.label} (${lang.description})`;
           element.required = this.required;
-  
+
           if(this.type.toLowerCase() === "textarea"){
             element.value = '\b';
             element.rows = 3;
@@ -163,10 +169,6 @@
           input.disabled = value;
         });
       }
-
-      _hideTabs(){
-        return languages && languages.length > 1 ? false : true;
-      }
     }
 
     window.customElements.define(PtMultilangInput.is, PtMultilangInput);