admin: revamp UI

Signed-off-by: Varun Patil <radialapps@gmail.com>

src/components/admin/AdminMain.vue

@@ -2,15 +2,21 @@
   <div class="outer" v-if="config && sconfig">
     <XLoadingIcon class="loading-icon" v-show="loading" />
 
-    <component
-      v-for="c in components"
-      :key="c.__name"
-      :is="c"
-      :status="status"
-      :config="config"
-      :sconfig="sconfig"
-      @update="update"
-    />
+    <div class="left-pane">
+      <component
+        v-for="c in components"
+        :id="c.name"
+        :key="c.name"
+        :is="c"
+        :status="status"
+        :config="config"
+        :sconfig="sconfig"
+        @update="update"
+      />
+    </div>
+    <div class="right-pane">
+      <a class="sec-link" v-for="c in components" :key="c.name" :href="`#${c.name}`">{{ c.title ?? c.name }}</a>
+    </div>
   </div>
 </template>
 
@@ -58,6 +64,7 @@ export default defineComponent({
 
   methods: {
     async refreshSystemConfig() {
+      console.log(this.components);
       try {
         this.loading++;
         const res = await axios.get<ISystemConfig>(API.SYSTEM_CONFIG(null));
@@ -124,6 +131,33 @@ export default defineComponent({
 .outer {
   padding: 20px;
   padding-top: 0px;
+  overflow-x: hidden;
+
+  > .right-pane {
+    display: none;
+  }
+
+  @media (min-width: 1024px) {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+
+    > .left-pane {
+      flex: 1;
+      padding-right: 10px;
+      height: 100%;
+      overflow-y: auto;
+    }
+
+    > .right-pane {
+      display: block;
+      padding: 10px;
+      line-height: 2em;
+      > a.sec-link {
+        display: block;
+      }
+    }
+  }
 
   .admin-section {
     margin-top: 20px;
@@ -155,9 +189,9 @@ export default defineComponent({
   }
 
   :deep h2 {
-    font-size: 1.5em;
-    font-weight: bold;
-    margin-top: 25px;
+    font-size: 1.6em;
+    font-weight: 500;
+    margin-top: 40px;
   }
 
   :deep h3 {

src/components/admin/sections/Apps.vue

@@ -37,10 +37,13 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 
+import { translate as t } from '@nextcloud/l10n';
+
 import AdminMixin from '../AdminMixin';
 
 export default defineComponent({
   name: 'Apps',
+  title: t('memories', 'Recommended Apps'),
   mixins: [AdminMixin],
 });
 </script>

src/components/admin/sections/Exif.vue

@@ -36,10 +36,13 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 
+import { translate as t } from '@nextcloud/l10n';
+
 import AdminMixin from '../AdminMixin';
 
 export default defineComponent({
   name: 'Exif',
+  title: t('memories', 'EXIF Extraction'),
   mixins: [AdminMixin],
 });
 </script>

src/components/admin/sections/FileSupport.vue

@@ -74,6 +74,7 @@ import AdminMixin from '../AdminMixin';
 
 export default defineComponent({
   name: 'FileSupport',
+  title: t('memories', 'File Support'),
   mixins: [AdminMixin],
 
   data: () => ({

src/components/admin/sections/Indexing.vue

@@ -116,10 +116,13 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 
+import { translate as t } from '@nextcloud/l10n';
+
 import AdminMixin from '../AdminMixin';
 
 export default defineComponent({
   name: 'Indexing',
+  title: t('memories', 'Media Indexing'),
   mixins: [AdminMixin],
 });
 </script>

src/components/admin/sections/Performance.vue

@@ -29,10 +29,13 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 
+import { translate as t } from '@nextcloud/l10n';
+
 import AdminMixin from '../AdminMixin';
 
 export default defineComponent({
   name: 'Performance',
+  title: t('memories', 'Performance'),
   mixins: [AdminMixin],
 
   computed: {

src/components/admin/sections/Places.vue

@@ -71,10 +71,13 @@
 import { defineComponent } from 'vue';
 import { API } from '../../../services/API';
 
+import { translate as t } from '@nextcloud/l10n';
+
 import AdminMixin from '../AdminMixin';
 
 export default defineComponent({
   name: 'Places',
+  title: t('memories', 'Reverse Geocoding'),
   mixins: [AdminMixin],
 
   computed: {

src/components/admin/sections/Video.vue

@@ -81,10 +81,13 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 
+import { translate as t } from '@nextcloud/l10n';
+
 import AdminMixin from '../AdminMixin';
 
 export default defineComponent({
   name: 'Video',
+  title: t('memories', 'Video Streaming'),
   mixins: [AdminMixin],
 });
 </script>

src/components/admin/sections/VideoAccel.vue

@@ -102,10 +102,13 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 
+import { translate as t } from '@nextcloud/l10n';
+
 import AdminMixin from '../AdminMixin';
 
 export default defineComponent({
   name: 'VideoAccel',
+  title: t('memories', 'HW Acceleration'),
   mixins: [AdminMixin],
 
   computed: {

src/components/admin/sections/VideoTranscoder.vue

@@ -57,10 +57,13 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 
+import { translate as t } from '@nextcloud/l10n';
+
 import AdminMixin from '../AdminMixin';
 
 export default defineComponent({
   name: 'VideoTranscoder',
+  title: t('memories', 'Transcoding'),
   mixins: [AdminMixin],
 });
 </script>

src/components/admin/sections/_Template.vue

@@ -5,10 +5,13 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 
+import { translate as t } from '@nextcloud/l10n';
+
 import AdminMixin from '../AdminMixin';
 
 export default defineComponent({
   name: 'Template',
+  title: t('memories', 'Template'),
   mixins: [AdminMixin],
 });
 </script>