0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-24 23:48:13 -05:00

Added "incomplete" state for button card

refs https://github.com/TryGhost/Team/issues/1210

- when rendered, show button as greyed out if either text or url is missing
  - show "Add button URL" in tooltip if the url is missing
  - show "Add button text" in button if the text is missing
- adds wrapper element so the tooltip is not greyed out
This commit is contained in:
Kevin Ansfield 2021-11-11 09:24:20 +00:00
parent 4647c45102
commit 49d32c4ca4
2 changed files with 9 additions and 1 deletions

View file

@ -95,7 +95,9 @@
{{!-- rendered (non-edit) mode view --}} {{!-- rendered (non-edit) mode view --}}
<div class="{{if (eq @payload.alignment "center") "tc"}}"> <div class="{{if (eq @payload.alignment "center") "tc"}}">
<a class="gh-btn gh-btn-accent" href="javascript:void(0)" data-tooltip={{@payload.buttonUrl}}><span>{{@payload.buttonText}}</span></a> <div class="dib" data-tooltip={{or @payload.buttonUrl "Add button URL"}}>
<a class="gh-btn gh-btn-accent {{if this.isIncomplete "o-50"}}" href="javascript:void(0)"><span>{{or @payload.buttonText "Add button text"}}</span></a>
</div>
</div> </div>
{{/if}} {{/if}}

View file

@ -24,6 +24,12 @@ export default class KoenigCardButtonComponent extends Component {
return isBlank(buttonText) && isBlank(buttonUrl); return isBlank(buttonText) && isBlank(buttonUrl);
} }
get isIncomplete() {
const {buttonText, buttonUrl} = this.args.payload;
return isBlank(buttonText) || isBlank(buttonUrl);
}
get toolbar() { get toolbar() {
if (this.args.isEditing) { if (this.args.isEditing) {
return false; return false;