From 637b70c5d2364c51007f93e506c3d3247481a6e8 Mon Sep 17 00:00:00 2001
From: Gesina Schwalbe <gesina.schwalbe@pheerai.de>
Date: Wed, 6 Jan 2021 11:39:39 +0100
Subject: [PATCH] added invalidity hints to item side-properties

- added :invalid definition to side-properties CSS
-  defined common color for invalidity
- now using disabled input for automatically calculated properties
---
 src/scss/components/_description.scss             | 7 ++++++-
 src/scss/components/_items.scss                   | 7 ++++---
 src/scss/utils/_colors.scss                       | 1 +
 src/templates/actor/partials/talents-overview.hbs | 3 ++-
 src/templates/item/partials/description.hbs       | 4 ++--
 src/templates/item/talent-sheet.hbs               | 7 +++++++
 6 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/scss/components/_description.scss b/src/scss/components/_description.scss
index 8bd3b18b..72080381 100644
--- a/src/scss/components/_description.scss
+++ b/src/scss/components/_description.scss
@@ -22,7 +22,12 @@
             text-align: left;
             width: calc(100% - 2px);
         }
-
+        input:invalid {
+            background-color: $c-invalid-input;
+        }
+        input:disabled {
+            background-color: transparent;
+        }
         input[type="checkbox"] {
             width: auto;
             height: 100%;
diff --git a/src/scss/components/_items.scss b/src/scss/components/_items.scss
index 4dd97f78..fea61e0c 100644
--- a/src/scss/components/_items.scss
+++ b/src/scss/components/_items.scss
@@ -31,6 +31,7 @@
         input {
             border: 0;
             padding: 0;
+            background-color: transparent;
         }
 
         input[type="checkbox"] {
@@ -38,6 +39,9 @@
             height: 100%;
             margin: 0px;
         }
+        input:invalid {
+            background-color: $c-invalid-input;
+        }
     }
 
     .item-name {
@@ -54,9 +58,6 @@
         width: 2.5em;
         padding: 0;
     }
-    .item-num-val:invalid {
-        background-color: color.mix(lightcoral, $c-light-grey, 25%);
-    }
 
     .item-description {
         font-size: 75%;
diff --git a/src/scss/utils/_colors.scss b/src/scss/utils/_colors.scss
index 7a2200d1..55fb8c0a 100644
--- a/src/scss/utils/_colors.scss
+++ b/src/scss/utils/_colors.scss
@@ -2,3 +2,4 @@ $c-white: #fff;
 $c-black: #000;
 $c-light-grey: #777;
 $c-border-groove: #eeede0;
+$c-invalid-input: rgba(lightcoral, 50%);
diff --git a/src/templates/actor/partials/talents-overview.hbs b/src/templates/actor/partials/talents-overview.hbs
index 03a9335d..81839750 100644
--- a/src/templates/actor/partials/talents-overview.hbs
+++ b/src/templates/actor/partials/talents-overview.hbs
@@ -29,6 +29,7 @@
 {{#*inline "talentRankValue"}}
     <input class="item-num-val item-change" data-dtype="Number" type="number" min="0" step="1"
         {{#if (eq property 'base') }}max="{{item.data.data.talentRank.max}}"{{/if}}
+        {{disabled}}
         data-property="data.talentRank.{{property}}" value="{{lookup item.data.data.talentRank property}}"
         title="{{localize localizeString}}" />
 {{/inline}}
@@ -61,7 +62,7 @@
             {{> talentRankValue item=item property='mod' localizeString='DS4.TalentRankMod'}}
             <span> = </span>
             {{!-- derived total rank --}}
-            <span>{{item.data.data.talentRank.total}}</span>
+            {{> talentRankValue item=item property='total' localizeString='DS4.TalentRankTotal' disabled='disabled'}}
         </div>
         {{!-- description --}}
         <div class="flex4 item-description">{{{item.data.data.description}}}</div>
diff --git a/src/templates/item/partials/description.hbs b/src/templates/item/partials/description.hbs
index 1776f1f2..c1c7ae26 100644
--- a/src/templates/item/partials/description.hbs
+++ b/src/templates/item/partials/description.hbs
@@ -20,10 +20,10 @@
             <input type="text" data-dtype="String" name="data.storageLocation" value="{{data.storageLocation}}" />
         </div>
         {{else}}
-        {{localize "DS4.NotOwned"}}
+        <span>{{localize "DS4.NotOwned"}}</span>
         {{/if}}
     </div>
-    <div class="description">
+    <div class="description" title="{{localize 'DS4.Description'}}">
         {{editor content=data.description target="data.description" button=true owner=owner editable=editable}}
     </div>
 </div>
\ No newline at end of file
diff --git a/src/templates/item/talent-sheet.hbs b/src/templates/item/talent-sheet.hbs
index 400999c7..27529f06 100644
--- a/src/templates/item/talent-sheet.hbs
+++ b/src/templates/item/talent-sheet.hbs
@@ -1,3 +1,7 @@
+{{!-- ======================================================================== --}}
+{{!-- INLINE PARTIAL DEFINITIONS --}}
+{{!-- ======================================================================== --}}
+
 
 {{#*inline "talentRankSideProperty" }}
 <div class="side-property">
@@ -9,6 +13,9 @@
 {{/inline}}
 
 
+{{!-- ======================================================================== --}}
+
+
 <form class="{{cssClass}}" autocomplete="off">
     <header class="sheet-header">
         <img class="profile-img" src="{{item.img}}" data-edit="img" title="{{item.name}}" />