Mirrors/BookStack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-11-23 11:22:33 +01:00
Code Issues Releases Wiki Activity

Merge pull request #4002 from BookStackApp/color_upgrades

Browse Source 
Better application color scheme control
This commit is contained in:
Dan Brown 2023-01-28 17:59:54 +00:00 committed by GitHub
commit 8367a94e90
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
59 changed files with 444 additions and 245 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/Config/setting-defaults.php
View File

@ -16,11 +16,20 @@ 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',
'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,

69
database/migrations/2023_01_28_141230_copy_color_settings_for_dark_mode.php Normal file
View File

@ -0,0 +1,69 @@
<?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();
}
}

2
resources/js/components/attachments.js
View File

@ -45,7 +45,7 @@ export class Attachments extends Component {
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);

7
resources/js/components/image-manager.js
View File

@ -140,10 +140,9 @@ export class ImageManager extends Component {
}
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');
}
}

2
resources/js/components/index.js
View File

@ -41,7 +41,7 @@ export {PagePicker} from "./page-picker.js"
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"

49
resources/js/components/setting-app-color-picker.js
View File

@ -1,49 +0,0 @@
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
};
}
}

82
resources/js/components/setting-app-color-scheme.js Normal file
View File

@ -0,0 +1,82 @@
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
};
}
}

2
resources/js/components/setting-color-picker.js
View File

@ -15,6 +15,6 @@ export class SettingColorPicker extends Component {
setValue(value) {
this.colorInput.value = value;
this.colorInput.dispatchEvent(new Event('change'));
this.colorInput.dispatchEvent(new Event('change', {bubbles: true}));
}
}

66
resources/js/components/tabs.js
View File

@ -1,49 +1,49 @@
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'));
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'));
show(sectionId) {
for (const panel of this.panels) {
panel.toggleAttribute('hidden', panel.id !== sectionId);
}
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});
}
}

2
resources/js/services/util.js
View File

