refactor of menus

begin work on settings
2025-04-09 19:15:43 +02:00
parent ecbe2f7d72
commit 52b2d18a03
26 changed files with 1613 additions and 1667 deletions
@@ -0,0 +1,104 @@
+<template>
+	<NcContent app-name="side_menu">
+      <NcAppContent>
+        <div class="side-menu-setting">
+          <NcButton
+            v-for="item in menu"
+            @click="setSection(item.section)"
+            :variant="item.section === section ? 'primary' : 'secondary'"
+          >{{ trans(item.label) }}</NcButton>
+        </div>
+
+        <TableContainer :class="sectionClass('panel')">
+        </TableContainer>
+
+        <TableContainer :class="sectionClass('color')">
+          <TableRow>
+            <TableLabel label="Background color" :short="true" :middle="true"></TableLabel>
+            <TableValue>
+              <NcColorPicker v-model="color" class="side-menu-setting-color-picker">
+                <div :style="{'background-color': color}" class="side-menu-setting-color-picker-value" />
+              </NcColorPicker>
+              <NcColorPicker v-model="color" class="side-menu-setting-color-picker">
+                <div :style="{'background-color': color}" class="side-menu-setting-color-picker-value" />
+              </NcColorPicker>
+            </TableValue>
+          </TableRow>
+
+          <TableRow>
+            <TableLabel label="Background color of current app" :short="true" :middle="true"></TableLabel>
+            <TableValue>
+              <NcColorPicker v-model="color" class="side-menu-setting-color-picker">
+                <div :style="{'background-color': color}" class="side-menu-setting-color-picker-value" />
+              </NcColorPicker>
+            </TableValue>
+          </TableRow>
+
+          <TableRow>
+            <TableLabel label="Text color" :short="true" :middle="true"></TableLabel>
+            <TableValue>
+              <NcColorPicker v-model="color" class="side-menu-setting-color-picker">
+                <div :style="{'background-color': color}" class="side-menu-setting-color-picker-value" />
+              </NcColorPicker>
+            </TableValue>
+          </TableRow>
+        </TableContainer>
+      </NcAppContent>
+    </NcContent>
+</template>
+
+<style scoped>
+.wrapper {
+  display: flex;
+  gap: 12px;
+  padding-top: calc(var(--default-grid-baseline) * 5);
+  padding-left: calc(var(--default-grid-baseline) * 7);
+  padding-right: calc(var(--default-grid-baseline) * 7);
+}
+
+.hidden {
+  display: none;
+}
+
+.color-picker {
+  width: 100px;
+  height: 34px;
+  border-radius: 6px;
+}
+
+.flex {
+  display: flex;
+}
+</style>
+
+<script setup>
+import { NcContent, NcAppContent, NcColorPicker, NcButton } from '@nextcloud/vue'
+import MenuDisplay from '../components/settings/MenuDisplay'
+import TableContainer from '../components/settings/TableContainer'
+import TableRow from '../components/settings/TableRow'
+import TableLabel from '../components/settings/TableLabel'
+import TableValue from '../components/settings/TableValue'
+import { ref, onMounted } from 'vue'
+
+const menu = [
+  {label: 'Panel', section: 'panel'},
+  {label: 'Colors', section: 'color'},
+]
+
+const section = ref('panel')
+const color = ref('#ff9')
+
+const setSection = (value) => {
+  section.value = value
+}
+
+const trans = (value) => {
+  return t('side_menu', value)
+}
+
+const sectionClass = (value) => {
+  return {
+    hidden: value !== section.value,
+  }
+}
+</script>