fix: visually disable/remove interactive elements in non-editable sheets

This commit is contained in:
Johannes Loher 2022-11-03 23:39:49 +01:00
parent a71a388fbf
commit 2023019d3a
6 changed files with 27 additions and 3 deletions

View file

@ -7,11 +7,29 @@
@use "../../utils/mixins"; @use "../../utils/mixins";
.ds4-check { .ds4-check {
background: transparent;
border: none;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
font-family: inherit;
font-size: inherit;
justify-content: space-between; justify-content: space-between;
line-height: inherit;
margin: 0;
&:focus {
box-shadow: none;
}
&:hover { &:hover {
@include mixins.foundry-highlight-text-shadow; @include mixins.foundry-highlight-text-shadow;
box-shadow: none;
}
&[disabled] {
cursor: auto;
&:hover {
text-shadow: none;
}
} }
} }

View file

@ -323,6 +323,7 @@ export class DS4ActorSheet extends ActorSheet<ActorSheet.Options, DS4ActorSheetD
*/ */
protected onRollCheck(event: JQuery.ClickEvent): void { protected onRollCheck(event: JQuery.ClickEvent): void {
event.preventDefault(); event.preventDefault();
event.currentTarget.blur();
const check = event.currentTarget.dataset["check"]; const check = event.currentTarget.dataset["check"];
this.actor.rollCheck(check).catch((e) => notifications.error(e, { log: true })); this.actor.rollCheck(check).catch((e) => notifications.error(e, { log: true }));
} }

View file

@ -12,7 +12,8 @@ SPDX-License-Identifier: MIT
!-- @param check-label: The label for the check !-- @param check-label: The label for the check
--}} --}}
<div class="ds4-check rollable-check" data-check="{{check-key}}" title="{{localize 'DS4.CheckTooltip' check=check-label}}"> <button class="ds4-check rollable-check" data-check="{{check-key}}"
title="{{localize 'DS4.CheckTooltip' check=check-label}}">
<span>{{check-label}}</span> <span>{{check-label}}</span>
<span>{{check-target-number}}</span> <span>{{check-target-number}}</span>
</div> </button>

View file

@ -24,7 +24,7 @@ SPDX-License-Identifier: MIT
{{/if}} {{/if}}
{{!-- image --}} {{!-- image --}}
{{> systems/ds4/templates/sheets/shared/components/rollable-image.hbs rollable=itemData.data.rollable {{> systems/ds4/templates/sheets/shared/components/rollable-image.hbs rollable=(and itemData.data.rollable @root/editable)
src=itemData.img alt=(localize "DS4.DocumentImageAltText" name=itemData.name) title=itemData.name src=itemData.img alt=(localize "DS4.DocumentImageAltText" name=itemData.name) title=itemData.name
rollableTitle=(localize "DS4.RollableImageRollableTitle" name=itemData.name) rollableClass="rollable-item"}} rollableTitle=(localize "DS4.RollableImageRollableTitle" name=itemData.name) rollableClass="rollable-item"}}

View file

@ -11,6 +11,7 @@ SPDX-License-Identifier: MIT
!-- @param title: The title to use for the link element (will be localized) !-- @param title: The title to use for the link element (will be localized)
!-- @param type: An optional property to use as data-type attribute !-- @param type: An optional property to use as data-type attribute
}} }}
{{#if @root/editable}}
<div class="ds4-add-button"> <div class="ds4-add-button">
<a class="control-{{documentType}}" title="{{localize title}}" data-action="create" {{#if type}}data-type="{{type}}" <a class="control-{{documentType}}" title="{{localize title}}" data-action="create" {{#if type}}data-type="{{type}}"
{{/if}}> {{/if}}>
@ -18,3 +19,4 @@ SPDX-License-Identifier: MIT
{{localize "DS4.UserInteractionAdd"}} {{localize "DS4.UserInteractionAdd"}}
</a> </a>
</div> </div>
{{/if}}

View file

@ -13,8 +13,10 @@ SPDX-License-Identifier: MIT
!-- @param deleteTitle: The title to use for the delete link element (will be localized) !-- @param deleteTitle: The title to use for the delete link element (will be localized)
--}} --}}
<div class="ds4-control-button-group"> <div class="ds4-control-button-group">
{{#if @root/editable}}
<a class="ds4-control-button-group__button control-{{documentType}}" data-action="edit" <a class="ds4-control-button-group__button control-{{documentType}}" data-action="edit"
title="{{localize editTitle}}"><i class="fas fa-edit"></i></a> title="{{localize editTitle}}"><i class="fas fa-edit"></i></a>
<a class="ds4-control-button-group__button control-{{documentType}}" data-action="delete" <a class="ds4-control-button-group__button control-{{documentType}}" data-action="delete"
title="{{localize deleteTitle}}"><i class="fas fa-trash"></i></a> title="{{localize deleteTitle}}"><i class="fas fa-trash"></i></a>
{{/if}}
</div> </div>