From b0876bef53dd56b06aba12d24ea5508238c4491b Mon Sep 17 00:00:00 2001
From: llj <lingjun.li1@gmail.com>
Date: Wed, 27 Jul 2016 11:55:19 +0800
Subject: [PATCH] [file view] use icons for operations

---
 media/css/seahub.css                     |  32 +++++++++++++++++++----
 media/css/sf_font2/seafile-font2.eot     | Bin 8300 -> 8620 bytes
 media/css/sf_font2/seafile-font2.svg     |   2 ++
 media/css/sf_font2/seafile-font2.ttf     | Bin 8116 -> 8436 bytes
 media/css/sf_font2/seafile-font2.woff    | Bin 5524 -> 5680 bytes
 seahub/templates/view_file_base.html     |  18 ++++++-------
 seahub/templates/view_file_markdown.html |   2 +-
 seahub/templates/view_file_text.html     |   2 +-
 8 files changed, 40 insertions(+), 16 deletions(-)

diff --git a/media/css/seahub.css b/media/css/seahub.css
index a5e78750b4..aa3e134372 100644
--- a/media/css/seahub.css
+++ b/media/css/seahub.css
@@ -20,6 +20,7 @@
  * common class ..........common class
  *
  * Widget
+ * (ui widgets)
  * (...)
  * discussions/comments
  * custom select2
@@ -160,6 +161,8 @@
 .sf2-icon-move:before { content: "\e029"; }
 .sf2-icon-reply:before { content: "\e02a"; }
 .sf2-icon-invite:before { content: "\e02b"; }
+.sf2-icon-lock:before { content: "\e02c"; }
+.sf2-icon-unlock:before { content: "\e02d"; }
 
 /******* tags **********/
 body,
@@ -596,6 +599,30 @@ textarea:-moz-placeholder {/* for FF */
     padding:0 5px;
     color:#818a91;
 }
+/**** btn-group ****/
+.sf-btn-group {
+}
+.sf-btn-group-btn {
+    float:left;
+    padding: 5px 10px;
+    margin:0;
+    background:#fff;
+    border-radius:0;
+    border-right-width:0;
+}
+.sf-btn-group-btn-first {
+    border-top-left-radius:2px;
+    border-bottom-left-radius:2px;
+}
+.sf-btn-group-btn-last {
+    border-right-width:1px;
+    border-top-right-radius:2px;
+    border-bottom-right-radius:2px;
+}
+.sf2-icon-edit.sf-btn-group-btn {
+    font-size:20px;
+    opacity:1;
+}
 /****paginator****/
 #paginator {
     text-align:center;
@@ -2012,7 +2039,6 @@ button.sf-dropdown-toggle:focus {
     text-align:right;
     margin-bottom:4px;
 }
-#file-op button,
 .repo-op .op-btn {
     *margin-left:5px;/* for ie 7*/
 }
@@ -2496,10 +2522,6 @@ button.sf-dropdown-toggle:focus {
     -moz-border-radius:3px;
     margin-top:12px;
 }
-#file-op .op-btn,
-#file-op .sf-btn-link {
-    padding:2px 8px;
-}
 #file-enc-cont {
     width:950px;
     margin:-20px auto 6px;
