[UI] modified some 'file upload' buttons

media/css/seahub.css

@@ -2245,12 +2245,10 @@ button.sf-dropdown-toggle:focus {
 #user-basic-info .avatar {
     margin-bottom:8px;
 }
-#user-avatar-change {
-    position:relative;
-}
 #user-avatar-form {
-    position:absolute;
+    display:inline-block;
-    top:5px;
+    vertical-align:text-top;
+    margin-left:10px;
 }
 #repo-file-list {
     margin-bottom:100px;
@@ -2700,7 +2698,6 @@ button.sf-dropdown-toggle:focus {
     background-color:#fff;
     background-position:0 -207px;
 }
-#user-avatar-input,
 #upload-file-form .files-add input {
     cursor:pointer;
     position: absolute;
@@ -2709,9 +2706,6 @@ button.sf-dropdown-toggle:focus {
     opacity: 0;
     filter: alpha(opacity=0);
 }
-#user-avatar-input {
-    right:0;
-}
 #upload-file-form .MultiFile-label {
     padding:4px 0;
     border-bottom:1px solid #ebebeb;
@@ -3690,15 +3684,6 @@ img.thumbnail {
     right:0;
     top:0;
 }
-.transparent-file-input {
-    position:absolute;
-    top:0;
-    right:0;
-    cursor:pointer;
-    margin:0;
-    opacity:0;
-    filter:alpha(opacity=0);
-}
 .web-setting-cur-img {
     margin-bottom:5px;
 }
