From e3df7b561e4d85e6e8e84c97d2f31410c4fb088c Mon Sep 17 00:00:00 2001
From: llj <lingjun.li1@gmail.com>
Date: Tue, 29 Sep 2015 12:04:41 +0800
Subject: [PATCH] [web setting] bugfix & improvement

---
 media/css/seahub.css                          | 85 +++++++------------
 .../templates/snippets/web_settings_form.html | 40 ++++-----
 seahub/templates/sysadmin/settings.html       | 77 ++++++++---------
 3 files changed, 88 insertions(+), 114 deletions(-)

diff --git a/media/css/seahub.css b/media/css/seahub.css
index 216eedfe8c..b8d93af6ce 100644
--- a/media/css/seahub.css
+++ b/media/css/seahub.css
@@ -1939,9 +1939,11 @@ textarea:-moz-placeholder {/* for FF */
 #rename-form .input {
     font-size:14px;
 }
+.web-setting-form .submit,
 #rename-form .submit {
     color:green;
 }
+.web-setting-form .cancel,
 #rename-form .cancel {
     color:#666;
 }
@@ -1949,6 +1951,8 @@ textarea:-moz-placeholder {/* for FF */
 #rename-form .submit {
     margin:0;
 }
+.web-setting-form .submit,
+.web-setting-form .cancel,
 #rename-form .submit,
 #rename-form .cancel {
     font-size:16px;
@@ -3640,68 +3644,43 @@ img.thumbnail {
     max-height: 24px;
 }
 
-/* seahub web setting */
-.seahub-web-settings {
-    margin-top:15px;
-}
+/* seahub web settings */
 .seahub-web-settings h4 {
+    padding:3px 10px;
     background:#f7f7f7;
+    border-radius:2px;
     margin:15px 0;
-    padding:4px 0 4px 14px;
 }
