diff --git a/packages/drupal/gutenberg_blocks/css/edit.css b/packages/drupal/gutenberg_blocks/css/edit.css index 7dc32cdc3..55c0ecd92 100644 --- a/packages/drupal/gutenberg_blocks/css/edit.css +++ b/packages/drupal/gutenberg_blocks/css/edit.css @@ -129,3 +129,40 @@ .gutenberg__editor .drupal-preview-sidebar--header button { margin-right: 5px; } + +.gutenberg__editor .drupal-preview-sidebar--header select { + min-width: 350px; + position: relative; + appearance: none; + -webkit-appearance: none; + padding: 0.455em 6em 0.575em 1em; + background-color: #fff; + border: 1px solid #caced1; + border-radius: 0.25rem; + color: #000; + cursor: pointer; +} + +/* Preview select */ +.gutenberg__editor .drupal-preview-sidebar--header select::before, +.gutenberg__editor .drupal-preview-sidebar--header select::after { + --size: 0.3rem; + content: ""; + position: absolute; + right: 1rem; + pointer-events: none; +} + +.gutenberg__editor .drupal-preview-sidebar--header select::before { + border-left: var(--size) solid transparent; + border-right: var(--size) solid transparent; + border-bottom: var(--size) solid black; + top: 40%; +} + +.gutenberg__editor .drupal-preview-sidebar--header select::after { + border-left: var(--size) solid transparent; + border-right: var(--size) solid transparent; + border-top: var(--size) solid black; + top: 55%; +} diff --git a/packages/drupal/gutenberg_blocks/src/preview.ts b/packages/drupal/gutenberg_blocks/src/preview.ts index 659d4a5e9..5d2f15f5e 100644 --- a/packages/drupal/gutenberg_blocks/src/preview.ts +++ b/packages/drupal/gutenberg_blocks/src/preview.ts @@ -22,42 +22,35 @@ id: 'tablet', width: 768, height: 1024, - iconPath: - '/modules/contrib/silverback_external_preview/icons/tablet.svg', }, { label: Drupal.t('Laptop'), id: 'laptop', width: 1366, height: 786, - iconPath: - '/modules/contrib/silverback_external_preview/icons/laptop.svg', }, { label: Drupal.t('Desktop'), id: 'desktop', width: 1920, height: 1080, - iconPath: - '/modules/contrib/silverback_external_preview/icons/desktop.svg', - }, - { - label: Drupal.t('Full'), - id: 'full', - width: -1, - height: -1, - iconPath: - '/modules/contrib/silverback_external_preview/icons/full.svg', }, ]; - let previewButtons = ''; - previewSizes.forEach((size) => { - previewButtons += ` - `; - }); + const previewButton = `` + + const getPreviewSelect = () => { + let previewSelect = ''; + return previewSelect; + } + const previewSelect = getPreviewSelect(); const previewSidebarMarkup = `