Skip to content

Commit

Permalink
Update ModalAbout.vue
Browse files Browse the repository at this point in the history
  • Loading branch information
@hughsaffar
hughsaffar committed Jul 1, 2024
1 parent c798673 commit 7d5c18a
Showing 1 changed file with 178 additions and 104 deletions.
282 changes: 178 additions & 104 deletions src/components/modals/ModalAbout.vue
View file
Original file line number Diff line number Diff line change
@@ -1,171 +1,169 @@
<template>
<ModalLayout>
<div class="sm:items-start select-none">
<div class="vuefinder__about-modal__content">
<ModalHeader :icon="AboutSVG" :title="'Vuefinder ' + app.version"></ModalHeader>

<div class="mt-3 sm:mt-0 sm:text-left w-full">
<div class="vuefinder__about-modal__main">
<div>
<div>
<nav class="flex overflow-auto" aria-label="Tabs">
<nav class="vuefinder__about-modal__tabs" aria-label="Tabs">
<button v-for="tab in tabs" :key="tab.name"
@click="selectedTab = tab.key "
:class="[tab.key === selectedTab ? 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 border-sky-500' : 'text-gray-500 dark:text-gray-500 hover:text-gray-700 border-gray-300 dark:border-gray-600', 'px-3 py-2 border-b font-medium text-sm']" :aria-current="tab.current ? 'page' : undefined">{{ tab.name }}</button>
@click="selectedTab = tab.key"
:class="[tab.key === selectedTab ? 'vuefinder__about-modal__tab--active' : 'vuefinder__about-modal__tab--inactive', 'vuefinder__about-modal__tab']" :aria-current="tab.current ? 'page' : undefined">{{ tab.name }}</button>
</nav>
</div>
</div>

<div class="mt-4" v-if="selectedTab === TAB.ABOUT">
<div class="m-1 text-sm text-gray-500">{{ t('Vuefinder is a simple, lightweight, and fast file manager library for Vue.js applications') }}</div>
<a href="https://vuefinder.ozdemir.be" class="block mt-2 text-sm text-blue-500 dark:text-blue-400" target="_blank">{{ t('Project home') }}</a>
<a href="https://github.com/n1crack/vuefinder" class="block mt-2 text-sm text-blue-500 dark:text-blue-400" target="_blank">{{ t('Follow on GitHub') }}</a>
<div class="vuefinder__about-modal__tab-content" v-if="selectedTab === TAB.ABOUT">
<div class="vuefinder__about-modal__description">{{ t('Vuefinder is a simple, lightweight, and fast file manager library for Vue.js applications') }}</div>
<a href="https://vuefinder.ozdemir.be" class="vuefinder__about-modal__link" target="_blank">{{ t('Project home') }}</a>
<a href="https://github.com/n1crack/vuefinder" class="vuefinder__about-modal__link" target="_blank">{{ t('Follow on GitHub') }}</a>
</div>

<div class="mt-2" v-if="selectedTab === TAB.SETTINGS">
<div class="m-1 text-sm text-gray-500">
<div class="vuefinder__about-modal__tab-content" v-if="selectedTab === TAB.SETTINGS">
<div class="vuefinder__about-modal__description">
{{ t('Customize your experience with the following settings') }}
</div>
<div class="mt-3 text-left">
<div class="vuefinder__about-modal__settings">
<fieldset>
<div class="space-y-2">
<div class="flex relative gap-x-3">
<div class="h-6 items-center">
<input id="metric_unit" name="metric_unit" type="checkbox"
v-model="app.metricUnits"
@click="handleMetricUnits"
class="h-4 w-4 rounded border-gray-300 text-indigo-600 dark:accent-slate-400 focus:ring-indigo-600">
</div>
<div class="flex-1 block text-sm">
<label for="metric_unit" class="flex w-full font-medium text-gray-900 dark:text-gray-400">
{{ t('Use Metric Units') }} <action-message class="ms-3" on="vf-metric-units-saved">{{ t('Saved.') }}</action-message>
</label>
</div>
<div class="vuefinder__about-modal__setting">
<div class="vuefinder__about-modal__setting-input">
<input id="metric_unit" name="metric_unit" type="checkbox"
v-model="app.metricUnits"
@click="handleMetricUnits"
class="vuefinder__about-modal__checkbox">
</div>
<div class="vuefinder__about-modal__setting-label">
<label for="metric_unit" class="vuefinder__about-modal__label">
{{ t('Use Metric Units') }} <action-message class="ms-3" on="vf-metric-units-saved">{{ t('Saved.') }}</action-message>
</label>
</div>
</div>

