- ${state.availablePorts.map(
- (port) => html`
-
+ const connectionDialog = html`
+ emit('select-port', port)}>
- ${port.path}
-
- `
- )}
- emit('update-ports')}>Refresh
-
+
+
`
+ if (state.isConnectionDialogOpen) {
+ return connectionDialog
+ }
+
}
diff --git a/ui/arduino/views/components/elements/button.js b/ui/arduino/views/components/elements/button.js
index 3d888dd..4ed37b9 100644
--- a/ui/arduino/views/components/elements/button.js
+++ b/ui/arduino/views/components/elements/button.js
@@ -1,25 +1,38 @@
function Button(args) {
const {
+ first = false,
size = '',
+ square = false,
icon = 'connect.svg',
- onClick = (e) => false,
+ onClick = (e) => {},
disabled = false,
active = false,
tooltip,
+ label,
background
} = args
+
+
let tooltipEl = html``
if (tooltip) {
tooltipEl = html`
+
+
+ Connect to...
+ ${state.availablePorts.map(
+ (port) => html`
+ emit('select-port', port)}>
+ ${port.path}
+
+ `
+ )}
+ emit('update-ports')}>Refresh
+
${tooltip}
`
}
+ tooltipEl = html``
let activeClass = active ? 'active' : ''
+ let labelSelectedClass = active ? 'selected' : ''
let backgroundClass = background ? 'inverted' : ''
+ let buttonFirstClass = first ? 'first' : ''
+ let squareClass = square ? 'square' : ''
+ let labelActiveClass = disabled ? 'inactive' : 'active'
+ let labelItem = size === 'small' ? '' : html`${label}
`
+
return html`
-
- `
+
+ `
}
diff --git a/ui/arduino/views/components/file-actions.js b/ui/arduino/views/components/file-actions.js
index f48e0ad..75ffd54 100644
--- a/ui/arduino/views/components/file-actions.js
+++ b/ui/arduino/views/components/file-actions.js
@@ -15,6 +15,7 @@ function FileActions(state, emit) {
icon: 'arrow-left-white.svg',
size: 'small',
background: 'inverted',
+ active: true,
disabled: !canUpload({ isConnected, selectedFiles }),
onClick: () => emit('upload-files')
})}
@@ -22,6 +23,7 @@ function FileActions(state, emit) {
icon: 'arrow-right-white.svg',
size: 'small',
background: 'inverted',
+ active: true,
disabled: !canDownload({ isConnected, selectedFiles }),
onClick: () => emit('download-files')
})}
diff --git a/ui/arduino/views/components/new-file-dialog.js b/ui/arduino/views/components/new-file-dialog.js
new file mode 100644
index 0000000..8e00d9e
--- /dev/null
+++ b/ui/arduino/views/components/new-file-dialog.js
@@ -0,0 +1,76 @@
+function NewFileDialog(state, emit) {
+ const stateClass = state.isNewFileDialogOpen ? 'open' : 'closed'
+ function clickDismiss(e) {
+ if (e.target.id == 'dialog-new-file') {
+ emit('close-new-file-dialog')
+ }
+ }
+
+ function triggerTabCreation(device) {
+ return () => {
+ const input = document.querySelector('#file-name')
+ const fileName = input.value.trim() || input.placeholder
+ emit('create-new-tab', device, fileName)
+ }
+ }
+
+ let boardOption = ''
+ let inputFocus = ''
+ if (state.isConnected) {
+ boardOption = html`
+ Board
+ `
+ }
+
+ const newFileDialogObserver = new MutationObserver((mutations, obs) => {
+ const input = document.querySelector('#dialog-new-file input')
+ if (input) {
+ input.focus()
+ obs.disconnect()
+ }
+ })
+
+ newFileDialogObserver.observe(document.body, {
+ childList: true,
+ subtree: true
+ })
+
+
+
+ let inputFieldValue = ``
+ let inputFieldPlaceholder = ``
+
+ inputFieldPlaceholder = generateFileName()
+
+ const inputAttrs = {
+ type: 'text',
+ id: 'file-name',
+ value: inputFieldValue,
+ placeholder: inputFieldPlaceholder
+ }
+
+ const randomFileName = generateFileName()
+ const placeholderAttr = state.newFileName === null ? `placeholder="${randomFileName}"` : ''
+ const newFileDialog = html`
+
+
+`
+
+ if (state.isNewFileDialogOpen) {
+ const el = newFileDialog.querySelector('#dialog-new-file .dialog-content > input')
+ if (el) {
+ el.focus()
+ }
+ return newFileDialog
+ }
+
+
+}
diff --git a/ui/arduino/views/components/repl-panel.js b/ui/arduino/views/components/repl-panel.js
index 3974d50..eca67d9 100644
--- a/ui/arduino/views/components/repl-panel.js
+++ b/ui/arduino/views/components/repl-panel.js
@@ -7,12 +7,22 @@ function ReplPanel(state, emit) {
}
}
const panelOpenClass = state.isPanelOpen ? 'open' : 'closed'
+ // const pointerEventsClass = state.isNewFileDialogOpen || state.isDialogOpen ? 'open' : 'closed'
const termOperationsVisibility = state.panelHeight > PANEL_TOO_SMALL ? 'visible' : 'hidden'
- const terminalDisabledClass = state.isConnected ? 'terminal-enabled' : 'terminal-disabled'
+ let terminalDisabledClass = 'terminal-enabled'
+ if (!state.isConnected || state.isNewFileDialogOpen) {
+ terminalDisabledClass = 'terminal-disabled'
+ }
+ // const terminalDisabledClass = state.isConnected ? 'terminal-enabled' : 'terminal-disabled'
return html`
+
+ Create new file
+
+
+
+
+ 
+
+
+ ${state.isConnected ? 'Connected to ' + state.connectedPort : ''}
+ emit('start-resizing-panel')}
onmouseup=${() => emit('stop-resizing-panel')}
@@ -25,6 +35,7 @@ function ReplPanel(state, emit) {
size: 'small',
onClick: onToggle
})}
+
${state.cache(XTerm, 'terminal').render()}
diff --git a/ui/arduino/views/components/toolbar.js b/ui/arduino/views/components/toolbar.js
index 70982b0..ad72a4f 100644
--- a/ui/arduino/views/components/toolbar.js
+++ b/ui/arduino/views/components/toolbar.js
@@ -12,64 +12,94 @@ function Toolbar(state, emit) {
const metaKeyString = state.platform === 'darwin' ? 'Cmd' : 'Ctrl'
return html`
-
-
${ConnectionDialog(state, emit)}
+ ${NewFileDialog(state, emit)}
`
}
- ${Button({
- icon: state.isConnected ? 'connect.svg' : 'disconnect.svg',
- tooltip: state.isConnected ? `Disconnect (${metaKeyString}+Shift+D)` : `Connect (${metaKeyString}+Shift+C)`,
- onClick: () => state.isConnected ? emit('disconnect') : emit('open-connection-dialog'),
- active: state.isConnected
- })}
+
`
}
diff --git a/ui/arduino/views/editor.js b/ui/arduino/views/editor.js
index fd93b08..c6267f0 100644
--- a/ui/arduino/views/editor.js
+++ b/ui/arduino/views/editor.js
@@ -7,5 +7,6 @@ function EditorView(state, emit) {
${ReplPanel(state, emit)}
${ConnectionDialog(state, emit)}
+ ${NewFileDialog(state, emit)}
`
}
diff --git a/ui/arduino/views/file-manager.js b/ui/arduino/views/file-manager.js
index eafdf65..fa43eff 100644
--- a/ui/arduino/views/file-manager.js
+++ b/ui/arduino/views/file-manager.js
@@ -1,5 +1,5 @@
function FileManagerView(state, emit) {
- let boardFullPath = 'Select a board...'
+ let boardFullPath = 'Connect to board'
let diskFullPath = `${state.diskNavigationRoot}${state.diskNavigationPath}`
if (state.isConnected) {
@@ -13,7 +13,7 @@ function FileManagerView(state, emit) {
- emit('open-connection-dialog')} class="text">
+
emit('connect')} class="text">
${boardFullPath}