- added NcModal.vue, NcActions.vue, NcButton.vue, FirstrunWizard.vue, Card.vue, Page0.vue, Page1.vue, Page2.vue, Page3.vue and some icons
Some checks failed
CI Pipeline / japa-tests (push) Failing after 51s
Some checks failed
CI Pipeline / japa-tests (push) Failing after 51s
- added lime color inside tailwind.config.js - added some utilities scripts needed for components - npm updates - changed postcss.config.js for nesting css styles - added about function to NavBar.vue
This commit is contained in:
parent
cefd9081ae
commit
87e9314b00
25 changed files with 3475 additions and 401 deletions
|
|
@ -1,8 +1,7 @@
|
|||
<!--
|
||||
- @copyright Copyright (c) 2023 Marco Ambrosini <marcoambrosini@proton.me>
|
||||
- @copyright Copyright (c) 2023 Arno Kaimbacher <arno.kaimbacher@outlook.at>
|
||||
-
|
||||
- @author Simon Lindner <szaimen@e.mail.de>
|
||||
- @author Marco Ambrosini <marcoambrosini@proton.me>
|
||||
- @author Arno Kaimbacher <arno.kaimbacher@outlook.at>
|
||||
-
|
||||
- @license GNU AGPL version 3 or any later version
|
||||
-
|
||||
|
|
@ -21,18 +20,18 @@
|
|||
-
|
||||
-->
|
||||
<template>
|
||||
<element :is="isLink ? 'a' : 'div'" :href="href || undefined" class="card" :class="{ 'card--link': isLink }"
|
||||
<component :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">
|
||||
<h3 class="text-base text-ellipsis card__heading">
|
||||
{{ title }}
|
||||
</h3>
|
||||
<p>{{ subtitle }}</p>
|
||||
</div>
|
||||
</element>
|
||||
</component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
85
resources/js/Components/FirstrunWizard/components/Page0.vue
Normal file
85
resources/js/Components/FirstrunWizard/components/Page0.vue
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
<template>
|
||||
<!--<div class="video-wrapper">
|
||||
<video ref="video" playsinline autoplay muted @ended="handleEnded">
|
||||
<source :src="videoWebm" type="video/webm" />
|
||||
<source :src="videoMp4" type="video/mp4" />
|
||||
{{ videoFallbackText }}
|
||||
</video>
|
||||
</div>-->
|
||||
<div id="page__wrapper" class="flex flex-col justify-between min-h-520">
|
||||
<div class="page__scroller">
|
||||
<h2 id="page__heading" class="text-xl font-bold leading-tight dark:text-slate-400 text-center">
|
||||
{{ 'Seamless integration with your devices.' }}
|
||||
</h2>
|
||||
<!-- <p id="page__subtitle" class="max-w-md m-auto text-center">
|
||||
{{ subtitleText }}
|
||||
</p> -->
|
||||
<div class="page__content">
|
||||
Discover the power of Tethys, the cutting-edge web backend solution that revolutionizes the way you handle
|
||||
research
|
||||
data. At the heart of Tethys lies our meticulously developed research data repository, which leverages
|
||||
state-of-the-art
|
||||
CI/CD techniques to deliver a seamless and efficient experience.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
// import { generateFilePath } from '@nextcloud/router';
|
||||
import CardBox from '@/Components/CardBox.vue';
|
||||
|
||||
export default {
|
||||
name: 'Page0',
|
||||
components: {
|
||||
CardBox
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// videoMp4: generateFilePath('firstrunwizard', 'img', 'Nextcloud.mp4'),
|
||||
// videoWebm: generateFilePath('firstrunwizard', 'img', 'Nextcloud.webm'),
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// videoFallbackText() {
|
||||
// return 'Welcome to {cloudName}!', { cloudName: "test" };
|
||||
// },
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleEnded() {
|
||||
this.$emit('next');
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="css">
|
||||
/* video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
} */
|
||||
|
||||
.video-wrapper {
|
||||
background-color: var(--color-primary-element);
|
||||
}
|
||||
|
||||
.page {
|
||||
|
||||
&__scroller {
|
||||
/* overflow-y: scroll; */
|
||||
margin-top: calc(var(--default-grid-baseline) * 8);
|
||||
}
|
||||
|
||||
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: calc(var(--default-grid-baseline) * 6);
|
||||
justify-content: center;
|
||||
margin: calc(var(--default-grid-baseline) * 10) 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,24 +1,38 @@
|
|||
<template>
|
||||
<div class="page__wrapper">
|
||||
<div id="page__wrapper" class="flex flex-col justify-between min-h-520">
|
||||
<div class="page__scroller first-page">
|
||||
<h2 class="page__heading">
|
||||
{{ t('firstrunwizard', 'A collaboration platform that puts you in control') }}
|
||||
<h2 id="page__heading" class="text-xl font-bold leading-tight dark:text-slate-400 text-center">
|
||||
{{ 'A researchdata 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.')">
|
||||
<!-- <Card :title="'Privacy'"
|
||||
:subtitle="'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.')">
|
||||
<Card :title="'Productivity'"
|
||||
:subtitle="'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.')">
|
||||
</Card> -->
|
||||
<div class="max-w-60 h-fit box-border flex">
|
||||
|
||||
<!-- <div class="card__icon">
|
||||
<BriefcaseCheck :size="20" />
|
||||
</div> -->
|
||||
|
||||
<div>
|
||||
Discover the power of TethysCloud, the cutting-edge web backend solution that revolutionizes the way you
|
||||
handle
|
||||
research
|
||||
data. At the heart of Tethys lies our meticulously developed research data repository, which
|
||||
leverages
|
||||
state-of-the-art
|
||||
CI/CD techniques to deliver a seamless and efficient experience.
|
||||
</div>
|
||||
</div>
|
||||
<Card :title="'Interoperability'" :subtitle="'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.')">
|
||||
<Card :title="'Community'" :subtitle="'Enjoy constant improvements from a thriving open-source community.'">
|
||||
<AccountGroup :size="20" />
|
||||
</Card>
|
||||
</div>
|
||||
|
|
@ -26,21 +40,18 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
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'
|
||||
import SwapHorizontal from '@/Components/Icons/SwapHorizontal.vue';
|
||||
import AccountGroup from '@/Components/Icons/AccountGroup.vue'
|
||||
|
||||
|
||||
export default {
|
||||
name: 'Page1',
|
||||
|
||||
components: {
|
||||
Card,
|
||||
Lock,
|
||||
BriefcaseCheck,
|
||||
Card,
|
||||
SwapHorizontal,
|
||||
AccountGroup,
|
||||
},
|
||||
|
|
@ -48,7 +59,25 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="css" scoped>
|
||||
/* @import "pageStyles"; */
|
||||
.page {
|
||||
&__scroller {
|
||||
/* overflow-y: scroll; */
|
||||
margin-top: calc(var(--default-grid-baseline) * 8);
|
||||
}
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: calc(var(--default-grid-baseline) * 6);
|
||||
justify-content: center;
|
||||
margin: calc(var(--default-grid-baseline) * 10) 0;
|
||||
}
|
||||
}
|
||||
.card__icon {
|
||||
display: flex;
|
||||
flex: 0 0 44px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.first-page {
|
||||
margin-top: 100px;
|
||||
|
|
|
|||
88
resources/js/Components/FirstrunWizard/components/Page2.vue
Normal file
88
resources/js/Components/FirstrunWizard/components/Page2.vue
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
<!--
|
||||
- @copyright Copyright (c) 2023 Arno Kaimbacher <arno.kaimbacher@outlook.at>
|
||||
-
|
||||
- @author Marco Ambrosini <arno.kaimbacher@outlook.at>
|
||||
-
|
||||
- @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>
|
||||
<div id="page__wrapper" class="flex flex-col justify-between min-h-520">
|
||||
<div class="page__scroller">
|
||||
<h2 id="page__heading" class="text-xl font-bold leading-tight dark:text-slate-400 text-center">
|
||||
{{ 'Seamless integration with your devices.' }}
|
||||
</h2>
|
||||
<p id="page__subtitle" class="max-w-md m-auto text-center">
|
||||
{{ subtitleText }}
|
||||
</p>
|
||||
<div class="page__content">
|
||||
<!-- <AppStoreBadge type="android" />
|
||||
<AppStoreBadge type="ios" /> -->
|
||||
<Card :href="desktop" :title="'Desktop app ↗'" :subtitle="'Download For Windows, Mac OS and Linux.'" />
|
||||
<!-- <Card :href="syncClientsUrl" :title="'Calendar and contacts ↗'"
|
||||
:subtitle="'Connect your calendar and contacts with your devices.'" /> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Card from './Card.vue';
|
||||
// import AppStoreBadge from './AppStoreBadge.vue';
|
||||
// import { generateUrl } from '@nextcloud/router';
|
||||
import { loadState } from '@/utils/initialState';
|
||||
|
||||
const desktop = loadState('firstrunwizard', 'desktop');
|
||||
|
||||
export default {
|
||||
name: 'Page2',
|
||||
|
||||
components: {
|
||||
Card,
|
||||
// AppStoreBadge,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
subtitleText: 'Sync your files across your devices with the desktop and mobile apps, and connect your calendar and contacts.',
|
||||
// syncClientsUrl: generateUrl('settings/user/sync-clients'),
|
||||
desktop,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="css" scoped>
|
||||
/* @import 'pageStyles'; */
|
||||
.page {
|
||||
|
||||
&__scroller {
|
||||
/* overflow-y: scroll; */
|
||||
margin-top: calc(var(--default-grid-baseline) * 8);
|
||||
}
|
||||
|
||||
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: calc(var(--default-grid-baseline) * 6);
|
||||
justify-content: center;
|
||||
margin: calc(var(--default-grid-baseline) * 10) 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
68
resources/js/Components/FirstrunWizard/components/Page3.vue
Normal file
68
resources/js/Components/FirstrunWizard/components/Page3.vue
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
<template>
|
||||
<div id="page__wrapper" class="flex flex-col justify-between min-h-520">
|
||||
<div class="page__scroller">
|
||||
<h2 id="page__heading" class="text-xl font-bold leading-tight dark:text-slate-400 text-center">
|
||||
{{ 'More about TethysCloud' }}
|
||||
</h2>
|
||||
<div id="page__content" class="flex flex-wrap justify-center page__content">
|
||||
<Card href="https://gitea.geologie.ac.at/geolba" :title="'Explore more apps ↗'"
|
||||
:subtitle="'Extend the functionality of TethysCloud.'" />
|
||||
<Card href="https://gitea.geologie.ac.at/geolba" :title="'Get involved! ↗'"
|
||||
:subtitle="'Be a part of the community that helps build, design, translate and promote TethysCloud!'" />
|
||||
<Card href="https://gitea.geologie.ac.at/geolba" :title="'Need help? ↗'"
|
||||
:subtitle="'Find out more about your TethysCloud setup with the admin, user or developer documentation.'" />
|
||||
<Card href="https://gitea.geologie.ac.at/geolba" :title="'For large organisations ↗'"
|
||||
:subtitle="'Get TethysCloud Enterprise for mission critical environments where advanced security and compliance are important.'" />
|
||||
</div>
|
||||
<p class="version-number">
|
||||
{{ versionNumber }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Card from './Card.vue'
|
||||
|
||||
export default {
|
||||
name: 'Page3',
|
||||
|
||||
components: {
|
||||
Card,
|
||||
},
|
||||
|
||||
computed: {
|
||||
versionNumber() {
|
||||
return 'This TethysCloud is on version 2.0.0'; // + OC.config.versionstring
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="css" scoped>
|
||||
.page {
|
||||
|
||||
&__scroller {
|
||||
/* overflow-y: scroll; */
|
||||
margin-top: calc(var(--default-grid-baseline) * 8);
|
||||
}
|
||||
|
||||
/* &__content {
|
||||
|
||||
gap: calc(var(--default-grid-baseline) * 6);
|
||||
margin: calc(var(--default-grid-baseline) * 10) 0;
|
||||
} */
|
||||
}
|
||||
|
||||
|
||||
.page__content {
|
||||
gap: calc(var(--default-grid-baseline) * 6);
|
||||
margin: calc(var(--default-grid-baseline) * 6) 0 calc(var(--default-grid-baseline) * 4) 0;
|
||||
}
|
||||
|
||||
.version-number {
|
||||
margin: 0px 0 calc(var(--default-grid-baseline) * 4) 0;
|
||||
color: var(--color-text-maxcontrast);
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
editor.link_modal.header
Reference in a new issue