diff --git a/media/css/sf_font2/seafile-font2.eot b/media/css/sf_font2/seafile-font2.eot
index caf46bb8c3b888f89f35964fda53d72bc5de8513..14567ad82ef1c5a9843415e177088d75a87f2afd 100644
GIT binary patch
delta 751
zcmZ{iOK1~O6o&shGu(`smROoJNM|rj#gy8ZWb!K3NWs@eP_Y(WSUXK$XkJj2NTKOM
z7e!R+(3L`ii-6FD5Co&Rk%BG?U06iHg@Ow~5sD97HJ(Ydq@XbO9{zLwIrqDB=1c$5
zLB7-heD}=rm^7O&F3$JQB`c?MfaeVW_2{9)M=%6V`Y~zG@lydkaQoPGfSn;dm`oeF
z=L`H1AgGipO&C+TY84_`A5vYONL?KtnfvSlq%OeyZgR{RmG6FgYW6U-VDFQ*(My)`
zLModyZsE>7KwKt0nl|z|Ok<tuy`()EBRy8>e!YX3B+9+aWv4EEK<q4_t<d2g!N^5x
zv6!Dd@7VtXia-hA)w8!JHltu=g;vrs1eh<_UKTQcvUALD4hYlXVGLVVi@vthT2r7%
z%4)Ad!ZnJVBBKU)?>9GutQbJBoDwIQq?DAe<u$3&RuHLGh!xo?T-XV^0qcxLcJE<c
zuCY$9tHl}a(4#FeUnJJY^ft=5omAAAwI^7lzEjENW(#(Q@=0#8D+=pY#HvHNDJxGN
z*u0z`?&Ew$5!lI*W``oDm5pEIlAEIiOCA`v@qL{4T1J6B8WI16+C=(ueE45*w*Moo
z*C_mrV1tcBy9g<2F|@|FfNdcv-)MI-n~pgAh?^y~$F9fyalal6#bC~;?PfyVZrZdA
v&FG3YB+;+}<uz?UXp-n>xyUbPtYCI|G+&U$QNJMFvOctx#QjxEG|vAwY-E)5

delta 427
zcmZ4E{KkPTM}dK1i~K}3GnNf`-BTtybS5(#Il;gnKZAjRLB`$1)r}#Bfepy70P+?5
zgY}K{`+b@j7#Jgf{IKNQ#DYU9Y_$vwOcFq`Md^vf1^@puFay;W0OdK-b1Ks=U48wB
zfq_MafkA9XMrvXT`{QKc$vTWO^_;hvR{}L{04hw&$xlvfifUWOz`(o*$WO>ktSDfp
zWcUb_w*c}L@)C1XcdB2NWMGiG0u(z@kY8NF{PxW|pd04^Ex*FR2vh~cQ@Zmu#Pi#H
zW#DE43NSESPMiR=97;2RM45zvTn+{%hRMen^%(Uhe`Abg)Seu|RILwE2Xr|Y%YY4J
zV3-5sfsB@6U}0zg(riGQ5vZBrf%ar3=KRg2%;}7qAF%8c+q_psh>_ip!Gb}T!F2L9
zSsgAz3tdxPBLhP-hRN$>r6=dg3QRVa%LCfDOfGIShkOXr<P1ewbv>YQEI@-H&IMV;
NaK?7gc@T~4b^uaLW)c7Z

diff --git a/media/css/sf_font2/seafile-font2.svg b/media/css/sf_font2/seafile-font2.svg
index d03ea6e558..da03e371b5 100644
--- a/media/css/sf_font2/seafile-font2.svg
+++ b/media/css/sf_font2/seafile-font2.svg
@@ -51,4 +51,6 @@
 <glyph glyph-name="move241" unicode="&#57385;" d="M256 386l0 51-203 0 0-362 406 0 0 311z m55-226l0 53-181 0 0 52 184 0 0 53 76-77z"/>
 <glyph glyph-name="reply" unicode="&#57386;" d="M235 326c108 0 207-98 213-217-53 47-119 77-192 77-6 0-15 0-21 0l0-94c0-7-5-9-9-5l-158 160c-4 5-4 11 0 15l158 163c4 4 9 2 9-5z"/>
 <glyph glyph-name="invite" unicode="&#57387;" d="M303 286l177 0 0-43-177 0z m68 72l39 0 0-189-39 0z m-170-125c53 0 85 87 85 136 0 49-39 92-85 92-47 0-86-41-86-92 0-51 32-136 86-136z m0-184c147 0 168 0 168 45 0 64-75 115-168 115-94 0-169-51-169-115 0-45 21-45 169-45z"/>
+<glyph glyph-name="lock" unicode="&#57388;" d="M405 337l-10 0 0 98c0 17-11 28-26 28l-232 0c-11 0-20-9-20-19l0-109-10 0c-7 0-11-4-11-11l0-264c0-5 4-11 11-11l298 0c7 0 11 6 11 11l0 264c2 9-4 13-11 13z m-241 53c0 17 11 28 26 28l141 0c10 0 19-8 19-19l0-62-186 0z m169-155c0-5-4-7-7-7l-34 0c-4 0-6-4-6-6l0-58c0-4-4-6-7-6l-34 0c-4 0-6 4-6 6l0 56c0 4-4 6-6 6l-39 0c-4 0-6 4-6 7l0 34c0 4 4 6 6 6l126 0c4 0 11 0 11-2 2-2 2-4 2-4z"/>
+<glyph glyph-name="unlock" unicode="&#57389;" d="M405 337l-241 0 0 53c0 17 11 28 26 28l141 0c10 0 19-8 19-19l0-19 45 0 0 55c0 17-11 28-26 28l-232 0c-11 0-20-9-20-19l0-109-10 0c-7 0-11-4-11-11l0-264c0-5 4-11 11-11l298 0c7 0 11 6 11 11l0 264c2 9-4 13-11 13z m-72-102c0-5-4-7-7-7l-34 0c-4 0-6-4-6-6l0-58c0-4-4-6-7-6l-34 0c-4 0-6 4-6 6l0 56c0 4-4 6-6 6l-39 0c-4 0-6 4-6 7l0 34c0 4 4 6 6 6l126 0c4 0 11 0 11-2 2-2 2-4 2-4z"/>
 </font></defs></svg>
diff --git a/media/css/sf_font2/seafile-font2.ttf b/media/css/sf_font2/seafile-font2.ttf
index c0f04467d1df69af3415378c8888161db94696b6..7ddc79f96f6813b044e21b07e546f70e1fdd833f 100644
GIT binary patch
delta 723
zcmZ{iPiPZC6vn@|SvPB@ArzAa?Z(8kSgFRe`CF{5C>k${5o^(dwc9pr(56{Pg-F5l
zpa&0D=+cvg=2Y+|q=HfOP&{}LJQT!04+<Uxp-@!tWPICdX+dFU9^dz7zx~b5ES>m%
zvIGL)#58P3r&4|A3)Ra85ct5ZcJ}m{6b7KMe#Sa*;Zisfet7O4Kv!7z59f4ac}{r>
zNE&;KV|u};*EtD+C)`)Z#&3@f-T&$V<U@dWHJi~#)JNZ5aBr1IBAd;WborFDi(huL
z(VERo79HL4Zq`=7jq&`jK7-kL!1kK;NKP*rn8G^uyI2P%^jxOe{(djB%Iv){@`cGy
zNL&ScZyD+{tj+OQC>N)%yN>^Wkk|lLUe?l^RjQ?DsfRkvUb;phbDpN6gBY}W);2bV
zwvhsqSy_1+WZdPda3yfy$B>zl^0qKKDoaw9WU(mLDw<qvD%m)ylgjiC9{9n?)Dn*!
zJWN5wM=e25qdR&a5^qej#S+~VX=2ao=BAIVxrbt#Gq*fmnsd0s7q!751horW-6bBV
z;`w8HP~k^uQ<OVGqKiXLmr!%!*H2!hI^!iv_Kw<>V~WycEtL2#G4WrhEu=r6kNykJ
z{(q$P4T{iqu>S2tt&9}681^K0fbAfvtn71>J%S`cNSbTSN90H{lr;Bi3w$cCv;mop
hQn;e|`lJS#@54>y)`V3|!|$UGbH?8+whptF{tZQ)jz0hZ

delta 399
zcmez3xW&GnfsuiMftR6yftew|%`L>YnBm9?1_t>VKv5ZY7gsli7zQ>VzXHft@DJ8E
z((m_aW?*290P@3<a}x^=rLfg9Ffd5~#TKO}78m^g4>XBEz5poCk)BhTcIoQtKMV{k
zG7Jo2J2FxeQ`jFT3j^iu0I^v{MrwT`ixU$oP_qb7KqVu$q=NG{^GYCp1CXDVlb@W}
z6xFtlfq{7ske`s7SW&=G$?y><Zvo^h<R#{&?o_`j$-p3W1t@l+AiubT`R$u`K)25U
zI_e78b3hMH>CW2_&u{aUftv}aje+5E;)FjCnrXtHNsP9P`jhP#V;Qw4&ta_A2T1_E
z0LC(46Brog0C}K*l3`#01{DJ^NLYY;pkWWRCwnpFZ{Ew4&bV2FWvAF?Rv95ic0&dW
w23-cz$#SwfEQS`krjz|-=L79{CmXjpKrV!7@&*N2M!m`B6r{P~4w>)=0J33UxBvhE

diff --git a/media/css/sf_font2/seafile-font2.woff b/media/css/sf_font2/seafile-font2.woff
index 430a85c795de9564a0b4b9c911cf4694110759d8..d0e997dda022f2ba70f7516700bcb95283b79ce9 100644
GIT binary patch
delta 5620
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
LqN|_@AngAG-%Z6c

delta 5463
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
C%R^)U

diff --git a/seahub/templates/view_file_base.html b/seahub/templates/view_file_base.html
index f8e6894ce2..bb4f606d66 100644
--- a/seahub/templates/view_file_base.html
+++ b/seahub/templates/view_file_base.html
@@ -53,25 +53,25 @@
 
             </div>
 
-            <div class="fright">
+            <div class="fright sf-btn-group">
             {% if can_lock_unlock_file %}
                 {% if not file_locked %}
-                    <button id="lock-file" class="op-btn">{% trans "Lock" %}</button>
-                    <button id="unlock-file" class="op-btn hide">{% trans "Unlock" %}</button>
+                    <button id="lock-file" class="sf-btn-group-btn sf-btn-group-btn-first op-icon sf2-icon-lock" title="{% trans "Lock" %}"></button>
+                    <button id="unlock-file" class="sf-btn-group-btn sf-btn-group-btn-first op-icon sf2-icon-unlock hide" title="{% trans "Unlock" %}"></button>
                 {% elif locked_by_me %}
-                    <button id="unlock-file" class="op-btn">{% trans "Unlock" %}</button>
-                    <button id="lock-file" class="op-btn hide">{% trans "Lock" %}</button>
+                    <button id="unlock-file" class="sf-btn-group-btn sf-btn-group-btn-first op-icon sf2-icon-unlock" title="{% trans "Unlock" %}"></button>
+                    <button id="lock-file" class="sf-btn-group-btn sf-btn-group-btn-first op-icon sf2-icon-lock hide" title="{% trans "Lock" %}"></button>
                 {% endif %}
             {% endif %}
 
             {% if not repo.encrypted %}
             {% if request.user.permissions.can_generate_shared_link %}
-            <button id="share" class="op-btn" data-link="{{ file_shared_link }}" data-token="{{ fileshare.token }}">{% trans "Share" %}</button>
+            <button id="share" class="sf-btn-group-btn op-icon sf2-icon-share" data-link="{{ file_shared_link }}" data-token="{{ fileshare.token }}" title="{% trans "Share" %}"></button>
             {% endif %}
             {% endif %}
 
             {% if file_perm == 'rw' %}
-            <a class="sf-btn-link" id="history" href="{% url 'file_revisions' repo.id %}?p={{ path|urlencode }}">{% trans "History" %}</a>
+            <a class="sf-btn-group-btn sf-btn-link op-icon sf2-icon-clock" id="history" href="{% url 'file_revisions' repo.id %}?p={{ path|urlencode }}" title="{% trans "History" %}"></a>
             {% endif %}
 
             {% if request.user.is_authenticated and can_edit_file %}
@@ -79,9 +79,9 @@
                 {% endblock %}
             {% endif %}
 
-            <a class="sf-btn-link" href="?dl=1" id="download">{% trans "Download"%}</a>
+            <a class="sf-btn-group-btn sf-btn-link op-icon sf2-icon-download" href="?dl=1" id="download" title="{% trans "Download"%}"></a>
 
-            <button id="discuss" class="op-btn">{% trans "Comment" %}</button>
+            <button id="discuss" class="sf-btn-group-btn sf-btn-group-btn-last op-icon sf2-icon-msgs" title="{% trans "Comment" %}"></button>
             </div>
 
             <div id="file-discussions" class="right-side-panel"></div>
diff --git a/seahub/templates/view_file_markdown.html b/seahub/templates/view_file_markdown.html
index 6a63bcedcf..f8190da3e9 100644
--- a/seahub/templates/view_file_markdown.html
+++ b/seahub/templates/view_file_markdown.html
@@ -10,7 +10,7 @@
 
 {% block edit_file %}
 {% if file_perm == 'rw' and not err%}
-<a class="sf-btn-link" href="{{ SITE_ROOT }}repo/{{ repo.id }}/file/edit/?p={{ path|urlencode }}&file_enc={{file_enc}}" id="edit">{% trans "Edit"%}</a>
+<a class="sf-btn-group-btn sf-btn-link op-icon sf2-icon-edit" href="{{ SITE_ROOT }}repo/{{ repo.id }}/file/edit/?p={{ path|urlencode }}&file_enc={{file_enc}}" id="edit" title="{% trans "Edit"%}"></a>
 {% endif %}
 {% endblock %}
 
diff --git a/seahub/templates/view_file_text.html b/seahub/templates/view_file_text.html
index f48d73062b..3db078803e 100644
--- a/seahub/templates/view_file_text.html
+++ b/seahub/templates/view_file_text.html
@@ -19,7 +19,7 @@
 
 {% block edit_file %}
 {% if file_perm == 'rw' and not err%}
-<a class="sf-btn-link" href="{{ SITE_ROOT }}repo/{{ repo.id }}/file/edit/?p={{ path|urlencode }}&file_enc={{file_enc}}" id="edit">{% trans "Edit"%}</a>
+<a class="sf-btn-group-btn sf-btn-link op-icon sf2-icon-edit" href="{{ SITE_ROOT }}repo/{{ repo.id }}/file/edit/?p={{ path|urlencode }}&file_enc={{file_enc}}" id="edit" title="{% trans "Edit" %}"></a>
 {% endif %}
 {% endblock %}