Infra-Mirrors/BookStack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-10-01 01:36:00 -04:00
Code Issues Packages Projects Releases Wiki Activity

Updated another set of components

Browse Source
This commit is contained in:
Dan Brown 2022-11-15 12:44:57 +00:00
parent 4310d34135
commit b37e84dc10
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
17 changed files with 119 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
resources/js/components/code-textarea.js
View File

@ -1,9 +1,10 @@
/** /**
* A simple component to render a code editor within the textarea * A simple component to render a code editor within the textarea
* this exists upon. * this exists upon.
* @extends {Component}
*/ */
class CodeTextarea { import {Component} from "./component";
export class CodeTextarea extends Component {
async setup() { async setup() {
const mode = this.$opts.mode; const mode = this.$opts.mode;

19
resources/js/components/custom-checkbox.js
View File

@ -1,18 +1,19 @@
import {Component} from "./component";
class CustomCheckbox { export class CustomCheckbox extends Component {
constructor(elem) { setup() {
this.elem = elem; this.container = this.$el;
this.checkbox = elem.querySelector('input[type=checkbox]'); this.checkbox = this.container.querySelector('input[type=checkbox]');
this.display = elem.querySelector('[role="checkbox"]'); this.display = this.container.querySelector('[role="checkbox"]');
this.checkbox.addEventListener('change', this.stateChange.bind(this)); this.checkbox.addEventListener('change', this.stateChange.bind(this));
this.elem.addEventListener('keydown', this.onKeyDown.bind(this)); this.container.addEventListener('keydown', this.onKeyDown.bind(this));
} }
onKeyDown(event) { onKeyDown(event) {
const isEnterOrPress = event.keyCode === 32 || event.keyCode === 13; const isEnterOrSpace = event.key === ' ' || event.key === 'Enter';
if (isEnterOrPress) { if (isEnterOrSpace) {
event.preventDefault(); event.preventDefault();
this.toggle(); this.toggle();
} }
@ -30,5 +31,3 @@ class CustomCheckbox {
} }
} }
export default CustomCheckbox;

8
resources/js/components/entity-permissions.js
View File

@ -1,9 +1,7 @@
/**
* @extends {Component}
*/
import {htmlToDom} from "../services/dom"; import {htmlToDom} from "../services/dom";
import {Component} from "./component";
class EntityPermissions { export class EntityPermissions extends Component {
setup() { setup() {
this.container = this.$el; this.container = this.$el;
@ -75,5 +73,3 @@ class EntityPermissions {
} }
} }
export default EntityPermissions;

18
resources/js/components/entity-selector-popup.js
View File

@ -1,14 +1,10 @@
/** import {Component} from "./component";
* Entity Selector Popup
* @extends {Component} export class EntitySelectorPopup extends Component {
*/
class EntitySelectorPopup {
setup() { setup() {
this.elem = this.$el; this.container = this.$el;
this.selectButton = this.$refs.select; this.selectButton = this.$refs.select;
window.EntitySelectorPopup = this;
this.selectorEl = this.$refs.selector; this.selectorEl = this.$refs.selector;
this.callback = null; this.callback = null;
@ -21,12 +17,12 @@ class EntitySelectorPopup {
show(callback) { show(callback) {
this.callback = callback; this.callback = callback;
this.elem.components.popup.show(); this.container.components.popup.show();
this.getSelector().focusSearch(); this.getSelector().focusSearch();
} }
hide() { hide() {
this.elem.components.popup.hide(); this.container.components.popup.hide();
} }
getSelector() { getSelector() {
@ -52,5 +48,3 @@ class EntitySelectorPopup {
if (this.callback && entity) this.callback(entity); if (this.callback && entity) this.callback(entity);
} }
} }
export default EntitySelectorPopup;

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

@ -10,23 +10,22 @@ export {BookSort} from "./book-sort.js"
export {ChapterContents} from "./chapter-contents.js" export {ChapterContents} from "./chapter-contents.js"
// export {CodeEditor} from "./code-editor.js" // export {CodeEditor} from "./code-editor.js"
export {CodeHighlighter} from "./code-highlighter.js" export {CodeHighlighter} from "./code-highlighter.js"
// export {CodeTextarea} from "./code-textarea.js" export {CodeTextarea} from "./code-textarea.js"
// export {Collapsible} from "./collapsible.js" // export {Collapsible} from "./collapsible.js"
// export {ConfirmDialog} from "./confirm-dialog" // export {ConfirmDialog} from "./confirm-dialog"
// export {CustomCheckbox} from "./custom-checkbox.js" export {CustomCheckbox} from "./custom-checkbox.js"
export {DetailsHighlighter} from "./details-highlighter.js" export {DetailsHighlighter} from "./details-highlighter.js"
export {Dropdown} from "./dropdown.js" export {Dropdown} from "./dropdown.js"
// export {DropdownSearch} from "./dropdown-search.js" // export {DropdownSearch} from "./dropdown-search.js"
// export {Dropzone} from "./dropzone.js" // export {Dropzone} from "./dropzone.js"
// export {EditorToolbox} from "./editor-toolbox.js" // export {EditorToolbox} from "./editor-toolbox.js"
// export {EntityPermissions} from "./entity-permissions" export {EntityPermissions} from "./entity-permissions"
// export {EntitySearch} from "./entity-search.js" // export {EntitySearch} from "./entity-search.js"
export {EntitySelector} from "./entity-selector.js" export {EntitySelector} from "./entity-selector.js"
// export {EntitySelectorPopup} from "./entity-selector-popup.js" export {EntitySelectorPopup} from "./entity-selector-popup.js"
// export {EventEmitSelect} from "./event-emit-select.js" // export {EventEmitSelect} from "./event-emit-select.js"
// export {ExpandToggle} from "./expand-toggle.js" // export {ExpandToggle} from "./expand-toggle.js"
// export {HeaderMobileToggle} from "./header-mobile-toggle.js" // export {HeaderMobileToggle} from "./header-mobile-toggle.js"
// export {HomepageControl} from "./homepage-control.js"
// export {ImageManager} from "./image-manager.js" // export {ImageManager} from "./image-manager.js"
// export {ImagePicker} from "./image-picker.js" // export {ImagePicker} from "./image-picker.js"
// export {ListSortControl} from "./list-sort-control.js" // export {ListSortControl} from "./list-sort-control.js"
@ -37,12 +36,13 @@ export {Notification} from "./notification.js"
export {PageComments} from "./page-comments.js" export {PageComments} from "./page-comments.js"
// export {PageDisplay} from "./page-display.js" // export {PageDisplay} from "./page-display.js"
// export {PageEditor} from "./page-editor.js" // export {PageEditor} from "./page-editor.js"
// export {PagePicker} from "./page-picker.js" export {PagePicker} from "./page-picker.js"
// export {PermissionsTable} from "./permissions-table.js" export {PermissionsTable} from "./permissions-table.js"
export {Pointer} from "./pointer.js"; export {Pointer} from "./pointer.js";
// export {Popup} from "./popup.js" export {Popup} from "./popup.js"
// export {SettingAppColorPicker} from "./setting-app-color-picker.js" export {SettingAppColorPicker} from "./setting-app-color-picker.js"
// export {SettingColorPicker} from "./setting-color-picker.js" export {SettingColorPicker} from "./setting-color-picker.js"
export {SettingHomepageControl} from "./setting-homepage-control.js"
// export {ShelfSort} from "./shelf-sort.js" // export {ShelfSort} from "./shelf-sort.js"
export {Shortcuts} from "./shortcuts" export {Shortcuts} from "./shortcuts"
export {ShortcutInput} from "./shortcut-input" export {ShortcutInput} from "./shortcut-input"
@ -52,7 +52,7 @@ export {ShortcutInput} from "./shortcut-input"
// export {Tabs} from "./tabs.js" // export {Tabs} from "./tabs.js"
// export {TagManager} from "./tag-manager.js" // export {TagManager} from "./tag-manager.js"
// export {TemplateManager} from "./template-manager.js" // export {TemplateManager} from "./template-manager.js"
// export {ToggleSwitch} from "./toggle-switch.js" export {ToggleSwitch} from "./toggle-switch.js"
// export {TriLayout} from "./tri-layout.js" // export {TriLayout} from "./tri-layout.js"
// export {UserSelect} from "./user-select.js" // export {UserSelect} from "./user-select.js"
// export {WebhookEvents} from "./webhook-events"; // export {WebhookEvents} from "./webhook-events";

29
resources/js/components/page-picker.js
View File

@ -1,14 +1,14 @@
import {Component} from "./component";
class PagePicker { export class PagePicker extends Component {
constructor(elem) { setup() {
this.elem = elem; this.input = this.$refs.input;
this.input = elem.querySelector('input'); this.resetButton = this.$refs.resetButton;
this.resetButton = elem.querySelector('[page-picker-reset]'); this.selectButton = this.$refs.selectButton;
this.selectButton = elem.querySelector('[page-picker-select]'); this.display = this.$refs.display;
this.display = elem.querySelector('[page-picker-display]'); this.defaultDisplay = this.$refs.defaultDisplay;
this.defaultDisplay = elem.querySelector('[page-picker-default]'); this.buttonSep = this.$refs.buttonSeperator;
this.buttonSep = elem.querySelector('span.sep');
this.value = this.input.value; this.value = this.input.value;
this.setupListeners(); this.setupListeners();
@ -24,7 +24,9 @@ class PagePicker {
} }
showPopup() { showPopup() {
window.EntitySelectorPopup.show(entity => { /** @type {EntitySelectorPopup} **/
const selectorPopup = window.$components.first('entity-selector-popup');
selectorPopup.show(entity => {
this.setValue(entity.id, entity.name); this.setValue(entity.id, entity.name);
}); });
} }
@ -36,7 +38,7 @@ class PagePicker {
} }
controlView(name) { controlView(name) {
let hasValue = this.value && this.value !== 0; const hasValue = this.value && this.value !== 0;
toggleElem(this.resetButton, hasValue); toggleElem(this.resetButton, hasValue);
toggleElem(this.buttonSep, hasValue); toggleElem(this.buttonSep, hasValue);
toggleElem(this.defaultDisplay, !hasValue); toggleElem(this.defaultDisplay, !hasValue);
@ -55,8 +57,5 @@ class PagePicker {
} }
function toggleElem(elem, show) { function toggleElem(elem, show) {
let display = (elem.tagName === 'BUTTON' || elem.tagName === 'SPAN') ? 'inline-block' : 'block'; elem.style.display = show ? null : 'none';
elem.style.display = show ? display : 'none';
} }
export default PagePicker;

5
resources/js/components/permissions-table.js
View File

@ -1,5 +1,6 @@
import {Component} from "./component";
class PermissionsTable { export class PermissionsTable extends Component {
setup() { setup() {
this.container = this.$el; this.container = this.$el;
@ -63,5 +64,3 @@ class PermissionsTable {
} }
} }
export default PermissionsTable;

6
resources/js/components/popup.js
View File

@ -1,13 +1,13 @@
import {fadeIn, fadeOut} from "../services/animations"; import {fadeIn, fadeOut} from "../services/animations";
import {onSelect} from "../services/dom"; import {onSelect} from "../services/dom";
import {Component} from "./component";
/** /**
* Popup window that will contain other content. * Popup window that will contain other content.
* This component provides the show/hide functionality * This component provides the show/hide functionality
* with the ability for popup@hide child references to close this. * with the ability for popup@hide child references to close this.
* @extends {Component}
*/ */
class Popup { export class Popup extends Component {
setup() { setup() {
this.container = this.$el; this.container = this.$el;
@ -57,5 +57,3 @@ class Popup {
} }
} }
export default Popup;

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

@ -1,23 +1,13 @@
import {Component} from "./component";
class SettingAppColorPicker { export class SettingAppColorPicker extends Component {
constructor(elem) { setup() {
this.elem = elem; this.colorInput = this.$refs.input;
this.colorInput = elem.querySelector('input[type=color]'); this.lightColorInput = this.$refs.lightInput;
this.lightColorInput = elem.querySelector('input[name="setting-app-color-light"]');
this.resetButton = elem.querySelector('[setting-app-color-picker-reset]');
this.defaultButton = elem.querySelector('[setting-app-color-picker-default]');
this.colorInput.addEventListener('change', this.updateColor.bind(this)); this.colorInput.addEventListener('change', this.updateColor.bind(this));
this.colorInput.addEventListener('input', this.updateColor.bind(this)); this.colorInput.addEventListener('input', this.updateColor.bind(this));
this.resetButton.addEventListener('click', event => {
this.colorInput.value = this.colorInput.dataset.current;
this.updateColor();
});
this.defaultButton.addEventListener('click', event => {
this.colorInput.value = this.colorInput.dataset.default;
this.updateColor();
});
} }
/** /**
@ -44,8 +34,8 @@ class SettingAppColorPicker {
/** /**
* Covert a hex color code to rgb components. * Covert a hex color code to rgb components.
* @attribution https://stackoverflow.com/a/5624139 * @attribution https://stackoverflow.com/a/5624139
* @param hex * @param {String} hex
* @returns {*} * @returns {{r: Number, g: Number, b: Number}}
*/ */
hexToRgb(hex) { hexToRgb(hex) {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
@ -57,5 +47,3 @@ class SettingAppColorPicker {
} }
} }
export default SettingAppColorPicker;

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

@ -1,18 +1,20 @@
import {Component} from "./component";
class SettingColorPicker { export class SettingColorPicker extends Component {
constructor(elem) { setup() {
this.elem = elem; this.colorInput = this.$refs.input;
this.colorInput = elem.querySelector('input[type=color]'); this.resetButton = this.$refs.resetButton;
this.resetButton = elem.querySelector('[setting-color-picker-reset]'); this.defaultButton = this.$refs.defaultButton;
this.defaultButton = elem.querySelector('[setting-color-picker-default]'); this.currentColor = this.$opts.current;
this.resetButton.addEventListener('click', event => { this.defaultColor = this.$opts.default;
this.colorInput.value = this.colorInput.dataset.current;
}); this.resetButton.addEventListener('click', () => this.setValue(this.currentColor));
this.defaultButton.addEventListener('click', event => { this.defaultButton.addEventListener('click', () => this.setValue(this.defaultColor));
this.colorInput.value = this.colorInput.dataset.default; }
});
setValue(value) {
this.colorInput.value = value;
this.colorInput.dispatchEvent(new Event('change'));
} }
} }
export default SettingColorPicker;

15
resources/js/components/homepage-control.js → resources/js/components/setting-homepage-control.js
View File

@ -1,10 +1,10 @@
import {Component} from "./component";
class HomepageControl { export class SettingHomepageControl extends Component {
constructor(elem) { setup() {
this.elem = elem; this.typeControl = this.$refs.typeControl;
this.typeControl = elem.querySelector('[name="setting-app-homepage-type"]'); this.pagePickerContainer = this.$refs.pagePickerContainer;
this.pagePickerContainer = elem.querySelector('[page-picker-container]');
this.typeControl.addEventListener('change', this.controlPagePickerVisibility.bind(this)); this.typeControl.addEventListener('change', this.controlPagePickerVisibility.bind(this));
this.controlPagePickerVisibility(); this.controlPagePickerVisibility();
@ -14,9 +14,4 @@ class HomepageControl {
const showPagePicker = this.typeControl.value === 'page'; const showPagePicker = this.typeControl.value === 'page';
this.pagePickerContainer.style.display = (showPagePicker ? 'block' : 'none'); this.pagePickerContainer.style.display = (showPagePicker ? 'block' : 'none');
} }
} }
export default HomepageControl;

12
resources/js/components/toggle-switch.js
View File

@ -1,10 +1,10 @@
import {Component} from "./component";
class ToggleSwitch { export class ToggleSwitch extends Component {
constructor(elem) { setup() {
this.elem = elem; this.input = this.$el.querySelector('input[type=hidden]');
this.input = elem.querySelector('input[type=hidden]'); this.checkbox = this.$el.querySelector('input[type=checkbox]');
this.checkbox = elem.querySelector('input[type=checkbox]');
this.checkbox.addEventListener('change', this.stateChange.bind(this)); this.checkbox.addEventListener('change', this.stateChange.bind(this));
} }
@ -19,5 +19,3 @@ class ToggleSwitch {
} }
} }
export default ToggleSwitch;

2
resources/views/form/custom-checkbox.blade.php
View File

@ -4,7 +4,7 @@ $value
$checked $checked
$label $label
--}} --}}
<label custom-checkbox class="toggle-switch @if($errors->has($name)) text-neg @endif"> <label component="custom-checkbox" class="toggle-switch @if($errors->has($name)) text-neg @endif">
<input type="checkbox" name="{{$name}}" value="{{ $value }}" @if($checked) checked="checked" @endif @if($disabled ?? false) disabled="disabled" @endif> <input type="checkbox" name="{{$name}}" value="{{ $value }}" @if($checked) checked="checked" @endif @if($disabled ?? false) disabled="disabled" @endif>
<span tabindex="0" role="checkbox" <span tabindex="0" role="checkbox"
aria-checked="{{ $checked ? 'true' : 'false' }}" aria-checked="{{ $checked ? 'true' : 'false' }}"

2
resources/views/form/toggle-switch.blade.php
View File

@ -1,4 +1,4 @@
<label toggle-switch="{{$name}}" custom-checkbox class="toggle-switch"> <label components="custom-checkbox toggle-switch" class="toggle-switch">
<input type="hidden" name="{{$name}}" value="{{$value?'true':'false'}}"/> <input type="hidden" name="{{$name}}" value="{{$value?'true':'false'}}"/>
<input type="checkbox" @if($value) checked="checked" @endif> <input type="checkbox" @if($value) checked="checked" @endif>
<span tabindex="0" role="checkbox" <span tabindex="0" role="checkbox"

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

@ -59,13 +59,16 @@
<label class="setting-list-label">{{ trans('settings.app_primary_color') }}</label> <label class="setting-list-label">{{ trans('settings.app_primary_color') }}</label>
<p class="small">{!! trans('settings.app_primary_color_desc') !!}</p> <p class="small">{!! trans('settings.app_primary_color_desc') !!}</p>
</div> </div>
<div setting-app-color-picker class="text-m-right pt-xs"> <div component="setting-app-color-picker setting-color-picker"
<input type="color" data-default="#206ea7" data-current="{{ setting('app-color') }}" value="{{ setting('app-color') }}" name="setting-app-color" id="setting-app-color" placeholder="#206ea7"> option:setting-color-picker:default="#206ea7"
<input type="hidden" value="{{ setting('app-color-light') }}" name="setting-app-color-light" id="setting-app-color-light"> 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"> <div class="pr-s">
<button type="button" class="text-button text-muted mt-s" setting-app-color-picker-default>{{ trans('common.default') }}</button> <button refs="setting-color-picker@default-button" type="button" class="text-button text-muted mt-s">{{ trans('common.default') }}</button>
<span class="sep">|</span> <span class="sep">|</span>
<button type="button" class="text-button text-muted mt-s" setting-app-color-picker-reset>{{ trans('common.reset') }}</button> <button refs="setting-color-picker@reset-button" type="button" class="text-button text-muted mt-s">{{ trans('common.reset') }}</button>
</div> </div>
</div> </div>
@ -90,20 +93,22 @@
</div> </div>
</div> </div>
<div homepage-control id="homepage-control" class="grid half gap-xl items-center"> <div component="setting-homepage-control" id="homepage-control" class="grid half gap-xl items-center">
<div> <div>
<label for="setting-app-homepage-type" class="setting-list-label">{{ trans('settings.app_homepage') }}</label> <label for="setting-app-homepage-type" class="setting-list-label">{{ trans('settings.app_homepage') }}</label>
<p class="small">{{ trans('settings.app_homepage_desc') }}</p> <p class="small">{{ trans('settings.app_homepage_desc') }}</p>
</div> </div>
<div> <div>
<select name="setting-app-homepage-type" id="setting-app-homepage-type"> <select refs="setting-homepage-control@type-control"
name="setting-app-homepage-type"
id="setting-app-homepage-type">
<option @if(setting('app-homepage-type') === 'default') selected @endif value="default">{{ trans('common.default') }}</option> <option @if(setting('app-homepage-type') === 'default') selected @endif value="default">{{ trans('common.default') }}</option>
<option @if(setting('app-homepage-type') === 'books') selected @endif value="books">{{ trans('entities.books') }}</option> <option @if(setting('app-homepage-type') === 'books') selected @endif value="books">{{ trans('entities.books') }}</option>
<option @if(setting('app-homepage-type') === 'bookshelves') selected @endif value="bookshelves">{{ trans('entities.shelves') }}</option> <option @if(setting('app-homepage-type') === 'bookshelves') selected @endif value="bookshelves">{{ trans('entities.shelves') }}</option>
<option @if(setting('app-homepage-type') === 'page') selected @endif value="page">{{ trans('entities.pages_specific') }}</option> <option @if(setting('app-homepage-type') === 'page') selected @endif value="page">{{ trans('entities.pages_specific') }}</option>
</select> </select>
<div page-picker-container style="display: none;" class="mt-m"> <div refs="setting-homepage-control@page-picker-container" style="display: none;" class="mt-m">
@include('settings.parts.page-picker', ['name' => 'setting-app-homepage', 'placeholder' => trans('settings.app_homepage_select'), 'value' => setting('app-homepage')]) @include('settings.parts.page-picker', ['name' => 'setting-app-homepage', 'placeholder' => trans('settings.app_homepage_select'), 'value' => setting('app-homepage')])
</div> </div>
</div> </div>

14
resources/views/settings/parts/page-picker.blade.php
View File

@ -1,13 +1,13 @@
{{--Depends on entity selector popup--}} {{--Depends on entity selector popup--}}
<div page-picker> <div component="page-picker">
<div class="input-base"> <div class="input-base">
<span @if($value) style="display: none" @endif page-picker-default class="text-muted italic">{{ $placeholder }}</span> <span @if($value) style="display: none" @endif refs="page-picker@default-display" class="text-muted italic">{{ $placeholder }}</span>
<a @if(!$value) style="display: none" @endif href="{{ url('/link/' . $value) }}" target="_blank" rel="noopener" class="text-page" page-picker-display>#{{$value}}, {{$value ? \BookStack\Entities\Models\Page::find($value)->name : '' }}</a> <a @if(!$value) style="display: none" @endif href="{{ url('/link/' . $value) }}" target="_blank" rel="noopener" class="text-page" refs="page-picker@display">#{{$value}}, {{$value ? \BookStack\Entities\Models\Page::find($value)->name : '' }}</a>
</div> </div>
<br> <br>
<input type="hidden" value="{{$value}}" name="{{$name}}" id="{{$name}}"> <input refs="page-picker@input" type="hidden" value="{{$value}}" name="{{$name}}" id="{{$name}}">
<button @if(!$value) style="display: none" @endif type="button" page-picker-reset class="text-button">{{ trans('common.reset') }}</button> <button @if(!$value) style="display: none" @endif type="button" refs="page-picker@reset-button" class="text-button">{{ trans('common.reset') }}</button>
<span @if(!$value) style="display: none" @endif class="sep">|</span> <span refs="page-picker@button-seperator" @if(!$value) style="display: none" @endif class="sep">|</span>
<button type="button" page-picker-select class="text-button">{{ trans('common.select') }}</button> <button type="button" refs="page-picker@select-button" class="text-button">{{ trans('common.select') }}</button>
</div> </div>

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

@ -1,17 +1,19 @@
{{-- {{--
@type - Name of entity type @type - Name of entity type
--}} --}}
<div setting-color-picker class="grid no-break half mb-l"> <div component="setting-color-picker"
option:setting-color-picker:default="{{ config('setting-defaults.'. $type .'-color') }}"
option:setting-color-picker:current="{{ setting($type .'-color') }}"
class="grid no-break half mb-l">
<div> <div>
<label for="setting-{{ $type }}-color" class="text-dark">{{ trans('settings.'. str_replace('-', '_', $type) .'_color') }}</label> <label for="setting-{{ $type }}-color" class="text-dark">{{ trans('settings.'. str_replace('-', '_', $type) .'_color') }}</label>
<button type="button" class="text-button text-muted" setting-color-picker-default>{{ trans('common.default') }}</button> <button refs="setting-color-picker@default-button" type="button" class="text-button text-muted">{{ trans('common.default') }}</button>
<span class="sep">|</span> <span class="sep">|</span>
<button type="button" class="text-button text-muted" setting-color-picker-reset>{{ trans('common.reset') }}</button> <button refs="setting-color-picker@reset-button" type="button" class="text-button text-muted">{{ trans('common.reset') }}</button>
</div> </div>
<div> <div>
<input type="color" <input type="color"
data-default="{{ config('setting-defaults.'. $type .'-color') }}" refs="setting-color-picker@input"
data-current="{{ setting($type .'-color') }}"
value="{{ setting($type .'-color') }}" value="{{ setting($type .'-color') }}"
name="setting-{{ $type }}-color" name="setting-{{ $type }}-color"
id="setting-{{ $type }}-color" id="setting-{{ $type }}-color"