SGH / COMPONENTS

Commit c71ea236ac82bc2e24f6073ba7065f4824910b62

Authored by Renato De Donato
2 parents ce415fab bed2f198

Merge branch 'master' of http://service.routetopa.eu:7480/WebCompDev/COMPONENTS

Inline Side-by-side
Showing 2 changed files with 397 additions and 0 deletions
controllets/document-card-controllet/spreadsheet-card-controllet.html 0 → 100644
  View file @c71ea23
  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-dialog/paper-dialog.html"/>
  6 +<link rel="import" href="../../bower_components/neon-animation/neon-animation.html"/>
  7 +
  8 +<script src="../../locales/paper_card_controllet_ln.js"></script>
  9 +
  10 +<dom-module id="spreadsheet-card-controllet">
  11 +
  12 + <template>
  13 + <link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
  14 + <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
  15 + <style>
  16 +
  17 + #paper_card_container {
  18 + font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  19 + font-size: 16px;
  20 + background-color: white;
  21 + }
  22 +
  23 + #content {
  24 + position:relative;
  25 + padding: 2px;
  26 + /*padding: 4px 4px 0px 4px;
  27 + width: 98%;
  28 + height: 90%;*/
  29 + }
  30 +
  31 + .footer {
  32 + height: 16px;
  33 + }
  34 +
  35 + .comment {
  36 + position: relative;
  37 + top: -50px;
  38 + height: 50px;
  39 + background-color: white;
  40 + padding: 8px;
  41 + font-size: small;
  42 + color: #727272;
  43 + word-wrap: break-word;
  44 + overflow: hidden;
  45 + }
  46 +
  47 + paper-fab#fullscreen-button {
  48 + position: absolute;
  49 + /*z-index: 10;*/
  50 + top: 11px;
  51 + right: 15px;
  52 + --paper-fab-background:#FFFFFF;
  53 + padding : 0px;
  54 + margin: 0px;
  55 + height: 24px;
  56 + width: 24px;
  57 + color: #666666;
  58 + }
  59 +
  60 + paper-dialog {
  61 + margin: 0px;
  62 + padding: 0px;
  63 + z-index: 1100;
  64 + }
  65 +
  66 + #fullscreen_container {
  67 + display: inline;
  68 + position: fixed;
  69 + width: 90%;
  70 + height: 80vh;
  71 + right: 0;
  72 + left: 0;
  73 + top: 64px;
  74 + margin-right: auto;
  75 + margin-left: auto;
  76 + padding: 8px;
  77 + background-color: white;
  78 + }
  79 +
  80 + #fullscreen_content {
  81 + margin: 0px;
  82 + }
  83 +
  84 + #resource{
  85 + height: 100%;
  86 + width: 100%;
  87 + }
  88 +
  89 + :host #docs-header{
  90 + display : none;
  91 + }
  92 +
  93 + #info_close_button{
  94 + z-index: 1;
  95 + color: #666666;
  96 + box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
  97 + -webkit-transition: 0.2s ease-out;
  98 + -moz-transition: 0.2s ease-out;
  99 + -o-transition: 0.2s ease-out;
  100 + transition: 0.2s ease-out;
  101 + cursor: pointer;
  102 + background: linear-gradient(#f4f4f4,#e4e4e4);
  103 + float: right;
  104 + top: 11px;
  105 + right: 8px;
  106 + margin: 0px;
  107 + position: absolute;
  108 + height: 29px;
  109 + min-width: 30px;
  110 + padding: 5px;
  111 + }
  112 +
  113 + </style>
  114 +
  115 +
  116 + <paper-material id="paper_card_container" elevation="{{elevation}}">
  117 +
  118 + <div id="content">
  119 + <iframe id="resource" src="{{resourceUrl}}"></iframe>
  120 + <!--<iframe id="resource" src="{{resourceUrl}}"></iframe>-->
  121 + </div>
  122 +
  123 + <template id="dom-if" if="{{showControls}}">
  124 + <paper-fab id="fullscreen-button" class="open" mini icon="fullscreen" on-click="_handleOpenClick"></paper-fab>
  125 +
  126 + <paper-dialog id="fullscreen_container" entry-animation="scale-up-animation" exit-animation="fade-out-animation">
  127 + <!--with-backdrop-->
  128 + <div id="fullscreen_content"></div>
  129 + <paper-button id="info_close_button" dialog-confirm autofocus>x</paper-button>
  130 + </paper-dialog>
  131 + </template>
  132 +
  133 + </paper-material>
  134 +
  135 + </template>
  136 +
  137 + <script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
  138 +
  139 + <script>
  140 +
  141 + Polymer({
  142 + is: "spreadsheet-card-controllet",
  143 + properties: {
  144 +
  145 + width: {
  146 + type: Number,
  147 + observer: "_changeWidth"
  148 + },
  149 +
  150 + height: {
  151 + type: Number,
  152 + observer: "_changeHeight"
  153 + },
  154 +
  155 + elevation:{
  156 + type: Number,
  157 + value: 3
  158 + },
  159 +
  160 + createNewType : {
  161 + type : String,
  162 + value : undefined
  163 + },
  164 +
  165 + comment:{
  166 + cardType: String,
  167 + value: ""
  168 + },
  169 +
  170 + resourceUrl : {
  171 + type : String,
  172 + value : undefined
  173 + },
  174 +
  175 + userName: {
  176 + type: String,
  177 + value: undefined
  178 + },
  179 +
  180 + showControls: {
  181 + type: Boolean,
  182 + value: false
  183 + },
  184 +
  185 + lang:{
  186 + type: String,
  187 + value: navigator.language
  188 + }
  189 + },
  190 +
  191 + ready : function(){
  192 + },
  193 +
  194 + attached: function(){
  195 + $(this.$.fullscreen_container).perfectScrollbar();
  196 + },
  197 +
  198 + _changeWidth: function(){
  199 + //this.style.width = this.width + "px";
  200 + //this.$.paper_card_container.style.width = this.width + "px";
  201 + //this.$.content.style.width = this.width - 8 + "px";
  202 + },
  203 +
  204 + _changeHeight: function(){
  205 + this.style.height = this.height + "vh";
  206 + //this.$.content.width = this.width - 4 + "vh";
  207 + this.$.paper_card_container.style.height = this.height + "vh";
  208 + this.$.content.style.height = this.height - 1 + "vh";
  209 + $(this.$.content).perfectScrollbar();
  210 + },
  211 +
  212 + _handleOpenClick: function(){
  213 + this.$.fullscreen_content.style.height = "80vh";
  214 + this.$.fullscreen_content.innerHTML = this.$.content.innerHTML;
  215 + this.$.fullscreen_container.style.display = "inline";//datalet res
  216 + this.$.fullscreen_container.open();
  217 + }
  218 +
  219 + })
  220 + </script>
  221 +
  222 +</dom-module>
