tyler.durden/cockpit-navigator
1
0
Fork 0
mirror of https://github.com/45Drives/cockpit-navigator.git synced 2025-07-29 16:45:13 +02:00
Code Issues Packages Projects Releases Wiki Activity

start abstracting cd, edit, etc to entryAction event

Browse Source
This commit is contained in:
joshuaboud 2022-06-15 17:19:06 -03:00
parent ae33ae67b0
commit ecec0b56cc
No known key found for this signature in database
GPG Key ID: 17EFB59E2A8BF50E
1 changed files with 51 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
navigator/src/views/Browser.vue
View File

@ -3,7 +3,7 @@
<div class="h-full flex flex-col items-stretch">
<div
class="grid grid-cols-[auto_1fr] grid-rows-[1fr 1fr] md:grid-cols-[auto_3fr_1fr] md:grid-row-[1fr] items-stretch divide-x divide-y divide-default">
<div class="button-group-row p-1 md:px-4 md:py-2">
<div class="button-group-row p-1 md:px-4 md:py-2 border-t border-default">
<button class="p-2 rounded-lg hover:bg-accent relative" :disabled="!pathHistory.backAllowed()"
@click="back()" @mouseenter="backHistoryDropdown.mouseEnter"
@mouseleave="backHistoryDropdown.mouseLeave">
@ -68,11 +68,25 @@
<div class="grow overflow-hidden">
<DirectoryView :host="pathHistory.current()?.host" :path="pathHistory.current()?.path"
:searchFilterRegExp="searchFilterRegExp" @cd="path => cd({ path })" @edit="openEditor"
@updateStats="stats => $emit('updateFooterText', `${stats.files} file${stats.files === 1 ? '' : 's'}, ${stats.dirs} director${stats.dirs === 1 ? 'y' : 'ies'} (${cockpit.format_bytes(stats.size, 1000).replace(/(?<!B)$/, ' B')})`)"
@entryAction="handleEntryAction"
ref="directoryViewRef" />
</div>
</div>
</div>
<ModalPopup :showModal="openPrompt.show" :headerText="openPrompt.entry?.name ?? 'NULL'" @close="() => openPrompt.close()">
What would you like to do with this file?
<template #footer>
<button type="button" class="btn btn-secondary" @click="() => openPrompt.close()">
Cancel
</button>
<button type="button" class="btn btn-primary" @click="() => openEditor(openPrompt.entry.path)">
Open for editing
</button>
<button type="button" class="btn btn-primary">
Download
</button>
</template>
</ModalPopup>
<Teleport to="#footer-buttons">
<IconToggle v-model="darkMode" v-slot="{ value }">
<MoonIcon v-if="value" class="size-icon icon-default" />
@ -97,6 +111,7 @@ import PathBreadCrumbs from '../components/PathBreadCrumbs.vue';
import { notificationsInjectionKey, pathHistoryInjectionKey, lastPathStorageKey, settingsInjectionKey } from '../keys';
import { ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, RefreshIcon, ChevronDownIcon, SearchIcon, SunIcon, MoonIcon, EyeIcon, EyeOffIcon, ViewListIcon, ViewGridIcon } from '@heroicons/vue/solid';
import IconToggle from '../components/IconToggle.vue';
import ModalPopup from '../components/ModalPopup.vue';
const encodePartial = (string) =>
encodeURIComponent(string)
@ -145,6 +160,20 @@ export default {
forwardHistoryDropdown.showDropdown = false;
}
});
const openPrompt = reactive({
show: false,
entry: null,
resetTimeoutHandle: null,
open: (entry) => {
clearTimeout(openPrompt.resetTimeoutHandle);
openPrompt.entry = entry;
openPrompt.show = true;
},
close: () => {
openPrompt.show = false;
openPrompt.resetTimeoutHandle = setTimeout(() => openPrompt.resetTimeoutHandle = openPrompt.entry = null, 500);
},
});
const cd = ({ path, host }) => {
const newHost = host ?? (pathHistory.current().host);
@ -172,6 +201,23 @@ export default {
const getSelected = () => directoryViewRef.value?.getSelected?.() ?? [];
const handleEntryAction = (action, entry) => {
switch (action) {
case 'cd':
cd({path: entry.path});
break;
case 'edit':
openEditor({path: entry.path})
break;
case 'openPrompt':
openPrompt.open(entry);
break;
default:
console.error('Unknown entryAction:', action, entry);
break;
}
}
watch(searchFilterStr, () => {
searchFilterRegExp.value = new RegExp(
`^${searchFilterStr.value
@ -203,12 +249,14 @@ export default {
searchFilterRegExp,
backHistoryDropdown,
forwardHistoryDropdown,
openPrompt,
cd,
back,
forward,
up,
openEditor,
getSelected,
handleEntryAction,
}
},
components: {
@ -227,9 +275,7 @@ export default {
EyeOffIcon,
ViewListIcon,
ViewGridIcon,
ModalPopup,
},
emits: [
'updateFooterText'
],
}
</script>