start restyling history page

weld · Jun 18, 2010 · c2a51dc · c2a51dc
1 parent 9c6ddb9
commit c2a51dc
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 34 deletions.
diff --git a/jsf/pastecode/src/main/webapp/history.xhtml b/jsf/pastecode/src/main/webapp/history.xhtml
@@ -64,39 +64,48 @@
 
 	<ui:define name="rightmenu">
 
-		<div id="rightmenuhead" style="width: 350px;"><strong>Search:</strong>
-		</div>
+		<div class="searchParams">
+      <div class="searchParamsHeader">Refine search</div>
 
-		<div id="rightmenubody" style="width: 350px;"><h:panelGrid
-			cellpadding="0" cellspacing="0" columns="2" width="100%">
-			<h:outputLabel for="user" value="User:"></h:outputLabel>
-			<h:inputText id="user" maxlength="30" style="width:97%;"
-				value="#{history.codeFragmentPrototype.user}" />
-			<h:outputLabel for="language" value="Language:" />
-			<h:selectOneMenu id="language" value="#{history.codeFragmentPrototype.language}">
-			   <f:selectItem itemLabel="Any" itemValue="" />
-				<f:selectItems value="#{languages}" var="language"
-					itemLabel="#{language.name}" itemValue="#{language}" />
-			</h:selectOneMenu>
-			<h:outputLabel for="note" value="Note:"></h:outputLabel>
-			<h:inputText id="note" maxlength="30" style="width:97%;"
-				value="#{history.codeFragmentPrototype.note}" />
-			<h:outputLabel for="pasteDate" value="Date: " />
-			<h:inputText value="#{history.codeFragmentPrototype.datetime}" id="pasteDate"
-				style="width:97%;" alt="yyyy-mm-dd" title="yyyy-mm-dd"
-				converterMessage="Enter date formatted as yyyy-mm-dd !">
-				<f:convertDateTime type="date" pattern="yyyy-MM-dd" />
-			</h:inputText>
-			<h:outputLabel for="code" value="Code:" style="width:100%;"></h:outputLabel>
-			<h:inputTextarea id="code" maxlength="30" rows="2" style="width:97%;"
-				value="#{history.codeFragmentPrototype.text}">
-				<f:validateBean disabled="true" />
-		   </h:inputTextarea>
-		</h:panelGrid>
-		<div style="width: 100%; text-align: right;"><h:commandButton
-			value="Search" action="#{history.newSearch}" /></div>
-		<br />
-		<h:message for="pasteDate" /></div>
+      <div class="searchParam">
+			  <h:outputLabel for="user" value="User:"/>
+			  <h:inputText id="user" maxlength="30" value="#{history.codeFragmentPrototype.user}" />
+		  </div>
+
+      <div class="searchParam">
+			  <h:outputLabel for="language" value="Language:" />
+			  <h:selectOneMenu id="language" value="#{history.codeFragmentPrototype.language}">
+			     <f:selectItem itemLabel="Any" itemValue="" />
+				  <f:selectItems value="#{languages}" var="language"
+					  itemLabel="#{language.name}" itemValue="#{language}" />
+			  </h:selectOneMenu>
+			</div>
+
+      <div class="searchParam">
+			  <h:outputLabel for="pasteDate" value="Date: " />
+			  <h:inputText value="#{history.codeFragmentPrototype.datetime}" id="pasteDate"
+				  alt="yyyy-mm-dd" title="yyyy-mm-dd"
+				  converterMessage="Enter date formatted as yyyy-mm-dd !">
+				  <f:convertDateTime type="date" pattern="yyyy-MM-dd" />
+			  </h:inputText>
+			</div>
+
+      <div class="searchParam">
+			  <h:outputLabel for="code" value="Code:" style="width:100%;"/>
+			  <h:inputTextarea id="code" maxlength="30" rows="2"
+				  value="#{history.codeFragmentPrototype.text}">
+				  <f:validateBean disabled="true" />
+        </h:inputTextarea>
+      </div>
+
+      <div class="searchParamButtons">
+	  	  <h:commandButton action="#{history.newSearch}" image="img/search.png"/>
+	  	</div>
+
+  		<h:message for="pasteDate" />
+
+  		<br style="clear:both"/>
+    </div>
 
 	</ui:define>
 

diff --git a/jsf/pastecode/src/main/webapp/home.xhtml b/jsf/pastecode/src/main/webapp/home.xhtml
@@ -26,7 +26,7 @@
 			</div>
 
       <div class="formRow">
-  	    <h:outputLabel for="secured" value="Exposure"/>
+  	    <h:outputLabel for="exposure" value="Exposure"/>
   	    <h:selectOneMenu id="exposure" value="#{pasteWindow.privateFragment}">
   	      <f:selectItem itemValue="#{true}" itemLabel="Private"/>
   	      <f:selectItem itemValue="#{false}" itemLabel="Public"/>

diff --git a/jsf/pastecode/src/main/webapp/img/search.png b/jsf/pastecode/src/main/webapp/img/search.png
diff --git a/jsf/pastecode/src/main/webapp/style/style.css b/jsf/pastecode/src/main/webapp/style/style.css
@@ -116,7 +116,6 @@ div.contentHeader a, div.contentHeader a:visited, div.contentHeader a:hover {
 
 div.formRow {
   padding: 3px 4px 3px 2px;  
-/*  clear: both;*/
 }
 
 div.formRow label {
@@ -191,5 +190,56 @@ span.recentPasteLang {
   color: #000000;
 }
 
+/** Search params styles */
 
+div.searchParams {
+  width: 230px;
+  background-color: #ffffff;
+  padding: 0px;
+  border: 0px;
+}
+
+div.searchParamsHeader {
+  background-color: #cccccc;
+  color: #000000;
+  font-weight: bold;
+  padding: 4px;
+  border: 0px;
+}
+
+div.searchParam {
+  padding: 3px 4px 3px 2px;  
+}
+
+div.searchParam label {
+  float: left;
+  width: 100px; 
+  padding: 4px 2px 2px 2px;
+}
+
+div.searchParam input[type='text'] {
+  width: 100px;
+  background-color: #fafafc;
+	border: 1px solid #cccccc;  
+	padding: 4px;
+}
+
+div.searchParam textarea {
+  width: 210px;
+  background-color: #fafafc;
+	border: 1px solid #cccccc;  
+	padding: 4px;
+}
+
+div.searchParam select {
+  width: 110px;
+  background-color: #fafafc;
+	border: 1px solid #cccccc;  
+	padding: 4px;	
+}
+
+div.searchParamButtons {
+  float: right;
+  padding: 4px 8px 16px 2px;
+}