From db5aad8eb679cfe1b1ace5142cf342951217f0f7 Mon Sep 17 00:00:00 2001
From: Ramires Viana <59319979+ramiresviana@users.noreply.github.com>
Date: Fri, 19 Feb 2021 13:15:46 +0000
Subject: [PATCH] feat: dual pane settings view

---
 frontend/src/css/dashboard.css          |  26 +++-
 frontend/src/views/settings/Global.vue  | 164 ++++++++++++------------
 frontend/src/views/settings/Profile.vue |  58 +++++----
 frontend/src/views/settings/Shares.vue  |  72 ++++++-----
 frontend/src/views/settings/User.vue    |  48 +++----
 frontend/src/views/settings/Users.vue   |  48 +++----
 6 files changed, 229 insertions(+), 187 deletions(-)

diff --git a/frontend/src/css/dashboard.css b/frontend/src/css/dashboard.css
index 52a8d41e..bece5d9d 100644
--- a/frontend/src/css/dashboard.css
+++ b/frontend/src/css/dashboard.css
@@ -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
 }
@@ -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);
@@ -151,6 +172,7 @@ table tr>*:last-child {
 
 .card .card-content.full {
   padding-bottom: 0;
+  overflow: auto;
 }
 
 .card h2 {
diff --git a/frontend/src/views/settings/Global.vue b/frontend/src/views/settings/Global.vue
index 2f2f4b29..a4eadeb2 100644
--- a/frontend/src/views/settings/Global.vue
+++ b/frontend/src/views/settings/Global.vue
@@ -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="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 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>
 
-        <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">
-          <a class="link" target="_blank" href="https://filebrowser.org/configuration/custom-branding">{{ $t('settings.documentation') }}</a>
-        </i18n>
+          <p><input type="checkbox" v-model="settings.createUserDir"> {{ $t('settings.createUserDir') }}</p>
 
-        <p>
-          <input type="checkbox" v-model="settings.branding.disableExternal" id="branding-links" />
-          {{ $t('settings.disableExternalLinks') }}
-        </p>
+          <h3>{{ $t('settings.rules') }}</h3>
+          <p class="small">{{ $t('settings.globalRules') }}</p>
+          <rules :rules.sync="settings.rules" />
 
-        <p>
-          <label for="theme">{{ $t('settings.themes.title') }}</label>
-          <themes class="input input--block" :theme.sync="settings.branding.theme" id="theme"></themes>
-        </p>
+          <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>
 
-        <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>
+          <h3>{{ $t('settings.branding') }}</h3>
 
-        <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>
+          <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>
 
-      </div>
+          <p>
+            <input type="checkbox" v-model="settings.branding.disableExternal" id="branding-links" />
+            {{ $t('settings.disableExternalLinks') }}
+          </p>
 
-      <div class="card-action">
-        <input class="button button--flat" type="submit" :value="$t('buttons.update')">
-      </div>
-    </form>
+          <p>
+            <label for="theme">{{ $t('settings.themes.title') }}</label>
+            <themes class="input input--block" :theme.sync="settings.branding.theme" id="theme"></themes>
+          </p>
 
-    <form class="card" @submit.prevent="save">
-      <div class="card-title">
-        <h2>{{ $t('settings.userDefaults') }}</h2>
-      </div>
+          <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>
 
-      <div class="card-content">
-        <p class="small">{{ $t('settings.defaultUserDescription') }}</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>
 
-        <user-form :isNew="false" :isDefault="true" :user.sync="settings.defaults" />
-      </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>
 
-    <form v-if="isExecEnabled" class="card" @submit.prevent="save">
-      <div class="card-title">
-        <h2>{{ $t('settings.commandRunner') }}</h2>
-      </div>
+    <div class="column">
+      <form class="card" @submit.prevent="save">
+        <div class="card-title">
+          <h2>{{ $t('settings.userDefaults') }}</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 class="card-content">
+          <p class="small">{{ $t('settings.defaultUserDescription') }}</p>
 
-        <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>
+          <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>
 
diff --git a/frontend/src/views/settings/Profile.vue b/frontend/src/views/settings/Profile.vue
index 77c4fbe5..9a7503bd 100644
--- a/frontend/src/views/settings/Profile.vue
+++ b/frontend/src/views/settings/Profile.vue
@@ -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>
 
diff --git a/frontend/src/views/settings/Shares.vue b/frontend/src/views/settings/Shares.vue
index d8a2bb54..f1fd31d2 100644
--- a/frontend/src/views/settings/Shares.vue
+++ b/frontend/src/views/settings/Shares.vue
@@ -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>
diff --git a/frontend/src/views/settings/User.vue b/frontend/src/views/settings/User.vue
index 3cff063c..20c7e463 100644
--- a/frontend/src/views/settings/User.vue
+++ b/frontend/src/views/settings/User.vue
@@ -1,29 +1,31 @@
 <template>
-  <div>
-    <form v-if="loaded" @submit="save" class="card">
-      <div class="card-title">
-        <h2 v-if="user.id === 0">{{ $t('settings.newUser') }}</h2>
-        <h2 v-else>{{ $t('settings.user') }} {{ user.username }}</h2>
-      </div>
+  <div class="row">
+    <div class="column">
+      <form v-if="loaded" @submit="save" class="card">
+        <div class="card-title">
+          <h2 v-if="user.id === 0">{{ $t('settings.newUser') }}</h2>
+          <h2 v-else>{{ $t('settings.user') }} {{ user.username }}</h2>
+        </div>
 
-      <div class="card-content">
-        <user-form :user.sync="user" :isDefault="false" :isNew="isNew" />
-      </div>
+        <div class="card-content">
+          <user-form :user.sync="user" :isDefault="false" :isNew="isNew" />
+        </div>
 
-      <div class="card-action">
-        <button
-          v-if="!isNew"
-          @click.prevent="deletePrompt"
-          type="button"
-          class="button button--flat button--red"
-          :aria-label="$t('buttons.delete')"
-          :title="$t('buttons.delete')">{{ $t('buttons.delete') }}</button>
-        <input
-          class="button button--flat"
-          type="submit"
-          :value="$t('buttons.save')">
-      </div>
-    </form>
+        <div class="card-action">
+          <button
+            v-if="!isNew"
+            @click.prevent="deletePrompt"
+            type="button"
+            class="button button--flat button--red"
+            :aria-label="$t('buttons.delete')"
+            :title="$t('buttons.delete')">{{ $t('buttons.delete') }}</button>
+          <input
+            class="button button--flat"
+            type="submit"
+            :value="$t('buttons.save')">
+        </div>
+      </form>
+    </div>
 
     <div v-if="$store.state.show === 'deleteUser'" class="card floating">
       <div class="card-content">
diff --git a/frontend/src/views/settings/Users.vue b/frontend/src/views/settings/Users.vue
index fcbe100b..62e3b671 100644
--- a/frontend/src/views/settings/Users.vue
+++ b/frontend/src/views/settings/Users.vue
@@ -1,28 +1,32 @@
 <template>
-  <div class="card">
-    <div class="card-title">
-      <h2>{{ $t('settings.users') }}</h2>
-      <router-link to="/settings/users/new"><button class="button">{{ $t('buttons.new') }}</button></router-link>
-    </div>
+  <div class="row">
+    <div class="column">
+      <div class="card">
+        <div class="card-title">
+          <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">
-      <table>
-        <tr>
-          <th>{{ $t('settings.username') }}</th>
-          <th>{{ $t('settings.admin') }}</th>
-          <th>{{ $t('settings.scope') }}</th>
-          <th></th>
-        </tr>
+        <div class="card-content full">
+          <table>
+            <tr>
+              <th>{{ $t('settings.username') }}</th>
+              <th>{{ $t('settings.admin') }}</th>
+              <th>{{ $t('settings.scope') }}</th>
+              <th></th>
+            </tr>
 
-        <tr v-for="user in users" :key="user.id">
-          <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>{{ user.scope }}</td>
-          <td class="small">
-            <router-link :to="'/settings/users/' + user.id"><i class="material-icons">mode_edit</i></router-link>
-          </td>
-        </tr>
-      </table>
+            <tr v-for="user in users" :key="user.id">
+              <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>{{ user.scope }}</td>
+              <td class="small">
+                <router-link :to="'/settings/users/' + user.id"><i class="material-icons">mode_edit</i></router-link>
+              </td>
+            </tr>
+          </table>
+        </div>
+      </div>
     </div>
   </div>
 </template>