Fixed ACT-496 "Change action icons to links"

- Changed icons for task list
- Added new Activiti.widget.createCellButton for adding action buttons in a datatable

modules/activiti-webapp-explorer/src/main/webapp/WEB-INF/webscripts/processes/processes.get.head.ftl

-<script type="text/javascript" src="${url.context}/res/components/processes/processes.js"></script>
\ No newline at end of file
+<script type="text/javascript" src="${url.context}/res/components/processes/processes.js"></script>
+<link rel="stylesheet" type="text/css" href="${url.context}/res/components/processes/processes.css" />
+

modules/activiti-webapp-explorer/src/main/webapp/WEB-INF/webscripts/processes/processes.get.properties

 header=Processes
-label.name=Name
-label.key=Key
-label.version=Version
-label.action=Actions
-action.viewProcessDiagram=View Process Diagram
-action.startProcess=Start Process
-action.startProcessUsingForm=Start Process Using Form
+label.version=v{0}
+tooltip.key=Key: {0}
+action.viewProcessDiagram=Show Diagram
+action.startProcess=Start Instance
+action.startProcessUsingForm=Show Start Form

modules/activiti-webapp-explorer/src/main/webapp/components/processes/processes.css

+.processes .yui-pg-container {
+  margin-top: -1.5em;
+  text-align: right;
+}
+
+.processes .activiti-datalist.yui-dt .yui-dt-col-action {
+  text-align: right;
+}
+
+.processes .activiti-datalist.yui-dt .yui-dt-col-action span.first-child {
+  background: no-repeat scroll 12px 4px transparent;
+  padding-left: 22px;
+}
+
+.processes .activiti-datalist.yui-dt .yui-dt-col-action .start-process-using-form span.first-child
+{
+  background-image: url("../../images/process-start-form-icon.png");
+}
+
+.processes .activiti-datalist.yui-dt .yui-dt-col-action .start-process span.first-child
+{
+  background-image: url("../../images/process-start-icon.png");
+}
+
+.processes .activiti-datalist.yui-dt .yui-dt-col-action .view-process-diagram span.first-child
+{
+  background-image: url("../../images/process-view-icon.png");
+}
+
+
+
+

modules/activiti-webapp-explorer/src/main/webapp/components/processes/processes.js

