add field color
This commit is contained in:
@@ -12,6 +12,10 @@ window.customElements.define('draw-signature', class extends HTMLElement {
|
|||||||
|
|
||||||
this.pad = new SignaturePad(this.canvas)
|
this.pad = new SignaturePad(this.canvas)
|
||||||
|
|
||||||
|
if (this.dataset.color) {
|
||||||
|
this.pad.penColor = this.dataset.color
|
||||||
|
}
|
||||||
|
|
||||||
this.pad.addEventListener('endStroke', () => {
|
this.pad.addEventListener('endStroke', () => {
|
||||||
this.updateSubmitButtonVisibility()
|
this.updateSubmitButtonVisibility()
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -408,6 +408,10 @@ export default {
|
|||||||
style.lineHeight = `clamp(6pt, 2.0vw, ${parseInt(this.field.preferences.font_size) + 3}pt)`
|
style.lineHeight = `clamp(6pt, 2.0vw, ${parseInt(this.field.preferences.font_size) + 3}pt)`
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (this.field.preferences?.color) {
|
||||||
|
style.color = this.field.preferences.color
|
||||||
|
}
|
||||||
|
|
||||||
return style
|
return style
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -226,6 +226,10 @@ export default {
|
|||||||
if (this.$refs.canvas) {
|
if (this.$refs.canvas) {
|
||||||
this.pad = new SignaturePad(this.$refs.canvas)
|
this.pad = new SignaturePad(this.$refs.canvas)
|
||||||
|
|
||||||
|
if (this.field.preferences?.color) {
|
||||||
|
this.pad.penColor = this.field.preferences.color
|
||||||
|
}
|
||||||
|
|
||||||
this.pad.addEventListener('beginStroke', () => {
|
this.pad.addEventListener('beginStroke', () => {
|
||||||
this.isInitialsStarted = true
|
this.isInitialsStarted = true
|
||||||
|
|
||||||
|
|||||||
@@ -423,6 +423,10 @@ export default {
|
|||||||
if (this.$refs.canvas) {
|
if (this.$refs.canvas) {
|
||||||
this.pad = new SignaturePad(this.$refs.canvas)
|
this.pad = new SignaturePad(this.$refs.canvas)
|
||||||
|
|
||||||
|
if (this.field.preferences?.color) {
|
||||||
|
this.pad.penColor = this.field.preferences.color
|
||||||
|
}
|
||||||
|
|
||||||
this.pad.addEventListener('endStroke', () => {
|
this.pad.addEventListener('endStroke', () => {
|
||||||
this.isSignatureStarted = true
|
this.isSignatureStarted = true
|
||||||
|
|
||||||
|
|||||||
@@ -175,6 +175,7 @@
|
|||||||
<div
|
<div
|
||||||
ref="textContainer"
|
ref="textContainer"
|
||||||
class="flex items-center px-0.5"
|
class="flex items-center px-0.5"
|
||||||
|
:style="{ color: field.preferences?.color }"
|
||||||
:class="{ 'w-full h-full': ['cells', 'checkbox'].includes(field.type) }"
|
:class="{ 'w-full h-full': ['cells', 'checkbox'].includes(field.type) }"
|
||||||
>
|
>
|
||||||
<IconCheck
|
<IconCheck
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
<% align = field.dig('preferences', 'align') %>
|
<% align = field.dig('preferences', 'align') %>
|
||||||
<field-value dir="auto" class="flex absolute text-[1.6vw] lg:text-base <%= 'font-serif' if field.dig('preferences', 'font') == 'Times' %> <%= align == 'right' ? 'justify-end' : (align == 'center' ? 'justify-center' : '') %>" style="width: <%= area['w'] * 100 %>%; height: <%= area['h'] * 100 %>%; left: <%= area['x'] * 100 %>%; top: <%= area['y'] * 100 %>%; <%= "font-size: clamp(4pt, 1.6vw, #{field['preferences']['font_size']}pt); line-height: `clamp(6pt, 2.0vw, #{field['preferences']['font_size'].to_i + 3}pt)`" if field.dig('preferences', 'font_size') %>">
|
<% color = field.dig('preferences', 'color') %>
|
||||||
|
<field-value dir="auto" class="flex absolute text-[1.6vw] lg:text-base <%= 'font-serif' if field.dig('preferences', 'font') == 'Times' %> <%= align == 'right' ? 'justify-end' : (align == 'center' ? 'justify-center' : '') %>" style="<%= "color: #{color}; " if color.present? %>width: <%= area['w'] * 100 %>%; height: <%= area['h'] * 100 %>%; left: <%= area['x'] * 100 %>%; top: <%= area['y'] * 100 %>%; <%= "font-size: clamp(4pt, 1.6vw, #{field['preferences']['font_size']}pt); line-height: `clamp(6pt, 2.0vw, #{field['preferences']['font_size'].to_i + 3}pt)`" if field.dig('preferences', 'font_size') %>">
|
||||||
<% if field['type'] == 'signature' %>
|
<% if field['type'] == 'signature' %>
|
||||||
<div class="flex flex-col justify-between h-full overflow-hidden">
|
<div class="flex flex-col justify-between h-full overflow-hidden">
|
||||||
<div class="flex-grow flex overflow-hidden" style="min-height: 50%">
|
<div class="flex-grow flex overflow-hidden" style="min-height: 50%">
|
||||||
|
|||||||
@@ -15,9 +15,10 @@
|
|||||||
<%= render 'shared/posthog' if ENV['POSTHOG_TOKEN'] %>
|
<%= render 'shared/posthog' if ENV['POSTHOG_TOKEN'] %>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<draw-signature data-slug="<%= params[:slug] %>" class="flex items-center h-screen p-2 justify-center">
|
<% field = (@submitter.submission.template_fields || @submitter.template.fields).find { |f| f['type'] == 'signature' && f['uuid'].starts_with?(params[:f]) } %>
|
||||||
|
<draw-signature data-slug="<%= params[:slug] %>" data-color="<%= field.dig('preferences', 'color') %>" class="flex items-center h-screen p-2 justify-center">
|
||||||
<%= form_for '', url: submit_form_path(params[:slug]), html: { style: 'max-width: 900px; width: 100%; margin-bottom: 120px' }, method: :put do |f| %>
|
<%= form_for '', url: submit_form_path(params[:slug]), html: { style: 'max-width: 900px; width: 100%; margin-bottom: 120px' }, method: :put do |f| %>
|
||||||
<input value="" type="hidden" name="values[<%= (@submitter.submission.template_fields || @submitter.template.fields).find { |f| f['type'] == 'signature' && f['uuid'].starts_with?(params[:f]) }['uuid'] %>]">
|
<input value="" type="hidden" name="values[<%= field['uuid'] %>]">
|
||||||
<div class="font-semibold text-4xl text-center w-full mb-2">
|
<div class="font-semibold text-4xl text-center w-full mb-2">
|
||||||
<%= t('draw_signature') %>
|
<%= t('draw_signature') %>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -179,6 +179,8 @@ module Submissions
|
|||||||
font_size = preferences_font_size
|
font_size = preferences_font_size
|
||||||
font_size ||= (([page.box.width, page.box.height].min / A4_SIZE[0].to_f) * FONT_SIZE).to_i
|
font_size ||= (([page.box.width, page.box.height].min / A4_SIZE[0].to_f) * FONT_SIZE).to_i
|
||||||
|
|
||||||
|
fill_color = field.dig('preferences', 'color').presence
|
||||||
|
|
||||||
font = pdf.fonts.add(field.dig('preferences', 'font').presence || FONT_NAME)
|
font = pdf.fonts.add(field.dig('preferences', 'font').presence || FONT_NAME)
|
||||||
|
|
||||||
value = submitter.values[field['uuid']]
|
value = submitter.values[field['uuid']]
|
||||||
@@ -380,6 +382,7 @@ module Submissions
|
|||||||
next if char.blank?
|
next if char.blank?
|
||||||
|
|
||||||
text = HexaPDF::Layout::TextFragment.create(char, font:,
|
text = HexaPDF::Layout::TextFragment.create(char, font:,
|
||||||
|
fill_color:,
|
||||||
font_size:)
|
font_size:)
|
||||||
|
|
||||||
line_height = layouter.fit([text], cell_width, height).lines.first.height
|
line_height = layouter.fit([text], cell_width, height).lines.first.height
|
||||||
@@ -387,6 +390,7 @@ module Submissions
|
|||||||
if preferences_font_size.blank? && line_height > (area['h'] * height)
|
if preferences_font_size.blank? && line_height > (area['h'] * height)
|
||||||
text = HexaPDF::Layout::TextFragment.create(char,
|
text = HexaPDF::Layout::TextFragment.create(char,
|
||||||
font:,
|
font:,
|
||||||
|
fill_color:,
|
||||||
font_size: (font_size / 1.4).to_i)
|
font_size: (font_size / 1.4).to_i)
|
||||||
|
|
||||||
line_height = layouter.fit([text], cell_width, height).lines.first.height
|
line_height = layouter.fit([text], cell_width, height).lines.first.height
|
||||||
@@ -395,6 +399,7 @@ module Submissions
|
|||||||
if preferences_font_size.blank? && line_height > (area['h'] * height)
|
if preferences_font_size.blank? && line_height > (area['h'] * height)
|
||||||
text = HexaPDF::Layout::TextFragment.create(char,
|
text = HexaPDF::Layout::TextFragment.create(char,
|
||||||
font:,
|
font:,
|
||||||
|
fill_color:,
|
||||||
font_size: (font_size / 1.9).to_i)
|
font_size: (font_size / 1.9).to_i)
|
||||||
|
|
||||||
line_height = layouter.fit([text], cell_width, height).lines.first.height
|
line_height = layouter.fit([text], cell_width, height).lines.first.height
|
||||||
@@ -414,6 +419,7 @@ module Submissions
|
|||||||
value = TextUtils.maybe_rtl_reverse(Array.wrap(value).join(', '))
|
value = TextUtils.maybe_rtl_reverse(Array.wrap(value).join(', '))
|
||||||
|
|
||||||
text = HexaPDF::Layout::TextFragment.create(value, font:,
|
text = HexaPDF::Layout::TextFragment.create(value, font:,
|
||||||
|
fill_color:,
|
||||||
font_size:)
|
font_size:)
|
||||||
|
|
||||||
lines = layouter.fit([text], area['w'] * width, height).lines
|
lines = layouter.fit([text], area['w'] * width, height).lines
|
||||||
@@ -422,6 +428,7 @@ module Submissions
|
|||||||
if preferences_font_size.blank? && box_height > (area['h'] * height) + 1
|
if preferences_font_size.blank? && box_height > (area['h'] * height) + 1
|
||||||
text = HexaPDF::Layout::TextFragment.create(value,
|
text = HexaPDF::Layout::TextFragment.create(value,
|
||||||
font:,
|
font:,
|
||||||
|
fill_color:,
|
||||||
font_size: (font_size / 1.4).to_i)
|
font_size: (font_size / 1.4).to_i)
|
||||||
|
|
||||||
lines = layouter.fit([text], field['type'].in?(%w[date number]) ? width : area['w'] * width, height).lines
|
lines = layouter.fit([text], field['type'].in?(%w[date number]) ? width : area['w'] * width, height).lines
|
||||||
@@ -432,6 +439,7 @@ module Submissions
|
|||||||
if preferences_font_size.blank? && box_height > (area['h'] * height) + 1
|
if preferences_font_size.blank? && box_height > (area['h'] * height) + 1
|
||||||
text = HexaPDF::Layout::TextFragment.create(value,
|
text = HexaPDF::Layout::TextFragment.create(value,
|
||||||
font:,
|
font:,
|
||||||
|
fill_color:,
|
||||||
font_size: (font_size / 1.9).to_i)
|
font_size: (font_size / 1.9).to_i)
|
||||||
|
|
||||||
lines = layouter.fit([text], field['type'].in?(%w[date number]) ? width : area['w'] * width, height).lines
|
lines = layouter.fit([text], field['type'].in?(%w[date number]) ? width : area['w'] * width, height).lines
|
||||||
|
|||||||
Reference in New Issue
Block a user