Changeset 1912


Ignore:
Timestamp:
Mar 20, 2013, 1:47:43 PM (9 years ago)
Author:
Nicklas Nordborg
Message:

Fixes #470: Add 'Print version' functionality to the 'Case summary' feature

This was a bit more complex than expected due to using lots of internal css styles. All style definitions for the case summary have been moved to a separate style sheet and the print preview function now has an option to also include an extra stylesheet.

Needed to add a several specific style definitions that apply to printing only. The main page has also been redesigned to a one-column layout that is switched to a two-column layout depending on the width of the browser window. Printing always uses a one-column layout in portrait mode.

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

Legend:

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

    r1907 r1912  
    6464<base:head scripts="ajax.js" styles="path.css">
    6565  <link rel="stylesheet" type="text/css" href="css/reggie.css">
     66  <link rel="stylesheet" type="text/css" href="css/case_summary.css">
    6667  <script language="JavaScript" src="reggie.js" type="text/javascript" charset="UTF-8"></script>
    6768
     
    562563  }
    563564}
     565
     566function goPrint()
     567{
     568  var printNote = '<b>Note!</b> For better printing set page orientation to <i>portrait</i>.<br>';
     569  printNote += ' You may have to <i>scale down</i> to fit everything on the width of the page.';
     570  openPrintWindow('<%=ID%>', 'all-content', 'Case summary - <%=HTML.encodeTags(caseName)%>', 'portrait', printNote, 'case_summary.css');
     571}
     572
    564573</script>
    565574<style>
    566 @media print
    567 {
    568   .noprint, #menubar, #path-reggie
    569   {
    570     display: none;
    571   }
    572  
    573   #all-info
    574   {
    575     top: 0;
    576     border-left: 2px solid #A0A0A0;
    577     border-right: 2px solid #A0A0A0;
    578     border-bottom: 2px solid #A0A0A0;
    579   }
    580  
    581   #path-case-summary:before
    582   {
    583     content: '';
    584     padding: 0;
    585   }
    586 }
    587 
    588 @media screen
    589 {
    590   #all-info
    591   {
    592     <%=fullPage ? "top: 2.5em;" : ""%>
    593   }
    594 }
    595 
    596 .info-section
    597 {
    598   border-bottom: 2px solid #A0A0A0;
    599   background-color: #E8E8E8;
    600 }
    601 
    602 .info-section div
    603 {
    604   margin-left: 13em;
    605   background-color: #FFFFFF;
    606   border-left: 1px solid #A0A0A0;
    607   overflow: auto;
    608 }
    609 
    610 .info-table
    611 {
    612   width: 100%;
    613 }
    614 
    615 .info-table tr.dynamic-column
    616 {
    617   display: none;
    618 }
    619 
    620 .info-table th
    621 {
    622   position: absolute;
    623   left: 0;
    624   text-align: left;
    625   border-top: 1px dotted #A0A0A0;
    626   padding: 1px 0.25em 2px 1em;
    627   width: 11.75em;
    628   font-weight: normal;
    629   vertical-align: top;
    630 }
    631 
    632 .info-table thead th, .info-table tbody tr.subtitle th
    633 {
    634   font-weight: bold;
    635   color: #333377;
    636   padding-left: 0.25em;
    637   width: 12.5em;
    638 }
    639 
    640 .info-table thead:first-child th
    641 {
    642   border-top: 1px dotted transparent;
    643 }
    644 
    645 .info-table td
    646 {
    647   background-color: #FFFFFF;
    648   padding: 2px 0.25em 2px 0.25em;
    649   vertical-align: top;
    650 }
    651 
    652 .info-table td.fixed-column
    653 {
    654   width: 13em;
    655 }
    656 
    657 .info-table td.extra-column
    658 {
    659   border-left: 1px dotted #A0A0A0;
    660 }
    661 
    662 .info-table tr:hover
    663 {
    664   outline: 1px solid #2288AA !important;
    665 }
    666 
    667 .info-table tr:hover td
    668 {
    669   background-color: #F8F8E8 !important;
    670 }
    671 
    672 .hide-confidential .confidential
    673 {
    674   display: none;
    675 }
    676 
    677 tr.confidential th
    678 {
    679   background-color: #FFC8C8; 
    680 }
    681 
    682 tr.confidential td
    683 {
    684   background-color: #FFD8D8;
    685 }
    686 
    687 .more-info:after
    688 {
    689   content: url('images/info.png');
    690   vertical-align: bottom;
    691 }
    692 
    693 .filelink
    694 {
    695   margin-left: 0.25em;
    696 }
    697 
    698 .warning
    699 {
    700   color: #E80000;
    701   font-weight: bold;
    702 }
    703 
    704 .warning:before
    705 {
    706   content: url('images/warning_small.png');
    707   padding-right: 3px;
    708   vertical-align: -2px;
    709 }
    710 
    711 .no-info
    712 {
    713   font-weight: bold;
    714   color: #999999;
    715   font-style: italic;
    716 }
    717 
    718 tr.comment td
    719 {
    720   font-style: italic;
    721 }
    722 
    723 .invisible
    724 {
    725   color: transparent;
    726 }
    727 
    728 tr:hover .invisible
    729 {
    730   color: inherit;
    731 }
    732575
    733576</style>
     
    735578
    736579<base:body onload="init()">
    737 
    738   <p:path style="<%=fullPage ? "" : "display: none;"%>"><p:pathelement id="path-reggie"
     580  <div id="all-content">
     581  <p:path style="<%=fullPage ? "" : "display: none;"%>"><p:pathelement id="path-reggie" clazz="noprint"
    739582    title="Reggie" href="<%="index.jsp?ID="+ID%>"
    740583    /><p:pathelement id="path-case-summary" title="<%="Case summary - " + HTML.encodeTags(caseName)%>"
     
    747590  {
    748591    %>
    749     <div class="absolutefull filled noprint" style="height: 2.5em; border-top: 2px solid #A0A0A0;">
    750       <table >
     592    <div class="filled noprint" id="toolbar">
     593      <table>
    751594      <tr>
    752595        <th style="padding: 0.5em 0.75em 0.5em 0.75em;">Find another case</th>
     
    766609        }
    767610        %>
     611        <th style="padding-left: 0.5em; padding-right: 0.5em; border-right: 1px dotted #A0A0A0;">
     612          <span id="printButton" class="link" onclick="goPrint()"><img src="images/print.png" style="padding-right: 0.5em;">Print version&hellip;</span>
     613        </th>
    768614      </tr>
    769615      </table>
     
    772618  }
    773619  %>
    774   <div class="absolutefull hide-confidential" id="all-info" style="display: none; border-top: 2px solid #A0A0A0">
    775     <div class="absolutefull" style="width: 50%;">
    776       <div class="absolutefull" style="border-right: 1px solid #A0A0A0;">
     620  <div class="hide-confidential" id="all-info" style="display: none;">
     621    <div id="left-column">
     622      <div>
    777623        <%
    778624        if (sc.getActiveProjectId() == 0)
     
    965811      </div>
    966812    </div>
    967    
    968     <div class="absolutefull" style="width: 50%; left: auto;">
    969       <div class="absolutefull" style="border-left: 1px solid #A0A0A0;">
    970 
     813    <div id="right-column">
     814      <div>
    971815        <div class="info-section" id="histology-info">
    972816          <div>
     
    1124968      </div>
    1125969    </div>
    1126    
    1127970  </div>
    1128971  </form>
     
    1131974
    1132975  </div>
    1133  
     976  </div>
    1134977</base:body>
    1135978</base:page>
  • extensions/net.sf.basedb.reggie/trunk/resources/css/printable.css

    r1880 r1912  
    3333  .paper
    3434  {
     35    position: absolute;
     36    top: 1em;
     37    left: 1em;
    3538    width: 210mm;
    3639    padding: 1em;
    37     margin: 1em;
     40    margin: 0;
    3841    background-color: #FFFFFF;
    3942    border: 1px dashed #A0A0A0;
    40    
    4143  }
    4244 
     
    152154  }
    153155 
     156  #printarea .noprint
     157  {
     158    display: none;
     159  }
    154160}
    155161
  • extensions/net.sf.basedb.reggie/trunk/resources/print_template.jsp

    r1859 r1912  
    1717final SessionControl sc = Base.getExistingSessionControl(request, true);
    1818final String ID = sc.getId();
     19final String extraStyles = request.getParameter("extraStyles");
    1920%>
    2021<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
     
    2526  <link rel="stylesheet" type="text/css" href="css/reggie.css">
    2627  <link rel="stylesheet" type="text/css" href="css/printable.css">
     28  <%
     29  if (extraStyles != null)
     30  {
     31    %>
     32    <link rel="stylesheet" type="text/css" href="css/<%=extraStyles%>">
     33    <%
     34  }
     35  %>
    2736  <script>
    2837  function init()
  • extensions/net.sf.basedb.reggie/trunk/resources/reggie.js

    r1897 r1912  
    391391    the browser for optimal printing (eg. set to landscape and scale to 75%)
    392392*/
    393 function openPrintWindow(ID, printElementId, pageTitle, pageOrientation, printNote)
     393function openPrintWindow(ID, printElementId, pageTitle, pageOrientation, printNote, extraStyles)
    394394{
    395395  // Default width/height is for 'portrait' orientation
     
    443443    };
    444444
    445  
     445  var url = 'print_template.jsp?ID='+ID+'&callback=finalizePrint';
     446  if (extraStyles) url += '&extraStyles='+extraStyles;
    446447  // Open the print-window
    447   var printWin = window.open('print_template.jsp?ID='+ID+'&callback=finalizePrint', 'PrintWindow', 'width='+width+',height='+height+',toolbar=yes,location=no,directories=no,status=no,menubar=yes,scrollbars=yes,resizable=yes');
     448  var printWin = window.open(url, 'PrintWindow', 'width='+width+',height='+height+',toolbar=yes,location=no,directories=no,status=no,menubar=yes,scrollbars=yes,resizable=yes');
    448449
    449450}
Note: See TracChangeset for help on using the changeset viewer.