<div class="flex relative gap-x-3">
<div class="h-6 items-center">
<input id="large_icons" name="large_icons" type="checkbox"
v-model="app.compactListView"
@click="handleCompactListView"
class="h-4 w-4 rounded border-gray-300 text-indigo-600 dark:accent-slate-400 focus:ring-indigo-600">
</div>
<div class="flex-1 block text-sm">
<label for="large_icons" class="flex w-full font-medium text-gray-900 dark:text-gray-400">
{{ t('Compact list view') }} <action-message class="ms-3" on="vf-compact-view-saved">{{ t('Saved.') }}</action-message>
</label>
</div>
<div class="vuefinder__about-modal__setting">
<div class="vuefinder__about-modal__setting-input">
<input id="large_icons" name="large_icons" type="checkbox"
v-model="app.compactListView"
@click="handleCompactListView"
class="vuefinder__about-modal__checkbox">
</div>
<div class="vuefinder__about-modal__setting-label">
<label for="large_icons" class="vuefinder__about-modal__label">
{{ t('Compact list view') }} <action-message class="ms-3" on="vf-compact-view-saved">{{ t('Saved.') }}</action-message>
</label>
</div>
</div>

<div class="flex relative gap-x-3">
<div class="h-6 items-center">
<input id="persist_path" name="persist_path" type="checkbox"
v-model="app.persist"
@click="handlePersistPath"
class="h-4 w-4 rounded border-gray-300 text-indigo-600 dark:accent-slate-400 focus:ring-indigo-600">
</div>
<div class="flex-1 block text-sm">
<label for="persist_path" class="flex w-full font-medium text-gray-900 dark:text-gray-400">
{{ t('Persist path on reload') }} <action-message class="ms-3" on="vf-persist-path-saved">{{ t('Saved.') }}</action-message>
</label>
</div>
<div class="vuefinder__about-modal__setting">
<div class="vuefinder__about-modal__setting-input">
<input id="persist_path" name="persist_path" type="checkbox"
v-model="app.persist"
@click="handlePersistPath"
class="vuefinder__about-modal__checkbox">
</div>
<div class="vuefinder__about-modal__setting-label">
<label for="persist_path" class="vuefinder__about-modal__label">
{{ t('Persist path on reload') }} <action-message class="ms-3" on="vf-persist-path-saved">{{ t('Saved.') }}</action-message>
</label>
</div>
</div>

<div class="flex relative gap-x-3">
<div class="h-6 items-center">
<input id="show_thumbnails" name="show_thumbnails" type="checkbox"
v-model="app.showThumbnails"
@click="handleShowThumbnails"
class="h-4 w-4 rounded border-gray-300 text-indigo-600 dark:accent-slate-400 focus:ring-indigo-600">
</div>
<div class="flex-1 block text-sm">
<label for="show_thumbnails" class="flex w-full font-medium text-gray-900 dark:text-gray-400">
{{ t('Show thumbnails') }} <action-message class="ms-3" on="vf-show-thumbnails-saved">{{ t('Saved.') }}</action-message>
</label>
</div>
<div class="vuefinder__about-modal__setting">
<div class="vuefinder__about-modal__setting-input">
<input id="show_thumbnails" name="show_thumbnails" type="checkbox"
v-model="app.showThumbnails"
@click="handleShowThumbnails"
class="vuefinder__about-modal__checkbox">
</div>
<div class="vuefinder__about-modal__setting-label">
<label for="show_thumbnails" class="vuefinder__about-modal__label">
{{ t('Show thumbnails') }} <action-message class="ms-3" on="vf-show-thumbnails-saved">{{ t('Saved.') }}</action-message>
</label>
</div>
</div>

