From 5664c6fe24fa1e10084054964dd61f671937aa3a Mon Sep 17 00:00:00 2001
From: llj <lingjun.li1@gmail.com>
Date: Thu, 27 Jun 2013 13:55:22 +0800
Subject: [PATCH] [repo-share-popup] redesigned ui

---
 media/css/seahub.css                          | 59 ++++++++++++-------
 .../snippets/myhome_extra_script.html         |  2 +-
 .../templates/snippets/repo_share_form.html   | 22 +++----
 3 files changed, 52 insertions(+), 31 deletions(-)

diff --git a/media/css/seahub.css b/media/css/seahub.css
index 43e5d89a01..eae490ba94 100644
--- a/media/css/seahub.css
+++ b/media/css/seahub.css
@@ -1030,15 +1030,14 @@ textarea:-moz-placeholder {/* for FF */
 #repo-share-tabs {
     margin-bottom:0;
 }
-#tabs-nav,
-#repo-share-tabs-nav {
+#tabs-nav {
     padding:0;
 }
 #repo-share-tabs-nav {
     height:30px;
+    padding:0 0 0 12px;
     border-bottom:1px solid #ddd;
     border-radius:0;
-    margin-bottom:10px;
 }
 #tabs-nav li {
     float:left;
@@ -1069,23 +1068,14 @@ textarea:-moz-placeholder {/* for FF */
     color:#DD4B39;
     border-bottom:2px solid #DD4B39;
 }
-#repo-share-tabs-nav .ui-state-active {
-    border-color:#ddd;
-    border-radius:3px 3px 0 0;
-    background:#fff;
-    margin-bottom:-1px;
-}
-#repo-share-tabs-nav .ui-state-active a {
-    font-weight:bold;
-}
+
 #tabs-nav li a:hover {
     color:#DD4B39;
 }
 #repo-share-tabs-nav li a:hover {
     color:#333;
 }
-#tabs .ui-tabs-panel,
-#repo-share-tabs .ui-tabs-panel {
+#tabs .ui-tabs-panel {
     padding:0;
 }
 #repo-share-tabs .option-list {
@@ -1517,14 +1507,43 @@ textarea:-moz-placeholder {/* for FF */
 #member-add-form {
     width:266px;
 }
-#repo-share-form {
-    width:320px;
+.tab-popup {
+    width:400px;
+}
+.tab-popup .hd {
+    padding-left:12px;
+}
+#repo-share-tabs-nav .ui-state-active {
+    border-color:#ddd;
+    margin-bottom:-1px;
+}
+#repo-share-tabs-nav .ui-state-active,
+.tab-popup .ui-tabs ,
+.tab-popup .ui-state-active a {
+    background:#fafafa;
+}
+#repo-share-tabs-nav .ui-state-active,
+.tab-popup .ui-state-active a {
+    border-radius:3px 3px 0 0;
+}
+.tab-popup .ui-tabs-nav {
+    background:#fff;
+}
+.tab-popup .ui-state-active a {
+    font-weight:bold;
+}
+.tab-popup .bot {
+    padding:1em 1.4em;
+    background:#f8f7f8;
+    border-top:1px solid #eee;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+}
+.tab-popup .tip {
+    margin:0;
 }
 #email_or_group {
-    width:314px;
-}
-#repo-share-form .share-permission-select {
-    width:100%;
+    width:98.5%;
 }
 /* group-join-form */
 #id_group_join_msg {
diff --git a/seahub/templates/snippets/myhome_extra_script.html b/seahub/templates/snippets/myhome_extra_script.html
index 6416ff9b8a..e1b43caf85 100644
--- a/seahub/templates/snippets/myhome_extra_script.html
+++ b/seahub/templates/snippets/myhome_extra_script.html
@@ -15,7 +15,7 @@
     $(".repo-share-btn").click(function() {
         $("#repo_id").val($(this).data("id"));
         $("#repo-share-form .op-target").html($(this).data("name"));
-        $("#repo-share-form").modal({appendTo: "#main", focus:false});
+        $("#repo-share-form").modal({appendTo: "#main", focus:false, containerCss:{"padding": "10px 0 0"}});
         $('#repo-share-tabs').tabs();
         $('#simplemodal-container').css('height', 'auto');
         addAutocomplete('#email_or_group', '#repo-share-form', share_list);
diff --git a/seahub/templates/snippets/repo_share_form.html b/seahub/templates/snippets/repo_share_form.html
index 0028183afb..a8e9d544a2 100644
--- a/seahub/templates/snippets/repo_share_form.html
+++ b/seahub/templates/snippets/repo_share_form.html
@@ -1,7 +1,6 @@
 {% load i18n avatar_tags group_avatar_tags %}
-<form id="repo-share-form" action="{{ post_url }}" method="post" name="repo-share-form" class="hide">{% csrf_token %}
-    <h3>{% trans "Share Library"%}</h3>
-    <p>{% trans 'Share <span class="op-target"></span> to' %}</p>
+<form id="repo-share-form" action="{{ post_url }}" method="post" name="repo-share-form" class="tab-popup hide">{% csrf_token %}
+    <h3 class="hd">{% trans 'Share <span class="op-target"></span> '%}</h3>
     <div id="repo-share-tabs">
         <ul id="repo-share-tabs-nav">
             <li><a href="#share-enter">{% trans 'Enter' %}</a></li>
@@ -43,11 +42,14 @@
         </ul>
         </div>
     </div>
-    <select name="permission" class="share-permission-select">
-        <option value="rw" selected="selected">{% trans "Read-Write"%}</option>
-        <option value="r">{% trans "Read-Only"%}</option>
-    </select>
-    <input id="repo_id" type="hidden" name="repo_id" value="" />
-    <p class="error hide"></p>
-    <input type="submit" value="{% trans "Submit"%}" id="share-submit-btn" />
+
+    <div class="bot">
+        <select name="permission" class="share-permission-select w100">
+            <option value="rw" selected="selected">{% trans "Read-Write"%}</option>
+            <option value="r">{% trans "Read-Only"%}</option>
+        </select>
+        <input id="repo_id" type="hidden" name="repo_id" value="" />
+        <p class="error hide"></p>
+        <input type="submit" value="{% trans "Submit"%}" id="share-submit-btn" />
+    </div>
 </form>