dhis2-devs team mailing list archive

[noreply@xxxxxxxxxxxxx]

------------------------------------------------------------
revno: 14621
committer: Mark Polak <markpo@xxxxxxxxxx>
branch nick: dhis2
timestamp: Wed 2014-04-02 19:19:53 +0200
message:
  Adds scroll functionality to the dropdown menu
modified:
  dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/css/menu.css
  dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/dhis2/dhis2.menu.js
  dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/main.vm


--
lp:dhis2
https://code.launchpad.net/~dhis2-devs-core/dhis2/trunk

Your team DHIS 2 developers is subscribed to branch lp:dhis2.
To unsubscribe from this branch go to https://code.launchpad.net/~dhis2-devs-core/dhis2/trunk/+edit-subscription

=== modified file 'dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/css/menu.css'
--- dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/css/menu.css	2014-04-02 13:48:42 +0000
+++ dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/css/menu.css	2014-04-02 17:19:53 +0000
@@ -305,7 +305,7 @@
     height: 30px;
     padding-top: 10px;
     text-align: center;
-    width: 100%;
+    width: 360px;
 }
 
 .apps-menu-more a
@@ -347,6 +347,24 @@
     width: 100%;
 }
 
+.menu-drop-down-wrap
+{
+    overflow: hidden;
+    height: 330px;
+}
+
+.menu-drop-down-scroll
+{
+    height: 330px;
+    width: 384px;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+#menuDropDown1 ul {
+    height: 330px;
+}
+
 #menuDropDown1 .caret-up-background,
 #menuDropDown1 .caret-up-border
 {
@@ -404,7 +422,7 @@
     display: block;
     padding: .5em 0;
     text-align: center;
-    width: 100%;
+    width: 358px;
 }
 
 .app-menu-error:hover

=== modified file 'dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/dhis2/dhis2.menu.js'
--- dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/dhis2/dhis2.menu.js	2014-04-02 13:48:42 +0000
+++ dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/dhis2/dhis2.menu.js	2014-04-02 17:19:53 +0000
@@ -364,13 +364,12 @@
 
     function renderDropDownFavorites() {
         var selector = '#menuDropDown1 .menuDropDownBox',
-            favorites = dhis2.menu.getFavorites();
+            apps = dhis2.menu.getOrderedAppList();
 
-        $(selector).parent().addClass('app-menu-dropdown ui-helper-clearfix');
+        $('#menuDropDown1').addClass('app-menu-dropdown ui-helper-clearfix');
         $(selector).html('');
-        $.tmpl( "appMenuItemTemplate", favorites).appendTo(selector);
-
-        twoColumnRowFix();
+        $.tmpl( "appMenuItemTemplate", apps).appendTo(selector);
+        $('.apps-menu-more').clone().addClass('ui-helper-clearfix').appendTo($('#menuDropDown1 .menu-drop-down-scroll'));
     }
 
     function renderAppManager(selector) {
@@ -384,6 +383,8 @@
         $('#' + selector + ' ul li').each(function (index, item) {
             $(item).children('a').append($('<i class="fa fa-bookmark"></i>'));
         });
+
+        twoColumnRowFix();
     }
 
     /**
@@ -491,7 +492,40 @@
             renderMenu();
         });
 
+        /**
+         * Check if we need to fix columns when the window resizes
+         */
         $(window).resize(twoColumnRowFix);
+
+        /**
+         * Adds a scrolling mechanism that modifies the height of the menu box to show only two rows
+         * Additionally it makes space for the scrollbar and shows/hides the more apps button
+         */
+        $('.menu-drop-down-scroll').scroll(function (event) {
+            var self = $(this),
+                moreAppsElement = $('#menuDropDown1 > .apps-menu-more');
+
+            if (self.parent(':animated').length !== 0)
+                return;
+
+            if (self.scrollTop() < 10 && self.innerHeight() === 220) {
+                moreAppsElement.show();
+                self.parent().css('width', '370px');
+                self.parent().parent().css('width', '370px');
+                self.css('height', '330px');
+                self.parent().clearQueue().animate( {'height': '330px'} );
+            } else {
+                if (self.innerHeight() === 330 ) {
+                    moreAppsElement.hide();
+                    self.parent().css('width', '384px');
+                    self.parent().parent().css('width', '384px');
+                    self.css('height', '220px');
+                    self.parent().clearQueue().animate( {'height': '220px'} );
+                }
+            }
+
+        });
+
     });
 
 })(jQuery, dhis2.menu);

=== modified file 'dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/main.vm'
--- dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/main.vm	2014-03-31 19:15:33 +0000
+++ dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/main.vm	2014-04-02 17:19:53 +0000
@@ -102,7 +102,11 @@
       <div id="menuDropDown1" class="menuDropDownArea app-menu-dropdown menuLink1_menu" >
         <div class="caret-up-border"></div>
         <div class="caret-up-background"></div>
-        <ul class="menuDropDownBox"><li class="menu-placeholder"><img src="../images/ajax-loader-bar.gif"></li></ul>
+        <div class="menu-drop-down-wrap">
+            <div class="menu-drop-down-scroll">
+              <ul class="menuDropDownBox"><li class="menu-placeholder"><img src="../images/ajax-loader-bar.gif"></li></ul>
+            </div>
+        </div>
         <div class="apps-menu-more"><a href="../dhis-web-commons-about/modules.action">$i18n.getString( "more_applications" )</a></div>
       </div>