@ -34,7 +34,7 @@ export function scrollAndHighlightElement(element) {
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(() => {

10
resources/lang/en/settings.php
View File

@ -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 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',

7
resources/sass/_blocks.scss
View File

@ -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 {

10
resources/sass/_buttons.scss
View File

@ -25,7 +25,6 @@ button {
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;
@ -85,10 +84,7 @@ button {
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;
}
@ -96,8 +92,8 @@ button {
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 {

10
resources/sass/_colors.scss
View File

@ -9,11 +9,14 @@
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
@ -41,6 +44,11 @@
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;

47
resources/sass/_components.scss
View File

@ -607,36 +607,37 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
}
.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 {

1
resources/sass/_forms.scss
View File

@ -258,7 +258,6 @@ input[type=color] {
border-radius: 2px;
display: inline-block;
border: 2px solid currentColor;
opacity: 0.6;
overflow: hidden;
fill: currentColor;
.svg-icon {

3
resources/sass/_header.scss
View File

@ -22,9 +22,6 @@ header {
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;

3
resources/sass/_layout.scss
View File

@ -433,7 +433,7 @@ body.flexbox {
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;
@ -442,7 +442,6 @@ body.flexbox {
opacity: 1 !important;
}
}
}
@include smaller-than($m) {

4
resources/sass/_text.scss
View File

@ -90,7 +90,7 @@ h2.list-heading {
* Link styling
*/
a {
color: var(--color-primary);
color: var(--color-link);
fill: currentColor;
cursor: pointer;
text-decoration: none;
@ -107,7 +107,7 @@ a {
display: inline-block;
}
&:focus img:only-child {
outline: 2px dashed var(--color-primary);
outline: 2px dashed var(--color-link);
outline-offset: 2px;
}
}

1
resources/sass/_variables.scss
View File

@ -39,6 +39,7 @@ $fs-s: 12px;
:root {
--color-primary: #206ea7;
--color-primary-light: rgba(32,110,167,0.15);
--color-link: #206ea7;
--color-page: #206ea7;
--color-page-draft: #7e50b1;

2
resources/sass/styles.scss
View File

@ -113,7 +113,7 @@ $loadingSize: 10px;
&:focus {
top: $-xl;
outline-offset: -10px;
outline: 2px dotted var(--color-primary);
outline: 2px dotted var(--color-link);
}
}

6
resources/views/attachments/manager-list.blade.php
View File

@ -14,13 +14,13 @@
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"
@ -28,7 +28,7 @@
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>

45
resources/views/attachments/manager.blade.php
View File

@ -9,25 +9,54 @@
<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>

2
resources/views/books/index.blade.php
View File

@ -35,7 +35,7 @@
<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>

2
resources/views/books/parts/convert-to-shelf.blade.php
View File

@ -17,7 +17,7 @@
<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>

4
resources/views/books/parts/form.blade.php
View File

@ -11,7 +11,7 @@
</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">
@ -27,7 +27,7 @@
</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">

2
resources/views/books/show.blade.php
View File

@ -91,7 +91,7 @@
<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">

2
resources/views/chapters/copy.blade.php
View File

@ -28,7 +28,7 @@
</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>

2
resources/views/chapters/parts/convert-to-book.blade.php
View File

@ -18,7 +18,7 @@
<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>

2
resources/views/chapters/parts/form.blade.php
View File

@ -12,7 +12,7 @@
</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">

2
resources/views/chapters/show.blade.php
View File

@ -105,7 +105,7 @@
<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">

20
resources/views/common/custom-styles.blade.php
View File

@ -1,11 +1,15 @@
<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>

2
resources/views/entities/favourite-action.blade.php
View File

@ -5,7 +5,7 @@
{{ 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>

4
resources/views/entities/view-toggle.blade.php
View File

@ -4,12 +4,12 @@
{!! 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>

2
resources/views/exports/parts/styles.blade.php
View File

@ -10,7 +10,7 @@
<style>
/* Patches for CSS variable colors within PDF exports */
a {
color: {{ setting('app-color') }};
color: {{ setting('app-link') }};
}
blockquote {

2
resources/views/form/entity-permissions-row.blade.php
View File

@ -16,7 +16,7 @@ $inheriting - Boolean if the current row should be marked as inheriting default
</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

6
resources/views/home/books.blade.php
View File

@ -11,7 +11,7 @@
@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>
@ -19,8 +19,8 @@
</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

4
resources/views/home/default.blade.php
View File

@ -6,12 +6,12 @@
<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>

6
resources/views/home/shelves.blade.php
View File

@ -11,7 +11,7 @@
@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>
@ -19,8 +19,8 @@
</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

6
resources/views/home/specific-page.blade.php
View File

@ -19,9 +19,9 @@
@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

4
resources/views/layouts/tri.blade.php
View File

@ -11,7 +11,7 @@
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"
@ -19,7 +19,7 @@
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>

2
resources/views/mfa/parts/setup-method-row.blade.php
View File

@ -19,7 +19,7 @@
<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>

2
resources/views/pages/copy.blade.php
View File

@ -29,7 +29,7 @@
</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>

8
resources/views/pages/parts/editor-toolbar.blade.php
View File

@ -3,14 +3,14 @@
<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>&nbsp; @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>&nbsp; @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>
@ -68,7 +68,7 @@
<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>
@ -82,7 +82,7 @@
<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>

2
resources/views/pages/parts/form.blade.php
View File

@ -44,7 +44,7 @@
<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'])

2
resources/views/pages/parts/image-manager-list.blade.php
View File

@ -3,7 +3,7 @@
<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 }}"

14
resources/views/pages/parts/image-manager.blade.php
View File

@ -15,16 +15,22 @@
<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">

2
resources/views/pages/parts/revisions-index-row.blade.php
View File

@ -46,7 +46,7 @@
<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>

4
resources/views/pages/show.blade.php
View File

@ -66,7 +66,7 @@
@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>
@ -143,7 +143,7 @@
<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))

74
resources/views/settings/customization.blade.php
View File

@ -69,42 +69,50 @@
</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>
<!-- 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 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 -->
<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>

19
resources/views/settings/parts/setting-entity-color-picker.blade.php → resources/views/settings/parts/setting-color-picker.blade.php
View File

@ -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>

29
resources/views/settings/parts/setting-color-scheme.blade.php Normal file
View File

@ -0,0 +1,29 @@
{{--
@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' : '' }}">

2
resources/views/settings/recycle-bin/index.blade.php
View File

@ -22,7 +22,7 @@
<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>

2
resources/views/settings/roles/parts/asset-permissions-row.blade.php
View File

@ -1,7 +1,7 @@
<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>

4
resources/views/settings/roles/parts/form.blade.php
View File

@ -28,7 +28,7 @@
<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>
@ -62,7 +62,7 @@
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>

2
resources/views/settings/roles/parts/related-asset-permissions-row.blade.php
View File

@ -1,7 +1,7 @@
<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>

2
resources/views/shelves/index.blade.php
View File

@ -8,7 +8,7 @@
<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>

4
resources/views/shelves/parts/form.blade.php
View File

@ -44,7 +44,7 @@
<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">
@ -60,7 +60,7 @@
</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">

2
resources/views/shelves/show.blade.php
View File

@ -109,7 +109,7 @@
@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">