------------------------------------------------------------ revno: 13034 committer: Morten Olav Hansen <morte...@gmail.com> branch nick: dhis2 timestamp: Wed 2013-11-27 13:48:33 +0100 message: replace icons with contextual menu, wip (only implemented in concept list) modified: dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/css/green/green.css dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/css/india/india.css dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/css/light_blue/light_blue.css dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/css/vietnam/vietnam.css dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-datadictionary/src/main/webapp/dhis-web-maintenance-datadictionary/javascript/concept.js dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-datadictionary/src/main/webapp/dhis-web-maintenance-datadictionary/multidimensional/concept.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/green/green.css' --- dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/css/green/green.css 2013-11-12 17:09:25 +0000 +++ dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/css/green/green.css 2013-11-27 12:48:33 +0000 @@ -191,6 +191,49 @@ } /*----------------------------------------------------------------------------*/ +/* Context Menu */ +/*----------------------------------------------------------------------------*/ + +.contextMenu { + position : absolute; + font-size : 9pt; + color : #000; + border : 1px solid #ddd; + padding-left : 4px; + padding-right : 4px; + width : 189px; + max-height : 610px; + overflow-y : auto; + background-color : #f7f7f7; + display : none; + z-index : 10; + filter : alpha(opacity=94); + opacity : 0.94; + border-bottom-left-radius : 3px; + border-bottom-right-radius : 3px; + box-shadow : #ccc 0px 1px 1px 0px; +} + +.contextMenuItems { + list-style-type : none; + padding : 0; + margin : 10px 0; +} + +.contextMenuItems a { + display : block; + padding : 10px 10px; + color : #000; + border-radius : 3px; + cursor : pointer; +} + +.contextMenuItems a:hover { + text-decoration : none; + background-color : #eee; +} + +/*----------------------------------------------------------------------------*/ /* Left bar */ /*----------------------------------------------------------------------------*/ === modified file 'dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/css/india/india.css' --- dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/css/india/india.css 2013-11-12 17:09:25 +0000 +++ dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/css/india/india.css 2013-11-27 12:48:33 +0000 @@ -191,6 +191,49 @@ } /*----------------------------------------------------------------------------*/ +/* Context Menu */ +/*----------------------------------------------------------------------------*/ + +.contextMenu { + position : absolute; + font-size : 9pt; + color : #000; + border : 1px solid #ddd; + padding-left : 4px; + padding-right : 4px; + width : 189px; + max-height : 610px; + overflow-y : auto; + background-color : #f7f7f7; + display : none; + z-index : 10; + filter : alpha(opacity=94); + opacity : 0.94; + border-bottom-left-radius : 3px; + border-bottom-right-radius : 3px; + box-shadow : #ccc 0px 1px 1px 0px; +} + +.contextMenuItems { + list-style-type : none; + padding : 0; + margin : 10px 0; +} + +.contextMenuItems a { + display : block; + padding : 10px 10px; + color : #000; + border-radius : 3px; + cursor : pointer; +} + +.contextMenuItems a:hover { + text-decoration : none; + background-color : #eee; +} + +/*----------------------------------------------------------------------------*/ /* Left bar */ /*----------------------------------------------------------------------------*/ === modified file 'dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/css/light_blue/light_blue.css' --- dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/css/light_blue/light_blue.css 2013-11-12 17:09:25 +0000 +++ dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/css/light_blue/light_blue.css 2013-11-27 12:48:33 +0000 @@ -191,6 +191,49 @@ } /*----------------------------------------------------------------------------*/ +/* Context Menu */ +/*----------------------------------------------------------------------------*/ + +.contextMenu { + position : absolute; + font-size : 9pt; + color : #000; + border : 1px solid #ddd; + padding-left : 4px; + padding-right : 4px; + width : 189px; + max-height : 610px; + overflow-y : auto; + background-color : #f7f7f7; + display : none; + z-index : 10; + filter : alpha(opacity=94); + opacity : 0.94; + border-bottom-left-radius : 3px; + border-bottom-right-radius : 3px; + box-shadow : #ccc 0px 1px 1px 0px; +} + +.contextMenuItems { + list-style-type : none; + padding : 0; + margin : 10px 0; +} + +.contextMenuItems a { + display : block; + padding : 10px 10px; + color : #000; + border-radius : 3px; + cursor : pointer; +} + +.contextMenuItems a:hover { + text-decoration : none; + background-color : #eee; +} + +/*----------------------------------------------------------------------------*/ /* Left bar */ /*----------------------------------------------------------------------------*/ === modified file 'dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/css/vietnam/vietnam.css' --- dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/css/vietnam/vietnam.css 2013-11-12 17:09:25 +0000 +++ dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/css/vietnam/vietnam.css 2013-11-27 12:48:33 +0000 @@ -191,6 +191,49 @@ } /*----------------------------------------------------------------------------*/ +/* Context Menu */ +/*----------------------------------------------------------------------------*/ + +.contextMenu { + position : absolute; + font-size : 9pt; + color : #000; + border : 1px solid #ddd; + padding-left : 4px; + padding-right : 4px; + width : 189px; + max-height : 610px; + overflow-y : auto; + background-color : #f7f7f7; + display : none; + z-index : 10; + filter : alpha(opacity=94); + opacity : 0.94; + border-bottom-left-radius : 3px; + border-bottom-right-radius : 3px; + box-shadow : #ccc 0px 1px 1px 0px; +} + +.contextMenuItems { + list-style-type : none; + padding : 0; + margin : 10px 0; +} + +.contextMenuItems a { + display : block; + padding : 10px 10px; + color : #000; + border-radius : 3px; + cursor : pointer; +} + +.contextMenuItems a:hover { + text-decoration : none; + background-color : #eee; +} + +/*----------------------------------------------------------------------------*/ /* Left bar */ /*----------------------------------------------------------------------------*/ === modified file 'dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-datadictionary/src/main/webapp/dhis-web-maintenance-datadictionary/javascript/concept.js' --- dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-datadictionary/src/main/webapp/dhis-web-maintenance-datadictionary/javascript/concept.js 2011-09-27 12:08:17 +0000 +++ dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-datadictionary/src/main/webapp/dhis-web-maintenance-datadictionary/javascript/concept.js 2013-11-27 12:48:33 +0000 @@ -2,19 +2,82 @@ // View details // ----------------------------------------------------------------------------- -function showConceptDetails( conceptId ) -{ - jQuery.post( 'getConcept.action', { id : conceptId }, function( json ) { - setInnerHTML( 'nameField', json.concept.name ); - showDetails(); - }); -} - -// ----------------------------------------------------------------------------- -// Remove category concept -// ----------------------------------------------------------------------------- - -function removeConcept( conceptId, conceptName ) -{ - removeItem( conceptId, conceptName, i18n_confirm_delete, 'removeConcept.action' ); +/** + * Tried to find a function with fnName in window scope. + * + * TODO: extend to search for more scopes + * + * @param fnName Name of function to search for + * @returns Function + */ +function findFunction( fnName ) { + if( typeof window[fnName] !== 'function' ) { + throw new Error('target-fnName \'' + fnName + '\' does not point to a valid function.') + } + + return window[fnName]; +} + +$(function() { + var $list = $('#list'); + var $contextMenu = $('.contextMenu'); + var $contextMenuItems = $('.contextMenuItems'); + + $contextMenuItems.on('touchend click', 'li', function(e) { + var context = { + 'id': $contextMenu.data('id'), + 'uid': $contextMenu.data('uid'), + 'name': $contextMenu.data('name') + }; + + var $target = $(e.target); + var targetFn = $target.data('target-fn'); + var fn = findFunction(targetFn); + + $contextMenu.hide(); + fn(context); + }); + + $list.on('click', 'td', function( e ) { + $contextMenu.show(); + $contextMenu.css({left: e.pageX, top: e.pageY}); + + var $target = $(e.target); + $contextMenu.data('id', $target.data('id')); + $contextMenu.data('uid', $target.data('uid')); + $contextMenu.data('name', $target.data('name')); + + return false; + }); + + $(document).on('touchend click', function( e ) { + if( $contextMenu.is(":visible") ) { + $contextMenu.hide(); + } + + $contextMenu.removeData('id'); + }); +}); + +// ----------------------------------------------------------------------------- +// Context Menu Actions +// ----------------------------------------------------------------------------- + +function logContext( context ) { + console.log('context: ', context); +} + +function showUpdateConcept( context ) { + location.href = 'showUpdateConceptForm.action?id=' + context.id; +} + +function showConceptDetails( context ) { + $.post('getConcept.action', { id: context.id }, function( json ) { + setInnerHTML('nameField', json.concept.name); + showDetails(); + }); +} + +function removeConcept( context ) { + removeItem(context.id, context.name, i18n_confirm_delete, 'removeConcept.action'); } === modified file 'dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-datadictionary/src/main/webapp/dhis-web-maintenance-datadictionary/multidimensional/concept.vm' --- dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-datadictionary/src/main/webapp/dhis-web-maintenance-datadictionary/multidimensional/concept.vm 2013-06-29 14:16:34 +0000 +++ dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-datadictionary/src/main/webapp/dhis-web-maintenance-datadictionary/multidimensional/concept.vm 2013-11-27 12:48:33 +0000 @@ -3,13 +3,21 @@ tableSorter( 'listTable' ); }); - var i18n_confirm_delete = '$encoder.jsEscape( $i18n.getString( "confirm_delete_concept" ) , "'")'; + var i18n_confirm_delete = '$encoder.jsEscape( $i18n.getString( "confirm_delete_concept" ) , "'")'; var i18n_adding_concept_failed = '$encoder.jsEscape( $i18n.getString( "adding_concept_failed" ) , "'")'; var i18n_saving_concept_failed = '$encoder.jsEscape( $i18n.getString( "saving_concept_failed" ) , "'")'; </script> <h3>$i18n.getString( "concept_management" ) #openHelp( "concept" )</h3> +<div class="contextMenu"> + <ul class="contextMenuItems"> + <li><a data-target-fn="showUpdateConcept" href="#">$i18n.getString( "edit" )</a></li> + <li><a data-target-fn="removeConcept" href="#">$i18n.getString( "remove" )</a></li> + <li><a data-target-fn="showConceptDetails" href="#">$i18n.getString( "show_details" )</a></li> + </ul> +</div> + <table class="mainPageTable"> <tr> <td style="vertical-align:top"> @@ -22,22 +30,28 @@ <table class="listTable" id="listTable"> <col/> <col width="96px"/> - <thead> + <thead> <tr> <th>$i18n.getString( "name" )</th> + <!-- <th class="{sorter: false}">$i18n.getString( "operations" )</th> + --> </tr> - </thead> + </thead> <tbody id="list"> #foreach( $concept in $concepts ) #if( $concept.id != $defaultConcept.id ) - <tr id="tr${concept.id}"> + <tr id="tr${concept.id}" style="height: 40px;"> + <td data-id="$concept.id" data-uid="$concept.uid" data-name="$encoder.htmlEncode( $concept.name )">$encoder.htmlEncode( $concept.name )</td> + + <!-- <td onclick="javascript:showConceptDetails( $concept.id )">$encoder.htmlEncode( $concept.name )</td> <td style="text-align:right"> <a href="showUpdateConceptForm.action?id=$concept.id" title="$i18n.getString( 'edit' )"><img src="../images/edit.png" alt="$i18n.getString( 'edit' )"/></a> <a href="javascript:removeConcept( $concept.id, '$encoder.jsEncode( $concept.name )' )" title="$i18n.getString( 'remove' )"><img src="../images/delete.png" alt="$i18n.getString( 'remove' )"/></a> <a href="javascript:showConceptDetails( $concept.id )" title="$i18n.getString( 'show_details' )"><img src="../images/information.png" alt="$i18n.getString( 'show_details' )"/></a> </td> + --> </tr> #end #end
_______________________________________________ Mailing list: https://launchpad.net/~dhis2-devs Post to : dhis2-devs@lists.launchpad.net Unsubscribe : https://launchpad.net/~dhis2-devs More help : https://help.launchpad.net/ListHelp