lxm_front/eruda
1
0
Fork 0
mirror of https://github.com/liriliri/eruda.git synced 2026-02-02 09:49:00 +08:00
Code Issues Projects Releases Wiki Activity

Dev: Source style

Browse Source
This commit is contained in:
surunzi
2016-05-29 13:33:25 +08:00
parent e1a00e1af9
commit 2834970c8f
10 changed files with 73 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/Elements/Elements.scss
View File

@@ -9,15 +9,7 @@
@include overflow-auto(y);
height: 100%;
}
.breadcrumb {
background: #fff;
margin-bottom: 10px;
word-break: break-all;
padding: $padding;
font-size: $font-size-l;
min-height: 40px;
border-bottom: 1px solid $gray-light;
}
@include breadcrumb();
.section {
h2 {
background: $blue;

4
src/Snippets/Snippets.scss
View File

@@ -18,12 +18,12 @@
text-align: center;
}
.btn {
background: $red;
background: $blue;
cursor: pointer;
transition: background $anim-duration;
}
.btn:active {
background: $red-dark;
background: $blue-dark;
}
.description {
background: #fff;

25
src/Sources/JsonViewer.es6
View File

@@ -16,18 +16,25 @@ export default class JsonViewer
}
_bindEvent()
{
this._$el.on('click', '.eruda-expanded', function ()
this._$el.on('click', 'li', function (e)
{
var $this = util.$(this);
var $this = util.$(this),
$firstSpan = util.$(this).find('span').eq(0);
$this.parent().find('ul').eq(0).hide();
$this.addClass('eruda-collapsed');
}).on('click', '.eruda-expanded.eruda-collapsed', function ()
{
var $this = util.$(this);
if (!$firstSpan.hasClass('eruda-expanded')) return;
$this.rmClass('eruda-collapsed');
$this.parent().find('ul').eq(0).show();
e.stopPropagation();
var $ul = $this.find('ul').eq(0);
if ($firstSpan.hasClass('eruda-collapsed'))
{
$firstSpan.rmClass('eruda-collapsed');
$ul.show();
} else
{
$firstSpan.addClass('eruda-collapsed');
$ul.hide();
}
});
}
}

25
src/Sources/Sources.es6
View File

@@ -13,7 +13,6 @@ export default class Sources extends Tool
require('./Sources.scss');
this.name = 'sources';
this._isInit = false;
this._loadTpl();
}
@@ -28,8 +27,7 @@ export default class Sources extends Tool
{
if (type === 'img')
{
// _isInit is required to set true for async process.
this._isInit = true;
this._isFetchingData = true;
var img = new Image();
@@ -37,6 +35,7 @@ export default class Sources extends Tool
img.onload = function ()
{
self._isFetchingData = false;
self._data = {
type: 'img',
val: {
@@ -48,6 +47,10 @@ export default class Sources extends Tool
self._render();
};
img.onerror = function ()
{
self._isFetchingData = false;
};
img.src = val;
@@ -64,11 +67,14 @@ export default class Sources extends Tool
{
super.show();
if (!this._isInit) this._reset();
if (!this._data && !this._isFetchingData)
{
this._renderDef();
}
return this;
}
_reset()
_renderDef()
{
if (this._html)
{
@@ -89,14 +95,17 @@ export default class Sources extends Tool
if (err) return;
this._html = data;
this._reset();
this._renderDef();
});
}
_bindEvent()
{
this._parent.on('showTool', (name, lastTool) =>
{
if (name !== this.name && lastTool.name === this.name) this._reset();
if (name !== this.name && lastTool.name === this.name)
{
delete this._data;
}
});
this._$el.on('click', '.eruda-http .eruda-response', () =>
@@ -210,5 +219,7 @@ export default class Sources extends Tool
if (html === this._lastHtml) return;
this._lastHtml = html;
this._$el.html(html);
// Need setTimeout to make it work
setTimeout(() => this._$el.get(0).scrollTop = 0, 0);
}
}

25
src/Sources/Sources.scss
View File

@@ -1,4 +1,5 @@
@import "../style/variable";
@import "../style/mixin";
.dev-tools { .tools {
.sources {
@@ -12,13 +13,12 @@
-webkit-overflow-scrolling: touch;
min-height: 100%;
}
.code {
font-family: $font-family-code;
font-size: $font-size-s;
}
.image {
.breadcrumb {
background: #fff;
padding: $padding;
margin-bottom: 10px;
word-break: break-all;
}
@include breadcrumb();
.img-container {
text-align: center;
img {
@@ -33,12 +33,7 @@
}
}
.http {
.breadcrumb {
background: #fff;
padding: $padding;
margin-bottom: 10px;
word-break: break-all;
}
@include breadcrumb();
.section {
background: #fff;
h2 {
@@ -67,7 +62,8 @@
}
}
.json {
font-size: 14px;
font-family: $font-family-code;
font-size: $font-size-s;
line-height: 1.2;
background: #fff;
min-height: 100%;
@@ -123,13 +119,12 @@
font-family: sans-serif;
position: absolute;
left: -15px;
top: 0;
top: -2px;
}
.collapsed:before {
content: "+";
font-size: 1.5em;
color: #000;
top: 1px;
}
li .collapsed ~ .close:before {
content: "... ";

12
src/lib/highlight.es6
View File

@@ -33,7 +33,7 @@ export default function highlight(str, lang)
str = str.replace(/___(?!subtmpl)\w+?___/g, function($0)
{
var end = $0.substr(3, 3) ==='end',
var end = $0.substr(3, 3) === 'end',
tag = (!end? $0.substr(3) : $0.substr(6)).replace(/_/g,''),
lastTag = lvls.length > 0 ? lvls[lvls.length - 1] : null;
@@ -65,6 +65,7 @@ export default function highlight(str, lang)
str = str.replace(/___subtmpl\d+___/g, function($tmpl)
{
var i = parseInt($tmpl.replace(/___subtmpl(\d+)___/, "$1"), 10);
return subLangs[i];
});
});
@@ -73,9 +74,8 @@ export default function highlight(str, lang)
};
var style = {
code: 'background-color:#ffffff;color:#555;',
comment: 'color:#969896',
string: 'color:#183691',
comment: 'color:#63a35c;',
string: 'color:#183691;',
number: 'color:#0086b3;',
keyword: 'color:#a71d5d;',
operators: 'color:#a71d5d;'
@@ -96,8 +96,8 @@ language.html = {
comment: {re: /(<!\-\-([\s\S]*?)\-\->)/g, style: 'comment'},
tag: {re: /(<\/?\w(.|\n)*?\/?>)/g, style: 'keyword', embed: ['string']},
string: language.js.string,
css: {re: /(?:<style.*?>)([\s\S]+?)(?:<\/style>)/gi, language: 'css'},
script: {re: /(?:<script.*?>)([\s\S]+?)(?:<\/script>)/gi, language: 'js'}
css: {re: /(?:<style.*?>)([\s\S]*)?(?:<\/style>)/gi, language: 'css'},
script: {re: /(?:<script.*?>)([\s\S]*?)(?:<\/script>)/gi, language: 'js'}
};
language.css = {

17
src/style/mixin.scss
View File

@@ -1,3 +1,5 @@
@import "./variable";
@mixin absolute($width: 100%, $height: 100%) {
position: absolute;
width: $width;
@@ -6,12 +8,23 @@
top: 0;
}
@mixin overflow-auto($direction: 'both')
{
@mixin overflow-auto($direction: 'both') {
@if $direction == 'both' {
overflow: auto;
} @else {
overflow-#{$direction}: auto;
}
-webkit-overflow-scrolling: touch;
}
@mixin breadcrumb {
.breadcrumb {
background: #fff;
margin-bottom: 10px;
word-break: break-all;
padding: $padding;
font-size: $font-size-l;
min-height: 40px;
border-bottom: 1px solid $gray-light;
}
}

2
src/style/style.scss
View File

@@ -11,7 +11,7 @@
z-index: 100000;
color: $gray-dark;
transform: translateZ(0);
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-family: $font-family;
font-size: $font-size;
* {
box-sizing: border-box;

3
src/style/variable.scss
View File

@@ -7,6 +7,9 @@ $font-size: 14px;
$font-size-s: 12px;
$font-size-l: 16px;
$font-family: 'Helvetica Neue', Helvetica, Arial, sans-seri;
$font-family-code: Consolas, "Liberation Mono", Menlo, Courier, monospace;
$anim-duration: .3s;
// https://www.google.com/design/spec/style/color.html#color-color-palette

1
test/index.html
View File

@@ -35,6 +35,7 @@
<button onclick="xxx();">Trigger Error</button>
<div style="height: 500px;"></div>
<script>
// Test scripts
var test = document.getElementById('test-element');
test.addEventListener('click', function ()
{