Changeset 5955


Ignore:
Timestamp:
Feb 13, 2012, 3:36:42 PM (10 years ago)
Author:
Nicklas Nordborg
Message:

References #1655: GUI improvements

"Test with file" dialog.

Location:
trunk/www
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/www/common/plugin/parse_file.jsp

    r5903 r5955  
    5151<%@ taglib prefix="m" uri="/WEB-INF/menu.tld" %>
    5252<%@ taglib prefix="t" uri="/WEB-INF/tab.tld" %>
     53<%@ taglib prefix="tbl" uri="/WEB-INF/table.tld" %>
    5354
    5455<%
     
    167168  }
    168169  %>
    169   <base:page type="popup" title="Test with file">
     170  <base:page type="iframe" title="Test with file">
    170171  <base:head scripts="tabcontrol.js" styles="table.css,tabcontrol.css">
    171172    <script language="JavaScript">
     
    248249    </script>
    249250  </base:head>
    250   <base:body onload="window.parent.adjustIFrameSize()" style="padding-left: 0px;">
    251   <t:tabcontrol id="parsedFile"
    252     contentstyle="<%="height: "+(int)(scale*400)+"px;"%>" autoheight="false">
     251  <base:body>
     252  <t:tabcontrol
     253    id="parsedFile"
     254    subclass="absolutefull dialogtabcontrol bottomborder"
     255    position="top"
     256    >
    253257  <t:tab
    254258    id="filedata"
    255259    title="File data"
    256260    >
     261    <div style="padding-top: 0.5em;">
    257262    <%
    258263    if (file == null)
    259264    {
    260265      %>
    261       <br><br>
    262       <div align="center">
    263       <div class="error" style="width: 50%; font-size: larger; font-weight: bold;">
    264         <br>
     266      <div class="messagecontainer error" style="margin-top: 0px;">
    265267        No file selected. Please select a file to test above.
    266         <br><br>
    267       </div>
    268268      </div>
    269269      <%
     
    274274      {
    275275        %>
    276         <div class="error">
    277         <table align="center"><tr><td>
     276        <div class="messagecontainer error">
    278277        <b>Could not parse the file <code><%=HTML.encodeTags(path)%></code></b>
    279278        <ol>
    280279        <li><%=Values.getString(messages, "<li>", true)%>
    281280        </ol>
    282         </td></tr></table>
    283281        </div>
    284282        <%
    285283      }
    286284      %>
    287       <table class="itemlist" border="0" cellspacing="0" cellpadding="0" style="padding-right: 1px;">
    288       <tr>
    289         <td class="data">
    290         <table border="0" cellspacing="0" cellpadding="0">
    291        
    292         <tr>
    293           <th class="columnheader">Line</th>
    294           <th class="columnheader">Columns</th>
    295           <th class="columnheader">Type</th>
    296           <th class="columnheader">Use as</th>
    297           <th class="columnheader" colspan="99">File data</th>
    298         </tr>
     285      <div class="itemlist fulltable">
     286        <div class="data" style="top: 0px; margin-top:0px;">
     287        <table>
     288          <thead>
     289          <tr>
     290            <th>Line</th>
     291            <th>Columns</th>
     292            <th>Type</th>
     293            <th>Use as</th>
     294            <th colspan="99">File data</th>
     295          </tr>
     296          </thead>
     297          <tbody class="rows">
    299298     
    300299        <%
     
    322321          }
    323322          %>
    324           <tr class="<%=rowclass[rowClassIndex]%>">
     323          <tr class="<%=rowclass[rowClassIndex]%> highlight">
    325324            <td class="cell"><%=line.lineNo()%></td>
    326325            <td class="cell"><%=data.length%></td>
     
    402401        }
    403402        %>
     403        </tbody>
     404        </table>
    404405        <script language="JavaScript">
    405406        <%
     
    421422        %>
    422423        </script>
    423         </table>
    424         </td>
    425       </tr>
    426       </table>
     424      </div>
     425      </div>
    427426      <%
    428427    }
    429428    %>
     429      </div>
    430430    </t:tab>
    431431
     
    492492      </script>
    493493      <form name="mappings">
    494       <table>
    495       <tr>
    496       <td>
    497       <b>Mapping style:</b>
    498       <input type="radio" name="expressionStyle" id="expressionStyleSimple" value="1" checked><label for="expressionStyleSimple">Simple</label>
    499       <input type="radio" name="expressionStyle" id="expressionStyleExpression" value="2"><label for="expressionStyleExpression">Expression</label>
    500       </td>
    501       <%
    502       if (matches != null)
    503       {
    504         %>
    505         <td>
    506         <base:button onclick="setFuzzyMatches()" title="Auto generate"
    507           tooltip="Generate mappings by finding the best match between Property and File column"/>
    508         </td>
    509         <td>
    510           Similarity score: <input type="text"
    511           name="similarity" value="0.85" onkeypress="return Numbers.numberOnly(event)">
    512           (0 = bad; 1 = good)
    513         </td>
    514         <%
    515       }
    516       %>
    517       </tr>
    518       </table>
    519 
    520       <table class="itemlist" border="0" cellspacing="0" cellpadding="0">
    521       <tr>
    522         <td class="data">
    523         <table border="0" cellspacing="0" cellpadding="0">
     494      <div class="absolutefull" style="height: 2em;">
     495        <table>
    524496        <tr>
    525           <th class="columnheader">Property</th>
    526           <th class="columnheader">Mapping expression</th>
    527           <th class="columnheader">File columns</th>
     497          <td style="padding-left: 2px;">
     498            <b>Mapping style:</b>
     499            <input type="radio" name="expressionStyle" id="expressionStyleSimple" value="1" checked><label for="expressionStyleSimple">Simple</label>
     500            <input type="radio" name="expressionStyle" id="expressionStyleExpression" value="2"><label for="expressionStyleExpression">Expression</label>
     501          </td>
     502          <%
     503          if (matches != null)
     504          {
     505            %>
     506            <td style="padding-left: 4px;">
     507            <base:button onclick="setFuzzyMatches()" title="Auto generate"
     508              tooltip="Generate mappings by finding the best match between Property and File column"/>
     509            </td>
     510            <td style="padding-left: 4px; width: 50%;">
     511              Similarity score: <input type="text"
     512              name="similarity" value="0.85" onkeypress="return Numbers.numberOnly(event)">
     513              (0 = bad; 1 = good)
     514            </td>
     515            <%
     516          }
     517          %>
    528518        </tr>
     519        </table>
     520      </div>
     521     
     522      <div class="absolutefull topborder" style="top: 2em;">
     523
     524        <table class="fullform input100">
     525        <tbody class="sectionheader">
     526          <tr>
     527            <th class="rightborder">Property</th>
     528            <th class="rightborder">Mapping expression</th>
     529            <th>File columns</th>
     530          </tr>
     531        </tbody>
    529532        <%
    530533        for (String name : mappingParameters)
     
    532535          %>
    533536          <tr>
    534             <td class="cell"><%=HTML.encodeTags(request.getParameter("mapping." + name + ".label"))%></td>
     537            <th><%=HTML.encodeTags(request.getParameter("mapping." + name + ".label"))%></th>
    535538            <td class="cell">
    536               <input type="text" class="text" name="mapping.<%=name%>.expression"
    537                 size="40" maxlength="80"
    538                 value="<%=HTML.encodeTags(request.getParameter("mapping." + name + ".expression"))%>"
    539                 onblur="setColumnMapping(null, '<%=name%>', this.value)">
    540                
     539              <table style="width: 100%;">
     540              <tr>
     541                <td>
     542                <input type="text" class="text" name="mapping.<%=name%>.expression"
     543                  maxlength="80"
     544                  value="<%=HTML.encodeTags(request.getParameter("mapping." + name + ".expression"))%>"
     545                  onblur="setColumnMapping(null, '<%=name%>', this.value)">
     546                </td>
     547              <td style="width: 22px;">
    541548                <base:icon image="cancel.png"
    542549                  onclick="<%="setColumnMapping(null, '" + name + "', '')"%>"
    543550                  tooltip="Clear this expression"/>
     551              </td>
     552              </tr>
     553              </table>
    544554            </td>
    545             <td class="cell">
     555            <td class="cell" style="width: 15em;">
    546556              <select name="list.<%=name%>" onchange="setColumnMapping(this, '<%=name%>')">
    547557              <option value="">
     
    553563        }
    554564        %>
     565        <tr class="dynamic">
     566          <th></th>
     567          <td></td>
     568          <td></td>
     569        </tr>
    555570        </table>
    556         </td>
    557       </tr>
    558       </table>
    559       </form>
     571      </div>
     572    </form>
    560573    </t:tab>
    561574     
  • trunk/www/common/plugin/test_with_file.jsp

    r5949 r5955  
    5353  <base:head scripts="plugin.js,menu.js,ajax.js,json2.js" styles="menu.css">
    5454    <script language="JavaScript">
    55     var timer = 0;
    56     var inCall = false;
    57     function adjustIFrameSize()
    58     {
    59       if (inCall) return;
    60       inCall = true;
    61       var iframeElement = document.getElementById("idParsed");
    62       // Find the top coordinate of the IFrame
    63       var offsetTop = 1;
    64       var offsetTrail = iframeElement;
    65       while (offsetTrail)
    66       {
    67         offsetTop += offsetTrail.offsetTop;
    68         offsetTrail = offsetTrail.offsetParent;
    69       }
    70  
    71       // Find the browser window height
    72       var windowHeight = Main.getWindowHeight();
    73      
    74       // Set iframe height
    75       var height = windowHeight-offsetTop - 80 * getScale();
    76       iframeElement.height = height;
    77      
    78       var iframe = window.frames['parsed'];
    79       var width = Main.getWindowWidth(iframe);
    80       var parsedFile = iframe.document.getElementById('parsedFile.content');
    81       if (parsedFile)
    82       {
    83         parsedFile.style.height = (height-40)+'px';
    84         parsedFile.style.width = (width-20)+'px';
    85       }
    86       inCall = false;
    87     }
    88     function setTimer()
    89     {
    90       if (inCall) return;
    91       if (timer) clearTimeout(timer);
    92       timer = setTimeout('adjustIFrameSize()', 150);
    93     }
    94 
    9555    function browseOnClick()
    9656    {
     
    163123    function init()
    164124    {
    165       adjustIFrameSize();
    166125      var frm = document.forms['testwithfile'];
    167126      var configWin = window.opener;
     
    224183    </script>
    225184  </base:head>
    226   <base:body attributes="onresize='setTimer();'" onload="init();">
     185  <base:body onload="init();">
    227186
    228187  <m:menu
     
    303262    />
    304263  </m:menu>
    305 
     264    <h1>Test with file <base:help helpid="runplugin.testwithfile" /></h1>
    306265    <form name="testwithfile" action="parse_file.jsp?ID=<%=ID%>" target="parsed" method="post" onsubmit="return false;">
    307266    <input type="hidden" name="file_id" value="">
    308267
    309     <h3 class="docked">Test with file <base:help helpid="runplugin.testwithfile" /></h3>
    310     <div class="boxed">
    311       <table class="form">
    312       <tr >
    313         <td class="prompt">File to test</td>
     268    <div class="content">
     269      <div class="absolutefull" style="height: 15em;">
     270      <table class="fullform input100 bottomborder">
     271      <tr>
     272        <th>File to test</th>
    314273        <td colspan="3">
    315           <table border="0" cellspacing="0" cellpadding="0">
     274          <table style="width: 100%;">
    316275            <tr>
    317             <td><input type="text" class="text required" name="path" size="60" value="">&nbsp;</td>
    318             <td><base:button
    319                 title="Browse&hellip;"
    320                 onclick="browseOnClick()"
    321                 />
    322             </td>
    323             <td>&nbsp;</td>
    324             <td><base:button title="Parse the file" onclick="doParse()" image="gonext.png"/></td>
     276            <td><input type="text" class="text required" name="path" value=""></td>
     277            <td style="width: 11em;"><base:button title="Browse&hellip;" onclick="browseOnClick()" style="width: 10em;" /></td>
     278            <td style="width: 11em;"><base:button title="Parse the file" onclick="doParse()" style="width: 10em;" image="gonext.png"/></td>
    325279            </tr>
    326280          </table>
    327281        </td>
    328282      </tr>
    329       <tr >
    330         <td class="prompt">Lines to parse</td>
    331         <td>
    332           <input type="text" class="text" name="maxLines" size="12" maxlength="10"
     283      <tr>
     284        <th>Lines to parse</th>
     285        <td>
     286          <input type="text" class="text" name="maxLines" style="width: 15em;" maxlength="10"
    333287            value="<%=FlatFileParser.DEFAULT_MAX_UNKNOWN_LINES%>"
    334288            onkeypress="return Numbers.integerOnly(event)">
    335289        </td>
    336         <td class="prompt">Character set</td>
     290        <th class="leftborder">Character set</th>
    337291        <td>
    338292          <select name="charset">
     
    355309      </tr>
    356310      <tr >
    357         <td class="prompt">Header regexp</td>
    358         <td>
    359           <table border="0" cellspacing="0" cellpadding="0">
     311        <th>Header regexp</th>
     312        <td>
     313          <table style="width: 100%;">
    360314          <tr>
    361           <td>
    362             <input type="text" class="text" name="header" size="40">&nbsp;
    363           </td>
    364           <td>
    365             <base:button title="Predefined&hellip;"
     315          <td><input type="text" class="text" name="header"></td>
     316          <td style="width: 11em;">
     317            <base:button title="Predefined&hellip;" style="width: 10em;"
    366318              onclick="showPredefined(event, 'predefinedHeaders')" />
    367319          </td>
     
    369321          </table>
    370322        </td>
    371         <td class="prompt">Min data columns</td>
    372         <td>
    373           <input type="text" class="text" name="minDataColumns" size="12" maxlength="10"
     323        <th class="leftborder">Min data columns</th>
     324        <td>
     325          <input type="text" class="text" name="minDataColumns" style="width: 15em;" maxlength="10"
    374326            onkeypress="return Numbers.integerOnly(event)">
    375327        </td>
    376328      </tr>
    377329      <tr >
    378         <td class="prompt">Data splitter regexp</td>
    379         <td>
    380           <table border="0" cellspacing="0" cellpadding="0">
     330        <th>Data splitter regexp</th>
     331        <td>
     332          <table style="width: 100%;">
    381333          <tr>
    382           <td>
    383             <input type="text" class="text required" name="dataSplitter" size="40">&nbsp;
    384           </td>
    385           <td>
    386             <base:button title="Predefined&hellip;"
     334          <td><input type="text" class="text required" name="dataSplitter" ></td>
     335          <td style="width: 11em;">
     336            <base:button title="Predefined&hellip;" style="width: 10em;"
    387337              onclick="showPredefined(event, 'predefinedSplitters')" />
    388338          </td>
     
    390340          </table>
    391341        </td>
    392         <td class="prompt">Max data columns</td>
    393         <td>
    394           <input type="text" class="text" name="maxDataColumns" size="12" maxlength="10"
     342        <th class="leftborder">Max data columns</th>
     343        <td>
     344          <input type="text" class="text" name="maxDataColumns" style="width: 15em;" maxlength="10"
    395345            onkeypress="return Numbers.integerOnly(event)">
    396346        </td>
    397347      </tr>
    398348      <tr >
    399         <td class="prompt">Ignore regexp</td>
    400         <td>
    401           <table border="0" cellspacing="0" cellpadding="0">
     349        <th>Ignore regexp</th>
     350        <td>
     351          <table style="width: 100%;">
    402352          <tr>
    403           <td>
    404             <input type="text" class="text" name="ignore" size="40">&nbsp;
    405           </td>
    406           <td>
    407             <base:button title="Predefined&hellip;"
     353          <td><input type="text" class="text" name="ignore"></td>
     354          <td style="width: 11em;">
     355            <base:button title="Predefined&hellip;" style="width: 10em;"
    408356              onclick="showPredefined(event, 'predefinedIgnore')" />
    409357          </td>
     
    411359          </table>
    412360        </td>
    413         <td class="prompt"><label for="trimQuotes">Remove quotes</label></td>
     361        <th class="leftborder"><label for="trimQuotes">Remove quotes</label></th>
    414362        <td><input type="checkbox" name="trimQuotes" id="trimQuotes" value="1"></td>
    415363      </tr>
    416364      <tr >
    417         <td class="prompt">Data header regexp</td>
    418         <td>
    419           <input type="text" class="text" name="dataHeader" size="40">
    420         </td>
    421       </tr>
    422       <tr >
    423         <td class="prompt">Data footer regexp</td>
    424         <td>
    425           <input type="text" class="text" name="dataFooter" size="40">
    426         </td>
    427       </tr>
     365        <th>Data header regexp</th>
     366        <td><input type="text" class="text" name="dataHeader"></td>
     367        <th class="subprompt leftborder"></th>
     368        <td></td>
     369      </tr>
     370      <tr class="dynamic">
     371        <th>Data footer regexp</th>
     372        <td><input type="text" class="text" name="dataFooter"></td>
     373        <th class="subprompt leftborder"></th>
     374        <td></td>
     375      </tr>
     376       
    428377      </table>
    429       <div align="right">&nbsp;<i><base:icon image="required.png" />= required information</i></div>
     378    </div>
    430379     
    431       <iframe name="parsed" id="idParsed" src="parse_file.jsp?ID=<%=ID%>" width="100%"
    432         frameborder="0" vspace="0" hspace="0"
    433         marginwidth="0" marginheight="0" scrolling="no" style="overflow: hidden;;"></iframe>
    434      
    435      
     380    <div class="absolutefull" style="top: 16em;">
     381      <iframe name="parsed" id="idParsed" src="parse_file.jsp?ID=<%=ID%>"
     382        style="width: 100%; height: 100%;"></iframe>
     383    </div>
     384 
    436385    </div>
    437386    </form>
    438387 
    439     <table align="center">
    440     <tr>
    441       <td width="50%"><base:button onclick="saveSettings();" title="Ok" /></td>
    442       <td width="50%"><base:button onclick="window.close();" title="Cancel" /></td>
    443     </tr>
    444     </table>
     388    <base:buttongroup subclass="dialogbuttons">
     389      <base:button onclick="saveSettings();" title="Ok" />
     390      <base:button onclick="window.close();" title="Cancel" />
     391    </base:buttongroup>
    445392  </base:body>
    446393  </base:page>
  • trunk/www/include/styles/main.css

    r5951 r5955  
    612612  background: #E8E8E8;
    613613  white-space: normal;
     614  width: auto;
     615  max-width: auto;
     616 
    614617}
    615618
  • trunk/www/include/styles/tabcontrol.css

    r5935 r5955  
    194194
    195195/* Use all but the bottom 2em for tab contents */
    196 .dialogtabcontrol .tabcontents
     196.dialogtabcontrol.tabsatbottom .tabcontents
    197197{
    198198  position: absolute;
     
    205205}
    206206
    207 .dialogtabcontrol .tabscontainer
     207.dialogtabcontrol.tabsatbottom .tabscontainer
    208208{
    209209  position: absolute;
     
    212212}
    213213
    214 
     214/* Use all but the top 2em for tab contents */
     215.dialogtabcontrol.tabsattop .tabcontents
     216{
     217  position: absolute;
     218  top: 2em;
     219  left: 0px;
     220  right: 0px;
     221  bottom: 0px;
     222  border-width: 0px !important;
     223  overflow: auto;
     224}
     225
     226.dialogtabcontrol.tabsattop .tabscontainer
     227{
     228  position: absolute;
     229  top: 0px;
     230  height: 2em;
     231}
     232
Note: See TracChangeset for help on using the changeset viewer.