xmosaicframe: move frame menu from top to right (related to #290425)

authorSamuel Trégouët <samuel.tregouet@logilab.fr>
changesete3ca962601ad
branchdefault
phasedraft
hiddenyes
parent revision#cff70dc45875 server: remove home page + do not use /p/ route but / instead (closes #290408)
child revision#75ff8427b630 xmosaicframe: add animation when displaying menu (related to #290425)
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 1428048597 -7200
# Fri Apr 03 10:09:57 2015 +0200
# Node ID e3ca962601adb4a186844d9304390c045070f4b1
# Parent cff70dc45875085eb379cb6f64f33fc43a028d18
xmosaicframe: move frame menu from top to right (related to #290425)

diff --git a/components/xmosaicframe/xmosaicframe.es6 b/components/xmosaicframe/xmosaicframe.es6
@@ -152,11 +152,11 @@
1              });
2          }
3 
4 
5          function applyView(vid, ctx) {
6 -            let body = host.shadowRoot.querySelector('.panel-body');
7 +            let body = host.shadowRoot.querySelector('#mosaic-frame-content');
8              while (body.firstChild) {
9                  body.removeChild(body.firstChild);
10              }
11              if (vid === 'auto') {
12                  vid = Object.keys(sourceviews)[0];
@@ -183,15 +183,10 @@
13                  anchor.textContent = viewname;
14                  anchor.addEventListener('click', function() {
15                      applyView(viewname, frameContext);
16                  });
17              }
18 -            // bind callbacks
19 -            let btn = host.shadowRoot.querySelector('#view-button');
20 -            btn.addEventListener('click', function() {
21 -                btn.classList.toggle('open');
22 -            });
23          }
24 
25          function submitQuery(query) {
26              var fetcher = null;
27              if (host.dataset.source === 'neo4j') {
diff --git a/components/xmosaicframe/xmosaicframe.html b/components/xmosaicframe/xmosaicframe.html
@@ -1,22 +1,56 @@
28  <template id="x-mosaic-frame-template">
29    <style>
30    @import url("/vendor.css"); /* XXX fix need for absolute path */
31 
32    #panel {display: none}
33 -  #panel .panel-body {
34 +  #panel .panel-body #mosaic-frame-content {
35      transition-property: max-height, transform;
36      transition-duration: 0.3s, 0.5s;
37      transition-timing-function: linear, ease;
38      transform-origin: top;
39      overflow: scroll;
40      max-height: 1000px;
41    }
42 -  #panel .panel-body.fold {
43 -    max-height: 0px;
44 +  #panel .panel-body.fold #mosaic-frame-content {
45 +    max-height: 50px;
46      transform: scaleY(0);
47    }
48 +
49 +
50 +  .mosaic-cell-body {
51 +    padding: 0px;
52 +  }
53 +
54 +  .mosaic-sidebar .navbar {
55 +    margin-right: 0px;
56 +    position: absolute;
57 +    right: 15px;
58 +    padding-right: 15px;
59 +    z-index: 1;
60 +    opacity: 0.9;
61 +  }
62 +
63 +  .mosaic-sidebar .navbar button,
64 +  .mosaic-sidebar .navbar div {
65 +    text-align: right;
66 +    float: none;
67 +    display: block;
68 +  }
69 +
70 +  #mosaic-frame-content {
71 +    margin: 15px;
72 +  }
73 +
74 +  .mosaic-sidebar {
75 +    display: none;
76 +    position: relative;
77 +  }
78 +
79 +  #panel:hover .mosaic-sidebar {
80 +    display: block;
81 +  }
82    </style>
83 
84    <form>
85      <div class="form-group">
86        <label for="baseurl">source base url</label>
@@ -42,24 +76,27 @@
87      <div id="select-vid" class="radio"></div>
88      <button type="submit" class="btn bnt-default">Submit</button>
89    </form>
90 
91    <div id="panel" class="mosaic-frame panel panel-default">
92 -    <div class="panel-heading">
93 -      <h3 class="panel-title"><content></content></h3>
94 -      <button id="edit" class="btn btn-default"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></button>
95 -      <div class="btn-group" id="view-button">
96 -        <button type="button" class="btn btn-default" data-toggle="dropdown"
97 -		aria-expanded="false">View <span class="caret"></span>
98 -	</button>
99 -	<ul id="view-menu" class="dropdown-menu" role="menu">
100 -	</ul>
101 +    <div class="panel-body mosaic-cell-body">
102 +      <div class="mosaic-sidebar">
103 +        <div class="navbar navbar-default navbar-right navbar-collapse">
104 +          <div><b>#001</b></div>
105 +          <button id="edit" class="btn btn-default">
106 +            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
107 +          </button>
108 +          <button id="toggle-frame" class="btn btn-default">
109 +            <span class="glyphicon glyphicon-resize-small" aria-hidden="true"></span>
110 +          </button>
111 +          <button id="remove-frame" class="btn btn-default">
112 +            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
113 +          </button>
114 +          <ul id="view-menu" class="dropdown-menu" role="menu">
115 +        </div>
116        </div>
117 -      <button id="toggle-frame" class="btn btn-default glyphicon glyphicon-resize-small"></button>
118 -      <button id="remove-frame" class="btn btn-default glyphicon glyphicon-remove"></button>
119 -    </div>
120 -    <div class="panel-body">
121 +      <div id="mosaic-frame-content"></div>
122      </div>
123    </div>
124  </template>
125 
126  <script src="xmosaicframe.js"></script>