Toggle Button optimiert, fixed #69

tbaddade · Sep 15, 2022 · 90117a6 · 90117a6
1 parent bbc7268
commit 90117a6
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 24 deletions.
diff --git a/assets/watson.css b/assets/watson.css
@@ -8,6 +8,7 @@
  */
 
 :root {
+    --color-a-lightest: 255, 255, 255; /* #fff */
     --color-a-lighter: 243, 246, 251; /* #f3f6fb */
     --color-a-light: 223, 227, 233; /* #dfe3e9 */
     --color-a: 156, 165, 178; /* #9ca5b2 */
@@ -30,21 +31,41 @@
 
 .watson-btn {
     display: inline-block;
-    margin-right: 10px;
-    padding: 5px 14px;
     background-color: transparent;
     border: 0;
-    vertical-align: middle;
+    line-height: 0;
+}
+.rex-nav-top .watson-btn {
+    margin-right: 10px;
+    padding: 14px 14px;
+    color: rgba(var(--color-a-lightest));
+    transition: color .2s ease-in-out;
+}
+.rex-nav-top .watson-btn:hover {
+    color: rgba(var(--color-a-darker));
+}
+body.rex-theme-dark .rex-nav-top .watson-btn {
+    color: rgba(var(--color-a-lightest), .75);
+}
+body.rex-theme-dark .rex-nav-top .watson-btn:hover {
+    color: rgba(var(--color-a-lightest));
+}
+@media (prefers-color-scheme: dark) {
+    body:not(.rex-theme-light) .rex-nav-top .watson-btn {
+        color: rgba(var(--color-a-lightest), .75);
+    }
+    body:not(.rex-theme-light) .rex-nav-top .watson-btn:hover {
+        color: rgba(var(--color-a-lightest));
+    }
 }
 .watson-btn svg {
-    width: 20px;
+    width: 22px;
+    height: 22px;
     fill: currentColor;
-}
-.watson-btn:hover svg {
-    fill: rgba(var(--color-a-darker));
+    vertical-align: -0.15em;
 }
 @media (max-width: 991px) {
-    .watson-btn {
+    .rex-nav-top .watson-btn {
         padding: 0;
     }
     .watson-btn svg {
@@ -71,6 +92,11 @@
 body.rex-theme-dark #watson-agent {
     background-color: rgba(var(--color-a-darker));
 }
+@media (prefers-color-scheme: dark) {
+    body:not(.rex-theme-light) #watson-agent {
+        background-color: rgba(var(--color-a-darker));
+    }
+}
 @media (max-width: 767px) {
     #watson-agent {
         padding: 4px;
@@ -96,6 +122,11 @@ body.rex-theme-dark #watson-agent {
 body.rex-theme-dark #watson-agent input[type="text"] {
     background-color: rgba(var(--color-a-dark));
 }
+@media (prefers-color-scheme: dark) {
+    body:not(.rex-theme-light) #watson-agent input[type="text"] {
+        background-color: rgba(var(--color-a-dark));
+    }
+}
 @media (max-width: 767px) {
     #watson-agent input[type="text"] {
         padding-left: 4px;
@@ -121,6 +152,11 @@ body.rex-theme-dark #watson-agent input[type="text"] {
 body.rex-theme-dark #watson-agent .watson-logo > svg {
     fill: rgba(var(--color-a));
 }
+@media (prefers-color-scheme: dark) {
+    body:not(.rex-theme-light) #watson-agent .watson-logo > svg {
+        fill: rgba(var(--color-a));
+    }
+}
 #watson-agent-overlay {
     display: none;
     position: fixed;
@@ -146,6 +182,11 @@ body.rex-theme-dark #watson-agent .watson-logo > svg {
 body.rex-theme-dark .watson-result[data-legend]:not([data-legend=""])::before {
     background-color: rgba(var(--color-a-darker));
 }