-.web-setting-name {
-    width:190px;
-    margin-left:14px;
-}
-.web-setting-name label {
-    width:175px;
-    margin:3px 0;
-}
-.web-setting-description {
-    width:480px;
+.web-setting-form {
     margin-bottom:20px;
 }
 .web-setting-name,
-.web-setting-description {
+.web-setting-input,
+.web-setting-ops {
     display:inline-block;
+}
+.web-setting-name {
+    width:180px;
+    padding:0 10px;
+    vertical-align:top;
+    font-weight:normal;
+    line-height:28px;
+}
+.web-setting-input {
+    width:400px;
+}
+.web-setting-name,
+.web-setting-input .input {
+    margin:0;
+}
+.web-setting-ops {
+    width:100px;
     vertical-align:top;
 }
-.web-setting-description .web-setting-help-tip {
-    font-size:12px;
+.web-setting-form .submit,
+.web-setting-input {
+    margin-top:0;
 }
-.web-input-setting-form .web-setting-help-tip {
-    width:380px;
-    color:#888;
-    line-height:1.4;
-    margin:2px 0 0 0;
-}
-.web-input-setting-form .error {
-    margin:2px 0 0 0;
-}
-.web-input-setting-form .input ,
-.web-input-setting-form .submit {
-    margin:3px 0 0 0;
-}
-.web-input-setting-form .input {
-    width:370px;
-    padding:0 0 0 5px;
-    height:23px;
-}
-.web-input-setting-form .submit {
-    padding:2px 8px;
-    margin-left:20px;
-}
-.web-input-setting-form  .cancel-setting {
-    opacity:0.6;
-    padding:3px 6px 5px;
-}
-.web-input-setting-form  .cancel-setting:hover {
-    opacity:1;
-}
-.web-checkbox-setting-form {
-    width:370px;
-}
-.web-checkbox-setting-form .web-setting-help-tip {
-    top:-7px;
-    left:1px;
+.web-setting-form .submit {
+    margin-right:5px;
 }
diff --git a/seahub/templates/snippets/web_settings_form.html b/seahub/templates/snippets/web_settings_form.html
index 25cb465c53..df524e033c 100644
--- a/seahub/templates/snippets/web_settings_form.html
+++ b/seahub/templates/snippets/web_settings_form.html
@@ -1,28 +1,28 @@
 {% load i18n %}
 
 {% if type == 'input' %}
-<div class="web-setting-name">
-    <label>{{ setting_display_name }}</label>
-</div>
-<div class="web-setting-description">
-    <form class="web-input-setting-form">{% csrf_token %}
-        <input class="input" type="text" name="{{ setting_name }}" value="{{ setting_val }}" />
-        <input class="submit hide" type="submit" value="{% trans "Save" %}" />
-        <i class="icon-remove fa-1x cancel-setting cspt hide" title="{% trans "Cancel" %}"></i><br />
+<form class="web-setting-form web-input-setting-form">
+    <h5 class="web-setting-name">{{ setting_display_name }}</h5>
+    <div class="web-setting-input">
+        <input class="input" type="text" name="{{ setting_name }}" value="{{ setting_val }}" data-cur="{{ setting_val }}" />
         <p class="error hide"></p>
-        <p class="web-setting-help-tip">{{ help_tip }}</p>
-    </form>
-</div>
+        <p class="tip">{{ help_tip }}</p>
+    </div>
+    <div class="web-setting-ops">
+        <button type="submit" class="submit sf2-icon-tick vam hide" title="{% trans "Submit" %}"></button>
+        <button type="button" class="cancel sf2-icon-x2 vam hide" title="{% trans "Cancel" %}"></button>
+    </div>
+</form>
 {% endif %}
 
 {% if type == 'checkbox' %}
-<div class="web-setting-name">
-    <label>{{ setting_display_name }}</label>
-</div>
-
-<div class="web-setting-description">
-    <form class="web-checkbox-setting-form">{% csrf_token %}
-        <input class="web-checkbox-setting" type="checkbox" name="{{ setting_name }}" {% if setting_val %}checked="checked"{% endif %} /><span class="web-setting-help-tip pos-rel">{{ help_tip }}</span>
-    </form>
-</div>
+<form class="web-setting-form web-checkbox-setting-form">{% csrf_token %}
+    <h5 class="web-setting-name">{{ setting_display_name }}</h5>
+    <div class="web-setting-input">
+        <label class="checkbox-label">
+            <span class="checkbox{% if setting_val %} checkbox-checked{% endif %}"><input class="checkbox-orig web-setting-checkbox" type="checkbox" name="{{ setting_name }}"{% if setting_val %} checked="checked"{% endif %} /></span>
+            <span class="checkbox-option">{{ help_tip }}</span>
+        </label>
+    </div>
+</form>
 {% endif %}
diff --git a/seahub/templates/sysadmin/settings.html b/seahub/templates/sysadmin/settings.html
index c51490efca..67e8e98b1a 100644
--- a/seahub/templates/sysadmin/settings.html
+++ b/seahub/templates/sysadmin/settings.html
@@ -8,7 +8,7 @@
 
 <div class="seahub-web-settings">
 
-    <h4>Url</h4>
+    <h4>URL</h4>
 
     <div>
     {% with type="input" setting_display_name="SERVICE_URL" help_tip="The URL of the server, like https://seafile.example.com or http://192.168.1.2:8000" setting_name="SERVICE_URL" setting_val=config_dict.SERVICE_URL %}
@@ -45,15 +45,15 @@
     <h4>Password</h4>
 
     <div>
-    {% with type="checkbox" setting_display_name="strong password" help_tip="Force user use a strong password when singup up or change password." setting_name="USER_STRONG_PASSWORD_REQUIRED" setting_val=config_dict.USER_STRONG_PASSWORD_REQUIRED %}
+    {% with type="checkbox" setting_display_name="strong password" help_tip="Force user to use a strong password when sign up or change password." setting_name="USER_STRONG_PASSWORD_REQUIRED" setting_val=config_dict.USER_STRONG_PASSWORD_REQUIRED %}
         {% include "snippets/web_settings_form.html" %}
     {% endwith %}
 
-    {% with type="input" setting_display_name="password minimum length" help_tip="The least number of characters when user make up an account password." setting_name="USER_PASSWORD_MIN_LENGTH" setting_val=config_dict.USER_PASSWORD_MIN_LENGTH %}
+    {% with type="input" setting_display_name="password minimum length" help_tip="The least number of characters an account password should include." setting_name="USER_PASSWORD_MIN_LENGTH" setting_val=config_dict.USER_PASSWORD_MIN_LENGTH %}
         {% include "snippets/web_settings_form.html" %}
     {% endwith %}
 
-    {% with type="input" setting_display_name="password strength level" help_tip="The level of password strength when user make up an account passowrd." setting_name="USER_PASSWORD_STRENGTH_LEVEL" setting_val=config_dict.USER_PASSWORD_STRENGTH_LEVEL %}
+    {% with type="input" setting_display_name="password strength level" help_tip="The level of an account password's strength." setting_name="USER_PASSWORD_STRENGTH_LEVEL" setting_val=config_dict.USER_PASSWORD_STRENGTH_LEVEL %}
         {% include "snippets/web_settings_form.html" %}
     {% endwith %}
     </div>
@@ -61,15 +61,15 @@
     <h4>Library</h4>
 
     <div>
-    {% with type="checkbox" setting_display_name="library history" help_tip="If allow user keep library history" setting_name="ENABLE_REPO_HISTORY_SETTING" setting_val=config_dict.ENABLE_REPO_HISTORY_SETTING %}
+    {% with type="checkbox" setting_display_name="library history" help_tip="Allow user to keep library history" setting_name="ENABLE_REPO_HISTORY_SETTING" setting_val=config_dict.ENABLE_REPO_HISTORY_SETTING %}
         {% include "snippets/web_settings_form.html" %}
     {% endwith %}
 
-    {% with type="checkbox" setting_display_name="encrypt library" help_tip="If allow user create encrypted library" setting_name="ENABLE_ENCRYPT_LIBRARY" setting_val=config_dict.ENABLE_ENCRYPT_LIBRARY %}
+    {% with type="checkbox" setting_display_name="encrypted library" help_tip="Allow user to create encrypted library" setting_name="ENABLE_ENCRYPT_LIBRARY" setting_val=config_dict.ENABLE_ENCRYPT_LIBRARY %}
         {% include "snippets/web_settings_form.html" %}
     {% endwith %}
 
-    {% with type="input" setting_display_name="library password minimum length" help_tip="The least number of characters that can make up an encrypt library password." setting_name="REPO_PASSWORD_MIN_LENGTH" setting_val=config_dict.REPO_PASSWORD_MIN_LENGTH %}
+    {% with type="input" setting_display_name="library password minimum length" help_tip="The least number of characters an encrypted library password should include." setting_name="REPO_PASSWORD_MIN_LENGTH" setting_val=config_dict.REPO_PASSWORD_MIN_LENGTH %}
         {% include "snippets/web_settings_form.html" %}
     {% endwith %}
     </div>
@@ -86,44 +86,37 @@
 
 {% block extra_script %}
 <script type="text/javascript">
-var original_value;
-var temp_container;
-$('.input').focus(function() {
-    if ($(this).siblings('.error').html()) {
-        return false;
+$('.web-setting-form .input').focus(function() {
+    var $otherFormSubmit = $('.web-setting-form .submit:visible');
+    if ($otherFormSubmit.length > 0) {
+        $otherFormSubmit.siblings('.cancel').click();
     }
-    if (temp_container) {
-        $('.cancel-setting', temp_container).click();
-    }    
-    $(this).siblings('.submit, .cancel-setting').show();
-    original_value = $(this).val();
-    temp_container = $(this).parent();
+
+    var $form = $(this).closest('form'); 
+    $('.submit, .cancel', $form).show();
 });
 
-$('.cancel-setting').click(function() {
-    temp_container = '';
-    if ($(this).siblings('.error').html()) {
-        $(this).siblings('.error').html('').hide();
-    }
-    $(this).siblings('.input').val(original_value).siblings('.submit, .cancel-setting').hide();
+$('.web-setting-form .cancel').click(function() {
+    var $form = $(this).closest('form'); 
+    $('.error, .submit, .cancel', $form).hide();
+    var $input = $('.input', $form);
+    $input.val($input.attr('data-cur'));
 });
 
 $(document).click(function(e) {
     var target =  e.target || event.srcElement;
-    if (!$('.input').is(target) &&
-        !$('.submit').is(target) &&
-        !$('.cancel-setting').is(target) &&
-        temp_container) {
-        $('.cancel-setting', temp_container).click();
+    var $op = $('.web-setting-form .submit:visible');
+    if ($op.length && !$('.input, .submit, .cancel', $op.closest('form')).is(target)) {
+        $('.cancel', $op.closest('form')).click();
     }
 });
 
-$('.web-checkbox-setting').change(function() {
+$('.web-setting-checkbox').change(function() {
     var checkbox = $(this),
         value,
         key = checkbox.attr('name');
 
-    if (checkbox.is(':checked')) {
+    if (checkbox.prop('checked')) {
         value = 1;
     } else {
         value = 0;
@@ -147,19 +140,22 @@ $('.web-input-setting-form').submit(function() {
     var $form = $(this),
         $error = $form.find('.error'),
         $input = $form.find('.input'),
-        $sb_btn = $('.submit', $form);
-        $cancel_btn = $('.cancel-setting', $form),
-        key = $.trim($input.attr('name')),
+        $sb_btn = $('.submit', $form),
+        $cancel_btn = $('.cancel', $form),
+        key = $input.attr('name'),
         value = $.trim($input.val());
 
-    disable($sb_btn);
-
     if (!value) {
-        $error.html("{% trans "Can not be empty" %}").show();
-        enable($sb_btn);
+        $error.html("{% trans "It is required." %}").show();
         return false;
     }
 
+    if (value == $input.attr('data-cur')) { // no change
+        $cancel_btn.click();
+        return false;
+    }
+
+    disable($sb_btn);
     $.ajax({
         url: "{% url 'sys_settings' %}",
         type: 'POST',
@@ -167,21 +163,20 @@ $('.web-input-setting-form').submit(function() {
         beforeSend: prepareCSRFToken,
         data: { 'key': key, 'value': value },
         success: function() {
+            $input.val(value).attr('data-cur', value);
             $error.html('').hide();
             enable($sb_btn);
-            $input.val(value);
             $sb_btn.hide();
             $cancel_btn.hide();
-            temp_container = '';
             feedback("{% trans "Success" %}", 'success');
         },
         error: function(jqXHR, textStatus, errorThrown) {
             if (jqXHR.responseText) {
                 $error.html($.parseJSON(jqXHR.responseText).error).show();
-                enable($sb_btn);
             } else {
                 $error.html("{% trans "Failed. Please check the network." %}").show();
             }
+            enable($sb_btn);
         }
     });
     return false;