card and controllet updates

Luigi Serra
1 parent 6a138ebb
Showing 4 changed files with 109 additions and 28 deletions
controllets/create-card-controllet/create-card-controllet.html
controllets/data-sevc-controllet/data-sevc-controllet.html
controllets/generic-cards-container-controllet/generic-cards-container-controllet.html
controllets/paper-card-controllet/paper-card-controllet.html
@@ -115,6 +115,10 @@
                 display: none;
             }
  
+            ::content #card_preview .fullscreen{
+                display: none;
+            }
+
  
         </style>
  
@@ -226,29 +226,6 @@ Example:
                     overflow: auto;
                 }
  
-                paper-tabs, paper-toolbar
-                {
-                    background-color:  var(--paper-blue-500);
-                    color: #ffffff;
-                    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
-                }
-
-                paper-toolbar paper-tabs
-                {
-                    box-shadow: none;
-                    --paper-tabs-selection-bar-color : var(--google-gray-500);
-                }
-
-                paper-tabs[noink][no-bar] paper-tab.iron-selected
-                {
-                    background-color: var(--google-gray-500);
-                }
-
-                paper-tabs[align-bottom]
-                {
-                    box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.15);
-                }
-
                 #idm_fields_main_container{
                     position: relative;
                     height: 60vh;
@@ -282,6 +259,28 @@ Example:
                     padding : 30px;
                 }
  
+                 paper-tabs, paper-toolbar
+                 {
+                     background-color:  var(--paper-blue-500);
+                     color: #ffffff;
+                     box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
+                     --paper-tabs-selection-bar-color: var(--google-gray-500);
+                 }
+
+                 paper-toolbar paper-tabs
+                 {
+                     box-shadow: none;
+                 }
+
+                 paper-tabs[noink][no-bar] paper-tab.iron-selected
+                 {
+                     background-color: var(--google-gray-500);
+                 }
+
+                 paper-tabs[align-bottom]
+                 {
+                     box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.15);
+                 }
             </style>
  
             <iron-ajax
@@ -93,6 +93,14 @@ Example:
                 float: left;
             }
  
+            ::content .card-grid .fullscreen{
+                display: none;
+            }
+
+            ::content .card-grid .delete{
+                display: none;
+            }
+
         </style>
  
         <div id="container" class="layout vertical">
@@ -18,9 +18,6 @@
                 --paper-fab-background: var(--accent-color);
                 font-family: 'Roboto', sans-serif;
                 padding-bottom: 30px;
-
-                /*Test*/
-
             }
  
             paper-material {
@@ -62,9 +59,11 @@
                 position:relative;
                 overflow: auto;
             }
+
             ::content.buttons {
                 margin-top: 8px;
             }
+
             ::content paper-button, ::content paper-icon-button {
                 font-weight: 500;
                 color: var(--accent-color);
@@ -91,6 +90,49 @@
                 height: 24px;
                 --paper-fab-background:#cccccc;
             }
+
+            .fullscreen{
+                position: absolute;
+                top: 36px;
+                right: 54px;
+                --iron-icon-height: 18px;
+                --iron-icon-width: 18px;
+                width: 24px;
+                height: 24px;
+                --paper-fab-background:#cccccc;
+            }
+
+            #fullscreen_container{
+                position: fixed;
+                width: 80%;
+                height: 75%;
+                right: 0;
+                left: 0;
+                top: 5%;
+                margin-right: auto;
+                margin-left: auto;
+                z-index: 1000;
+                display: none;
+                padding: 20px;
+            }
+
+            .close_fullscreen{
+                position: absolute;
+                top: 5px;
+                right: 1vw;
+                --iron-icon-height: 18px;
+                --iron-icon-width: 18px;
+                width: 24px;
+                height: 24px;
+                --paper-fab-background:#cccccc;
+            }
+
+            #fullscreen_content{
+                position: relative;
+                height: 100%;
+                width: 100%;
+            }
+
         </style>
  
  
@@ -107,6 +149,9 @@
  
                     <div class="legend horizontal layout center">
                         <span>{{cardTitle}}</span>
+
+                        <paper-fab class="fullscreen" mini icon="fullscreen" on-click="_handleFullscreenClick"></paper-fab>
+
                         <!-- Adding icon based on card type -->
  
                         <template is="dom-if" if="{{checkType(cardType, 'text')}}">
@@ -143,6 +188,11 @@
                     </template>
                 </div>
  
+                <paper-material elevation="4" id="fullscreen_container">
+                    <paper-fab class="close_fullscreen" mini icon="close" on-click="_handleCloseFullscreenClick"></paper-fab>
+                    <div id="fullscreen_content"></div>
+                </paper-material>
+
             </div>
         </paper-material>
  
@@ -209,8 +259,28 @@
             },
  
             _handleDeleteClick: function(e){
-            this.fire('paper-card-controllet_delete-clicked', {data : this});
-        }
+                this.fire('paper-card-controllet_delete-clicked', {data : this});
+            },
+
+            _handleFullscreenClick: function(e){
+
+                switch(this.cardType){
+                    case 'text':
+                        this.$.fullscreen_content.style.backgroundColor = "#ffc";
+                        break;
+                    case 'link':
+                        window.open(this.getAttribute('card-link'),'_blank');
+                        return;
+                }
+
+                this.$.fullscreen_container.style.display = "inline-block";
+                this.$.fullscreen_content.innerHTML = this.$.content.innerHTML;
+            },
+
+            _handleCloseFullscreenClick: function(e){
+
+                this.$.fullscreen_container.style.display = "none";
+            }
         })
     </script>