+@media (prefers-color-scheme: dark) {
+    body:not(.rex-theme-light) .watson-result[data-legend]:not([data-legend=""])::before {
+        background-color: rgba(var(--color-a-darker));
+    }
+}
 
 .watson-value {
     position: relative;
@@ -292,6 +333,11 @@ body.rex-theme-dark .tt-suggestion.tt-cursor {
 body.rex-theme-dark .watson-quick-look-frame {
     background-color: rgba(var(--color-a-dark));
 }
+@media (prefers-color-scheme: dark) {
+    body:not(.rex-theme-light) .watson-quick-look-frame {
+        background-color: rgba(var(--color-a-dark));
+    }
+}
 .watson-quick-look-frame iframe {
     width: 1200px;
     height: 800px;

diff --git a/assets/watson.js b/assets/watson.js
@@ -91,7 +91,7 @@ jQuery(function($){
     });
 
     // support buttons created dynamically
-    $(document).on('click', '.watson-btn', function(){
+    $(document).on('click', '[data-watson-toggle="agent"]', function(){
         checkWatsonAgent();
     });
 

diff --git a/lib/Watson/Foundation/Extension.php b/lib/Watson/Foundation/Extension.php
@@ -16,40 +16,38 @@ class Extension
     public static function head(\rex_extension_point $ep)
     {
         $js_properties = json_encode(
-                            [
-                                'resultLimit' => Watson::getResultLimit(),
-                                'agentHotkey' => Watson::getAgentHotkey(),
-                                'quicklookHotkey' => Watson::getQuicklookHotkey(),
-                                'backend' => true,
-                                'backendUrl' => \rex_url::backendPage('watson', [], false),
-                                'backendRemoteUrl' => \rex_url::backendPage('watson', ['watson_query' => ''], false).'%QUERY',
-                                'wildcard' => '%QUERY',
-                            ]
-                        );
+            [
+                'resultLimit' => Watson::getResultLimit(),
+                'agentHotkey' => Watson::getAgentHotkey(),
+                'quicklookHotkey' => Watson::getQuicklookHotkey(),
+                'backend' => true,
+                'backendUrl' => \rex_url::backendPage('watson', [], false),
+                'backendRemoteUrl' => \rex_url::backendPage('watson', ['watson_query' => ''], false).'%QUERY',
+                'wildcard' => '%QUERY',
+            ]
+        );
 
         if ($js_properties) {
             $ep->setSubject($ep->getSubject()."\n".'
 
                 <script type="text/javascript">
-                    <!--
                     if (typeof($watsonSettings) == "undefined") {
                         var $watsonSettings = '.$js_properties.';
                     }
-                    //-->
                 </script>'
             );
         }
     }
 
     public static function navigation(\rex_extension_point $ep)
     {
-        $ep->setSubject(str_replace('<i class="watson-navigation-icon"></i>', '<span class="watson-navigation-icon">'.\rex_file::get(\rex_path::addonAssets('watson', 'watson-logo.svg')).'</span>', $ep->getSubject()));
+        $ep->setSubject(str_replace('<i class="watson-navigation-icon"></i>', '<span class="watson-navigation-icon">'.Watson::getIcon().'</span>', $ep->getSubject()));
     }
 
     public static function toggleButton(\rex_extension_point $ep)
     {
         $subject = $ep->getSubject();
-        array_unshift($subject, '<li><button class="watson-btn">'.\rex_file::get(\rex_path::addonAssets('watson', 'watson-logo.svg')).'</button></li>');
+        array_unshift($subject, '<li><button class="watson-btn" data-watson-toggle="agent">'.Watson::getIcon().'</button></li>');
 
         $ep->setSubject($subject);
     }

diff --git a/lib/Watson/Foundation/Watson.php b/lib/Watson/Foundation/Watson.php
@@ -68,11 +68,22 @@ public static function getAssetsDir()
         return \rex_path::addonAssets('watson');
     }
 
+    public static function getIcon()
+    {
+        return \rex_file::get(\rex_path::addonAssets('watson', 'watson-logo.svg'));
+    }
+
+    public static function getToggleButton(array $attributes = [])
+    {
+        $attributes = array_merge(['class' => 'watson-btn', 'data-watson-toggle' => 'agent'], $attributes);
+        return sprintf('<button%s>%s</button>', \rex_string::buildAttributes($attributes), self::getIcon());
+    }
+
     public static function translate($key, ...$params)
     {
         return \rex_i18n::msg($key, ...$params);
     }
-    
+
     public static function hasProviders() {
         $providers = \rex_addon::get('watson')->getProperty('providers');
         $providers = \rex_extension::registerPoint(new \rex_extension_point('WATSON_PROVIDER', $providers));