@@ -49,7 +49,7 @@
      */
     onReady: function Processes_onReady()
     {
-      this.widgets.dataTable = new Activiti.widget.DataTable(
+      this.widgets.dataTable = new Activiti.widget.DataList(
         this.id + "-processes",
         this,
         [ { event: Activiti.event.displayProcesses, value: {} } ],
@@ -57,11 +57,10 @@
         [ this.id + "-paginator" ],
         [
           { key:"name", label: this.msg("label.name"), sortable:true },
-          { key:"key", label: this.msg("label.key"), sortable:true },
-          { key:"version",  label: this.msg("label.version"), sortable:true },
           { key:"action", label: this.msg("label.action") }
         ]
       );
+      Dom.addClass(this.id + "-processes", "activiti-list");
 
       // Needed to load data and set up other events
       if (!Activiti.event.isInitEvent(Activiti.event.displayProcesses))
@@ -91,6 +90,21 @@
       return this.services.processService.loadProcessDefinitionsURL(eventValue);
     },
 
+    /**
+     * Activiti.widget.DataTable-callback to render the name & description.
+     *
+     * @method onDataTableRenderCellName
+     * @param dataTable {Activiti.widget.DataTable} The data table that is invoking the callback
+     * @param el The cell element
+     * @param oRecord The data record
+     * @param oColumn the data table column
+     * @param oData the cell data
+     */
+    onDataTableRenderCellName: function TaskList_onDataTableRenderCellName(dataTable, el, oRecord, oColumn, oData) {
+      var task = oRecord.getData();
+      el.innerHTML = '<h3 title="' + this.msg('tooltip.key', task.key) + '">' + $html(task.name) + '  <sup class="version">' + this.msg('label.version', task.version) + '</sup></h3>';
+    },
+
     /**
      *
      * Activiti.widget.DataTable-callback that is called to render the content of each cell in the Actions row
@@ -103,18 +117,16 @@
      * @param {Object} oData
      */
     onDataTableRenderCellAction: function Processes_onDataTableRenderCellAssignee(dataTable, el, oRecord, oColumn, oData) {
-      var actions = [],
-          data = oRecord.getData();
+      var data = oRecord.getData();
+      if (data.diagramResourceName != null) {
+        Activiti.widget.createCellButton(this, el, this.msg("action.viewProcessDiagram"), "view-process-diagram", this.onActionViewProcessDiagram, data, dataTable);
+      }
       if (data.startFormResourceKey != null) {
-        actions.push('<a href="#" class="onActionStartProcessUsingForm" title="' + this.msg("action.startProcessUsingForm") + '" tabindex="0">&nbsp;</a>');
+        Activiti.widget.createCellButton(this, el, this.msg("action.startProcessUsingForm"), "start-process-using-form", this.onActionStartProcessUsingForm, data, dataTable)
       }
       else {
-        actions.push('<a href="#" class="onActionStartProcess" title="' + this.msg("action.startProcess") + '" tabindex="0">&nbsp;</a>');
-      }
-      if (data.diagramResourceName != null) {
-        actions.push('<a href="#" class="onActionViewProcessDiagram" title="' + this.msg("action.viewProcessDiagram") + '" tabindex="0">&nbsp;</a>');
+        Activiti.widget.createCellButton(this, el, this.msg("action.startProcess"), "start-process", this.onActionStartProcess, data, dataTable);
       }
-      el.innerHTML = actions.join("");
     },
 
     /**

modules/activiti-webapp-explorer/src/main/webapp/components/tasks/task-list.css

@@ -10,6 +10,11 @@
   clear: both;
 }
 
+
+.task-list .activiti-datalist table tbody tr {
+  height: 4.5em;
+}
+
 /* COLUMN WIDTHS */
 
 /* ICON */
@@ -51,7 +56,31 @@
 
 /* ACTIONS */
 
-.task-list .activiti-datalist.yui-dt .yui-dt-col-priority {
+.task-list .activiti-datalist.yui-dt .yui-dt-col-action {
   text-align: right;  
 }
 
+.task-list .activiti-datalist.yui-dt .yui-dt-col-action span.first-child {
+  background: no-repeat scroll 12px 4px transparent;
+  padding-left: 22px;
+}
+
+.task-list .activiti-datalist.yui-dt .yui-dt-col-action .complete-form span.first-child
+{
+  background-image: url("../../images/process-start-form-icon.png");
+}
+
+.task-list .activiti-datalist.yui-dt .yui-dt-col-action .complete span.first-child
+{
+  background-image: url("../../images/process-start-icon.png");
+}
+
+.task-list .activiti-datalist.yui-dt .yui-dt-col-action .claim span.first-child
+{
+  background-image: url("../../images/user-icon.png");
+}
+
+
+
+
+

modules/activiti-webapp-explorer/src/main/webapp/components/tasks/task-list.js

@@ -80,7 +80,7 @@
           { key:"id", width: 30 },
           { key:"assignee", width: 30 },
           { key:"name" },
-          { key:"priority", width: 200 }
+          { key:"action", width: 200 }
         ]
       );
       Dom.addClass(taskListId, "activiti-list");
@@ -201,44 +201,51 @@
     /**
      * Activiti.widget.DataTable-callback to render the assignee actions.
      *
-     * @method onDataTableRenderCellPriority
+     * @method onDataTableRenderCellAction
      * @param dataTable {Activiti.widget.DataTable} The data table that is invoking the callback
      * @param el The cell element
      * @param oRecord The data record
      * @param oColumn the data table column
      * @param oData the cell data
      */
