Commit 0a87e7be2a173e6154a38c53dce173d7a568c9d1
1 parent
772d3de9
updates
Showing
2 changed files
with
39 additions
and
12 deletions
controllets/animated-button-container-controllet/animated-button-container-controllet.html
| @@ -27,9 +27,6 @@ | @@ -27,9 +27,6 @@ | ||
| 27 | } | 27 | } |
| 28 | 28 | ||
| 29 | .window { | 29 | .window { |
| 30 | - width: 30vw; | ||
| 31 | - height: 50vh; | ||
| 32 | - background: #e8e8e8; | ||
| 33 | position: absolute; | 30 | position: absolute; |
| 34 | top: 64px; | 31 | top: 64px; |
| 35 | left: 0px; | 32 | left: 0px; |
| @@ -79,6 +76,8 @@ | @@ -79,6 +76,8 @@ | ||
| 79 | z-index: 1000; | 76 | z-index: 1000; |
| 80 | position: relative; | 77 | position: relative; |
| 81 | overflow: auto; | 78 | overflow: auto; |
| 79 | + height: 100%; | ||
| 80 | + background-color: #e8e8e8; | ||
| 82 | } | 81 | } |
| 83 | #toolbar{ | 82 | #toolbar{ |
| 84 | background: #2196F3; | 83 | background: #2196F3; |
| @@ -138,7 +137,7 @@ | @@ -138,7 +137,7 @@ | ||
| 138 | <neon-animatable> | 137 | <neon-animatable> |
| 139 | <paper-material elevation="3" id="window" class="window"> | 138 | <paper-material elevation="3" id="window" class="window"> |
| 140 | <paper-toolbar id="toolbar"> | 139 | <paper-toolbar id="toolbar"> |
| 141 | - <search-panel-controllet id="search_from_animated_button_container"></search-panel-controllet> | 140 | + <search-panel-controllet id="search_from_animated_button_container" left-direction="true"></search-panel-controllet> |
| 142 | <paper-fab id="close" mini icon="close" on-click="_onCloseClick"></paper-fab> | 141 | <paper-fab id="close" mini icon="close" on-click="_onCloseClick"></paper-fab> |
| 143 | </paper-toolbar> | 142 | </paper-toolbar> |
| 144 | <div id="container_content"><content></content></div> | 143 | <div id="container_content"><content></content></div> |
| @@ -218,7 +217,8 @@ | @@ -218,7 +217,8 @@ | ||
| 218 | this.$.window.style.width = (this.width - 0.5) + "vw"; | 217 | this.$.window.style.width = (this.width - 0.5) + "vw"; |
| 219 | this.$.close.style.left = (this.width - 3.5) + "vw"; | 218 | this.$.close.style.left = (this.width - 3.5) + "vw"; |
| 220 | 219 | ||
| 221 | - this.$.container_content.style.height = (this.height - (22 * 0.65)) + "vh"; | 220 | + //this.$.container_content.style.height = (this.height - (22 * 0.65)) + "vh"; |
| 221 | + //this.$.container_content.style.height = this.height + "vh"; | ||
| 222 | $(this.$.container_content).perfectScrollbar(); | 222 | $(this.$.container_content).perfectScrollbar(); |
| 223 | 223 | ||
| 224 | this.$.open.style.height = this.iconHeight + "px"; | 224 | this.$.open.style.height = this.iconHeight + "px"; |
controllets/search-panel-controllet/search-panel-controllet.html
| @@ -65,24 +65,33 @@ Example: | @@ -65,24 +65,33 @@ Example: | ||
| 65 | --paper-input-container-input-color: #ffffff; | 65 | --paper-input-container-input-color: #ffffff; |
| 66 | --paper-input-container-focus-color: #ffffff; | 66 | --paper-input-container-focus-color: #ffffff; |
| 67 | --paper-input-container-color: #ffffff; | 67 | --paper-input-container-color: #ffffff; |
| 68 | - position : absolute; | ||
| 69 | - left: 5px; | ||
| 70 | - top: -20px; | ||
| 71 | - width: 100%; | 68 | + position: absolute; |
| 69 | + top: -12px; | ||
| 70 | + width: 20vw; | ||
| 72 | 71 | ||
| 73 | } | 72 | } |
| 74 | 73 | ||
| 75 | neon-animated-pages{ | 74 | neon-animated-pages{ |
| 76 | - width: 30vw; | 75 | + /*width: 20vw;*/ |
| 77 | } | 76 | } |
| 78 | 77 | ||
| 79 | </style> | 78 | </style> |
| 80 | <div class="horizontal layout"> | 79 | <div class="horizontal layout"> |
| 80 | + <template is="dom-if" if="{{leftDirection}}"> | ||
| 81 | + <paper-icon-button id="search_button" icon="search" class="dropdown-trigger" on-click="_toggleClick"></paper-icon-button> | ||
| 82 | + </template> | ||
| 83 | + | ||
| 81 | <neon-animated-pages selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]"> | 84 | <neon-animated-pages selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]"> |
| 82 | <neon-animatable></neon-animatable> | 85 | <neon-animatable></neon-animatable> |
| 83 | - <neon-animatable><paper-input id="search_text" class="search-text" autofocus label="search" autosave="search_text" results="5" transition="fade-in-animation" value="{{searchKey}}"></paper-input></neon-animatable> | 86 | + <neon-animatable> |
| 87 | + <paper-input id="search_text" class="search-text" autofocus label="search" autosave="search_text" results="5" transition="fade-in-animation" value="{{searchKey}}"> | ||
| 88 | + </paper-input> | ||
| 89 | + </neon-animatable> | ||
| 84 | </neon-animated-pages> | 90 | </neon-animated-pages> |
| 85 | - <paper-icon-button id="search_button" icon="search" class="dropdown-trigger" on-click="_toggleClick"></paper-icon-button> | 91 | + |
| 92 | + <template is="dom-if" if="{{rightDirection}}"> | ||
| 93 | + <paper-icon-button id="search_button" icon="search" class="dropdown-trigger" on-click="_toggleClick"></paper-icon-button> | ||
| 94 | + </template> | ||
| 86 | </div> | 95 | </div> |
| 87 | 96 | ||
| 88 | </template> | 97 | </template> |
| @@ -121,8 +130,26 @@ Example: | @@ -121,8 +130,26 @@ Example: | ||
| 121 | value: undefined, | 130 | value: undefined, |
| 122 | observer: "_valueChanged" | 131 | observer: "_valueChanged" |
| 123 | 132 | ||
| 133 | + }, | ||
| 134 | + leftDirection: { | ||
| 135 | + type: String, | ||
| 136 | + value: undefined | ||
| 137 | + }, | ||
| 138 | + rightDirection: { | ||
| 139 | + type: String, | ||
| 140 | + value: undefined | ||
| 124 | } | 141 | } |
| 125 | }, | 142 | }, |
| 143 | + | ||
| 144 | + ready: function(){ | ||
| 145 | + | ||
| 146 | + if(this.leftDirection != undefined){ | ||
| 147 | + this.$.search_text.style.left = '5px'; | ||
| 148 | + }else if(this.rightDirection != undefined){ | ||
| 149 | + this.$.search_text.style.right = '5px'; | ||
| 150 | + } | ||
| 151 | + | ||
| 152 | + }, | ||
| 126 | _toggleClick: function(e){ | 153 | _toggleClick: function(e){ |
| 127 | if(this.selected == 0) { | 154 | if(this.selected == 0) { |
| 128 | this.entryAnimation = 'fade-in-animation';//'slide-from-right-animation'; | 155 | this.entryAnimation = 'fade-in-animation';//'slide-from-right-animation'; |