- ${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..83ace3f
--- /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-contents > 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..a0b8a45 100644
--- a/ui/arduino/views/components/toolbar.js
+++ b/ui/arduino/views/components/toolbar.js
@@ -12,64 +12,84 @@ function Toolbar(state, emit) {
const metaKeyString = state.platform === 'darwin' ? 'Cmd' : 'Ctrl'
return html`
-
-
${ConnectionDialog(state, emit)}
+ ${NewFileDialog(state, emit)}
`
}
pFad - Phonifier reborn
- ${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}
Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.
Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.
Alternative Proxies: