BookStack Code Mirror - bookstack/blob - resources/views/settings/customization.blade.php

1 @extends('settings.layout')

2

3 @section('card')

4 <h1 id="customization" class="list-heading">{{ trans('settings.app_customization') }}</h1>

5 <form action="{{ url("/settings/customization") }}" method="POST" enctype="multipart/form-data">

6 {{ csrf_field() }}

7 <input type="hidden" name="section" value="customization">

8

9 <div class="setting-list">

10

11 <div class="grid half gap-xl">

12 <div>

13 <label for="setting-app-name" class="setting-list-label">{{ trans('settings.app_name') }}</label>

14 <p class="small">{{ trans('settings.app_name_desc') }}</p>

15 </div>

16 <div class="pt-xs">

17 <input type="text" value="{{ setting('app-name', 'BookStack') }}" name="setting-app-name" id="setting-app-name">

18 @include('form.toggle-switch', [

19 'name' => 'setting-app-name-header',

20 'value' => setting('app-name-header'),

21 'label' => trans('settings.app_name_header'),

22 ])

23 </div>

24 </div>

25

26 <div class="grid half gap-xl items-center">

27 <div>

28 <label class="setting-list-label" for="setting-app-editor">{{ trans('settings.app_default_editor') }}</label>

29 <p class="small">{{ trans('settings.app_default_editor_desc') }}</p>

30 </div>

31 <div>

32 <select name="setting-app-editor" id="setting-app-editor">

33 <option @if(setting('app-editor') === 'wysiwyg') selected @endif value="wysiwyg">WYSIWYG</option>

34 <option @if(setting('app-editor') === 'markdown') selected @endif value="markdown">Markdown</option>

35 <option @if(setting('app-editor') === 'wysiwyg2024') selected @endif value="wysiwyg2024">New WYSIWYG (alpha testing)</option>

36 </select>

37 </div>

38 </div>

39

40 <div class="grid half gap-xl">

41 <div>

42 <label class="setting-list-label">{{ trans('settings.app_logo') }}</label>

43 <p class="small">{!! trans('settings.app_logo_desc') !!}</p>

44 </div>

45 <div class="pt-xs">

46 @include('form.image-picker', [

47 'removeName' => 'setting-app-logo',

48 'removeValue' => 'none',

49 'defaultImage' => url('/logo.png'),

50 'currentImage' => setting('app-logo'),

51 'name' => 'app_logo',

52 'imageClass' => 'logo-image',

53 ])

54 </div>

55 </div>

56

57 <div class="grid half gap-xl">

58 <div>

59 <label class="setting-list-label">{{ trans('settings.app_icon') }}</label>

60 <p class="small">{{ trans('settings.app_icon_desc') }}</p>

61 </div>

62 <div class="pt-xs">

63 @include('form.image-picker', [

64 'removeValue' => 'none',

65 'defaultImage' => url('/icon.png'),

66 'currentImage' => setting('app-icon'),

67 'name' => 'app_icon',

68 'imageClass' => 'logo-image',

69 ])

70 </div>

71 </div>

72

73

74 @php

75 $darkMode = boolval(setting()->getForCurrentUser('dark-mode-enabled'));

76 @endphp

77 <div component="setting-app-color-scheme"

78 option:setting-app-color-scheme:mode="{{ $darkMode ? 'dark' : 'light' }}"

79 class="pb-l">

80 <div class="mb-l">

81 <label class="setting-list-label">{{ trans('settings.color_scheme') }}</label>

82 <p class="small">{{ trans('settings.color_scheme_desc') }}</p>

83 </div>

84

85 <div component="tabs" class="tab-container">

86 <div role="tablist" class="controls-card">

87 <button type="button"

88 role="tab"

89 id="color-scheme-tab-light"

90 aria-selected="{{ $darkMode ? 'false' : 'true' }}"

91 aria-controls="color-scheme-panel-light">@icon('light-mode'){{ trans('common.light_mode') }}</button>

