diff --git a/app/code/core/Mage/ConfigurableSwatches/Helper/Productimg.php b/app/code/core/Mage/ConfigurableSwatches/Helper/Productimg.php index 6a89621d9f1..2f4f1619d45 100644 --- a/app/code/core/Mage/ConfigurableSwatches/Helper/Productimg.php +++ b/app/code/core/Mage/ConfigurableSwatches/Helper/Productimg.php @@ -251,6 +251,9 @@ public function getGlobalSwatchUrl( do { $filename = Mage::helper('configurableswatches')->getHyphenatedString($value) . $fileExt; $swatchImage = $this->_resizeSwatchImage($filename, 'media', $width, $height); + if (!$swatchImage) { + $swatchImage = $this->createSwatchImage($value, $width, $height); + } if (!$swatchImage && $defaultValue == $value) { return ''; // no image found and no further fallback } elseif (!$swatchImage) { @@ -263,6 +266,49 @@ public function getGlobalSwatchUrl( return Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA) . $swatchImage; } + /** + * Create a swatch image for the given filename + * + * @param string $value + * @param int $width + * @param int $height + * @return string|false $destPath + * @throws Mage_Core_Exception + */ + public function createSwatchImage($value, $width, $height) + { + $filename = Mage::helper('configurableswatches')->getHyphenatedString($value) . self::SWATCH_FILE_EXT; + $optionSwatch = Mage::getModel('eav/entity_attribute_option_swatch') + ->load($filename, 'filename'); + if (!$optionSwatch->getValue()) { + return false; + } + + // Form full path to where we want to cache resized version + $destPathArr = [ + self::SWATCH_CACHE_DIR, + Mage::app()->getStore()->getId(), + $width . 'x' . $height, + 'media', + trim($filename, '/'), + ]; + $destPath = implode('/', $destPathArr); + if (!is_dir(Mage::getBaseDir(Mage_Core_Model_Store::URL_TYPE_MEDIA) . DS . dirname($destPath))) { + $io = new Varien_Io_File(); + $io->mkdir(Mage::getBaseDir(Mage_Core_Model_Store::URL_TYPE_MEDIA) . DS . dirname($destPath), 0777, true); + } + + $newImage = imagecreatetruecolor($width, $height); + list($r, $g, $b) = sscanf($optionSwatch->getValue(), "#%02x%02x%02x"); + $backgroundColor = imagecolorallocate($newImage, (int)$r, (int)$g, (int)$b); + imagefill($newImage, 0, 0, $backgroundColor); + imagepng($newImage, Mage::getBaseDir(Mage_Core_Model_Store::URL_TYPE_MEDIA) . DS . $destPath); + imagedestroy($newImage); + Mage::helper('core/file_storage_database')->saveFile($destPath); + + return $destPath; + } + /** * Performs the resize operation on the given swatch image file and returns a * relative path to the resulting image file diff --git a/app/code/core/Mage/Eav/Block/Adminhtml/Attribute/Edit/Options/Abstract.php b/app/code/core/Mage/Eav/Block/Adminhtml/Attribute/Edit/Options/Abstract.php index 64d7e385e5d..613013c3038 100644 --- a/app/code/core/Mage/Eav/Block/Adminhtml/Attribute/Edit/Options/Abstract.php +++ b/app/code/core/Mage/Eav/Block/Adminhtml/Attribute/Edit/Options/Abstract.php @@ -146,11 +146,13 @@ public function getOptionValues() $value['store' . $store->getId()] = isset($storeValues[$option->getId()]) ? $helper->escapeHtml($storeValues[$option->getId()]) : ''; } + if ($this->isConfigurableSwatchesEnabled()) { + $value['swatch'] = $option->getSwatchValue(); + } $values[] = new Varien_Object($value); } $this->setData('option_values', $values); } - return $values; } @@ -209,4 +211,13 @@ public function getAttributeObject() { return Mage::registry('entity_attribute'); } + + /** + * Check if configurable swatches module is enabled and attribute is swatch type + */ + public function isConfigurableSwatchesEnabled(): bool + { + return Mage::helper('core')->isModuleEnabled('Mage_ConfigurableSwatches') + && Mage::helper('configurableswatches')->attrIsSwatchType($this->getAttributeObject()); + } } diff --git a/app/code/core/Mage/Eav/Model/Entity/Attribute/Option.php b/app/code/core/Mage/Eav/Model/Entity/Attribute/Option.php index e04a51437d2..cc624cf0019 100644 --- a/app/code/core/Mage/Eav/Model/Entity/Attribute/Option.php +++ b/app/code/core/Mage/Eav/Model/Entity/Attribute/Option.php @@ -34,4 +34,19 @@ public function _construct() { $this->_init('eav/entity_attribute_option'); } + + /** + * Retrieve swatch hex value + * + * @return string|false + */ + public function getSwatchValue() + { + $swatch = Mage::getModel('eav/entity_attribute_option_swatch') + ->load($this->getId(), 'option_id'); + if (!$swatch->getId()) { + return false; + } + return $swatch->getValue(); + } } diff --git a/app/code/core/Mage/Eav/Model/Entity/Attribute/Option/Swatch.php b/app/code/core/Mage/Eav/Model/Entity/Attribute/Option/Swatch.php new file mode 100644 index 00000000000..cfa5ce718ba --- /dev/null +++ b/app/code/core/Mage/Eav/Model/Entity/Attribute/Option/Swatch.php @@ -0,0 +1,30 @@ +_init('eav/entity_attribute_option_swatch'); + } +} diff --git a/app/code/core/Mage/Eav/Model/Resource/Entity/Attribute.php b/app/code/core/Mage/Eav/Model/Resource/Entity/Attribute.php index 56ae1f3f62d..809c33ffc0c 100644 --- a/app/code/core/Mage/Eav/Model/Resource/Entity/Attribute.php +++ b/app/code/core/Mage/Eav/Model/Resource/Entity/Attribute.php @@ -288,6 +288,7 @@ protected function _saveOption(Mage_Core_Model_Abstract $object) $adapter = $this->_getWriteAdapter(); $optionTable = $this->getTable('eav/attribute_option'); $optionValueTable = $this->getTable('eav/attribute_option_value'); + $optionSwatchTable = $this->getTable('eav/attribute_option_swatch'); $stores = Mage::app()->getStores(true); if (isset($option['value'])) { @@ -301,6 +302,7 @@ protected function _saveOption(Mage_Core_Model_Abstract $object) if (!empty($option['delete'][$optionId])) { if ($intOptionId) { $adapter->delete($optionTable, ['option_id = ?' => $intOptionId]); + $adapter->delete($optionSwatchTable, ['option_id = ?' => $intOptionId]); } continue; } @@ -346,11 +348,28 @@ protected function _saveOption(Mage_Core_Model_Abstract $object) $adapter->insert($optionValueTable, $data); } } + + // Swatch Value + if (isset($option['swatch'][$optionId])) { + if ($option['swatch'][$optionId]) { + $data = [ + 'option_id' => $intOptionId, + 'value' => $option['swatch'][$optionId], + 'filename' => Mage::helper('configurableswatches')->getHyphenatedString($values[0]) . Mage_ConfigurableSwatches_Helper_Productimg::SWATCH_FILE_EXT + ]; + $adapter->insertOnDuplicate($optionSwatchTable, $data); + } else { + $adapter->delete($optionSwatchTable, ['option_id = ?' => $intOptionId]); + } + } } $bind = ['default_value' => implode(',', $attributeDefaultValue)]; $where = ['attribute_id =?' => $object->getId()]; $adapter->update($this->getMainTable(), $bind, $where); } + if (isset($option['swatch'])) { + Mage::helper('configurableswatches/productimg')->clearSwatchesCache(); + } } return $this; diff --git a/app/code/core/Mage/Eav/Model/Resource/Entity/Attribute/Option/Swatch.php b/app/code/core/Mage/Eav/Model/Resource/Entity/Attribute/Option/Swatch.php new file mode 100644 index 00000000000..8146709e5e3 --- /dev/null +++ b/app/code/core/Mage/Eav/Model/Resource/Entity/Attribute/Option/Swatch.php @@ -0,0 +1,27 @@ +_init('eav/attribute_option_swatch', 'option_id'); + } +} diff --git a/app/code/core/Mage/Eav/etc/config.xml b/app/code/core/Mage/Eav/etc/config.xml index 79adaba394f..e0056eaedb6 100644 --- a/app/code/core/Mage/Eav/etc/config.xml +++ b/app/code/core/Mage/Eav/etc/config.xml @@ -17,7 +17,7 @@ - 1.6.0.1 + 1.6.0.2 @@ -60,6 +60,9 @@ eav_attribute_option_value
 + + eav_attribute_option_swatch
+ eav_attribute_label
 diff --git a/app/code/core/Mage/Eav/sql/eav_setup/upgrade-1.6.0.1-1.6.0.2.php b/app/code/core/Mage/Eav/sql/eav_setup/upgrade-1.6.0.1-1.6.0.2.php new file mode 100644 index 00000000000..8a15b9a71ff --- /dev/null +++ b/app/code/core/Mage/Eav/sql/eav_setup/upgrade-1.6.0.1-1.6.0.2.php @@ -0,0 +1,57 @@ +startSetup(); + +/** + * Create table 'eav/attribute_option_swatch' + */ +$table = $installer->getConnection() + ->newTable($installer->getTable('eav/attribute_option_swatch')) + ->addColumn('value_id', Varien_Db_Ddl_Table::TYPE_INTEGER, null, [ + 'identity' => true, + 'unsigned' => true, + 'nullable' => false, + 'primary' => true, + ], 'Value Id') + ->addColumn('option_id', Varien_Db_Ddl_Table::TYPE_INTEGER, null, [ + 'unsigned' => true, + 'nullable' => false, + 'default' => '0', + ], 'Option Id') + ->addColumn('value', Varien_Db_Ddl_Table::TYPE_TEXT, 255, [ + 'nullable' => true, + 'default' => null, + ], 'Value') + ->addColumn('filename', Varien_Db_Ddl_Table::TYPE_TEXT, 255, [ + 'nullable' => true, + 'default' => null, + ], 'Filename') + ->addIndex( + $installer->getIdxName('eav/attribute_option_value', ['option_id']), + ['option_id'], + ['type' => Varien_Db_Adapter_Interface::INDEX_TYPE_UNIQUE] + ) + ->addForeignKey( + $installer->getFkName('eav/attribute_option_swatch', 'option_id', 'eav/attribute_option', 'option_id'), + 'option_id', + $installer->getTable('eav/attribute_option'), + 'option_id', + Varien_Db_Ddl_Table::ACTION_CASCADE, + Varien_Db_Ddl_Table::ACTION_CASCADE + ) + ->setComment('Eav Attribute Option Swatch'); +$installer->getConnection()->createTable($table); diff --git a/app/design/adminhtml/default/default/template/eav/attribute/options.phtml b/app/design/adminhtml/default/default/template/eav/attribute/options.phtml index b1894fd71b6..275cd9811ac 100644 --- a/app/design/adminhtml/default/default/template/eav/attribute/options.phtml +++ b/app/design/adminhtml/default/default/template/eav/attribute/options.phtml @@ -64,18 +64,28 @@
+ isConfigurableSwatchesEnabled()): ?> + + getStores() as $_store): ?> - + - + + isConfigurableSwatchesEnabled()): ?> + + getStores() as $_store): ?> @@ -100,6 +110,13 @@ var optionDefaultInputType = 'radio'; // IE removes quotes from element.innerHTML whenever it thinks they're not needed, which breaks html. var templateText = ''+ + isConfigurableSwatchesEnabled()): ?> + ''+ + getStores() as $_store): ?> '
escapeHtml($this->__('Swatch')) ?> escapeHtml($_store->getName()); ?> __('Position') ?>__('Is Default') ?>escapeHtml($this->__('Is Default')) ?> getReadOnly()):?> getAddNewButtonHtml() ?>
+ + + X + getReadOnly()):?> disabled="disabled"/>
'+ + ''+ + ''+ + 'X'+ + ' getReadOnly()):?> disabled="disabled"/><\/td>'+ @@ -114,7 +131,7 @@ var templateText = '<\/tr>'; var attributeOption = { - table : $('attribute-options-table'), + table : document.getElementById('attribute-options-table'), templateSyntax : /(^|.|\r|\n)({{(\w+)}})/, templateText : templateText, itemCount : 0, @@ -122,81 +139,119 @@ var attributeOption = { isReadOnly: getReadOnly(); ?>, add : function(data) { this.template = new Template(this.templateText, this.templateSyntax); - var isNewOption = false; - if(!data.id){ - data = {}; - data.id = 'option_'+this.itemCount; + let isNewOption = false; + if (!data.id) { + data.id = 'option_' + this.itemCount; isNewOption = true; } - if (!data.intype) + if (!data.intype) { data.intype = optionDefaultInputType; - Element.insert(this.table, {after: this.template.evaluate(data)}); + } + if (!data.swatch) { + data.swatch_class = 'swatch-disabled'; + } + let newHTML = this.template.evaluate(data); + this.table.insertAdjacentHTML('afterend', newHTML); if (isNewOption && !this.isReadOnly) { this.enableNewOptionDeleteButton(data.id); } this.bindRemoveButtons(); + this.bindSwatchButtons(); + this.bindSwatchRemoveButtons(); this.itemCount++; this.totalItems++; this.updateItemsCountField(); }, remove : function(event){ - var element = $(Event.findElement(event, 'tr')); // !!! Button already - // have table parent in safari - // Safari workaround - element.ancestors().each(function(parentItem){ - if (parentItem.hasClassName('option-row')) { - element = parentItem; - throw $break; - } else if (parentItem.hasClassName('box')) { - throw $break; - } - }); - - - if(element){ - var elementFlags = element.getElementsByClassName('delete-flag'); - if(elementFlags[0]){ - elementFlags[0].value=1; + let element = event.target.closest('tr'); + if (element) { + let elementFlags = element.querySelectorAll('.delete-flag'); + if (elementFlags.length > 0) { + elementFlags[0].value = 1; } - element.addClassName('no-display'); - element.addClassName('template'); - element.hide(); + element.classList.add('no-display', 'template'); this.totalItems--; this.updateItemsCountField(); } }, - updateItemsCountField: function() { - if (this.totalItems > 0) { - $('option-count-check').value = '1'; - } else { - $('option-count-check').value = ''; + swatch : function(event){ + let element = event.target.closest('tr'); + if (element) { + let elementSwatchValue = element.querySelector('.swatch-value'); + if (elementSwatchValue) { + elementSwatchValue.disabled = false; + elementSwatchValue.value = event.target.value; + } + + event.target.classList.remove('swatch-disabled'); } }, + swatchremove : function(event){ + if (!confirm(event.target.getAttribute('data-msg-delete'))) { + return; + } + let element = event.target.closest('tr'); + if (element) { + let elementSwatchValue = element.querySelector('.swatch-value'); + if (elementSwatchValue) { + elementSwatchValue.disabled = false; + elementSwatchValue.value = ''; + } + + let elementSwatchOption = element.querySelector('.swatch-option'); + if (elementSwatchOption) { + elementSwatchOption.value = ''; + elementSwatchOption.classList.add('swatch-disabled'); + } + } + }, + updateItemsCountField: function() { + let optionCountCheck = document.getElementById('option-count-check'); + optionCountCheck.value = this.totalItems > 0 ? '1' : ''; + }, enableNewOptionDeleteButton: function(id) { - $$('#delete_button_container_' + id + ' button').each(function(button) { - button.enable(); - button.removeClassName('disabled'); + document.querySelectorAll('#delete_button_container_' + id + ' button').forEach(function(button) { + button.disabled = false; + button.classList.remove('disabled'); }); }, - bindRemoveButtons : function(){ - var buttons = $$('.delete-option'); - for(var i=0;ijsQuoteEscape($this->__('Failed')) ?>', function(v) { diff --git a/app/locale/en_US/Mage_ConfigurableSwatches.csv b/app/locale/en_US/Mage_ConfigurableSwatches.csv index 4f0bcb59dbe..743e94b687a 100644 --- a/app/locale/en_US/Mage_ConfigurableSwatches.csv +++ b/app/locale/en_US/Mage_ConfigurableSwatches.csv @@ -17,3 +17,5 @@ "Swatch Dimensions in Product Listing","Swatch Dimensions in Product Listing" "Swatch Dimensions on Product Detail Page","Swatch Dimensions on Product Detail Page" "Width","Width" +"Swatch","Swatch" +"Are you sure to delete this fallback color?","Are you sure to delete this fallback color?" diff --git a/skin/adminhtml/default/openmage/form.css b/skin/adminhtml/default/openmage/form.css index e6aeb4ee39f..a51d158c9b1 100644 --- a/skin/adminhtml/default/openmage/form.css +++ b/skin/adminhtml/default/openmage/form.css @@ -21,14 +21,12 @@ input.input-text, textarea, select { height: 26px; color: #202856; border: 1px solid #c8c8c8; - box-sizing: border-box; -} + box-sizing: border-box; } .form-list td.label, .form-list td.label label { font-size: 12px; font-weight: 400; - color: #202856; -} + color: #202856; } button, .form-button { background-image: none; @@ -44,21 +42,18 @@ button, .form-button { line-height: 26px; box-sizing: border-box; margin: 0; - vertical-align: middle; -} + vertical-align: middle; } button:focus, button:active, .form-button:focus, .form-button:active { background: #888; border: 0; outline: thin dotted; - outline-offset: -2px; -} + outline-offset: -2px; } button.disabled, .form-button.disabled, button[disabled], .form-button[disabled] fieldset[disabled] button { cursor: default; pointer-events: none; - opacity: 0.5; -} + opacity: 0.5; } button.save, button.ok_button, button.add, .form-button.ok_button { background-image: none; @@ -73,246 +68,216 @@ button.save, button.ok_button, button.add, .form-button.ok_button { font-weight: 400; line-height: 26px; box-sizing: border-box; - vertical-align: middle; -} + vertical-align: middle; } button.save:focus, button.save:active, button.ok_button:focus, button.ok_button:active, button.add:focus, button.add:active, .form-button.ok_button:focus, .form-button.ok_button:active { background-color: #026294; outline: thin dotted; outline-offset: -2px; - color: #fff; -} + color: #fff; } button.save.disabled, button.ok_button.disabled, button.add.disabled, button.save[disabled], button.add[disabled], button.ok_button[disabled], fieldset[disabled] button.save, fieldset[disabled] button.add, fieldset[disabled] button.ok_button { cursor: default; pointer-events: none; - opacity: 0.5; -} + opacity: 0.5; } .field-100 textarea, .field-100 input.input-text { float: none; border: 1px solid #c8c8c8 !important; - padding: 1px 3px !important; -} + padding: 1px 3px !important; } input { - vertical-align: middle; -} + vertical-align: middle; } textarea { - margin: 0; -} -textarea:disabled { - background: #f6f6f6; -} -textarea.disabled { - background: #f6f6f6; -} + margin: 0; } + textarea:disabled { + background: #f6f6f6; } + textarea.disabled { + background: #f6f6f6; } select { height: 26px; border: 1px solid #c8c8c8; box-sizing: border-box; text-transform: none; - margin: 0; -} -select.disabled { - background: #f6f6f6; -} -select:disabled { - background: #f6f6f6; -} -select optgroup { - font-weight: 600; -} + margin: 0; } + select.disabled { + background: #f6f6f6; } + select:disabled { + background: #f6f6f6; } + select optgroup { + font-weight: 600; } input[type=text].disabled { - background: #f6f6f6; -} + background: #f6f6f6; } input[type=text]:disabled { - background: #f6f6f6; -} + background: #f6f6f6; } select[multiple] { - height: auto; -} + height: auto; } select[size] { - height: auto; -} + height: auto; } button { - text-transform: none; -} -button span { - padding: 0; -} -button.cancel { - background: #e63a3a; - color: #fff; - padding: 0 13px; -} -button.cancel span { - background: none; - padding: 0; -} -button.cancel:hover { - background: #fa4545; -} -button.delete { - background: #e63a3a; - color: #fff; - padding: 0 13px; -} -button.delete span { - background: none; - padding: 0; -} -button.delete:hover { - background: #fa4545; -} -button.save { - padding: 0 13px; -} -button.save span { - background: none; - padding: 0; -} -button.save:hover { - background-color: #0090FF; -} -button.ok_button { - padding: 0 13px; -} -button.ok_button span { - background: none; - padding: 0; -} -button.ok_button:hover { - background-color: #0090FF; -} -button.add { - padding: 0 13px; -} -button.add span { - background: none; - padding: 0; -} -button.add:hover { - background-color: #0090FF; -} -button.add.disabled span { - background: none; -} -button.back { - background: none; -} -button.back span { - background: none; - padding: 0; -} -button.back:before { - content: "«"; - padding-right: 4px; -} -button:hover { - background: #888; -} -button.disabled { - background: #888; -} -button.disabled:hover { - background: #888; -} -button.disabled:active { - background: #888; -} -button.fail { - background: #e63a3a; - color: #fff; - padding: 0 13px; -} -button.fail:hover { - background: #fa4545; -} -button.cancel_button { - background: #e63a3a; - color: #fff; - padding: 0 13px; -} -button.cancel_button:hover { - background: #fa4545; -} -button.icon-btn { - width: auto !important; -} -button.icon-btn span { - text-indent: 0; - width: auto; - display: inline; -} -button.large { - font-size: 22px; - padding: 14px 22px 16px; -} -button.add-image span { - background: none; - padding: 0; -} -button.add-widget span { - background: none; - padding: 0; -} -button.go span { - background: none; - padding: 0; -} -button.add-variable span { - background: none; - padding: 0; -} + text-transform: none; } + button span { + padding: 0; } + button.cancel { + background: #e63a3a; + color: #fff; + padding: 0 13px; } + button.cancel span { + background: none; + padding: 0; } + button.cancel:hover { + background: #fa4545; } + button.delete { + background: #e63a3a; + color: #fff; + padding: 0 13px; } + button.delete span { + background: none; + padding: 0; } + button.delete:hover { + background: #fa4545; } + button.save { + padding: 0 13px; } + button.save span { + background: none; + padding: 0; } + button.save:hover { + background-color: #0090FF; } + button.ok_button { + padding: 0 13px; } + button.ok_button span { + background: none; + padding: 0; } + button.ok_button:hover { + background-color: #0090FF; } + button.add { + padding: 0 13px; } + button.add span { + background: none; + padding: 0; } + button.add:hover { + background-color: #0090FF; } + button.add.disabled span { + background: none; } + button.back { + background: none; } + button.back span { + background: none; + padding: 0; } + button.back:before { + content: "«"; + padding-right: 4px; } + button:hover { + background: #888; } + button.disabled { + background: #888; } + button.disabled:hover { + background: #888; } + button.disabled:active { + background: #888; } + button.fail { + background: #e63a3a; + color: #fff; + padding: 0 13px; } + button.fail:hover { + background: #fa4545; } + button.cancel_button { + background: #e63a3a; + color: #fff; + padding: 0 13px; } + button.cancel_button:hover { + background: #fa4545; } + button.icon-btn { + width: auto !important; } + button.icon-btn span { + text-indent: 0; + width: auto; + display: inline; } + button.large { + font-size: 22px; + padding: 14px 22px 16px; } + button.add-image span { + background: none; + padding: 0; } + button.add-widget span { + background: none; + padding: 0; } + button.go span { + background: none; + padding: 0; } + button.add-variable span { + background: none; + padding: 0; } .form-button:hover { - background: #888; -} + background: #888; } .form-button.ok_button:hover { - background-color: #0090FF; -} + background-color: #0090FF; } .form-button.large { font-size: 22px; - padding: 14px 22px 16px; -} + padding: 14px 22px 16px; } .field-100 { background: none; border: 0; - padding: 0; -} + padding: 0; } .form-list td.label label { - padding: 0 15px 0 0; -} + padding: 0 15px 0 0; } .form-list td.scope-label { color: #999; - font-size: 11px; -} + font-size: 11px; } .form-list td.value { - padding-left: 0 !important; -} -.form-list td.value input.input-text, -.form-list td.value textarea, -.form-list td.value select { - width: 330px; -} -.form-list td.value p.note { - color: #202856; - font-size: 11px; - font-weight: 400; -} + padding-left: 0 !important; } + .form-list td.value input.input-text, .form-list td.value textarea, .form-list td.value select { + width: 330px; } + .form-list td.value p.note { + color: #202856; + font-size: 11px; + font-weight: 400; } .input-text.large { padding: 12px 12px 14px; - font-size: 18px; -} + font-size: 18px; } + +td:has(input.swatch-option) { + display: flex; + gap: 2px; } + td:has(input.swatch-option) .swatch-delete { + cursor: pointer; + width: 14px; + height: 14px; + display: flex; + justify-content: center; + font-size: 10px; + background: #e63a3a; + color: #fff; + border-radius: 2px; } + td:has(input.swatch-option) .swatch-option { + width: 26px !important; + height: 26px; } + +td:has(input.swatch-disabled) { + background-image: url('data:image/svg+xml,placeholder'); + background-repeat: no-repeat; + outline: 1px solid #c8c8c8; + border: 1px solid #fff; + padding: 0; + margin: 2px; + width: 24px; + height: 24px; + display: block; + background-position: center center; + border-radius: 2px; } + td:has(input.swatch-disabled) .swatch-option { + opacity: 0; } + td:has(input.swatch-disabled) .swatch-delete { + display: none; } /*# sourceMappingURL=form.css.map */ diff --git a/skin/adminhtml/default/openmage/form.css.map b/skin/adminhtml/default/openmage/form.css.map index a9cc8436e5d..65522e6b64f 100644 --- a/skin/adminhtml/default/openmage/form.css.map +++ b/skin/adminhtml/default/openmage/form.css.map @@ -1,6 +1,6 @@ { "version": 3, -"mappings": "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", +"mappings": "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", "sources": ["scss/form.scss","scss/_variables.scss","scss/_base.scss"], "names": [], "file": "form.css" diff --git a/skin/adminhtml/default/openmage/scss/form.scss b/skin/adminhtml/default/openmage/scss/form.scss index 9a20435499d..4d73c727fc7 100644 --- a/skin/adminhtml/default/openmage/scss/form.scss +++ b/skin/adminhtml/default/openmage/scss/form.scss @@ -402,4 +402,45 @@ fieldset[disabled] button { .input-text.large { padding: 12px 12px 14px; font-size: 18px; -} \ No newline at end of file +} + +td:has(input.swatch-option) { + display: flex; + gap: 2px; + .swatch-delete { + cursor: pointer; + width: 14px; + height: 14px; + display: flex; + justify-content: center; + font-size: 10px; + background: $color_cinnabar_approx; + color: $white; + border-radius: 2px; + } + .swatch-option { + width: 26px !important; + height: 26px; + } +} + +td:has(input.swatch-disabled) { + background-image: url('data:image/svg+xml,placeholder'); + background-repeat: no-repeat; + outline: 1px solid #c8c8c8; + border: 1px solid #fff; + padding: 0; + margin: 2px; + width: 24px; + height: 24px; + display: block; + background-position: center center; + border-radius: 2px; + + .swatch-option { + opacity: 0; + } + .swatch-delete { + display: none; + } +}