Merge pull request #1034 from haiwen/grid-view

Grid view

media/css/seahub.css

@@ -134,6 +134,8 @@
 /*.sf2-icon-group-settings:before { content:"\e022"; }*/
 .sf2-icon-comment:before { content:"\e023"; }
 .sf2-icon-wiki2:before { content:"\e024"; }
+.sf2-icon-grid-view:before { content:"\e025"; }
+.sf2-icon-list-view:before { content:"\e026"; }
 
 /******* tags **********/
 html { background:#fff; }
@@ -1202,9 +1204,12 @@ textarea:-moz-placeholder {/* for FF */
     padding:4px 12px;
     min-width:110px;
     white-space:nowrap;
+    color:#444;
 }
 .dropdown-menu a:hover {
-    background:#eee;
+    background:#feaa7c;
+    text-decoration:none;
+    color:#fff;
 }
 /********** container ***********/
 #main, #footer {
@@ -3731,54 +3736,6 @@ img.thumbnail {
 .shared-dir-zip {
     margin-left:5px;
 }
-.grid {
-    display:inline-block;
-    width:100px;
-    padding:10px 24px;
-    position:relative;
-}
-.grid .img-link,
-.grid .text-link {
-    display:block;
-    text-align:center;
-}
-.grid .img-link {
-    height:100px;
-    font-size:0;
-    line-height:0;
-    border-radius:3px;
-    margin-bottom:6px;
-}
-.grid .img-link:before {
-    content:' ';
-    display:inline-block;
-    vertical-align:middle;
-    height:100%;
-}
-.grid .thumbnail {
-    max-width:96px;
-    max-height:96px;
-    padding:1px;
-    border:1px solid #ddd;
-    border-radius:3px;
-}
-.grid .text-link {
-    color:#333;
-    font-size:14px;
-    line-height:17px;
-    height:34px;
-    white-space:normal;
-}
-.grid .op-icon {
-    position:absolute;
-    top:10px;
-    right:24px;
-    padding:2px 6px;
-    background:#fff;
-    border:1px solid #eee;
-    border-radius:3px;
-    margin:0;
-}
 /**** #groups ****/ /* groups page */
 #groups .group-name {
     font-size:16px;
@@ -3837,3 +3794,90 @@ img.thumbnail {
 #add-group-members-form .submit {
     margin:0 0 0 5px;
 }
+/****** grid view *****/
+/* view mode */
+.switch-mode {
+    display:inline-block;
+    margin-left:12px;
+}
+.grid-view-icon-btn,
+.list-view-icon-btn {
+    display:inline-block;
+    padding:0 6px;
+    height:27px;
+    background:#fff;
+    border:1px solid #ccc;
+    font-size:18px;
+    color:#aaa;
+    cursor:pointer;
+}
+.grid-view-icon-btn.active,
+.list-view-icon-btn.active {
+    color:#fff;
+    background:#ccc;
+    cursor:default;
+}
+/* grid view */
+.grid-item {
+    display:inline-block;
+    width:100px;
+    padding:10px 24px;
+    position:relative;
+}
+.grid-item .img-link {
+    position:relative; /* for locked icon */
+    display:block;
+    text-align:center;
+    height:100px;
+    font-size:0;
+    line-height:0;
+    border-radius:3px;
+    margin-bottom:6px;
+}
+.grid-item .img-link:before {
+    content:' ';
+    display:inline-block;
+    vertical-align:middle;
+    height:100%;
+}
+.grid-item .img-link.hl {
+    background:#f8f8f8;
+}
+.grid-item .thumbnail {
+    max-width:96px;
+    max-height:96px;
+    padding:1px;
+    border:1px solid #ddd;
+    border-radius:3px;
+}
+.grid-item .text-link {
+    display:block;
+    text-align:center;
+    color:#333;
+    font-size:14px;
+    line-height:17px;
+    height:34px;
+    white-space:normal;
+}
+.grid-item .text-link.hl {
+    color:#f93;
+    background:#fff;
+}
+.grid-item .op-icon {
+    position:absolute;
+    top:10px;
+    right:24px;
+    padding:2px 6px;
+    background:#fff;
+    border:1px solid #eee;
+    border-radius:3px;
+    margin:0;
+}
+.grid-file-locked-icon {
+    position:absolute;
+    bottom:0px;
+    right:10px;
+}
+#dir-view .grid-item {
+    padding:10px 20px; /* use less padding */
+}

media/css/sf_font2/seafile-font2.svg

@@ -44,4 +44,6 @@
 <glyph glyph-name="01" unicode="&#57378;" d="M223 130c0 21 7 38 19 54-2 5-2 7-2 11 0 17 7 28 16 40-14 2-30 2-47 2-107 0-193-46-193-102 0-56 96-72 96-72 42-14 107-16 158-9-28 18-47 46-47 76z m-4 70c0 0 0-2 0-5-12-16-19-37-19-58 0-23 7-42 19-60-37-3-75 2-100 11l-3 0c-16 3-76 19-76 49 0 38 69 79 169 79 5 0 7 0 12 3-2-7-2-12-2-19z m4 291l-28 0c-46 0-83-37-83-84l0-58c0-49 39-86 88-86l19 0c49 0 88 40 88 86l0 58c0 47-37 84-84 84z m63-142c0-35-30-63-65-63l-19 0c-37 0-65 28-65 63l0 58c0 33 26 61 58 61l31 0c32 0 60-28 60-61z m84-328c-19 0-35 16-35 35l0 2c-2 3-2 3-5 3l-2-3c-14-14-35-14-49 0-14 14-14 35 0 49l3 2c0 3 0 3-3 5-18 0-35 16-35 35 0 19 17 35 35 35l3 0c0 0 2 2 2 5l-2 2c-14 14-14 35 0 49 14 14 35 14 48 0l3-3c2 0 2 0 4 3l0 2c0 19 17 35 35 35 19 0 35-16 35-35l0-2c3-3 3-3 5-3l2 3c14 14 35 14 49 0 14-14 14-35 0-49l-7-5c0-2 0-2 2-4l3 0c18 0 35-17 35-35 0-19-17-35-35-35l-3 0c-2-3-2-3-2-5l2-2c14-14 14-35 0-49-13-14-34-14-48 0l-3 2c-2 0-2 0-4-2l0-2c2-17-14-33-33-33z m-44 67l7-4c4-3 9-5 16-7l9-3 0-18c0-7 5-12 12-12 7 0 12 5 12 12l0 18 9 3c5 2 12 4 16 7l7 4 14-14c5-4 12-4 17 0 4 5 4 12 0 17l-14 14 4 7c3 4 5 9 7 16l3 9 18 0c7 0 12 5 12 12 0 7-5 12-12 12l-21 0-2 9c-2 5-5 12-7 16l-5 7 14 14c5 5 5 12 0 16-4 5-11 5-16 0l-16-16-5 2c-5 3-9 5-16 7l-10 3 0 18c0 7-4 12-11 12-7 0-12-5-12-12l0-18-7-3c-5-2-12-4-16-7l-7-2-14 14c-5 5-12 5-16 0-5-5-5-12 0-16l14-14-5-7c-2-5-5-9-7-16l-2-10-17 0c-7 0-11-4-11-11 0-7 4-12 11-12l19 0 2-9c3-5 5-12 7-17l5-7-14-14c-5-4-5-11 0-16 5-5 12-5 16 0z m44 17c-23 0-42 18-42 42 0 23 19 42 42 42 23 0 42-19 42-42 0-24-19-42-42-42z m0 60c-9 0-19-9-19-18 0-10 10-19 19-19 9 0 19 9 19 19 0 9-10 18-19 18z"/>
 <glyph glyph-name="04-1" unicode="&#57379;" d="M254 440c97 0 184-72 184-156 0-84-84-156-184-156-17 0-33 2-49 5-3 0-3 0-5 0-11 0-18-5-25-14-14-26-42-42-68-45 5 14 14 35 14 56 0 26-9 47-14 59 0 2-2 2-2 4-19 26-31 58-31 89 0 32 14 72 42 97 35 38 84 61 138 61m0 28c-117 0-212-84-210-186 0-42 14-80 40-107 4-12 11-26 11-47 0-23-18-56-18-56-7-5-7-11-5-16 5-2 7-9 14-9 2 0 9-3 19-3 39 0 74 23 95 58 16-2 33-4 56-4 116 0 212 84 212 186 0 102-96 184-214 184z"/>
 <glyph glyph-name="021" unicode="&#57380;" d="M254 44l-180 56c-11 5-18 19-18 30l0 317c0 14 14 25 28 21l170-49 179 49c2 0 5 0 7 0 11 0 21-10 21-21l0-317c0-11-7-25-19-30z m-177 401l0-315c0-2 2-7 4-7l173-53 179 56c0 0 2 4 2 7l0 312-181-49z m165-38l23 0 0-349-23 0z"/>
+<glyph glyph-name="grid-view" unicode="&#57381;" d="M28 228l200 0 0-171-200 0z m256 0l200 0 0-171-200 0z m-256 227l200 0 0-171-200 0z m256 0l200 0 0-171-200 0z"/>
+<glyph glyph-name="list-view" unicode="&#57382;" d="M28 114l456 0 0-57-456 0z m0 114l456 0 0-57-456 0z m0 113l456 0 0-57-456 0z m0 114l456 0 0-57-456 0z"/>
 </font></defs></svg>