<div class="">
<div class="h-6 items-center">
<label for="theme" class="flex w-full font-medium text-gray-900 dark:text-gray-400 text-sm">
{{ t('Theme') }}
</label>
</div>
<div class="flex text-sm">
<select id="theme" v-model="app.theme.value" @change="handleTheme($event.target.value)"
class="flex-shrink-0 sm:w-1/2 w-full text-sm text-slate-500 border dark:border-gray-600 dark:text-neutral-50 dark:bg-gray-700 rounded">
<optgroup :label="t('Theme')">
<option v-for="(name, key) in themes" :value="key">{{ name }}</option>
</optgroup>
</select>
<action-message class="ms-3 flex-shrink-0 flex-grow basis-full" on="vf-theme-saved">{{ t('Saved.') }}</action-message>
</div>
<div class="vuefinder__about-modal__setting">
<div class="vuefinder__about-modal__setting-input">
<label for="theme" class="vuefinder__about-modal__label">
{{ t('Theme') }}
</label>
</div>
<div class="vuefinder__about-modal__setting-label">
<select id="theme" v-model="app.theme.value" @change="handleTheme($event.target.value)"
class="vuefinder__about-modal__select">
<optgroup :label="t('Theme')">
<option v-for="(name, key) in themes" :value="key">{{ name }}</option>
</optgroup>
</select>
<action-message class="ms-3 flex-shrink-0 flex-grow basis-full" on="vf-theme-saved">{{ t('Saved.') }}</action-message>
</div>
</div>

<div class="" v-if="app.features.includes(FEATURES.LANGUAGE) && Object.keys(supportedLanguages).length > 1">
<div class="h-6 items-center">
<label for="language" class="flex w-full font-medium text-gray-900 dark:text-gray-400 text-sm text-nowrap">
{{ t('Language') }}
</label>
</div>
<div class="flex text-sm">
<select id="language" v-model="app.i18n.locale"
class="flex-shrink-0 sm:w-1/2 w-full text-sm text-slate-500 border dark:border-gray-600 dark:text-neutral-50 dark:bg-gray-700 rounded">
<optgroup :label="t('Language')">
<option v-for="(language, code) in supportedLanguages" :value="code">{{ language }}</option>
</optgroup>
</select>
<action-message class="ms-3 flex-shrink-0 flex-grow basis-full" on="vf-language-saved">{{ t('Saved.') }}</action-message>
</div>
<div class="vuefinder__about-modal__setting" v-if="app.features.includes(FEATURES.LANGUAGE) && Object.keys(supportedLanguages).length > 1">
<div class="vuefinder__about-modal__setting-input">
<label for="language" class="vuefinder__about-modal__label">
{{ t('Language') }}
</label>
</div>
<div class="vuefinder__about-modal__setting-label">
<select id="language" v-model="app.i18n.locale"
class="vuefinder__about-modal__select">
<optgroup :label="t('Language')">
<option v-for="(language, code) in supportedLanguages" :value="code">{{ language }}</option>
</optgroup>
</select>
<action-message class="ms-3 flex-shrink-0 flex-grow basis-full" on="vf-language-saved">{{ t('Saved.') }}</action-message>
</div>
</div>
</fieldset>
</div>
</div>

