Merge pull request #170 from nextcloud/enh/startpage-polish

Enh/startpage polish

appinfo/info.xml

@@ -3,10 +3,8 @@
       xsi:noNamespaceSchemaLocation="https://apps.nextcloud.com/schema/apps/info.xsd">
     <id>health</id>
     <name>Health</name>
-    <summary>Track your health. Use the advantages of a trusted platform.</summary>
-    <description><![CDATA[The app provides different modules to track health data.
-
-Following modules are served:
+    <summary>Track your health privately.</summary>
+    <description><![CDATA[Track your health data within the following provided modules:
 - Weight
 - Feeling
 - Measurement
@@ -16,7 +14,7 @@ Following modules are served:
 - Medication
 
 Health is everything.]]></description>
-    <version>1.6.2</version>
+    <version>1.6.3</version>
     <licence>agpl</licence>
     <author mail="[email protected]" >Florian Steffens</author>
     <namespace>Health</namespace>

cypress/e2e/health.cy.js

@@ -14,6 +14,6 @@ describe('The Home Page', () => {
 	})
 
 	it('successfully loads', () => {
-		cy.get('h2').contains('Welcome to your health center').should('be.visible')
+		cy.get('h2').contains('Health').should('be.visible')
 	})
 })

lib/Controller/PageController.php

