r3529 - in trunk/pollen-ui-struts2/src/main/webapp: WEB-INF/jsp/poll css js
Author: sletellier Date: 2012-06-19 15:22:34 +0200 (Tue, 19 Jun 2012) New Revision: 3529 Url: http://chorem.org/repositories/revision/pollen/3529 Log: - refs #562 : improve choice layout - fix html and css style - hide file chooser - image click open file chooser Modified: trunk/pollen-ui-struts2/src/main/webapp/WEB-INF/jsp/poll/createPoll_choices.jsp trunk/pollen-ui-struts2/src/main/webapp/WEB-INF/jsp/poll/displayDateChoice.jsp trunk/pollen-ui-struts2/src/main/webapp/WEB-INF/jsp/poll/displayImageChoice.jsp trunk/pollen-ui-struts2/src/main/webapp/WEB-INF/jsp/poll/displayTextChoice.jsp trunk/pollen-ui-struts2/src/main/webapp/css/pollCreation.css trunk/pollen-ui-struts2/src/main/webapp/js/createPoll.js Modified: trunk/pollen-ui-struts2/src/main/webapp/WEB-INF/jsp/poll/createPoll_choices.jsp =================================================================== --- trunk/pollen-ui-struts2/src/main/webapp/WEB-INF/jsp/poll/createPoll_choices.jsp 2012-06-19 13:22:18 UTC (rev 3528) +++ trunk/pollen-ui-struts2/src/main/webapp/WEB-INF/jsp/poll/createPoll_choices.jsp 2012-06-19 13:22:34 UTC (rev 3529) @@ -40,50 +40,47 @@ <s:set name="choiceNumber"><s:property value="%{#status.index}"/></s:set> <s:set name="prefix">textChoice_<s:property value="%{#choiceNumber}"/></s:set> - <div id='choicesTEXT_<s:property value="choiceNumber"/>' class="ui-state-default"> + <div id='choicesTEXT_<s:property value="choiceNumber"/>' class="ui-state-default choicesDiv"> <%--<div id='choicesTEXT_<s:property value="choiceNumber"/>'>--%> <s:hidden key='%{#prefix}.topiaId' value='%{#choice.topiaId}' label=''/> <s:hidden key='%{#prefix}.order' value='%{#choiceNumber}' label=''/> <sp:fielderror fieldName="%{#prefix}" id="%{#prefix}_error"/> <div class="fleft choiceName"> <sp:fielderror fieldName="%{#prefix}.name" id="%{#prefix}.name_error"/> - <span class="choicesImage ui-icon ui-icon-arrowthick-2-n-s"></span> + <span class="moveImage ui-icon ui-icon-arrowthick-2-n-s"></span> <s:label for="%{#prefix}.name" id="choicesTEXT_label_%{#choiceNumber}" theme="simple" value=''/> <s:textfield cssClass="nameField" id='%{#prefix}.name' theme="simple" key="%{#prefix}.name" label='' value="%{#choice.name}"/> - - + </div> + <div class="fright"> + <%--s:a id='choicesTEXT_down_%{choiceNumber}' + cssClass="hidden" href='#' + onclick="return downChoice('choicesTEXT_%{choiceNumber}')"> + <image alt='<s:property value="downTitle"/>' + title='<s:property value="downTitle"/>' + src="<s:url value='/img/1downarrow.png'/>"></image> + </s:a> + <s:a id='choicesTEXT_up_%{choiceNumber}' href='#' cssClass="hidden" + onclick="return upChoice('choicesTEXT_%{choiceNumber}')"> + <image alt='<s:property value="upTitle"/>' + title='<s:property value="upTitle"/>' + src="<s:url value='/img/1uparrow.png'/>"></image> + </s:a--%> <s:label for="%{#prefix}.description" key="pollen.common.description" theme="simple"/> - <%--/div> - <div class="fleft"--%> <s:textarea cols="30" id="%{#prefix}.description" label='' theme="simple" key="%{#prefix}.description" value="%{#choice.description}"/> - </div> - <s:if test="!voteStarted"> - <div class="fright"> - <%--s:a id='choicesTEXT_down_%{choiceNumber}' - cssClass="hidden" href='#' - onclick="return downChoice('choicesTEXT_%{choiceNumber}')"> - <image alt='<s:property value="downTitle"/>' - title='<s:property value="downTitle"/>' - src="<s:url value='/img/1downarrow.png'/>"></image> - </s:a> - <s:a id='choicesTEXT_up_%{choiceNumber}' href='#' cssClass="hidden" - onclick="return upChoice('choicesTEXT_%{choiceNumber}')"> - <image alt='<s:property value="upTitle"/>' - title='<s:property value="upTitle"/>' - src="<s:url value='/img/1uparrow.png'/>"></image> - </s:a--%> + <s:if test="!voteStarted"> <s:a href='#' onclick="return deleteChoice('choicesTEXT_%{choiceNumber}')"> <image alt='<s:property value="deleteTitle"/>' title='<s:property value="deleteTitle"/>' src="<s:url value='/img/delete.png'/>"></image> </s:a> - </div> - </s:if> + </s:if> + </div> <div class="cleanBoth"></div> </div> </s:iterator> @@ -94,14 +91,14 @@ <s:set name="prefix">dateChoice_<s:property value="%{#choiceNumber}"/></s:set> <div id='choicesDATE_<s:property value="choiceNumber"/>' - class="ui-state-default"> + class="ui-state-default choicesDiv"> <s:hidden key='%{#prefix}.topiaId' id='%{#prefix}.topiaId' theme="simple" value='%{#choice.topiaId}' label=''/> <s:hidden key='%{#prefix}.order' value='%{#choiceNumber}' label=''/> <sp:fielderror fieldName="%{#prefix}" id="%{#prefix}_error"/> <div class="fleft choiceName"> <sp:fielderror fieldName="%{#prefix}.name" id="%{#prefix}.name_error"/> - <span class="choicesImage ui-icon ui-icon-arrowthick-2-n-s"> </span> + <span class="moveImage ui-icon ui-icon-arrowthick-2-n-s"> </span> <s:label for="%{#prefix}.name" id="choicesDATE_label_%{choiceNumber}" theme="simple" value=''/> <sj:datepicker id='%{#prefix}.name' key="%{#prefix}.name" label="" @@ -109,16 +106,7 @@ theme="simple" timepicker="true" value="%{#choice.name}" displayFormat="%{getText('pollen.common.datePickerPattern')}"/> - - - <s:label for="%{#prefix}.description" key="pollen.common.description" - theme="simple"/> </div> - <div class="fleft"> - <s:textarea cols="30" id="%{#prefix}.description" theme="simple" - key="%{#prefix}.description" label='' - value="%{#choice.description}"/> - </div> - <s:if test="!voteStarted"> <div class="fright"> <%--s:a id='choicesDATE_down_%{choiceNumber}' cssClass="hidden" href='#' @@ -133,80 +121,81 @@ title='<s:property value="upTitle"/>' src="<s:url value='/img/1uparrow.png'/>"></image> </s:a--%> - <s:a href='#' - onclick="return deleteChoice('choicesDATE_%{choiceNumber}')"> - <image alt='<s:property value="deleteTitle"/>' - title='<s:property value="deleteTitle"/>' - src="<s:url value='/img/delete.png'/>"></image> - </s:a> + <s:label for="%{#prefix}.description" key="pollen.common.description" + theme="simple"/> + <s:textarea cols="30" id="%{#prefix}.description" theme="simple" + key="%{#prefix}.description" label='' + value="%{#choice.description}"/> + <s:if test="!voteStarted"> + <s:a href='#' + onclick="return deleteChoice('choicesDATE_%{choiceNumber}')"> + <image alt='<s:property value="deleteTitle"/>' + title='<s:property value="deleteTitle"/>' + src="<s:url value='/img/delete.png'/>"></image> + </s:a> + </s:if> </div> - </s:if> <div class="cleanBoth"></div> </div> </s:iterator> </div> <div id="choicesIMAGE" class="choices"> - <s:iterator value="imageChoices" status="status" var="choice"> + <s:iterator value="imageChoices" status="status" var="choiceDiv"> <s:set name="choiceNumber"><s:property value="%{#status.index}"/></s:set> <s:set name="prefix">imageChoice_<s:property value="%{#choiceNumber}"/></s:set> <div id='choicesIMAGE_<s:property value="choiceNumber"/>' - class="ui-state-default"> + class="ui-state-default choicesImageDiv"> <s:hidden key='%{#prefix}.order' value='%{#choiceNumber}' label=''/> <s:hidden key='%{#prefix}.topiaId' value='%{#choice.topiaId}' label=''/> <sp:fielderror fieldName="%{#prefix}" id="%{#prefix}_error"/> <div class="fleft choiceName"> - <sp:fielderror fieldName="%{#prefix}.name" id="%{#prefix}.name_error"/> - <span class="choicesImage ui-icon ui-icon-arrowthick-2-n-s"></span> - <s:label for="%{#prefix}.name" id="choicesIMAGE_label_%{choiceNumber}" - theme="simple" value=''/> - <s:if test="#choice.name != null"> + <div class="fleft"> + <sp:fielderror fieldName="%{#prefix}.name" id="%{#prefix}.name_error"/> + <span class="moveImage ui-icon ui-icon-arrowthick-2-n-s"></span> + <s:label for="%{#prefix}.name" id="choicesIMAGE_label_%{choiceNumber}" + theme="simple" value=''/> + </div> + <div class="fright"> + <s:if test="#choice.name != null"> - <%--Uploaded image--%> - <s:hidden id="%{#prefix}.name" name="%{#prefix}.name" - value="%{#choice.name}" label='' theme="simple"/> + <%--Uploaded image--%> + <s:hidden id="%{#prefix}.name" name="%{#prefix}.name" + value="%{#choice.name}" label='' theme="simple"/> - <s:hidden id="%{#prefix}.location" name="%{#prefix}.location" - value="%{#choice.location}" label='' theme="simple"/> - <s:url id="imageUrl" namespace="/io" action="getPollChoiceImage" - escapeAmp="true"> - <s:param name="choiceTokenId"> - imagechoicesThumb_<s:property value='name'/> - </s:param> - </s:url> - <img name="<s:property value="#prefix"/>.thumb" - alt="<s:property value='name'/>" - title="<s:property value='name'/>" - src="<s:property value='imageUrl'/>"> + <s:hidden id="%{#prefix}.location" name="%{#prefix}.location" + value="%{#choice.location}" label='' theme="simple"/> + <s:url id="imageUrl" namespace="/io" action="getPollChoiceImage" + escapeAmp="true"> + <s:param name="choiceTokenId"> + imagechoicesThumb_<s:property value='name'/> + </s:param> + </s:url> + <img name="<s:property value="#prefix"/>.thumb" + alt="<s:property value='name'/>" + title="<s:property value='name'/>" + src="<s:property value='imageUrl'/>" + class="fright choiceImage"> - <s:file key='imageChoice[%{#choiceNumber}]' label='' theme="simple" - cssClass="nameField fleft" cssStyle="margin-left:50px;"/> - </s:if> - <s:else> - <%--New image--%> - <s:url id="imageUrl" namespace="/io" action="getPollChoiceImage" - escapeAmp="false" value="/img/7ter.jpg"/> - <img name="<s:property value="#prefix"/>.thumb" - alt="<s:text name='pollen.image.not.loaded'/>" - title="<s:text name='pollen.image.not.loaded'/>" - src="<s:property value='imageUrl'/>" width="100px" - height="75px"> - <s:file key='imageChoice[%{#choiceNumber}]' label='' theme="simple" - cssClass="nameField fleft" - cssStyle="margin-left:50px;"/> + <s:file key='imageChoice[%{#choiceNumber}]' label='' theme="simple" + cssClass="nameField fleft" cssStyle="margin-left:50px;"/> + </s:if> + <s:else> + <%--New image--%> + <s:url id="imageUrl" namespace="/io" action="getPollChoiceImage" + escapeAmp="false" value="/img/7ter.jpg"/> + <img name="<s:property value="#prefix"/>.thumb" + alt="<s:text name='pollen.image.not.loaded'/>" + title="<s:text name='pollen.image.not.loaded'/>" + src="<s:property value='imageUrl'/>" width="100px" + height="75px" class="fright choiceImage"> + <s:file key='imageChoice[%{#choiceNumber}]' label='' theme="simple" + cssClass="hidden"/> - </s:else> + </s:else> + </div> </div> - <div class="fleft"> - - - <s:label for="%{#prefix}.description" key="pollen.common.description" - theme="simple"/> - <s:textarea cols="30" id="%{#prefix}.description" label='' - theme="simple" key="%{#prefix}.description" - value="%{#choice.description}"/> - </div> - <s:if test="!voteStarted"> <div class="fright"> <%--s:a id='choicesIMAGE_down_%{choiceNumber}' cssClass="hidden" href='#' @@ -221,14 +210,20 @@ title='<s:property value="upTitle"/>' src="<s:url value='/img/1uparrow.png'/>"></image> </s:a--%> - <s:a href='#' - onclick="return deleteChoice('choicesIMAGE_%{choiceNumber}')"> - <image alt='<s:property value="deleteTitle"/>' - title='<s:property value="deleteTitle"/>' - src="<s:url value='/img/delete.png'/>"></image> - </s:a> + <s:label for="%{#prefix}.description" key="pollen.common.description" + theme="simple"/> + <s:textarea cols="30" id="%{#prefix}.description" label='' + theme="simple" key="%{#prefix}.description" + value="%{#choice.description}"/> + <s:if test="!voteStarted"> + <s:a href='#' + onclick="return deleteChoice('choicesIMAGE_%{choiceNumber}')"> + <image alt='<s:property value="deleteTitle"/>' + title='<s:property value="deleteTitle"/>' + src="<s:url value='/img/delete.png'/>"></image> + </s:a> + </s:if> </div> - </s:if> <div class="cleanBoth"></div> </div> Modified: trunk/pollen-ui-struts2/src/main/webapp/WEB-INF/jsp/poll/displayDateChoice.jsp =================================================================== --- trunk/pollen-ui-struts2/src/main/webapp/WEB-INF/jsp/poll/displayDateChoice.jsp 2012-06-19 13:22:18 UTC (rev 3528) +++ trunk/pollen-ui-struts2/src/main/webapp/WEB-INF/jsp/poll/displayDateChoice.jsp 2012-06-19 13:22:34 UTC (rev 3529) @@ -29,26 +29,18 @@ <s:set id='upTitle'><s:text name="pollen.action.pollChoiceUp"/></s:set> <s:set id='downTitle'><s:text name="pollen.action.pollChoiceDown"/></s:set> <div id='choicesDATE_<s:property value="choiceNumber"/>' - class="ui-state-default"> + class="ui-state-default choicesDiv"> <s:hidden key='%{#prefix}.topiaId' value='%{choice.topiaId}' label=''/> <s:hidden key='%{#prefix}.order' value='%{#choiceNumber}' label=''/> <div class="fleft choiceName"> - <span class="choicesImage ui-icon ui-icon-arrowthick-2-n-s"></span> + <span class="moveImage ui-icon ui-icon-arrowthick-2-n-s"></span> <s:label for="%{#prefix}.name" id="choicesDATE_label_%{choiceNumber}" theme="simple" value=''/> <sj:datepicker id='%{#prefix}.name' key="%{#prefix}.name" changeMonth="true" changeYear="true" labelSeparator="" theme="simple" label="" timepicker="true" value="%{choice.date}" displayFormat="%{getText('pollen.common.datePickerPattern')}"/> - - - <s:label for="%{#prefix}.description" key="pollen.common.description" - theme="simple"/> </div> - <div class="fleft"> - <s:textarea cols="30" id="%{#prefix}.description" - key="%{#prefix}.description" label='' theme="simple" - value="%{choice.description}"/> - </div> <div class="fright"> <%--s:a id='choicesDATE_down_%{choiceNumber}' cssClass="hidden" href='#' @@ -63,6 +55,11 @@ title='<s:property value="upTitle"/>' src="<s:url value='/img/1uparrow.png'/>"></image> </s:a--%> + <s:label for="%{#prefix}.description" key="pollen.common.description" + theme="simple"/> + <s:textarea cols="30" id="%{#prefix}.description" + key="%{#prefix}.description" label='' theme="simple" + value="%{choice.description}"/> <s:a href='#' onclick="return deleteChoice('choicesDATE_%{choiceNumber}')"> <image alt='<s:property value="deleteTitle"/>' title='<s:property value="deleteTitle"/>' Modified: trunk/pollen-ui-struts2/src/main/webapp/WEB-INF/jsp/poll/displayImageChoice.jsp =================================================================== --- trunk/pollen-ui-struts2/src/main/webapp/WEB-INF/jsp/poll/displayImageChoice.jsp 2012-06-19 13:22:18 UTC (rev 3528) +++ trunk/pollen-ui-struts2/src/main/webapp/WEB-INF/jsp/poll/displayImageChoice.jsp 2012-06-19 13:22:34 UTC (rev 3529) @@ -29,33 +29,28 @@ <s:set id='upTitle'><s:text name="pollen.action.pollChoiceUp"/></s:set> <s:set id='downTitle'><s:text name="pollen.action.pollChoiceDown"/></s:set> <div id='choicesIMAGE_<s:property value="choiceNumber"/>' - class="ui-state-default"> + class="ui-state-default choicesImageDiv"> <s:hidden key='%{#prefix}.topiaId' value='%{choice.topiaId}' label=''/> <s:hidden key='%{#prefix}.order' value='%{#choiceNumber}' label=''/> <div class="fleft choiceName"> - <span class="choicesImage ui-icon ui-icon-arrowthick-2-n-s"></span> - <s:label for="%{#prefix}.name" id="choicesIMAGE_label_%{choiceNumber}" - theme="simple" value=''/> - <s:url id="imageUrl" namespace="/io" action="getPollChoiceImage" - escapeAmp="false" value="/img/7ter.jpg"/> - <img name="<s:property value="#prefix"/>.thumb" - alt="<s:text name='pollen.image.not.loaded'/>" - title="<s:text name='pollen.image.not.loaded'/>" - src="<s:property value='imageUrl'/>" width="100px" height="75"> - <span style="float: left; margin-left:50px; "> - <s:file key='%{#prefix2}' label='' - theme="simple" - cssClass="nameField" - disabled="%{voteStarted}" cssStyle="clear: both;"/> - </span> + <div class="fleft"> + <span class="moveImage ui-icon ui-icon-arrowthick-2-n-s"></span> + <s:label for="%{#prefix}.name" id="choicesIMAGE_label_%{choiceNumber}" + theme="simple" value=''/> + </div> + <div class="fright"> + <s:url id="imageUrl" namespace="/io" action="getPollChoiceImage" + escapeAmp="false" value="/img/7ter.jpg"/> + <img name="<s:property value="#prefix"/>.thumb" + alt="<s:text name='pollen.image.not.loaded'/>" + title="<s:text name='pollen.image.not.loaded'/>" + src="<s:property value='imageUrl'/>" width="100px" height="75" + class="fright choiceImage"> + <s:file key='%{#prefix2}' label='' + theme="simple" + cssClass="hidden"/> + </div> </div> - <div class="fleft"> - - - <s:label for="%{#prefix}.description" key="pollen.common.description" - theme="simple"/> - <s:textarea cols="30" id="%{#prefix}.description" label='' theme="simple" - key="%{#prefix}.description" value="%{choice.description}"/> - </div> <div class="fright"> <%--s:a id='choicesIMAGE_down_%{choiceNumber}' cssClass="hidden" href='#' @@ -70,6 +65,10 @@ title='<s:property value="upTitle"/>' src="<s:url value='/img/1uparrow.png'/>"></image> </s:a--%> + <s:label for="%{#prefix}.description" key="pollen.common.description" + theme="simple"/> + <s:textarea cols="30" id="%{#prefix}.description" label='' theme="simple" + key="%{#prefix}.description" value="%{choice.description}"/> <s:a href='#' onclick="return deleteChoice('choicesIMAGE_%{choiceNumber}')"> <image alt='<s:property value="deleteTitle"/>' title='<s:property value="deleteTitle"/>' Modified: trunk/pollen-ui-struts2/src/main/webapp/WEB-INF/jsp/poll/displayTextChoice.jsp =================================================================== --- trunk/pollen-ui-struts2/src/main/webapp/WEB-INF/jsp/poll/displayTextChoice.jsp 2012-06-19 13:22:18 UTC (rev 3528) +++ trunk/pollen-ui-struts2/src/main/webapp/WEB-INF/jsp/poll/displayTextChoice.jsp 2012-06-19 13:22:34 UTC (rev 3529) @@ -28,22 +28,15 @@ <s:set id='upTitle'><s:text name="pollen.action.pollChoiceUp"/></s:set> <s:set id='downTitle'><s:text name="pollen.action.pollChoiceDown"/></s:set> <div id='choicesTEXT_<s:property value="choiceNumber"/>' - class="ui-state-default"> + class="ui-state-default choicesDiv"> <s:hidden key='%{#prefix}.topiaId' value='%{choice.topiaId}' label=''/> <s:hidden key='%{#prefix}.order' value='%{#choiceNumber}' label=''/> <div class="fleft choiceName"> - <span class="choicesImage ui-icon ui-icon-arrowthick-2-n-s"></span> + <span class="moveImage ui-icon ui-icon-arrowthick-2-n-s"></span> <s:label for="%{#prefix}.name" id="choicesTEXT_label_%{choiceNumber}" theme="simple" value=''/> <s:textfield cssClass="nameField" id='%{#prefix}.name' key="%{#prefix}.name" label='' theme="simple" value="%{choice.name}"/> - - - <s:label for="%{#prefix}.description" key="pollen.common.description" - theme="simple"/> - <%--/div> - <div class="fleft"--%> - <s:textarea cols="30" id="%{#prefix}.description" label='' theme="simple" - key="%{#prefix}.description" value="%{choice.description}"/> </div> <div class="fright"> <%--s:a id='choicesTEXT_down_%{choiceNumber}' @@ -59,6 +52,10 @@ title='<s:property value="upTitle"/>' src="<s:url value='/img/1uparrow.png'/>"></image> </s:a--%> + <s:label for="%{#prefix}.description" key="pollen.common.description" + theme="simple"/> + <s:textarea cols="30" id="%{#prefix}.description" label='' theme="simple" + key="%{#prefix}.description" value="%{choice.description}"/> <s:a href='#' onclick="return deleteChoice('choicesTEXT_%{choiceNumber}')"> <image alt='<s:property value="deleteTitle"/>' title='<s:property value="deleteTitle"/>' Modified: trunk/pollen-ui-struts2/src/main/webapp/css/pollCreation.css =================================================================== --- trunk/pollen-ui-struts2/src/main/webapp/css/pollCreation.css 2012-06-19 13:22:18 UTC (rev 3528) +++ trunk/pollen-ui-struts2/src/main/webapp/css/pollCreation.css 2012-06-19 13:22:34 UTC (rev 3529) @@ -20,10 +20,40 @@ * along with this program. If not, see <http://www.gnu.org/licenses/>. * #L% */ -.choicesImage { position: absolute; margin-left: 1.3em; } -.choices div { height: 4em; line-height: 1.2em; } -.ui-state-highlight { height: 4em; line-height: 1.2em; } +/* override jquery-ui.css */ +.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { + font-size: 0.9em; +} + +.choicesImageDiv { + height: 6em; +} + +.choiceImage { + margin-left: 30px; +} + +.moveImage { + /*position: absolute; */ + margin-left: 1.3em; + margin-bottom: 14px; +} + +.choiceName label { + margin-left: 5px; +} + +.choicesDiv { + height: 4em; + line-height: 1.2em; +} + +div.ui-state-highlight { + height: 4em; + line-height: 1.2em; +} + #pollCreationZone { width: 550px; margin: auto; Modified: trunk/pollen-ui-struts2/src/main/webapp/js/createPoll.js =================================================================== --- trunk/pollen-ui-struts2/src/main/webapp/js/createPoll.js 2012-06-19 13:22:18 UTC (rev 3528) +++ trunk/pollen-ui-struts2/src/main/webapp/js/createPoll.js 2012-06-19 13:22:34 UTC (rev 3529) @@ -349,6 +349,16 @@ $('#choicesDATE .wwgrp').remove(); } + + if (containerId == 'choicesIMAGE') { + + getAllChoices(containerId).each(function (index) { + var imageChoice = $('[name="imageChoice_' + index + '.thumb"]'); + imageChoice.click(function(){ + $('#registerForm_imageChoice_' + index + '_').click(); + }); + }); + } updateUpdownActions(containerId); }
participants (1)
-
sletellier＠users.chorem.org