chiu
/
filebrowser
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

feat: dual pane settings view

This commit is contained in:
Ramires Viana 2021-02-19 13:15:46 +00:00
parent 1819377897
commit db5aad8eb6
6 changed files with 229 additions and 187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/src/css/dashboard.css
View File

@ -1,8 +1,29 @@
.dashboard { .dashboard {
max-width: 600px;
margin: 1em 0; margin: 1em 0;
} }
.dashboard .row {
display: flex;
margin: 0 -.5em;
flex-wrap: wrap;
}
.dashboard .row .column {
display: flex;
padding: 0 .5em;
width: 50%;
}
.dashboard .row .column .card {
flex-grow: 1;
}
@media(max-width: 1200px) {
.dashboard .row .column {
width: 100%;
}
}
a { a {
color: inherit color: inherit
} }
@ -92,7 +113,7 @@ table tr>*:last-child {
.card { .card {
position: relative; position: relative;
margin: .5rem 0 1rem 0; margin: 0 0 1rem 0;
background-color: #fff; background-color: #fff;
border-radius: 2px; border-radius: 2px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
@ -151,6 +172,7 @@ table tr>*:last-child {
.card .card-content.full { .card .card-content.full {
padding-bottom: 0; padding-bottom: 0;
overflow: auto;
} }
.card h2 { .card h2 {

164
frontend/src/views/settings/Global.vue
View File

@ -1,102 +1,108 @@
<template> <template>
<div class="dashboard" v-if="settings !== null"> <div class="row" v-if="settings !== null">
<form class="card" @submit.prevent="save"> <div class="column">
<div class="card-title"> <form class="card" @submit.prevent="save">
<h2>{{ $t('settings.globalSettings') }}</h2> <div class="card-title">
</div> <h2>{{ $t('settings.globalSettings') }}</h2>
<div class="card-content">
<p><input type="checkbox" v-model="settings.signup"> {{ $t('settings.allowSignup') }}</p>
<p><input type="checkbox" v-model="settings.createUserDir"> {{ $t('settings.createUserDir') }}</p>
<h3>{{ $t('settings.rules') }}</h3>
<p class="small">{{ $t('settings.globalRules') }}</p>
<rules :rules.sync="settings.rules" />
<div v-if="isExecEnabled">
<h3>{{ $t('settings.executeOnShell') }}</h3>
<p class="small">{{ $t('settings.executeOnShellDescription') }}</p>
<input class="input input--block" type="text" placeholder="bash -c, cmd /c, ..." v-model="settings.shell" />
</div> </div>
<h3>{{ $t('settings.branding') }}</h3> <div class="card-content">
<p><input type="checkbox" v-model="settings.signup"> {{ $t('settings.allowSignup') }}</p>
<i18n path="settings.brandingHelp" tag="p" class="small"> <p><input type="checkbox" v-model="settings.createUserDir"> {{ $t('settings.createUserDir') }}</p>
<a class="link" target="_blank" href="https://filebrowser.org/configuration/custom-branding">{{ $t('settings.documentation') }}</a>
</i18n>
<p> <h3>{{ $t('settings.rules') }}</h3>
<input type="checkbox" v-model="settings.branding.disableExternal" id="branding-links" /> <p class="small">{{ $t('settings.globalRules') }}</p>
{{ $t('settings.disableExternalLinks') }} <rules :rules.sync="settings.rules" />
</p>
<p> <div v-if="isExecEnabled">
<label for="theme">{{ $t('settings.themes.title') }}</label> <h3>{{ $t('settings.executeOnShell') }}</h3>
<themes class="input input--block" :theme.sync="settings.branding.theme" id="theme"></themes> <p class="small">{{ $t('settings.executeOnShellDescription') }}</p>
</p> <input class="input input--block" type="text" placeholder="bash -c, cmd /c, ..." v-model="settings.shell" />
</div>
<p> <h3>{{ $t('settings.branding') }}</h3>
<label for="branding-name">{{ $t('settings.instanceName') }}</label>
<input class="input input--block" type="text" v-model="settings.branding.name" id="branding-name" />
</p>
<p> <i18n path="settings.brandingHelp" tag="p" class="small">
<label for="branding-files">{{ $t('settings.brandingDirectoryPath') }}</label> <a class="link" target="_blank" href="https://filebrowser.org/configuration/custom-branding">{{ $t('settings.documentation') }}</a>
<input class="input input--block" type="text" v-model="settings.branding.files" id="branding-files" /> </i18n>
</p>
</div> <p>
<input type="checkbox" v-model="settings.branding.disableExternal" id="branding-links" />
{{ $t('settings.disableExternalLinks') }}
</p>
<div class="card-action"> <p>
<input class="button button--flat" type="submit" :value="$t('buttons.update')"> <label for="theme">{{ $t('settings.themes.title') }}</label>
</div> <themes class="input input--block" :theme.sync="settings.branding.theme" id="theme"></themes>
</form> </p>
<form class="card" @submit.prevent="save"> <p>
<div class="card-title"> <label for="branding-name">{{ $t('settings.instanceName') }}</label>
<h2>{{ $t('settings.userDefaults') }}</h2> <input class="input input--block" type="text" v-model="settings.branding.name" id="branding-name" />
</div> </p>
<div class="card-content"> <p>
<p class="small">{{ $t('settings.defaultUserDescription') }}</p> <label for="branding-files">{{ $t('settings.brandingDirectoryPath') }}</label>
<input class="input input--block" type="text" v-model="settings.branding.files" id="branding-files" />
</p>
<user-form :isNew="false" :isDefault="true" :user.sync="settings.defaults" /> </div>
</div>
<div class="card-action"> <div class="card-action">
<input class="button button--flat" type="submit" :value="$t('buttons.update')"> <input class="button button--flat" type="submit" :value="$t('buttons.update')">
</div> </div>
</form> </form>
</div>
<form v-if="isExecEnabled" class="card" @submit.prevent="save"> <div class="column">
<div class="card-title"> <form class="card" @submit.prevent="save">
<h2>{{ $t('settings.commandRunner') }}</h2> <div class="card-title">
</div> <h2>{{ $t('settings.userDefaults') }}</h2>
</div>
<div class="card-content"> <div class="card-content">
<i18n path="settings.commandRunnerHelp" tag="p" class="small"> <p class="small">{{ $t('settings.defaultUserDescription') }}</p>
<code>FILE</code>
<code>SCOPE</code>
<a class="link" target="_blank" href="https://filebrowser.org/configuration/command-runner">{{ $t('settings.documentation') }}</a>
</i18n>
<div v-for="command in settings.commands" :key="command.name" class="collapsible"> <user-form :isNew="false" :isDefault="true" :user.sync="settings.defaults" />
<input :id="command.name" type="checkbox"> </div>
<label :for="command.name">
<p>{{ capitalize(command.name) }}</p> <div class="card-action">
<i class="material-icons">arrow_drop_down</i> <input class="button button--flat" type="submit" :value="$t('buttons.update')">
</label> </div>
<div class="collapse"> </form>
<textarea class="input input--block input--textarea" v-model.trim="command.value"></textarea> </div>
<div class="column">
<form v-if="isExecEnabled" class="card" @submit.prevent="save">
<div class="card-title">
<h2>{{ $t('settings.commandRunner') }}</h2>
</div>
<div class="card-content">
<i18n path="settings.commandRunnerHelp" tag="p" class="small">
<code>FILE</code>
<code>SCOPE</code>
<a class="link" target="_blank" href="https://filebrowser.org/configuration/command-runner">{{ $t('settings.documentation') }}</a>
</i18n>
<div v-for="command in settings.commands" :key="command.name" class="collapsible">
<input :id="command.name" type="checkbox">
<label :for="command.name">
<p>{{ capitalize(command.name) }}</p>
<i class="material-icons">arrow_drop_down</i>
</label>
<div class="collapse">
<textarea class="input input--block input--textarea" v-model.trim="command.value"></textarea>
</div>
</div> </div>
</div> </div>
</div>
<div class="card-action"> <div class="card-action">
<input class="button button--flat" type="submit" :value="$t('buttons.update')"> <input class="button button--flat" type="submit" :value="$t('buttons.update')">
</div> </div>
</form> </form>
</div>
</div> </div>
</template> </template>

58
frontend/src/views/settings/Profile.vue
View File

@ -1,36 +1,40 @@
<template> <template>
<div class="dashboard"> <div class="row">
<form class="card" @submit="updateSettings"> <div class="column">
<div class="card-title"> <form class="card" @submit="updateSettings">
<h2>{{ $t('settings.profileSettings') }}</h2> <div class="card-title">
</div> <h2>{{ $t('settings.profileSettings') }}</h2>
</div>
<div class="card-content"> <div class="card-content">
<p><input type="checkbox" v-model="hideDotfiles"> {{ $t('settings.hideDotfiles') }}</p> <p><input type="checkbox" v-model="hideDotfiles"> {{ $t('settings.hideDotfiles') }}</p>
<p><input type="checkbox" v-model="singleClick"> {{ $t('settings.singleClick') }}</p> <p><input type="checkbox" v-model="singleClick"> {{ $t('settings.singleClick') }}</p>
<h3>{{ $t('settings.language') }}</h3> <h3>{{ $t('settings.language') }}</h3>
<languages class="input input--block" :locale.sync="locale"></languages> <languages class="input input--block" :locale.sync="locale"></languages>
</div> </div>
<div class="card-action"> <div class="card-action">
<input class="button button--flat" type="submit" :value="$t('buttons.update')"> <input class="button button--flat" type="submit" :value="$t('buttons.update')">
</div> </div>
</form> </form>
</div>
<form class="card" v-if="!user.lockPassword" @submit="updatePassword"> <div class="column">
<div class="card-title"> <form class="card" v-if="!user.lockPassword" @submit="updatePassword">
<h2>{{ $t('settings.changePassword') }}</h2> <div class="card-title">
</div> <h2>{{ $t('settings.changePassword') }}</h2>
</div>
<div class="card-content"> <div class="card-content">
<input :class="passwordClass" type="password" :placeholder="$t('settings.newPassword')" v-model="password" name="password"> <input :class="passwordClass" type="password" :placeholder="$t('settings.newPassword')" v-model="password" name="password">
<input :class="passwordClass" type="password" :placeholder="$t('settings.newPasswordConfirm')" v-model="passwordConf" name="password"> <input :class="passwordClass" type="password" :placeholder="$t('settings.newPasswordConfirm')" v-model="passwordConf" name="password">
</div> </div>
<div class="card-action"> <div class="card-action">
<input class="button button--flat" type="submit" :value="$t('buttons.update')"> <input class="button button--flat" type="submit" :value="$t('buttons.update')">
</div> </div>
</form> </form>
</div>
</div> </div>
</template> </template>

72
frontend/src/views/settings/Shares.vue
View File

@ -1,40 +1,44 @@
<template> <template>
<div class="card"> <div class="row">
<div class="card-title"> <div class="column">
<h2>{{ $t('settings.shareManagement') }}</h2> <div class="card">
</div> <div class="card-title">
<h2>{{ $t('settings.shareManagement') }}</h2>
</div>
<div class="card-content full"> <div class="card-content full">
<table> <table>
<tr> <tr>
<th>{{ $t('settings.path') }}</th> <th>{{ $t('settings.path') }}</th>
<th>{{ $t('settings.shareDuration') }}</th> <th>{{ $t('settings.shareDuration') }}</th>
<th v-if="user.perm.admin">{{ $t('settings.username') }}</th> <th v-if="user.perm.admin">{{ $t('settings.username') }}</th>
<th></th> <th></th>
<th></th> <th></th>
</tr> </tr>
<tr v-for="link in links" :key="link.hash"> <tr v-for="link in links" :key="link.hash">
<td><a :href="buildLink(link.hash)" target="_blank">{{ link.path }}</a></td> <td><a :href="buildLink(link.hash)" target="_blank">{{ link.path }}</a></td>
<td> <td>
<template v-if="link.expire !== 0">{{ humanTime(link.expire) }}</template> <template v-if="link.expire !== 0">{{ humanTime(link.expire) }}</template>
<template v-else>{{ $t('permanent') }}</template> <template v-else>{{ $t('permanent') }}</template>
</td> </td>
<td v-if="user.perm.admin">{{ link.username }}</td> <td v-if="user.perm.admin">{{ link.username }}</td>
<td class="small"> <td class="small">
<button class="action" <button class="action"
@click="deleteLink($event, link)" @click="deleteLink($event, link)"
:aria-label="$t('buttons.delete')" :aria-label="$t('buttons.delete')"
:title="$t('buttons.delete')"><i class="material-icons">delete</i></button> :title="$t('buttons.delete')"><i class="material-icons">delete</i></button>
</td> </td>
<td class="small"> <td class="small">
<button class="action copy-clipboard" <button class="action copy-clipboard"
:data-clipboard-text="buildLink(link.hash)" :data-clipboard-text="buildLink(link.hash)"
:aria-label="$t('buttons.copyToClipboard')" :aria-label="$t('buttons.copyToClipboard')"
:title="$t('buttons.copyToClipboard')"><i class="material-icons">content_paste</i></button> :title="$t('buttons.copyToClipboard')"><i class="material-icons">content_paste</i></button>
</td> </td>
</tr> </tr>
</table> </table>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>

48
frontend/src/views/settings/User.vue
View File

@ -1,29 +1,31 @@
<template> <template>
<div> <div class="row">
<form v-if="loaded" @submit="save" class="card"> <div class="column">
<div class="card-title"> <form v-if="loaded" @submit="save" class="card">
<h2 v-if="user.id === 0">{{ $t('settings.newUser') }}</h2> <div class="card-title">
<h2 v-else>{{ $t('settings.user') }} {{ user.username }}</h2> <h2 v-if="user.id === 0">{{ $t('settings.newUser') }}</h2>
</div> <h2 v-else>{{ $t('settings.user') }} {{ user.username }}</h2>
</div>
<div class="card-content"> <div class="card-content">
<user-form :user.sync="user" :isDefault="false" :isNew="isNew" /> <user-form :user.sync="user" :isDefault="false" :isNew="isNew" />
</div> </div>
<div class="card-action"> <div class="card-action">
<button <button
v-if="!isNew" v-if="!isNew"
@click.prevent="deletePrompt" @click.prevent="deletePrompt"
type="button" type="button"
class="button button--flat button--red" class="button button--flat button--red"
:aria-label="$t('buttons.delete')" :aria-label="$t('buttons.delete')"
:title="$t('buttons.delete')">{{ $t('buttons.delete') }}</button> :title="$t('buttons.delete')">{{ $t('buttons.delete') }}</button>
<input <input
class="button button--flat" class="button button--flat"
type="submit" type="submit"
:value="$t('buttons.save')"> :value="$t('buttons.save')">
</div> </div>
</form> </form>
</div>
<div v-if="$store.state.show === 'deleteUser'" class="card floating"> <div v-if="$store.state.show === 'deleteUser'" class="card floating">
<div class="card-content"> <div class="card-content">

48
frontend/src/views/settings/Users.vue
View File

@ -1,28 +1,32 @@
<template> <template>
<div class="card"> <div class="row">
<div class="card-title"> <div class="column">
<h2>{{ $t('settings.users') }}</h2> <div class="card">
<router-link to="/settings/users/new"><button class="button">{{ $t('buttons.new') }}</button></router-link> <div class="card-title">
</div> <h2>{{ $t('settings.users') }}</h2>
<router-link to="/settings/users/new"><button class="button">{{ $t('buttons.new') }}</button></router-link>
</div>
<div class="card-content full"> <div class="card-content full">
<table> <table>
<tr> <tr>
<th>{{ $t('settings.username') }}</th> <th>{{ $t('settings.username') }}</th>
<th>{{ $t('settings.admin') }}</th> <th>{{ $t('settings.admin') }}</th>
<th>{{ $t('settings.scope') }}</th> <th>{{ $t('settings.scope') }}</th>
<th></th> <th></th>
</tr> </tr>
<tr v-for="user in users" :key="user.id"> <tr v-for="user in users" :key="user.id">
<td>{{ user.username }}</td> <td>{{ user.username }}</td>
<td><i v-if="user.perm.admin" class="material-icons">done</i><i v-else class="material-icons">close</i></td> <td><i v-if="user.perm.admin" class="material-icons">done</i><i v-else class="material-icons">close</i></td>
<td>{{ user.scope }}</td> <td>{{ user.scope }}</td>
<td class="small"> <td class="small">
<router-link :to="'/settings/users/' + user.id"><i class="material-icons">mode_edit</i></router-link> <router-link :to="'/settings/users/' + user.id"><i class="material-icons">mode_edit</i></router-link>
</td> </td>
</tr> </tr>
</table> </table>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>