From c43d23bd705b89bf6e23abb9333a436da0417926 Mon Sep 17 00:00:00 2001
From: Van <lly219@gmail.com>
Date: Fri, 5 Sep 2014 17:39:21 +0800
Subject: [PATCH] file icon

---
 file/files.go       | 20 ++++++++------
 static/css/base.css | 45 ++++++++++++++++---------------
 static/css/side.css | 64 +++++++++++++++++++++++++++++++++++++++++++++
 view/index.html     |  5 ++--
 4 files changed, 101 insertions(+), 33 deletions(-)
 create mode 100644 static/css/side.css

diff --git a/file/files.go b/file/files.go
index b71caf5..021ac83 100644
--- a/file/files.go
+++ b/file/files.go
@@ -23,7 +23,7 @@ func GetFiles(w http.ResponseWriter, r *http.Request) {
 	username := session.Values["username"].(string)
 	userSrc := conf.Wide.GetUserWorkspace(username) + string(os.PathSeparator) + "src"
 
-	root := FileNode{Name: "projects", Path: userSrc, IconSkin: ".ico-ztree-dir", Type: "d", FileNodes: []*FileNode{}}
+	root := FileNode{Name: "projects", Path: userSrc, IconSkin: "ico-ztree-dir ", Type: "d", FileNodes: []*FileNode{}}
 	fileInfo, _ := os.Lstat(userSrc)
 
 	walk(userSrc, fileInfo, &root)
@@ -195,7 +195,7 @@ func walk(path string, info os.FileInfo, node *FileNode) {
 
 		if fio.IsDir() {
 			child.Type = "d"
-			child.IconSkin = "ico-ztree-dir"
+			child.IconSkin = "ico-ztree-dir "
 
 			walk(fpath, fio, &child)
 		} else {
@@ -246,23 +246,27 @@ func listFiles(dirname string) []string {
 
 func getIconSkin(filenameExtension string) string {
 	if "" == filenameExtension {
-		return ".ico-ztree-other"
+		return "ico-ztree-other "
 	}
 
 	switch filenameExtension {
 	case ".json":
-		return "ico-ztree-js"
+		return "ico-ztree-js "
 	case ".txt":
-		return "ico-ztree-text"
+		return "ico-ztree-text "
 	case ".properties":
-		return "ico-ztree-pro"
+		return "ico-ztree-pro "
+        case ".html":
+        case ".htm":
+		return "ico-ztree-html " 
 	default:
 		if isImg(filenameExtension) {
-			return ".ico-ztree-img"
+			return "ico-ztree-img "
 		}
 
-		return ".ico-ztree-" + filenameExtension[1:]
+		return "ico-ztree-" + filenameExtension[1:] + " "
 	}
+        return ""
 }
 
 func getEditorMode(filenameExtension string) string {
diff --git a/static/css/base.css b/static/css/base.css
index 03f09e3..8303d79 100644
--- a/static/css/base.css
+++ b/static/css/base.css
@@ -38,6 +38,27 @@ ul {
 }
 /* end reset & function */
 
+/* start frame */
+.frame {
+    position: absolute;
+    border: 1px solid #5F5F5F;
+    background-color: #F8F8F8;
+    width: 340px;
+    z-index: 5;
+}
+
+.frame li {
+    padding: 0 5px;
+    line-height: 25px;
+    cursor: pointer;
+}
+
+.frame li:hover {
+    background-color: #3875D7;
+    color: #FFF;
+}
+/* end frame */
+
 /* start tabs */
 .tabs {
     height: 20px;
@@ -99,28 +120,6 @@ ul {
 }
 /* end framework */
 
-
-/* start side */
-.menu-r {
-    position: absolute;
-    border: 1px solid #5F5F5F;
-    background-color: #F8F8F8;
-    width: 340px;
-    z-index: 2;
-}
-
-.menu-r li {
-    padding: 0 5px;
-    line-height: 25px;
-    cursor: pointer;
-}
-
-.menu-r li:hover {
-    background-color: #3875D7;
-    color: #FFF;
-}
-/* end side */
-
 /* start editor */
 .edit-panel {
     background-color: #D7D7D7;
@@ -151,4 +150,4 @@ ul {
     height: 130px;
     width: 100%;
 }
-/* end output */
\ No newline at end of file
+/* end output */
diff --git a/static/css/side.css b/static/css/side.css
new file mode 100644
index 0000000..2366ff0
--- /dev/null
+++ b/static/css/side.css
@@ -0,0 +1,64 @@
+/* start tree */
+.ztree li a.curSelectedNode {
+    background-color: #3875D7;
+    border-color: #3875D7;
+    color: #FFF;
+    height: 18px;
+}
+
+.ztree li a:hover {
+    text-decoration: none;
+}
+
+.ztree li > a > span.button {
+    background-image: url("../images/ico-file.png");
+}
+
+.ico-ztree-dir {
+    background-position: -2px -23px;
+}
+
+.ico-ztree-html {
+    background-position: -3px -2px;
+}
+
+.ico-ztree-go {
+    background-position: -22px -2px;
+}
+
+.ico-ztree-css {
+    background-position: -42px -2px;
+}
+
+.ico-ztree-img {
+    background-position: -62px -2px;
+}
+
+.ico-ztree-other {
+    background-position: -82px -2px;
+}
+
+.ico-ztree-text {
+    background-position: -102px -2px;
+}
+
+.ico-ztree-sql {
+    background-position: -123px -2px;
+}
+
+.ico-ztree-pro {
+    background-position: -142px -2px;
+}
+
+.ico-ztree-md {
+    background-position: -161px -2px;
+}
+
+.ico-ztree-js {
+    background-position: -182px -2px;
+}
+
+.ico-ztree-xml {
+    background-position: -202px -2px;
+}
+/* end tree */
\ No newline at end of file
diff --git a/view/index.html b/view/index.html
index 33d4917..c9981f0 100644
--- a/view/index.html
+++ b/view/index.html
@@ -11,6 +11,7 @@
         <link rel="stylesheet" href="{{.Wide.StaticServer}}/static/js/lib/ztree/zTreeStyle.css">
 
         <link rel="stylesheet" href="{{.Wide.StaticServer}}/static/css/base.css?{{.Wide.StaticResourceVersion}}">
+        <link rel="stylesheet" href="{{.Wide.StaticServer}}/static/css/side.css?{{.Wide.StaticResourceVersion}}">
     </head>
     <body>
         <div class="menu fn-clear">
@@ -33,7 +34,7 @@
                     <ul id="files" class="ztree"></ul>
 
                     <!-- 目录右键菜单 -->
-                    <div id="dirRMenu" class="menu-r fn-none">
+                    <div id="dirRMenu" class="frame fn-none">
                         <ul>
                             <li onclick="tree.newFile();">{{.i18n.create_file}}</li>
                             <li onclick="tree.newDir();">{{.i18n.create_dir}}</li>
@@ -42,7 +43,7 @@
                     </div>
 
                     <!-- 文件右键菜单 -->
-                    <div id="fileRMenu" class="menu-r fn-none">
+                    <div id="fileRMenu" class="frame fn-none">
                         <ul>
                             <li onclick="tree.removeIt();">{{.i18n.delete}}</li>
                         </ul>