Add images

Author: takezoe

etc/icons.svg

@@ -137,6 +137,7 @@ trait GistControllerBase extends ControllerBase {
       val gitdir = new File(GistRepoDir, userName + "/" + repoName)
 
       // TODO
+
 //      val conn = getConnection(request)
 //      conn.update("DELETE FROM GIST_COMMENT WHERE USER_NAME = ? AND REPOSITORY_NAME = ?", userName, repoName)
 //      conn.update("DELETE FROM GIST WHERE USER_NAME = ? AND REPOSITORY_NAME = ?", userName, repoName)

src/main/resources/images/menu-revisions-active.png

@@ -0,0 +1,23 @@
+package util
+
+import ControlUtil._
+import org.apache.commons.codec.binary.{StringUtils, Base64}
+
+object ImageUtil {
+
+  private val cache = scala.collection.concurrent.TrieMap[String, String]()
+
+  def dataURI(path: String): String = {
+    cache.getOrElseUpdate(path, {
+      val bytes = using(getClass.getClassLoader.getResourceAsStream(path)){ in =>
+        val bytes = new Array[Byte](in.available)
+        in.read(bytes)
+        bytes
+      }
+      val encoded = StringUtils.newStringUtf8(Base64.encodeBase64(bytes, false))
+      s"data:image/png;base64,${encoded}"
+    })
+  }
+
+
+}

src/main/resources/images/menu-revisions.png

@@ -1,6 +1,7 @@
 @(recent: Seq[model.Gist], gist: Option[model.Gist], files: Seq[(String, util.JGitUtil.ContentInfo)])(implicit context: app.Context)
 @import context._
 @import view.helpers._
+@import util.ImageUtil._
 @html.main("Snippet"){
   <div class="container">
     <div id="error"></div>
@@ -9,8 +10,15 @@
         <ul style="list-style: none; margin-left: 0px;">
         @recent.map { gist =>
           <li style="float: left; width: 200px;">
-            <a class="strong" href="@path/gist/@gist.userName/@gist.repositoryName">@gist.title</a>
-            <div class="muted">@gist.description</div>
+            <img src="@dataURI("images/snippet.png")" style="width: 24px; height: 24px;">
+            <div style="margin-left: 26px; font-size: 80%; position: relative; top: -24px; line-height: normal;">
+              <a class="strong" href="@path/gist/@gist.userName/@gist.repositoryName">@gist.title</a><br>
+              @if(gist.description.nonEmpty){
+                <span class="muted">@gist.description</span>
+              } else {
+                <span style="color: #dddddd;">No description.</span>
+              }
+            </div>
           </li>
         }
         </ul>

src/main/resources/images/snippet.png

@@ -1,16 +1,17 @@
 @(active: String, gist: model.Gist)(implicit context: app.Context)
 @import context._
 @import view.helpers._
+@import util.ImageUtil._
 
-@menuitem(path: String, name: String, label: String, count: Int = 0) = {
+@menuitem(name: String, path: String, activeImage: String, normalImage: String, label: String, count: Int = 0) = {
   <li @if(active == name){class="active"}>
     <div class="@if(active == name){margin} else {gradient} pull-left"></div>
     <a href="@context.path/gist/@path">
       @if(active == name){
-        <img src="@assets/common/images/menu-@{name}-active.png">
+        <img src="@activeImage">
       } else {
-        <img src="@assets/common/images/menu-@{name}-active.png" class="menu-icon-active" style="display:none;">
-        <img src="@assets/common/images/menu-@{name}.png"        class="menu-icon">
+        <img src="@activeImage" class="menu-icon-active" style="display:none;">
+        <img src="@normalImage" class="menu-icon">
       }
       @label
       @if(count > 0){
@@ -23,7 +24,18 @@
 <div style="width: 170px;" class="pull-right">
   <ul class="sidemenu">
     <li style="height: 12px"><div class="gradient pull-left" style="height: 12px"></div></li>
-    @menuitem(s"${gist.userName}/${gist.repositoryName}",           "code"    , "Code")
-    @menuitem(s"${gist.userName}/${gist.repositoryName}/revisions", "revision", "Revision")
+    @menuitem(
+      "code",
+      s"${gist.userName}/${gist.repositoryName}",
+      s"${assets}/common/images/menu-code-active.png",
+      s"${assets}/common/images/menu-code.png",
+      "Code")
+    @menuitem(
+      "revision",
+      s"${gist.userName}/${gist.repositoryName}/revisions",
+      dataURI("images/menu-revisions-active.png"),
+      dataURI("images/menu-revisions.png"),
+      "Revision")
+    <li style="height: 12px"><div class="gradient pull-left" style="height: 12px"></div></li>
   </ul>
 </div>