dhis2-devs team mailing list archive
-
dhis2-devs team
-
Mailing list archive
-
Message #21640
[Branch ~dhis2-devs-core/dhis2/trunk] Rev 10292: (PT) Left menu scrollbar added when necessary.
Merge authors:
Jan Henrik Øverland (janhenrik-overland)
------------------------------------------------------------
revno: 10292 [merge]
committer: Jan Henrik Overland <janhenrik.overland@xxxxxxxxx>
branch nick: dhis2
timestamp: Mon 2013-03-18 17:00:09 +0100
message:
(PT) Left menu scrollbar added when necessary.
modified:
dhis-2/dhis-web/dhis-web-pivot/src/main/webapp/dhis-web-pivot/app/scripts/app.js
dhis-2/dhis-web/dhis-web-pivot/src/main/webapp/dhis-web-pivot/app/scripts/core.js
dhis-2/dhis-web/dhis-web-pivot/src/main/webapp/dhis-web-pivot/app/styles/style.css
--
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-pivot/src/main/webapp/dhis-web-pivot/app/scripts/app.js'
--- dhis-2/dhis-web/dhis-web-pivot/src/main/webapp/dhis-web-pivot/app/scripts/app.js 2013-03-14 15:38:54 +0000
+++ dhis-2/dhis-web/dhis-web-pivot/src/main/webapp/dhis-web-pivot/app/scripts/app.js 2013-03-18 15:58:24 +0000
@@ -46,9 +46,6 @@
init.afterRender = function() {
- // Left gui
- pt.cmp.dimension.panels[0].expand();
-
// Resize event handler
pt.viewport.westRegion.on('resize', function() {
var panel = pt.util.dimension.panel.getExpanded();
@@ -58,6 +55,29 @@
}
});
+ // Left gui
+ var vph = pt.viewport.westRegion.getHeight(),
+ no = pt.init.ougs.length + pt.init.degs.length,
+ factor = 0;
+
+ console.log("westRegion.getHeight", vph);
+ console.log("no of degs and ougs", no);
+
+ if (vph > 535) {
+ var factor = (vph - 535) / 27;
+ console.log("factor", factor);
+ }
+
+ if (factor > 7) {
+ pt.viewport.accordion.setAutoScroll(false);
+ pt.viewport.westRegion.setWidth(pt.conf.layout.west_width);
+ }
+ else {
+ pt.viewport.westRegion.hasScrollbar = true;
+ }
+
+ pt.cmp.dimension.panels[0].expand();
+
// Load favorite from url
var id = pt.util.url.getUrlParam('id');
@@ -75,9 +95,19 @@
util.dimension = {
panel: {
setHeight: function(mx) {
- var h = pt.viewport.westRegion.getHeight() - pt.conf.layout.west_fill;
- mx = mx + (pt.cmp.dimension.panels.length * 28);
- pt.cmp.dimension.panel.setHeight(h > mx ? mx : h);
+ var ph = pt.cmp.dimension.panels.length * 28,
+ h;
+
+ if (pt.viewport.westRegion.hasScrollbar) {
+ h = ph + mx;
+ pt.viewport.accordion.setHeight(pt.viewport.getHeight() - 2);
+ pt.viewport.accordionBody.setHeight(h);
+ }
+ else {
+ h = pt.viewport.westRegion.getHeight() - pt.conf.layout.west_fill;
+ mx += ph;
+ pt.viewport.accordion.setHeight(h > mx ? mx : h);
+ }
},
getExpanded: function() {
@@ -1959,7 +1989,9 @@
return data.items.length ? data : null;
},
onExpand: function() {
- pt.util.dimension.panel.setHeight(pt.conf.layout.west_maxheight_accordion_indicator);
+ var h = pt.viewport.westRegion.hasScrollbar ?
+ pt.conf.layout.west_scrollbarheight_accordion_indicator : pt.conf.layout.west_maxheight_accordion_indicator;
+ pt.util.dimension.panel.setHeight(h);
pt.util.multiselect.setHeight(
[indicatorAvailable, indicatorSelected],
this,
@@ -2151,7 +2183,9 @@
return data.items.length ? data : null;
},
onExpand: function() {
- pt.util.dimension.panel.setHeight(pt.conf.layout.west_maxheight_accordion_dataelement);
+ var h = pt.viewport.westRegion.hasScrollbar ?
+ pt.conf.layout.west_scrollbarheight_accordion_dataelement : pt.conf.layout.west_maxheight_accordion_dataelement;
+ pt.util.dimension.panel.setHeight(h);
pt.util.multiselect.setHeight(
[dataElementAvailable, dataElementSelected],
this,
@@ -2339,7 +2373,9 @@
return data.items.length ? data : null;
},
onExpand: function() {
- pt.util.dimension.panel.setHeight(pt.conf.layout.west_maxheight_accordion_dataset);
+ var h = pt.viewport.westRegion.hasScrollbar ?
+ pt.conf.layout.west_scrollbarheight_accordion_dataset : pt.conf.layout.west_maxheight_accordion_dataset;
+ pt.util.dimension.panel.setHeight(h);
pt.util.multiselect.setHeight(
[dataSetAvailable, dataSetSelected],
this,
@@ -2393,7 +2429,7 @@
items: [
{
xtype: 'panel',
- columnWidth: 0.35,
+ columnWidth: 0.34,
bodyStyle: 'border-style:none; padding:0 0 0 8px',
defaults: {
labelSeparator: '',
@@ -2435,7 +2471,7 @@
},
{
xtype: 'panel',
- columnWidth: 0.32,
+ columnWidth: 0.33,
bodyStyle: 'border-style:none',
defaults: {
labelSeparator: '',
@@ -2498,6 +2534,50 @@
items: [
{
xtype: 'label',
+ text: 'Bi-months', //i18n
+ cls: 'pt-label-period-heading'
+ },
+ {
+ xtype: 'checkbox',
+ relativePeriodId: 'LAST_BIMONTH',
+ boxLabel: 'Last bi-month', //i18n
+ },
+ {
+ xtype: 'checkbox',
+ relativePeriodId: 'LAST_6_BIMONTHS',
+ boxLabel: 'Last 6 bi-months' //i18n
+ }
+ ]
+ }
+ ]
+ },
+ {
+ xtype: 'container',
+ layout: 'column',
+ bodyStyle: 'border-style:none',
+ items: [
+ {
+ xtype: 'panel',
+ columnWidth: 0.34,
+ bodyStyle: 'border-style:none; padding:5px 0 0 10px',
+ defaults: {
+ labelSeparator: '',
+ style: 'margin-bottom:2px',
+ listeners: {
+ added: function(chb) {
+ if (chb.xtype === 'checkbox') {
+ pt.cmp.dimension.relativePeriod.checkbox.push(chb);
+ relativePeriod.valueComponentMap[chb.relativePeriodId] = chb;
+ }
+ },
+ change: function() {
+ rewind.xable();
+ }
+ }
+ },
+ items: [
+ {
+ xtype: 'label',
text: 'Quarters', //i18n pt.i18n.quarters,
cls: 'pt-label-period-heading'
},
@@ -2509,21 +2589,14 @@
{
xtype: 'checkbox',
relativePeriodId: 'LAST_4_QUARTERS',
- boxLabel: 'Last 4 quarters', //i18n pt.i18n.last_4_quarters
+ boxLabel: 'Last 4 quarters' //i18n pt.i18n.last_4_quarters
}
]
- }
- ]
- },
- {
- xtype: 'container',
- layout: 'column',
- bodyStyle: 'border-style:none',
- items: [
+ },
{
xtype: 'panel',
- columnWidth: 0.35,
- bodyStyle: 'border-style:none; padding:5px 0 0 10px',
+ columnWidth: 0.33,
+ bodyStyle: 'border-style:none; padding:5px 0 0',
defaults: {
labelSeparator: '',
style: 'margin-bottom:2px',
@@ -2553,13 +2626,13 @@
{
xtype: 'checkbox',
relativePeriodId: 'LAST_2_SIXMONTHS',
- boxLabel: 'Last 2 six-months', //i18n pt.i18n.last_two_six_month
+ boxLabel: 'Last 2 six-months' //i18n pt.i18n.last_two_six_month
}
]
},
{
xtype: 'panel',
- columnWidth: 0.32,
+ columnWidth: 0.33,
bodyStyle: 'border-style:none; padding:5px 0 0',
defaults: {
labelSeparator: '',
@@ -2579,23 +2652,18 @@
items: [
{
xtype: 'label',
- text: 'Years', //i18n pt.i18n.years,
+ text: 'Financial years',
cls: 'pt-label-period-heading'
},
{
xtype: 'checkbox',
- relativePeriodId: 'THIS_YEAR',
- boxLabel: 'This year', //i18n pt.i18n.this_year
- },
- {
- xtype: 'checkbox',
- relativePeriodId: 'LAST_YEAR',
- boxLabel: 'Last year', //i18n pt.i18n.last_year
- },
- {
- xtype: 'checkbox',
- relativePeriodId: 'LAST_5_YEARS',
- boxLabel: 'Last 5 years', //i18n pt.i18n.last_5_years
+ relativePeriodId: 'LAST_FINANCIAL_YEAR',
+ boxLabel: 'Last financial year',
+ },
+ {
+ xtype: 'checkbox',
+ relativePeriodId: 'LAST_5_FINANCIAL_YEARS',
+ boxLabel: 'Last 5 financial years'
}
]
}
@@ -2618,6 +2686,55 @@
//]
//}
]
+ },
+ {
+ xtype: 'container',
+ layout: 'column',
+ bodyStyle: 'border-style:none',
+ items: [
+ {
+ xtype: 'panel',
+ columnWidth: 0.35,
+ bodyStyle: 'border-style:none; padding:5px 0 0 10px',
+ defaults: {
+ labelSeparator: '',
+ style: 'margin-bottom:2px',
+ listeners: {
+ added: function(chb) {
+ if (chb.xtype === 'checkbox') {
+ pt.cmp.dimension.relativePeriod.checkbox.push(chb);
+ relativePeriod.valueComponentMap[chb.relativePeriodId] = chb;
+ }
+ },
+ change: function() {
+ rewind.xable();
+ }
+ }
+ },
+ items: [
+ {
+ xtype: 'label',
+ text: 'Years', //i18n pt.i18n.years,
+ cls: 'pt-label-period-heading'
+ },
+ {
+ xtype: 'checkbox',
+ relativePeriodId: 'THIS_YEAR',
+ boxLabel: 'This year', //i18n pt.i18n.this_year
+ },
+ {
+ xtype: 'checkbox',
+ relativePeriodId: 'LAST_YEAR',
+ boxLabel: 'Last year', //i18n pt.i18n.last_year
+ },
+ {
+ xtype: 'checkbox',
+ relativePeriodId: 'LAST_5_YEARS',
+ boxLabel: 'Last 5 years' //i18n pt.i18n.last_5_years
+ }
+ ]
+ }
+ ]
}
]
};
@@ -2730,7 +2847,9 @@
return data.items.length ? data : null;
},
onExpand: function() {
- pt.util.dimension.panel.setHeight(pt.conf.layout.west_maxheight_accordion_period);
+ var h = pt.viewport.westRegion.hasScrollbar ?
+ pt.conf.layout.west_scrollbarheight_accordion_period : pt.conf.layout.west_maxheight_accordion_period;
+ pt.util.dimension.panel.setHeight(h);
pt.util.multiselect.setHeight(
[fixedPeriodAvailable, fixedPeriodSelected],
this,
@@ -2806,7 +2925,7 @@
{
xtype: 'panel',
layout: 'column',
- bodyStyle: 'border-style:none; padding-bottom:4px',
+ bodyStyle: 'border-style:none; padding-bottom:2px',
items: [
fixedPeriodAvailable,
fixedPeriodSelected
@@ -3015,7 +3134,9 @@
return data.items.length ? data : null;
},
onExpand: function() {
- pt.util.dimension.panel.setHeight(pt.conf.layout.west_maxheight_accordion_organisationunit);
+ var h = pt.viewport.westRegion.hasScrollbar ?
+ pt.conf.layout.west_scrollbarheight_accordion_organisationunit : pt.conf.layout.west_maxheight_accordion_organisationunit;
+ pt.util.dimension.panel.setHeight(h);
treePanel.setHeight(this.getHeight() - pt.conf.layout.west_fill_accordion_organisationunit);
},
items: [
@@ -3204,7 +3325,9 @@
availableStore.load();
}
- pt.util.dimension.panel.setHeight(pt.conf.layout.west_maxheight_accordion_dataset);
+ var h = pt.viewport.westRegion.hasScrollbar ?
+ pt.conf.layout.west_scrollbarheight_accordion_group : pt.conf.layout.west_maxheight_accordion_group;
+ pt.util.dimension.panel.setHeight(h);
pt.util.multiselect.setHeight(
[available, selected],
@@ -3310,60 +3433,54 @@
}
};
- accordion = {
- xtype: 'panel',
- bodyStyle: 'border-style:none; padding:2px;',
+ accordionBody = Ext.create('Ext.panel.Panel', {
+ layout: 'accordion',
+ activeOnTop: true,
+ cls: 'pt-accordion',
+ bodyStyle: 'border:0 none; margin-bottom:2px',
+ height: 700,
+ items: function() {
+ var panels = [
+ indicator,
+ dataElement,
+ dataSet,
+ period,
+ organisationUnit
+ ],
+ ougs = Ext.clone(pt.init.ougs),
+ degs = Ext.clone(pt.init.degs);
+
+ pt.util.array.sortObjectsByString(ougs);
+ pt.util.array.sortObjectsByString(degs);
+
+ panels = panels.concat(getGroupSetPanels(ougs, pt.conf.finals.dimension.organisationUnitGroupSet.objectName, 'pt-panel-title-organisationunitgroupset'));
+ panels = panels.concat(getGroupSetPanels(degs, pt.conf.finals.dimension.dataElementGroupSet.objectName, 'pt-panel-title-dataelementgroupset'));
+
+ last = panels[panels.length - 1];
+ last.cls = 'pt-accordion-last';
+
+ return panels;
+ }()
+ });
+
+ accordion = Ext.create('Ext.panel.Panel', {
+ //xtype: 'panel',
+ bodyStyle: 'border-style:none; padding:2px; padding-bottom:0; overflow-y:scroll',
layout: 'fit',
- items: [
- {
- xtype: 'panel',
- layout: 'accordion',
- activeOnTop: true,
- cls: 'pt-accordion',
- bodyStyle: 'border:0 none',
- height: 430,
- items: function() {
- var panels = [
- indicator,
- dataElement,
- dataSet,
- period,
- organisationUnit
- ],
- ougs = Ext.clone(pt.init.ougs),
- degs = Ext.clone(pt.init.degs);
-
- pt.util.array.sortObjectsByString(ougs);
- pt.util.array.sortObjectsByString(degs);
-
- panels = panels.concat(getGroupSetPanels(ougs, pt.conf.finals.dimension.organisationUnitGroupSet.objectName, 'pt-panel-title-organisationunitgroupset'));
- panels = panels.concat(getGroupSetPanels(degs, pt.conf.finals.dimension.dataElementGroupSet.objectName, 'pt-panel-title-dataelementgroupset'));
-
- last = panels[panels.length - 1];
- last.cls = 'pt-accordion-last';
-
- return panels;
- }(),
- listeners: {
- added: function() {
- pt.cmp.dimension.panel = this;
- }
- }
- }
- ],
+ items: accordionBody,
listeners: {
added: function() {
- pt.cmp.dimension.panel = this;
+ pt.cmp.dimension.accordion = this;
}
}
- };
+ });
westRegion = Ext.create('Ext.panel.Panel', {
region: 'west',
preventHeader: true,
collapsible: true,
collapseMode: 'mini',
- width: pt.conf.layout.west_width,
+ width: pt.conf.layout.west_width + 13,
items: accordion
});
@@ -3554,6 +3671,7 @@
//todo
r.relativePeriods.reportingMonth = r.relativePeriods.lastMonth;
+ r.relativePeriods.reportingBimonth = r.relativePeriods.lastBimonth;
r.relativePeriods.reportingQuarter = r.relativePeriods.lastQuarter;
for (var key in r.relativePeriods) {
@@ -3650,6 +3768,8 @@
viewport = Ext.create('Ext.container.Viewport', {
layout: 'border',
+ accordion: accordion,
+ accordionBody: accordionBody,
westRegion: westRegion,
centerRegion: centerRegion,
updateViewport: update,
@@ -3674,6 +3794,9 @@
}
}
});
+acc = accordion;
+
+wr = westRegion;
addListeners = function() {
pt.store.indicatorAvailable.on('load', function() {
=== modified file 'dhis-2/dhis-web/dhis-web-pivot/src/main/webapp/dhis-web-pivot/app/scripts/core.js'
--- dhis-2/dhis-web/dhis-web-pivot/src/main/webapp/dhis-web-pivot/app/scripts/core.js 2013-03-15 14:02:52 +0000
+++ dhis-2/dhis-web/dhis-web-pivot/src/main/webapp/dhis-web-pivot/app/scripts/core.js 2013-03-18 15:45:33 +0000
@@ -136,11 +136,15 @@
'LAST_12_WEEKS': 12,
'LAST_MONTH': 1,
'LAST_3_MONTHS': 3,
+ 'LAST_BIMONTH': 1,
+ 'LAST_6_BIMONTHS': 6,
'LAST_12_MONTHS': 12,
'LAST_QUARTER': 1,
'LAST_4_QUARTERS': 4,
'LAST_SIX_MONTH': 1,
'LAST_2_SIXMONTHS': 2,
+ 'LAST_FINANCIAL_YEAR': 1,
+ 'LAST_5_FINANCIAL_YEARS': 6,
'THIS_YEAR': 1,
'LAST_YEAR': 1,
'LAST_5_YEARS': 5
@@ -152,6 +156,8 @@
'LAST_MONTH': 'reportingMonth',
'LAST_3_MONTHS': 'last3Months',
'LAST_12_MONTHS': 'last12Months',
+ 'LAST_BIMONTH': 'reportingBimonth',
+ 'LAST_6_BIMONTHS': 'last6BiMonths',
'LAST_QUARTER': 'reportingQuarter',
'LAST_4_QUARTERS': 'last4Quarters',
'LAST_SIX_MONTH': 'lastSixMonth',
@@ -167,6 +173,8 @@
'reportingMonth': 'LAST_MONTH',
'last3Months': 'LAST_3_MONTHS',
'last12Months': 'LAST_12_MONTHS',
+ 'reportingBimonth': 'LAST_BIMONTH',
+ 'last6BiMonths': 'LAST_6_BIMONTHS',
'reportingQuarter': 'LAST_QUARTER',
'last4Quarters': 'LAST_4_QUARTERS',
'lastSixMonth': 'LAST_SIX_MONTH',
@@ -197,15 +205,21 @@
west_fill_accordion_indicator: 63,
west_fill_accordion_dataelement: 63,
west_fill_accordion_dataset: 33,
- west_fill_accordion_period: 240,
+ west_fill_accordion_period: 300,
west_fill_accordion_organisationunit: 62,
west_maxheight_accordion_indicator: 400,
west_maxheight_accordion_dataelement: 400,
west_maxheight_accordion_dataset: 400,
west_maxheight_accordion_period: 513,
west_maxheight_accordion_organisationunit: 900,
- west_maxheight_accordion_organisationunitgroup: 298,
+ west_maxheight_accordion_group: 298,
west_maxheight_accordion_options: 449,
+ west_scrollbarheight_accordion_indicator: 300,
+ west_scrollbarheight_accordion_dataelement: 300,
+ west_scrollbarheight_accordion_dataset: 300,
+ west_scrollbarheight_accordion_period: 450,
+ west_scrollbarheight_accordion_organisationunit: 450,
+ west_scrollbarheight_accordion_group: 300,
east_tbar_height: 31,
east_gridcolumn_height: 30,
form_label_width: 55,
=== modified file 'dhis-2/dhis-web/dhis-web-pivot/src/main/webapp/dhis-web-pivot/app/styles/style.css'
--- dhis-2/dhis-web/dhis-web-pivot/src/main/webapp/dhis-web-pivot/app/styles/style.css 2013-03-13 19:09:29 +0000
+++ dhis-2/dhis-web/dhis-web-pivot/src/main/webapp/dhis-web-pivot/app/styles/style.css 2013-03-18 15:58:24 +0000
@@ -65,10 +65,32 @@
-webkit-text-stroke: 0.2px #888;
}
-.pt-accordion-options .x-panel-body-default {
+ /* Scrollbar */
+::-webkit-scrollbar {
+ width: 13px;
+ border: 0 none;
+}
+
+::-webkit-scrollbar-track {
+ background-color: #ddd;
+ border-radius: 1px;
+ margin: 2px 0;
+ border-right: 3px solid white;
+ border-left: 1px solid white;
+}
+
+::-webkit-scrollbar-thumb {
+ background-color: #bbb;
+ border-radius: 1px;
+ border-right: 3px solid white;
+ border-left: 1px solid white;
+}
+
+.x-scroller-vertical {
border: 0 none;
}
+
/* Disable class invisible */
.pt-invisible .x-form-item-body {
display: none;
