班级资源的上传资源弹框改版

app/views/files/_new_style_attachment_list.html.erb

@@ -23,12 +23,8 @@
 </span>
 <!--<input type="submit" name="" value="上传文件" class="f_l ml10" style="width:80px; height:26px;">-->
 
-<span id="upload_file_count<%=container.id %>">
-      <%= l(:label_no_file_uploaded)%>
-    </span>
-<span class="fr c_blue" style="margin-right: <%= container.class.to_s == 'Course' ? 58 : 45 %>px;">单个文件最大限制:<%= number_to_human_size(Setting.attachment_max_size.to_i.kilobytes) %></span>
+<span class="fr c_blue" style="margin-right: <%= container.class.to_s == 'Course' ? 26 : 45 %>px;">单个文件最大限制:<%= number_to_human_size(Setting.attachment_max_size.to_i.kilobytes) %></span>
 <div class="cl"></div>
 <div>
-     <span id="attachments_fields<%= container.id %>" data-containerid="<%= container.id %>" xmlns="http://www.w3.org/1999/html">
-</span>
+  <span id="attachments_fields<%= container.id %>" data-containerid="<%= container.id %>" xmlns="http://www.w3.org/1999/html"></span>
 </div>

app/views/files/_upload_course_files.erb

@@ -1,47 +1,46 @@
 <script src="/javascripts/jquery.datetimepicker.js" type="text/javascript"></script>
-<div id="muban_popup_box" style="width:450px;">
-  <div class="muban_popup_top">
-    <h3 class="fl">上传资源</h3>
-    <a href="javascript:void(0);" class="muban_icons_close fr" onclick="$('#datetimepicker_mask').datetimepicker('destroy');"></a>
-    <div class="cl"></div>
+<div class="task-popup" style="width:450px;">
+  <div class="task-popup-title clearfix">
+    <h3 class="fl color-grey">上传资源</h3>
+    <a href="javascript:void(0);" onclick="$('#datetimepicker_mask').datetimepicker('destroy');" class="pop_close"><i class="fa fa-times-circle font-18 link-color-grey fr mt5"></i></a>
   </div>
 
-  <div class="muban_popup_con clear mt15 ml55">
-    <div class="">
+  <div class="task-popup-content clear">
+    <div class="ml15">
       <%= error_messages_for 'attachment' %>
       <div id="network_issue" style="color: red; display: none;"><%= l(:label_file_upload_error_messages)%></div>
 
-      <%= form_tag(course_files_path(course), :multipart => true,:remote => !ie8?,:name=>"upload_form") do %>
+      <%= form_tag(course_files_path(course), :multipart => true,:remote => !ie8?,:id=>"upload_course_file_form") do %>
           <input type="hidden" name="in_course_toolbar" value="Y">
           <!--<p class="c_grey fr mt10 mr5">-->
           <ul class="c_dark mt10 mb10 f14 attachment_type_ul">
             <li class="fl">
-              <input id="atta_type_1" name="course_attachment_type[]" type="checkbox" value="1" checked class="fl" />
-              <label for="atta_type_1" class="c_grey fl ml5">课件&nbsp;|&nbsp;</label>
+              <input id="atta_type_1" name="course_attachment_type[]" type="checkbox" value="1" checked class="fl magic-checkbox" />
+              <label for="atta_type_1" class="c_grey fl">课件&nbsp;|&nbsp;</label>
             </li>
             <li class="fl">
-              <input id="atta_type_2" name="course_attachment_type[]" type="checkbox" value="2" class="fl"/>
-              <label for="atta_type_2" class="c_grey fl ml5">软件&nbsp;|&nbsp;</label>
+              <input id="atta_type_2" name="course_attachment_type[]" type="checkbox" value="2" class="fl magic-checkbox"/>
+              <label for="atta_type_2" class="c_grey fl">软件&nbsp;|&nbsp;</label>
             </li>
             <li class="fl">
-              <input id="atta_type_3" name="course_attachment_type[]" type="checkbox" value="3" class="fl"/>
-              <label for="atta_type_3" class="c_grey fl ml5">媒体&nbsp;|&nbsp;</label>
+              <input id="atta_type_3" name="course_attachment_type[]" type="checkbox" value="3" class="fl magic-checkbox"/>
+              <label for="atta_type_3" class="c_grey fl">媒体&nbsp;|&nbsp;</label>
             </li>
             <li class="fl">
-              <input id="atta_type_4" name="course_attachment_type[]" type="checkbox" value="4" class="fl"/>
-              <label for="atta_type_4" class="c_grey fl ml5">代码&nbsp;|&nbsp;</label>
+              <input id="atta_type_4" name="course_attachment_type[]" type="checkbox" value="4" class="fl magic-checkbox"/>
+              <label for="atta_type_4" class="c_grey fl">代码&nbsp;|&nbsp;</label>
             </li>
             <li class="fl">
-              <input id="atta_type_5" name="course_attachment_type[]" type="checkbox" value="5" class="fl"/>
-              <label for="atta_type_5" class="c_grey fl ml5">论文&nbsp;|&nbsp;</label>
+              <input id="atta_type_5" name="course_attachment_type[]" type="checkbox" value="5" class="fl magic-checkbox"/>
+              <label for="atta_type_5" class="c_grey fl">论文&nbsp;|&nbsp;</label>
             </li>
             <li class="fl">