92 <button type="button"

93 role="tab"

94 id="color-scheme-tab-dark"

95 aria-selected="{{ $darkMode ? 'true' : 'false' }}"

96 aria-controls="color-scheme-panel-dark">@icon('dark-mode'){{ trans('common.dark_mode') }}</button>

97 </div>

98 <div class="sub-card">

99 <div id="color-scheme-panel-light"

100 refs="setting-app-color-scheme@lightContainer"

101 tabindex="0"

102 role="tabpanel"

103 aria-labelledby="color-scheme-tab-light"

104 @if($darkMode) hidden @endif

105 class="p-m">

106 @include('settings.parts.setting-color-scheme', ['mode' => 'light'])

107 </div>

108 <div id="color-scheme-panel-dark"

109 refs="setting-app-color-scheme@darkContainer"

110 tabindex="0"

111 role="tabpanel"

112 aria-labelledby="color-scheme-tab-light"

113 @if(!$darkMode) hidden @endif

114 class="p-m">

115 @include('settings.parts.setting-color-scheme', ['mode' => 'dark'])

116 </div>

117 </div>

118 </div>

119 </div>

120

121 <div component="setting-homepage-control" id="homepage-control" class="grid half gap-xl items-center">

122 <div>

123 <label for="setting-app-homepage-type" class="setting-list-label">{{ trans('settings.app_homepage') }}</label>

124 <p class="small">{{ trans('settings.app_homepage_desc') }}</p>

125 </div>

126 <div>

127 <select refs="setting-homepage-control@type-control"

128 name="setting-app-homepage-type"

129 id="setting-app-homepage-type">

130 <option @if(setting('app-homepage-type') === 'default') selected @endif value="default">{{ trans('common.default') }}</option>

131 <option @if(setting('app-homepage-type') === 'books') selected @endif value="books">{{ trans('entities.books') }}</option>

132 <option @if(setting('app-homepage-type') === 'bookshelves') selected @endif value="bookshelves">{{ trans('entities.shelves') }}</option>

133 <option @if(setting('app-homepage-type') === 'page') selected @endif value="page">{{ trans('entities.pages_specific') }}</option>

134 </select>

135

136 <div refs="setting-homepage-control@page-picker-container" style="display: none;" class="mt-m">

137 @include('form.page-picker', [

138 'name' => 'setting-app-homepage',

139 'placeholder' => trans('settings.app_homepage_select'),

140 'value' => setting('app-homepage'),

141 'selectorEndpoint' => '/search/entity-selector',

142 ])

143 </div>

144 </div>

145 </div>

146

147 <div>

148 <label for="setting-app-privacy-link" class="setting-list-label">{{ trans('settings.app_footer_links') }}</label>

149 <p class="small mb-m">{{ trans('settings.app_footer_links_desc') }}</p>

150 @include('settings.parts.footer-links', ['name' => 'setting-app-footer-links', 'value' => setting('app-footer-links', [])])

151 </div>

152

153

154 <div>

155 <label for="setting-app-custom-head" class="setting-list-label">{{ trans('settings.app_custom_html') }}</label>

156 <p class="small">{{ trans('settings.app_custom_html_desc') }}</p>

157 <div class="mt-m">

158 <textarea component="code-textarea"

159 option:code-textarea:mode="html"

160 name="setting-app-custom-head"

161 id="setting-app-custom-head"

162 class="simple-code-input">{{ setting('app-custom-head', '') }}</textarea>

163 </div>

164 <p class="small text-right">{{ trans('settings.app_custom_html_disabled_notice') }}</p>

165 </div>

166

167

168 </div>

169

170 <div class="form-group text-right">

171 <button type="submit" class="button">{{ trans('settings.settings_save') }}</button>

172 </div>

173 </form>

174 @endsection

175

176 @section('after-content')

177 @include('entities.selector-popup')

178 @endsection