Fix buttons layout in product details page

This commit is contained in:
redphx
2024-09-26 19:46:30 +07:00
parent 2f7a57e084
commit e7c10d43f5
4 changed files with 29 additions and 26 deletions

View File

@@ -1,12 +1,11 @@
import { BX_FLAGS } from "@/utils/bx-flags";
import { BxIcon } from "@/utils/bx-icon";
import { AppInterface } from "@/utils/global";
import { ButtonStyle, createButton } from "@/utils/html";
import { ButtonStyle, CE, createButton } from "@/utils/html";
import { t } from "@/utils/translation";
export class ProductDetailsPage {
private static $btnShortcut = AppInterface && createButton({
classes: ['bx-button-shortcut'],
icon: BxIcon.CREATE_SHORTCUT,
label: t('create-shortcut'),
style: ButtonStyle.FOCUSABLE,
@@ -17,7 +16,6 @@ export class ProductDetailsPage {
});
private static $btnWallpaper = AppInterface && createButton({
classes: ['bx-button-shortcut'],
icon: BxIcon.DOWNLOAD,
label: t('wallpaper'),
style: ButtonStyle.FOCUSABLE,
@@ -48,17 +46,12 @@ export class ProductDetailsPage {
// Find action buttons container
const $container = document.querySelector('div[class*=ActionButtons-module__container]');
if ($container && $container.parentElement) {
const fragment = document.createDocumentFragment();
// Shortcut button
if (BX_FLAGS.DeviceInfo.deviceType === 'android') {
fragment.appendChild(ProductDetailsPage.$btnShortcut);
}
// Wallpaper button
fragment.appendChild(ProductDetailsPage.$btnWallpaper);
$container.parentElement.appendChild(fragment);
$container.parentElement.appendChild(CE('div', {
class: 'bx-product-details-buttons',
},
BX_FLAGS.DeviceInfo.deviceType === 'android' && ProductDetailsPage.$btnShortcut,
ProductDetailsPage.$btnWallpaper,
));
}
}, 500);
}