-              <input id="atta_type_6" name="course_attachment_type[]" type="checkbox" value="6" class="fl"/>
-              <label for="atta_type_6" class="c_grey fl ml5">其他</label>
+              <input id="atta_type_6" name="course_attachment_type[]" type="checkbox" value="6" class="fl magic-checkbox"/>
+              <label for="atta_type_6" class="c_grey fl">其他</label>
             </li>
           </ul>
           <div class="cl"></div>
-          <div class="mb10">
+          <div class="mb10 mt10">
           <%= render :partial => 'files/new_style_attachment_list',:locals => {:container => course} %>
           </div>
           <div class="cl"></div>
@@ -62,13 +61,13 @@
           <div class="mb10">
             <label class="fl c_dark f14" style="margin-top: 4px;">附件描述：</label>
             <div class="fl ml10">
-              <textarea name="description" placeholder="介绍一下您的资源，让它得到更多人的青睐吧~" style="width: 249px; height: 60px; font-size: 12px;" class="InputBox fl"></textarea>
+              <textarea name="description" placeholder="介绍一下您的资源，让它得到更多人的青睐吧~" style="width: 291px; height: 60px; font-size: 12px;" class="InputBox fl"></textarea>
             </div>
             <div class="cl"></div>
           </div>
-
-          <a href="javascript:void(0);" class="fr sy_btn_blue" style="margin-right: 59px;" id="submit_resource" onclick="submit_course_resource();">确定</a>
-          <a href="javascript:void(0);" class="fr sy_btn_grey mr5" onclick="$('#datetimepicker_mask').datetimepicker('destroy');hideModal();">取消</a>
+          <span id="upload_file_count_notice" class="fl c_red none"></span>
+          <a href="javascript:void(0);" class="task-btn task-btn-blue fr" style="margin-right: 27px;" id="submit_resource" onclick="submit_course_resource();">确定</a>
+          <a href="javascript:void(0);" class="task-btn fr mr10" onclick="$('#datetimepicker_mask').datetimepicker('destroy');hideModal();">取消</a>
           <div class="cl"></div>
     <% end %>
     </div>
@@ -103,11 +102,25 @@
     function submit_course_resource()
     {
         <% if User.current.allowed_to?(:as_teacher,course) %>
-            if(regex_publish_time()) {
-                $('#submit_resource').parent().submit();
+            if($("#upload_course_file_form").find('.upload_filename').length == 0){
+                $("#upload_file_count_notice").html('请至少上传一个资源').show();
+                event.preventDefault();
+                return false;
+            }else{
+                $("#upload_file_count_notice").hide();
+                if(regex_publish_time()) {
+                    $('#submit_resource').parent().submit();
+                }
             }
         <% else %>
-            $('#submit_resource').parent().submit();
+            if($("#upload_course_file_form").find('.upload_filename').length == 0){
+                $("#upload_file_count_notice").html('请至少上传一个资源').show();
+                event.preventDefault();
+                return false;
+            }else {
+                $("#upload_file_count_notice").hide();
+                $('#submit_resource').parent().submit();
+            }
         <% end %>
     }
     function reset_publish_time(){

public/javascripts/attachments.js

@@ -35,11 +35,16 @@ function addFile_board(inputEl, file, eagerUpload, id,btnId) {
         });
 
         fileSpan.append(
+            $('<i></i>').attr({
+                'class': 'fa fa-folder mr5 color-light-grey',
+                'aria-hidden': true
+            }),
             $('<input>', {
                 'type': 'text',
-                'class': 'upload_filename readonly',
+                'class': 'upload_filename readonly hidden',
                 'name': 'attachments[' + attachmentId + '][filename]',
-                'readonly': 'readonly'
+                'readonly': 'readonly',
+                'style': 'border:none; max-width:300px;white-space: nowrap; text-overflow:ellipsis;'
             }).val(file.name),
 //            $('<input>', {
 //                'type': 'text',
@@ -58,10 +63,10 @@ function addFile_board(inputEl, file, eagerUpload, id,btnId) {
 //                'name': 'attachments[' + attachmentId + '][is_public_checkbox]',
 //                checked: 'checked'
 //            }).toggle(!eagerUpload),
-            $('<a>&nbsp</a>').attr({
+            $('<a><i class="fa fa-trash-o mr5"></i></a>').attr({
                 'href': "#",
                 'class': 'remove-upload',
-                'data-containerid': id
+                'style': 'vertical-align:top;'
             }).click(function() {
                 if (confirm($(inputEl).data('areYouSure'))) {
                     removeFile();
@@ -123,7 +128,7 @@ function addFile(inputEl, file, eagerUpload,btnId) {
                 'class': 'upload_filename readonly hidden',
                 'name': 'attachments[' + attachmentId + '][filename]',
                 'readonly': 'readonly',
-                'style': 'border:none; max-width:980px;white-space: nowrap; text-overflow:ellipsis;',
+                'style': 'border:none; max-width:980px;white-space: nowrap; text-overflow:ellipsis;'
             }).val(file.name),
 //            $('<input>', {
 //                'type': 'text',