WebCompDev / COMPONENTS

Commit 0a87e7be2a173e6154a38c53dce173d7a568c9d1

Authored by Luigi Serra
1 parent 772d3de9

updates

Inline Side-by-side
Showing 2 changed files with 39 additions and 12 deletions
controllets/animated-button-container-controllet/animated-button-container-controllet.html
  View file @0a87e7b
... ... @@ -27,9 +27,6 @@
27 27 }
28 28  
29 29 .window {
30   - width: 30vw;
31   - height: 50vh;
32   - background: #e8e8e8;
33 30 position: absolute;
34 31 top: 64px;
35 32 left: 0px;
... ... @@ -79,6 +76,8 @@
79 76 z-index: 1000;
80 77 position: relative;
81 78 overflow: auto;
  79 + height: 100%;
  80 + background-color: #e8e8e8;
82 81 }
83 82 #toolbar{
84 83 background: #2196F3;
... ... @@ -138,7 +137,7 @@
138 137 <neon-animatable>
139 138 <paper-material elevation="3" id="window" class="window">
140 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 141 <paper-fab id="close" mini icon="close" on-click="_onCloseClick"></paper-fab>
143 142 </paper-toolbar>
144 143 <div id="container_content"><content></content></div>
... ... @@ -218,7 +217,8 @@
218 217 this.$.window.style.width = (this.width - 0.5) + "vw";
219 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 222 $(this.$.container_content).perfectScrollbar();
223 223  
224 224 this.$.open.style.height = this.iconHeight + "px";
... ...
controllets/search-panel-controllet/search-panel-controllet.html
  View file @0a87e7b
... ... @@ -65,24 +65,33 @@ Example:
65 65 --paper-input-container-input-color: #ffffff;
66 66 --paper-input-container-focus-color: #ffffff;
67 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 74 neon-animated-pages{
76   - width: 30vw;
  75 + /*width: 20vw;*/
77 76 }
78 77  
79 78 </style>
80 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 84 <neon-animated-pages selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">
82 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 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 95 </div>
87 96  
88 97 </template>
... ... @@ -121,8 +130,26 @@ Example:
121 130 value: undefined,
122 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 153 _toggleClick: function(e){
127 154 if(this.selected == 0) {
128 155 this.entryAnimation = 'fade-in-animation';//'slide-from-right-animation';
... ...