#212

static/css/base.css

@@ -130,3 +130,196 @@ button {
     color: #FFF;
 }
 /* end common */
+
+/* start icon */
+@font-face {
+    font-family: 'icomoon';
+    src:url('fonts/icomoon.eot?35cb2z');
+    src:url('fonts/icomoon.eot?#iefix35cb2z') format('embedded-opentype'),
+        url('fonts/icomoon.woff?35cb2z') format('woff'),
+        url('fonts/icomoon.ttf?35cb2z') format('truetype'),
+        url('fonts/icomoon.svg?35cb2z#icomoon') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+
+.font-ico {
+    font-family: 'icomoon';
+    /* Better Font Rendering =========== */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    cursor: pointer;
+    font-size: 13px;
+    line-height: 20px;
+}
+
+.ico-book:before {
+    content: "\e623";
+}
+
+.ico-price:before {
+    content: "\e616";
+}
+
+.ico-start:before {
+    content: "\e9d7";
+}
+
+.ico-share:before {
+    content: "\e61f";
+}
+
+.ico-github:before {
+    content: "\f00a";
+}
+
+.ico-tencent:before {
+    content: "\e622";
+}
+
+.ico-weibo:before {
+    content: "\e621";
+}
+
+.ico-googleplus:before {
+    content: "\e61a";
+}
+
+.ico-twitter:before {
+    content: "\e61c";
+}
+
+.ico-email:before {
+    content: "\e619";
+}
+
+.ico-facebook:before {
+    content: "\e61b";
+}
+
+.ico-moveup:before {
+    content: "\f148";
+}
+
+.ico-movedown:before {
+    content: "\f149";
+}
+
+.ico-keyboard:before {
+    content: "\f11c";
+}
+
+.ico-findfiles:before {
+    content: "\e603";
+}
+
+.ico-find:before {
+    content: "\e602";
+}
+
+.ico-editor:before {
+    content: "\e604";
+}
+
+.ico-tree:before {
+    content: "\e600";
+}
+
+.ico-build:before {
+    content: "\e601";
+}
+
+.ico-notification:before {
+    content: "\e607";
+}
+
+.ico-report:before {
+    content: "\e605";
+}
+
+.ico-comment:before {
+    content: "\e620";
+}
+
+.ico-goline:before {
+    content: "\e61e";
+}
+
+.ico-info:before {
+    content: "\e61d";
+}
+
+.ico-signup:before {
+    content: "\e606";
+}
+
+.ico-signout:before {
+    content: "\e618";
+}
+
+.ico-redo:before {
+    content: "\e615";
+}
+
+.ico-undo:before {
+    content: "\e60e";
+}
+
+.ico-about:before {
+    content: "\e60d";
+}
+
+.ico-import:before {
+    content: "\f0ee";
+}
+
+.ico-export:before {
+    content: "\f0ed";
+}
+
+.ico-refresh:before {
+    content: "\f021";
+}
+
+.ico-remove:before {
+    content: "\e60b";
+}
+
+.ico-save:before {
+    content: "\f0c7";
+}
+
+.ico-max:before {
+    content: "\e609";
+}
+
+.ico-format:before {
+    content: "\e612";
+}
+
+.ico-buildrun:before {
+    content: "\e60c";
+}
+
+.ico-stop:before {
+    content: "\e60f";
+}
+
+.ico-restore:before {
+    content: "\e613";
+}
+
+.toolbars .ico-restore:before {
+    content: "\e60a";
+}
+
+.ico-min:before {
+    content: "\e614";
+    position: absolute;
+    right: 5px;
+}
+
+.ico-close:before {
+    content: "\e611";
+}
+/* end ico */

static/css/playground.css

@@ -0,0 +1,67 @@
+/*
+ * Copyright (c) 2014-2015, b3log.org
+ *
+ * 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.
+ */
+.font-ico {
+    font-size: 26px;
+}
+
+.header {
+    margin: 0;
+    padding: 10px;
+}
+
+.header .gravatar {
+    width: 26px;
+    border-radius: 13px;
+}
+
+.header > .fn-right {
+    margin-top: 10px;
+}
+
+.header .logo {
+    height: 36px;
+    margin-top: -4px;
+}
+
+.share-panel {
+    position: absolute;
+    z-index: 20;
+    width: 258px;
+    padding: 10px 10px;
+    right: 0px;
+    line-height: normal;
+    top: 57px;
+}
+
+.share-panel .font-ico {
+    transition: all .2s ease-out 0s;
+    margin: 0 5px;
+    width: 24px;
+}
+
+.share-panel .font-ico:hover {
+    transform:rotate(360deg);
+}
+
+#editorDiv {
+    width: 60%;
+    float: left;
+}
+
+#output {
+    width: 40%;
+    float: right;
+}

