Skip to content

Commit

Permalink
feat: dual pane settings view
Browse files Browse the repository at this point in the history
  • Loading branch information
@ramiresviana
ramiresviana committed Feb 19, 2021
1 parent 1819377 commit db5aad8
Show file tree
Hide file tree
Showing 6 changed files with 239 additions and 197 deletions.
26 changes: 24 additions & 2 deletions frontend/src/css/dashboard.css
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,29 @@
.dashboard {
max-width: 600px;
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 {
color: inherit
}
Expand Down Expand Up @@ -92,7 +113,7 @@ table tr>*:last-child {

.card {
position: relative;
margin: .5rem 0 1rem 0;
margin: 0 0 1rem 0;
background-color: #fff;
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);
Expand Down Expand Up @@ -151,6 +172,7 @@ table tr>*:last-child {

.card .card-content.full {
padding-bottom: 0;
overflow: auto;
}

.card h2 {
Expand Down
184 changes: 95 additions & 89 deletions frontend/src/views/settings/Global.vue
View file
Original file line number Diff line number Diff line change
@@ -1,102 +1,108 @@
<template>
<div class="dashboard" v-if="settings !== null">
<form class="card" @submit.prevent="save">
<div class="card-title">
<h2>{{ $t('settings.globalSettings') }}</h2>
</div>
<div class="row" v-if="settings !== null">
<div class="column">
<form class="card" @submit.prevent="save">
<div class="card-title">
<h2>{{ $t('settings.globalSettings') }}</h2>
</div>

<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 class="card-content">
<p><input type="checkbox" v-model="settings.signup"> {{ $t('settings.allowSignup') }}</p>
<h3>{{ $t('settings.branding') }}</h3>

<p><input type="checkbox" v-model="settings.createUserDir"> {{ $t('settings.createUserDir') }}</p>
<i18n path="settings.brandingHelp" tag="p" class="small">
<a class="link" target="_blank" href="https://filebrowser.org/configuration/custom-branding">{{ $t('settings.documentation') }}</a>
</i18n>

<h3>{{ $t('settings.rules') }}</h3>
<p class="small">{{ $t('settings.globalRules') }}</p>
<rules :rules.sync="settings.rules" />
<p>
<input type="checkbox" v-model="settings.branding.disableExternal" id="branding-links" />
{{ $t('settings.disableExternalLinks') }}
</p>

<p>
<label for="theme">{{ $t('settings.themes.title') }}</label>
<themes class="input input--block" :theme.sync="settings.branding.theme" id="theme"></themes>
</p>

<p>
<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>
<label for="branding-files">{{ $t('settings.brandingDirectoryPath') }}</label>
<input class="input input--block" type="text" v-model="settings.branding.files" id="branding-files" />
</p>

</div>

<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 class="card-action">
<input class="button button--flat" type="submit" :value="$t('buttons.update')">
</div>
</form>
</div>

<h3>{{ $t('settings.branding') }}</h3>

<i18n path="settings.brandingHelp" tag="p" class="small">
<a class="link" target="_blank" href="https://filebrowser.org/configuration/custom-branding">{{ $t('settings.documentation') }}</a>
</i18n>

<p>
<input type="checkbox" v-model="settings.branding.disableExternal" id="branding-links" />
{{ $t('settings.disableExternalLinks') }}
</p>

<p>
<label for="theme">{{ $t('settings.themes.title') }}</label>
<themes class="input input--block" :theme.sync="settings.branding.theme" id="theme"></themes>
</p>

<p>
<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>
<label for="branding-files">{{ $t('settings.brandingDirectoryPath') }}</label>
<input class="input input--block" type="text" v-model="settings.branding.files" id="branding-files" />
</p>

</div>

<div class="card-action">
<input class="button button--flat" type="submit" :value="$t('buttons.update')">
</div>
</form>

<form class="card" @submit.prevent="save">
<div class="card-title">
<h2>{{ $t('settings.userDefaults') }}</h2>
</div>

<div class="card-content">
<p class="small">{{ $t('settings.defaultUserDescription') }}</p>

<user-form :isNew="false" :isDefault="true" :user.sync="settings.defaults" />
</div>

<div class="card-action">
<input class="button button--flat" type="submit" :value="$t('buttons.update')">
</div>
</form>

<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 class="column">
<form class="card" @submit.prevent="save">
<div class="card-title">
<h2>{{ $t('settings.userDefaults') }}</h2>
</div>

<div class="card-content">
<p class="small">{{ $t('settings.defaultUserDescription') }}</p>

<user-form :isNew="false" :isDefault="true" :user.sync="settings.defaults" />
</div>

<div class="card-action">
<input class="button button--flat" type="submit" :value="$t('buttons.update')">
</div>
</form>
</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 class="card-action">
<input class="button button--flat" type="submit" :value="$t('buttons.update')">
</div>
</form>
<div class="card-action">
<input class="button button--flat" type="submit" :value="$t('buttons.update')">
</div>
</form>
</div>
</div>
</template>

Expand Down
58 changes: 31 additions & 27 deletions frontend/src/views/settings/Profile.vue
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,40 @@
<template>
<div class="dashboard">
<form class="card" @submit="updateSettings">
<div class="card-title">
<h2>{{ $t('settings.profileSettings') }}</h2>
</div>
<div class="row">
<div class="column">
<form class="card" @submit="updateSettings">
<div class="card-title">
<h2>{{ $t('settings.profileSettings') }}</h2>
</div>

<div class="card-content">
<p><input type="checkbox" v-model="hideDotfiles"> {{ $t('settings.hideDotfiles') }}</p>
<p><input type="checkbox" v-model="singleClick"> {{ $t('settings.singleClick') }}</p>
<h3>{{ $t('settings.language') }}</h3>
<languages class="input input--block" :locale.sync="locale"></languages>
</div>
<div class="card-content">
<p><input type="checkbox" v-model="hideDotfiles"> {{ $t('settings.hideDotfiles') }}</p>
<p><input type="checkbox" v-model="singleClick"> {{ $t('settings.singleClick') }}</p>
<h3>{{ $t('settings.language') }}</h3>
<languages class="input input--block" :locale.sync="locale"></languages>
</div>

<div class="card-action">
<input class="button button--flat" type="submit" :value="$t('buttons.update')">
</div>
</form>
<div class="card-action">
<input class="button button--flat" type="submit" :value="$t('buttons.update')">
</div>
</form>
</div>

<form class="card" v-if="!user.lockPassword" @submit="updatePassword">
<div class="card-title">
<h2>{{ $t('settings.changePassword') }}</h2>
</div>
<div class="column">
<form class="card" v-if="!user.lockPassword" @submit="updatePassword">
<div class="card-title">
<h2>{{ $t('settings.changePassword') }}</h2>
</div>

<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.newPasswordConfirm')" v-model="passwordConf" name="password">
</div>
<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.newPasswordConfirm')" v-model="passwordConf" name="password">
</div>

<div class="card-action">
<input class="button button--flat" type="submit" :value="$t('buttons.update')">
</div>
</form>
<div class="card-action">
<input class="button button--flat" type="submit" :value="$t('buttons.update')">
</div>
</form>
</div>
</div>
</template>

Expand Down
72 changes: 38 additions & 34 deletions frontend/src/views/settings/Shares.vue
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,44 @@
<template>
<div class="card">
<div class="card-title">
<h2>{{ $t('settings.shareManagement') }}</h2>
</div>
<div class="row">
<div class="column">
<div class="card">
<div class="card-title">
<h2>{{ $t('settings.shareManagement') }}</h2>
</div>

<div class="card-content full">
<table>
<tr>
<th>{{ $t('settings.path') }}</th>
<th>{{ $t('settings.shareDuration') }}</th>
<th v-if="user.perm.admin">{{ $t('settings.username') }}</th>
<th></th>
<th></th>
</tr>
<div class="card-content full">
<table>
<tr>
<th>{{ $t('settings.path') }}</th>
<th>{{ $t('settings.shareDuration') }}</th>
<th v-if="user.perm.admin">{{ $t('settings.username') }}</th>
<th></th>
<th></th>
</tr>

<tr v-for="link in links" :key="link.hash">
<td><a :href="buildLink(link.hash)" target="_blank">{{ link.path }}</a></td>
<td>
<template v-if="link.expire !== 0">{{ humanTime(link.expire) }}</template>
<template v-else>{{ $t('permanent') }}</template>
</td>
<td v-if="user.perm.admin">{{ link.username }}</td>
<td class="small">
<button class="action"
@click="deleteLink($event, link)"
:aria-label="$t('buttons.delete')"
:title="$t('buttons.delete')"><i class="material-icons">delete</i></button>
</td>
<td class="small">
<button class="action copy-clipboard"
:data-clipboard-text="buildLink(link.hash)"
:aria-label="$t('buttons.copyToClipboard')"
:title="$t('buttons.copyToClipboard')"><i class="material-icons">content_paste</i></button>
</td>
</tr>
</table>
<tr v-for="link in links" :key="link.hash">
<td><a :href="buildLink(link.hash)" target="_blank">{{ link.path }}</a></td>
<td>
<template v-if="link.expire !== 0">{{ humanTime(link.expire) }}</template>
<template v-else>{{ $t('permanent') }}</template>
</td>
<td v-if="user.perm.admin">{{ link.username }}</td>
<td class="small">
<button class="action"
@click="deleteLink($event, link)"
:aria-label="$t('buttons.delete')"
:title="$t('buttons.delete')"><i class="material-icons">delete</i></button>
</td>
<td class="small">
<button class="action copy-clipboard"
:data-clipboard-text="buildLink(link.hash)"
:aria-label="$t('buttons.copyToClipboard')"
:title="$t('buttons.copyToClipboard')"><i class="material-icons">content_paste</i></button>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</template>
Expand Down
Loading

0 comments on commit db5aad8

Please sign in to comment.