adding client logo

cmsWebApp/webroot/css/common.css

@@ -4942,6 +4942,90 @@ label, label .label-title span {
 }
 /* End of Clients HT010 */
 
+
+/*Client edit*/
+
+.client-form-area {
+    background-color: #ffffff;
+    display: inline-block;
+    padding: 7.8% 7.8% 6.1%;
+    width: 100%;
+}
+
+.client-form-area label{
+    font-weight: normal;
+    margin-bottom: 7px;
+}
+
+.client-update-btn{
+    margin-bottom: 0;
+    clear: both;
+}
+
+.client-update-btn input.btn.btn-primary {
+    margin-top: 3.1%;
+}
+
+.main-upload-logo span{
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.upload-img-w-h{}
+
+.u-img-tag{
+    border: 1px dashed #dbdbdf;
+    border-radius: 2px;
+    width: 315px;
+    height: 94px;
+    position: relative;
+    margin-right: 17px;
+}
+
+.up-rep-btn {
+    position: relative;
+    top: -3px;
+}
+
+.up-rep-btn a {
+    border: 1px solid #8e97a0;
+    border-radius: 100px;
+    color: #8e97a0;
+    font-size: 9px;
+    font-weight: 500;
+    letter-spacing: 0.8px;
+    padding: 7px 15px;
+    text-transform: uppercase;
+}
+
+.remove-logo-btn {
+    background: #fff none repeat scroll 0 0;
+    border: 1px solid #8e97a0;
+    border-radius: 100px;
+    height: 28px;
+    line-height: 24px;
+    position: absolute;
+    right: -14px;
+    text-align: center;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 28px;
+    z-index: 1;
+}
+
+.client-form-area label
+{
+    font-family: "Usual-Regular";
+}
+
+.client-form-area .fileLink
+{
+    display: none;
+}
+
+
+/*Client edit end*/
+
 .hire-the-right-candi {
   height: 75px;
   font-family: Usual-Medium;
@@ -5090,3 +5174,7 @@ label, label .label-title span {
 .no-height{
   height: 0; 
 }
+
+input{
+    font-family: "Usual-Light";
+}
\ No newline at end of file

cmsWebApp/webroot/extensions/adminportal/edit_client.jsp

@@ -23,27 +23,70 @@
     
     String  nextPage    =   WebUtils.getSamePageInRenderMode(request, "Page");
 %>
+
+<script>
+    $(document).ready(function() 
+    {
+        recalcFunction = setupRecalc ($("form"), {'recalcOnError':true});
+
+        $("#upload").change(function(){
+            readURL(this);
+        });
+        
+        $("#remove-logo").click(function(){
+            $('#client-logo').attr('src', '');
+            var input = $("#upload");
+            input.replaceWith(input.val('').clone(true));
+        });
+    });
+    
+    
+    function readURL(input) {
+        if (input.files && input.files[0]) 
+        {
+            var reader = new FileReader();
+
+            reader.onload = function (e) {
+                $('#client-logo').attr('src', e.target.result);
+            }
+
+            reader.readAsDataURL(input.files[0]);
+        }
+    }
+</script>
     <div class="container-fluid">
         <div class="row content">
             <div class="main-content-area">
-                <h1 class="page-title">Client</h1>        
+                <h1 class="page-title"><%= "Client" + (client.getClientName() != null ? " - " + client.getClientName() : "") %></h1>  
+                <div class="client-form-area">
                     <oneit:form name="editClient" method="post"    enctype="multipart/form-data">
                         <div style="padding-left: 15px; padding-right: 15px;">
                             <oneit:dynInclude   page="/extensions/applicantportal/inc/multifieldtext.jsp"   data="<%= CollectionUtils.EMPTY_MAP%>"/>
                         </div>
-                    <div class="form-page-area">
-                        <div class="create-job">
-                            <div class="assessment-criteria">
-                                <div class="form-group">
-                                    <label class="label-16">Details</label>                
-                                </div>              
                         <div class="form-group">
                             <label><oneit:label GUIName="Client Name" /></label>
                             <oneit:ormInput obj="<%= client %>" type="text" attributeName="ClientName"   cssClass="form-control" />                                
                         </div>
                         <div class="form-group">
                             <label><oneit:ormlabel  obj="<%= client %>" field="ClientLogo" /></label>
-                                    <oneit:ormInput obj="<%= client %>" type="file" attributeName="ClientLogo"  accept="image/*"/>
+                            <div class="main-upload-logo">
+                                <span class="u-img-tag">
+                                    <tagfile:img    src="<%= ThumbnailUtils.filterImage(DiskFileBinaryContent.getRelativeURL(client.getClientLogo()), "KEEP", new ScaleWithin (0,0)) %>"
+                                                    class="upload-img-w-h"  id="client-logo"/>
+                                    <span class="remove-logo-btn">
+                                        <img src="images/logo-remove-btn.png" id="remove-logo">
+                                    </span>
+                                </span>
+
+                                <span class="up-rep-btn">
+                                    <oneit:ormInput obj="<%= client %>" type="file" attributeName="ClientLogo"  accept="image/*"    id="upload"
+                                                    style="visibility: hidden; width: 1px; height: 1px"/>
+                                    <a href="javascript:void(0)" onclick="document.getElementById('upload').click(); return false">
+                                        Replace
+                                     </a>
+                                </span>
+                            </div>
+                                    
                         </div>
 
                         <div class="form-brack-line-sub"></div>
@@ -97,11 +140,9 @@
                             <oneit:button   value="Save Updates"    name="save" cssClass="btn btn-primary largeBtn"
                                             requestAttribs="<%= CollectionUtils.mapEntry("nextPage", nextPage).toMap() %>" />
                         </div> 
-                            </div>
-                        </div>
-                    </div>
                     </oneit:form>
                 </div>
             </div>
         </div>
+    </div>
 </oneit:dynIncluded>