修改上传文件样式

2015-03-27 09:32:13 +08:00 · 2015-03-27 09:32:13 +08:00 · 519c119543
parent a99dda837a
commit 519c119543
5 changed files with 85 additions and 6 deletions
--- a/app/views/attachments/_new_form.html.erb
+++ b/app/views/attachments/_new_form.html.erb
@ -0,0 +1,52 @@
+<span id="attachments_fields" class="attachments_fields">
+    <% if defined?(container) && container && container.saved_attachments %>
+      <% container.attachments.each_with_index do |attachment, i| %>
+        <span id="attachments_p<%= i %>">
+          <%= text_field_tag("attachments[p#{i}][filename]", attachment.filename, :class => 'filename link_file', :readonly=>'readonly')%>
+          <%= text_field_tag("attachments[p#{i}][description]", attachment.description, :maxlength => 254, :placeholder => l(:label_optional_description), :class => 'description', :style=>"display: inline-block;") %>
+          <span class="ispublic-label"><%= l(:field_is_public)%>:</span>
+          <%= check_box_tag("attachments[p#{i}][is_public_checkbox]", attachment.is_public,attachment.is_public == 1 ? true : false,:class => 'is_public')%>
+          <%= link_to('&nbsp;'.html_safe, attachment_path(attachment, :attachment_id => "p#{i}", :format => 'js'), :method => 'delete', :remote => true, :class => 'remove-upload') unless attachment.id.nil? %>
+          <%= hidden_field_tag "attachments[p#{i}][token]", "#{attachment.token}" %>
+        </span>
+  <% end %>
+      <% container.saved_attachments.each_with_index do |attachment, i| %>
+        <span id="attachments_p<%= i %>">
+          <%= text_field_tag("attachments[p#{i}][filename]", attachment.filename, :class => 'filename readonly', :readonly=>'readonly')%>
+          <%= text_field_tag("attachments[p#{i}][description]", attachment.description, :maxlength => 254, :placeholder => l(:label_optional_description), :class => 'description', :style=>"display: inline-block;") %>
+          <span class="ispublic-label"><%= l(:field_is_public)%>:</span>
+          <%= check_box_tag("attachments[p#{i}][is_public_checkbox]", attachment.is_public,attachment.is_public == 1 ? true : false,:class => 'is_public')%>
+          <%= link_to('&nbsp;'.html_safe, attachment_path(attachment, :attachment_id => "p#{i}", :format => 'js'), :method => 'delete', :remote => true, :class => 'remove-upload') unless attachment.id.nil? %>
+          <%= hidden_field_tag "attachments[p#{i}][token]", "#{attachment.token}" %>
+        </span>
+  <% end %>
+<% end %>
+</span>
+<% project = project %>
+<span class="add_attachment" style="font-weight:normal;">
+  <%= button_tag "文件浏览", :type=>"button", :onclick=>"_file.click()",:onmouseover => 'this.focus()',:class => 'sub_btn' %>
+  <%= file_field_tag 'attachments[dummy][file]',
+                     :id => '_file',
+                     :class => 'file_selector',
+                     :multiple => true,
+                     :onchange => 'addInputFiles(this);',
+                     :style => 'display:none',
+                     :data => {
+                             :max_file_size => Setting.attachment_max_size.to_i.kilobytes,
+                             :max_file_size_message => l(:error_attachment_too_big, :max_size => number_to_human_size(Setting.attachment_max_size.to_i.kilobytes)),
+                             :max_concurrent_uploads => Redmine::Configuration['max_concurrent_ajax_uploads'].to_i,
+                             :upload_path => uploads_path(:format => 'js',:project =>project),
+                             :description_placeholder => l(:label_optional_description)
+                     } %>
+  <span id="upload_file_count">
+      <%= l(:label_no_file_uploaded)%>
+    </span>
+    (<%= l(:label_max_size) %>:
+  <%= number_to_human_size(Setting.attachment_max_size.to_i.kilobytes) %>)
+</span>
+
+<% content_for :header_tags do %>
+    <%= javascript_include_tag 'attachments' %>
+<% end %>
+
+
--- a/app/views/bids/_new_homework_form.html.erb
+++ b/app/views/bids/_new_homework_form.html.erb
@ -34,7 +34,7 @@
    </li>
    <li class="ml45">
      <label>&nbsp;&nbsp;<%= l(:label_attachment_plural) %>&nbsp;&nbsp;：</label>
-      <%= render :partial => 'attachments/form', :locals => {:container => bid} %>
+      <%= render :partial => 'attachments/new_form', :locals => {:container => bid} %>
    </li>
    <li class=" ml90" >
      <a class="blue_btn fl c_white" onclick="submit_new_bid('<%= bid_id%>');" href="#"><%= l(:button_create)%></a>
