{% import "_includes/forms" as forms %} {% import "codeeditor/codeEditor" as codeEditor %} {% set previewEntry = craft.entries.orderBy(orderBy).section('*').uri(':notempty:').one() %}

{{ 'Preview'|t('admin-bar') }}

{% if previewEntry ?? false %}

{{ 'Showing preview for page, '|t('admin-bar') }} {{ previewEntry.title }}

{% endif %}
{{ adminBar({ entry: previewEntry ?? null, editLinkLabel: previewEntry ?? false ? previewEntry.section.name : null, force: true }) }}

{{ forms.lightswitchField({ label: 'Auto Render'|t('guide'), instructions: 'Displays Admin Bar on all front-end pages. If set to `false`, Admin Bar can be renderd using the `adminBar()` Twig method.'|t('admin-bar'), id: 'autoRender', name: 'autoRender', on: settings.autoRender, }) }} {{ forms.lightswitchField({ label: 'Mobile Mode'|t('guide'), instructions: 'Switch to vertical mode on thinner screens (currently available in [these supported browsers](https://caniuse.com/css-container-queries-style)).'|t('admin-bar'), id: 'mobileMode', name: 'mobileMode', on: settings.mobileMode, }) }} {{ forms.lightswitchField({ label: 'Toggle Button'|t('guide'), instructions: 'Adds a button to Admin Bar that lets you collapse the toolbar down to a single button.'|t('admin-bar'), id: 'toolbarToggle', name: 'toolbarToggle', on: settings.toolbarToggle, }) }} {{ forms.lightswitchField({ label: 'Toggle Button Draggable'|t('guide'), instructions: 'When collapsed, adds a drag handle to let you move the toggle button out of the way of page content.'|t('admin-bar'), id: 'toolbarToggleDraggable', name: 'toolbarToggleDraggable', on: settings.toolbarToggleDraggable, }) }}
{{ forms.editableTableField({ label: 'Additional Links'|t('admin-bar'), instructions: 'Add your own links to Admin Bar.'|t('admin-bar'), id: 'customLinks', name: 'customLinks', addRowLabel: 'Add a link'|t('little-layout'), allowAdd: true, allowDelete: true, allowReorder: true, cols: { icon: { heading: 'Icon'|t('admin-bar'), thin: true, type: 'icon', }, linkLabel: { heading: 'Label'|t('admin-bar'), type: 'singleline', }, linkUrl: { heading: 'URL'|t('admin-bar'), type: 'singleline', }, adminOnly: { heading: 'Admin only?'|t('admin-bar'), thin: true, type: 'lightswitch', }, }, rows: settings.customLinks ?? [], }) }}
{% set availableAdminBarWidgets = [] %} {% for plugin in widgetPlugins|keys %} {% if widgetPlugins[plugin].version %} {% set availableAdminBarWidgets = availableAdminBarWidgets|merge([plugin]) %} {% endif %} {% endfor %}

{{ 'Admin Bar Widgets'|t('admin-bar') }}

{{ 'Admin Bar Widgets display links, statuses, and page-specific information based on some of the Craft CMS features you are using and the plugins that you currently have installed.'|t('admin-bar') }} {% if not proEdition %}{{ 'Get Admin Bar PRO to enable Admin Bar Widgets.'|t('admin-bar') }}{% endif %}

{% if availableAdminBarWidgets|length %}
{% set widgetFields = [ { handle: 'craft-new-entry', setting: 'widgetEnabledCraftNewEntry', }, { handle: 'guide', setting: 'widgetEnabledGuide', }, { handle: 'seo', setting: 'widgetEnabledSeo', }, { handle: 'seomatic', setting: 'widgetEnabledSeomatic', }, { handle: 'navigation', setting: 'widgetEnabledNavigation', }, { handle: 'craft-related', setting: 'widgetEnabledCraftRelated', }, { handle: 'craft-authors', setting: 'widgetEnabledCraftAuthors', }, { handle: 'craft-sites', setting: 'widgetEnabledCraftSites', }, { handle: 'craft-published', setting: 'widgetEnabledCraftPublished', }, { handle: 'blitz', setting: 'widgetEnabledBlitz', }, { handle: 'craft-queue', setting: 'widgetEnabledCraftQueue', }, { handle: 'craft-search', setting: 'widgetEnabledCraftSearch', }, { handle: 'view-count', setting: 'widgetEnabledViewCount', }, ] %} {% for widgetField in widgetFields %} {% if widgetField.handle in availableAdminBarWidgets %}
{{ svg(widgetPlugins[widgetField.handle].icon) }}
{{ forms.lightswitchField({ disabled: not proEdition, id: widgetField.setting, label: widgetPlugins[widgetField.handle].name, name: widgetField.setting, on: settings[widgetField.setting], }) }}

{{ (widgetPlugins[widgetField.handle].widgetDescription ~ ' ' ~ widgetPlugins[widgetField.handle].widgetSettingsWarning ?? '')|md(inlineOnly=true) }}

