Merge pull request #160 from ernieayala/scratch/vtt-v10

Foundry V10 compatibility

README.md

@@ -5,7 +5,7 @@ CURRENTLY ALL MY ATTENTION IS FIXING THINGS FOR V10
 ![GitHub All Releases](https://img.shields.io/github/downloads/ernieayala/ernies-modern-layout/total?label=total%20downloads&style=flat-square)
 
 # Ernie's Modern UI
-**Compatibility:** FoundryVTT 9
+**Compatibility:** FoundryVTT 10
 
 **Systems:** Any*
 
@@ -44,14 +44,14 @@ Message me on Discord: Ernie#4453.
 ### Features Video
 [![Features Walkthrough](https://img.youtube.com/vi/bU7sclPTFQU/0.jpg)](https://www.youtube.com/watch?v=bU7sclPTFQU)
 
-### Functional Systems
+### Functional Systems (TODO: recheck this list)
 - Alien RPG
 - Call of Cthulhu 7
 - DND 5e
 - MÖRK BORG
 - Starfinder RPG
 
-### Fuctional Mods
+### Fuctional Mods (TODO: recheck this list)
 - About Time
 - Ace Library
 - Active Token Effects

js/emu-systems.js

@@ -3,5 +3,5 @@ export const SYSTEM = [
 	'CoC7',
 	'dnd5e',
 	'morkborg',
-	'sfrpg',
+	'sfrpg'
 ]

js/emu.js

@@ -109,10 +109,10 @@ function updateSettings(settings) {
 	colorTextDarker ? myRoot.style.setProperty('--color-text-darker', convertHexToRgb(colorTextDarker)) : null;
 
 	// Design
-	borderRadiusDefault ? myRoot.style.setProperty('--emu-border-radius-default', `${borderRadiusDefault}px`) : myRoot.style.setProperty('--emu-border-radius-default', `0px`);
-	borderRadiusControls ? myRoot.style.setProperty('--emu-border-radius-controls', `${borderRadiusControls}px`) : myRoot.style.setProperty('--emu-border-radius-controls', `0px`);
-	borderRadiusForms ? myRoot.style.setProperty('--emu-border-radius-forms', `${borderRadiusForms}px`) : myRoot.style.setProperty('--emu-border-radius-forms', `0px`);
-	borderRadiusImages ? myRoot.style.setProperty('--emu-border-radius-images', `${borderRadiusImages}px`) : myRoot.style.setProperty('--emu-border-radius-images', `0px`);
+	borderRadiusDefault ? myRoot.style.setProperty('--emu-border-radius-default', `${borderRadiusDefault}px`) : myRoot.style.setProperty('--emu-border-radius-default', `0`);
+	borderRadiusControls ? myRoot.style.setProperty('--emu-border-radius-controls', `${borderRadiusControls}px`) : myRoot.style.setProperty('--emu-border-radius-controls', `0`);
+	borderRadiusForms ? myRoot.style.setProperty('--emu-border-radius-forms', `${borderRadiusForms}px`) : myRoot.style.setProperty('--emu-border-radius-forms', `0`);
+	borderRadiusImages ? myRoot.style.setProperty('--emu-border-radius-images', `${borderRadiusImages}px`) : myRoot.style.setProperty('--emu-border-radius-images', `0`);
 
 	// Font Size
 	fontSizeMD ? myRoot.style.setProperty('--emu-font-size-md', `${toRem(fontSizeMD)}rem`) : myRoot.style.setProperty('--emu-font-size-md', `${toRem(14)}rem`);
@@ -186,10 +186,10 @@ class emuSettings {
 
 	static get defaultSettings() {
 		return {
-			borderRadiusDefault: '0',
-			borderRadiusControls: '0',
-			borderRadiusForms: '0',
-			borderRadiusImages: '0',
+			borderRadiusDefault: '4',
+			borderRadiusControls: '4',
+			borderRadiusForms: '4',
+			borderRadiusImages: '4',
 			colorPrimary: '#e57509',
 			colorBackground: '#293e40',
 			colorBackgroundLightest: '#e6e9eb',

module.json

@@ -1,42 +1,50 @@
 {
-	"name": "ernies-modern-layout",
-	"title": "Ernie's Modern UI",
-	"description": "A visual update for Foundry VTT UI.",
-	"version": "0.4.2",
-	"author": "Ernie",
-	"authors": [
-		{
-			"name": "Ernie",
-			"email": "teafortwo.ea@gmail.com",
-			"url": "https://github.com/ernieayala"
-		}
-	],
-	"styles": ["./css/emu.css"],
-	"esmodules": ["./js/emu.js"],
-	"languages": [
-		{
-			"lang": "en",
-			"name": "English",
-			"path": "lang/en.json"
-		},
-		{
-			"lang": "es",
-			"name": "Español",
-			"path": "lang/es.json"
-		},
-		{
-			"lang": "zh-tw",
-			"name": "正體中文",
-			"path": "lang/zh-tw.json"
-		}
-	],
-	"minimumCoreVersion": "9",
-	"compatibleCoreVersion": "9",
-	"url": "https://github.com/ernieayala/ernies-modern-layout",
-	"manifest": "https://raw.githubusercontent.com/ernieayala/ernies-modern-layout/master/module.json",
-	"download": "https://github.com/ernieayala/ernies-modern-layout/releases/latest/download/ernies-modern-layout-0.4.2.zip",
-	"license": "MIT",
-	"readme": "https://github.com/ernieayala/ernies-modern-layout",
-	"bugs": "https://github.com/ernieayala/ernies-modern-layout/issues",
-	"changelog": "https://github.com/ernieayala/ernies-modern-layout/releases"
+  "title": "Ernie's Modern UI",
+  "description": "A visual update for Foundry VTT UI.",
+  "version": "0.5.0",
+  "authors": [
+    {
+      "name": "Ernie",
+      "email": "teafortwo.ea@gmail.com",
+      "url": "https://github.com/ernieayala",
+      "flags": {}
+    }
+  ],
+  "styles": [
+    "css/emu.css"
+  ],
+  "esmodules": [
+    "js/emu.js"
+  ],
+  "languages": [
+    {
+      "lang": "en",
+      "name": "English",
+      "path": "lang/en.json",
+      "flags": {}
+    },
+    {
+      "lang": "es",
+      "name": "Español",
+      "path": "lang/es.json",
+      "flags": {}
+    },
+    {
+      "lang": "zh-tw",
+      "name": "正體中文",
+      "path": "lang/zh-tw.json",
+      "flags": {}
+    }
+  ],
+  "url": "https://github.com/ernieayala/ernies-modern-layout",
+  "manifest": "https://raw.githubusercontent.com/ernieayala/ernies-modern-layout/master/module.json",
+  "download": "https://github.com/ernieayala/ernies-modern-layout/releases/latest/download/ernies-modern-layout-0.5.0.zip",
+  "license": "MIT",
+  "readme": "https://github.com/ernieayala/ernies-modern-layout",
+  "bugs": "https://github.com/ernieayala/ernies-modern-layout/issues",
+  "changelog": "https://github.com/ernieayala/ernies-modern-layout/releases",
+  "id": "ernies-modern-layout",
+  "compatibility": {
+    "minimum": "10"
+  }
 }

package.json

@@ -12,7 +12,7 @@
 		"start": "node-sass --watch scss -o css",
 		"build": "node-sass scss -o css & postcss css/emu.css -u autoprefixer --no-map -d css/"
 	},
-	"version": "0.4.2",
+	"version": "0.5.0",
 	"devDependencies": {
 		"autoprefixer": "9.1.0",
 		"cssnano": "4.1.10",

scss/_init.scss

@@ -83,6 +83,10 @@ html.-emu-layout.-emu-compact {
 	--emu-space-sidebar: #{to-rem(286px)};
 }
 
+html.-emu-layout {
+	font-size: $global-font-size-lg !important;
+}
+
 body {
 	background-color: color("background-darkest");
 	background-image: $global-image-background-darkest;

scss/base/_base-form-elements.scss

@@ -41,3 +41,14 @@ fieldset {
 		padding: 0;
 	}
 }
+
+figure figcaption {
+	font-weight: 700;
+	margin-block-start: $global-space-base;
+	padding: 0 $global-space-sm;
+	text-align: center;
+
+	&:empty {
+		display: none;
+	}
+}

scss/base/_base-forms.scss

@@ -230,6 +230,12 @@ form {
 			margin: 0;
 		}
 
+		.checkbox-label {
+			display: flex;
+			flex-direction: column;
+			padding: 0;
+		}
+
 		label {
 			&.checkbox {
 				@include layout {
@@ -264,4 +270,24 @@ form {
 			}
 		}
 	}
+
+	label.checkbox {
+		@include layout {
+			align-items: center;
+			display: inline-flex;
+			gap: $global-space-sm;
+			height: auto;
+			line-height: initial;
+		}
+	}
+
+	.trait-list {
+		display: flex;
+		flex-direction: column;
+		gap: $global-space-base;
+
+		li {
+			display: flex;
+		}
+	}
 }

scss/components/_players-connected.scss

@@ -51,6 +51,7 @@
 		transition: t(color, "link");
 
 		@include layout {
+			align-items: center;
 			cursor: pointer;
 			display: flex;
 			font-size: $global-font-size-md;

scss/components/_scene-controls.scss

@@ -5,6 +5,8 @@
 		gap: $global-space-base;
 		height: 0;
 		max-width: 100%;
+		overflow: hidden;
+		padding: 0;
 		padding-block-start: $global-space-sm;
 		padding-inline-start: $global-space-sm;
 		position: relative;
@@ -134,6 +136,7 @@
 			&.toggle {
 				background-color: color("background-lightest");
 				background-image: $global-image-background-controls;
+				border: none;
 				color: color("text");
 
 				&:hover {

scss/components/_sidebar-chat.scss

@@ -1,6 +1,6 @@
 #sidebar,
 .sidebar-popout {
-	#chat {
+	[data-tab="chat"] {
 		#chat-log {
 			flex: 1 1 auto;
 			height: auto;

scss/components/_sidebar-combat.scss

@@ -1,15 +1,15 @@
 #sidebar,
 .sidebar-popout {
 	#combat {
-		#combat-round {
+		.combat-tracker-header {
 			@extend %panel-block;
 
 			@include layout {
 				flex-direction: column;
-				gap: $global-space-base;
 			}
 
-			.encounters {
+			.encounters,
+			.encounter-controls {
 				@include layout {
 					align-items: center;
 					display: flex;

scss/components/_tooltip.scss

@@ -0,0 +1,27 @@
+#tooltip {
+	@include layout {
+		align-items: center;
+		border-radius: $global-border-radius-default;
+		display: inline-flex;
+		font-family: inherit;
+		font-size: $global-font-size-md;
+		line-height: 1.2;
+		max-width: 320px;
+		opacity: 0;
+		padding: $global-space-sm $global-space-md;
+		pointer-events: none;
+		transition: t(opacity visibility, "shift");
+		width: max-content;
+	}
+
+	background: color("background-darkest", 0.9);
+	border: none;
+	box-shadow: 0 0 4px color("black");
+	color: color("text-lightest");
+
+	&.active {
+		@include layout {
+			opacity: 1;
+		}
+	}
+}

scss/components/_window-app.scss

@@ -62,6 +62,17 @@
 				margin: 0;
 				position: relative;
 			}
+
+			.document-id-link {
+				@include layout {
+					margin-inline-start: $global-space-sm;
+					opacity: 0.8;
+
+					i {
+						margin: 0;
+					}
+				}
+			}
 		}
 
 		> a,

scss/emu.scss

@@ -5,7 +5,7 @@ body#{$emu} {
 	// Base
 	.dialog,
 	#sidebar,
-	.window-app:not([id*="actor-"]):not([id*="item-"]) {
+	.window-app:not([id*="Actor-"]):not([id*="Item-"]) {
 		@import "./base/base-button";
 		@import "./base/base-directory";
 		@import "./base/base-form-elements";
@@ -31,6 +31,7 @@ body#{$emu} {
 	@import "./components/players-connected";
 	@import "./components/scene-controls";
 	@import "./components/scene-navigation";
+	@import "./components/tooltip";
 	@import "./components/ui-layout";
 	@import "./components/window-app";
 
@@ -52,13 +53,17 @@ body#{$emu} {
 	@import "./sheets/chat-popout";
 	@import "./sheets/client-settings";
 	@import "./sheets/filepicker";
+	@import "./sheets/journal-show";
 	@import "./sheets/journalentry-sheet";
+	@import "./sheets/journalentrypage-sheet";
 	@import "./sheets/macro-config";
 	@import "./sheets/module-management";
+	@import "./sheets/package-configuration";
 	@import "./sheets/rolltable-sheet";
 	@import "./sheets/template-config";
 	@import "./sheets/trait-selector";
-	@import "./sheets/user-sheet";
+	@import "./sheets/user-config";
+	@import "./sheets/user-sheet"; // depricated
 
 	// Module Compatibility
 	@import "./module-compatibility/always-hp";

scss/module-compatibility/_better-roll-5e.scss

@@ -1,5 +1,5 @@
 .window-app[id*="chat-popout-"],
-#sidebar #chat #chat-log {
+#sidebar [data-tab="chat"] #chat-log {
 	.chat-message .chat-card {
 		.die-result-overlay-br {
 			@include layout {

scss/module-compatibility/_combat-focus.scss

@@ -1,5 +1,5 @@
 #sidebar {
-	#chat.small-chat {
+	[data-tab="chat"].small-chat {
 		+ #combat {
 			@include layout {
 				flex: 1;

scss/module-compatibility/_dice-tray.scss

@@ -1,6 +1,6 @@
 #sidebar,
 .sidebar-popout {
-	#chat {
+	[data-tab="chat"] {
 		section.dice-tray {
 			@extend %panel-block;
 			border-block-start: b("border");

scss/module-compatibility/_midi-qol.scss

@@ -1,6 +1,6 @@
 #sidebar,
 .sidebar-popout {
-	#chat {
+	[data-tab="chat"] {
 		#chat-log {
 			.midi-qol-item-card.chat-card {
 				.card-buttons {

scss/module-compatibility/_tabbed-chat-log.scss

@@ -1,6 +1,6 @@
 #sidebar,
 .sidebar-popout {
-	#chat {
+	[data-tab="chat"] {
 		.tabbedchatlog {
 			border-radius: none;
 			box-shadow: none;