]> BookStack Code Mirror - bookstack/blobdiff - resources/views/settings/index.blade.php
Page Attachments - Improved UI, Now initially complete
[bookstack] / resources / views / settings / index.blade.php
index 4274378e62bf1a07f730473eefe4a4ea72e87884..ac25eb3b55e8a40bc33f885fb86cf5fcef16947c 100644 (file)
@@ -4,57 +4,84 @@
 
     @include('settings/navbar', ['selected' => 'settings'])
 
-<div class="container small">
+<div class="container small settings-container">
 
-    <h1>Settings</h1>
+    <h1>{{ trans('settings.settings') }}</h1>
 
-    <form action="/settings" method="POST">
+    <form action="{{ baseUrl("/settings") }}" method="POST" ng-cloak>
         {!! csrf_field() !!}
 
         <h3>App Settings</h3>
 
         <div class="row">
+
             <div class="col-md-6">
                 <div class="form-group">
-                    <label for="setting-app-name">Application name</label>
-                    <input type="text" value="{{ Setting::get('app-name', 'BookStack') }}" name="setting-app-name" id="setting-app-name">
+                    <label for="setting-app-name">{{ trans('settings.app_name') }}</label>
+                    <p class="small">{{ trans('settings.app_name_desc') }}</p>
+                    <input type="text" value="{{ setting('app-name', 'BookStack') }}" name="setting-app-name" id="setting-app-name">
+                </div>
+                <div class="form-group">
+                    <label>{{ trans('settings.app_name_header') }}</label>
+                    <div toggle-switch name="setting-app-name-header" value="{{ setting('app-name-header') }}"></div>
                 </div>
                 <div class="form-group">
-                    <label>Allow public viewing?</label>
-                    <toggle-switch name="setting-app-public" value="{{ Setting::get('app-public') }}"></toggle-switch>
+                    <label for="setting-app-public">{{ trans('settings.app_public_viewing') }}</label>
+                    <div toggle-switch name="setting-app-public" value="{{ setting('app-public') }}"></div>
                 </div>
                 <div class="form-group">
-                    <label>Enable higher security image uploads?</label>
-                    <p class="small">For performance reasons, all images are public by default, This option adds a random, hard-to-guess characters in front of image names. Ensure directory indexes are not enabled to prevent easy access.</p>
-                    <toggle-switch name="setting-app-secure-images" value="{{ Setting::get('app-secure-images') }}"></toggle-switch>
+                    <label>{{ trans('settings.app_secure_images') }}</label>
+                    <p class="small">{{ trans('settings.app_secure_images_desc') }}</p>
+                    <div toggle-switch name="setting-app-secure-images" value="{{ setting('app-secure-images') }}"></div>
+                </div>
+                <div class="form-group">
+                    <label for="setting-app-editor">{{ trans('settings.app_editor') }}</label>
+                    <p class="small">{{ trans('settings.app_editor_desc') }}</p>
+                    <select name="setting-app-editor" id="setting-app-editor">
+                        <option @if(setting('app-editor') === 'wysiwyg') selected @endif value="wysiwyg">WYSIWYG</option>
+                        <option @if(setting('app-editor') === 'markdown') selected @endif value="markdown">Markdown</option>
+                    </select>
                 </div>
             </div>
+
             <div class="col-md-6">
                 <div class="form-group" id="logo-control">
-                    <label for="setting-app-logo">Application Logo</label>
-                    <p class="small">This image should be 43px in height. <br>Large images will be scaled down.</p>
-                    <image-picker resize-height="43" show-remove="true" resize-width="200" current-image="{{ Setting::get('app-logo', '') }}" default-image="/logo.png" name="setting-app-logo" image-class="logo-image"></image-picker>
+                    <label for="setting-app-logo">{{ trans('settings.app_logo') }}</label>
+                    <p class="small">{!! trans('settings.app_logo_desc') !!}</p>
+                    <image-picker resize-height="43" show-remove="true" resize-width="200" current-image="{{ setting('app-logo', '') }}" default-image="{{ baseUrl('/logo.png') }}" name="setting-app-logo" image-class="logo-image"></image-picker>
+                </div>
+                <div class="form-group" id="color-control">
+                    <label for="setting-app-color">{{ trans('settings.app_primary_color') }}</label>
+                    <p class="small">{!! trans('settings.app_primary_color_desc') !!}</p>
+                    <input  type="text" value="{{ setting('app-color', '') }}" name="setting-app-color" id="setting-app-color" placeholder="#0288D1">
+                    <input  type="hidden" value="{{ setting('app-color-light', '') }}" name="setting-app-color-light" id="setting-app-color-light" placeholder="rgba(21, 101, 192, 0.15)">
                 </div>
             </div>
-        </div>
 
+        </div>
 