0 \ No newline at end of file 223 \ No newline at end of file
controllets/text-element-controllet/metadata-element-controllet.html 0 → 100644
  View file @c71ea23
  1 +<!--
  2 +@license
  3 + The MIT License (MIT)
  4 +
  5 + Copyright (c) 2015 Dipartimento di Informatica - Università di Salerno - Italy
  6 +
  7 + Permission is hereby granted, free of charge, to any person obtaining a copy
  8 + of this software and associated documentation files (the "Software"), to deal
  9 + in the Software without restriction, including without limitation the rights
  10 + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  11 + copies of the Software, and to permit persons to whom the Software is
  12 + furnished to do so, subject to the following conditions:
  13 +
  14 + The above copyright notice and this permission notice shall be included in
  15 + all copies or substantial portions of the Software.
  16 +
  17 + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  18 + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  19 + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  20 + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  21 + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  22 + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  23 + THE SOFTWARE.
  24 +-->
  25 +
  26 +<!--
  27 +* Developed by :
  28 +* ROUTE-TO-PA Project - grant No 645860. - www.routetopa.eu
  29 +*
  30 +-->
  31 +
  32 +<link rel="import" href="../../bower_components/polymer/polymer.html">
  33 +<link rel="import" href="../../bower_components/paper-styles/color.html">
  34 +
  35 +<!--
  36 +`text-element-controllet` is a text area with heading. It fires an event when the text value is modified. This event can be useful when you have to monitor many af this elements.
  37 +
  38 +
  39 +Example:
  40 +
  41 + <text-element-controllet heading="myField"
  42 + description="myFieldDescription"
  43 + number="1">
  44 + </text-element-controllet>
  45 +
  46 +
  47 +@element text-element-controllet
  48 +@status beta
  49 +@homepage
  50 +@group controllets
  51 +-->
  52 +
  53 +
  54 +<dom-module id="metadata-element-controllet">
  55 + <template>
  56 +
  57 + <style is="custom-style">
  58 +
  59 + .avatar {
  60 + display: inline-block;
  61 + position: relative;
  62 + float: left;
  63 + height: 1.7em;
  64 + width: 1.7em;
  65 + border-radius: 50%;
  66 + background: var(--paper-blue-500);
  67 + color: white;
  68 + line-height: 2em;
  69 + font-size: 0.74em;
  70 + text-align: center;
  71 + }
  72 +
  73 + .heading{
  74 + /*width: 12.5em;*/
  75 + }
  76 +
  77 + .big {
  78 + display: inline-block;
  79 + position: relative;
  80 + float: left;
  81 + font-size: 1em;
  82 + padding: 0.5em 0.25em 0.5em;
  83 + color: var(--google-grey-500);
  84 + }
  85 +
  86 + .medium {
  87 + position: relative;
  88 + float: left;
  89 + font-size: 0.8125em;
  90 + padding-bottom: 0px;
  91 + display: inline-block;
  92 + padding-left: 10px;
  93 + width: 100%;
  94 + }
  95 +
  96 + #text{
  97 + margin: 20px;
  98 + }
  99 +
  100 + </style>
  101 +
  102 + <div class="layout vertical">
  103 + <div class="heading layout horizontal">
  104 + <div class="avatar">{{number}}</div>
  105 + <div class="medium">{{description}}</div>
  106 + </div>
  107 + <paper-textarea id="text" label="{{heading}}" value="{{value}}" always-float-label></paper-textarea>
  108 + </div>
  109 +
  110 + </template>
  111 +
  112 + <script>
  113 +
  114 + Polymer({
  115 +
  116 + is: 'metadata-element-controllet',
  117 +
  118 + properties: {
  119 + /**
  120 + * It's the name of the elelent
  121 + *
  122 + * @attribute heading
  123 + * @type Strig
  124 + * @default 'Heading'
  125 + */
  126 + heading : {
  127 + type : String,
  128 + value : "Heading"
  129 + },
  130 + /**
  131 + * It's the description of the elelent
  132 + *
  133 + * @attribute description
  134 + * @type Strig
  135 + * @default 'Description'
  136 + */
  137 + description: {
  138 + type: String,
  139 + value: "Description"
  140 + },
  141 + /**
  142 + * It's a string value the represent the current number of elelent. It will be use in the label section.
  143 + *
  144 + * @attribute number
  145 + * @type Strig
  146 + * @default '0'
  147 + */
  148 + number: {
  149 + type: String,
  150 + value : "0"
  151 + },
  152 +
  153 + value :{
  154 + type: String,
  155 + value: ""
  156 + },
  157 +
  158 + timer :{
  159 + type: Number,
  160 + value : 0
  161 + }
  162 + },
  163 + /**
  164 + * It returns the value in text area
  165 + *
  166 + * @method getValue
  167 + */
  168 + getValue : function(){
  169 + return this.$.text.value;
  170 + }
  171 + });
  172 +
  173 + </script>
  174 +
  175 +</dom-module>
0 \ No newline at end of file 176 \ No newline at end of file