mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-08-29 13:42:38 +00:00
Cleaned some form styling
Removed uppercasing of labels to make a little friendlier. Extracted out toggleswitch JS into own component. Improved basic code input for html-head-input area.
This commit is contained in:
parent
2c8d7da885
commit
ecdeb545e0
@ -16,6 +16,7 @@ let componentMapping = {
|
|||||||
'editor-toolbox': require('./editor-toolbox'),
|
'editor-toolbox': require('./editor-toolbox'),
|
||||||
'image-picker': require('./image-picker'),
|
'image-picker': require('./image-picker'),
|
||||||
'collapsible': require('./collapsible'),
|
'collapsible': require('./collapsible'),
|
||||||
|
'toggle-switch': require('./toggle-switch'),
|
||||||
};
|
};
|
||||||
|
|
||||||
window.components = {};
|
window.components = {};
|
||||||
|
19
resources/assets/js/components/toggle-switch.js
Normal file
19
resources/assets/js/components/toggle-switch.js
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
|
||||||
|
class ToggleSwitch {
|
||||||
|
|
||||||
|
constructor(elem) {
|
||||||
|
this.elem = elem;
|
||||||
|
this.input = elem.querySelector('input');
|
||||||
|
|
||||||
|
this.elem.onclick = this.onClick.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
onClick(event) {
|
||||||
|
let checked = this.input.value !== 'true';
|
||||||
|
this.input.value = checked ? 'true' : 'false';
|
||||||
|
checked ? this.elem.classList.add('active') : this.elem.classList.remove('active');
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = ToggleSwitch;
|
@ -98,7 +98,6 @@ label {
|
|||||||
font-size: 0.94em;
|
font-size: 0.94em;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: #999;
|
color: #999;
|
||||||
text-transform: uppercase;
|
|
||||||
padding-bottom: 2px;
|
padding-bottom: 2px;
|
||||||
margin-bottom: 0.2em;
|
margin-bottom: 0.2em;
|
||||||
&.inline {
|
&.inline {
|
||||||
@ -192,6 +191,13 @@ input:checked + .toggle-switch {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.simple-code-input {
|
||||||
|
background-color: #F8F8F8;
|
||||||
|
font-family: monospace;
|
||||||
|
font-size: 12px;
|
||||||
|
min-height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
.form-group {
|
.form-group {
|
||||||
.text-pos, .text-neg {
|
.text-pos, .text-neg {
|
||||||
padding: $-xs 0;
|
padding: $-xs 0;
|
||||||
|
@ -19,7 +19,7 @@ return [
|
|||||||
'app_settings' => 'App Settings',
|
'app_settings' => 'App Settings',
|
||||||
'app_name' => 'Application name',
|
'app_name' => 'Application name',
|
||||||
'app_name_desc' => 'This name is shown in the header and any emails.',
|
'app_name_desc' => 'This name is shown in the header and any emails.',
|
||||||
'app_name_header' => 'Show Application name in header?',
|
'app_name_header' => 'Show application name in header?',
|
||||||
'app_public_viewing' => 'Allow public viewing?',
|
'app_public_viewing' => 'Allow public viewing?',
|
||||||
'app_secure_images' => 'Enable higher security image uploads?',
|
'app_secure_images' => 'Enable higher security image uploads?',
|
||||||
'app_secure_images_desc' => 'For performance reasons, all images are public. This option adds a random, hard-to-guess string in front of image urls. Ensure directory indexes are not enabled to prevent easy access.',
|
'app_secure_images_desc' => 'For performance reasons, all images are public. This option adds a random, hard-to-guess string in front of image urls. Ensure directory indexes are not enabled to prevent easy access.',
|
||||||
@ -31,7 +31,7 @@ return [
|
|||||||
'app_logo_desc' => 'This image should be 43px in height. <br>Large images will be scaled down.',
|
'app_logo_desc' => 'This image should be 43px in height. <br>Large images will be scaled down.',
|
||||||
'app_primary_color' => 'Application primary color',
|
'app_primary_color' => 'Application primary color',
|
||||||
'app_primary_color_desc' => 'This should be a hex value. <br>Leave empty to reset to the default color.',
|
'app_primary_color_desc' => 'This should be a hex value. <br>Leave empty to reset to the default color.',
|
||||||
'app_homepage' => 'Application Homepage',
|
'app_homepage' => 'Application homepage',
|
||||||
'app_homepage_desc' => 'Select a page to show on the homepage instead of the default view. Page permissions are ignored for selected pages.',
|
'app_homepage_desc' => 'Select a page to show on the homepage instead of the default view. Page permissions are ignored for selected pages.',
|
||||||
'app_homepage_default' => 'Default homepage view chosen',
|
'app_homepage_default' => 'Default homepage view chosen',
|
||||||
'app_disable_comments' => 'Disable comments',
|
'app_disable_comments' => 'Disable comments',
|
||||||
|
@ -2,14 +2,3 @@
|
|||||||
<input type="hidden" name="{{$name}}" value="{{$value?'true':'false'}}"/>
|
<input type="hidden" name="{{$name}}" value="{{$value?'true':'false'}}"/>
|
||||||
<div class="switch-handle"></div>
|
<div class="switch-handle"></div>
|
||||||
</div>
|
</div>
|
||||||
<script>
|
|
||||||
(function() {
|
|
||||||
var toggle = document.querySelector('[toggle-switch="{{$name}}"]');
|
|
||||||
var toggleInput = toggle.querySelector('input');
|
|
||||||
toggle.onclick = function(event) {
|
|
||||||
var checked = toggleInput.value !== 'true';
|
|
||||||
toggleInput.value = checked ? 'true' : 'false';
|
|
||||||
checked ? toggle.classList.add('active') : toggle.classList.remove('active');
|
|
||||||
};
|
|
||||||
})()
|
|
||||||
</script>
|
|
@ -88,7 +88,7 @@
|
|||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="setting-app-custom-head">{{ trans('settings.app_custom_html') }}</label>
|
<label for="setting-app-custom-head">{{ trans('settings.app_custom_html') }}</label>
|
||||||
<p class="small">{{ trans('settings.app_custom_html_desc') }}</p>
|
<p class="small">{{ trans('settings.app_custom_html_desc') }}</p>
|
||||||
<textarea name="setting-app-custom-head" id="setting-app-custom-head">{{ setting('app-custom-head', '') }}</textarea>
|
<textarea class="simple-code-input" name="setting-app-custom-head" id="setting-app-custom-head">{{ setting('app-custom-head', '') }}</textarea>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group text-right">
|
<div class="form-group text-right">
|
||||||
|
Loading…
Reference in New Issue
Block a user