From e51376dc02c458c9d97a36d2f3f0690a7dc969ab Mon Sep 17 00:00:00 2001
From: Johannes Loher <johannes.loher@fg4f.de>
Date: Thu, 29 Oct 2020 18:49:51 +0100
Subject: [PATCH] add item type to weapon sheet
---
css/ds4.css | 49 +++++++++++++++++++++-------
lang/en.json | 4 ++-
module/config.js | 9 +++++
module/ds4.js | 2 +-
scss/components/_basic_property.scss | 17 ++++++----
scss/components/_description.scss | 16 ++++++++-
scss/components/_forms.scss | 30 +++++++++--------
scss/components/_tabs.scss | 4 +--
scss/utils/_colors.scss | 4 ++-
templates/item/weapon-sheet.hbs | 5 +--
10 files changed, 101 insertions(+), 39 deletions(-)
diff --git a/css/ds4.css b/css/ds4.css
index aacb925..c0ddd65 100644
--- a/css/ds4.css
+++ b/css/ds4.css
@@ -271,15 +271,33 @@
.ds4 header.sheet-header h1.charname {
height: 50px;
padding: 0px;
- margin: 5px 0;
+ margin: 5px 10px 5px 0;
border-bottom: 0;
font-family: "Wood Stamp", sans-serif;
+ display: block;
}
.ds4 header.sheet-header h1.charname input {
width: 100%;
height: 100%;
margin: 0;
+ border: none;
+ background-color: transparent;
+}
+
+.ds4 header.sheet-header h2.item-type {
+ font-family: "Wood Stamp", sans-serif;
+ display: block;
+ height: 50px;
+ padding: 0px;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 0px;
+ flex: 0 0 0;
+ color: #777;
+ border: none;
+ line-height: 50px;
+ margin: 5px 0;
+ text-align: right;
}
.ds4 .sheet-tabs {
@@ -289,24 +307,21 @@
}
.ds4 .sheet-body,
-.ds4 .sheet-body .tab,
-.ds4 .sheet-body .tab .editor {
+.ds4 .sheet-body .tab {
height: 100%;
}
-.ds4 .tox .tox-editor-container {
- background: #fff;
+.ds4 .basic-properties {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 100%;
+ flex: 0 0 100%;
}
-.ds4 .tox .tox-edit-area {
- padding: 0 8px;
-}
-
-.ds4 .basic-property .basic-property-label {
+.ds4 .basic-properties .basic-property .basic-property-label {
font-weight: bold;
}
-.ds4 .basic-property .basic-property-select {
+.ds4 .basic-properties .basic-property .basic-property-select {
display: block;
width: 100%;
}
@@ -402,3 +417,15 @@
flex: 1;
width: calc(100% - 2px);
}
+
+.ds4 .sheet-body .tab .editor {
+ height: 100%;
+}
+
+.ds4 .tox .tox-editor-container {
+ background: #fff;
+}
+
+.ds4 .tox .tox-edit-area {
+ padding: 0 8px;
+}
diff --git a/lang/en.json b/lang/en.json
index 683e2ba..f600796 100644
--- a/lang/en.json
+++ b/lang/en.json
@@ -17,5 +17,7 @@
"DS4.ItemAvailabilityVilage": "Village",
"DS4.ItemAvailabilityCity": "City",
"DS4.ItemAvailabilityElves": "Elves",
- "DS4.ItemAvailabilityDwarves": "Dwarves"
+ "DS4.ItemAvailabilityDwarves": "Dwarves",
+ "DS4.ItemTypeWeapon": "Weapon",
+ "DS4.ItemTypeEquipment": "Equipment"
}
diff --git a/module/config.js b/module/config.js
index 683f85d..acf5ea0 100644
--- a/module/config.js
+++ b/module/config.js
@@ -30,3 +30,12 @@ DS4.itemAvailabilities = {
elves: "DS4.ItemAvailabilityElves",
dwarves: "DS4.ItemAvailabilityDwarves",
};
+
+/**
+ * * Define the set of item types
+ * @type {Object}
+ */
+DS4.itemTypes = {
+ weapon: "DS4.ItemTypeWeapon",
+ equipment: "DS4.ItemTypeEquipment",
+};
diff --git a/module/ds4.js b/module/ds4.js
index d6989af..8ef0fba 100644
--- a/module/ds4.js
+++ b/module/ds4.js
@@ -37,7 +37,7 @@ Hooks.once("init", async function () {
*/
Hooks.once("setup", function () {
// Localize CONFIG objects once up-front
- const toLocalize = ["attackTypes", "itemAvailabilities"];
+ const toLocalize = ["attackTypes", "itemAvailabilities", "itemTypes"];
// Exclude some from sorting where the default order matters
const noSort = [];
diff --git a/scss/components/_basic_property.scss b/scss/components/_basic_property.scss
index 1ae7b0b..b64aae1 100644
--- a/scss/components/_basic_property.scss
+++ b/scss/components/_basic_property.scss
@@ -1,10 +1,13 @@
-.basic-property {
- .basic-property-label {
- font-weight: bold;
- }
+.basic-properties {
+ flex: 0 0 100%;
+ .basic-property {
+ .basic-property-label {
+ font-weight: bold;
+ }
- .basic-property-select {
- display: block;
- width: 100%;
+ .basic-property-select {
+ display: block;
+ width: 100%;
+ }
}
}
diff --git a/scss/components/_description.scss b/scss/components/_description.scss
index 291ba71..789f3e2 100644
--- a/scss/components/_description.scss
+++ b/scss/components/_description.scss
@@ -2,7 +2,7 @@
flex: 0 0 150px;
margin: 5px 5px 5px 0;
padding-right: 5px;
- border-right: 2px groove #eeede0;
+ border-right: 2px groove $c-border-groove;
.side-property {
margin: 2px 0;
@@ -23,3 +23,17 @@
}
}
}
+
+.sheet-body .tab .editor {
+ height: 100%;
+}
+
+.tox {
+ .tox-editor-container {
+ background: $c-white;
+ }
+
+ .tox-edit-area {
+ padding: 0 8px;
+ }
+}
diff --git a/scss/components/_forms.scss b/scss/components/_forms.scss
index 0e39927..8f4747f 100644
--- a/scss/components/_forms.scss
+++ b/scss/components/_forms.scss
@@ -26,14 +26,29 @@ header.sheet-header {
h1.charname {
height: 50px;
padding: 0px;
- margin: $header-top-margin 0;
+ margin: $header-top-margin 10px $header-top-margin 0;
border-bottom: 0;
input {
width: 100%;
height: 100%;
margin: 0;
+ border: none;
+ background-color: transparent;
}
font-family: $font-heading;
+ display: block;
+ }
+ h2.item-type {
+ font-family: $font-heading;
+ display: block;
+ height: 50px;
+ padding: 0px;
+ flex: 0 0 0;
+ color: $c-light-grey;
+ border: none;
+ line-height: 50px;
+ margin: $header-top-margin 0;
+ text-align: right;
}
}
@@ -42,17 +57,6 @@ header.sheet-header {
}
.sheet-body,
-.sheet-body .tab,
-.sheet-body .tab .editor {
+.sheet-body .tab {
height: 100%;
}
-
-.tox {
- .tox-editor-container {
- background: $c-white;
- }
-
- .tox-edit-area {
- padding: 0 8px;
- }
-}
diff --git a/scss/components/_tabs.scss b/scss/components/_tabs.scss
index c78e37d..aa6aa48 100644
--- a/scss/components/_tabs.scss
+++ b/scss/components/_tabs.scss
@@ -1,7 +1,7 @@
nav.tabs {
height: 40px;
- border-top: 2px groove #eeede0;
- border-bottom: 2px groove #eeede0;
+ border-top: 2px groove $c-border-groove;
+ border-bottom: 2px groove $c-border-groove;
.item {
line-height: 40px;
diff --git a/scss/utils/_colors.scss b/scss/utils/_colors.scss
index a119f26..ce8c1bb 100644
--- a/scss/utils/_colors.scss
+++ b/scss/utils/_colors.scss
@@ -1,2 +1,4 @@
$c-white: #fff;
-$c-black: #000;
\ No newline at end of file
+$c-black: #000;
+$c-light-grey: #777;
+$c-border-groove: #eeede0;
\ No newline at end of file
diff --git a/templates/item/weapon-sheet.hbs b/templates/item/weapon-sheet.hbs
index 6f46beb..fab7812 100644
--- a/templates/item/weapon-sheet.hbs
+++ b/templates/item/weapon-sheet.hbs
@@ -1,9 +1,10 @@
<form class="{{cssClass}}" autocomplete="off">
<header class="sheet-header">
<img class="profile-img" src="{{item.img}}" data-edit="img" title="{{item.name}}" />
- <div class="header-fields">
+ <div class="header-fields flexrow">
<h1 class="charname"><input name="name" type="text" value="{{item.name}}" placeholder="Name" /></h1>
- <div class="grid grid-3col">
+ <h2 class="item-type">{{localize (lookup config.itemTypes item.type)}}</h2>
+ <div class="grid grid-3col basic-properties">
<div class="basic-property">
<label class="basic-property-label">{{localize "DS4.AttackType"}}</label>
<select class="basic-property-select" name="data.attackType" data-type="String">