Image manager: cleaned up style changes, dark mode support

- Updated tab handling to be smarter on initial tab selection, to first
  target non-hidden tab panels where they may be handled server-side.
- Extracted contained search box handling styles to _forms.scss, after
  merging with image-manager-specific styles since this is only usage of
  contained variant.
- Aligned focus handling on image manager UI elements.

resources/js/components/tabs.js

@@ -70,7 +70,8 @@ export class Tabs extends Component {
     }
 
     activate() {
-        this.show(this.panels[0].id);
+        const panelToShow = this.panels.find(p => !p.hasAttribute('hidden')) || this.panels[0];
+        this.show(panelToShow.id);
         this.tabList.toggleAttribute('hidden', false);
     }
 

resources/sass/_components.scss

@@ -350,7 +350,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
   position: sticky;
   top: 0;
   z-index: 5;
-  background-color: rgba(255, 255, 255, 0.85);
+  @include lightDark(background-color, rgba(255, 255, 255, 0.85), rgba(80, 80, 80, 0.85));
 }
 .image-manager-filter-bar-bg {
   position: absolute;
@@ -361,40 +361,18 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
   opacity: .15;
   z-index: -1;
 }
-.image-manager-filter-bar .contained-search-box {
-  box-shadow: $bs-med;
-  border-radius: 4px;
-  margin: $-s $-m;
-  overflow: hidden;
-  input, button {
-    border: 0;
-  }
-  input:focus, input:active {
-    border: 0;
-    outline: 1px dotted var(--color-primary);
-  }
-  button {
-    width: 48px;
-    color: #444;
-    border-left: 1px solid #DDD;
-    background-color: #FFF;
-  }
-}
 
-@include smaller-than($s) {
-  .image-manager-filter-bar .contained-search-box input {
-    width: 180px;
-  }
-}
 .image-manager-filters {
   box-shadow: $bs-med;
   border-radius: 4px;
-  margin: $-s $-m;
   overflow: hidden;
   border-bottom: 0 !important;
+  @include whenDark {
+    border: 1px solid #000 !important;
+  }
   button {
     line-height: 0;
-    background-color: #FFF;
+    @include lightDark(background-color, #FFF, #333);
   }
   svg {
     margin: 0;
@@ -527,10 +505,10 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
 }
 
 .tab-container.bordered [role="tablist"] button[role="tab"] {
-  border-right: 1px solid #DDD;
+  border-inline-end: 1px solid #DDD;
-  @include lightDark(border-right-color, #DDD, #000);
+  @include lightDark(border-inline-end-color, #DDD, #000);
   &:last-child {
-    border-right: none;
+    border-inline-end: none;
   }
 }
 
@@ -554,15 +532,16 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
   &[aria-selected="true"] {
     color: var(--color-link) !important;
     border-bottom-color: var(--color-link) !important;
+    outline: 0 !important;
   }
   &:hover, &:focus {
     @include lightDark(color, rgba(0, 0, 0, .8), rgba(255, 255, 255, .8));
     @include lightDark(border-bottom-color,  rgba(0, 0, 0, .2), rgba(255, 255, 255, .2));
   }
-}
+  &:focus {
-.tab-container.tab-primary [role="tablist"] button[role="tab"][aria-selected="true"] {
+    outline: 1px dotted var(--color-primary);
-  color: var(--color-primary) !important;
+    outline-offset: -2px;
-  border-bottom-color: var(--color-primary) !important;
+  }
 }
 .tab-container [role="tablist"].controls-card {
   margin-bottom: 0;

resources/sass/_forms.scss

@@ -467,6 +467,58 @@ div[editor-type="markdown"] .title-input.page-title input[type="text"] {
   }
 }
 
+.contained-search-box {
+  display: flex;
+  height: 38px;
+  z-index: -1;
+  &.floating {
+    box-shadow: $bs-med;
+    border-radius: 4px;
+    overflow: hidden;
+    @include whenDark {
+      border: 1px solid #000;
+    }
+  }
+  input, button {
+    height: 100%;
+    border-radius: 0;
+    border: 1px solid #ddd;
+    @include lightDark(border-color, #ddd, #000);
+    margin-inline-start: -1px;
+    &:last-child {
+      border-inline-end: 0;
+    }
+  }
+  input {
+    border: 0;
+    flex: 5;
+    padding: $-xs $-s;
+    &:focus, &:active {
+      outline: 1px dotted var(--color-primary);
+      outline-offset: -2px;
+      border: 0;
+    }
+  }
+  button {
+    border: 0;
+    width: 48px;
+    border-inline-start: 1px solid #DDD;
+    background-color: #FFF;
+    @include lightDark(background-color, #FFF, #333);
+    @include lightDark(color, #444, #AAA);
+  }
+  button:focus {
+    outline: 1px dotted var(--color-primary);
+    outline-offset: -2px;
+  }
+  svg {
+    margin: 0;
+  }
+  @include smaller-than($s) {
+    width: 180px;
+  }
+}
+
 .outline > input {
   border: 0;
   border-bottom: 2px solid #DDD;

resources/sass/styles.scss

@@ -117,44 +117,6 @@ $loadingSize: 10px;
   }
 }
 
-.contained-search-box {
-  display: flex;
-  height: 38px;
-  z-index: -1;
-  input, button {
-    height: 100%;
-    border-radius: 0;
-    border: 1px solid #ddd;
-    @include lightDark(border-color, #ddd, #000);
-    margin-inline-start: -1px;
-    &:last-child {
-      border-inline-end: 0;
-    }
-  }
-  input {
-    flex: 5;
-    padding: $-xs $-s;
-    &:focus, &:active {
-      outline: 1px dotted var(--color-primary);
-      outline-offset: -2px;
-      border: 1px solid #ddd;
-      @include lightDark(border-color, #ddd, #000);
-    }
-  }
-  button {
-    width: 60px;
-  }
-  button.primary-background {
-    border-color: var(--color-primary);
-  }
-  button i {
-    padding: 0;
-  }
-  svg {
-    margin: 0;
-  }
-}
-
 .entity-selector {
   border: 1px solid #DDD;
   @include lightDark(border-color, #ddd, #111);

resources/views/pages/parts/image-manager.blade.php

@@ -40,7 +40,7 @@
                                 role="tab">{{ trans('components.image_details') }}</button>
                     </div>
                 </div>
-                <div class="flex-container-row flex-fill">
+                <div class="flex-container-row flex-fill flex">
                     <div id="image-manager-list"
                          tabindex="0"
                          role="tabpanel"
@@ -49,7 +49,7 @@
                         <div class="image-manager-filter-bar flex-container-row wrap justify-space-between">
                             <div class="primary-background image-manager-filter-bar-bg"></div>
                             <div>
-                                <form refs="image-manager@searchForm" class="contained-search-box">
+                                <form refs="image-manager@searchForm" class="contained-search-box floating mx-m my-s">
                                     <input refs="image-manager@searchInput"
                                            placeholder="{{ trans('components.image_search_hint') }}"
                                            type="text">
@@ -62,8 +62,8 @@
                                             title="{{ trans('common.search') }}">@icon('search')</button>
                                 </form>
                             </div>
-                            <div class="tab-container bordered tab-primary">
+                            <div class="tab-container bordered mx-m my-s">
-                                <div role="tablist" class="image-manager-filters flex-container-row">
+                                <div role="tablist" class="image-manager-filters flex-container-row mb-none">
                                     <button refs="image-manager@filterTabs"
                                             data-filter="all"
                                             role="tab"