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

fix: remove tabs horizontal scrollbar #236

Browse Source
This commit is contained in:
redhoodsu
2022-12-08 14:04:22 +08:00
parent 4dbebbdaae
commit 3538b35482
8 changed files with 59 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
build/webpack.base.js
View File

@@ -17,14 +17,7 @@ const postcssLoader = {
plugins: [
prefixer({
prefix: '_',
ignore: [
/luna-console/,
/luna-object-viewer/,
/luna-notification/,
/luna-data-grid/,
/luna-dom-viewer/,
/luna-modal/,
],
ignore: [/luna-*/],
}),
autoprefixer,
clean(),

1
package.json
View File

@@ -74,6 +74,7 @@
"luna-modal": "^0.1.2",
"luna-notification": "^0.1.4",
"luna-object-viewer": "^0.2.2",
"luna-tab": "^0.1.0",
"node-sass": "^7.0.1",
"postcss-clean": "^1.1.0",
"postcss-loader": "^3.0.0",

39
src/DevTools/DevTools.js
View File

@@ -1,4 +1,3 @@
import NavBar from './NavBar'
import logger from '../lib/logger'
import Tool from './Tool'
import Settings from '../Settings/Settings'
@@ -17,6 +16,7 @@ import evalCss from '../lib/evalCss'
import { isDarkTheme } from '../lib/themes'
import LunaNotification from 'luna-notification'
import LunaModal from 'luna-modal'
import LunaTab from 'luna-tab'
import { classPrefix as c } from '../lib/util'
export default class DevTools extends Emitter {
@@ -44,7 +44,7 @@ export default class DevTools extends Emitter {
this._resizeStartSize = 0
this._appendTpl()
this._initNavBar()
this._initTab()
this._initNotification()
this._initModal()
this._bindEvent()
@@ -53,7 +53,7 @@ export default class DevTools extends Emitter {
this._isShow = true
this._$el.show()
this._navBar.resetBottomBar()
this._tab.updateSlider()
// Need a delay after show to enable transition effect.
setTimeout(() => {
@@ -77,6 +77,8 @@ export default class DevTools extends Emitter {
return this._isShow ? this.hide() : this.show()
}
add(tool) {
const tab = this._tab
if (!(tool instanceof Tool)) {
const { init, show, hide, destroy } = new Tool()
defaults(tool, { init, show, hide, destroy })
@@ -94,7 +96,17 @@ export default class DevTools extends Emitter {
tool.active = false
this._tools[name] = tool
this._navBar.add(name)
if (name === 'settings') {
tab.append({
id: name,
title: name,
})
} else {
tab.insert(tab.length - 1, {
id: name,
title: name,
})
}
return this
}
@@ -103,7 +115,7 @@ export default class DevTools extends Emitter {
if (!tools[name]) return logger.warn(`Tool ${name} doesn't exist`)
this._navBar.remove(name)
this._tab.remove(name)
const tool = tools[name]
delete tools[name]
@@ -147,7 +159,7 @@ export default class DevTools extends Emitter {
tool.active = true
tool.show()
this._navBar.activateTool(name)
this._tab.select(name)
this.emit('showTool', name, lastTool)
@@ -192,7 +204,7 @@ export default class DevTools extends Emitter {
destroy() {
evalCss.remove(this._style)
this.removeAll()
this._navBar.destroy()
this._tab.destroy()
this._$el.remove()
}
_setTheme(theme) {
@@ -223,10 +235,7 @@ export default class DevTools extends Emitter {
c(`
<div class="dev-tools">
<div class="resizer"></div>
<div class="nav-bar-container">
<div class="nav-bar"></div>
<div class="bottom-bar"></div>
</div>
<div class="tab"></div>
<div class="tools"></div>
<div class="notification"></div>
<div class="modal"></div>
@@ -237,9 +246,11 @@ export default class DevTools extends Emitter {
this._$el = $container.find(c('.dev-tools'))
this._$tools = this._$el.find(c('.tools'))
}
_initNavBar() {
this._navBar = new NavBar(this._$el.find(c('.nav-bar-container')))
this._navBar.on('showTool', (name) => this.showTool(name))
_initTab() {
this._tab = new LunaTab(this._$el.find(c('.tab')).get(0), {
height: 40,
})
this._tab.on('select', (id) => this.showTool(id))
}
_initNotification() {
this._notification = new LunaNotification(

1
src/DevTools/DevTools.scss
View File

@@ -13,6 +13,7 @@
padding-top: 40px !important;
opacity: 0;
transition: opacity $anim-duration;
border-top: 1px solid var(--border);
.resizer {
position: absolute;
width: 100%;

102
src/DevTools/NavBar.js
View File

@@ -1,102 +0,0 @@
import Emitter from 'licia/Emitter'
import $ from 'licia/$'
import isNum from 'licia/isNum'
import evalCss from '../lib/evalCss'
import { classPrefix as c } from '../lib/util'
export default class NavBar extends Emitter {
constructor($el) {
super()
this._style = evalCss(require('./NavBar.scss'))
this._$el = $el.find(c('.nav-bar'))
this._$bottomBar = $el.find(c('.bottom-bar'))
this._len = 0
this._bindEvent()
}
add(name) {
const $el = this._$el
this._len++
const $last = $el.find(c('.nav-bar-item')).last()
const html = `<div class="${c('nav-bar-item')}">${name}</div>`
if ($last.length > 0 && $last.text() === 'settings') {
$last.before(html)
} else {
$el.append(html)
}
this.resetBottomBar()
}
remove(name) {
this._len--
this._$el.find(c('.nav-bar-item')).each(function () {
const $this = $(this)
if ($this.text().toLowerCase() === name.toLowerCase()) $this.remove()
})
this.resetBottomBar()
}
activateTool(name) {
const self = this
this._$el.find(c('.nav-bar-item')).each(function () {
const $this = $(this)
if ($this.text() === name) {
$this.addClass(c('active'))
self.resetBottomBar()
self._scrollItemToView()
} else {
$this.rmClass(c('active'))
}
})
}
destroy() {
evalCss.remove(this._style)
this._$el.remove()
}
_scrollItemToView() {
const $el = this._$el
const li = $el.find(c('.active')).get(0)
const container = $el.get(0)
const itemLeft = li.offsetLeft
const itemWidth = li.offsetWidth
const containerWidth = container.offsetWidth
const scrollLeft = container.scrollLeft
let targetScrollLeft
if (itemLeft < scrollLeft) {
targetScrollLeft = itemLeft
} else if (itemLeft + itemWidth > containerWidth + scrollLeft) {
targetScrollLeft = itemLeft + itemWidth - containerWidth
}
if (!isNum(targetScrollLeft)) return
container.scrollLeft = targetScrollLeft
}
resetBottomBar() {
const $bottomBar = this._$bottomBar
const $el = this._$el
const li = $el.find(c('.active')).get(0)
if (!li) return
$bottomBar.css({
width: li.offsetWidth,
left: li.offsetLeft - $el.get(0).scrollLeft,
})
}
_bindEvent() {
const self = this
this._$el
.on('click', c('.nav-bar-item'), function () {
self.emit('showTool', $(this).text())
})
.on('scroll', () => this.resetBottomBar())
}
}

49
src/DevTools/NavBar.scss
View File

@@ -1,49 +0,0 @@
@import '../style/variable';
@import '../style/mixin';
$height: 40px;
.container {
.nav-bar-container {
@include absolute(100%, $height);
z-index: 100;
.nav-bar {
@include overflow-auto(x);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
width: 100%;
height: 100%;
background: var(--darker-background);
font-size: 0;
white-space: nowrap;
}
.nav-bar-item {
cursor: pointer;
display: inline-block;
height: $height - 2;
line-height: $height - 2;
padding: 0 10px;
color: var(--foreground);
font-size: $font-size-s;
text-align: center;
text-transform: capitalize;
transition: all $anim-duration;
&:active {
background: var(--highlight);
color: var(--select-foreground);
}
&.active {
background: var(--highlight);
color: var(--select-foreground);
}
}
.bottom-bar {
transition: left $anim-duration, width $anim-duration;
height: 1px;
background: var(--accent);
position: absolute;
bottom: 0;
left: 0;
}
}
}

1
src/eruda.js
View File

@@ -210,6 +210,7 @@ export default {
require('luna-data-grid/luna-data-grid.css') +
require('luna-dom-viewer/luna-dom-viewer.css') +
require('luna-modal/luna-modal.css') +
require('luna-tab/luna-tab.css') +
require('./style/style.scss') +
require('./style/icon.css')
)

30
src/style/luna.scss
View File

@@ -132,6 +132,12 @@
border-top-color: transparent;
border-left-color: var(--foreground);
}
.luna-object-viewer-icon-caret-right {
top: 0;
}
.luna-object-viewer-icon-caret-down {
top: 1px;
}
.luna-notification {
pointer-events: none !important;
@@ -265,3 +271,27 @@
}
}
}
.luna-tab {
position: absolute;
left: 0;
top: 0;
color: var(--foreground);
background: var(--darker-background);
}
.luna-tab-tabs-container {
border-color: var(--border);
}
.luna-tab-item {
&.luna-tab-selected,
&:hover {
background: var(--highlight);
color: var(--select-foreground);
}
}
.luna-tab-slider {
background: var(--accent);
}