Changeset 569


Ignore:
Timestamp:
Jun 5, 2010, 9:48:43 PM (10 years ago)
Author:
gav
Message:

Move inventory text search from quick search pane to front and centre.

Location:
trunk
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/grails-app/views/inventoryItemDetailed/search.gsp

    r566 r569  
    1717        <div class="body">
    1818            <g:render template="/shared/messages" />
    19             <filterpane:currentCriteria domainBean="InventoryItem"
    20                                     action="search"
    21                                     dateFormat="EEE, dd-MMM-yyyy"
    22                                     removeImgDir="images"
    23                                     removeImgFile="bullet_delete.png"
    24                                     title="Advanced Search"/>
    25 
    26             <div class="paginateButtons">
    27                 <span class="searchButtons">
    28                     <a href='' onclick="showElement('searchPane'); return false;">Quick</a>
    29                 </span>
    30                 Results: ${inventoryItemInstanceList.size()} / ${inventoryItemInstanceTotal}
    31                 <span class="searchButtons">
    32                     <filterpane:filterButton text="Advanced" appliedText="Advanced" />
    33                 </span>
    34             </div>
    35 
    36             <jsUtil:toggleControl toggleId="options"
    37                                                     imageId="optionsImg"
    38                                                     closedImgUrl="${resource(dir:'images/skin',file:'bullet_arrow_right.png')}"
    39                                                     openImgUrl="${resource(dir:'images/skin',file:'bullet_arrow_down.png')}"
    40                                                     text="${g.message(code: 'default.options.text')}"
    41                                                     />
    42 
    43             <div id="options" style="display:none;">
    44                 <g:form method="post" >
     19
     20            <div class="textSearchWrapper">
     21                <div class="textSearchInput">
     22
     23                    <filterpane:isFiltered >
     24                        <filterpane:currentCriteria domainBean="InventoryItem"
     25                                                action="search"
     26                                                dateFormat="EEE, dd-MMM-yyyy"
     27                                                removeImgDir="images"
     28                                                removeImgFile="bullet_delete.png"
     29                                                title="Advanced Search"/>
     30                        <div class="paginateButtons">
     31                            Results: ${inventoryItemInstanceList.size()} / ${inventoryItemInstanceTotal}
     32                        </div>
     33                    </filterpane:isFiltered >
     34
     35                    <filterpane:isNotFiltered >
     36                        <g:form method="post" id="textSearchForm" name="textSearchForm" >
     37                            <g:hiddenField name="newTextSearch" value="true" />
     38
     39                                <span> <!--Prevent IE inheriting margin-->
     40                                    <input type="text" style="width:450px;" maxlength="75" id="searchText" name="searchText" value="${filterParams.searchText}"/>
     41                                    <g:helpBalloon code="inventoryItem.search.searchText" />
     42
     43                                    <g:if test="${params.searchName || params.searchDescription || params.searchComment || params.searchLocation || params.searchGroup || params.searchSpareFor}" >
     44                                        <div id="limitSearch" class="textSearchSelect">
     45                                    </g:if>
     46                                    <g:else>
     47                                        <div id="limitSearch" class="textSearchSelect" style="display:none;">
     48                                    </g:else>
     49                                            Limit Search:
     50                                            <br />
     51                                            <g:checkBox name="searchName" value="${params.searchName}" ></g:checkBox>
     52                                            <label for="searchName">Name</label>
     53                                            <g:checkBox name="searchDescription" value="${params.searchDescription}" ></g:checkBox>
     54                                            <label for="searchDescription">Description</label>
     55                                            <g:checkBox name="searchComment" value="${params.searchComment}" ></g:checkBox>
     56                                            <label for="searchComment">Comment</label>
     57                                            <g:checkBox name="searchLocation" value="${params.searchLocation}" ></g:checkBox>
     58                                            <label for="searchLocation">Location</label>
     59                                            <g:checkBox name="searchGroup" value="${params.searchGroup}" ></g:checkBox>
     60                                            <label for="searchGroup">Group</label>
     61                                            <br />
     62                                            <g:checkBox name="searchSpareFor" value="${params.searchSpareFor}" ></g:checkBox>
     63                                            <label for="searchSpareFor">Spare For (Asset: Name, Description and Comment).</label>
     64                                        </div>
     65
     66                                    <div class="paginateButtons">
     67                                        <span class="buttons">
     68                                            <g:actionSubmit class="search" value="Search" action="search" />
     69                                        </span>
     70                                        <span class="buttons" style="margin-left: 5px;">
     71                                            <g:actionSubmit class="complete" value="Select" action="search" onclick="toggleWithEffectUtil('limitSearch'); return false;"/>
     72                                        </span>
     73                                        <div class="paginateButtons">
     74                                            Results: ${inventoryItemInstanceList.size()} / ${inventoryItemInstanceTotal}
     75                                        </div>
     76                                    </div><!--paginateButtons-->
     77                                </span> <!--Prevent IE inheriting margin-->
     78
     79                        </g:form>
     80                    </filterpane:isNotFiltered >
     81
     82                </div><!--textSearchInput-->
     83
     84                <div class="textSearchRightFloat">
     85                    <div class="paginateButtons">
     86                        <span class="searchButtons">
     87                            <a href='' onclick="showElement('searchPane'); return false;">Quick</a>
     88                        </span>
     89                        <br />
     90                        <br />
     91                        <span class="searchButtons">
     92                            <filterpane:filterButton text="Advanced" appliedText="Advanced" />
     93                        </span>
     94                    </div>
     95
     96                    <jsUtil:toggleControl toggleId="options"
     97                                                            imageId="optionsImg"
     98                                                            closedImgUrl="${resource(dir:'images/skin',file:'bullet_arrow_right.png')}"
     99                                                            openImgUrl="${resource(dir:'images/skin',file:'bullet_arrow_down.png')}"
     100                                                            text="${g.message(code: 'default.options.text')}"
     101                                                            />
     102                </div><!--textSearchRightFloat-->
     103            </div><!--textSearchWrapper-->
     104
     105            <div id="options" style="display:none; clear:both;">
     106                <g:form method="post">
    45107                    <g:hiddenField name="params" value="${filterParams}" />
    46108                    <div class="dialog">
     
    97159            <br />
    98160
    99             <g:if test="${inventoryItemInstanceList.size() > 10}">
     161            <g:if test="${inventoryItemInstanceList.size() > 2}">
    100162                <g:if test="${inventoryItemInstanceTotal > inventoryItemInstanceList.size()}">
    101163                    <div class="paginateButtons">
     
    256318                </table>
    257319
    258                 <table>
    259                     <tbody>
    260 
    261                         <tr class="prop">
    262                             <td valign="top" class="name">
    263                                 <label for="searchText">Search:</label>
    264                             </td>
    265                             <td valign="top" class="value">
    266                                 <input type="text" style="width:450px" maxlength="75" id="searchText" name="searchText" value="${filterParams.searchText}"/>
    267                                 <g:helpBalloon code="inventoryItem.search.searchText" />
    268                             </td>
    269                         </tr>
    270 
    271                         <tr class="prop">
    272                             <td valign="top" class="name">
    273 
    274                                 <jsUtil:toggleControl toggleId="limitSearch"
    275                                                                         imageId="limitSearchImg"
    276                                                                         closedImgUrl="${resource(dir:'images/skin',file:'bullet_toggle_plus.png')}"
    277                                                                         openImgUrl="${resource(dir:'images/skin',file:'bullet_toggle_minus.png')}"
    278                                                                         effect="fade"
    279                                                                         text="Limit Search"
    280                                                                         />
    281                             </td>
    282                             <td valign="top" class="value">
    283                                 <g:if test="${params.searchName || params.searchDescription || params.searchComment || params.searchLocation || params.searchGroup || params.searchSpareFor}" >
    284                                     <div id="limitSearch">
    285                                 </g:if>
    286                                 <g:else>
    287                                     <div id="limitSearch" style="display:none;">
    288                                 </g:else>
    289                                     <g:checkBox name="searchName" value="${params.searchName}" ></g:checkBox>
    290                                     <label for="searchName">Name</label>
    291                                     <g:checkBox name="searchDescription" value="${params.searchDescription}" ></g:checkBox>
    292                                     <label for="searchDescription">Description</label>
    293                                     <g:checkBox name="searchComment" value="${params.searchComment}" ></g:checkBox>
    294                                     <label for="searchComment">Comment</label>
    295                                     <g:checkBox name="searchLocation" value="${params.searchLocation}" ></g:checkBox>
    296                                     <label for="searchLocation">Location</label>
    297                                     <g:checkBox name="searchGroup" value="${params.searchGroup}" ></g:checkBox>
    298                                     <label for="searchGroup">Group</label>
    299                                     <br />
    300                                     <g:checkBox name="searchSpareFor" value="${params.searchSpareFor}" ></g:checkBox>
    301                                     <label for="searchSpareFor">Spare For (Asset: Name, Description and Comment).</label>
    302                                 </div>
    303                             </td>
    304                         </tr>
    305 
    306                     </tbody>
    307                 </table>
    308 
    309320                <div class="buttons">
    310321                    <span class="button">
    311                         <g:actionSubmit class="save" value="Update" action="search" />
    312322                        <g:actionSubmit class="cancel" value="${g.message(code:'fp.tag.filterPane.button.cancel.text', default:'Cancel')}" onclick="return hideElement('searchPane');" />
    313323                    </span>
  • trunk/web-app/css/main.css

    r565 r569  
    55}
    66
    7 /** 
     7/**
    88* GENERAL.
    99* Commonly used application colours:
     
    147147}
    148148
     149/* Ask IE to behave. Margin, width and height might be ignored by some FF versions. */
     150input[type="checkbox"] {
     151    background: transparent;
     152    border: 0;
     153    margin-bottom: -1px;
     154}
     155input[type="radio"] {
     156    background: transparent;
     157    border: 0;
     158    margin-bottom: -1px;
     159}
     160
    149161/* Logout and Top Navigation Level */
    150162
     
    341353/* LIST */
    342354
     355div.list {
     356    clear:both;
     357}
    343358.list table {
    344359    border-collapse: collapse;
     
    506521  width: 1020px;
    507522  height: 100px;
     523}
     524
     525/* Text Search */
     526div.textSearchWrapper {
     527    float: left;
     528    width: 100%;
     529}
     530
     531div.textSearchInput {
     532    float: left;
     533    width: 500px;
     534    margin: 0 0 0 220px;
     535    padding: 0;
     536}
     537
     538div.textSearchSelect {
     539    text-align: left;
     540    padding: 5px 5px 5px 15px;
     541}
     542
     543div.textSearchRightFloat {
     544    float: right;
     545    text-align: right;
     546    margin: 0 10px 0 0;
    508547}
    509548
Note: See TracChangeset for help on using the changeset viewer.