dhis2-devs team mailing list archive
-
dhis2-devs team
-
Mailing list archive
-
Message #26308
[Branch ~dhis2-devs-core/dhis2/trunk] Rev 13034: replace icons with contextual menu, wip (only implemented in concept list)
------------------------------------------------------------
revno: 13034
committer: Morten Olav Hansen <mortenoh@xxxxxxxxx>
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
