- add AvatarController.ts

- adapted menu.ts, NavBar.vue, NavBarItem.vue for highlighting active nav item
- NavBarItemLabel.vue for app menu highlighting
- adapted routes.ts
- adapted app.edge for new favicon
- adapted LayoutAuthenticated.vue (:showAsideMenu="false") for showing AsideMenu optional
- new material icons: BriefcaseCheck.vue, SwapHorizontal.vue, AccountGroup.vue, Lock.vue
- started with FirstRunWizard

resources/js/Components/FirstrunWizard/components/Card.vue

@@ -0,0 +1,96 @@
+<!--
+  - @copyright Copyright (c) 2023 Marco Ambrosini <marcoambrosini@proton.me>
+  -
+  - @author Simon Lindner <szaimen@e.mail.de>
+  - @author Marco Ambrosini <marcoambrosini@proton.me>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+<template>
+    <element :is="isLink ? 'a' : 'div'" :href="href || undefined" class="card" :class="{ 'card--link': isLink }"
+        :target="!isLink ? undefined : '_blank'" :rel="!isLink ? undefined : 'noreferrer'">
+        <div v-if="!isLink" class="card__icon">
+            <slot />
+        </div>
+        <div class="card__text">
+            <h3 class="card__heading">
+                {{ title }}
+            </h3>
+            <p>{{ subtitle }}</p>
+        </div>
+    </element>
+</template>
+
+<script>
+export default {
+    name: 'Card',
+
+    props: {
+        title: {
+            type: String,
+            required: true,
+        },
+
+        href: {
+            type: String,
+            default: '',
+        },
+
+        subtitle: {
+            type: String,
+            required: true,
+        },
+    },
+
+    computed: {
+        isLink() {
+            return this.href !== ''
+        },
+    },
+}
+</script>
+
+<style lang="css" scoped>
+.card {
+    display: flex;
+    max-width: 250px;
+    box-sizing: border-box;
+    height: fit-content;
+}
+
+.card__icon {
+    display: flex;
+    flex: 0 0 44px;
+    align-items: center;
+}
+
+.card__heading {
+    font-weight: bold;
+    margin: 0;
+}
+
+.card--link {
+    box-shadow: 0px 0px 10px 0px var(--color-box-shadow);
+    border-radius: var(--border-radius-large);
+    padding: calc(var(--default-grid-baseline) * 4);
+}
+
+.card--link:focus-visible {
+    outline: 2px solid var(--color-main-text);
+    box-shadow: 0 0 0 4px var(--color-main-background);
+}
+</style>

resources/js/Components/FirstrunWizard/components/Page1.vue

@@ -0,0 +1,56 @@
+<template>
+    <div class="page__wrapper">
+        <div class="page__scroller first-page">
+            <h2 class="page__heading">
+                {{ t('firstrunwizard', 'A collaboration platform that puts you in control') }}
+            </h2>
+            <div class="page__content">
+                <Card :title="t('firstrunwizard', 'Privacy')"
+                    :subtitle="t('firstrunwizard', 'Host your data and files where you decide.')">
+                    <Lock :size="20" />
+                </Card>
+                <Card :title="t('firstrunwizard', 'Productivity')"
+                    :subtitle="t('firstrunwizard', 'Collaborate and communicate across any platform.')">
+                    <BriefcaseCheck :size="20" />
+                </Card>
+                <Card :title="t('firstrunwizard', 'Interoperability')"
+                    :subtitle="t('firstrunwizard', 'Import and export anything you want with open standards.')">
+                    <SwapHorizontal :size="20" />
+                </Card>
+                <Card :title="t('firstrunwizard', 'Community')"
+                    :subtitle="t('firstrunwizard', 'Enjoy constant improvements from a thriving open-source community.')">
+                    <AccountGroup :size="20" />
+                </Card>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import Card from './Card.vue'
+
+import Lock from 'vue-material-design-icons/Lock.vue'
+import BriefcaseCheck from 'vue-material-design-icons/BriefcaseCheck.vue'
+import SwapHorizontal from 'vue-material-design-icons/SwapHorizontal.vue'
+import AccountGroup from 'vue-material-design-icons/AccountGroup.vue'
+
+export default {
+    name: 'Page1',
+
+    components: {
+        Card,
+        Lock,
+        BriefcaseCheck,
+        SwapHorizontal,
+        AccountGroup,
+    },
+}
+</script>
+
+<style lang="css" scoped>
+/* @import "pageStyles"; */
+
+.first-page {
+    margin-top: 100px;
+}
+</style>

resources/js/Components/FirstrunWizard/components/pageStyles.css

@@ -0,0 +1,31 @@
+.page {
+    &__wrapper {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        min-height: min(520px, 50vh);
+    }
+
+    &__scroller {
+        overflow-y: scroll;
+        margin-top: calc(var(--default-grid-baseline) * 8);
+    }
+
+    &__heading {
+        text-align: center;
+    }
+
+    &__subtitle {
+        max-width: 450px;
+        margin: auto;
+        text-align: center;
+    }
+
+    &__content {
+        display: flex;
+        flex-wrap: wrap;
+        gap: calc(var(--default-grid-baseline) * 6);
+        justify-content: center;
+        margin: calc(var(--default-grid-baseline) * 10) 0;
+    }
+}