mirror of
https://github.com/BookStackApp/BookStack.git
synced 2025-03-09 02:03:04 +00:00
Updated settings view to have dark-mode color options
Also added link color option, not yet used. Cleaned up tabbed interface control design as part of this.
This commit is contained in:
Dan Brown
parent
d7723b33f3
commit
1f69965c1e
8 changed files with 92 additions and 61 deletions
app/Config
resources
lang/en
sass
views
|
|
@ -16,6 +16,7 @@ return [
|
|||
'app-editor' => 'wysiwyg',
|
||||
'app-color' => '#206ea7',
|
||||
'app-color-light' => 'rgba(32,110,167,0.15)',
|
||||
'link-color' => '#206ea7',
|
||||
'bookshelf-color' => '#a94747',
|
||||
'book-color' => '#077b70',
|
||||
'chapter-color' => '#af4d0d',
|
||||
|
|
|
|||
|
|
@ -36,8 +36,6 @@ return [
|
|||
'app_logo_desc' => 'This is used in the application header bar, among other areas. This image should be 86px in height. Large images will be scaled down.',
|
||||
'app_icon' => 'Application Icon',
|
||||
'app_icon_desc' => 'This icon is used for browser tabs and shortcut icons. This should be a 256px square PNG image.',
|
||||
'app_primary_color' => 'Application Primary Color',
|
||||
'app_primary_color_desc' => 'Sets the primary color for the application including the banner, buttons, and links.',
|
||||
'app_homepage' => 'Application Homepage',
|
||||
'app_homepage_desc' => 'Select a view to show on the homepage instead of the default view. Page permissions are ignored for selected pages.',
|
||||
'app_homepage_select' => 'Select a page',
|
||||
|
|
@ -51,8 +49,12 @@ return [
|
|||
'app_disable_comments_desc' => 'Disables comments across all pages in the application. <br> Existing comments are not shown.',
|
||||
|
||||
// Color settings
|
||||
'content_colors' => 'Content Colors',
|
||||
'content_colors_desc' => 'Sets colors for all elements in the page organisation hierarchy. Choosing colors with a similar brightness to the default colors is recommended for readability.',
|
||||
'color_scheme' => 'Application Color Scheme',
|
||||
'color_scheme_desc' => 'Set the colors to use in the BookStack interface. Colors can be configured separately for dark and light mode to best fit the theme and ensure legibility.',
|
||||
'ui_colors_desc' => 'Set the primary and link colors used in BookStack. The primary color is mainly used for the header banner, buttons and UI decorations, in addition to a few other components.',
|
||||
'app_color' => 'Primary Color',
|
||||
'link_color' => 'Link Color',
|
||||
'content_colors_desc' => 'Set colors for all elements in the page organisation hierarchy. Choosing colors with a similar brightness to the default colors is recommended for readability.',
|
||||
'bookshelf_color' => 'Shelf Color',
|
||||
'book_color' => 'Book Color',
|
||||
'chapter_color' => 'Chapter Color',
|
||||
|
|
|
|||
|
|
@ -237,6 +237,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
.sub-card {
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
|
||||
border: 1.5px solid;
|
||||
@include lightDark(border-color, #E2E2E2, #444);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.outline-hover {
|
||||
border: 1px solid transparent !important;
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -608,36 +608,39 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
|||
|
||||
|
||||
.tab-container .nav-tabs {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
justify-items: start;
|
||||
text-align: start;
|
||||
border-bottom: 1px solid #DDD;
|
||||
@include lightDark(border-color, #ddd, #444);
|
||||
margin-bottom: $-m;
|
||||
.tab-item {
|
||||
padding: $-s;
|
||||
@include lightDark(color, #666, #999);
|
||||
&.selected {
|
||||
border-bottom-width: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
text-align: center;
|
||||
a, .tab-item {
|
||||
padding: $-m;
|
||||
.tab-item {
|
||||
display: inline-block;
|
||||
@include lightDark(color, #666, #999);
|
||||
padding: $-s;
|
||||
@include lightDark(color, rgba(0, 0, 0, .5), rgba(255, 255, 255, .5));
|
||||
cursor: pointer;
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-bottom: 2px solid transparent;
|
||||
margin-bottom: -1px;
|
||||
&.selected {
|
||||
border-bottom: 2px solid var(--color-primary);
|
||||
color: var(--color-primary) !important;
|
||||
border-bottom-color: var(--color-primary) !important;
|
||||
}
|
||||
&:last-child {
|
||||
border-right: 0;
|
||||
&: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));
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-tabs.controls-card {
|
||||
margin-bottom: 0;
|
||||
border-bottom: 0;
|
||||
padding: 0 $-xs;
|
||||
}
|
||||
|
||||
.image-picker .none {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -21,10 +21,10 @@
|
|||
type="button" class="tab-item selected" title="{{ trans('components.image_all_title') }}">@icon('images') {{ trans('components.image_all') }}</button>
|
||||
<button refs="image-manager@filterTabs"
|
||||
data-filter="book"
|
||||
type="button" class="tab-item" title="{{ trans('components.image_book_title') }}">@icon('book', ['class' => 'text-book svg-icon']) {{ trans('entities.book') }}</button>
|
||||
type="button" class="tab-item" title="{{ trans('components.image_book_title') }}">@icon('book', ['class' => 'svg-icon']) {{ trans('entities.book') }}</button>
|
||||
<button refs="image-manager@filterTabs"
|
||||
data-filter="page"
|
||||
type="button" class="tab-item" title="{{ trans('components.image_page_title') }}">@icon('page', ['class' => 'text-page svg-icon']) {{ trans('entities.page') }}</button>
|
||||
type="button" class="tab-item" title="{{ trans('components.image_page_title') }}">@icon('page', ['class' => 'svg-icon']) {{ trans('entities.page') }}</button>
|
||||
</div>
|
||||
<div>
|
||||
<form refs="image-manager@searchForm" class="contained-search-box">
|
||||
|
|
|
|||
|
|
@ -69,42 +69,32 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Primary Color -->
|
||||
<div class="grid half gap-xl">
|
||||
<div>
|
||||
<label class="setting-list-label">{{ trans('settings.app_primary_color') }}</label>
|
||||
<p class="small">{!! trans('settings.app_primary_color_desc') !!}</p>
|
||||
</div>
|
||||
<div component="setting-app-color-picker setting-color-picker"
|
||||
option:setting-color-picker:default="#206ea7"
|
||||
option:setting-color-picker:current="{{ setting('app-color') }}"
|
||||
class="text-m-right pt-xs">
|
||||
<input refs="setting-color-picker@input setting-app-color-picker@input" type="color" value="{{ setting('app-color') }}" name="setting-app-color" id="setting-app-color" placeholder="#206ea7">
|
||||
<input refs="setting-app-color-picker@light-input" type="hidden" value="{{ setting('app-color-light') }}" name="setting-app-color-light" id="setting-app-color-light">
|
||||
<div class="pr-s">
|
||||
<button refs="setting-color-picker@default-button" type="button" class="text-button text-muted mt-s">{{ trans('common.default') }}</button>
|
||||
<span class="sep">|</span>
|
||||
<button refs="setting-color-picker@reset-button" type="button" class="text-button text-muted mt-s">{{ trans('common.reset') }}</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Entity Color -->
|
||||
<!-- App Color Scheme -->
|
||||
<div class="pb-l">
|
||||
<div>
|
||||
<label class="setting-list-label">{{ trans('settings.content_colors') }}</label>
|
||||
<p class="small">{!! trans('settings.content_colors_desc') !!}</p>
|
||||
<div class="mb-l">
|
||||
<label class="setting-list-label">{{ trans('settings.color_scheme') }}</label>
|
||||
<p class="small">{{ trans('settings.color_scheme_desc') }}</p>
|
||||
</div>
|
||||
<div class="grid half pt-m">
|
||||
<div>
|
||||
@include('settings.parts.setting-entity-color-picker', ['type' => 'bookshelf'])
|
||||
@include('settings.parts.setting-entity-color-picker', ['type' => 'book'])
|
||||
@include('settings.parts.setting-entity-color-picker', ['type' => 'chapter'])
|
||||
|
||||
@php
|
||||
$darkMode = boolval(setting()->getForCurrentUser('dark-mode-enabled'));
|
||||
@endphp
|
||||
<div component="tabs" class="tab-container">
|
||||
<div class="nav-tabs controls-card">
|
||||
<button refs="tabs@toggleLight"
|
||||
type="button"
|
||||
class="{{ $darkMode ? '' : 'selected' }} tab-item">@icon('light-mode'){{ trans('common.light_mode') }}</button>
|
||||
<button refs="tabs@toggleDark"
|
||||
type="button"
|
||||
class="{{ $darkMode ? 'selected' : '' }} tab-item">@icon('dark-mode'){{ trans('common.dark_mode') }}</button>
|
||||
</div>
|
||||
<div>
|
||||
@include('settings.parts.setting-entity-color-picker', ['type' => 'page'])
|
||||
@include('settings.parts.setting-entity-color-picker', ['type' => 'page-draft'])
|
||||
<div class="sub-card">
|
||||
<div refs="tabs@contentLight attachments@list" class="{{ $darkMode ? 'hidden' : '' }} p-m">
|
||||
@include('settings.parts.setting-color-scheme', ['mode' => 'light'])
|
||||
</div>
|
||||
<div refs="tabs@contentDark" class="{{ $darkMode ? '' : 'hidden' }} p-m">
|
||||
@include('settings.parts.setting-color-scheme', ['mode' => 'dark'])
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,15 @@
|
|||
{{--
|
||||
@type - Name of entity type
|
||||
@type - Name of color setting
|
||||
--}}
|
||||
@php
|
||||
$keyAppends = ($mode === 'light' ? '' : '-' . $mode);
|
||||
@endphp
|
||||
<div component="setting-color-picker"
|
||||
option:setting-color-picker:default="{{ config('setting-defaults.'. $type .'-color') }}"
|
||||
option:setting-color-picker:current="{{ setting($type .'-color') }}"
|
||||
option:setting-color-picker:default="{{ config('setting-defaults.'. $type .'-color' . $keyAppends) }}"
|
||||
option:setting-color-picker:current="{{ setting($type .'-color' . $keyAppends) }}"
|
||||
class="grid no-break half mb-l">
|
||||
<div>
|
||||
<label for="setting-{{ $type }}-color" class="text-dark">{{ trans('settings.'. str_replace('-', '_', $type) .'_color') }}</label>
|
||||
<label for="setting-{{ $type }}-color{{ $keyAppends }}" class="text-dark">{{ trans('settings.'. str_replace('-', '_', $type) .'_color') }}</label>
|
||||
<button refs="setting-color-picker@default-button" type="button" class="text-button text-muted">{{ trans('common.default') }}</button>
|
||||
<span class="sep">|</span>
|
||||
<button refs="setting-color-picker@reset-button" type="button" class="text-button text-muted">{{ trans('common.reset') }}</button>
|
||||
|
|
@ -14,10 +17,10 @@
|
|||
<div>
|
||||
<input type="color"
|
||||
refs="setting-color-picker@input"
|
||||
value="{{ setting($type .'-color') }}"
|
||||
name="setting-{{ $type }}-color"
|
||||
id="setting-{{ $type }}-color"
|
||||
placeholder="{{ config('setting-defaults.'. $type .'-color') }}"
|
||||
value="{{ setting($type . '-color' . $keyAppends) }}"
|
||||
name="setting-{{ $type }}-color{{ $keyAppends }}"
|
||||
id="setting-{{ $type }}-color{{ $keyAppends }}"
|
||||
placeholder="{{ config('setting-defaults.'. $type .'-color' . $keyAppends) }}"
|
||||
class="small">
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
{{--
|
||||
@mode - 'light' or 'dark'.
|
||||
--}}
|
||||
<p class="small">{{ trans('settings.ui_colors_desc') }}</p>
|
||||
<div class="grid half pt-m">
|
||||
<div>
|
||||
@include('settings.parts.setting-color-picker', ['type' => 'app', 'mode' => $mode])
|
||||
</div>
|
||||
<div>
|
||||
@include('settings.parts.setting-color-picker', ['type' => 'link', 'mode' => $mode])
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<p class="small">{!! trans('settings.content_colors_desc') !!}</p>
|
||||
<div class="grid half pt-m">
|
||||
<div>
|
||||
@include('settings.parts.setting-color-picker', ['type' => 'bookshelf', 'mode' => $mode])
|
||||
@include('settings.parts.setting-color-picker', ['type' => 'book', 'mode' => $mode])
|
||||
@include('settings.parts.setting-color-picker', ['type' => 'chapter', 'mode' => $mode])
|
||||
</div>
|
||||
<div>
|
||||
@include('settings.parts.setting-color-picker', ['type' => 'page', 'mode' => $mode])
|
||||
@include('settings.parts.setting-color-picker', ['type' => 'page-draft', 'mode' => $mode])
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in a new issue