static/css/wide.css

@@ -14,199 +14,6 @@
  * limitations under the License.
  */
 
-/* start icon */
-@font-face {
-    font-family: 'icomoon';
-    src:url('fonts/icomoon.eot?35cb2z');
-    src:url('fonts/icomoon.eot?#iefix35cb2z') format('embedded-opentype'),
-        url('fonts/icomoon.woff?35cb2z') format('woff'),
-        url('fonts/icomoon.ttf?35cb2z') format('truetype'),
-        url('fonts/icomoon.svg?35cb2z#icomoon') format('svg');
-    font-weight: normal;
-    font-style: normal;
-}
-
-.font-ico {
-    font-family: 'icomoon';
-    /* Better Font Rendering =========== */
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    cursor: pointer;
-    font-size: 13px;
-    line-height: 20px;
-}
-
-.ico-book:before {
-    content: "\e623";
-}
-
-.ico-price:before {
-    content: "\e616";
-}
-
-.ico-start:before {
-    content: "\e9d7";
-}
-
-.ico-share:before {
-    content: "\e61f";
-}
-
-.ico-github:before {
-    content: "\f00a";
-}
-
-.ico-tencent:before {
-    content: "\e622";
-}
-
-.ico-weibo:before {
-    content: "\e621";
-}
-
-.ico-googleplus:before {
-    content: "\e61a";
-}
-
-.ico-twitter:before {
-    content: "\e61c";
-}
-
-.ico-email:before {
-    content: "\e619";
-}
-
-.ico-facebook:before {
-    content: "\e61b";
-}
-
-.ico-moveup:before {
-    content: "\f148";
-}
-
-.ico-movedown:before {
-    content: "\f149";
-}
-
-.ico-keyboard:before {
-    content: "\f11c";
-}
-
-.ico-findfiles:before {
-    content: "\e603";
-}
-
-.ico-find:before {
-    content: "\e602";
-}
-
-.ico-editor:before {
-    content: "\e604";
-}
-
-.ico-tree:before {
-    content: "\e600";
-}
-
-.ico-build:before {
-    content: "\e601";
-}
-
-.ico-notification:before {
-    content: "\e607";
-}
-
-.ico-report:before {
-    content: "\e605";
-}
-
-.ico-comment:before {
-    content: "\e620";
-}
-
-.ico-goline:before {
-    content: "\e61e";
-}
-
-.ico-info:before {
-    content: "\e61d";
-}
-
-.ico-signup:before {
-    content: "\e606";
-}
-
-.ico-signout:before {
-    content: "\e618";
-}
-
-.ico-redo:before {
-    content: "\e615";
-}
-
-.ico-undo:before {
-    content: "\e60e";
-}
-
-.ico-about:before {
-    content: "\e60d";
-}
-
-.ico-import:before {
-    content: "\f0ee";
-}
-
-.ico-export:before {
-    content: "\f0ed";
-}
-
-.ico-refresh:before {
-    content: "\f021";
-}
-
-.ico-remove:before {
-    content: "\e60b";
-}
-
-.ico-save:before {
-    content: "\f0c7";
-}
-
-.ico-max:before {
-    content: "\e609";
-}
-
-.ico-format:before {
-    content: "\e612";
-}
-
-.ico-buildrun:before {
-    content: "\e60c";
-}
-
-.ico-stop:before {
-    content: "\e60f";
-}
-
-.ico-restore:before {
-    content: "\e613";
-}
-
-.toolbars .ico-restore:before {
-    content: "\e60a";
-}
-
-.ico-min:before {
-    content: "\e614";
-    position: absolute;
-    right: 5px;
-}
-
-.ico-close:before {
-    content: "\e611";
-}
-/* end ico */
-
 /* start frame */
 .frame {
     position: absolute;

static/js/playground.js

@@ -18,7 +18,7 @@ var playground = {
     editor: undefined,
     pid: undefined,
     init: function () {
-        $("#editorDiv").append("<textarea id='editor'></textarea>");
+        $("#editorDiv").append("");
         var textArea = document.getElementById("editor");
         textArea.value = code;
         playground.editor = CodeMirror.fromTextArea(textArea, {
@@ -27,7 +27,7 @@ var playground = {
             autoCloseBrackets: true,
             matchBrackets: true,
             highlightSelectionMatches: {showToken: /\w/},
-            rulers: [{color: "#ccc", column: 120, lineStyle: "dashed"}],
+            rulers: [{color: "#ccc", column: 80, lineStyle: "dashed"}],
             styleActiveLine: true,
             theme: "wide",
             tabSize: 4,

views/playground/index.html

@@ -9,6 +9,9 @@
         <meta name="author" content="B3log">
 
         <link rel="stylesheet" href="{{.conf.StaticServer}}/static/css/base.css?{{.conf.StaticResourceVersion}}">
+        <link rel="stylesheet" href="{{.conf.StaticServer}}/static/css/sign.css?{{.conf.StaticResourceVersion}}">
+        <link rel="stylesheet" href="{{.conf.StaticServer}}/static/css/playground.css?{{.conf.StaticResourceVersion}}">
+        <link rel="stylesheet" href="{{.conf.StaticServer}}/static/css/themes/default.css?{{.conf.StaticResourceVersion}}">
 
         <link rel="stylesheet" href="{{.conf.StaticServer}}/static/js/lib/codemirror-{{.codeMirrorVer}}/codemirror.css?{{.conf.StaticResourceVersion}}">
         <link rel="stylesheet" href="{{$.conf.StaticServer}}/static/js/overwrite/codemirror/theme/wide.css?{{.conf.StaticResourceVersion}}">
@@ -16,18 +19,50 @@
         <link rel="icon" type="image/x-icon" href="/favicon.ico" />
     </head>
     <body>
-        <div>
+        <div class="header menu fn-clear">
-            <button id="run" onclick="playground.run();">Run</button>
+            <ul class="fn-left">
-            <button id="stop" onclick="playground.stop();">Stop</button>
+                <li>
-            <button id="share" onclick="playground.share();">Share</button>
+                    <a href="/login" rel="login">
+                        <img title="Wide, a Web-based IDE for Teams using Golang." src="{{.conf.StaticServer}}/static/images/wide-logo.png" 
+                             class="logo"/></a>
+                </li>
+                <li>
+                    <button class="btn" id="run" onclick="playground.run();">Run</button>
+                </li>
+                <li>
+                    <button class="btn btn-red" id="stop" onclick="playground.stop();">Stop</button>
+                </li>
+                <li>
+                    <button class="btn-white btn" id="share" onclick="playground.share();">Share</button>
                     <span id="url"></span>
+                </li>
+            </ul>
+            <div class="fn-right">
+                <span class="font-ico ico-about"></span> &nbsp;
+                <span class="font-ico ico-share"></span> &nbsp;
+                <span onclick="window.open('https://github.com/b3log/wide')"
+                      class="font-ico ico-github"></span>&nbsp;
+                <div class="share-panel frame">
+                    <span title="Email" class="font-ico ico-email"></span>
+                    <span title="Twitter" class="font-ico ico-twitter"></span>
+                    <span title="Facebook" class="font-ico ico-facebook"></span>
+                    <span title="G+" class="font-ico ico-googleplus"></span>
+                    <span title="微博" class="font-ico ico-weibo"></span>
+                    <span title="腾讯微博" class="font-ico ico-tencent"></span>
                 </div>
-        <div>
+            </div>
+        </div>
+        <div class="fn-clear">
             <div id="editorDiv">
+                <textarea id='editor'></textarea>
+            </div>
+            <textarea id="output" rows="20" readonly="readonly" ></textarea>
+        </div>
+        <div class="footer">
+            <div class="wrapper">
+                Ver {{.ver}}, &copy; {{.year}} <a rel="copyright" href="http://b3log.org" target="_blank">B3LOG.ORG</a>
             </div>
-            <textarea id="output" rows="20" readonly="readonly" style="width: 100%;" ></textarea>
         </div>
-
         <script>
             var config = {
                 "context": "{{.conf.Context}}",