{% endif %} {% endfor %}
{% endif %}
{{ forms.lightswitchField({ disabled: not proEdition, label: 'Displays labels next to Admin Bar Widget icons?'|t('guide'), id: 'displayWidgetLabels', name: 'displayWidgetLabels', on: settings.displayWidgetLabels, }) }}
{% set notInstalledPlugins = [] %} {% for plugin in widgetPlugins|keys %} {% if plugin not in availableAdminBarWidgets %} {% set notInstalledPlugins = notInstalledPlugins|merge([plugin]) %} {% endif %} {% endfor %} {% if notInstalledPlugins|length %}

{{ 'More Admin Bar Widgets:'|t('admin-bar') }}

{% endif %}
{% set placeholder %}{% verbatim %}{# Example Popover Widget #} üüüüShow Popover üüüü üüüüüüüüPopover content. üüüü {% endverbatim %}{% endset %} {{ codeEditor.textareaField({ label: 'Custom Widgets'|t('admin-bar'), instructions: 'Use Twig to add your own widgets to Admin Bar. See [the docs for Admin Bar Component](https://github.com/wbrowar/admin-bar-component) to learn how to add buttons, text, and popover HTML.'|t('admin-bar'), id: 'customWidgets', name: "customWidgets", placeholder: placeholder|e('html')|nl2br|replace({"ü": " "}), value: settings.customWidgets, rows: 5, }, "Custom Widgets", { language: "twig", }, { wrapperClass: 'content-pane', }) }}
{% set themeOptions = [ { label: 'Admin Bar Default', value: 'default' }, { label: 'Classic', value: 'classic' }, { label: 'Craft Control Panel', value: 'craft-cp' }, { label: 'Debug', value: 'debug' }, { label: 'EV', value: 'ev' }, { label: 'Frosted', value: 'frosted' }, { label: 'Glass', value: 'glass' }, { label: 'Lemon & Tonic', value: 'lemon-and-tonic' }, { label: 'Sakura', value: 'sakura' }, { label: 'Stacked', value: 'stacked' }, { label: 'Stark', value: 'stark' }, { label: 'Whale', value: 'whale' }, { label: 'Whiskey', value: 'whiskey' }, ] %} {{ forms.selectField({ label: 'Theme'|t('guide'), id: 'theme', name: 'theme', options: themeOptions, value: settings.theme, instructions: 'Style Admin Bar with a preset theme, then override it using the Custom CSS field below.'|t('admin-bar'), }) }} {% set placeholder %} admin-bar { --admin-bar-bg-color: oklch(0.131 0.036 248.399); --admin-bar-color-highlight: oklch(0.55 0.23 28.77); --admin-bar-color-text: rgb(228, 237, 246); } {% endset %} {{ codeEditor.textareaField({ label: 'Custom CSS'|t('admin-bar'), instructions: 'Use CSS Custom Properties or your own custom CSS to re-brand Admin Bar.'|t('admin-bar'), tip: 'You can style the **Preview** area above by using the class: **.admin-bar-settings-preview**'|t('admin-bar'), id: 'customCss', name: "customCss", placeholder: placeholder|replace({" ": " "})|raw|nl2br, value: settings.customCss, rows: 5, }, "Custom CSS", { language: "css", }, { wrapperClass: 'content-pane', }) }} {% set cssDefaults = include('admin-bar/_admin-bar-component-css.css') ~ "\n" ~ adminBarOnPageCss() %}
{{ 'See all of the CSS defaults that can be overwritten using the Custom CSS field, above.'|t('admin-bar') }} {{ codeEditor.textareaField({ label: 'CSS Defaults'|t('admin-bar'), instructions: 'Below is all of the CSS loaded for Admin Bar by default. You can override any of these CSS variables in your front-end stylesheet, or in the Custom CSS field above.'|t('admin-bar'), value: cssDefaults|raw, }, "Code Editor", { language: "css", readOnly: true, }, { maxEditorRows: 0, wrapperClass: 'content-pane', }) }}
{% css %} @layer admin-bar { .admin-bar-settings-preview { top: calc(var(--header-height) + 6px); position: sticky; z-index: 999; } } .admin-bar-settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(30ch, 1fr)); gap: var(--xl) calc(var(--xl) * 2); margin-block-end: calc(var(--xl) * 2); .field { margin-block: 0; } } .admin-bar-settings-2-column { &:has(:nth-child(2)) { display: flex; flex-flow: row wrap; justify-content: space-between; gap: var(--l); & > div { flex: 1 1 400px; } } } .admin-bar-settings-plugin-setting { display: grid; grid-template-columns: 45px 1fr; gap: var(--m); & svg { display: block; width: 45px; height: auto; } .field { margin-block-start: 0; & .instructions { text-wrap: balance; } } } .requires-admin-bar-pro { opacity: .6; .admin-bar-pro & { opacity: unset; } } {% endcss %}