dhis2-devs team mailing list archive
-
dhis2-devs team
-
Mailing list archive
-
Message #30982
[Branch ~dhis2-devs-core/dhis2/trunk] Rev 15753: Merge menu fixes into trunk
Merge authors:
Mark Polak (markpo)
------------------------------------------------------------
revno: 15753 [merge]
committer: Mark Polak <markpo@xxxxxxxxxx>
branch nick: dhis2
timestamp: Wed 2014-06-18 23:05:00 +0200
message:
Merge menu fixes into trunk
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.ui.js
dhis-2/dhis-web/dhis-web-dashboard-integration/src/main/webapp/dhis-web-dashboard-integration/javascript/dashboard.js
--
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-06-12 23:32:40 +0000
+++ dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/css/menu.css 2014-06-17 15:14:40 +0000
@@ -285,7 +285,7 @@
top: 10px;
position: relative;
width: 360px;
- z-index: 10;
+ z-index: 100000; /* Quite high for any other elements that might have high z-indexes */
}
.app-menu-dropdown-wrap {
@@ -314,17 +314,21 @@
padding-right: 36px;
padding-top: 15px;
padding-bottom: 5px;
+ max-height: 48px;
+ max-width: 48px;
}
.app-menu-dropdown span
{
+ color: #404040;
display: block;
+ font-family: LiberationSans, arial, sans-serif;
height: 30px;
+ overflow: hidden;
padding-left: 10px;
padding-right: 10px;
text-align: center;
width: 100px;
- color: #404040;
}
.app-menu-dropdown .caret-up-background,
@@ -465,6 +469,7 @@
{
cursor: pointer;
display: block;
+ font-family: LiberationSans, arial, sans-serif;
}
.show-menu
@@ -551,4 +556,30 @@
{
top: 288px;
}
-}
\ No newline at end of file
+}
+
+/*----------------------------------------------------------------------------*/
+/* @font-face */
+/*----------------------------------------------------------------------------*/
+/* TODO: Fonts are taken from light_blue.css therefore this is repeated */
+@font-face {
+ font-family: 'LiberationSans';
+ src: url('../fonts/LiberationSans-Regular-webfont.eot');
+ src: url('../fonts/LiberationSans-Regular-webfont.eot?#iefix') format('eot'),
+ url('../fonts/LiberationSans-Regular-webfont.woff') format('woff'),
+ url('../fonts/LiberationSans-Regular-webfont.ttf') format('truetype'),
+ url('../fonts/LiberationSans-Regular-webfont.svg#webfontc8rbNdBe') format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'LiberationSans';
+ src: url('../fonts/LiberationSans-Bold-webfont.eot');
+ src: url('../fonts/LiberationSans-Bold-webfont.eot?#iefix') format('eot'),
+ url('../fonts/LiberationSans-Bold-webfont.woff') format('woff'),
+ url('../fonts/LiberationSans-Bold-webfont.ttf') format('truetype'),
+ url('../fonts/LiberationSans-Bold-webfont.svg#webfontHyWb8e07') format('svg');
+ font-weight: bold;
+ font-style: normal;
+}
=== modified file 'dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/dhis2/dhis2.menu.ui.js'
--- dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/dhis2/dhis2.menu.ui.js 2014-06-13 00:10:19 +0000
+++ dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/dhis2/dhis2.menu.ui.js 2014-06-18 11:14:28 +0000
@@ -84,10 +84,10 @@
'</li>';
- templates.menuLink = '<li id="{{id}}_button">' +
+ templates.menuLink = '<li id="{{id}}Button">' +
'<a id="{{id}}Link" class="{{classes}}"><i class="fa fa-{{iconName}}"></i>{{menuItemName}}</a>' +
'<div class="app-menu-dropdown-wrap">' +
- '<div class="menuDropDownArea app-menu-dropdown appsMenuLink_menu ui-front">' +
+ '<div class="app-menu-dropdown">' +
'<div class="caret-up-border"></div><div class="caret-up-background"></div>' +
'<ul class="menuDropDownBox">{{menuItems}}</ul>' +
'<div class="menu-drop-down-buttons"></div>' +
@@ -95,10 +95,10 @@
'</div>' +
'</li>';
- templates.menuLinkWithScroll = '<li id="{{id}}_button">' +
+ templates.menuLinkWithScroll = '<li id="{{id}}Button">' +
'<a id="{{id}}Link" class="{{classes}}"><i class="fa fa-{{iconName}}"></i>{{menuItemName}}</a>' +
'<div class="app-menu-dropdown-wrap">' +
- '<div class="menuDropDownArea app-menu-dropdown appsMenuLink_menu ui-front">' +
+ '<div class="app-menu-dropdown">' +
'<div class="caret-up-border"></div><div class="caret-up-background"></div>' +
'<div class="menu-drop-down-wrap">' +
'<div class="menu-drop-down-scroll">' +
@@ -367,7 +367,7 @@
//Add the event handlers only once
menuBase.eventsHandlers.forEach(function (eventFunction) {
if (isFunction(eventFunction)) {
- eventFunction(document.querySelector('#' + menu.name + "_button"));
+ eventFunction(document.querySelector('#' + menu.name + "Button"));
}
});
});
@@ -407,9 +407,11 @@
defaultMenu.template.add('menuItem', templates.itemItemplate);
defaultMenu.isOpen = function () {
- var dropdownElement = jqLite(document.querySelector("#" + defaultMenu.name + "_button div.app-menu-dropdown-wrap")),
- display = jqLite(dropdownElement).css("display");
- if (display === 'none') {
+ var dropdownElement = jqLite(document.querySelector(defaultMenu.getDropdownSelector())),
+ display = jqLite(dropdownElement).css("display"),
+ outOfView = parseInt(jqLite(dropdownElement).css("left"), 10) < 0; //TODO: This is a kind of funky check
+
+ if (display === 'none' || outOfView) {
return false;
}
return true;
@@ -420,7 +422,7 @@
}
defaultMenu.open = function (hover) {
- var dropdownElement = jqLite(document.querySelector("#" + defaultMenu.name + "_button div.app-menu-dropdown-wrap"));
+ var dropdownElement = jqLite(document.querySelector(defaultMenu.getDropdownSelector()));
//Set the dropdown position
jqLite(dropdownElement).css('left', defaultMenu.getDropDownPosition() + 'px');
@@ -433,7 +435,7 @@
}
defaultMenu.close = function (hover) {
- var dropdownElement = jqLite(document.querySelector("#" + defaultMenu.name + "_button div.app-menu-dropdown-wrap"));
+ var dropdownElement = jqLite(document.querySelector(defaultMenu.getDropdownSelector()));
dropdownElement.css('display', 'none');
if ( ! hover) {
@@ -485,8 +487,16 @@
return result;
}
+ defaultMenu.getButtonId = function () {
+ return "#" + defaultMenu.name + "Button";
+ }
+
+ defaultMenu.getDropdownSelector = function () {
+ return defaultMenu.getButtonId() + " div.app-menu-dropdown-wrap";
+ }
+
defaultMenu.getDropDownPosition = function () {
- var menuElement = document.querySelector("#" + defaultMenu.name + "_button"),
+ var menuElement = document.querySelector(defaultMenu.getButtonId()),
dropdownElement = jqLite(menuElement.querySelector("div.app-menu-dropdown-wrap")),
dropdownPosition;
@@ -561,7 +571,7 @@
defaultMenu.menuItems.subscribe(defaultMenu.render, true);
defaultMenu.menuItems.subscribe(function (menu) {
- var menuElementList = document.querySelector("#" + defaultMenu.name + "_button ul.menuDropDownBox"),
+ var menuElementList = document.querySelector(defaultMenu.getButtonId() + " ul.menuDropDownBox"),
menuItemsHtml;
if (menuElementList === null)
@@ -655,7 +665,7 @@
//Translate the search apps name
dhis2.translate.get(['app_search_placeholder'], function (translations) {
- var searchBoxElement = document.querySelector('#' + searchMenu.name + "_button input.apps-search");
+ var searchBoxElement = document.querySelector('#' + searchMenu.name + "Button input.apps-search");
searchAppsText = translations.get('app_search_placeholder');
if (rendered === true) {
@@ -664,7 +674,7 @@
});
searchMenu.renderers.push(function () {
- var dropdownWrap = document.querySelector('#' + searchMenu.name + "_button div.menu-drop-down-scroll");
+ var dropdownWrap = document.querySelector('#' + searchMenu.name + "Button div.menu-drop-down-scroll");
jqLite(dropdownWrap).prepend(searchMenu.template.parse('search', { search_apps: searchAppsText }));
rendered = true;
});
@@ -712,7 +722,7 @@
});
linkButtonMenu.renderers.push(function () {
- var buttonContainer = document.querySelector('#' + linkButtonMenu.name + "_button div.menu-drop-down-buttons");
+ var buttonContainer = document.querySelector('#' + linkButtonMenu.name + "Button div.menu-drop-down-buttons");
menu.extraLink.url = dhis2.menu.fixUrlIfNeeded(menu.extraLink.url);
jqLite(buttonContainer).prepend(linkButtonMenu.template.parse('extraLink', menu.extraLink));
rendered = true;
@@ -731,30 +741,19 @@
function changeCurrentSelected(currentElement) {
- function animateScrollTo(scrollable, scrollto) {
- var modifier = 2;
- scrollto = scrollto - 49;
-
- function scrollDown() {
- if (scrollable.scrollTop >= scrollto || scrollable.offsetHeight + 49 === scrollable.scrollTop) {
- return;
- }
- scrollable.scrollTop = scrollable.scrollTop + modifier;
- setTimeout(scrollDown, 1);
- }
-
- function scrollUp() {
- if (scrollable.scrollTop <= scrollto || 0 === scrollable.scrollTop)
- return;
- scrollable.scrollTop = scrollable.scrollTop - modifier;
- setTimeout(scrollUp, 1);
- }
-
- if (scrollable.scrollTop > scrollto) {
- scrollUp();
- } else {
- scrollDown();
- }
+ function scrollTo(element, to, duration) {
+ var difference, perTick;
+
+ if (duration <= 0) return;
+
+ difference = to - element.scrollTop - 49;
+ perTick = difference / duration * 10;
+
+ setTimeout(function () {
+ element.scrollTop = element.scrollTop + perTick;
+ if (element.scrollTop === to || perTick === Infinity) return;
+ scrollTo(element, to, (duration - 10));
+ }, 10);
}
jqLite(shortCutMenu.selectedElement).toggleClass("selected");
@@ -762,7 +761,7 @@
jqLite(shortCutMenu.selectedElement).toggleClass("selected");
if (menuElement.querySelector("div.menu-drop-down-scroll")) {
- animateScrollTo(menuElement.querySelector("div.menu-drop-down-scroll"), shortCutMenu.selectedElement.offsetTop);
+ scrollTo(menuElement.querySelector("div.menu-drop-down-scroll"), shortCutMenu.selectedElement.offsetTop, 50);
}
shortCutMenu.setCurrentId(currentElement);
@@ -776,7 +775,7 @@
/**
* Key combination using alt to control opening and closing
*/
- if (event.which === shortCutMenu.shortCutKey && event.ctrlKey) {
+ if (event.which === shortCutMenu.shortCutKey && (event.ctrlKey || event.altKey)) {
event.preventDefault();
if (shortCutMenu.isOpen()) {
@@ -802,14 +801,6 @@
jqLite(document).on("keyup", function (event) {
var goToElement;
- /**
- * Calculate the number of positions we have available if we fill all the rows
- * @returns {number}
- */
- function getPositionsNumber() {
- return Math.ceil(shortCutElements.length / 3) * 3;
- }
-
//Don't run anything when the menu is not open
if (shortCutMenu.isClosed()) {
return;
@@ -837,53 +828,38 @@
}
if (event.which === keys.arrowRight) {
+ if (shortCutElements[currentElement + 1] === undefined) {
+ return;
+ }
currentElement = currentElement + 1;
- if (shortCutElements[currentElement] === undefined) {
- currentElement = 0;
- }
changeCurrentSelected(currentElement);
return;
}
if (event.which === keys.arrowLeft) {
+ if (shortCutElements[currentElement - 1] === undefined) {
+ return;
+ }
currentElement = currentElement - 1;
- if (shortCutElements[currentElement] === undefined) {
- currentElement = shortCutElements.length - 1;
- }
changeCurrentSelected(currentElement);
return;
}
if (event.which === keys.arrowDown) {
+ if (shortCutElements[currentElement + 3] === undefined) {
+ return;
+ }
currentElement = currentElement + 3;
- if (shortCutElements[currentElement] === undefined) {
- if (currentElement >= shortCutElements.length) {
- currentElement = currentElement % 3;
- } else {
- currentElement = currentElement - shortCutElements.length;
- }
- }
changeCurrentSelected(currentElement);
return;
}
//TODO: Clean up this code a bit as it's very confusing to what it does now.
if (event.which === keys.arrowUp) {
+ if (shortCutElements[currentElement - 3] === undefined) {
+ return;
+ }
currentElement = currentElement - 3;
- if (shortCutElements[currentElement] === undefined) {
- //Jump to the last
- if (!((shortCutElements.length % 3) === 0)) {
- currentElement = getPositionsNumber() - (-currentElement);
- if (shortCutElements[currentElement] === undefined) {
- if (currentElement === -1)
- currentElement = 0;
- else
- currentElement = currentElement - 3;
- }
- } else {
- currentElement = shortCutElements.length - (-currentElement);
- }
- }
changeCurrentSelected(currentElement);
return;
}
=== modified file 'dhis-2/dhis-web/dhis-web-dashboard-integration/src/main/webapp/dhis-web-dashboard-integration/javascript/dashboard.js'
--- dhis-2/dhis-web/dhis-web-dashboard-integration/src/main/webapp/dhis-web-dashboard-integration/javascript/dashboard.js 2014-06-07 14:39:14 +0000
+++ dhis-2/dhis-web/dhis-web-dashboard-integration/src/main/webapp/dhis-web-dashboard-integration/javascript/dashboard.js 2014-06-17 15:58:51 +0000
@@ -614,7 +614,7 @@
if ( query.length == 0 )
{
dhis2.db.hideSearch();
- return false;
+ return undefined;
}
var url = "../api/dashboards/q/" + query + dhis2.db.getMaxParams();
