mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-10-01 01:36:00 -04:00
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.
This commit is contained in:
Dan Brown
parent
948e95e1ad
commit
f5ef52ca59
@ -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);
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
@include lightDark(border-right-color, #DDD, #000);
|
||||
border-inline-end: 1px solid #DDD;
|
||||
@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));
|
||||
}
|
||||
}
|
||||
.tab-container.tab-primary [role="tablist"] button[role="tab"][aria-selected="true"] {
|
||||
color: var(--color-primary) !important;
|
||||
border-bottom-color: var(--color-primary) !important;
|
||||
&:focus {
|
||||
outline: 1px dotted var(--color-primary);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
}
|
||||
.tab-container [role="tablist"].controls-card {
|
||||
margin-bottom: 0;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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 role="tablist" class="image-manager-filters flex-container-row">
|
||||
<div class="tab-container bordered mx-m my-s">
|
||||
<div role="tablist" class="image-manager-filters flex-container-row mb-none">
|
||||
<button refs="image-manager@filterTabs"
|
||||
data-filter="all"
|
||||
role="tab"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user