Merge Issue#20 bugfix

Issue#20 bugfix

Author: Vaccarini-Lorenzo

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "ical-obsidian-sync",
 	"name": "iCalSync",
-	"version": "1.1.4",
+	"version": "1.1.5",
 	"minAppVersion": "0.15.0",
 	"description": "Synchronize iCalendar with your notes",
 	"author": "Vaccarini Lorenzo",

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "obsidian-sample-plugin",
-	"version": "1.1.4",
+	"version": "1.1.5",
 	"description": "This is a sample plugin for Obsidian (https://obsidian.md)",
 	"main": "main.js",
 	"scripts": {

src/plugin/calendarView.ts

@@ -19,18 +19,19 @@ export class CalendarView extends MarkdownRenderChild {
 
 	onload() {
 		const wrapper = this.containerEl.createEl("div");
-		wrapper.addClass("tableWrapper")
+		wrapper.addClass("icalTableWrapper")
 		const table = wrapper.createEl("table");
+		table.addClass("icalTable");
 		this.generateHeaders(table);
 		this.generateRows(table)
 		this.generateHeaders(table);
 		this.containerEl.replaceWith(table);
 	}
 
 	private generateHeaders(table: HTMLTableElement){
-		table.createEl("th")
+		table.createEl("th").addClass("icalTh");
 		for (let column = 0; column < this.calendarViewData.numOfCols; column++){
-			table.createEl("th")
+			table.createEl("th").addClass("icalTh")
 		}
 	}
 
@@ -48,6 +49,7 @@ export class CalendarView extends MarkdownRenderChild {
 	private initRow(table: HTMLElement, date: Date, needsLabel: boolean): HTMLElement{
 		const row = table.createEl("tr");
 		const leftLabel = row.createEl("td");
+		leftLabel.addClass("icalTd");
 		if (!needsLabel) return row;
 		leftLabel.innerText  = date.toLocaleDateString();
 		date.setDate(date.getDate() + 1);
@@ -63,19 +65,20 @@ export class CalendarView extends MarkdownRenderChild {
 
 			calendarEventDetails.forEach(event => {
 				for (let i = columnIndex; i < event.fromCol; i++){
-					row.createEl("td");
+					row.createEl("td").addClass("icalTd");
 				}
 				const eventView = row.createEl("td");
 				eventView.innerText = event.title;
 				eventView.addClass(this.getPaletteClass());
-				eventView.addClass("eventBox")
+				eventView.addClass("icalEventBox");
+				eventView.addClass("icalTd");
 				eventView.setAttr("colspan", event.toCol - event.fromCol)
 				columnIndex = event.toCol;
 			})
 		}
 
 		for (let i = columnIndex; i < this.calendarViewData.numOfCols; i++){
-			row.createEl("td");
+			row.createEl("td").addClass("icalTd");
 		}
 	}
 

src/plugin/highlightWidget.ts

@@ -16,63 +16,63 @@ export class HighlightWidget extends WidgetType {
 	}
 
 	toDOM(view: EditorView): HTMLElement {
-		const navUl = document.createElement("ul");
-		navUl.addClass("navUL");
+		const icalNavUL = document.createElement("ul");
+		icalNavUL.addClass("icalNavUL");
 
-		const mark = navUl.createEl("span");
+		const mark = icalNavUL.createEl("span");
 		mark.addClass(this.markClass);
 		mark.innerText = this.sentenceValue;
 
 		const bubble = mark.createEl("div");
-		bubble.addClass("bubblePosition");
-		bubble.addClass("hoverBubble");
+		bubble.addClass("icalBubblePosition");
+		bubble.addClass("icalHoverBubble");
 
 		const grid = bubble.createEl("div")
-		grid.addClass("gridContainer");
+		grid.addClass("icalGridContainer");
 
 		const titleIcon = grid.createEl("span");
-		titleIcon.addClass("iconBar");
+		titleIcon.addClass("icalIconBar");
 		titleIcon.innerText = " 📕 ";
 
 		const titleContent = grid.createEl("span");
-		titleContent.addClass("eventDataBar");
+		titleContent.addClass("icalEventDataBar");
 		titleContent.innerText = ` ${this.eventDetails.title} `;
 
 		const dateIcon = grid.createEl("span");
-		dateIcon.addClass("iconBar");
+		dateIcon.addClass("icalIconBar");
 		dateIcon.innerText = " 📅 ";
 
 		const dateContent = grid.createEl("span");
-		dateContent.addClass("eventDataBar");
+		dateContent.addClass("icalEventDataBar");
 		dateContent.innerText = ` ${this.eventDetails.dateString} `;
 
 		if (this.eventDetails.hasTimeDetails){
 			const timeIcon = grid.createEl("span");
-			timeIcon.addClass("iconBar");
+			timeIcon.addClass("icalIconBar");
 			timeIcon.innerText = " 🕑 ";
 
 			const timeContent = grid.createEl("span");
-			timeContent.addClass("eventDataBar");
+			timeContent.addClass("icalEventDataBar");
 			timeContent.innerText = ` ${this.eventDetails.timeString} `;
 		}
 
 		const row = bubble.createEl("div");
-		row.addClass("gridRow");
+		row.addClass("icalGridRow");
 
 		const buttonSync = row.createEl("button")
 		buttonSync.innerText = "Sync";
-		buttonSync.addClass("syncButton");
+		buttonSync.addClass("icalSyncButton");
 		buttonSync.onClickEvent(() => {
 			this.syncCallback(true);
 		})
 
 		const buttonNoSync = row.createEl("button")
-		buttonNoSync.addClass("syncButton");
+		buttonNoSync.addClass("icalSyncButton");
 		buttonNoSync.innerText = "Ignore";
 		buttonNoSync.onClickEvent(() => {
 			this.syncCallback(false);
 		})
 
-		return navUl;
+		return icalNavUL;
 	}
 }

styles.css

@@ -60,19 +60,19 @@
 }
 
 /* Navigation list */
-ul.navUL {
+ul.icalNavUL {
 	margin: 0;
 	padding: 0;
 	display: inline-block;
 }
 
-ul.navUL span {
+ul.icalNavUL span {
 	display: block;
 	position: relative;
 	text-decoration: none;
 }
 
-.hoverBubble {
+.icalHoverBubble {
 	font-size: 70%;
 	width: max-content;
 	background: #d5d5d5;
@@ -89,28 +89,28 @@ ul.navUL span {
 	justify-content: center;
 }
 
-.hoverBubble p {
+.icalHoverBubble p {
 	text-align: center;
 	display: flex;
 	flex-direction: column;
 	padding: 5px;
 }
 
-.hoverBubble button {
+.icalHoverBubble button {
 	display: block;
 	margin: 0 auto;
 	text-align: center;
 }
 
-.bubblePosition {
+.icalBubblePosition {
 	top: 100%;
 	height: inherit;
 	left: 0;
 	bottom: auto;
 }
 
-.hoverBubble:after,
-.bubblePosition:after {
+.icalHoverBubble:after,
+.icalBubblePosition:after {
 	border: 9px solid transparent;
 	border-top-color: #d5d5d5;
 	top: -15px;
@@ -124,56 +124,56 @@ ul.navUL span {
 	rotate: 180deg;
 }
 
-.gridContainer {
+.icalGridContainer {
 	/*border:1px solid #000;*/
 	display: grid;
 	grid-template-columns: auto auto;
 	grid-gap: 10px;
 }
 
 /* Bubble hover */
-ul.navUL span:hover .hoverBubble {
+ul.icalNavUL span:hover .icalHoverBubble {
 	opacity: 1;
 	visibility: visible;
 	transition: all 0.25s;
 	z-index: 5;
 }
 
-.gridRow {
+.icalGridRow {
 	/*	border:1px solid #000; */
 	display: grid;
 	grid-template-columns: auto auto;
 	padding: 10px 0 0 0;
 }
 
-.syncButton.syncButton {
+.icalSyncButton.icalSyncButton {
 	padding: 0;
 	text-align: center;
 	background-color: #1c1c1c;
 	color: #d5d5d5;
 	margin: 5%;
 }
 
-.iconBar {
+.icalIconBar {
 	/*border:1px solid #000;*/
 	font-size: 170%;
 	margin: -5px;
 	align-self: center;
 }
 
-.eventDataBar {
+.icalEventDataBar {
 	font-size: 85%;
 	align-self: center;
 	white-space: initial;
 }
 
-.tableWrapper {
+.icalTableWrapper {
 	width: 100rem;
 	overflow: auto;
 }
 
 
-table {
+.icalTable {
 	border-top: transparent;
 	border-bottom: white;
 	border-left: transparent;
@@ -182,7 +182,7 @@ table {
 	max-width: 100px;
 }
 
-th {
+.icalTh {
 	border-top: transparent;
 	border-bottom: white;
 	border-left: transparent!important;
@@ -191,7 +191,7 @@ th {
 	font-weight: normal;
 }
 
-td {
+.icalTd {
 	border-top: transparent!important;
 	border-bottom: white;
 	border-left: transparent!important;
@@ -201,11 +201,11 @@ td {
 	transition: transform .5s ease;
 }
 
-td:hover {
+.icalTd:hover {
 	transform: scale(1.12);
 }
 
-.eventBox {
+.icalEventBox {
 	box-shadow: 0 2.5rem 2rem -2rem hsl(200 50% 20% / 40%);
 }