@@ -3979,9 +3964,4 @@ img.thumbnail {
 /* system info */
 .license-file-upload {
     margin-top:5px;
-    position:relative;
-    overflow:hidden;
-}
-.license-file-upload-btn {
-    white-space:nowrap;
 }

seahub/api2/endpoints/admin/license.py

@@ -40,6 +40,6 @@ class AdminLicense(APIView):
             ccnet_api.reload_license()
         except Exception as e:
             logger.error(e)
-            error_msg = 'Interal Server Eerror'
+            error_msg = 'Internal Server Error'
             return api_error(status.HTTP_500_INTERNAL_SERVER_ERROR, error_msg)
         return Response({'success': True}, status=status.HTTP_200_OK)

seahub/profile/templates/profile/set_profile.html

@@ -30,9 +30,9 @@
     <h3>{% trans "Profile Setting" %}</h3>
     <div id="user-avatar-change">
         <label>{% trans "Avatar:" %}</label>{% avatar request.user.username 80 %}
-        <form id="user-avatar-form" enctype="multipart/form-data" method="post" action="{% url 'avatar_add' %}" class="ovhd">{% csrf_token %}
+        <form id="user-avatar-form" enctype="multipart/form-data" method="post" action="{% url 'avatar_add' %}">{% csrf_token %}
             <button type="button" id="user-avatar-chg-btn">{% trans "Change" %}</button>
-            <input type="file" name="avatar" id="user-avatar-input" />
+            <input type="file" name="avatar" id="user-avatar-input" class="hide" />
         </form>
     </div>
 
@@ -151,11 +151,52 @@
 {% block extra_script %}
 {% include 'snippets/avatar_upload_js.html' %}
 <script type="text/javascript">
-var cur_avatar = $('#user-avatar-change .avatar');
+// change avatar
-$('#user-avatar-form').css({'left':cur_avatar.position().left + cur_avatar.outerWidth() + 10});
+$('#user-avatar-chg-btn').click(function() {
+    $('#user-avatar-input').trigger('click');
+});
+$('#user-avatar-input').change(function() {
+    // check file extension
+    var file, filename, ext;
+    var allow = false;
+    var allowed_ext = ['jpg','jpeg', 'png', 'gif'];
+    if (this.files) { // IE: version lower than 10 doesn't have 'files'
+        file = this.files[0];
+        filename = file.name || file.fileName;
+    } else {
+        filename = this.value;
+    }
+    if (filename.lastIndexOf('.') != -1) { // ext exists
+        ext = filename.substr((filename.lastIndexOf('.') + 1)).toLowerCase();
+    }
+    if (ext) {
+        for (var i = 0, len = allowed_ext.length; i < len; i++) {
+            if (ext == allowed_ext[i]) {
+                allow = true;
+                break;
+            }
+        }
+    } else {
+        feedback(filename + "{% trans " is not supported. Please choose an image file." %}", 'error');
+        return false;
+    }
+
+    if (!allow) {
+        var err_msg = filename + "{% trans " is not supported. File extensions can only be " %}" + allowed_ext.join(', ');
+        feedback(err_msg, 'error');
+        return false;
+    }
+
+    // check if file size is less than 1MB
+    if (file && file.size > 1024*1024) {
+        feedback(filename + "{% trans " is too large. Allowed maximum size is 1MB." %}", 'error');
+        return false;
+    }
+
+    $('#user-avatar-form').submit();
+});
 
 $('#user-basic-info .submit').css({'margin-left': $('#user-basic-info label').outerWidth(true)});
-changeAvatar($('#user-avatar-chg-btn'), $('#user-avatar-input'), $('#user-avatar-form'));
 
 $('#account-delete-btn').click(function () {
     var title = "{% trans "Delete Account" %}",

seahub/templates/js/sysadmin-templates.html

@@ -113,8 +113,8 @@
                     {% trans "expires on" %} <%- license_expiration %>
                 <% } %>
                 <div class="license-file-upload">
-                    <input type="file" name="license" class="license-file-upload-input transparent-file-input" />
                     <button type="button" class="license-file-upload-btn">{% trans "Upload licence" %}</button>
+                    <input type="file" name="license" class="license-file-upload-input hide" />
                 </div>
             <% } else { %>
             {% trans "Community Edition" %}

seahub/templates/snippets/avatar_upload_js.html

@@ -1,60 +0,0 @@
-{% load i18n %}
-<script type="text/javascript">
-function changeAvatar(chg_btn, input, form) {
-    var chg_btn_orig_bg = chg_btn.css('background-color'); // ie 7,8: chg_btn.css('background') gets 'undefined'
-    form.css({'width': chg_btn.outerWidth()});
-    input
-    .css({'height': chg_btn.outerHeight()})
-    .hover(
-        function() {
-            chg_btn.css({'background': '#fff'});
-        },
-        function() {
-            chg_btn.css({'background': chg_btn_orig_bg});
-        }
-    );
-
-    input.change(function() {
-        chg_btn.css({'background': chg_btn_orig_bg});
-        // check file extension
-        var file, filename, ext;    
-        var allow = false;
-        var allowed_ext = ['jpg','jpeg', 'png', 'gif'];
-        if (this.files) { // IE: version lower than 10 doesn't have 'files'
-            file = this.files[0];
-            filename = file.name || file.fileName;
-        } else {
-            filename = this.value;
-        }
-        if (filename.lastIndexOf('.') != -1) { // ext exists
-            ext = filename.substr((filename.lastIndexOf('.') + 1)).toLowerCase();
-        }
-        if (ext) {
-            for (var i = 0, len = allowed_ext.length; i < len; i++) {
-                if (ext == allowed_ext[i]) {
-                    allow = true;
-                    break;
-                }
-            }
-        } else {
-            feedback(filename + "{% trans " is not supported. Please choose an image file." %}", 'error');
-            return false;
-        }
-
-        if (!allow) {
-            var err_msg = filename + "{% trans " is not supported. File extensions can only be " %}" + allowed_ext.join(', ');
-            feedback(err_msg, 'error');
-            return false;        
-        }
-
-        // check if file size is less than 1MB
-        if (file && file.size > 1024*1024) {
-            feedback(filename + "{% trans " is too large. Allowed maximum size is 1MB." %}", 'error');
-            return false;        
-        }
-
-        form.submit();
-        return false;
-    });
-}
-</script>

seahub/templates/snippets/web_settings_form.html

@@ -49,8 +49,8 @@
         <img src="{{ MEDIA_URL }}{{ file_path }}" alt="" width="{{ file_width }}" height="{{file_height}}" class="web-setting-cur-img" />
         <p class="tip">{{ help_tip }}</p>
         <div class="web-setting-file-upload">
-            <input type="file" name="{{ setting_name }}" class="web-setting-file-upload-input transparent-file-input" />
             <button type="button" class="web-setting-file-upload-btn">{% trans "Change" %}</button>
+            <input type="file" name="{{ setting_name }}" class="web-setting-file-upload-input hide" />
         </div>
     </div>
 </form>

seahub/templates/sysadmin/settings.html

@@ -258,21 +258,9 @@ $('.web-input-setting-form, .web-textarea-setting-form').submit(function() {
 });
 
 
-$('.web-setting-file-upload').each(function(index, item) {
+$('.web-setting-file-upload-btn').click(function() {
-    var $this = $(item);
+    var $container = $(this).closest('.web-setting-file-upload');
-    var $btn = $('.web-setting-file-upload-btn', $this);
+    $('.web-setting-file-upload-input', $container).trigger('click');
-    $this.css({
-        'width': $btn.outerWidth(),
-        'overflow': 'hidden'
-    });
-});
-$('.web-setting-file-upload-input').each(function(index, item) {
-    var $this = $(item);
-    var $btn = $this.next('.web-setting-file-upload-btn');
-    $this.css({
-        // don't set width here, to make `cursor:pointer;` work
-        'height': $btn.outerHeight()
-    });
 });
 
 $('.web-setting-file-upload-input').change(function() {

static/scripts/sysadmin-app/views/dashboard.js

@@ -20,9 +20,14 @@ define([
         },
 
         events: {
+            'click .license-file-upload-btn': 'uploadFile',
             'change .license-file-upload-input': 'uploadLicenseFile'
         },
 
+        uploadFile: function() {
+            this.$('.license-file-upload-input').trigger('click');
+        },
+
         uploadLicenseFile: function() {
             var $input = this.$('.license-file-upload-input');
             var file;
@@ -92,22 +97,11 @@ define([
             this.showSysinfo();
         },
 
-        setLicenceUploadUI: function() {
-            var $btn = this.$('.license-file-upload-btn');
-            this.$('.license-file-upload').css({
-                'width': $btn.outerWidth()
-            });
-            this.$('.license-file-upload-input').css({
-                'height': $btn.outerHeight()
-            });
-        },
-
         reset: function() {
             this.$loadingTip.hide();
             var json_data = this.sysinfo.toJSON();
             json_data['formatted_storage'] = Common.quotaSizeFormat(json_data['total_storage'], 1)
             this.$sysinfo.html(this.conTemplate(json_data));
-            this.setLicenceUploadUI();
         }
 
     });