about

static/css/about.css

@@ -1,3 +1,43 @@
 #dialogAbout {
-    
+    margin: 35px 100px 0 100px;
+    line-height: 20px;
+}
+
+#dialogAbout a {
+    color: #4183c4;
+    text-decoration: none;
+}
+
+#dialogAbout a:hover {
+    text-decoration: underline;
+}
+
+#startPage label {
+    color: #666;
+}
+
+#dialogAbout img {
+    width: 100px;
+    float: left;
+    margin-right: 60px;
+}
+
+#dialogAbout .space {
+    margin-bottom: 10px;
+}
+
+#dialogAbout .thx,
+#dialogAbout .thx ul {
+    margin-left: 50px;
+}
+
+#dialogAbout .thx a {
+    width: 100px;
+    display: inline-block;
+}
+
+#dialogAbout .license {
+    color: #999;
+    font-size: 12px;
+    line-height: normal;
 }

static/js/dialog.js

@@ -141,7 +141,8 @@
                 top = settings.position.top;
                 left = settings.position.left;
             } else {
-                top = parseInt((windowH - dialogH) / 2);
+                // 20(footer) + 23(header)
+                top = parseInt((windowH - dialogH - 43) / 2);
                 left = parseInt((windowW - dialogW) / 2);
             }
             $dialog.css({

static/js/wide.js

@@ -272,13 +272,28 @@ var wide = {
             $("#dialogAbout").dialog({
                 "modal": true,
                 "height": 460,
-                "width": 860,
+                "width": 800,
                 "title": config.label.about,
-                "hideFooter": true
+                "hideFooter": true,
+                "afterOpen": function () {
+                    $.ajax({
+                        url: "http://rhythm.b3log.org/version/wide/latest",
+                        type: "GET",
+                        dataType: "jsonp",
+                        jsonp: "callback",
+                        success: function (data, textStatus) {
+                           if ($("#dialogAbout .version").text() === data.wideVersion) {
+                               $(".upgrade").text('当前已是最新版本');
+                           } else {
+                                $(".upgrade").html("请下载最新版本<a href='' target='_blank'>" + data.wideVersion + "</a>");
+                           }
+                        }
+                    });
+                }
             });
 
             // TODO: remove
-            // $("#dialogAbout").dialog("open");
+            $("#dialogAbout").dialog("open");
         });
     },
     _initLayout: function () {
@@ -585,7 +600,7 @@ var wide = {
     },
     goget: function () {
         wide.saveAllFiles();
-        
+
         var currentPath = editors.getCurrentPath();
         if (!currentPath) {
             return false;

view/about.html

@@ -1,14 +1,71 @@
-logo
+<div class="fn-clear">
-Hello, 世界
+    <img class="logo" src="{{.conf.StaticServer}}/static/images/wide-logo.png" alt="wide logi"/>
-Coding with Go on the Wide way.
+    <div class="fn-left">
-wide 当前版本
+        <h2>Hello, 世界</h2>
-检查更新
+        <h3>Coding with Go on the Wide way. </h3>
+    </div>
+</div>
+<div class="space"></div>
+<div>
+    <label>{{.i18n.current_ver}}{{.i18n.colon}}</label> 
+    <span class="version">{{.ver}}</span> <br/>
+    <span class="upgrade">正在检查更新...</span>
+    <div class="space"></div>
 
-开发团队
+    <div class="fn-clear">
-项目地址
+        <div class="fn-left">
-捐赠
+            <label>go环境{{.i18n.colon}}</label>
-许可协议
+            $G #20 (comment), $GOOS, $GOARCH <br/> 
-致谢
+            <label>操作系统{{.i18n.colon}}</label>
+            Windows
+            <div class="space"></div>
 
-go环境
+            <label>{{.i18n.project_address}}{{.i18n.colon}}</label>
-操作系统
+            <a href="https://github.com/b3log/wide" target="_blank">github.com/b3log/wide</a><br/>
+
+            <label>{{.i18n.dev_team}}{{.i18n.colon}}</label>
+            <a href="https://github.com/b3log/b3log-solo/wiki/About_us" target="_blank">B3log</a><br/> 
+
+            <label>{{.i18n.dev_team}}{{.i18n.colon}}</label>
+            <a href="https://github.com/b3log/b3log-solo/wiki/About_us" target="_blank">B3log</a>
+        </div>
+        <div class="fn-left thx">
+            致谢{{.i18n.colon}}
+            <ul>
+                <li>
+                    <a href="http://golang.org">golang</a>
+                    <a href="https://github.com/marijnh/CodeMirror">CodeMirror</a>
+                </li>
+                <li>
+                    <a href="https://github.com/zTree/zTree_v3">zTree</a>
+                    <a href="https://github.com/visualfc/liteide">LiteIDE</a>
+                </li>
+                <li>
+                    <a href="https://github.com/nsf/gocode">gocode</a>
+                    <a href="https://github.com/gorilla">Gorilla</a>
+                </li>
+            </ul>
+        </div>
+    </div>
+    <div class="space"></div>
+    <div>
+        许可协议 
+        <div class="license">
+            /*
+            * Copyright (C) 2011, Liyuan Li
+            *
+            * Licensed under the Apache License, Version 2.0 (the "License");
+            * you may not use this file except in compliance with the License.
+            * You may obtain a copy of the License at
+            *
+            *     http://www.apache.org/licenses/LICENSE-2.0
+            *
+            * Unless required by applicable law or agreed to in writing, software
+            * distributed under the License is distributed on an "AS IS" BASIS,
+            * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+            * See the License for the specific language governing permissions and
+            * limitations under the License.
+            */
+        </div>
+    </div>
+</div>