jyapayne/justbean
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor and add border width to cells

Browse source
This commit is contained in:
Joey Yakimowich-Payne 2025-04-18 11:26:04 -06:00
commit 0ca41b5cd7
No known key found for this signature in database
GPG key ID: 6BFE655FA5ABD1E1
3 changed files with 129 additions and 90 deletions
Download patch file Download diff file Expand all files Collapse all files

136
beango/index.html
View file

@ -186,6 +186,73 @@
</div>
</details>
<details class="config-section">
<summary class="config-summary">Default Cell Style</summary>
<div class="config-content space-y-4 pt-2">
<div>
<label for="cell-background-color-picker" class="block text-sm font-medium text-gray-700">Background Color:</label>
<div class="flex items-center space-x-2 mt-1">
<input type="color" id="cell-background-color-picker" name="cell-background-color-picker" value="#F5F5DC" class="h-10 border border-gray-300 rounded-md shadow-sm cursor-pointer focus:outline-none focus:ring-green-500 focus:border-green-500 flex-grow">
<div class="w-28 flex flex-col items-center">
<label for="cell-background-opacity-slider" class="block text-xs font-medium text-gray-500">Opacity: <span id="cell-background-opacity-value">100</span>%</label>
<input type="range" id="cell-background-opacity-slider" name="cell-background-opacity-slider" min="0" max="100" value="100" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
</div>
</div>
</div>
<div>
<label for="cell-background-image-url-input" class="block text-sm font-medium text-gray-700">Background Image URL (Optional):</label>
<input type="url" id="cell-background-image-url-input" name="cell-background-image-url-input" placeholder="Clear to use background color" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm">
<div class="mt-1 w-28 flex flex-col items-center ml-auto">
<label for="cell-background-image-opacity-slider" class="block text-xs font-medium text-gray-500">Image Opacity: <span id="cell-background-image-opacity-value">100</span>%</label>
<input type="range" id="cell-background-image-opacity-slider" name="cell-background-image-opacity-slider" min="0" max="100" value="100" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
</div>
</div>
<div class="border-t pt-4 mt-4 space-y-2">
<label for="cell-border-color-picker" class="block text-sm font-medium text-gray-700">Border Color:</label>
<div class="flex items-center space-x-2 mt-1">
<input type="color" id="cell-border-color-picker" name="cell-border-color-picker" value="#8B4513" class="h-10 border border-gray-300 rounded-md shadow-sm cursor-pointer focus:outline-none focus:ring-green-500 focus:border-green-500 flex-grow">
<div class="w-28 flex flex-col items-center">
<label for="cell-border-opacity-slider" class="block text-xs font-medium text-gray-500">Opacity: <span id="cell-border-opacity-value">100</span>%</label>
<input type="range" id="cell-border-opacity-slider" name="cell-border-opacity-slider" min="0" max="100" value="100" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
</div>
</div>
</div>
<!-- Default Cell Border Width Setting -->
<div>
<label for="cell-border-width-input" class="block text-sm font-medium text-gray-700">Border Width (px):</label>
<input type="number" id="cell-border-width-input" name="cell-border-width-input" min="0" max="10" step="1" value="1" class="mt-1 block w-full px-2 py-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 text-sm">
</div>
<!-- Text Style Settings -->
<div class="border-t pt-4 mt-4 space-y-2">
<label class="block text-sm font-medium text-gray-700 mb-1">Text Style:</label>
<div>
<label for="cell-text-color-picker" class="block text-xs font-medium text-gray-700">Text Color:</label>
<div class="flex items-center space-x-2 mt-1">
<input type="color" id="cell-text-color-picker" name="cell-text-color-picker" value="#000000" class="h-10 border border-gray-300 rounded-md shadow-sm cursor-pointer focus:outline-none focus:ring-green-500 focus:border-green-500 flex-grow">
<div class="w-28 flex flex-col items-center">
<label for="cell-text-opacity-slider" class="block text-xs font-medium text-gray-500">Opacity: <span id="cell-text-opacity-value">100</span>%</label>
<input type="range" id="cell-text-opacity-slider" name="cell-text-opacity-slider" min="0" max="100" value="100" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
</div>
</div>
</div>
<div>
<label for="cell-outline-color-picker" class="block text-xs font-medium text-gray-700">Outline Color:</label>
<div class="flex items-center space-x-2 mt-1">
<input type="color" id="cell-outline-color-picker" name="cell-outline-color-picker" value="#ffffff" class="h-10 border border-gray-300 rounded-md shadow-sm cursor-pointer focus:outline-none focus:ring-green-500 focus:border-green-500 flex-grow">
<div class="w-28 flex flex-col items-center">
<label for="cell-outline-opacity-slider" class="block text-xs font-medium text-gray-500">Opacity: <span id="cell-outline-opacity-value">100</span>%</label>
<input type="range" id="cell-outline-opacity-slider" name="cell-outline-opacity-slider" min="0" max="100" value="100" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
</div>
</div>
</div>
<div>
<label for="cell-outline-width-input" class="block text-xs font-medium text-gray-700">Outline Width (px):</label>
<input type="number" id="cell-outline-width-input" name="cell-outline-width-input" min="0" max="5" step="0.5" value="1" class="mt-1 block w-full px-2 py-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 text-sm">
</div>
</div>
</div>
</details>
<details class="config-section">
<summary class="config-summary">Marked Cell Style</summary>
<div class="config-content space-y-4 pt-2">
@ -208,7 +275,7 @@
<input type="range" id="marked-image-opacity-slider" name="marked-image-opacity-slider" min="0" max="100" value="100" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
</div>
</div>
<div class="mt-2">
<div class="border-t mt-2 pt-4 mt-4 space-y-2">
<label for="marked-border-color-picker" class="block text-sm font-medium text-gray-700">Marked Cell Border Color:</label>
<div class="flex items-center space-x-2 mt-1">
<input type="color" id="marked-border-color-picker" name="marked-border-color-picker" value="#ca8a04" class="h-10 border border-gray-300 rounded-md shadow-sm cursor-pointer focus:outline-none focus:ring-green-500 focus:border-green-500 flex-grow">
@ -218,6 +285,11 @@
</div>
</div>
</div>
<!-- Border Width Setting for Marked Cells -->
<div>
<label for="marked-border-width-input" class="block text-sm font-medium text-gray-700">Marked Cell Border Width (px):</label>
<input type="number" id="marked-border-width-input" name="marked-border-width-input" min="0" max="10" step="1" value="2" class="mt-1 block w-full px-2 py-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 text-sm">
</div>
<!-- START Text Style Settings for Marked Cells -->
<div class="border-t pt-4 mt-4 space-y-2">
<label class="block text-sm font-medium text-gray-700 mb-1">Text Style (Marked):</label>
@ -251,68 +323,6 @@
</div>
</details>
<details class="config-section">
<summary class="config-summary">Default Cell Style</summary>
<div class="config-content space-y-4 pt-2">
<div>
<label for="cell-border-color-picker" class="block text-sm font-medium text-gray-700">Border Color:</label>
<div class="flex items-center space-x-2 mt-1">
<input type="color" id="cell-border-color-picker" name="cell-border-color-picker" value="#8B4513" class="h-10 border border-gray-300 rounded-md shadow-sm cursor-pointer focus:outline-none focus:ring-green-500 focus:border-green-500 flex-grow">
<div class="w-28 flex flex-col items-center">
<label for="cell-border-opacity-slider" class="block text-xs font-medium text-gray-500">Opacity: <span id="cell-border-opacity-value">100</span>%</label>
<input type="range" id="cell-border-opacity-slider" name="cell-border-opacity-slider" min="0" max="100" value="100" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
</div>
</div>
</div>
<div>
<label for="cell-background-color-picker" class="block text-sm font-medium text-gray-700">Background Color:</label>
<div class="flex items-center space-x-2 mt-1">
<input type="color" id="cell-background-color-picker" name="cell-background-color-picker" value="#F5F5DC" class="h-10 border border-gray-300 rounded-md shadow-sm cursor-pointer focus:outline-none focus:ring-green-500 focus:border-green-500 flex-grow">
<div class="w-28 flex flex-col items-center">
<label for="cell-background-opacity-slider" class="block text-xs font-medium text-gray-500">Opacity: <span id="cell-background-opacity-value">100</span>%</label>
<input type="range" id="cell-background-opacity-slider" name="cell-background-opacity-slider" min="0" max="100" value="100" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
</div>
</div>
</div>
<div>
<label for="cell-background-image-url-input" class="block text-sm font-medium text-gray-700">Background Image URL (Optional):</label>
<input type="url" id="cell-background-image-url-input" name="cell-background-image-url-input" placeholder="Clear to use background color" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm">
<div class="mt-1 w-28 flex flex-col items-center ml-auto">
<label for="cell-background-image-opacity-slider" class="block text-xs font-medium text-gray-500">Image Opacity: <span id="cell-background-image-opacity-value">100</span>%</label>
<input type="range" id="cell-background-image-opacity-slider" name="cell-background-image-opacity-slider" min="0" max="100" value="100" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
</div>
</div>
<!-- Text Style Settings -->
<div class="border-t pt-4 mt-4 space-y-2">
<label class="block text-sm font-medium text-gray-700 mb-1">Text Style:</label>
<div>
<label for="cell-text-color-picker" class="block text-xs font-medium text-gray-700">Text Color:</label>
<div class="flex items-center space-x-2 mt-1">
<input type="color" id="cell-text-color-picker" name="cell-text-color-picker" value="#000000" class="h-10 border border-gray-300 rounded-md shadow-sm cursor-pointer focus:outline-none focus:ring-green-500 focus:border-green-500 flex-grow">
<div class="w-28 flex flex-col items-center">
<label for="cell-text-opacity-slider" class="block text-xs font-medium text-gray-500">Opacity: <span id="cell-text-opacity-value">100</span>%</label>
<input type="range" id="cell-text-opacity-slider" name="cell-text-opacity-slider" min="0" max="100" value="100" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
</div>
</div>
</div>
<div>
<label for="cell-outline-color-picker" class="block text-xs font-medium text-gray-700">Outline Color:</label>
<div class="flex items-center space-x-2 mt-1">
<input type="color" id="cell-outline-color-picker" name="cell-outline-color-picker" value="#ffffff" class="h-10 border border-gray-300 rounded-md shadow-sm cursor-pointer focus:outline-none focus:ring-green-500 focus:border-green-500 flex-grow">
<div class="w-28 flex flex-col items-center">
<label for="cell-outline-opacity-slider" class="block text-xs font-medium text-gray-500">Opacity: <span id="cell-outline-opacity-value">100</span>%</label>
<input type="range" id="cell-outline-opacity-slider" name="cell-outline-opacity-slider" min="0" max="100" value="100" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
</div>
</div>
</div>
<div>
<label for="cell-outline-width-input" class="block text-xs font-medium text-gray-700">Outline Width (px):</label>
<input type="number" id="cell-outline-width-input" name="cell-outline-width-input" min="0" max="5" step="0.5" value="1" class="mt-1 block w-full px-2 py-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 text-sm">
</div>
</div>
</div>
</details>
<details class="config-section">
<summary class="config-summary">Board Background Style</summary>
<div class="config-content space-y-4 pt-2">