From c76a9f859a9dac130604ef707908cce683f973ea Mon Sep 17 00:00:00 2001 From: luigser <luigser@gmail.com> Date: Thu, 5 Nov 2015 12:12:46 +0100 Subject: [PATCH] card and controllet updates --- controllets/create-card-controllet/create-card-controllet.html | 4 ++++ controllets/data-sevc-controllet/data-sevc-controllet.html | 45 ++++++++++++++++++++++----------------------- controllets/generic-cards-container-controllet/generic-cards-container-controllet.html | 8 ++++++++ controllets/paper-card-controllet/paper-card-controllet.html | 80 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++----- 4 files changed, 109 insertions(+), 28 deletions(-) diff --git a/controllets/create-card-controllet/create-card-controllet.html b/controllets/create-card-controllet/create-card-controllet.html index 853a10e..c2666d5 100755 --- a/controllets/create-card-controllet/create-card-controllet.html +++ b/controllets/create-card-controllet/create-card-controllet.html @@ -115,6 +115,10 @@ display: none; } + ::content #card_preview .fullscreen{ + display: none; + } + </style> diff --git a/controllets/data-sevc-controllet/data-sevc-controllet.html b/controllets/data-sevc-controllet/data-sevc-controllet.html index 2cd90d1..172be38 100755 --- a/controllets/data-sevc-controllet/data-sevc-controllet.html +++ b/controllets/data-sevc-controllet/data-sevc-controllet.html @@ -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 diff --git a/controllets/generic-cards-container-controllet/generic-cards-container-controllet.html b/controllets/generic-cards-container-controllet/generic-cards-container-controllet.html index 0ecc77e..737eb25 100755 --- a/controllets/generic-cards-container-controllet/generic-cards-container-controllet.html +++ b/controllets/generic-cards-container-controllet/generic-cards-container-controllet.html @@ -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"> diff --git a/controllets/paper-card-controllet/paper-card-controllet.html b/controllets/paper-card-controllet/paper-card-controllet.html index fc2f6cb..604d68a 100755 --- a/controllets/paper-card-controllet/paper-card-controllet.html +++ b/controllets/paper-card-controllet/paper-card-controllet.html @@ -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> -- libgit2 0.21.4