Setup journal view and remove unnecessary code from mainscreen.

v2/index.html

@@ -51,6 +51,7 @@
 	<script src="js/screens/settings-myprivacy.js"></script>
 	<script src="js/screens/settings-languagebox.js"></script>
 	<script src="js/screens/settings.js"></script>
+	<script src="js/screens/journal.js"></script>
 	<script src="js/screens/neighborhood.js"></script>
 	<script src="js/screens/homescreen.js"></script>
 	<script src="js/screens/listview.js"></script>

v2/js/screens/homescreen.js

@@ -48,6 +48,7 @@ const HomeScreen = {
 									:x="canvasCenter.x - constant.sizeJournal/2"
 									:y="canvasCenter.y + constant.sizeOwner - constant.sizeJournal + canvasCenter.jdeltay"
 									isNative="true"
+									v-on:click="$emit('openJournal')"
 								></icon>
 							</transition>
 							<icon
@@ -98,7 +99,7 @@ const HomeScreen = {
 		prompt: Prompt,
 	},
 
-	emits: ['openSettings'],
+	emits: ['openSettings', 'openJournal'],
 
 	data() {
 		return {

v2/js/screens/journal.js

@@ -0,0 +1,104 @@
+const Journal = {
+	name: "Journal",
+	template: `
+	<div ref="journal-view" class="journal-view">
+		Journal View
+		<icon
+			class="toolbutton"
+			id="view_home_button"
+			svgfile="./icons/view-radial.svg" 
+			:color="768"
+			:size="47"
+			:title="$t('FavoritesView')"
+			isNative="true"
+			@click="$emit('closeJournal')"
+		></icon>
+	</div>
+`,
+
+	components: {
+		icon: Icon,
+		popup: Popup,
+	},
+
+	emits: ["closeJournal"],
+
+	data() {
+		return {
+			journal: [],
+		};
+	},
+
+	created() {
+		sugarizer.modules.journal.load();
+		this.journal = sugarizer.modules.journal.get();
+		console.log(this.journal);
+		this.updateJournal();
+	},
+
+	methods: {
+		updateJournal() {},
+		showPopupTimer(e, iconRef, data) {
+			if (this.popupTimer != null) {
+				window.clearTimeout(this.popupTimer);
+			}
+			this.popupTimer = window.setTimeout(
+				this.showPopup.bind(this),
+				this.constant.timerPopupDuration,
+				e,
+				iconRef,
+				data
+			);
+		},
+		showPopup(e, iconRef, popupData) {
+			if (this.$refs.popup.isShown) this.removePopup(e); //remove before updating iconRef
+
+			this.popupIconRef = iconRef;
+			const offset = 6;
+			e.clientX += offset;
+			e.clientY += offset;
+
+			this.popupItem = popupData;
+			this.$refs.popup.show(e.clientX, e.clientY);
+		},
+
+		removePopupTimer(e) {
+			if (this.popupTimer != null) {
+				window.clearTimeout(this.popupTimer);
+			}
+
+			this.popupTimer = window.setTimeout(
+				this.removePopup.bind(this),
+				this.constant.timerPopupDuration,
+				e
+			);
+		},
+		removePopup(e) {
+			const popupIcon = this.$refs[this.popupIconRef]?.[0];
+			if (!popupIcon) this.hidePopup();
+			else if (
+				!this.$refs.popup.isCursorInside(e.clientX, e.clientY) &&
+				!popupIcon.isCursorInside(e.clientX, e.clientY)
+			) {
+				this.hidePopup();
+			}
+		},
+
+		hidePopup() {
+			this.$refs.popup.hide();
+			this.popupTimer = null;
+			this.popupItem = null;
+		},
+
+		onPopupItemClick(itemId) {
+			const popupData = this.$refs.popup.item;
+			const handlerFunc = popupData?.handlers?.[itemId];
+			if (handlerFunc) {
+				handlerFunc();
+				this.hidePopup();
+			}
+		},
+
+		filterJournal() {},
+	},
+};

v2/js/screens/mainscreen.js

@@ -2,7 +2,7 @@
  @desc This is the main screen component */
 const MainScreen = {
 	name: 'MainScreen',
-	template: ` <div class="toolbar ">
+	template: `<div class="toolbar" v-show="screentype !== 'journal'">
 					<div class="tool_leftitems">
 						<searchfield
 							ref="searchfield"
@@ -83,8 +83,9 @@ const MainScreen = {
 					<div id="canvas" ref="canvas" class="sugarizer-desktop">
 						<settings ref="settings" :buddycolor=buddycolor :username="username"></settings>
 						<listview v-if="screentype==='list'" :filter="filter" @clear-searchfield = "clearSearchField"/>
-						<homescreen ref="home" @open-settings="displaySettings" v-else-if="screentype==='home'" :filter="filter" />
+						<homescreen ref="home" @open-journal="changeView('journal')" @open-settings="displaySettings" v-else-if="screentype==='home'" :filter="filter" />
 						<neighborhood @open-settings="displayServerSettings" v-else-if="screentype==='neighborhood'" :filter="filter" />
+						<journal @close-journal="changeView('home')" v-else-if="screentype==='journal'"/>
 					</div>
 					`,
 	components: {
@@ -93,6 +94,7 @@ const MainScreen = {
 		'listview': ListView,
 		'homescreen': HomeScreen,
 		"neighborhood": Neighborhood,
+		"journal": Journal,
 		'settings': Settings,
 	},
 
@@ -125,15 +127,6 @@ const MainScreen = {
 		vm.offline = !sugarizer.modules.user.isConnected();
 		await this.initializeActivities();
 		this.initView();
-		document.getElementById(`view_${this.screentype}_button`).classList.add('active');
-	},
-
-	watch: {
-		screentype: function (newVal, oldVal) {
-			if (!oldVal) return;
-			document.getElementById(`view_${newVal}_button`).classList.add('active');
-			document.getElementById(`view_${oldVal}_button`).classList.remove('active');
-		}
 	},
 
 	methods: {