From ecdeb545e0c38d33f40daff1da83ae109ec04769 Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Sun, 18 Mar 2018 15:13:46 +0000
Subject: [PATCH] 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.
---
 resources/assets/js/components/index.js       |  1 +
 .../assets/js/components/toggle-switch.js     | 19 +++++++++++++++++++
 resources/assets/sass/_forms.scss             |  8 +++++++-
 resources/lang/en/settings.php                |  4 ++--
 .../views/components/toggle-switch.blade.php  | 13 +------------
 resources/views/settings/index.blade.php      |  2 +-
 6 files changed, 31 insertions(+), 16 deletions(-)
 create mode 100644 resources/assets/js/components/toggle-switch.js

diff --git a/resources/assets/js/components/index.js b/resources/assets/js/components/index.js
index 5d091623a..6069dd18b 100644
--- a/resources/assets/js/components/index.js
+++ b/resources/assets/js/components/index.js
@@ -16,6 +16,7 @@ let componentMapping = {
     'editor-toolbox': require('./editor-toolbox'),
     'image-picker': require('./image-picker'),
     'collapsible': require('./collapsible'),
+    'toggle-switch': require('./toggle-switch'),
 };
 
 window.components = {};
diff --git a/resources/assets/js/components/toggle-switch.js b/resources/assets/js/components/toggle-switch.js
new file mode 100644
index 000000000..8eb559506
--- /dev/null
+++ b/resources/assets/js/components/toggle-switch.js
@@ -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;
\ No newline at end of file
diff --git a/resources/assets/sass/_forms.scss b/resources/assets/sass/_forms.scss
index 94d38f4e8..11adc7951 100644
--- a/resources/assets/sass/_forms.scss
+++ b/resources/assets/sass/_forms.scss
@@ -98,7 +98,6 @@ label {
   font-size: 0.94em;
   font-weight: 400;
   color: #999;
-  text-transform: uppercase;
   padding-bottom: 2px;
   margin-bottom: 0.2em;
   &.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 {
   .text-pos, .text-neg {
     padding: $-xs 0;
diff --git a/resources/lang/en/settings.php b/resources/lang/en/settings.php
index d5ef4840e..ba631fb9e 100755
--- a/resources/lang/en/settings.php
+++ b/resources/lang/en/settings.php
@@ -19,7 +19,7 @@ return [
     'app_settings' => 'App Settings',
     'app_name' => 'Application name',
     '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_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.',
@@ -31,7 +31,7 @@ return [
     '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_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_default' => 'Default homepage view chosen',
     'app_disable_comments' => 'Disable comments',
diff --git a/resources/views/components/toggle-switch.blade.php b/resources/views/components/toggle-switch.blade.php
index ad54d5ab1..c5a30a60f 100644
--- a/resources/views/components/toggle-switch.blade.php
+++ b/resources/views/components/toggle-switch.blade.php
@@ -1,15 +1,4 @@
 <div toggle-switch="{{$name}}" class="toggle-switch @if($value) active @endif">
     <input type="hidden" name="{{$name}}" value="{{$value?'true':'false'}}"/>
     <div class="switch-handle"></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>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/resources/views/settings/index.blade.php b/resources/views/settings/index.blade.php
index 0b9ddd482..51ca8ccb4 100644
--- a/resources/views/settings/index.blade.php
+++ b/resources/views/settings/index.blade.php
@@ -88,7 +88,7 @@
                 <div class="form-group">
                     <label for="setting-app-custom-head">{{ trans('settings.app_custom_html') }}</label>
                     <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 class="form-group text-right">