add a button to fold/unfold frame (closes #289629)

authorSamuel Trégouët <samuel.tregouet@logilab.fr>
changesetd1ad54af02fc
branchdefault
phasepublic
hiddenno
parent revision#a2ea06e8687d [xmosaicframe] add a button to remove a frame (closes #289628)
child revision#fff4ac409592 [hg] ignore node_modules in mosaicserver
files modified by this revision
components/xmosaicframe/xmosaicframe.es6
components/xmosaicframe/xmosaicframe.html
# HG changeset patch
# User Samuel Trégouët <samuel.tregouet@logilab.fr>
# Date 1427976580 -7200
# Thu Apr 02 14:09:40 2015 +0200
# Node ID d1ad54af02fc092ea2dab430e5755d84b033b694
# Parent a2ea06e8687d7d829a99999afde5d8e9f171a633
add a button to fold/unfold frame (closes #289629)

diff --git a/components/xmosaicframe/xmosaicframe.es6 b/components/xmosaicframe/xmosaicframe.es6
@@ -25,10 +25,15 @@
1              e.preventDefault();
2          });
3          qs('#remove-frame').addEventListener('click', function(e) {
4              host.remove();
5          });
6 +        qs('#toggle-frame').addEventListener('click', function(e) {
7 +            var frameBody = qs('#panel .panel-body');
8 +            frameBody.classList.toggle('fold');
9 +            e.currentTarget.classList.toggle('active');
10 +        });
11      }
12 
13 
14      function queryUpdated(host, ownerDocument, registry) {
15          let sourceviews = registry.views[host.dataset.source],
diff --git a/components/xmosaicframe/xmosaicframe.html b/components/xmosaicframe/xmosaicframe.html
@@ -1,10 +1,22 @@
16  <template id="x-mosaic-frame-template">
17    <style>
18    @import url("/vendor.css"); /* XXX fix need for absolute path */
19 
20 -#panel {display: none}
21 +  #panel {display: none}
22 +  #panel .panel-body {
23 +    transition-property: max-height, transform;
24 +    transition-duration: 0.3s, 0.5s;
25 +    transition-timing-function: linear, ease;
26 +    transform-origin: top;
27 +    overflow: scroll;
28 +    max-height: 1000px;
29 +  }
30 +  #panel .panel-body.fold {
31 +    max-height: 0px;
32 +    transform: scaleY(0);
33 +  }
34    </style>
35 
36    <form>
37      <div class="form-group">
38        <label for="baseurl">source base url</label>
@@ -36,10 +48,11 @@
39  		aria-expanded="false">View <span class="caret"></span>
40  	</button>
41  	<ul id="view-menu" class="dropdown-menu" role="menu">
42  	</ul>
43        </div>
44 +      <button id="toggle-frame" class="btn btn-default glyphicon glyphicon-resize-small"></button>
45        <button id="remove-frame" class="btn btn-default glyphicon glyphicon-remove"></button>
46      </div>
47      <div class="panel-body">
48      </div>
49    </div>