refactor: remove the be_style backend page, instance color via env var

.github/workflows/visual-tests.yml

@@ -101,6 +101,7 @@ jobs:
 
             -   name: Import mock data
                 run: |
+                    echo "REX_INSTANCE_COLOR='#3bb594'" > project/.env.local
                     mkdir -p $GITHUB_WORKSPACE/project/var/data/core/backup && cp -r .tools/visual-tests/fixtures/initial-content.sql $GITHUB_WORKSPACE/project/var/data/core/backup/
                     cp -r .tools/visual-tests/fixtures/media/* $GITHUB_WORKSPACE/project/public/media/
                     cp -f .tools/visual-tests/fixtures/README.md $GITHUB_WORKSPACE/addons/test/README.de.md

.tools/psalm/baseline.xml

@@ -1084,12 +1084,6 @@
       <code><![CDATA[$sql->getValue('id')]]></code>
     </PossiblyNullOperand>
   </file>
-  <file src="pages/system/be_style.customizer.php">
-    <MixedOperand>
-      <code><![CDATA[escape(Core::getConfig('be_style_labelcolor', ''))]]></code>
-      <code><![CDATA[escape(Core::getConfig('be_style_labelcolor', ''))]]></code>
-    </MixedOperand>
-  </file>
   <file src="pages/system/clangs.php">
     <NullOperand>
       <code><![CDATA[escape($sql->getValue('code'))]]></code>

.tools/visual-tests/visual-record.js

@@ -344,10 +344,6 @@ async function main() {
             ]);
             await createScreenshots(page, 'packages_test_reinstalled.png');
 
-            // test customizer
-            await goToUrlOrThrow(page, START_URL + '?page=system/be_style/customizer', { waitUntil: 'load' });
-            await createScreenshots(page, 'system_customizer.png');
-
             // logout
             await page.click('#rex-js-nav-top .rex-logout');
             await page.waitForSelector('.rex-background--ready');

assets_src/scss/_navs.scss

@@ -170,6 +170,63 @@ $transitionDuration: 300ms;
     color: $color-a-lighter;
     font-size: $font-size-large;
 }
+.rex-nav-top-title {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    left: 250px;
+    margin: 0;
+    line-height: 0;
+    white-space: nowrap;
+
+    @media (max-width: $screen-md-max) {
+        left: 235px;
+    }
+
+    a {
+        display: block;
+        padding: 15px;
+        color: #fff;
+
+        &:hover,
+        &:focus {
+            .rex-nav-top-title-name {
+                text-decoration: underline;
+            }
+        }
+    }
+
+    .rex-nav-top-title-name,
+    i {
+        display: inline-block;
+        vertical-align: middle;
+        font-size: 14px;
+        line-height: 20px;
+    }
+
+    .rex-nav-top-title-name {
+        max-width: 300px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        margin-right: 8px;
+    }
+
+    @media (max-width: $grid-float-breakpoint-max) {
+        left: 50%;
+        // center inside brand element, move to the right half the viewport size (50vw), move back by itself (100%) and 10 px
+        transform: translate(calc(50vw - 100% - 10px), -50%);
+        font-size: 20px;
+
+        .rex-nav-top-title-name {
+            display: none;
+        }
+
+        a {
+            padding: 5px 10px;
+        }
+    }
+}
 .rex-nav-meta {
     .navbar-nav {
         > li {
@@ -675,6 +732,14 @@ $transitionDuration: 300ms;
         }
     }
 
+    .rex-nav-top-title {
+        a,
+        a:hover,
+        a:focus {
+            color: $color-text-light;
+        }
+    }
+
     .rex-nav-main {
         background-color: darken($color-grey-4, 1%); // slightly reduce lightness
     }

boot/backend.php

@@ -274,20 +274,6 @@
 Asset::addJsFile(Url::coreAssets('js/redaxo.js'), [Asset::JS_IMMUTABLE => true]);
 
 if (Core::getUser()) {
-    /* Customizer Ergänzungen */
-    Asset::addCssFile(Url::coreAssets('css/customizer.css'));
-    Asset::addJsFile(Url::coreAssets('js/customizer.js'), [Asset::JS_IMMUTABLE => true]);
-
-    if ('' != Core::getConfig('be_style_labelcolor')) {
-        Asset::setJsProperty('customizer_labelcolor', Core::getConfig('be_style_labelcolor'));
-    }
-    if (Core::getConfig('be_style_showlink')) {
-        Asset::setJsProperty(
-            'customizer_showlink',
-            '<h1 class="be-style-customizer-title"><a href="' . Url::frontend() . '" target="_blank" rel="noreferrer noopener"><span class="be-style-customizer-title-name">' . escape(Core::getServerName()) . '</span><i class="rex-icon rex-icon-external-link"></i></a></h1>',
-        );
-    }
-
     Asset::addJsFile(Url::coreAssets('js/linkmap.js'), [Asset::JS_IMMUTABLE => true]);
 
     if ('content' == Controller::getCurrentPagePart(1)) {

fragments/core/header.php

@@ -7,6 +7,8 @@
 use Redaxo\Core\Translation\I18n;
 use Redaxo\Core\View\Fragment;
 
+use function Redaxo\Core\View\escape;
+
 /**
  * @var Fragment $this
  * @psalm-scope-this Fragment
@@ -15,10 +17,12 @@
 $isPopup = Controller::requireCurrentPageObject()->isPopup();
 $isLogin = ('login' === Controller::getCurrentPage());
 $isSetup = ('setup' === Controller::getCurrentPage());
+
+$instanceColor = Core::getInstanceColor();
 ?>
 
         <div id="rex-js-nav-top" class="rex-nav-top<?php if (!$isPopup && !$isSetup): ?> rex-nav-top-is-fixed<?php endif ?>">
-            <nav class="navbar navbar-default">
+            <nav class="navbar navbar-default"<?= null !== $instanceColor ? ' style="border-bottom: 5px solid ' . escape($instanceColor) . '"' : '' ?>>
                 <div class="container-fluid">
 
                     <?php if (!$isLogin && !$isPopup): ?>
@@ -43,6 +47,9 @@
                                 <i class="rex-icon rex-icon-heartbeat rex-pulse"></i>
                             </a>
                         <?php endif ?>
+                        <?php if (!$isPopup && Core::getUser()): ?>
+                            <h1 class="rex-nav-top-title"><a href="<?= Url::frontend() ?>" target="_blank" rel="noreferrer noopener"><span class="rex-nav-top-title-name"><?= escape(Core::getServerName()) ?></span><i class="rex-icon rex-icon-external-link"></i></a></h1>
+                        <?php endif ?>
                     </div>
 
                     <?= $this->meta_navigation ?>

fragments/core/top.php

@@ -92,7 +92,7 @@
     <link rel="icon" type="image/png" sizes="32x32" href="<?= Url::coreAssets('icons/favicon-32x32.png') ?>">
     <link rel="icon" type="image/png" sizes="16x16" href="<?= Url::coreAssets('icons/favicon-16x16.png') ?>">
     <link rel="manifest" href="<?= Url::coreAssets('icons/site.webmanifest') ?>">
-    <link rel="mask-icon" href="<?= Url::coreAssets('icons/safari-pinned-tab.svg') ?>" color="<?= escape((string) Core::getConfig('be_style_labelcolor', '#4d99d3')) ?>">
+    <link rel="mask-icon" href="<?= Url::coreAssets('icons/safari-pinned-tab.svg') ?>" color="<?= escape(Core::getInstanceColor() ?? '#4d99d3') ?>">
     <meta name="msapplication-TileColor" content="#2d89ef">
 
     <?= $this->pageHeader ?>

lang/de_de.lang

@@ -816,28 +816,6 @@ perm_general_phpmailer[] = PHPMailer-Einstellungen
 phpmailer_archive_maintenance = Archiv-Wartung
 phpmailer_archive_purge_info = Das Archiv kann über den Cronjob "E-Mail-Archiv bereinigen" regelmäßig bereinigt werden, um ältere E-Mails automatisch zu entfernen.
 
-# be_style
-be_style = Backend style
-be_style_help = Hilfe
-be_style_icons = Icons
-be_style_themes = Themes
-customizer = Customizer
-customizer_features = Features
-customizer_labeling = Ergänzungen
-customizer_labelcolor = Erkennungsfarbe
-customizer_labelcolor_notice = Beliebige valide CSS-Farbangabe (<code>#03f0ab</code>, <code>rgba(255, 100, 0, 0.5)</code> etc.)
-customizer_showlink = Link zur Webseite anzeigen ?
-
-customizer_config_updated = Eingaben wurden gespeichert
-customizer_config_update_failed = Eingaben wurden nicht gespeichert
-
-customizer_update = Einstellungen speichern
-
-customizer_projectname = Projektname
-customizer_textarea = breite Textarea unter Template und Module
-customizer_liquid = Liquid Layout
-customizer_nav_flyout = Navigation mit Flyout
-
 # mediapool
 pool_name = Medienpool
 pool_kats = Kategorien

lang/en_gb.lang

@@ -782,28 +782,6 @@ perm_general_phpmailer[] = PHPMailer settings
 phpmailer_archive_maintenance = Archive Maintenance
 phpmailer_archive_purge_info = The archive can be regularly cleaned using the Purge Cronjob to automatically remove older emails.
 
-# be_style
-be_style = Backend style
-be_style_help = Help
-be_style_icons = Icons
-be_style_themes = Themes
-customizer = customizer
-customizer_features = Functions
-customizer_labeling = Additions
-customizer_labelcolor = Color
-customizer_labelcolor_notice = Any valid css color expression (<code>#03f0ab</code>, <code>rgba(255, 100, 0, 0.5)</code> etc.)
-customizer_showlink = Show link to website?
-
-customizer_config_updated = Settings have been saved
-customizer_config_update_failed = Settings were not saved
-
-customizer_update = Save settings
-
-customizer_projectname = Project name
-customizer_textarea = Width of textarea in templates and modules
-customizer_liquid = Liquid layout
-customizer_nav_flyout = Navigation with flyout
-
 # mediapool
 pool_name = Mediapool
 pool_kats = Categories