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 all commits
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
6 changes: 3 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 Expand Up @@ -507,6 +506,7 @@ class StatusBar extends View {

const fromIndex = parseInt(dataTransfer.getData('from-index'))
const view = this.terminalViews[fromIndex]
if (!view) return
Copy link
Author

Choose a reason for hiding this comment

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

even with the terminals in the bottom panel, when moved, I see an error notification because view is undefined here

This comment was marked as resolved.

Sign in to view

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.

Moving dock NOT panel theres an error.

[Enter steps to reproduce:]

generic

Atom: 1.41.0 x64
Electron: 4.2.7
OS: Ubuntu 18.04.3
Thrown From: terminus package 4.0.2

Stack Trace

Uncaught TypeError: Cannot read property 'destroy' of undefined

At /home/terminus/Documents/Example/terminus/lib/view.js:750

TypeError: Cannot read property 'destroy' of undefined
    at TerminusView.toggleTabView (/home/terminus/Documents/Example/terminus/lib/view.js:750:18)
    at StatusBar.onDropTabBar (/home/terminus/Documents/Example/terminus/lib/status-bar.js:514:10)
    at HTMLUListElement.tabBar.on.event (/home/terminus/Documents/Example/terminus/lib/status-bar.js:183:39)
    at HTMLUListElement.dispatch (/home/terminus/Downloads/terminus/node_modules/jquery/dist/jquery.js:4435:9)
    at HTMLUListElement.elemData.handle (/home/terminus/Downloads/terminus/node_modules/jquery/dist/jquery.js:4121:28)

Commands

Non-Core Packages

terminus 4.0.2

FYI this works without being on dock

generic

Without this PR its actually possible to move the terminal into the bottom dock even if docks arent implemented

Copy link
Member

Choose a reason for hiding this comment

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

It looks like the toolbar on windows hides once the terminal is too big.
terminus1

Copy link
Author

Choose a reason for hiding this comment

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

Yea the input button should be in the status bar while using the dock. I hadn't gotten to that yet.

I think we should move forward with the strategy in #15

Copy link
Member

Choose a reason for hiding this comment

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

That sounds good. =)

view.css('height', '')
view.terminal.element.style.height = atom.config.get('terminus.style.defaultPanelHeight')
// const tabBar = $(event.target).closest('.tab-bar');
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