fix(info-panel): fix info-panel full height button

voorhoede · May 10, 2016 · ee033c9 · ee033c9
1 parent 9c54c25
commit ee033c9
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 4 deletions.
diff --git a/src/index.css b/src/index.css
@@ -82,13 +82,17 @@ html,
     bottom: 0;
     background-color: #d3d3d3;
     width: 100%;
+    height: 50%;
     overflow-y: hidden;
     padding: 1em;
     padding: 0 5px 1em 5px;
     border-bottom: 1px solid #ccc;
     -webkit-transition: height .5s;
     transition: height .5s;
 }
+.viewer-info.is-maximized {
+    height: 100%;
+}
 .viewer-info-close {
     position: absolute;
     top: 1em;

diff --git a/src/modules/app/app.tag.html b/src/modules/app/app.tag.html
@@ -8,7 +8,8 @@
         <button class="viewer-button viewer-icon-info-outline { 'is-active': infoIsOpen }"
                 title="toggle module info"
                 disabled="{ !activeModule.info }"
-                onclick="{ toggleInfo }"></button>
+                onclick="{ toggleInfo }"
+                aria-controls="info-panel"></button>
         <button class="viewer-button viewer-icon-label" title="toggle annotations"
                 disabled></button>
 

diff --git a/src/modules/info-panel/info-panel.tag.html b/src/modules/info-panel/info-panel.tag.html
@@ -1,4 +1,4 @@
-<info-panel class="viewer-info" style="height:60%;">
+<info-panel class="viewer-info { 'is-maximized': isMaximized }" id="info-panel" aria-expanded="true">
 
     <header class="viewer-info-header">
         <nav class="viewer-info-nav">
@@ -13,9 +13,9 @@
         </nav>
 
         <div class="viewer-info-control">
-            <button class="viewer-button viewer-icon-align-top" title=""></button>
+            <button class="viewer-button viewer-icon-align-top" title="" onclick="{ toggleMaximize }"></button>
             <button class="viewer-button viewer-icon-clear" title="close info panel"
-                    onclick="{ opts.onClose }"></button>
+                    onclick="{ onClose }"></button>
         </div>
     </header>
 
@@ -27,8 +27,11 @@
     <script>
         var tag = this;
         tag.activeSection = undefined;
+        tag.isMaximized = false;
         opts.sections = {};
         tag.onSelectSection = onSelectSection;
+        tag.onClose = onClose;
+        tag.toggleMaximize = toggleMaximize;
         tag.on('update', onUpdate);
 
         function onSelectSection(event) {
@@ -41,5 +44,14 @@
                 tag.activeSection = Object.keys(tag.sections)[0];
             }
         }
+
+        function toggleMaximize() {
+            tag.isMaximized = !tag.isMaximized;
+        }
+
+        function onClose() {
+            opts.onClose();
+            tag.isMaximized = false;
+        }
     </script>
 </info-panel>