'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',
'page-color' => '#206ea7',
'page-draft-color' => '#7e50b1',
+ 'app-color-dark' => '#195785',
+ 'app-color-light-dark' => 'rgba(32,110,167,0.15)',
+ 'link-color-dark' => '#429fe3',
+ 'bookshelf-color-dark' => '#ff5454',
+ 'book-color-dark' => '#389f60',
+ 'chapter-color-dark' => '#ee7a2d',
+ 'page-color-dark' => '#429fe3',
+ 'page-draft-color-dark' => '#a66ce8',
'app-custom-head' => false,
'registration-enabled' => false,
--- /dev/null
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Support\Facades\DB;
+
+class CopyColorSettingsForDarkMode extends Migration
+{
+ /**
+ * Run the migrations.
+ *
+ * @return void
+ */
+ public function up()
+ {
+ $colorSettings = [
+ 'app-color',
+ 'app-color-light',
+ 'bookshelf-color',
+ 'book-color',
+ 'chapter-color',
+ 'page-color',
+ 'page-draft-color',
+ ];
+
+ $existing = DB::table('settings')
+ ->whereIn('setting_key', $colorSettings)
+ ->get()->toArray();
+
+ $newData = [];
+ foreach ($existing as $setting) {
+ $newSetting = (array) $setting;
+ $newSetting['setting_key'] .= '-dark';
+ $newData[] = $newSetting;
+
+ if ($newSetting['setting_key'] === 'app-color-dark') {
+ $newSetting['setting_key'] = 'link-color';
+ $newData[] = $newSetting;
+ $newSetting['setting_key'] = 'link-color-dark';
+ $newData[] = $newSetting;
+ }
+ }
+
+ DB::table('settings')->insert($newData);
+ }
+
+ /**
+ * Reverse the migrations.
+ *
+ * @return void
+ */
+ public function down()
+ {
+ $colorSettings = [
+ 'app-color-dark',
+ 'link-color',
+ 'link-color-dark',
+ 'app-color-light-dark',
+ 'bookshelf-color-dark',
+ 'book-color-dark',
+ 'chapter-color-dark',
+ 'page-color-dark',
+ 'page-draft-color-dark',
+ ];
+
+ DB::table('settings')
+ ->whereIn('setting_key', $colorSettings)
+ ->delete();
+ }
+}
this.stopEdit();
/** @var {Tabs} */
const tabs = window.$components.firstOnElement(this.mainTabs, 'tabs');
- tabs.show('items');
+ tabs.show('attachment-panel-items');
window.$http.get(`/attachments/get/page/${this.pageId}`).then(resp => {
this.list.innerHTML = resp.data;
window.$components.init(this.list);
}
setActiveFilterTab(filterName) {
- this.filterTabs.forEach(t => t.classList.remove('selected'));
- const activeTab = this.filterTabs.find(t => t.dataset.filter === filterName);
- if (activeTab) {
- activeTab.classList.add('selected');
+ for (const tab of this.filterTabs) {
+ const selected = tab.dataset.filter === filterName;
+ tab.setAttribute('aria-selected', selected ? 'true' : 'false');
}
}
export {PermissionsTable} from "./permissions-table.js"
export {Pointer} from "./pointer.js"
export {Popup} from "./popup.js"
-export {SettingAppColorPicker} from "./setting-app-color-picker.js"
+export {SettingAppColorScheme} from "./setting-app-color-scheme.js"
export {SettingColorPicker} from "./setting-color-picker.js"
export {SettingHomepageControl} from "./setting-homepage-control.js"
export {ShelfSort} from "./shelf-sort.js"
+++ /dev/null
-import {Component} from "./component";
-
-export class SettingAppColorPicker extends Component {
-
- setup() {
- this.colorInput = this.$refs.input;
- this.lightColorInput = this.$refs.lightInput;
-
- this.colorInput.addEventListener('change', this.updateColor.bind(this));
- this.colorInput.addEventListener('input', this.updateColor.bind(this));
- }
-
- /**
- * Update the app colors as a preview, and create a light version of the color.
- */
- updateColor() {
- const hexVal = this.colorInput.value;
- const rgb = this.hexToRgb(hexVal);
- const rgbLightVal = 'rgba('+ [rgb.r, rgb.g, rgb.b, '0.15'].join(',') +')';
-
- this.lightColorInput.value = rgbLightVal;
-
- const customStyles = document.getElementById('custom-styles');
- const oldColor = customStyles.getAttribute('data-color');
- const oldColorLight = customStyles.getAttribute('data-color-light');
-
- customStyles.innerHTML = customStyles.innerHTML.split(oldColor).join(hexVal);
- customStyles.innerHTML = customStyles.innerHTML.split(oldColorLight).join(rgbLightVal);
-
- customStyles.setAttribute('data-color', hexVal);
- customStyles.setAttribute('data-color-light', rgbLightVal);
- }
-
- /**
- * Covert a hex color code to rgb components.
- * @attribution https://stackoverflow.com/a/5624139
- * @param {String} hex
- * @returns {{r: Number, g: Number, b: Number}}
- */
- hexToRgb(hex) {
- const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
- return {
- r: result ? parseInt(result[1], 16) : 0,
- g: result ? parseInt(result[2], 16) : 0,
- b: result ? parseInt(result[3], 16) : 0
- };
- }
-
-}
--- /dev/null
+import {Component} from "./component";
+
+export class SettingAppColorScheme extends Component {
+
+ setup() {
+ this.container = this.$el;
+ this.mode = this.$opts.mode;
+ this.lightContainer = this.$refs.lightContainer;
+ this.darkContainer = this.$refs.darkContainer;
+
+ this.container.addEventListener('tabs-change', event => {
+ const panel = event.detail.showing;
+ const newMode = (panel === 'color-scheme-panel-light') ? 'light' : 'dark';
+ this.handleModeChange(newMode);
+ });
+
+ const onInputChange = (event) => {
+ this.updateAppColorsFromInputs();
+
+ if (event.target.name.startsWith('setting-app-color')) {
+ this.updateLightForInput(event.target);
+ }
+ };
+ this.container.addEventListener('change', onInputChange);
+ this.container.addEventListener('input', onInputChange);
+ }
+
+ handleModeChange(newMode) {
+ this.mode = newMode;
+ const isDark = (newMode === 'dark');
+
+ document.documentElement.classList.toggle('dark-mode', isDark);
+ this.updateAppColorsFromInputs();
+ }
+
+ updateAppColorsFromInputs() {
+ const inputContainer = this.mode === 'dark' ? this.darkContainer : this.lightContainer;
+ const inputs = inputContainer.querySelectorAll('input[type="color"]');
+ for (const input of inputs) {
+ const splitName = input.name.split('-');
+ const colorPos = splitName.indexOf('color');
+ let cssId = splitName.slice(1, colorPos).join('-');
+ if (cssId === 'app') {
+ cssId = 'primary';
+ }
+
+ const varName = '--color-' + cssId;
+ document.body.style.setProperty(varName, input.value);
+ }
+ }
+
+ /**
+ * Update the 'light' app color variant for the given input.
+ * @param {HTMLInputElement} input
+ */
+ updateLightForInput(input) {
+ const lightName = input.name.replace('-color', '-color-light');
+ const hexVal = input.value;
+ const rgb = this.hexToRgb(hexVal);
+ const rgbLightVal = 'rgba('+ [rgb.r, rgb.g, rgb.b, '0.15'].join(',') +')';
+
+ console.log(input.name, lightName, hexVal, rgbLightVal)
+ const lightColorInput = this.container.querySelector(`input[name="${lightName}"][type="hidden"]`);
+ lightColorInput.value = rgbLightVal;
+ }
+
+ /**
+ * Covert a hex color code to rgb components.
+ * @attribution https://stackoverflow.com/a/5624139
+ * @param {String} hex
+ * @returns {{r: Number, g: Number, b: Number}}
+ */
+ hexToRgb(hex) {
+ const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+ return {
+ r: result ? parseInt(result[1], 16) : 0,
+ g: result ? parseInt(result[2], 16) : 0,
+ b: result ? parseInt(result[3], 16) : 0
+ };
+ }
+
+}
setValue(value) {
this.colorInput.value = value;
- this.colorInput.dispatchEvent(new Event('change'));
+ this.colorInput.dispatchEvent(new Event('change', {bubbles: true}));
}
}
\ No newline at end of file
-import {onSelect} from "../services/dom";
import {Component} from "./component";
/**
* Tabs
- * Works by matching 'tabToggle<Key>' with 'tabContent<Key>' sections.
+ * Uses accessible attributes to drive its functionality.
+ * On tab wrapping element:
+ * - role=tablist
+ * On tabs (Should be a button):
+ * - id
+ * - role=tab
+ * - aria-selected=true/false
+ * - aria-controls=<id-of-panel-section>
+ * On panels:
+ * - id
+ * - tabindex=0
+ * - role=tabpanel
+ * - aria-labelledby=<id-of-tab-for-panel>
+ * - hidden (If not shown by default).
*/
export class Tabs extends Component {
setup() {
- this.tabContentsByName = {};
- this.tabButtonsByName = {};
- this.allContents = [];
- this.allButtons = [];
+ this.container = this.$el;
+ this.tabs = Array.from(this.container.querySelectorAll('[role="tab"]'));
+ this.panels = Array.from(this.container.querySelectorAll('[role="tabpanel"]'));
- for (const [key, elems] of Object.entries(this.$manyRefs || {})) {
- if (key.startsWith('toggle')) {
- const cleanKey = key.replace('toggle', '').toLowerCase();
- onSelect(elems, e => this.show(cleanKey));
- this.allButtons.push(...elems);
- this.tabButtonsByName[cleanKey] = elems;
+ this.container.addEventListener('click', event => {
+ const button = event.target.closest('[role="tab"]');
+ if (button) {
+ this.show(button.getAttribute('aria-controls'));
}
- if (key.startsWith('content')) {
- const cleanKey = key.replace('content', '').toLowerCase();
- this.tabContentsByName[cleanKey] = elems;
- this.allContents.push(...elems);
- }
- }
+ });
}
- show(key) {
- this.allContents.forEach(c => {
- c.classList.add('hidden');
- c.classList.remove('selected');
- });
- this.allButtons.forEach(b => b.classList.remove('selected'));
+ show(sectionId) {
+ for (const panel of this.panels) {
+ panel.toggleAttribute('hidden', panel.id !== sectionId);
+ }
- const contents = this.tabContentsByName[key] || [];
- const buttons = this.tabButtonsByName[key] || [];
- if (contents.length > 0) {
- contents.forEach(c => {
- c.classList.remove('hidden')
- c.classList.add('selected')
- });
- buttons.forEach(b => b.classList.add('selected'));
+ for (const tab of this.tabs) {
+ const tabSection = tab.getAttribute('aria-controls');
+ const selected = tabSection === sectionId;
+ tab.setAttribute('aria-selected', selected ? 'true' : 'false');
}
+
+ this.$emit('change', {showing: sectionId});
}
}
\ No newline at end of file
if (!element) return;
element.scrollIntoView({behavior: 'smooth'});
- const color = document.getElementById('custom-styles').getAttribute('data-color-light');
+ const color = getComputedStyle(document.body).getPropertyValue('--color-primary-light');
const initColor = window.getComputedStyle(element).getPropertyValue('background-color');
element.style.backgroundColor = color;
setTimeout(() => {
'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',
'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 modes to best fit the theme and ensure legibility.',
+ 'ui_colors_desc' => 'Set the primary color and default link color for BookStack. The primary color is mainly used for the header banner, buttons and interface decorations. The default link color is used for text-based links and actions, both within written content and in the Bookstack interface.',
+ 'app_color' => 'Primary Color',
+ 'link_color' => 'Default 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',
}
}
+.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 {
text-transform: uppercase;
border: 1px solid var(--color-primary);
vertical-align: top;
- @include lightDark(filter, none, saturate(0.8) brightness(0.8));
&:hover, &:focus, &:active {
background-color: var(--color-primary);
text-decoration: none;
user-select: none;
font-size: 0.75rem;
line-height: 1.4em;
- color: var(--color-primary);
- @include whenDark {
- color: #AAA;
- }
+ color: var(--color-link);
&:active {
outline: 0;
}
text-decoration: none;
}
&:hover, &:focus {
- color: var(--color-primary);
- fill: var(--color-primary);
+ color: var(--color-link);
+ fill: var(--color-link);
}
}
.text-button.hover-underline:hover {
background-color: var(--color-primary-light);
@include whenDark {
background: #000;
- .text-primary {
+ .text-link {
color: #AAA !important;
}
}
}
+.link-background {
+ background-color: var(--color-link) !important;
+}
/*
* Status text colors
fill: var(--color-primary) !important;
}
+.text-link, .text-link:hover, .text-link-hover:hover {
+ color: var(--color-link) !important;
+ fill: var(--color-link) !important;
+}
+
.text-muted {
@include lightDark(color, #575757, #888888, true);
fill: currentColor !important;
}
-.tab-container .nav-tabs {
+.tab-container [role="tablist"] {
+ 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;
- display: inline-block;
- @include lightDark(color, #666, #999);
- cursor: pointer;
- border-right: 1px solid rgba(0, 0, 0, 0.1);
- border-bottom: 2px solid transparent;
- &.selected {
- border-bottom: 2px solid var(--color-primary);
- }
- &:last-child {
- border-right: 0;
- }
+.tab-container [role="tablist"] button[role="tab"],
+.image-manager [role="tablist"] button[role="tab"] {
+ display: inline-block;
+ padding: $-s;
+ @include lightDark(color, rgba(0, 0, 0, .5), rgba(255, 255, 255, .5));
+ cursor: pointer;
+ border-bottom: 2px solid transparent;
+ margin-bottom: -1px;
+ &[aria-selected="true"] {
+ color: var(--color-link) !important;
+ border-bottom-color: var(--color-link) !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 [role="tablist"].controls-card {
+ margin-bottom: 0;
+ border-bottom: 0;
+ padding: 0 $-xs;
+}
.image-picker .none {
display: none;
border-radius: 2px;
display: inline-block;
border: 2px solid currentColor;
- opacity: 0.6;
overflow: hidden;
fill: currentColor;
.svg-icon {
border-bottom: 1px solid #DDD;
box-shadow: $bs-card;
@include lightDark(border-bottom-color, #DDD, #000);
- @include whenDark {
- filter: saturate(0.8) brightness(0.8);
- }
.header-links {
display: flex;
align-items: center;
display: none;
}
.tri-layout-left-contents > *, .tri-layout-right-contents > * {
- @include lightDark(opacity, 0.6, 0.7);
+ @include lightDark(opacity, 0.6, 0.75);
transition: opacity ease-in-out 120ms;
&:hover, &:focus-within {
opacity: 1 !important;
opacity: 1 !important;
}
}
-
}
@include smaller-than($m) {
* Link styling
*/
a {
- color: var(--color-primary);
+ color: var(--color-link);
fill: currentColor;
cursor: pointer;
text-decoration: none;
display: inline-block;
}
&:focus img:only-child {
- outline: 2px dashed var(--color-primary);
+ outline: 2px dashed var(--color-link);
outline-offset: 2px;
}
}
:root {
--color-primary: #206ea7;
--color-primary-light: rgba(32,110,167,0.15);
+ --color-link: #206ea7;
--color-page: #206ea7;
--color-page-draft: #7e50b1;
&:focus {
top: $-xl;
outline-offset: -10px;
- outline: 2px dotted var(--color-primary);
+ outline: 2px dotted var(--color-link);
}
}
option:event-emit-select:name="insert"
type="button"
title="{{ trans('entities.attachments_insert_link') }}"
- class="drag-card-action text-center text-primary">@icon('link') </button>
+ class="drag-card-action text-center text-link">@icon('link') </button>
<button component="event-emit-select"
option:event-emit-select:name="edit"
option:event-emit-select:id="{{ $attachment->id }}"
type="button"
title="{{ trans('common.edit') }}"
- class="drag-card-action text-center text-primary">@icon('edit')</button>
+ class="drag-card-action text-center text-link">@icon('edit')</button>
<div component="dropdown" class="flex-fill relative">
<button refs="dropdown@toggle"
type="button"
class="drag-card-action text-center text-neg">@icon('close')</button>
<div refs="dropdown@menu" class="dropdown-menu">
<p class="text-neg small px-m mb-xs">{{ trans('entities.attachments_delete') }}</p>
- <button refs="ajax-delete-row@delete" type="button" class="text-primary small delete text-item">{{ trans('common.confirm') }}</button>
+ <button refs="ajax-delete-row@delete" type="button" class="text-link small delete text-item">{{ trans('common.confirm') }}</button>
</div>
</div>
</div>
<div class="px-l files">
<div refs="attachments@listContainer">
- <p class="text-muted small">{{ trans('entities.attachments_explain') }} <span class="text-warn">{{ trans('entities.attachments_explain_instant_save') }}</span></p>
+ <p class="text-muted small">{{ trans('entities.attachments_explain') }} <span
+ class="text-warn">{{ trans('entities.attachments_explain_instant_save') }}</span></p>
<div component="tabs" refs="attachments@mainTabs" class="tab-container">
- <div class="nav-tabs">
- <button refs="tabs@toggleItems" type="button" class="selected tab-item">{{ trans('entities.attachments_items') }}</button>
- <button refs="tabs@toggleUpload" type="button" class="tab-item">{{ trans('entities.attachments_upload') }}</button>
- <button refs="tabs@toggleLinks" type="button" class="tab-item">{{ trans('entities.attachments_link') }}</button>
+ <div role="tablist">
+ <button id="attachment-tab-items"
+ role="tab"
+ aria-selected="true"
+ aria-controls="attachment-panel-items"
+ type="button"
+ class="tab-item">{{ trans('entities.attachments_items') }}</button>
+ <button id="attachment-tab-upload"
+ role="tab"
+ aria-selected="false"
+ aria-controls="attachment-panel-upload"
+ type="button"
+ class="tab-item">{{ trans('entities.attachments_upload') }}</button>
+ <button id="attachment-tab-links"
+ role="tab"
+ aria-selected="false"
+ aria-controls="attachment-panel-links"
+ type="button"
+ class="tab-item">{{ trans('entities.attachments_link') }}</button>
</div>
- <div refs="tabs@contentItems attachments@list">
+ <div id="attachment-panel-items"
+ tabindex="0"
+ role="tabpanel"
+ aria-labelledby="attachment-tab-items"
+ refs="attachments@list">
@include('attachments.manager-list', ['attachments' => $page->attachments->all()])
</div>
- <div refs="tabs@contentUpload" class="hidden">
+ <div id="attachment-panel-upload"
+ tabindex="0"
+ role="tabpanel"
+ hidden
+ aria-labelledby="attachment-tab-upload">
@include('form.dropzone', [
'placeholder' => trans('entities.attachments_dropzone'),
'url' => url('/attachments/upload?uploaded_to=' . $page->id),
'successMessage' => trans('entities.attachments_file_uploaded'),
])
</div>
- <div refs="tabs@contentLinks" class="hidden link-form-container">
+ <div id="attachment-panel-links"
+ tabindex="0"
+ role="tabpanel"
+ hidden
+ aria-labelledby="attachment-tab-links"
+ class="link-form-container">
@include('attachments.manager-link-form', ['pageId' => $page->id])
</div>
</div>
<div class="actions mb-xl">
<h5>{{ trans('common.actions') }}</h5>
- <div class="icon-list text-primary">
+ <div class="icon-list text-link">
@if(user()->can('book-create-all'))
<a href="{{ url("/create-book") }}" data-shortcut="new" class="icon-list-item">
<span>@icon('add')</span>
<li>
<form action="{{ $book->getUrl('/convert-to-shelf') }}" method="POST">
{!! csrf_field() !!}
- <button type="submit" class="text-primary text-item">{{ trans('common.confirm') }}</button>
+ <button type="submit" class="text-link text-item">{{ trans('common.confirm') }}</button>
</form>
</li>
</ul>
</div>
<div class="form-group collapsible" component="collapsible" id="logo-control">
- <button refs="collapsible@trigger" type="button" class="collapse-title text-primary" aria-expanded="false">
+ <button refs="collapsible@trigger" type="button" class="collapse-title text-link" aria-expanded="false">
<label>{{ trans('common.cover_image') }}</label>
</button>
<div refs="collapsible@content" class="collapse-content">
</div>
<div class="form-group collapsible" component="collapsible" id="tags-control">
- <button refs="collapsible@trigger" type="button" class="collapse-title text-primary" aria-expanded="false">
+ <button refs="collapsible@trigger" type="button" class="collapse-title text-link" aria-expanded="false">
<label for="tag-manager">{{ trans('entities.book_tags') }}</label>
</button>
<div refs="collapsible@content" class="collapse-content">
<div class="actions mb-xl">
<h5>{{ trans('common.actions') }}</h5>
- <div class="icon-list text-primary">
+ <div class="icon-list text-link">
@if(userCan('page-create', $book))
<a href="{{ $book->getUrl('/create-page') }}" data-shortcut="new" class="icon-list-item">
</div>
<div class="form-group" collapsible>
- <button type="button" class="collapse-title text-primary" collapsible-trigger aria-expanded="false">
+ <button type="button" class="collapse-title text-link" collapsible-trigger aria-expanded="false">
<label for="entity_selection">{{ trans('entities.pages_copy_desination') }}</label>
</button>
<div class="collapse-content" collapsible-content>
<li>
<form action="{{ $chapter->getUrl('/convert-to-book') }}" method="POST">
{!! csrf_field() !!}
- <button type="submit" class="text-primary text-item">{{ trans('common.confirm') }}</button>
+ <button type="submit" class="text-link text-item">{{ trans('common.confirm') }}</button>
</form>
</li>
</ul>
</div>
<div class="form-group collapsible" component="collapsible" id="logo-control">
- <button refs="collapsible@trigger" type="button" class="collapse-title text-primary" aria-expanded="false">
+ <button refs="collapsible@trigger" type="button" class="collapse-title text-link" aria-expanded="false">
<label for="tags">{{ trans('entities.chapter_tags') }}</label>
</button>
<div refs="collapsible@content" class="collapse-content">
<div class="actions mb-xl">
<h5>{{ trans('common.actions') }}</h5>
- <div class="icon-list text-primary">
+ <div class="icon-list text-link">
@if(userCan('page-create', $chapter))
<a href="{{ $chapter->getUrl('/create-page') }}" data-shortcut="new" class="icon-list-item">
-<style id="custom-styles" data-color="{{ setting('app-color') }}" data-color-light="{{ setting('app-color-light') }}">
+@php
+ $settingSuffix = setting()->getForCurrentUser('dark-mode-enabled') ? '-dark' : '';
+@endphp
+<style>
:root {
- --color-primary: {{ setting('app-color') }};
- --color-primary-light: {{ setting('app-color-light') }};
- --color-bookshelf: {{ setting('bookshelf-color')}};
- --color-book: {{ setting('book-color')}};
- --color-chapter: {{ setting('chapter-color')}};
- --color-page: {{ setting('page-color')}};
- --color-page-draft: {{ setting('page-draft-color')}};
+ --color-primary: {{ setting('app-color' . $settingSuffix) }};
+ --color-primary-light: {{ setting('app-color-light' . $settingSuffix) }};
+ --color-link: {{ setting('link-color' . $settingSuffix) }};
+ --color-bookshelf: {{ setting('bookshelf-color' . $settingSuffix)}};
+ --color-book: {{ setting('book-color' . $settingSuffix)}};
+ --color-chapter: {{ setting('chapter-color' . $settingSuffix)}};
+ --color-page: {{ setting('page-color' . $settingSuffix)}};
+ --color-page-draft: {{ setting('page-draft-color' . $settingSuffix)}};
}
</style>
{{ csrf_field() }}
<input type="hidden" name="type" value="{{ get_class($entity) }}">
<input type="hidden" name="id" value="{{ $entity->id }}">
- <button type="submit" data-shortcut="favourite" class="icon-list-item text-primary">
+ <button type="submit" data-shortcut="favourite" class="icon-list-item text-link">
<span>@icon($isFavourite ? 'star' : 'star-outline')</span>
<span>{{ $isFavourite ? trans('common.unfavourite') : trans('common.favourite') }}</span>
</button>
{!! method_field('PATCH') !!}
@if ($view === 'list')
- <button type="submit" name="view" value="grid" class="icon-list-item text-primary">
+ <button type="submit" name="view" value="grid" class="icon-list-item text-link">
<span class="icon">@icon('grid')</span>
<span>{{ trans('common.grid_view') }}</span>
</button>
@else
- <button type="submit" name="view" value="list" class="icon-list-item text-primary">
+ <button type="submit" name="view" value="list" class="icon-list-item text-link">
<span>@icon('list')</span>
<span>{{ trans('common.list_view') }}</span>
</button>
<style>
/* Patches for CSS variable colors within PDF exports */
a {
- color: {{ setting('app-color') }};
+ color: {{ setting('app-link') }};
}
blockquote {
</span>
@if($role->id !== 0)
<button type="button"
- class="ml-auto flex-none text-small text-primary text-button hover-underline item-list-row-toggle-all hide-under-s"
+ class="ml-auto flex-none text-small text-link text-button hover-underline item-list-row-toggle-all hide-under-s"
refs="permissions-table@toggle-all"
><strong>{{ trans('common.toggle_all') }}</strong></button>
@endif
@section('right')
<div class="actions mb-xl">
<h5>{{ trans('common.actions') }}</h5>
- <div class="icon-list text-primary">
+ <div class="icon-list text-link">
@if(user()->can('book-create-all'))
<a href="{{ url("/create-book") }}" class="icon-list-item">
<span>@icon('add')</span>
</a>
@endif
@include('entities.view-toggle', ['view' => $view, 'type' => 'books'])
- @include('home.parts.expand-toggle', ['classes' => 'text-primary', 'target' => '.entity-list.compact .entity-item-snippet', 'key' => 'home-details'])
- @include('common.dark-mode-toggle', ['classes' => 'icon-list-item text-primary'])
+ @include('home.parts.expand-toggle', ['classes' => 'text-link', 'target' => '.entity-list.compact .entity-item-snippet', 'key' => 'home-details'])
+ @include('common.dark-mode-toggle', ['classes' => 'icon-list-item text-link'])
</div>
</div>
@stop
<div class="grid half">
<div>
<div class="icon-list inline block">
- @include('home.parts.expand-toggle', ['classes' => 'text-muted text-primary', 'target' => '.entity-list.compact .entity-item-snippet', 'key' => 'home-details'])
+ @include('home.parts.expand-toggle', ['classes' => 'text-muted text-link', 'target' => '.entity-list.compact .entity-item-snippet', 'key' => 'home-details'])
</div>
</div>
<div class="text-m-right">
<div class="icon-list inline block">
- @include('common.dark-mode-toggle', ['classes' => 'text-muted icon-list-item text-primary'])
+ @include('common.dark-mode-toggle', ['classes' => 'text-muted icon-list-item text-link'])
</div>
</div>
</div>
@section('right')
<div class="actions mb-xl">
<h5>{{ trans('common.actions') }}</h5>
- <div class="icon-list text-primary">
+ <div class="icon-list text-link">
@if(user()->can('bookshelf-create-all'))
<a href="{{ url("/create-shelf") }}" class="icon-list-item">
<span>@icon('add')</span>
</a>
@endif
@include('entities.view-toggle', ['view' => $view, 'type' => 'bookshelves'])
- @include('home.parts.expand-toggle', ['classes' => 'text-primary', 'target' => '.entity-list.compact .entity-item-snippet', 'key' => 'home-details'])
- @include('common.dark-mode-toggle', ['classes' => 'icon-list-item text-primary'])
+ @include('home.parts.expand-toggle', ['classes' => 'text-link', 'target' => '.entity-list.compact .entity-item-snippet', 'key' => 'home-details'])
+ @include('common.dark-mode-toggle', ['classes' => 'icon-list-item text-link'])
</div>
</div>
@stop
@section('right')
<div class="actions mb-xl">
<h5>{{ trans('common.actions') }}</h5>
- <div class="icon-list text-primary">
- @include('home.parts.expand-toggle', ['classes' => 'text-primary', 'target' => '.entity-list.compact .entity-item-snippet', 'key' => 'home-details'])
- @include('common.dark-mode-toggle', ['classes' => 'icon-list-item text-primary'])
+ <div class="icon-list text-link">
+ @include('home.parts.expand-toggle', ['classes' => 'text-link', 'target' => '.entity-list.compact .entity-item-snippet', 'key' => 'home-details'])
+ @include('common.dark-mode-toggle', ['classes' => 'icon-list-item text-link'])
</div>
</div>
@stop
\ No newline at end of file
refs="tri-layout@tab"
data-tab="info"
aria-label="{{ trans('common.tab_info_label') }}"
- class="tri-layout-mobile-tab px-m py-m text-primary">
+ class="tri-layout-mobile-tab px-m py-m text-link">
{{ trans('common.tab_info') }}
</button>
<button type="button"
data-tab="content"
aria-label="{{ trans('common.tab_content_label') }}"
aria-selected="true"
- class="tri-layout-mobile-tab px-m py-m text-primary active">
+ class="tri-layout-mobile-tab px-m py-m text-link active">
{{ trans('common.tab_content') }}
</button>
</div>
<form action="{{ url('/mfa/' . $method . '/remove') }}" method="post">
{{ csrf_field() }}
{{ method_field('delete') }}
- <button class="text-primary small text-item">{{ trans('common.confirm') }}</button>
+ <button class="text-link small text-item">{{ trans('common.confirm') }}</button>
</form>
</div>
</div>
</div>
<div class="form-group" collapsible>
- <button type="button" class="collapse-title text-primary" collapsible-trigger aria-expanded="false">
+ <button type="button" class="collapse-title text-link" collapsible-trigger aria-expanded="false">
<label for="entity_selection">{{ trans('entities.pages_copy_desination') }}</label>
</button>
<div class="collapse-content" collapsible-content>
<div class="action-buttons text-left px-m py-xs">
<a href="{{ $isDraft ? $page->getParent()->getUrl() : $page->getUrl() }}"
- class="text-button text-primary">@icon('back')<span class="hide-under-l">{{ trans('common.back') }}</span></a>
+ class="text-button text-link">@icon('back')<span class="hide-under-l">{{ trans('common.back') }}</span></a>
</div>
<div class="text-center px-m">
<div component="dropdown"
option:dropdown:move-menu="true"
class="dropdown-container draft-display text {{ $draftsEnabled ? '' : 'hidden' }}">
- <button type="button" refs="dropdown@toggle" aria-haspopup="true" aria-expanded="false" title="{{ trans('entities.pages_edit_draft_options') }}" class="text-primary text-button py-s px-m"><span refs="page-editor@draftDisplay" class="faded-text"></span> @icon('more')</button>
+ <button type="button" refs="dropdown@toggle" aria-haspopup="true" aria-expanded="false" title="{{ trans('entities.pages_edit_draft_options') }}" class="text-link text-button py-s px-m"><span refs="page-editor@draftDisplay" class="faded-text"></span> @icon('more')</button>
@icon('check-circle', ['class' => 'text-pos draft-notification svg-icon', 'refs' => 'page-editor@draftDisplayIcon'])
<ul refs="dropdown@menu" class="dropdown-menu" role="menu">
<li>
<div component="dropdown"
option:dropdown:move-menu="true"
class="dropdown-container">
- <button refs="dropdown@toggle" type="button" aria-haspopup="true" aria-expanded="false" class="text-primary text-button">@icon('edit') <span refs="page-editor@changelogDisplay">{{ trans('entities.pages_edit_set_changelog') }}</span></button>
+ <button refs="dropdown@toggle" type="button" aria-haspopup="true" aria-expanded="false" class="text-link text-button">@icon('edit') <span refs="page-editor@changelogDisplay">{{ trans('entities.pages_edit_set_changelog') }}</span></button>
<ul refs="dropdown@menu" class="wide dropdown-menu">
<li class="px-l py-m">
<p class="text-muted pb-s">{{ trans('entities.pages_edit_enter_changelog_desc') }}</p>
<span>{{-- Prevents button jumping on menu show --}}</span>
</div>
- <button type="submit" id="save-button" class="float-left text-primary text-button text-pos-hover hide-under-m">@icon('save')<span>{{ trans('entities.pages_save') }}</span></button>
+ <button type="submit" id="save-button" class="float-left text-link text-button text-pos-hover hide-under-m">@icon('save')<span>{{ trans('entities.pages_save') }}</span></button>
</div>
</div>
</div>
\ No newline at end of file
<button type="submit"
id="save-button-mobile"
title="{{ trans('entities.pages_save') }}"
- class="text-primary text-button hide-over-m page-save-mobile-button">@icon('save')</button>
+ class="text-link text-button hide-over-m page-save-mobile-button">@icon('save')</button>
{{--Editor Change Dialog--}}
@component('common.confirm-dialog', ['title' => trans('entities.pages_editor_switch_title'), 'ref' => 'page-editor@switchDialog'])
<div component="event-emit-select"
option:event-emit-select:name="image"
option:event-emit-select:data="{{ json_encode($image) }}"
- class="image anim fadeIn text-primary"
+ class="image anim fadeIn text-link"
style="animation-delay: {{ $index > 26 ? '160ms' : ($index * 25) . 'ms' }};">
<img src="{{ $image->thumbs['gallery'] }}"
alt="{{ $image->name }}"
<div class="flex-fill image-manager-body">
<div class="image-manager-content">
- <div class="image-manager-header primary-background-light nav-tabs grid third no-gap">
+ <div role="tablist" class="image-manager-header primary-background-light grid third no-gap">
<button refs="image-manager@filterTabs"
data-filter="all"
- type="button" class="tab-item selected" title="{{ trans('components.image_all_title') }}">@icon('images') {{ trans('components.image_all') }}</button>
+ role="tab"
+ aria-selected="true"
+ type="button" class="tab-item" 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>
+ role="tab"
+ aria-selected="false"
+ 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>
+ role="tab"
+ aria-selected="false"
+ 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">
<form action="{{ $revision->getUrl('/restore') }}" method="POST">
{!! csrf_field() !!}
<input type="hidden" name="_method" value="PUT">
- <button type="submit" class="text-primary icon-item">
+ <button type="submit" class="text-link icon-item">
@icon('history')
<div>{{ trans('entities.pages_revisions_restore') }}</div>
</button>
@foreach($pageNav as $navItem)
<li class="page-nav-item h{{ $navItem['level'] }}">
<a href="{{ $navItem['link'] }}" class="text-limit-lines-1 block">{{ $navItem['text'] }}</a>
- <div class="primary-background sidebar-page-nav-bullet"></div>
+ <div class="link-background sidebar-page-nav-bullet"></div>
</li>
@endforeach
</div>
<div class="actions mb-xl">
<h5>{{ trans('common.actions') }}</h5>
- <div class="icon-list text-primary">
+ <div class="icon-list text-link">
{{--User Actions--}}
@if(userCan('page-update', $page))
</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>
-
+ <!-- App Color Scheme -->
+ @php
+ $darkMode = boolval(setting()->getForCurrentUser('dark-mode-enabled'));
+ @endphp
+ <div component="setting-app-color-scheme"
+ option:setting-app-color-scheme:mode="{{ $darkMode ? 'dark' : 'light' }}"
+ class="pb-l">
+ <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>
- <!-- Entity Color -->
- <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>
- <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'])
+ <div component="tabs" class="tab-container">
+ <div role="tablist" class="controls-card">
+ <button type="button"
+ role="tab"
+ id="color-scheme-tab-light"
+ aria-selected="{{ $darkMode ? 'false' : 'true' }}"
+ aria-controls="color-scheme-panel-light">@icon('light-mode'){{ trans('common.light_mode') }}</button>
+ <button type="button"
+ role="tab"
+ id="color-scheme-tab-dark"
+ aria-selected="{{ $darkMode ? 'true' : 'false' }}"
+ aria-controls="color-scheme-panel-dark">@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 id="color-scheme-panel-light"
+ refs="setting-app-color-scheme@lightContainer"
+ tabindex="0"
+ role="tabpanel"
+ aria-labelledby="color-scheme-tab-light"
+ @if($darkMode) hidden @endif
+ class="p-m">
+ @include('settings.parts.setting-color-scheme', ['mode' => 'light'])
+ </div>
+ <div id="color-scheme-panel-dark"
+ refs="setting-app-color-scheme@darkContainer"
+ tabindex="0"
+ role="tabpanel"
+ aria-labelledby="color-scheme-tab-light"
+ @if(!$darkMode) hidden @endif
+ class="p-m">
+ @include('settings.parts.setting-color-scheme', ['mode' => 'dark'])
+ </div>
</div>
</div>
</div>
{{--
- @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>
<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>
--- /dev/null
+{{--
+ @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>
+
+<input type="hidden"
+ value="{{ setting('app-color-light' . ($mode === 'dark' ? '-dark' : '')) }}"
+ name="setting-app-color-light{{ $mode === 'dark' ? '-dark' : '' }}">
\ No newline at end of file
<form action="{{ url('/settings/recycle-bin/empty') }}" method="POST">
{!! csrf_field() !!}
- <button type="submit" class="text-primary small delete text-item">{{ trans('common.confirm') }}</button>
+ <button type="submit" class="text-link small delete text-item">{{ trans('common.confirm') }}</button>
</form>
</div>
</div>
<div class="item-list-row flex-container-row items-center wrap">
<div class="flex py-s px-m min-width-s">
<strong>{{ $title }}</strong> <br>
- <a href="#" refs="permissions-table@toggle-row" class="text-small text-primary">{{ trans('common.toggle_all') }}</a>
+ <a href="#" refs="permissions-table@toggle-row" class="text-small text-link">{{ trans('common.toggle_all') }}</a>
</div>
<div class="flex py-s px-m min-width-xxs">
<small class="hide-over-m bold">{{ trans('common.create') }}<br></small>
<div component="permissions-table">
<label class="setting-list-label">{{ trans('settings.role_system') }}</label>
- <a href="#" refs="permissions-table@toggle-all" class="text-small text-primary">{{ trans('common.toggle_all') }}</a>
+ <a href="#" refs="permissions-table@toggle-all" class="text-small text-link">{{ trans('common.toggle_all') }}</a>
<div class="toggle-switch-list grid half mt-m">
<div>
class="item-list toggle-switch-list">
<div class="item-list-row flex-container-row items-center hide-under-m bold">
<div class="flex py-s px-m min-width-s">
- <a href="#" refs="permissions-table@toggle-all" class="text-small text-primary">{{ trans('common.toggle_all') }}</a>
+ <a href="#" refs="permissions-table@toggle-all" class="text-small text-link">{{ trans('common.toggle_all') }}</a>
</div>
<div refs="permissions-table@toggle-column" class="flex py-s px-m min-width-xxs">{{ trans('common.create') }}</div>
<div refs="permissions-table@toggle-column" class="flex py-s px-m min-width-xxs">{{ trans('common.view') }}</div>
<div class="item-list-row flex-container-row items-center wrap">
<div class="flex py-s px-m min-width-s">
<strong>{{ $title }}</strong> <br>
- <a href="#" refs="permissions-table@toggle-row" class="text-small text-primary">{{ trans('common.toggle_all') }}</a>
+ <a href="#" refs="permissions-table@toggle-row" class="text-small text-link">{{ trans('common.toggle_all') }}</a>
</div>
<div class="flex py-s px-m min-width-xxs">
<small class="hide-over-m bold">{{ trans('common.create') }}<br></small>
<div class="actions mb-xl">
<h5>{{ trans('common.actions') }}</h5>
- <div class="icon-list text-primary">
+ <div class="icon-list text-link">
@if(userCan('bookshelf-create-all'))
<a href="{{ url("/create-shelf") }}" data-shortcut="new" class="icon-list-item">
<span>@icon('add')</span>
<div class="form-group collapsible" component="collapsible" id="logo-control">
- <button refs="collapsible@trigger" type="button" class="collapse-title text-primary" aria-expanded="false">
+ <button refs="collapsible@trigger" type="button" class="collapse-title text-link" aria-expanded="false">
<label>{{ trans('common.cover_image') }}</label>
</button>
<div refs="collapsible@content" class="collapse-content">
</div>
<div class="form-group collapsible" component="collapsible" id="tags-control">
- <button refs="collapsible@trigger" type="button" class="collapse-title text-primary" aria-expanded="false">
+ <button refs="collapsible@trigger" type="button" class="collapse-title text-link" aria-expanded="false">
<label for="tag-manager">{{ trans('entities.shelf_tags') }}</label>
</button>
<div refs="collapsible@content" class="collapse-content">
@section('right')
<div class="actions mb-xl">
<h5>{{ trans('common.actions') }}</h5>
- <div class="icon-list text-primary">
+ <div class="icon-list text-link">
@if(userCan('book-create-all') && userCan('bookshelf-update', $shelf))
<a href="{{ $shelf->getUrl('/create-book') }}" data-shortcut="new" class="icon-list-item">
projects / bookstack / commitdiff