This commit is contained in:
Van 2015-02-14 00:00:38 +08:00
parent 7831ac960f
commit 1cf399bdd5
5 changed files with 308 additions and 206 deletions

View File

@ -129,4 +129,197 @@ button {
.list li:hover .ft-small {
color: #FFF;
}
/* end common */
/* 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 */

67
static/css/playground.css Normal file
View File

@ -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;
}

View File

@ -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;

View File

@ -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,

View File

@ -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>
<button id="run" onclick="playground.run();">Run</button>
<button id="stop" onclick="playground.stop();">Stop</button>
<button id="share" onclick="playground.share();">Share</button>
<span id="url"></span>
</div>
<div>
<div id="editorDiv">
<div class="header menu fn-clear">
<ul class="fn-left">
<li>
<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 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}}",