mirror of
https://github.com/sotam0316/drawNET_test.git
synced 2026-04-25 03:58:38 +09:00
sotam0316
75 lines
3.8 KiB
JavaScript
75 lines
3.8 KiB
JavaScript
import { t } from '../../i18n.js';
|
|
|
|
export function getRichCardTemplate(cell) {
|
|
const data = cell.getData() || {};
|
|
const headerText = data.headerText || 'TITLE';
|
|
const content = data.content || '';
|
|
const cardType = data.cardType || 'standard';
|
|
const headerColor = data.headerColor || '#3b82f6';
|
|
const headerAlign = data.headerAlign || 'left';
|
|
const contentAlign = data.contentAlign || 'left';
|
|
|
|
return `
|
|
<div class="prop-section">
|
|
<h4 class="section-title"><i class="fas fa-file-alt"></i> ${t('rich_card')}</h4>
|
|
|
|
<div class="prop-group">
|
|
<label>${t('prop_header_text')}</label>
|
|
<div class="input-with-color">
|
|
<input type="text" id="prop-header-text" class="prop-input" value="${headerText}">
|
|
<input type="color" id="prop-header-color" class="prop-input" value="${headerColor}">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="prop-row">
|
|
<div class="prop-group horizontal">
|
|
<label>${t('prop_header_align')}</label>
|
|
<select id="prop-header-align" class="prop-input">
|
|
<option value="left" ${headerAlign === 'left' ? 'selected' : ''}>${t('left')}</option>
|
|
<option value="center" ${headerAlign === 'center' ? 'selected' : ''}>${t('center')}</option>
|
|
<option value="right" ${headerAlign === 'right' ? 'selected' : ''}>${t('right')}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="prop-row">
|
|
<div class="prop-group horizontal">
|
|
<label>${t('prop_card_type')}</label>
|
|
<select id="prop-card-type" class="prop-input">
|
|
<option value="standard" ${cardType === 'standard' ? 'selected' : ''}>${t('standard')}</option>
|
|
<option value="numbered" ${cardType === 'numbered' ? 'selected' : ''}>${t('numbered')}</option>
|
|
<option value="bullet" ${cardType === 'bullet' ? 'selected' : ''}>${t('bullet')}</option>
|
|
<option value="legend" ${cardType === 'legend' ? 'selected' : ''}>${t('legend')}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="prop-row">
|
|
<div class="prop-group horizontal">
|
|
<label>${t('prop_content_align')}</label>
|
|
<select id="prop-content-align" class="prop-input">
|
|
<option value="left" ${contentAlign === 'left' ? 'selected' : ''}>${t('left')}</option>
|
|
<option value="center" ${contentAlign === 'center' ? 'selected' : ''}>${t('center')}</option>
|
|
<option value="right" ${contentAlign === 'right' ? 'selected' : ''}>${t('right')}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="prop-group">
|
|
<label>${t('prop_card_content')}</label>
|
|
<textarea id="prop-card-content" class="prop-input" rows="8" style="resize: vertical; min-height: 120px; font-size: 13px;" placeholder="Enter list items...">${content}</textarea>
|
|
</div>
|
|
|
|
<div class="prop-row" style="margin-top: 10px;">
|
|
<div class="toggle-group" style="padding: 0; flex: 1;">
|
|
<label class="toggle-switch danger" style="padding: 10px 14px;">
|
|
<span style="font-size: 12px;"><i class="fas fa-lock" style="margin-right: 4px;"></i>${t('prop_locked')}</span>
|
|
<input type="checkbox" id="prop-locked" class="prop-input" ${data.locked ? 'checked' : ''}>
|
|
<div class="switch-slider"></div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|