-    onDataTableRenderCellPriority: function TaskList_onDataTableRenderCellPriority(dataTable, el, oRecord, oColumn, oData) {
-      var task = oRecord.getData(),
-          action = (task.assignee == Activiti.constants.USERNAME ? "complete" : "claim"),
-			 labelString = (action === "complete" && task.formResourceKey !== null ? "completeForm" : action);
-      var actionButton = new YAHOO.widget.Button({
-        label: this.msg("task.action." + labelString),
-        id: Activiti.util.generateDomId(),
-        container: el
-      });
-      actionButton.on("click", this.onTaskActionClick, {
-        action: action,
-        taskId: task.id,
-        button: actionButton
-      }, this);
+    onDataTableRenderCellAction: function TaskList_onDataTableRenderCellAction(dataTable, el, oRecord, oColumn, oData) {
+      var data = oRecord.getData();
+      if (data.assignee == Activiti.constants.USERNAME) {
+        if (data.formResourceKey !== null) {
+          Activiti.widget.createCellButton(this, el, this.msg("task.action.completeForm"), "complete-form", this.onActionCompleteForm, data, dataTable);
+        }
+        else {
+          Activiti.widget.createCellButton(this, el, this.msg("task.action.complete"), "complete", this.onActionComplete, data, dataTable);
+        }
+      }
+      else {
+        Activiti.widget.createCellButton(this, el, this.msg("task.action.claim"), "claim", this.onActionClaim, data, dataTable);
+      }
     },
 
     /**
-     * Called when an task action button has been clicked
+     * Called when the complete task action button has been clicked
      *
-     * @method onTaskActionClick
-     * @param e The click event
-     * @param obj The callback object with task information
+     * @method onActionComplete
      */
-    onTaskActionClick: function TaskList_onTaskActionClick(e, obj) {
-		if (obj.action == "complete") {
-        new Activiti.widget.CompleteTaskForm(this.id + "-completeTaskForm", obj.taskId, obj.button);
-      }
-      else if (obj.action == "claim") {
-        obj.button.set("disabled", true);
-        this.services.taskService.claimTask(obj.taskId);
-      }
+    onActionComplete: function TaskList_onActionComplete(data, dataTable, button) {
+      button.set("disabled", true);
+      this.services.taskService.completeTask(data.id, {}, {});
+    },
+
+    /**
+     * Called when a complete task form action button has been clicked
+     */
+    onActionCompleteForm: function TaskList_onActionCompleteForm(data, dataTable, button) {
+      new Activiti.widget.CompleteTaskForm(this.id + "-completeTaskForm", data.id, button);
+    },
+
+    /**
+     * Called when a claim task action button has been clicked
+     */
+    onActionClaim: function TaskList_onActionClaim(data, dataTable, button) {
+      button.set("disabled", true);
+      this.services.taskService.claimTask(data.id);
     }
   });
 

modules/activiti-webapp/src/main/webapp/css/activiti-core.css

@@ -80,6 +80,13 @@ label,
   display: none;
 }
 
+sup.version {
+  background-color: #CCCCCC;
+  border: 1px solid #AAAAAA;
+  font-size: 0.65em;
+  padding: 0 0.3em;
+  margin-left: 0.4em;
+}
 /* LOGIN */
 
 #login label {
@@ -329,13 +336,16 @@ li.filter, li.table {
   border: none;
 }
 
-#Activiti .activiti-datalist table thead {
-  display: none;
+#Activiti .activiti-datalist table tbody tr {
+  min-height: 3.4em;
 }
 
-#Activiti .activiti-datalist table tbody tr
-{
-  height: 4.5em;  
+#Activiti .activiti-datalist table tbody td .yui-dt-liner {
+  margin-top: 0.2em;
+}
+
+#Activiti .activiti-datalist table thead {
+  display: none;
 }
 
 #Activiti .activiti-datalist table tbody tr td,
@@ -352,6 +362,10 @@ li.filter, li.table {
   border-top: 1px solid #d4d4d4;
 }  
 
+#Activiti .activiti-datalist table tbody tr td .yui-button {
+  margin: auto 0.25em auto 0.5em;
+}
+
 /* ACTIVITI FORMS */
 
 #Activiti .mask {

modules/activiti-webapp/src/main/webapp/js/activiti-widget.js

@@ -11,7 +11,7 @@ Activiti.widget = Activiti.widget || {};
  * All supplied object parameters are passed to the button constructor
  * e.g. Alfresco.util.createButton(this, "OK", this.onOK, {type: "submit"});
  *
- * @method Alfresco.util.createYUIButton
+ * @method Alfresco.util.createButton
  * @param component {object} Component containing button; must have "id" parameter
  * @param name {string} Dom element ID of markup that button is created from {p_scope.id}-{name}
  * @param callback {function} If supplied, registered with the button's click event
@@ -89,6 +89,36 @@ Activiti.widget.createButton = function(component, name, callback, obj, el)
   return button;
 };
 
+/**
+ * Wrapper to create a YUI Button with common attributes.
+ * All supplied object parameters are passed to the button constructor
+ * e.g. Alfresco.util.createButton(this, "OK", this.onOK, {type: "submit"});
+ *
+ * @method Alfresco.util.createCellButton
+ * @return {YAHOO.widget.Button} New Button instance
+ * @static
+ */
+Activiti.widget.createCellButton = function(component, cell, label, css, method, data, dataTable)
+{
+  var cellButton = new YAHOO.widget.Button({
+    label: label,
+    id: Activiti.util.generateDomId(),
+    container: cell
+  });
+  cellButton.addClass(css);
+  cellButton.on("click", function(e, obj)
+  {
+    obj.method.call(this, obj.data, obj.dataTable, obj.button, obj.cell);
+  },
+  {
+    cell: cell, 
+    data: data,
+    dataTable: dataTable,
+    button: cellButton,
+    method: method
+  }, component);
+  return cellButton;
+};
 
 /**
  * Wrapper to create a YUI Dialog with common attributes.