3.10.2

QkeleQ10 · May 2, 2024 · 4a006ee · 4a006ee
1 parent beb512f
commit 4a006ee
Show file tree

Hide file tree

Showing 14 changed files with 132 additions and 159 deletions.
diff --git a/manifest-firefox.json b/manifest-firefox.json
@@ -3,7 +3,7 @@
     "manifest_version": 3,
     "name": "__MSG_appName__",
     "description": "__MSG_appDesc__",
-    "version": "3.10.1",
+    "version": "3.10.2",
     "default_locale": "nl",
     "icons": {
         "16": "icons/icon@16px.png",

diff --git a/manifest.json b/manifest.json
@@ -3,7 +3,7 @@
     "manifest_version": 3,
     "name": "__MSG_appName__",
     "description": "__MSG_appDesc__",
-    "version": "3.10.1",
+    "version": "3.10.2",
     "default_locale": "nl",
     "icons": {
         "16": "icons/icon@16px.png",

diff --git a/popup/dist/assets/index-C1-Aj_60.js b/popup/dist/assets/index-C1-Aj_60.js
diff --git a/popup/dist/assets/index-CIYhdSlA.js b/popup/dist/assets/index-CIYhdSlA.js
diff --git a/popup/dist/assets/index-CVCj5qeo.css b/popup/dist/assets/index-CVCj5qeo.css
diff --git a/popup/dist/assets/index-JfR0SWgI.css b/popup/dist/assets/index-JfR0SWgI.css
diff --git a/popup/dist/index.html b/popup/dist/index.html
@@ -7,8 +7,8 @@
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <link rel="icon" href="./favicon.ico">
   <title>Study Tools-configuratiepaneel</title>
-  <script type="module" crossorigin src="./assets/index-C1-Aj_60.js"></script>
-  <link rel="stylesheet" crossorigin href="./assets/index-CVCj5qeo.css">
+  <script type="module" crossorigin src="./assets/index-CIYhdSlA.js"></script>
+  <link rel="stylesheet" crossorigin href="./assets/index-JfR0SWgI.css">
 </head>
 
 <body>

diff --git a/popup/src/App.vue b/popup/src/App.vue
@@ -18,7 +18,7 @@ import ColorOverrideSetting from './components/setting-types/ColorOverrideSettin
 import DecorationPickerSetting from './components/setting-types/DecorationPickerSetting.vue'
 import DecorationSizeSetting from './components/setting-types/DecorationSizeSetting.vue'
 import About from './components/About.vue'
-import ThemeHero from './components/ThemeHero.vue'
+import ThemePresets from './components/ThemePresets.vue'
 import Chip from './components/Chip.vue'
 
 const main = ref(null)
@@ -102,7 +102,6 @@ function openInNewTab(url) {
                             <TransitionGroup :name="transitionName">
                                 <About v-if="category.id === 'about'" key="about"
                                     @reset-settings="resetSettingDefaults" />
-                                <ThemeHero v-if="category.id === 'appearance'" key="appearance" />
                                 <template v-for="setting in category.settings">
                                     <div class="setting-wrapper"
                                         :class="{ visible: shouldShowSetting(setting), inline: setting.inline }"
@@ -120,6 +119,7 @@ function openInNewTab(url) {
                                         </Chip>
                                     </div>
                                 </template>
+                                <ThemePresets v-if="category.id === 'appearance'" key="appearance" />
                             </TransitionGroup>
                         </div>
                     </template>
@@ -195,6 +195,18 @@ main {
     border-top: 1px solid var(--color-surface-variant);
 }
 
+.setting-wrapper[data-setting-type="ThemePicker"] {
+    position: sticky;
+    top: 16px;
+    z-index: 6;
+    border-top: none !important;
+    margin-inline: 8px;
+}
+
+.setting-wrapper[data-setting-type="ThemePicker"]+.setting-wrapper.visible {
+    border-top: 0px solid transparent;
+}
+
 .setting-wrapper.inline {
     display: inline-block;
     margin-left: 16px;

diff --git a/popup/src/assets/variables.css b/popup/src/assets/variables.css
@@ -21,6 +21,7 @@
     --color-secondary-container: hsl(var(--palette-secondary-hue) var(--palette-secondary-saturation) 90%);
     --color-on-secondary-container: hsl(var(--palette-secondary-hue) var(--palette-secondary-saturation) 10%);
     --color-surface: hsl(var(--palette-neutral-hue) var(--palette-neutral-saturation) 98%);
+    --color-surface-container-lowest: hsl(var(--palette-neutral-hue) var(--palette-neutral-saturation) 100%);
     --color-surface-container-low: hsl(var(--palette-neutral-hue) var(--palette-neutral-saturation) 96%);
     --color-surface-container: hsl(var(--palette-neutral-hue) var(--palette-neutral-saturation) 94%);
     --color-surface-container-high: hsl(var(--palette-neutral-hue) var(--palette-neutral-saturation) 92%);
@@ -70,6 +71,7 @@
     --color-secondary-container: hsl(var(--palette-secondary-hue) var(--palette-secondary-saturation) 30%);
     --color-on-secondary-container: hsl(var(--palette-secondary-hue) var(--palette-secondary-saturation) 90%);
     --color-surface: hsl(var(--palette-neutral-hue) var(--palette-neutral-saturation) 6%);
+    --color-surface-container-lowest: hsl(var(--palette-neutral-hue) var(--palette-neutral-saturation) 4%);
     --color-surface-container-low: hsl(var(--palette-neutral-hue) var(--palette-neutral-saturation) 10%);
     --color-surface-container: hsl(var(--palette-neutral-hue) var(--palette-neutral-saturation) 12%);
     --color-surface-container-high: hsl(var(--palette-neutral-hue) var(--palette-neutral-saturation) 17%);

diff --git a/popup/src/components/ThemeHero.vue → popup/src/components/ThemePresets.vue b/popup/src/components/ThemeHero.vue → popup/src/components/ThemePresets.vue
@@ -1,6 +1,5 @@
 <script setup>
 import { inject } from 'vue'
-import MagisterThemePreview from './MagisterThemePreview.vue'
 
 const syncedStorage = inject('syncedStorage')
 
@@ -31,7 +30,7 @@ const presets = [
         thumbnail: 'url(\'https://w0.peakpx.com/wallpaper/865/392/HD-wallpaper-hawaii-background-beautiful-colors-nature-outside-palm-trees-portrait-summer-water.jpg\')',
         'ptheme': 'light,180,50,40',
         'pagecolor': 'false,0,0,7',
-        'wallpaper': 'custom,https://i.imgur.com/wWJAqG6.png',
+        'wallpaper': 'custom,https://i.imgur.com/qY42IDh.png',
         'sidecolor': 'false,207,95,55',
         'decoration': 'custom,https://w0.peakpx.com/wallpaper/865/392/HD-wallpaper-hawaii-background-beautiful-colors-nature-outside-palm-trees-portrait-summer-water.jpg',
         'decoration-size': 1,
@@ -49,55 +48,78 @@ const presets = [
         'decoration-size': 1,
         'appbarcolor': 'false,207,95,47',
         'shape': 8
+    },
+    {
+        name: "Wilde Westen",
+        thumbnail: 'url(\'https://static.vecteezy.com/system/resources/previews/023/592/503/non_2x/american-desert-landscape-western-background-vector.jpg\')',
+        'ptheme': 'dark,10,80,50',
+        'pagecolor': 'false,0,0,7',
+        'wallpaper': 'custom,https://i.imgur.com/UgMMNqN.png',
+        'sidecolor': 'false,207,95,55',
+        'decoration': 'custom,https://static.vecteezy.com/system/resources/previews/023/592/503/non_2x/american-desert-landscape-western-background-vector.jpg',
+        'decoration-size': 1,
+        'appbarcolor': 'false,207,95,47',
+        'shape': 8
     }
 ]
 </script>
 
 <template>
-    <div id="theme-hero">
-        <MagisterThemePreview id="theme-preview" />
-        <div id="theme-presets">
-            <div v-for="preset in presets" :title="preset.name" :style="{ '--thumbnail': preset.thumbnail }" @click="applyPreset(preset)">
+    <div class="setting-wrapper">
+        <div id="theme-presets-container">
+            <div>
+                <h3 class="setting-title">Themapakketten</h3>
+                <span class="setting-subtitle">Als je een vooraf ingesteld themapakket selecteert, dan worden al je voorkeuren voor het uiterlijk gewist.</span>
+            </div>
+            <div id="theme-presets">
+                <div v-for="preset in presets" :title="preset.name" :style="{ '--thumbnail': preset.thumbnail }"
+                    @click="applyPreset(preset)">
+                </div>
             </div>
         </div>
     </div>
 </template>
 
 <style scoped>
-#theme-hero {
-    position: sticky;
-    top: 16px;
-    width: 100%;
-    margin-inline: 8px;
+#theme-presets-container {
+    position: relative;
+    margin-inline: -8px;
+    margin-top: 12px;
+    margin-bottom: 16px;
 
     display: grid;
-    grid-template-columns: 200px 1fr;
+    /* grid-template-columns: 1fr 144px; */
     gap: 16px;
 
-    z-index: 6;
     padding: 16px;
-    background-color: var(--color-surface-container);
+    background-color: var(--color-surface-container-lowest);
     border-radius: 12px;
 }
 
-#theme-preview {
-    width: 200px;
-    aspect-ratio: 16 / 9;
-    border-radius: 8px;
-    outline: 1px solid var(--color-outline-variant);
+#theme-presets-container:before {
+    content: '';
+    position: absolute;
+    left: 8px;
+    right: 8px;
+    top: -8px;
+    border-top: 1px solid var(--color-surface-variant);
+}
+
+.setting-subtitle {
+    text-wrap: balance;
 }
 
 #theme-presets {
-    display: grid;
-    grid-template-columns: repeat(3, 40px);
-    align-content: start;
+    display: flex;
+    flex-wrap: wrap;
     gap: 6px;
+    padding: 6px;
 }
 
 #theme-presets>* {
     position: relative;
-    min-width: 40px;
-    aspect-ratio: 1;
+    width: 40px;
+    height: 40px;
     border: none;
     border-radius: 28px;
     cursor: pointer;

diff --git a/popup/src/components/inputs/ColorPicker.vue b/popup/src/components/inputs/ColorPicker.vue
@@ -76,13 +76,12 @@ function updatePickerOpen(newPickerOpenValue) {
     align-items: stretch;
     justify-content: stretch;
     gap: 3px;
-    margin-left: 38px;
 }
 
 .swatches {
     display: grid;
-    grid-template-columns: repeat(8, 1fr);
-    /* grid-template-rows: repeat(2, 1fr); */
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: repeat(2, 1fr);
     gap: 3px;
 }
 
@@ -104,16 +103,11 @@ function updatePickerOpen(newPickerOpenValue) {
 
 .swatch:nth-child(1) {
     border-top-left-radius: 6px;
-    border-bottom-left-radius: 6px;
-}
-
-/* .swatch:nth-child(1) {
-    border-top-left-radius: 6px;
 }
 
 .swatch:nth-child(5) {
     border-bottom-left-radius: 6px;
-} */
+}
 
 .swatch.selected {
     margin: -1px;
@@ -125,7 +119,7 @@ function updatePickerOpen(newPickerOpenValue) {
     display: flex;
     align-items: center;
     justify-content: center;
-    height: 40px;
+    height: 100%;
     width: 48px;
     padding: 0;
     padding-right: 1px;

diff --git a/popup/src/components/setting-types/ThemePicker.vue b/popup/src/components/setting-types/ThemePicker.vue
@@ -3,6 +3,7 @@ import { ref, computed, defineProps, defineEmits } from 'vue'
 
 import ColorPicker from '../inputs/ColorPicker.vue'
 import SegmentedButton from '../inputs/SegmentedButton.vue'
+import MagisterThemePreview from '../MagisterThemePreview.vue';
 
 const props = defineProps(['modelValue', 'id'])
 const emit = defineEmits(['update:modelValue'])
@@ -36,60 +37,67 @@ function updateColor(newColor) {
 </script>
 
 <template>
-    <div class="setting theme-picker">
+    <div class="setting theme-picker" id="theme-picker">
 
-        <div class="theme-picker-title">
+        <MagisterThemePreview id="theme-preview" />
+
+        <!-- <div id="theme-title">
             <h3 class="setting-title">
                 <slot name="title"></slot>
             </h3>
-            <span class="setting-subtitle">
-                <slot name="subtitle"></slot>
-            </span>
-        </div>
+        </div> -->
 
-        <SegmentedButton class="theme-picker-scheme" :model-value="value.scheme" @update:model-value="updateScheme"
+        <SegmentedButton id="theme-scheme" :model-value="value.scheme" @update:model-value="updateScheme"
             :options="[
-            { value: 'auto', icon: 'hdr_auto', title: 'Systeem', tooltip: prefersDarkColorScheme ? 'Op basis van browserthema (momenteel donker)' : 'Op basis van browserthema (momenteel licht)' },
-            { value: 'light', icon: 'light_mode', title: 'Licht', tooltip: 'Licht thema' },
-            { value: 'dark', icon: 'dark_mode', title: 'Donker', tooltip: 'Donker thema' }
-        ]"  />
+                { value: 'auto', icon: 'hdr_auto', tooltip: prefersDarkColorScheme ? 'Op basis van browserthema (momenteel donker)' : 'Op basis van browserthema (momenteel licht)' },
+                { value: 'light', icon: 'light_mode', tooltip: 'Licht thema' },
+                { value: 'dark', icon: 'dark_mode', tooltip: 'Donker thema' }
+            ]" />
 
-        <ColorPicker class="theme-picker-color" :model-value="value.color" @update:model-value="updateColor"
+        <ColorPicker id="theme-color" :model-value="value.color" @update:model-value="updateColor"
             :swatches-enabled="true" />
 
     </div>
 </template>
 
 <style scoped>
-.theme-picker {
+#theme-picker {
     display: grid;
     grid-template:
-        'title title' auto
-        'scheme scheme' auto
-        'color color' auto
+        /* 'preview title' auto */
+        'preview scheme' auto
+        'preview color' auto
         / auto 1fr;
 
-    gap: 10px;
+    gap: 16px;
+
+    padding: 16px;
 
-    /* padding: 16px; */
+    background-color: var(--color-surface-container);
+    border-radius: 12px;
+}
 
-    /* background-color: var(--color-surface-container);
-    border-radius: 12px; */
+#theme-preview {
+    grid-area: preview;
+    width: 200px;
+    aspect-ratio: 16 / 9;
+    border-radius: 8px;
+    outline: 1px solid var(--color-outline-variant);
 }
 
-.theme-picker-title {
+#theme-title {
     grid-area: title;
 
     position: relative;
     transition: background-color 200ms, color 200ms;
 }
 
-.theme-picker-scheme {
+#theme-scheme {
     grid-area: scheme;
     margin-top: -4px;
 }
 
-.theme-picker-color {
+#theme-color {
     grid-area: color;
     margin-top: -4px;
 }