<div class="mt-3" v-if="selectedTab === TAB.SHORTCUTS">
<div class="space-y-2 sm:w-1/2">
<div class="flex justify-between text-sm text-gray-500 dark:text-gray-400">
<div class="vuefinder__about-modal__tab-content" v-if="selectedTab === TAB.SHORTCUTS">
<div class="vuefinder__about-modal__shortcuts">
<div class="vuefinder__about-modal__shortcut">
<div>{{ t('Rename') }}</div>
<kbd>F2</kbd>
</div>
<div class="flex justify-between text-sm text-gray-500 dark:text-gray-400">
<div class="vuefinder__about-modal__shortcut">
<div>{{ t('Refresh') }}</div>
<kbd>F5</kbd>
</div>
<div class="flex justify-between text-sm text-gray-500 dark:text-gray-400">
<div class="vuefinder__about-modal__shortcut">
{{ t('Delete') }}
<kbd>Del</kbd>
</div>
<div class="flex justify-between text-sm text-gray-500 dark:text-gray-400">
<div class="vuefinder__about-modal__shortcut">
{{ t('Escape') }}
<div>
<kbd>Esc</kbd>
</div>
</div>
<div class="flex justify-between text-sm text-gray-500 dark:text-gray-400">
<div class="vuefinder__about-modal__shortcut">
{{ t('Select All') }}
<div>
<kbd>Ctrl</kbd> + <kbd>A</kbd>
</div>
</div>
<div class="flex justify-between text-sm text-gray-500 dark:text-gray-400">
<div class="vuefinder__about-modal__shortcut">
{{ t('Search') }}
<div>
<kbd>Ctrl</kbd> + <kbd>F</kbd>
</div>
</div>
<div class="flex justify-between text-sm text-gray-500 dark:text-gray-400">
<div class="vuefinder__about-modal__shortcut">
{{ t('Toggle Sidebar') }}
<div>
<kbd>Ctrl</kbd> + <kbd>E</kbd>
</div>
</div>
<div class="flex justify-between text-sm text-gray-500 dark:text-gray-400">
<div class="vuefinder__about-modal__shortcut">
{{ t('Open Settings') }}
<div>
<kbd>Ctrl</kbd> + <kbd>,</kbd>
</div>
</div>
<div class="flex justify-between text-sm text-gray-500 dark:text-gray-400">
<div class="vuefinder__about-modal__shortcut">
{{ t('Toggle Full Screen') }}
<div>
<kbd>Ctrl</kbd> + <kbd>Enter</kbd>
Expand All @@ -174,8 +172,8 @@
</div>
</div>

<div class="mt-3" v-if="selectedTab === TAB.RESET">
<div class="m-1 text-sm text-gray-500">
<div class="vuefinder__about-modal__tab-content" v-if="selectedTab === TAB.RESET">
<div class="vuefinder__about-modal__description">
{{ t('Reset all settings to default') }}
</div>
<button @click="clearLocalStorage" type="button" class="vf-btn vf-btn-secondary">
Expand All @@ -192,6 +190,82 @@
</ModalLayout>
</template>

<style>
.vuefinder__about-modal__content {
@apply sm:items-start select-none;
}
.vuefinder__about-modal__main {
@apply mt-3 sm:mt-0 sm:text-left w-full;
}
.vuefinder__about-modal__tabs {
@apply flex overflow-auto;
}
.vuefinder .vuefinder__about-modal__tab {
@apply px-3 py-2 font-medium text-sm;
}
.vuefinder .vuefinder__about-modal__tab--active {
@apply bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 border-b-2 border-sky-500;
}
.vuefinder .vuefinder__about-modal__tab--inactive {
@apply text-gray-500 dark:text-gray-500 hover:text-gray-700 border-b-2 border-gray-300 dark:border-gray-600;
}
.vuefinder__about-modal__tab-content {
@apply mt-4;
}
.vuefinder__about-modal__description {
@apply m-1 text-sm text-gray-500;
}
.vuefinder__about-modal__link {
@apply block mt-2 text-sm text-blue-500 dark:text-blue-400;
}
.vuefinder__about-modal__settings {
@apply mt-3 text-left;
}
.vuefinder__about-modal__setting {
@apply flex relative gap-x-3 items-center;
}
.vuefinder__about-modal__setting-input {
@apply h-6 flex items-center;
}
.vuefinder__about-modal__setting-label {
@apply flex-1 block text-sm;
}
.vuefinder .vuefinder__about-modal__label {
@apply flex w-full font-medium text-gray-900 dark:text-gray-400;
}
.vuefinder .vuefinder__about-modal__checkbox {
@apply h-4 w-4 rounded border-gray-300 text-indigo-600 dark:accent-slate-400 focus:ring-indigo-600;
}
.vuefinder .vuefinder__about-modal__select {
@apply flex-shrink-0 sm:w-1/2 w-full text-sm text-slate-500 border dark:border-gray-600 dark:text-neutral-50 dark:bg-gray-700 rounded;
}
.vuefinder__about-modal__shortcuts {
@apply space-y-2 sm:w-1/2;
}
.vuefinder__about-modal__shortcut {
@apply flex justify-between text-sm text-gray-500 dark:text-gray-400;
}
</style>

<script setup>
import ModalLayout from './ModalLayout.vue';
import {computed, inject, ref} from 'vue';
Expand Down

0 comments on commit 7d5c18a

Please sign in to comment.