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
This commit is contained in:
Gesina Schwalbe 2021-01-06 11:39:39 +01:00
parent 150a0ea487
commit 637b70c5d2
6 changed files with 22 additions and 7 deletions

View file

@ -22,7 +22,12 @@
text-align: left; text-align: left;
width: calc(100% - 2px); width: calc(100% - 2px);
} }
input:invalid {
background-color: $c-invalid-input;
}
input:disabled {
background-color: transparent;
}
input[type="checkbox"] { input[type="checkbox"] {
width: auto; width: auto;
height: 100%; height: 100%;

View file

@ -31,6 +31,7 @@
input { input {
border: 0; border: 0;
padding: 0; padding: 0;
background-color: transparent;
} }
input[type="checkbox"] { input[type="checkbox"] {
@ -38,6 +39,9 @@
height: 100%; height: 100%;
margin: 0px; margin: 0px;
} }
input:invalid {
background-color: $c-invalid-input;
}
} }
.item-name { .item-name {
@ -54,9 +58,6 @@
width: 2.5em; width: 2.5em;
padding: 0; padding: 0;
} }
.item-num-val:invalid {
background-color: color.mix(lightcoral, $c-light-grey, 25%);
}
.item-description { .item-description {
font-size: 75%; font-size: 75%;

View file

@ -2,3 +2,4 @@ $c-white: #fff;
$c-black: #000; $c-black: #000;
$c-light-grey: #777; $c-light-grey: #777;
$c-border-groove: #eeede0; $c-border-groove: #eeede0;
$c-invalid-input: rgba(lightcoral, 50%);

View file

@ -29,6 +29,7 @@
{{#*inline "talentRankValue"}} {{#*inline "talentRankValue"}}
<input class="item-num-val item-change" data-dtype="Number" type="number" min="0" step="1" <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}} {{#if (eq property 'base') }}max="{{item.data.data.talentRank.max}}"{{/if}}
{{disabled}}
data-property="data.talentRank.{{property}}" value="{{lookup item.data.data.talentRank property}}" data-property="data.talentRank.{{property}}" value="{{lookup item.data.data.talentRank property}}"
title="{{localize localizeString}}" /> title="{{localize localizeString}}" />
{{/inline}} {{/inline}}
@ -61,7 +62,7 @@
{{> talentRankValue item=item property='mod' localizeString='DS4.TalentRankMod'}} {{> talentRankValue item=item property='mod' localizeString='DS4.TalentRankMod'}}
<span> = </span> <span> = </span>
{{!-- derived total rank --}} {{!-- derived total rank --}}
<span>{{item.data.data.talentRank.total}}</span> {{> talentRankValue item=item property='total' localizeString='DS4.TalentRankTotal' disabled='disabled'}}
</div> </div>
{{!-- description --}} {{!-- description --}}
<div class="flex4 item-description">{{{item.data.data.description}}}</div> <div class="flex4 item-description">{{{item.data.data.description}}}</div>

View file

@ -20,10 +20,10 @@
<input type="text" data-dtype="String" name="data.storageLocation" value="{{data.storageLocation}}" /> <input type="text" data-dtype="String" name="data.storageLocation" value="{{data.storageLocation}}" />
</div> </div>
{{else}} {{else}}
{{localize "DS4.NotOwned"}} <span>{{localize "DS4.NotOwned"}}</span>
{{/if}} {{/if}}
</div> </div>
<div class="description"> <div class="description" title="{{localize 'DS4.Description'}}">
{{editor content=data.description target="data.description" button=true owner=owner editable=editable}} {{editor content=data.description target="data.description" button=true owner=owner editable=editable}}
</div> </div>
</div> </div>

View file

@ -1,3 +1,7 @@
{{!-- ======================================================================== --}}
{{!-- INLINE PARTIAL DEFINITIONS --}}
{{!-- ======================================================================== --}}
{{#*inline "talentRankSideProperty" }} {{#*inline "talentRankSideProperty" }}
<div class="side-property"> <div class="side-property">
@ -9,6 +13,9 @@
{{/inline}} {{/inline}}
{{!-- ======================================================================== --}}
<form class="{{cssClass}}" autocomplete="off"> <form class="{{cssClass}}" autocomplete="off">
<header class="sheet-header"> <header class="sheet-header">
<img class="profile-img" src="{{item.img}}" data-edit="img" title="{{item.name}}" /> <img class="profile-img" src="{{item.img}}" data-edit="img" title="{{item.name}}" />