github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-11-22 15:26:43 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Update JS to show live changes and set light color values

Browse Source
This commit is contained in:
Dan Brown 2023-01-28 17:11:15 +00:00
parent c337439370
commit 104621841b
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
10 changed files with 104 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -24,7 +24,7 @@ return [
'page-draft-color' => '#7e50b1',
'app-color-dark' => '#195785',
'app-color-light-dark' => 'rgba(32,110,167,0.15)',
'link-color-dark' => '#195785',
'link-color-dark' => '#429fe3',
'bookshelf-color-dark' => '#ff5454',
'book-color-dark' => '#389f60',
'chapter-color-dark' => '#ee7a2d',

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"

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

@ -1,50 +0,0 @@
import {Component} from "./component";
export class SettingAppColorPicker extends Component {
setup() {
// TODO
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}));
}
}

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

@ -43,7 +43,7 @@ export class Tabs extends Component {
tab.setAttribute('aria-selected', selected ? 'true' : 'false');
}
this.$emit('change', {section: sectionId});
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(() => {

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

@ -1,13 +1,7 @@
<style id="custom-styles"
data-color="{{ setting('app-color') }}"
data-color-dark="{{ setting('app-color-dark') }}"
data-color-light="{{ setting('app-color-light') }}"
data-color-light-dark="{{ setting('app-color-light-dark') }}">
@php
$settingSuffix = setting()->getForCurrentUser('dark-mode-enabled') ? '-dark' : '';
@endphp
@php
$settingSuffix = setting()->getForCurrentUser('dark-mode-enabled') ? '-dark' : '';
@endphp
<style>
:root {
--color-primary: {{ setting('app-color' . $settingSuffix) }};
--color-primary-light: {{ setting('app-color-light' . $settingSuffix) }};

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

@ -70,15 +70,17 @@
</div>
<!-- App Color Scheme -->
<div class="pb-l">
@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>
@php
$darkMode = boolval(setting()->getForCurrentUser('dark-mode-enabled'));
@endphp
<div component="tabs" class="tab-container">
<div role="tablist" class="controls-card">
<button type="button"
@ -94,6 +96,7 @@
</div>
<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"
@ -102,6 +105,7 @@
@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"

6
resources/views/settings/parts/setting-color-scheme.blade.php
View File

@ -22,4 +22,8 @@
@include('settings.parts.setting-color-picker', ['type' => 'page', 'mode' => $mode])
@include('settings.parts.setting-color-picker', ['type' => 'page-draft', 'mode' => $mode])
</div>
</div>
</div>
<input type="hidden"
value="{{ setting('app-color-light' . ($mode === 'dark' ? '-dark' : '')) }}"
name="setting-app-color-light{{ $mode === 'dark' ? '-dark' : '' }}">