Changeset 5021


Ignore:
Timestamp:
Oct 11, 2018, 9:23:33 AM (4 years ago)
Author:
Nicklas Nordborg
Message:

References #1067: Highlight related items in Case summary

The "root item" (=the item that was click on) now get yellowish color and an arrow marker icon.

Implemented automatic scrolling (sideways) in tables were the highlighted item is not currently visible.

Location:
extensions/net.sf.basedb.reggie/trunk/resources
Files:
1 added
2 edited

Legend:

Unmodified
Added
Removed
  • extensions/net.sf.basedb.reggie/trunk/resources/css/case_summary.css

    r5020 r5021  
    220220}
    221221
     222.info-table td.chained.rootitem
     223{
     224  background-color: #FFF880;
     225}
     226
     227.info-table td.chained.rootitem::before
     228{
     229  content: url('../images/marked.png');
     230}
     231
    222232.info-table tbody td.yellow-specimen
    223233{
     
    249259{
    250260  background-color: #A0FFA0 !important;
     261}
     262
     263.info-table tr:hover td.chained.rootitem
     264{
     265  background-color: #F0F000 !important;
    251266}
    252267
  • extensions/net.sf.basedb.reggie/trunk/resources/reports/case-summary.js

    r5019 r5021  
    743743    {
    744744      var targetList = highlight.split(',');
    745       cs.highlightChainedItems(targetList, targetList[0]);
     745      var rootItem = cs.highlightChainedItems(targetList, targetList[0]);
     746      if (rootItem)
     747      {
     748        Doc.addClass(rootItem.parentNode, 'rootitem');
     749      }
    746750    }
    747751  }
     
    752756    var targetList = Data.get(event.currentTarget, 'chain-id').split(',');
    753757    cs.highlightChainedItems(targetList);
     758    Doc.addClass(event.currentTarget.parentNode, 'rootitem');
    754759  }
    755760 
     
    762767  {
    763768    // 'targetList' is a possible list of 'chain-id' values that should be highlighted
     769    // 'autoScroll' is used as a marker so that that only the first <td> within the same <table> is scrolled into view
     770    var autoScroll = new Date().getTime();
     771    var rootItem = null;
    764772    for (var itemNo = 0; itemNo < chainedItems.length; itemNo++)
    765773    {
     
    768776      var inChain = cs.hasCommonElement(targetList, chainId);
    769777      Doc.addOrRemoveClass(item.parentNode, 'chained', inChain);
     778      Doc.removeClass(item.parentNode, 'rootitem');
     779     
     780      if (inChain)
     781      {
     782        // Try to scroll the highlighted item into view
     783        // We need to get the <td> aligned left or right in the <div> that is the
     784        // parent to the <table>
     785        var td = item.parentNode;
     786        var tbl = td.parentNode.parentNode.parentNode; // Moving: td -> tr -> thead -> table
     787        var div = tbl.parentNode;
     788        if (div.autoScroll != autoScroll)
     789        {
     790          if (td.offsetLeft < div.scrollLeft)
     791          {
     792            div.scrollLeft = td.offsetLeft;
     793            div.autoScroll = autoScroll;
     794          }
     795          else if (td.offsetLeft + td.offsetWidth > div.scrollLeft + div.offsetWidth)
     796          {
     797            div.scrollLeft = td.offsetLeft + td.offsetWidth - div.offsetWidth;
     798            div.autoScroll = autoScroll;
     799          }
     800        }
     801      }
     802     
     803      // This handles vertical scrolling to the root item
    770804      if (scrollTo && chainId.indexOf(scrollTo) >= 0)
    771805      {
    772         item.scrollIntoView();
     806        item.parentNode.scrollIntoView();
    773807        scrollTo = null;
    774       }
    775     }
     808        rootItem = item;
     809      }
     810    }
     811    return rootItem;
    776812  }
    777813 
Note: See TracChangeset for help on using the changeset viewer.