@@ -43,12 +43,12 @@ public function __construct($appName, IRequest $request) {
 	 * @NoAdminRequired
 	 * @NoCSRFRequired
 	 */
-	public function index() {
+	public function index(): TemplateResponse {
 		// $this->cesService->transformDatasets();
 		// Util::addScript($this->appName, 'vue-chartjs.min');
 		Util::addScript($this->appName, 'health-main');
 		// Util::addScript($this->appName, 'health');
-		Util::addStyle($this->appName, 'icons');
+		//Util::addStyle($this->appName, 'icons');
 		//Util::addStyle($this->appName, 'bulma.min');
 
 		$response = new TemplateResponse($this->appName, 'main');

src/App.vue

@@ -2,14 +2,11 @@
 	<NcContent :class="{'icon-loading': initialLoading}" app-name="health">
 		<PersonsNavigation />
 		<NcAppContent>
-			<div class="content-menu-topright">
+			<div class="content-menu-top-right">
 				<NcActions v-if="canManage" :title="'Details'">
-					<NcActionButton icon="icon-menu-sidebar" @click="$store.commit('showSidebar', !showSidebar)" />
+					<NcActionButton :aria-label="t('health', 'Show sidebar')" icon="icon-menu-sidebar" @click="$store.commit('showSidebar', !showSidebar)" />
 				</NcActions>
 			</div>
-			<h3 v-if="person && person.name" class="icon-user h3-icon">
-				{{ person.name }}
-			</h3>
 			<PersonsContent v-if="person && activeModule === 'person'" />
 			<WeightContent v-if="person && activeModule === 'weight' && person.enabledModuleWeight" />
 			<FeelingContent v-if="person && activeModule === 'feeling' && person.enabledModuleFeeling" />
@@ -18,138 +15,42 @@
 			<SmokingContent v-if="person && activeModule === 'smoking' && person.enabledModuleSmoking" />
 			<ActivitiesContent v-if="person && activeModule === 'activities' && person.enabledModuleActivities" />
 			<MedicationContent v-if="person && activeModule === 'medicine' && person.enabledModuleMedicine" />
+			<Startpage v-else />
 		</NcAppContent>
-		<NcAppSidebar
-			v-show="showSidebar"
-			v-if="person && !loading && canManage"
-			:title="person.name"
-			:subtitle="t('health', 'Created at {creationTime}', { creationTime: formatMyDate(person.insertTime) })"
-			@close="$store.commit('showSidebar', false)"
-		>
-			<NcAppSidebarTab
-				id="person"
-				:name="t('health', 'Person')"
-				icon="icon-user"
-				:order="0"
-			>
-				<PersonsSidebar />
-			</NcAppSidebarTab>
-			<NcAppSidebarTab
-				id="sharing"
-				:name="t('health', 'Share')"
-				icon="icon-share"
-				:order="0.5"
-			>
-				<SharingSidebar />
-			</NcAppSidebarTab>
-			<NcAppSidebarTab
-				v-if="person.enabledModuleWeight"
-				id="weight"
-				:name="t('health', 'Weight')"
-				icon="icon-quota"
-				:order="1"
-			>
-				<WeightSidebar />
-			</NcAppSidebarTab>
-			<NcAppSidebarTab
-				v-if="person.enabledModuleFeeling"
-				id="feeling"
-				:name="t('health', 'Feeling')"
-				icon="icon-category-monitoring"
-				:order="2"
-			>
-				<FeelingSidebar />
-			</NcAppSidebarTab>
-			<NcAppSidebarTab
-				v-if="person.enabledModuleMeasurement"
-				id="measurement"
-				:name="t('health', 'Measurement')"
-				icon="icon-home"
-				:order="3"
-			>
-				<MeasurementSidebar />
-			</NcAppSidebarTab>
-			<NcAppSidebarTab
-				v-if="person.enabledModuleSleep"
-				id="sleep"
-				:name="t('health', 'Sleep')"
-				icon="icon-download"
-				:order="4"
-			>
-				<SleepSidebar />
-			</NcAppSidebarTab>
-			<NcAppSidebarTab
-				v-if="person.enabledModuleSmoking"
-				id="smoking"
-				:name="t('health', 'Smoking')"
-				icon="icon-address"
-				:order="5"
-			>
-				<SmokingSidebar />
-			</NcAppSidebarTab>
-			<NcAppSidebarTab
-				v-if="person.enabledModuleActivities"
-				id="activities"
-				:name="t('health', 'Activities')"
-				icon="icon-upload"
-				:order="6"
-			>
-				<ActivitiesSidebar />
-			</NcAppSidebarTab>
-		</NcAppSidebar>
+		<Sidebar :loading="loading" />
 	</NcContent>
 </template>
 
 <script>
-import NcContent from '@nextcloud/vue/dist/Components/NcContent'
-import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent'
-import NcAppSidebar from '@nextcloud/vue/dist/Components/NcAppSidebar'
-import NcAppSidebarTab from '@nextcloud/vue/dist/Components/NcAppSidebarTab'
+import { NcContent, NcAppContent, NcActionButton, NcActions } from '@nextcloud/vue'
 import PersonsNavigation from './modules/persons/PersonsNavigation'
-import PersonsSidebar from './modules/persons/PersonsSidebar'
-import SharingSidebar from './modules/persons/SharingSidebar'
-import WeightSidebar from './modules/weight/WeightSidebar'
-import FeelingSidebar from './modules/feeling/FeelingSidebar'
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
-import NcActions from '@nextcloud/vue/dist/Components/NcActions'
 import WeightContent from './modules/weight/WeightContent'
 import FeelingContent from './modules/feeling/FeelingContent'
 import { mapState, mapGetters } from 'vuex'
 import PersonsContent from './modules/persons/PersonsContent'
 import SleepContent from './modules/sleep/SleepContent'
 import MeasurementContent from './modules/measurement/MeasurementContent'
-import MeasurementSidebar from './modules/measurement/MeasurementSidebar'
-import SleepSidebar from './modules/sleep/SleepSidebar'
-import moment from '@nextcloud/moment'
-import SmokingSidebar from './modules/smoking/SmokingSidebar'
 import SmokingContent from './modules/smoking/SmokingContent'
 import ActivitiesContent from './modules/activities/ActivitiesContent'
-import ActivitiesSidebar from './modules/activities/ActivitiesSidebar'
 import MedicationContent from './modules/medication/MedicationContent'
+import Sidebar from './Sidebar.vue'
+import Startpage from './Startpage.vue'
 
 export default {
 	name: 'App',
 	components: {
-		ActivitiesSidebar,
+		Startpage,
+		Sidebar,
 		MeasurementContent,
 		SleepContent,
-		MeasurementSidebar,
-		SleepSidebar,
 		NcContent,
 		NcAppContent,
-		NcAppSidebar,
-		NcAppSidebarTab,
 		NcActionButton,
 		NcActions,
 		PersonsNavigation,
-		WeightSidebar,
-		FeelingSidebar,
-		PersonsSidebar,
-		SharingSidebar,
 		WeightContent,
 		FeelingContent,
 		PersonsContent,
-		SmokingSidebar,
 		SmokingContent,
 		ActivitiesContent,
 		MedicationContent,
@@ -168,15 +69,15 @@ export default {
 		await this.$store.dispatch('loadPersons')
 		this.loading = false
 	},
-	methods: {
-		formatMyDate(v) {
-			return moment(v).format('DD.MM.YYYY')
-		},
-	},
 }
 </script>
 <style lang="scss">
 
+	.app-content {
+		padding-left: calc(var(--default-grid-baseline) * 6) !important;
+		padding-right: calc(var(--default-grid-baseline) * 5) !important;
+	}
+
 	.content-wrapper *:after, .content-wrapper *:before{
 		-webkit-box-sizing: border-box;
 		-moz-box-sizing: border-box;
@@ -188,6 +89,10 @@ export default {
 		width: 100%;
 	}
 
+	.row.first-row {
+		margin-top: calc(var(--default-grid-baseline) * 10);
+	}
+
 	.col-1 { width: 25%; }
 
 	.col-2 { width: 50%; }
@@ -198,7 +103,7 @@ export default {
 
 	[class*='col-'] {
 		float: left;
-		padding: 15px;
+		padding: 15px 15px 0;
 		// border: 1px solid red;
 		// background-color: aqua;
 	}
@@ -247,14 +152,13 @@ export default {
 		padding: 10px;
 	}
 
-	.content-menu-topright {
+	.content-menu-top-right {
 		position: fixed;
 		right: 20px;
 		z-index: 1001;
 	}
 
 	h2 {
-		margin-top: -10px;
 		font-size: x-large;
 	}