From 49cc918f02e3e87b584e429b91beef4dab164634 Mon Sep 17 00:00:00 2001
From: luigser <luigser@gmail.com>
Date: Tue, 27 Oct 2015 16:50:37 +0100
Subject: [PATCH] selection controllet and card update
---
controllets/create-card-controllet/create-card-controllet.html | 152 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------------
1 file changed, 116 insertions(+), 36 deletions(-)
diff --git a/controllets/create-card-controllet/create-card-controllet.html b/controllets/create-card-controllet/create-card-controllet.html
index cfedd15..ef40a12 100644
--- a/controllets/create-card-controllet/create-card-controllet.html
+++ b/controllets/create-card-controllet/create-card-controllet.html
@@ -4,6 +4,8 @@
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html"/>
<link rel="import" href="../../bower_components/paper-input/paper-textarea.html"/>
+<link rel="import" href="../../controllets/paper-card-controllet/paper-card-controllet.html"/>
+
<dom-module id="create-card-controllet">
<template>
@@ -19,19 +21,19 @@
--paper-fab-background: var(--accent-color);
font-family: 'Roboto', sans-serif;
padding-bottom: 30px;
+ width: 100%;
}
paper-material {
background-color: white;
border-width: 1em;
- padding: 20px;
+ padding: 5px;
+ margin-bottom: 20px;
}
paper-fab {
- position: absolute;
-/* right: 10px;
- bottom: 18px;*/
- z-index: 10;
+ position: relative;
+ left: 90%;
--paper-fab-background:#2196F3;
}
@@ -56,8 +58,8 @@
.avatar
{
display: inline-block;
- height: 2em;
- width: 2em;
+ height: 0.7em;
+ width: 0.7em;
border-radius: 50%;
background: var(--paper-blue-500);
color: white;
@@ -96,59 +98,124 @@
font-weight: bold;
}
- paper-textarea{
- width: 20vw;
+ paper-textarea.custom_textarea{
+ /*max-width:40vw;*/
}
+ div.vertical{
+ margin: 20px;
+ }
- </style>
+ </style>
<div class="horizontal layout">
- <div class="legend vertical layout">
+ <div class="vertical layout" style="width: 60%;">
+ <div class="horizontal layout">
+ <div class="avatar"></div>
<div class="title">
- <div id="toolbar_title" class="big">Title</div>
+ <div class="big">Title</div>
+ <div class="small">This is the tile for your new card. It'll be visualized in the bottom black section.</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>
+ <paper-material animated elevation="2">
+ <paper-textarea class="custom_textarea" id="title"
+ label=""
+ char-counter
+ maxlength="30"
+ rows="1"
+ value="{{title}}">
+
+ </paper-textarea>
+ </paper-material>
+
+ <template is="dom-if" if="{{checkType(type, 'link')}}">
+
+ <div class="horizontal layout">
+ <div class="avatar"></div>
<div class="title">
- <div id="toolbar_title" class="big">Text content</div>
+ <div class="big">Link</div>
+ <div class="small">This is the link you want to share.</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})+)(/(.)*)?(\\?(.)*)?">
+ </div>
- </paper-textarea>
- </paper-material>
+ <paper-material animated elevation="2">
+ <paper-textarea class="custom_textarea" id="link"
+ label=""
+ auto-validate
+ pattern="^(http[s]?:\\/\\/(www\\.)?|ftp:\\/\\/(www\\.)?|www\\.){1}([0-9A-Za-z-\\.@:%_\+~#=]+)+((\\.[a-zA-Z]{2,3})+)(/(.)*)?(\\?(.)*)?"
+ error-message="Urls only!"
+ value="{{link}}">
+
+ </paper-textarea>
+ </paper-material>
- </template>
+ </template>
- <template is="dom-if" if="{{checkType(type, 'link')}}">
+ <template is="dom-if" if="{{checkType(type, 'text')}}">
+ <div class="horizontal layout">
+ <div class="avatar"></div>
<div class="title">
- <div id="toolbar_title" class="big">Link</div>
+ <div class="big">Text content</div>
+ <div class="small">It's the text content of your card. It'll be visualize in the body(yellow top section).</div>
</div>
- <br>
- <paper-material animated elevation="2">
- <paper-textarea class="custom_textarea" id="link" label="" maxlength="4096"></paper-textarea>
- </paper-material>
+ </div>
- </template>
+ <paper-material animated elevation="2">
+ <paper-textarea class="custom_textarea" id="text"
+ label=""
+ char-counter
+ max-rows="6"
+ rows="6"
+ maxlength="1024"
+ value="{{text}}">
+
+ </paper-textarea>
+ </paper-material>
+
+ </template>
+ <div class="horizontal layout">
+ <div class="avatar"></div>
+ <div class="title">
+ <div class="big">Comment</div>
+ <div class="small">Copy and paste/drag and drop in the textarea the url of datasource</div>
+ </div>
</div>
- <!--<paper-fab mini icon="add-circle" on-click="_handleFabClick"></paper-fab>-->
+ <paper-material animated elevation="2">
+ <paper-textarea class="custom_textarea" id="comment"
+ label=""
+ char-counter
+ maxlength="100"
+ value="{{comment}}">
+
+ </paper-textarea>
+ </paper-material>
+
+ </div>
+
+ <div class="vertical layout" style="width: 40%;">
+
+ <paper-fab mini icon="add-circle" on-click="_handleFabClick"></paper-fab>
+
+ <div id="card_preview">
+ <paper-card-controllet
+ class="grid-item"
+ width="300"
+ height="300"
+ type="{{type}}"
+ text="{{comment}}"
+ legend="{{title}}">
+ </paper-card-controllet>
+ </div>
+ </div>
+
</div>
@@ -163,6 +230,19 @@
type:{
type: String,
value: "text"
+ },
+
+ title:{
+ type: String,
+ value: "Title"
+ },
+ content:{
+ type: String,
+ value: undefined
+ },
+ comment:{
+ type: String,
+ value: "comment"
}
},
--
libgit2 0.21.4