Author: fdesbois Date: 2010-01-06 15:01:52 +0000 (Wed, 06 Jan 2010) New Revision: 167 Modified: trunk/suiviobsmer-ui/src/main/resources/fr/ifremer/suiviobsmer/ui/pages/Contacts.properties trunk/suiviobsmer-ui/src/main/webapp/Contacts.tml trunk/suiviobsmer-ui/src/main/webapp/css/common.css trunk/suiviobsmer-ui/src/main/webapp/css/contacts.css Log: Add style for Contacts filters and import/export zone Modified: trunk/suiviobsmer-ui/src/main/resources/fr/ifremer/suiviobsmer/ui/pages/Contacts.properties =================================================================== --- trunk/suiviobsmer-ui/src/main/resources/fr/ifremer/suiviobsmer/ui/pages/Contacts.properties 2010-01-06 13:33:55 UTC (rev 166) +++ trunk/suiviobsmer-ui/src/main/resources/fr/ifremer/suiviobsmer/ui/pages/Contacts.properties 2010-01-06 15:01:52 UTC (rev 167) @@ -1,7 +1,7 @@ # ContactForm labels -state-label: Etat -boat-label: Navire -tide-label: Mar\u00E9e +facadeName-label: Facade +sectorName-label: Secteur +contactsCsvFile-label: Fichier des contacts # Grid labels createdBy-label: Observateur Modified: trunk/suiviobsmer-ui/src/main/webapp/Contacts.tml =================================================================== --- trunk/suiviobsmer-ui/src/main/webapp/Contacts.tml 2010-01-06 13:33:55 UTC (rev 166) +++ trunk/suiviobsmer-ui/src/main/webapp/Contacts.tml 2010-01-06 15:01:52 UTC (rev 167) @@ -5,99 +5,105 @@ nbObservants, mammals, editDate, comment, validation"--> <div id="so-contacts-search"> <form t:type="form" t:id="searchBoat"> - <input t:type="textfield" t:id="boatName" value="contactFilter.boatName" t:mixins="Autocomplete"/> - <input t:type="submit" class="ico search-32px" t:id="execSearchBoat" value="Search" /> + <div> + <t:label t:for="boatName" /><br /> + <input t:type="textfield" class="width200" t:id="boatName" value="contactFilter.boatName" t:mixins="Autocomplete"/> + <input t:type="submit" class="ico search-32px" t:id="execSearchBoat" value="Search" /> + </div> </form> <a t:type="actionlink" t:id="showFilters" t:zone="so-contacts-filters"> recherche avancée - </a> + </a> <a t:type="actionlink" t:id="showImportExport" t:zone="so-contacts-importexport"> import/export </a> </div> - +<!-- FILTRES --> <div t:type="zone" class="so-filters" t:id="filtersZone" t:update="show" t:visible="prop:filtersVisible" id="so-contacts-filters"> <fieldset> <legend>Recherche avancée</legend> - <!--<div class="aright"> - <t:if t:test="filtersHidden"> - <a t:type="actionlink" t:id="showFilters" t:zone="so-contacts-filters"> - <img src="${asset:context:}/img/downarrow.png" title="Afficher les filtres"/> - </a> - <p:else> - <a t:type="actionlink" t:id="hideFilters" t:zone="so-boats-filters"> - <img src="${asset:context:}/img/uparrow.png" title="Cacher les filtres"/> - </a> - </p:else> - </t:if> - </div>--> - <!--<t:feedback t:id="filterFeedback" /> - <div class="so-filters-form ${hiddenClass}">--> + <div class="so-filters-form"> <form t:type="form" t:id="filtersForm"> <t:errors /> <div class="t-beaneditor"> - <t:beaneditor t:id="filtersEditor" t:object="contactFilter" - t:include="facadeName, sectorName, state" t:add="boat, sampleRow, observer, mammals, validation" - t:reorder="boat, facadeName, sectorName, sampleRow, observer"> - <p:boat> - <t:label t:for="boat" /> - <span> immatriculation </span> - <input t:type="textfield" t:id="boat" class="width50" t:value="contactFilter.boatImmatriculation" /> - <span> code quartier </span> - <input t:type="textfield" t:id="boatDistrictCode" class="width50" t:value="contactFilter.boatDistrictCode" /> - </p:boat> - <p:facadeName> - <t:label t:for="facadeName" /> - <input t:type="select" t:id="facadeName" t:model="facadeSelectModel" value="contactFilter.facadeName" - t:mixins="zoneUpdater" t:event="change" t:zone="so-contacts-filters"/> - </p:facadeName> - <p:sectorName> - <t:label t:for="sectorName" /> - <input t:type="select" t:id="sectorName" t:model="sectorSelectModel" value="contactFilter.sectorName" /> - </p:sectorName> - <p:sampleRow> - <t:label t:for="sampleRow" /> - <input t:type="select" t:id="sampleRow" t:model="sampleRowSelectModel" value="sampleRowId" /> - </p:sampleRow> - <p:observer> - N/A - </p:observer> - <p:state> - N/A - </p:state> - <p:mammals> - N/A - </p:mammals> - <p:validation> - <t:label t:for="validation" /> - <input t:type="checkbox" t:id="validation" value="contactFilter.companyAccepted" /> + <div> + <label>Navire </label> + <t:label t:for="boatImmatriculation" />: + <input t:type="textfield" t:id="boatImmatriculation" class="width50" t:value="contactFilter.boatImmatriculation" /> + <t:label t:for="boatDistrictCode" />: + <input t:type="textfield" t:id="boatDistrictCode" class="width50" t:value="contactFilter.boatDistrictCode" /> + <t:label t:for="facadeName" />: + <select t:type="select" t:id="facadeName" t:model="facadeSelectModel" value="contactFilter.facadeName" + t:mixins="zoneUpdater" t:event="change" t:zone="so-contacts-filters"/> + <t:label t:for="sectorName" />: + <select t:type="select" t:id="sectorName" t:model="sectorSelectModel" value="contactFilter.sectorName" /> + <t:label t:for="sampleRow" />: + <input t:type="select" t:id="sampleRow" t:model="sampleRowSelectModel" value="sampleRowId" /> + <label>Mammifères: </label> + <input t:type="checkbox" t:id="mammalsObservation1" value="contactFilter.mammalsObservation" /> + <t:label t:for="mammalsObservation1"> + <img src="${asset:context:}/img/eye-22px.png" alt="Observations de mammifères" title="Observations de mammifères" /> + </t:label> + <input t:type="checkbox" t:id="mammalsCapture1" value="contactFilter.mammalsCapture" /> + <t:label t:for="mammalsCapture1"> + <img src="${asset:context:}/img/fishing-net-22px.png" alt="Capture de mammifères" title="Capture de mammifères" /> + </t:label> + </div><p> </p> + <div> + <label>Validation société: </label> + <input t:type="checkbox" t:id="companyAccepted" value="contactFilter.companyAccepted" /> + <t:label t:for="companyAccepted"> <img src="${asset:context:}/img/true-22px.png" title="Accepté par la société" /> - <input t:type="checkbox" value="contactFilter.companyRefused" /> + </t:label> + <input t:type="checkbox" t:id="companyRefused" value="contactFilter.companyRefused" /> + <t:label t:for="companyRefused"> <img src="${asset:context:}/img/false-22px.png" title="Refusé par la société" /> - <input t:type="checkbox" value="contactFilter.companyUndefined" /> + </t:label> + <input t:type="checkbox" t:id="companyUndefined" value="contactFilter.companyUndefined" /> + <t:label t:for="companyUndefined"> <img src="${asset:context:}/img/help-22px.png" title="Non validé par la société" /> - </p:validation> - </t:beaneditor> + </t:label> + <t:if t:test="user.admin"> + <label>Validation programme: </label> + <input t:type="checkbox" t:id="programAccepted" value="contactFilter.programAccepted" /> + <t:label t:for="programAccepted"> + <img src="${asset:context:}/img/true-22px.png" title="Accepté par le programme" /> + </t:label> + <input t:type="checkbox" t:id="programRefused" value="contactFilter.programRefused" /> + <t:label t:for="programRefused"> + <img src="${asset:context:}/img/false-22px.png" title="Refusé par le programme" /> + </t:label> + <input t:type="checkbox" t:id="programUndefined" value="contactFilter.programUndefined" /> + <t:label t:for="programUndefined"> + <img src="${asset:context:}/img/help-22px.png" title="Non validé par le programme" /> + </t:label> + </t:if> + </div> <div class="t-beaneditor-row aright"> <input t:type="submit" class="ico search-32px" t:id="search" value="Search" /> <input t:type="submit" class="ico undo" t:id="reset" value="Reset" /> </div> </div> </form> - <!--</div>--> + </div> </fieldset> </div> -<div t:type="zone" t:id="importExportZone" t:update="show" t:visible="false" id="so-contacts-importexport"> - <form t:type="form" t:id="importContacts"> - <t:errors /> - <t:label for="contactsCsvFile" /> : - <input t:type="upload" t:id="contactsCsvFile" t:validate="required" /> - <input t:type="submit" class="ico import" value="OK" title="Importer une liste de contacts (format CSV)" /> - </form> - <a t:type="actionlink" t:id="exportShowContacts"> - EXPORT - </a> +<!-- IMPORT/EXPORT --> +<div t:type="zone" class="so-filters" t:id="importExportZone" t:update="show" t:visible="false" id="so-contacts-importexport"> + <fieldset> + <legend>Import/export CSV (UTF-8)</legend> + <form t:type="form" t:id="importContacts"> + <t:errors /> + <t:label for="contactsCsvFile" /> : + <input t:type="upload" t:id="contactsCsvFile" t:validate="required" /> + <input t:type="submit" class="ico import" value="OK" title="Importer une liste de contacts (format CSV)" /> + <a t:type="actionlink" t:id="exportShowContacts"> + EXPORT + </a> + </form> + </fieldset> </div> +<!-- CONTACT LIST --> <t:zone t:id="gridZone" t:update="show"> <form t:type="form" t:id="contactsForm" t:zone="gridZone"> <t:errors id="so-contact-form-errors" t:banner="message:contactsForm-errors-banner"/> Modified: trunk/suiviobsmer-ui/src/main/webapp/css/common.css =================================================================== --- trunk/suiviobsmer-ui/src/main/webapp/css/common.css 2010-01-06 13:33:55 UTC (rev 166) +++ trunk/suiviobsmer-ui/src/main/webapp/css/common.css 2010-01-06 15:01:52 UTC (rev 167) @@ -76,6 +76,11 @@ width: 150px; } +.width200 { + width: 200px; +} + + .width300 { width: 300px; } Modified: trunk/suiviobsmer-ui/src/main/webapp/css/contacts.css =================================================================== --- trunk/suiviobsmer-ui/src/main/webapp/css/contacts.css 2010-01-06 13:33:55 UTC (rev 166) +++ trunk/suiviobsmer-ui/src/main/webapp/css/contacts.css 2010-01-06 15:01:52 UTC (rev 167) @@ -25,10 +25,58 @@ }*/ /* FILTERS */ -div.t-autocomplete-menu ul { +div#so-contacts-search { + width: 50%; + margin: 10px; + margin-left: auto; + margin-right: auto; + text-align: center; +} + +div#so-contacts-search form { + margin-bottom: 5px; +} + +div#so-contacts-search form div { + width: 270px; + margin-left: auto; + margin-right: auto; + padding: 5px; + background-color: #DEE7EC; + border: 1px outset black; +} + +div#so-contacts-search div.t-autocomplete-menu ul { background-color: #19a28d; } +div#so-contacts-search a { + text-decoration: none; + color: #19a28d; + font-weight: bold; +} + +div#so-contacts-search a:hover { + text-decoration: underline; + color: black; +} + +div#so-contacts-filters { + width: 100%; + margin-bottom: 10px; +} + +div#so-contacts-importexport { + margin-bottom: 10px; + width: 50%; + text-align: center; +} + +div#so-contacts-importexport fieldset { + padding: 10px; +} + + /* TABLE OF CONTACTS */ div#so-contacts table.user { width: 100%;