--- a/public/javascripts/attachments.js
+++ b/public/javascripts/attachments.js
@ -22,10 +22,10 @@ function addFile(inputEl, file, eagerUpload) {

    fileSpan.append(
        $('<input>', { 'type': 'text', 'class': 'filename readonly', 'name': 'attachments[' + attachmentId + '][filename]', 'readonly': 'readonly'} ).val(file.name),
-        $('<input>', { 'type': 'text', 'class': 'description', 'name': 'attachments[' + attachmentId + '][description]', 'maxlength': 254, 'placeholder': $(inputEl).data('description-placeholder') } ).toggle(!eagerUpload),
-        $('<span >公开:</span>').attr({  'class': 'ispublic-label' }) ,
-        $('<input>', { 'type': 'checkbox', 'class': 'is_public_checkbox','value':1, 'name': 'attachments[' + attachmentId + '][is_public_checkbox]', checked:'checked' } ).toggle(!eagerUpload),
-        $('<a>&nbsp</a>').attr({ 'href': "#", 'class': 'remove-upload', 'data-confirm' : "您确定要删除吗？" }).click(removeFile).toggle(!eagerUpload),
+        $('<input>', { 'type': 'text', 'class': 'description','style':'margin-left: 9px;', 'name': 'attachments[' + attachmentId + '][description]', 'maxlength': 254, 'placeholder': $(inputEl).data('description-placeholder') } ).toggle(!eagerUpload),
+        $('<span >公开:</span>').attr({  'class': 'ispublic-label ' ,'style':'margin-left: 15px;'}) ,
+        $('<input>', { 'type': 'checkbox', 'class': 'is_public_checkbox','style':'margin-left: 4px;','value':1, 'name': 'attachments[' + attachmentId + '][is_public_checkbox]', checked:'checked' } ).toggle(!eagerUpload),
+        $('<a>&nbsp</a>').attr({ 'href': "#", 'class': 'remove-upload ml5','style':'margin-left: 5px;', 'data-confirm' : "您确定要删除吗？" }).click(removeFile).toggle(!eagerUpload),
        $('<div>', {  'class': 'div_attachments', 'name': 'div_'+'attachments_' + attachmentId} )
    ).appendTo('#attachments_fields');

@ -164,9 +164,11 @@ function addInputFiles(inputEl) {

    if (inputEl.files) {
        // upload files using ajax
+        //alert("11");
        uploadAndAttachFiles(inputEl.files, inputEl);
     //   $(inputEl).remove();
    } else {
+        //alert("11");
        // browser not supporting the file API, upload on form submission
        var attachmentId;
        var aFilename = inputEl.value.split(/\/|\\/);
--- a/public/stylesheets/courses.css
+++ b/public/stylesheets/courses.css
@ -336,12 +336,34 @@ a:hover.st_add{ color:#ff8e15;}
 .upload_con h2{ display:block; background:#eaeaea; font-size:14px; color:#343333; height:31px; width: auto;  margin-top:25px; padding-left:20px; padding-top:5px;}
 .upload_box{ width:430px; margin:15px auto;}

-a.link_file{ background:url(../images/pic_file.png) 0 2px no-repeat; padding-left:20px; color:#64bdd9; }
 a:hover.link_file{ background:url(../images/pic_file.png) 0 -25px no-repeat; color:#3ca5c6;}
 .r_txt_tit{width:500px; overflow:hidden; white-space: nowrap; text-overflow:ellipsis;color:#15bccf; float:left; color:#09658c; font-size:14px;}

 blockquote {background: #eeeeee;padding: 10px;margin-bottom: 10px;}

+#attachments_fields input.description {margin-left: 4px;width: 100px;}
+#attachments_fields span.ispublic-label {display: inline-block;width: 30px;margin-left: 10px;}
+a.remove-upload {background: url(../images/delete.png) no-repeat 1px 50%;width: 1px;display: inline-block;padding-left: 16px;}
+#attachments_fields input.filename {border: 0;height: 1.8em;width: 150px;color: #555;background-color: inherit;background: url(../images/attachment.png) no-repeat 1px 50%;padding-left: 18px;padding-top: 2px;}
+span.add_attachment {font-size: 80%;line-height: 2.5em;}
+#attachments_fields span {display: block;white-space: nowrap;}
+.file_selector{position: relative;opacity: 0;filter: alpha(opacity:0);}
+#attachments_fields .ajax-waiting input.filename {background:url(../images/hourglass.png) no-repeat 0px 50%;}
+#attachments_fields .ajax-loading input.filename {background:url(../images/loading.gif) no-repeat 0px 50%;}
+
+#attachments_fields div.ui-progressbar { width: 100px; height:14px; margin: 2px 0 -5px 8px; display: inline-block; }
+.ui-widget {
+    font-family: Verdana, sans-serif;
+    font-size: 1.1em;
+}
+.ui-widget-content {
+    border: 1px solid #ddd;
+    color: #333;
+}
+.ui-progressbar-value{margin:-1px;height:100%}
+.ui-widget-header{border:1px solid #628db6;background:#759fcf url(jquery/images/ui-bg_gloss-wave_35_759fcf_500x100.png) 50% 50% repeat-x;color:#fff;font-weight:bold}
+.ui-corner-left,.ui-corner-tl{-moz-border-radius-topleft:4px;-webkit-border-top-left-radius:4px;-khtml-border-top-left-radius:4px;border-top-left-radius:4px}
+.link_file{ background:url(../images/pic_file.png) 0 7px no-repeat !important; padding-left:20px !important; color:#64bdd9 !important; }



--- a/public/stylesheets/public.css
+++ b/public/stylesheets/public.css
@ -14,7 +14,10 @@ a:hover,a:active{color:#000;}
 .f_l{ float:left;}
 .f_r{ float:right;}
 .ml2{ margin-left:2px;}
+.ml3{ margin-left:3px;}
+.ml4{ margin-left:4px;}
 .ml5{ margin-left:5px;}
+.ml8{ margin-left:8px;}
 .ml10{ margin-left:10px;}
 .ml15{ margin-left:15px;}
 .ml20{ margin-left:20px;}