+        <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>
+        </div>
 
         <hr class="margin-top">
 
-        <h3>Registration Settings</h3>
+        <h3>{{ trans('settings.reg_settings') }}</h3>
+
         <div class="row">
             <div class="col-md-6">
                 <div class="form-group">
-                    <label for="setting-registration-enabled">Allow registration?</label>
-                    <toggle-switch name="setting-registration-enabled" value="{{ Setting::get('registration-enabled') }}"></toggle-switch>
+                    <label for="setting-registration-enabled">{{ trans('settings.reg_allow') }}</label>
+                    <div toggle-switch name="setting-registration-enabled" value="{{ setting('registration-enabled') }}"></div>
                 </div>
                 <div class="form-group">
-                    <label for="setting-registration-role">Default user role after registration</label>
+                    <label for="setting-registration-role">{{ trans('settings.reg_default_role') }}</label>
                     <select id="setting-registration-role" name="setting-registration-role" @if($errors->has('setting-registration-role')) class="neg" @endif>
                         @foreach(\BookStack\Role::all() as $role)
-                            <option value="{{$role->id}}"
-                                    @if(\Setting::get('registration-role', \BookStack\Role::first()->id) == $role->id) selected @endif
+                            <option value="{{$role->id}}" data-role-name="{{ $role->name }}"
+                                    @if(setting('registration-role', \BookStack\Role::first()->id) == $role->id) selected @endif
                                     >
                                 {{ $role->display_name }}
                             </option>
                     </select>
                 </div>
                 <div class="form-group">
-                    <label for="setting-registration-confirmation">Require email confirmation?</label>
-                    <p class="small">If domain restriction is used then email confirmation will be required and the below value will be ignored.</p>
-                    <toggle-switch name="setting-registration-confirmation" value="{{ Setting::get('registration-confirmation') }}"></toggle-switch>
+                    <label for="setting-registration-confirmation">{{ trans('settings.reg_confirm_email') }}</label>
+                    <p class="small">{{ trans('settings.reg_confirm_email_desc') }}</p>
+                    <div toggle-switch name="setting-registration-confirmation" value="{{ setting('registration-confirmation') }}"></div>
                 </div>
             </div>
             <div class="col-md-6">
                 <div class="form-group">
-                    <label for="setting-registration-restrict">Restrict registration to domain</label>
-                    <p class="small">Enter a comma separated list of email domains you would like to restrict registration to. Users will be sent an email to confirm their address before being allowed to interact with the application.
-                        <br> Note that users will be able to change their email addresses after successful registration.</p>
-                    <input type="text" id="setting-registration-restrict" name="setting-registration-restrict" placeholder="No restriction set" value="{{ Setting::get('registration-restrict', '') }}">
+                    <label for="setting-registration-restrict">{{ trans('settings.reg_confirm_restrict_domain') }}</label>
+                    <p class="small">{!! trans('settings.reg_confirm_restrict_domain_desc') !!}</p>
+                    <input type="text" id="setting-registration-restrict" name="setting-registration-restrict" placeholder="{{ trans('settings.reg_confirm_restrict_domain_placeholder') }}" value="{{ setting('registration-restrict', '') }}">
                 </div>
             </div>
         </div>
         <hr class="margin-top">
 
         <div class="form-group">
-            <button type="submit" class="button pos">Save Settings</button>
+            <span class="float right muted">
+                BookStack @if(strpos($version, 'v') !== 0) version @endif {{ $version }}
+            </span>
+            <button type="submit" class="button pos">{{ trans('settings.settings_save') }}</button>
         </div>
     </form>
 
 @include('partials/image-manager', ['imageType' => 'system'])
 
 @stop
+
+@section('scripts')
+    <script src="{{ baseUrl("/libs/jq-color-picker/tiny-color-picker.min.js?version=1.0.0") }}"></script>
+    <script type="text/javascript">
+        $('#setting-app-color').colorPicker({
+            opacity: false,
+            renderCallback: function($elm, toggled) {
+                var hexVal = '#' + this.color.colors.HEX;
+                var rgb = this.color.colors.RND.rgb;
+                var rgbLightVal = 'rgba('+ [rgb.r, rgb.g, rgb.b, '0.15'].join(',') +')';
+                // Set textbox color to hex color code.
+                var isEmpty = $.trim($elm.val()).length === 0;
+                if (!isEmpty) $elm.val(hexVal);
+                $('#setting-app-color-light').val(isEmpty ? '' : rgbLightVal);
+                // Set page elements to provide preview
+                $('#header, .image-picker .button').attr('style', 'background-color:'+ hexVal+'!important;');
+                $('.faded-small').css('background-color', rgbLightVal);
+                $('.setting-nav a.selected').css('border-bottom-color', hexVal  + '!important');
+            }
+        });
+    </script>
+@stop
\ No newline at end of file