Skip to content
This repository has been archived by the owner on Mar 13, 2022. It is now read-only.

feat: render terminals in the bottom dock #14

Draft
wants to merge 2 commits into
base: master
Choose a base branch
from
Draft

feat: render terminals in the bottom dock #14

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8520c67
feat: render terminals in the bottom dock
akonwi Nov 21, 2019
efe7ea2
fix: don't try to resize when the view is moved out of the bottom panel
akonwi Nov 21, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions lib/status-bar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ class StatusBar extends View {
}
} else {
this.setActiveTerminalView(nextTerminal)
if (prevTerminal && prevTerminal.panel.isVisible()) {
if ((prevTerminal && prevTerminal.panel.isVisible()) || atom.workspace.getBottomDock().isVisible()) {
nextTerminal.toggle()
}
}
Expand Down Expand Up @@ -397,8 +397,7 @@ class StatusBar extends View {
for (let i = this.terminalViews.length - 1; i >= 0; i--) {
const view = this.terminalViews[i]
if (view) {
view.ptyProcess.terminate()
view.terminal.destroy()
view.destroy()
Copy link
Member

@the-j0k3r the-j0k3r Nov 21, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Neat, does this indeed also terminate the associated ptyProcess?

}
}
this.detach()
Expand Down
6 changes: 3 additions & 3 deletions lib/status-icon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,9 +114,9 @@ class StatusIcon extends HTMLLIElement {

updateName (name) {
if (name !== this.getName()) {
if (name) { name = ' ' + name }
this.name.innerHTML = name
this.terminalView.emit('did-change-title')
const escapedName = name ? ' ' + name : name
this.name.innerHTML = escapedName
this.terminalView.didRename(name)
}
}
}
Expand Down
16 changes: 15 additions & 1 deletion lib/terminus.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,14 @@
module.exports = {
statusBar: null,

activate () {},
activate () {
atom.config.onDidChange('terminus.toggles.useDock', (event) => {
if (this.statusBarProvider) {
this.deactivate()
this.consumeStatusBar(this.statusBarProvider)
}
})
},

deactivate () {
if (this.statusBarTile) {
Expand All @@ -11,6 +18,7 @@ module.exports = {
},

consumeStatusBar (statusBarProvider) {
this.statusBarProvider = statusBarProvider
this.statusBarTile = new (require('./status-bar'))(statusBarProvider)
},

Expand Down Expand Up @@ -38,6 +46,12 @@ module.exports = {
type: 'object',
order: 1,
properties: {
useDock: {
title: 'Use Bottom Dock',
description: 'Should the terminals be rendered in the bottom dock?',
type: 'boolean',
default: false
},
autoClose: {
title: 'Close Terminal on Exit',
description: 'Should the terminal close if the shell exits?',
Expand Down
16 changes: 16 additions & 0 deletions lib/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
const isString = x => typeof x === 'string'

// visibility for items in bottom dock
module.exports.isVisible = function (itemOrUri) {
const uri = isString(itemOrUri) ? itemOrUri : itemOrUri.getURI()

const dock = atom.workspace.getBottomDock()
if (!dock.isVisible()) return false

const activeItem = dock.getActivePaneItem()
if (!activeItem) return false

return activeItem.getURI && activeItem.getURI() === uri
}

module.exports.isUseDockEnabled = () => atom.config.get('terminus.toggles.useDock')
126 changes: 102 additions & 24 deletions lib/view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ const { $, View } = require('atom-space-pen-views')

const Pty = require.resolve('./process')
const Terminal = require('term.js')
const { isUseDockEnabled, isVisible } = require('./utils')
let InputDialog = null

const path = require('path')
Expand All @@ -11,6 +12,8 @@ const os = require('os')
let lastOpenedView = null
let lastActiveElement = null

let nextId = 0

class TerminusView extends View {
static content () {
this.div({ class: 'terminus terminal-view', outlet: 'terminusView' }, () => {
Expand All @@ -20,11 +23,13 @@ class TerminusView extends View {
this.div({ class: 'btn-group' }, () => {
this.button({ outlet: 'inputBtn', class: 'btn icon icon-keyboard', click: 'inputDialog' })
})
this.div({ class: 'btn-group right' }, () => {
this.button({ outlet: 'hideBtn', class: 'btn icon icon-chevron-down', click: 'hide' })
this.button({ outlet: 'maximizeBtn', class: 'btn icon icon-screen-full', click: 'maximize' })
this.button({ outlet: 'closeBtn', class: 'btn icon icon-x', click: 'destroy' })
})
if (!isUseDockEnabled()) {
this.div({ class: 'btn-group right' }, () => {
this.button({ outlet: 'hideBtn', class: 'btn icon icon-chevron-down', click: 'hide' })
this.button({ outlet: 'maximizeBtn', class: 'btn icon icon-screen-full', click: 'maximize' })
this.button({ outlet: 'closeBtn', class: 'btn icon icon-x', click: 'destroy' })
})
}
})
})
this.div({ class: 'xterm', outlet: 'xterm' })
Expand All @@ -35,7 +40,17 @@ class TerminusView extends View {
return Terminal.Terminal.focus
}

getURI () { return `atom://terminus/${this.viewId}` }

getDefaultLocation () { return 'bottom' }

getAllowedLocations () { return ['bottom'] }

isPermanentDockItem () { return false }

initialize (id, pwd, statusIcon, statusBar, shell, args = [], env = {}, autoRun = []) {
this.shouldUseDock = isUseDockEnabled()
if (this.shouldUseDock) { this.viewId = nextId++ }
this.id = id
this.pwd = pwd
this.statusIcon = statusIcon
Expand All @@ -56,24 +71,28 @@ class TerminusView extends View {
this.updateToolbarVisibility = this.updateToolbarVisibility.bind(this)
this.recieveItemOrFile = this.recieveItemOrFile.bind(this)

this.subscriptions.add(atom.tooltips.add(this.closeBtn, { title: 'Close' }))
this.subscriptions.add(atom.tooltips.add(this.hideBtn, { title: 'Hide' }))
this.subscriptions.add(this.maximizeBtn.tooltip = atom.tooltips.add(this.maximizeBtn, { title: 'Fullscreen' }))
this.inputBtn.tooltip = atom.tooltips.add(this.inputBtn, { title: 'Insert Text' })
if (!this.shouldUseDock) {
this.subscriptions.add(atom.tooltips.add(this.closeBtn, { title: 'Close' }))
this.subscriptions.add(atom.tooltips.add(this.hideBtn, { title: 'Hide' }))
this.subscriptions.add(this.maximizeBtn.tooltip = atom.tooltips.add(this.maximizeBtn, { title: 'Fullscreen' }))
this.inputBtn.tooltip = atom.tooltips.add(this.inputBtn, { title: 'Insert Text' })
}

this.prevHeight = atom.config.get('terminus.style.defaultPanelHeight')
if (this.prevHeight.indexOf('%') > 0) {
const percent = Math.abs(Math.min(parseFloat(this.prevHeight) / 100.0, 1))
const bottomHeight = $('atom-panel.bottom').children('.terminal-view').height() || 0
this.prevHeight = percent * ($('.item-views').height() + bottomHeight)
}
this.xterm.height(0)
if (!this.shouldUseDock) { this.xterm.height(0) }

this.setAnimationSpeed()
this.subscriptions.add(atom.config.onDidChange('terminus.style.animationSpeed', this.setAnimationSpeed))

this.updateToolbarVisibility()
this.subscriptions.add(atom.config.onDidChange('terminus.toggles.showToolbar', this.updateToolbarVisibility))
if (!this.shouldUseDock) {
this.updateToolbarVisibility()
this.subscriptions.add(atom.config.onDidChange('terminus.toggles.showToolbar', this.updateToolbarVisibility))
}

const override = (event) => {
if (event.originalEvent.dataTransfer.getData('terminus') === 'true') { return }
Expand Down Expand Up @@ -112,8 +131,12 @@ class TerminusView extends View {
}

attach () {
if (this.panel) { return }
this.panel = atom.workspace.addBottomPanel({ item: this, visible: false })
if (this.shouldUseDock) {
atom.workspace.open(this)
} else {
if (this.panel) { return }
this.panel = atom.workspace.addBottomPanel({ item: this, visible: false })
}
}

setAnimationSpeed () {
Expand Down Expand Up @@ -199,10 +222,11 @@ class TerminusView extends View {

this.ptyProcess.on('terminus:title', title => {
this.process = title
this.emit('did-change-title')
})
this.terminal.on('title', title => {
this.title = title
})
// this.terminal.on('title', title => {
// this.title = title
// })
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll be interested to check these title changes out. =)

Copy link
Member

@the-j0k3r the-j0k3r Nov 21, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good NewsI These changes you made into title actually fix #12 feel fee to submit them separately along with rename changes =)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually only fixed Linux side, Windows now doesnt even show any other name but xterm-256color


this.terminal.once('open', () => {
this.applyStyle()
Expand All @@ -215,18 +239,24 @@ class TerminusView extends View {
})
}

onDidDestroy (callback) {
return this.emitter.on('did-destroy', callback)
}

destroy () {
this.subscriptions.dispose()
this.statusIcon.destroy()
this.statusBar.removeTerminalView(this)
this.detachResizeEvents()
this.detachWindowEvents()

if (this.panel.isVisible()) {
this.hide()
this.onTransitionEnd(() => this.panel.destroy())
} else {
this.panel.destroy()
if (!this.shouldUseDock) {
if (this.panel.isVisible()) {
this.hide()
this.onTransitionEnd(() => this.panel.destroy())
} else {
this.panel.destroy()
}
}

if (this.statusIcon && this.statusIcon.parentNode) {
Expand All @@ -239,6 +269,9 @@ class TerminusView extends View {
if (this.terminal) {
this.terminal.destroy()
}

this.emit('did-destroy')
this.emitter.dispose()
}

maximize () {
Expand Down Expand Up @@ -269,6 +302,8 @@ class TerminusView extends View {
lastActiveElement = $(document.activeElement)
}

if (this.shouldUseDock) { return this.openInDock() }

if (lastOpenedView && (lastOpenedView !== this)) {
if (lastOpenedView.maximized) {
this.subscriptions.remove(this.maximizeBtn.tooltip)
Expand Down Expand Up @@ -306,7 +341,21 @@ class TerminusView extends View {
this.xterm.height(this.maximized ? this.maxHeight : this.prevHeight)
}

openInDock () {
this.statusBar.setActiveTerminalView(this)
this.statusIcon.activate()
atom.workspace.open(this, { activatePane: true }).then(() => {
if (!this.opened) {
this.opened = true
this.displayTerminal()
this.xterm.height('100%')
this.emit('terminus:terminal-open')
} else this.focus()
})
}

hide () {
if (this.shouldUseDock) return this.hideInDock()
if (this.terminal) {
this.terminal.blur()
}
Expand All @@ -328,7 +377,15 @@ class TerminusView extends View {
this.xterm.height(0)
}

hideInDock () {
this.terminal && this.terminal.blur()
this.statusIcon.deactivate()
atom.workspace.hide(this)
}

toggle () {
if (this.shouldUseDock) return this.toggleInDock()

if (this.animating) { return }

if (this.panel.isVisible()) {
Expand All @@ -338,6 +395,10 @@ class TerminusView extends View {
}
}

toggleInDock () {
if (isVisible(this)) { this.hide() } else { this.open() }
}

input (data) {
if (!this.ptyProcess.childProcess) { return }

Expand Down Expand Up @@ -614,6 +675,8 @@ class TerminusView extends View {
}

resizeTerminalToView () {
if (this.shouldUseDock) return this.resizeInDock()

if (!this.panel.isVisible() && !this.tabView) { return }

const { cols, rows } = this.getDimensions()
Expand All @@ -625,6 +688,19 @@ class TerminusView extends View {
this.terminal.resize(cols, rows)
}

resizeInDock () {
if (!isVisible(this)) return

const { cols, rows } = this.getDimensions()
if (cols > 0 && rows > 0) {
if (this.terminal) {
if (this.terminal.rows === rows && this.terminal.cols === cols) return
this.resize(cols, rows)
this.terminal.resize(cols, rows)
}
}
}

getDimensions () {
const fakeRow = $('<div><span>&nbsp;</span></div>')

Expand Down Expand Up @@ -657,8 +733,9 @@ class TerminusView extends View {
dialog.attach()
}

rename () {
this.statusIcon.rename()
didRename (title) {
this.title = title
this.emit('did-change-title')
}

toggleTabView () {
Expand All @@ -682,6 +759,7 @@ class TerminusView extends View {
}

getTitle () {
if (this.shouldUseDock) { return this.getTerminalTitle() }
return this.statusIcon.getName() || 'terminus'
}

Expand Down