Dev: Change icon to font-awesome and add log icons

This commit is contained in:
surunzi
2016-05-15 19:49:16 +08:00
parent 714a0f91cc
commit 231977f921
13 changed files with 97 additions and 47 deletions

View File

@@ -1,11 +1,11 @@
<div class="eruda-control">
<span class="eruda-icon-blocked clear-console" ontouchstart></span>
<span class="eruda-icon-ban clear-console" ontouchstart></span>
<span class="eruda-filter filter eruda-active" data-filter="all">All</span>
<span class="eruda-filter filter" data-filter="error">Error</span>
<span class="eruda-filter filter" data-filter="warn">Warning</span>
<span class="eruda-filter filter" data-filter="info">Info</span>
<span class="eruda-filter filter" data-filter="log">Log</span>
<span class="eruda-icon-info help" ontouchstart></span>
<span class="eruda-icon-info-circle help" ontouchstart></span>
</div>
<div class="eruda-logs"></div>
<div class="eruda-js-input">

View File

@@ -11,7 +11,7 @@
height: 40px;
line-height: 20px;
width: 100%;
.icon-blocked, .icon-info {
.icon-ban, .icon-info-circle {
display: inline-block;
color: $gray;
padding: 5px;
@@ -22,10 +22,10 @@
color: $gray-light;
}
}
.icon-blocked {
.icon-ban {
left: 10px;
}
.icon-info {
.icon-info-circle {
right: 10px;
}
.filter {
@@ -66,9 +66,13 @@
width: 50%;
display: inline-block;
text-align: center;
border-right: 1px solid $gray-light;
height: 40px;
line-height: 40px;
float: left;
&:last-child {
border-right: none;
}
&:active {
background: $blue;
color: #fff;

View File

@@ -52,6 +52,7 @@ export default class Log extends util.Emitter
type: 'input',
ignoreFilter: true,
isCode: true,
icon: 'chevron-right',
src,
val: jsCode
});
@@ -73,6 +74,7 @@ export default class Log extends util.Emitter
this._insert({
type: 'output',
ignoreFilter: true,
icon: 'chevron-left',
src,
val: transMsg(val)
});
@@ -120,25 +122,27 @@ export default class Log extends util.Emitter
{
if (util.isUndef(msg)) return;
var ignoreFilter = false, src;
var ignoreFilter = false;
if (util.isErr(msg))
{
src = {
stack: msg.stack,
message: msg.message || ''
};
ignoreFilter = msg.ignoreFilter;
msg = errToStr(msg);
} else
{
msg = errToStr(new Error(), transMsg(msg));
msg = new Error(msg);
}
var src = {
message: msg.message || '',
stack: msg.stack
};
msg = errToStr(msg);
this._insert({
type: 'error',
ignoreFilter: ignoreFilter,
src,
icon: 'times-circle',
val: msg
});
@@ -152,6 +156,7 @@ export default class Log extends util.Emitter
this._insert({
type: 'info',
src,
icon: 'info-circle',
val: msg
});
@@ -165,6 +170,7 @@ export default class Log extends util.Emitter
this._insert({
type: 'warn',
src,
icon: 'exclamation-triangle',
val: msg
});
@@ -328,11 +334,12 @@ function evalJs(jsInput)
return eval.call(window, jsInput);
}
function errToStr(err, msg)
function errToStr(err)
{
var lines = err.stack.split('\n');
if (util.isUndef(msg)) msg = lines[0] + '<br/>';
var msg = `${lines[0]}<br/>`;
var stack = `<div class="eruda-stack">${lines.slice(1).join('<br/>')}</div>`;
stack = stack.replace(regJsUrl, function (match)

View File

@@ -1,6 +1,11 @@
<ul>
{{#each logs}}
<li class="eruda-{{type}} eruda-log-item" data-idx="{{@index}}">
{{#if icon}}
<div class="eruda-icon-container">
<span class="eruda-icon eruda-icon-{{icon}}"></span>
</div>
{{/if}}
{{#if showTimes}}<div class="eruda-times">{{times}}</div>{{/if}}
<div class="eruda-log-content-wrapper">
<div class="eruda-log-content">

View File

@@ -17,19 +17,41 @@
a {
color: $blue !important;
}
.times {
background: $blue;
padding: 5px;
color: #fff;
border-radius: 4px;
.times, .icon-container {
float: left;
margin-right: 5px;
}
.icon-container {
.icon {
line-height: 20px;
font-size: 12px;
color: $gray-dark;
}
.icon-chevron-right {
color: $blue;
}
.icon-info-circle {
color: $blue;
}
.icon-times-circle {
color: $red-dark;
}
.icon-exclamation-triangle {
color: $yellow-dark;
}
}
.times {
background: $blue;
padding: 2px 4px;
color: #fff;
border-radius: 10px;
}
.log-content-wrapper {
overflow: hidden;
}
.log-content
{
line-height: 20px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
@@ -74,6 +96,9 @@
&.info {
color: $blue;
}
&.output {
color: $gray-dark;
}
}
}
} } }

View File

@@ -108,7 +108,7 @@
.btn {
text-align: center;
color: $gray;
font-size: 14px;
font-size: 12px;
line-height: 40px;
flex-grow: 1;
&:active, &.active {

View File

@@ -1,3 +1,3 @@
<div class="eruda-home-btn" ontouchstart>
<span class="eruda-icon-terminal"></span>
<span class="eruda-icon-cog"></span>
</div>

View File

@@ -1,4 +1,3 @@
.container { .home-btn {
width: 40px;
height: 40px;

View File

@@ -2,7 +2,7 @@
<h2 class="eruda-title {{localStoreState}}">
LocalStorage
<div class="eruda-btn refresh-local-storage">
<span class="eruda-icon-loop"></span>
<span class="eruda-icon-repeat"></span>
</div>
</h2>
<table>
@@ -13,7 +13,7 @@
<td class="eruda-key">{{key}}</td>
<td class="eruda-local-storage-val" data-key="{{key}}">{{val}}</td>
<td class="eruda-control">
<span class="eruda-icon-bin delete-local-storage" data-key="{{key}}"></span>
<span class="eruda-icon-trash delete-local-storage" data-key="{{key}}"></span>
</td>
</tr>
{{/each}}
@@ -29,7 +29,7 @@
<h2 class="eruda-title {{cookieState}}">
Cookie
<div class="eruda-btn refresh-cookie">
<span class="eruda-icon-loop"></span>
<span class="eruda-icon-repeat"></span>
</div>
</h2>
<table>
@@ -40,7 +40,7 @@
<td class="eruda-key">{{key}}</td>
<td>{{val}}</td>
<td class="eruda-control">
<span class="eruda-icon-bin delete-cookie" data-key="{{key}}"></span>
<span class="eruda-icon-trash delete-cookie" data-key="{{key}}"></span>
</td>
</tr>
{{/each}}
@@ -56,7 +56,7 @@
<h2 class="eruda-title {{scriptState}}">
Script
<div class="eruda-btn refresh-script">
<span class="eruda-icon-loop"></span>
<span class="eruda-icon-repeat"></span>
</div>
</h2>
<ul class="eruda-link-list">
@@ -75,7 +75,7 @@
<h2 class="eruda-title {{stylesheetState}}">
Stylesheet
<div class="eruda-btn refresh-stylesheet">
<span class="eruda-icon-loop"></span>
<span class="eruda-icon-repeat"></span>
</div>
</h2>
<ul class="eruda-link-list">
@@ -94,7 +94,7 @@
<h2 class="eruda-title {{imageState}}">
Image
<div class="eruda-btn refresh-image">
<span class="eruda-icon-loop"></span>
<span class="eruda-icon-repeat"></span>
</div>
</h2>
<ul class="eruda-image-list">

View File

@@ -39,10 +39,6 @@
border-radius: 50%;
font-size: 12px;
cursor: pointer;
.icon-loop {
position: relative;
top: 1px;
}
}
}
.link-list {
@@ -82,7 +78,7 @@
td {
padding: 10px;
word-break: break-all;
.icon-bin {
.icon-trash {
color: $red-dark;
display: inline-block;
padding: 5px;

View File

@@ -1,6 +1,6 @@
@font-face {
font-family: 'icomoon';
src: url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAeAAAsAAAAABzQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgDxIF2WNtYXAAAAFoAAAAVAAAAFQXVtKLZ2FzcAAAAbwAAAAIAAAACAAAABBnbHlmAAABxAAAA2AAAANgVhdUnGhlYWQAAAUkAAAANgAAADYJuqOraGhlYQAABVwAAAAkAAAAJAfCA8pobXR4AAAFgAAAACQAAAAkGgAAQGxvY2EAAAWkAAAAFAAAABQCIAMgbWF4cAAABbgAAAAgAAAAIAARAERuYW1lAAAF2AAAAYYAAAGGmUoJ+3Bvc3QAAAdgAAAAIAAAACAAAwAAAAMDqwGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA6QQDwP/AAEADwABAAAAAAQAAAAAAAAAAAAAAIAAAAAAAAwAAAAMAAAAcAAEAAwAAABwAAwABAAAAHAAEADgAAAAKAAgAAgACAAEAIOkE//3//wAAAAAAIOkA//3//wAB/+MXBAADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAgAA/8AEAAPAABkAMgAAAS4DIyIOAhUzND4CMzIeAhcHIREHExQOAiMiLgInNyERNx4DMzI+AjUDeiNVYGo4aruLUGBBcZhWLldPRR2WAWCGJkFxmFYuV09FHZb+oIYjVWBqOGq7i1ADGiY+KxdQi7tqVphxQRMkMyCWAWCG/qZWmHFBEyQzIJb+oIYmPisXUIu7agAAAAAFAAAAAAQAA4AAAwAHAAsAHwAjAAATESERAyERIQchESEBIxUjFSM1MzUzNSM1IzUzFTMVMwUjNTMABABA/IADgED9AAMA/kBAQEBAQEBAQEBAAQDAwAOA/IADgPzAAwBA/YABQEBAQEBAQEBAQMBAAAAAAAcAQP/AA4ADwAAJAA0AEQAVABkALQAxAAATERQWMyEyNjURASMRMxMjETMTIxEzEyMRMxMjNTQmKwEiBh0BIyIGHQEhNTQmISM1M4AmGgJAGib+AEBAgEBAgEBAgEBAkNAcFOAUHNAUHANAHP7cwMACgP2AGiYmGgKA/cABwP5AAcD+QAHA/kABwAFAUBQcHBRQHBRQUBQcPwAAAAMAAP/ABAADwAAoADQAQQAAAS4DIyIOAgcOAxUUHgIXHgMzMj4CNz4DNTQuAicTFAYHAT4BMzIeAgU0NjcBDgEjIi4CNQNqJFRcYzMzY1xUJCQ4JhQUJjgkJFRcYzMzY1xUJCQ4JhQUJjgkFiYh/ekvcT5PjGk8/QAmIQIXL3E+T4xpPAMqJDgmFBQmOCQkVFxjMzNjXFQkJDgmFBQmOCQkVFxjMzNjXFQk/pY+cS8CFyEmPGmMTz5xL/3pISY8aYxPAAAEAAD/wAQAA8AADwAZAC0AQQAAATQ2OwEyFh0BFAYrASImNRMhNTM1IzUzETMDIg4CFRQeAjMyPgI1NC4CAyIuAjU0PgIzMh4CFRQOAgHAHBQgFBwcFCAUHMD/AEBAwECAaruLUFCLu2pqu4tQUIu7alaYcUFBcZhWVphxQUFxmAKQFBwcFCAUHBwU/lBAwED/AALAUIu7amq7i1BQi7tqaruLUPxgQXGYVlaYcUFBcZhWVphxQQAAAQAAAAAAALdAQ69fDzz1AAsEAAAAAADTTi+XAAAAANNOL5cAAP/ABAADwAAAAAgAAgAAAAAAAAABAAADwP/AAAAEAAAAAAAEAAABAAAAAAAAAAAAAAAAAAAACQQAAAAAAAAAAAAAAAIAAAAEAAAABAAAAAQAAEAEAAAABAAAAAAAAAAACgAUAB4AagCkAPIBVAGwAAEAAAAJAEIABwAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAHAAAAAQAAAAAAAgAHAGAAAQAAAAAAAwAHADYAAQAAAAAABAAHAHUAAQAAAAAABQALABUAAQAAAAAABgAHAEsAAQAAAAAACgAaAIoAAwABBAkAAQAOAAcAAwABBAkAAgAOAGcAAwABBAkAAwAOAD0AAwABBAkABAAOAHwAAwABBAkABQAWACAAAwABBAkABgAOAFIAAwABBAkACgA0AKRpY29tb29uAGkAYwBvAG0AbwBvAG5WZXJzaW9uIDEuMABWAGUAcgBzAGkAbwBuACAAMQAuADBpY29tb29uAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG5SZWd1bGFyAFIAZQBnAHUAbABhAHJpY29tb29uAGkAYwBvAG0AbwBvAG5Gb250IGdlbmVyYXRlZCBieSBJY29Nb29uLgBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA') format('woff');
src: url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAwAAAsAAAAAC7QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgDxIFZWNtYXAAAAFoAAAAVAAAAFQXVtKPZ2FzcAAAAbwAAAAIAAAACAAAABBnbHlmAAABxAAAB8gAAAfIRdCRLmhlYWQAAAmMAAAANgAAADYJ0GEcaGhlYQAACcQAAAAkAAAAJAe5A85obXR4AAAJ6AAAADQAAAA0JAIAlGxvY2EAAAocAAAAHAAAABwKWAwmbWF4cAAACjgAAAAgAAAAIAATAIVuYW1lAAAKWAAAAYYAAAGGmUoJ+3Bvc3QAAAvgAAAAIAAAACAAAwAAAAMDMwGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA6QgDwP/AAEADwABAAAAAAQAAAAAAAAAAAAAAIAAAAAAAAwAAAAMAAAAcAAEAAwAAABwAAwABAAAAHAAEADgAAAAKAAgAAgACAAEAIOkI//3//wAAAAAAIOkA//3//wAB/+MXBAADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAABQAAAAADJQNuABQAKQA+AEYAcwAAJRE0JyYrASIHBhURFBcWOwEyNzY1MxE0JyYrASIHBhURFBcWOwEyNzY1MxE0JyYrASIHBhURFBcWOwEyNzY1ASEnJicjBgcFFRQHBisBERQHBiMhIicmNREjIicmPQE0NzY7ATc2NzY7ATIXFh8BMzIXFhUBJQYFCCQIBQYGBQgkCAUGkgUFCCUIBQUFBQglCAUFkgUFCCUIBQUFBQglCAUF/skBABsEBrUGBAH3BgUINxobJv4lJhsbNwgFBQUFCLEoCBcWF7cXFhYJKLAIBQalAZIIBQUFBQj+bggGBQUGCAGSCAUFBQUI/m4IBgUFBggBkggFBQUFCP5uCAYFBQYIAjZDBQICBVUkCAYF/eMwIiMhIi8CIAUGCCQIBQVgFQ8PDw8VYAUFCAACAAAAAANuA24ADwCCAAABNCcmIyIHBhUUFxYzMjc2JRUUBwYPAQYHFhcWFRQHBgcGIyIvAQYHBgcGKwEiJyY1JyYnBwYjIicmJyY1NDc2NzY3Ji8BJicmPQE0NzY/ATY3JicmNTQ3Njc2MzIfATY3Njc2OwEyFxYfARYXNzYzMhcWFxYVFAcGBwYHFh8BFhcWFQJJKys8PSsqKis9PCsrASUFBAdqCwsUKQYGDykpDQcITxkbCQcEEX8IBgYQHBhQBggIB0gWBAUIFRQLEAhoCAQFBQQGawgOFyYGBQ8qKQ0HB08ZGwkIBBB/CAYGARAcF1EGCAgGShUEBQgVFQoPCWgIBAUBtzwrKysrPD0rKiore38HBgYBEB8VHTIHBwgGFSgpBT4NCU0dEAUFB2kJDD0FBkIeBggGBwwaGg4dHA8BBgYIfgcHBgEQGhsgLgcHBgcVKSkGPQ0ITh0QBQUHagkMPQYGRB0FCAcGDBoaDh0bEAEGBggAAwAAAAADbgNxAA0AGQA5AAABNCcBFjMyNzY3Njc2NQUBJiMiBwYHBhUUFyUUBwYHBgcGIyInJicmJyY1NDc2NzY3NjMyFxYXFhcWAu4y/lFOXD86OSoqGBn9xQGvTV5VR0gpKjMCuyMjOzpSUVlZUlE7OiMjIyM6O1FSWVlRUjo7IyMBuVxM/lIzGRkpKjo6QKsBrzQqKkhIVF1Oq1pSUjo7IyMjIzs6UlJaWVJROzsjIyMjOztRUgAAAAADAAAAAANuA24AJgA7AFQAACU1NCcmKwERNCcmKwEiBwYdARQXFjsBFSMiBwYdARQXFjMhMjc2NQM1NCcmKwEiBwYdARQXFjsBMjc2NQUUBwYHBiMiJyYnJjU0NzY3NjMyFxYXFhUCSQUFCDcFBQi3CAUFBQUINzcIBQUFBQgBAAgFBUkFBQhuCAUFBQUIbggFBQFuOztlZXd4ZGU7Ozs7ZWR4d2VlOzulWwgFBQElCAUFBQUIXAgFBbcFBQhbCAYFBQYIAgBbCAUFBQUIWwgGBQUGCO54ZGU7Ozs7ZWR4d2VlOzs7O2VldwAAAAEAMwAPAoMDqAAaAAAJAQYjIi8BJjU0NwkBJjU0PwE2MzIXARYVFAcCef5YCw8PC18LCwEw/tALC18LDw8LAagKCgHC/lgLC18KDw8LAS8BMAsPDgtfCwv+WAsPDgsAAAEAAAAAA24DbgBHAAABERQHBiMhIicmPwEmIyIHBgcGBwYVFBcWFxYXFjMyNzY3NjcyHwEWFRQHBgcGIyInJicmJyY1NDc2NzY3NjMyFxYXNzYXFhUDbgsLD/8AGAoJEU9Uczw2NicnGBcXGCcnNjY8RDw9KgQJCAZOBgQ/WFliWVFSOjsjIyMjOzpSUVlUTk89ShEXFwMl/wAPCwsXFhFPThcXJyg2Njs8NjYnJxgXHh42BgEFTwUHBwZLKikjIzs6UlFZWVFROzsjIyAgOUkSCgkYAAAAAAEAWAAPAqgDqAAaAAAJAhYVFA8BBiMiJwEmNTQ3ATYzMh8BFhUUBwKd/tEBLwsLXwsODwv+WAsLAagLDw4LXwsLAwv+0P7RCw8PCl8LCwGoCw4PCwGoCwtfCw4PCwAAAAMACQAAA/cDtwAUACkAQQAAJTU0JyYrASIHBh0BFBcWOwEyNzY1JxM0JyYrASIHBhUTFBcWOwEyNzY3AwEWBwYHBiMhIicmJyY3ATY3NjMyFxYXAkkFBgduBwYFBQYHbgcGBQEKBQgGfgYIBQkGBghqCAUFAQgBtxQVChERE/ySExERChUUAbcKEREUFBERCqVtCAUGBgUIbQgFBgYFCNYBBgcEBgYECP77BgQDAwQGAhb82yQkEQkKCgkRJCQDJRELCgoLEQAAAgAAAAADbgNuACsARAAAATQvATc2NTQvASYjIg8BJyYjIg8BBhUUHwEHBhUUHwEWMzI/ARcWMzI/ATY3FAcGBwYjIicmJyY1NDc2NzYzMhcWFxYVApELaGgLCzQLDw8LZ2gKDxALMwsLZ2cLCzMLEA8KaGcLDw8LNAvdOztlZXd4ZGU7Ozs7ZWR4d2VlOzsBNg8KaGcLDw8LNAsLaGgLCzQLDw8LZ2gKDxALMwsLZ2cLCzMLkXhkZTs7OztlZHh3ZWU7Ozs7ZWV3AAAAAQAAAAAAALM8GZtfDzz1AAsEAAAAAADTXg40AAAAANNeDjQAAAAAA/cDtwAAAAgAAgAAAAAAAAABAAADwP/AAAAEAAAAAAAD9wABAAAAAAAAAAAAAAAAAAAADQQAAAAAAAAAAAAAAAIAAAADJQAAA24AAANuAAADbgAAArcAMwNuAAADAABYBAAACQNuAAAAAAAAAAoAFAAeAL4BegHYAk4CfgLqAxoDfgPkAAEAAAANAIMABQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAHAAAAAQAAAAAAAgAHAGAAAQAAAAAAAwAHADYAAQAAAAAABAAHAHUAAQAAAAAABQALABUAAQAAAAAABgAHAEsAAQAAAAAACgAaAIoAAwABBAkAAQAOAAcAAwABBAkAAgAOAGcAAwABBAkAAwAOAD0AAwABBAkABAAOAHwAAwABBAkABQAWACAAAwABBAkABgAOAFIAAwABBAkACgA0AKRpY29tb29uAGkAYwBvAG0AbwBvAG5WZXJzaW9uIDEuMABWAGUAcgBzAGkAbwBuACAAMQAuADBpY29tb29uAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG5SZWd1bGFyAFIAZQBnAHUAbABhAHJpY29tb29uAGkAYwBvAG0AbwBvAG5Gb250IGdlbmVyYXRlZCBieSBJY29Nb29uLgBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA') format('woff');
font-weight: normal;
font-style: normal;
}
@@ -20,19 +20,31 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-info:before {
.icon-times-circle:before {
content: "\e908";
}
.icon-exclamation-triangle:before {
content: "\e907";
}
.icon-chevron-left:before {
content: "\e906";
}
.icon-chevron-right:before {
content: "\e904";
}
.icon-blocked:before {
content: "\e903";
.icon-repeat:before {
content: "\e905";
}
.icon-terminal:before {
content: "\e901";
}
.icon-bin:before {
content: "\e902";
}
.icon-loop:before {
.icon-trash:before {
content: "\e900";
}
.icon-cog:before {
content: "\e901";
}
.icon-ban:before {
content: "\e902";
}
.icon-info-circle:before {
content: "\e903";
}

View File

@@ -4,7 +4,9 @@ $common-padding: 10px;
$blue: #76a2ee;
$gray: #b4b4b4;
$gray-light: #f2f2f2;
$gray-dark: #888;
$red: #eda29b;
$red-dark: #f73c37;
$green: #8de191;
$yellow: #fff5c2;
$yellow: #fff5c2;
$yellow-dark: #ff9900;