Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issue/7289 signature pad introduce an option to upload a signature to a specified storage #7429

Merged
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@
<div [class]="model.cssClasses.placeholder" [visible]="model.needShowPlaceholder()" [model]="$any(model).locPlaceholder" sv-ng-string></div>
<div>
<img *ngIf="!!model.backgroundImage" [src]="model.backgroundImage" [style.width]="model.renderedCanvasWidth" [class]="model.cssClasses.backgroundImage">
<canvas tabindex="0" [class]="model.cssClasses.canvas"></canvas>
<canvas tabindex="0" [class]="model.cssClasses.canvas" (blur)="model.onBlur()"></canvas>
</div>
<div [class]="model.cssClasses.controls" [visible]="model.canShowClearButton">
<div [class]="model.cssClasses.controls" *ngIf="model.canShowClearButton">
<button
type="button"
[class]="model.cssClasses.clearButton"
Expand All @@ -20,4 +20,9 @@
[size]="'auto'" sv-ng-svg-icon></svg>
</button>
</div>
<ng-container *ngIf="model.showLoadingIndicator">
<div [class]="model.cssClasses.loadingIndicator">
<sv-ng-loading-indicator></sv-ng-loading-indicator>
</div>
</ng-container>
</div>
8 changes: 7 additions & 1 deletion packages/survey-vue3-ui/src/Signaturepad.vue
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
width: question.renderedCanvasWidth,
}"
/>
<canvas tabindex="0" :class="question.cssClasses.canvas"></canvas>
<canvas tabindex="0" :class="question.cssClasses.canvas" @blur="question.onBlur()"></canvas>
</div>
<div
:class="question.cssClasses.controls"
Expand All @@ -45,6 +45,12 @@
></sv-svg-icon>
</button>
</div>
<div
:class="question.cssClasses.loadingIndicator"
v-if="question.showLoadingIndicator"
>
<sv-loading-indicator></sv-loading-indicator>
</div>
</div>
</template>

Expand Down
3 changes: 2 additions & 1 deletion src/defaultCss/defaultV2Css.ts
Original file line number Diff line number Diff line change
Expand Up @@ -631,7 +631,8 @@ export var defaultV2Css = {
canvas: "sjs_sp_canvas sd-signaturepad__canvas",
backgroundImage: "sjs_sp__background-image sd-signaturepad__background-image",
clearButton: "sjs_sp_clear sd-context-btn sd-context-btn--negative sd-signaturepad__clear",
clearButtonIconId: "icon-clear"
clearButtonIconId: "icon-clear",
loadingIndicator: "sd-signaturepad__loading-indicator"
},
saveData: {
root: "sv-save-data_root",
Expand Down
19 changes: 14 additions & 5 deletions src/defaultV2-theme/blocks/sd-signaturepad.scss
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,7 @@
left: auto;
bottom: auto;
}
.sd-question--signature:not(.sd-question--answered) {
.sd-signaturepad__controls {
display: none;
}
}

.sd-question--signature.sd-question--error {
.sjs_sp_placeholder {
background-color: $red-light;
Expand All @@ -31,3 +27,16 @@
left: 0;
object-fit: cover;
}
.sd-signaturepad__loading-indicator {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;

.sd-loading-indicator {
position: absolute;
right: calcSize(1);
top: calcSize(1);
}
}
8 changes: 7 additions & 1 deletion src/knockout/templates/question-signaturepad.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<!-- ko if: question.backgroundImage -->
<img data-bind="attr: { src: question.backgroundImage}, style: { width: question.renderedCanvasWidth }, css: question.cssClasses.backgroundImage">
<!-- /ko -->
<canvas tabindex='0' data-bind="css: question.cssClasses.canvas" ></canvas>
<canvas tabindex='0' data-bind="css: question.cssClasses.canvas, event: { blur: question.onBlur }" ></canvas>
</div>
<!-- ko if: question.canShowClearButton -->
<div data-bind="css: question.cssClasses.controls">
Expand All @@ -23,5 +23,11 @@
</button>
</div>
<!-- /ko -->
<!-- ko if: question.showLoadingIndicator -->
<div data-bind="css: question.cssClasses.loadingIndicator">
<!-- ko component: { name: "sv-loading-indicator" } -->
<!-- /ko -->
</div>
<!-- /ko -->
</div>
</script>
Loading