webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-08-07 23:03:00 +03:00
Code Activity

Created solution for JS translations

Browse Source 
Also tidied up existing components and JS
This commit is contained in:
Dan Brown
2016-12-31 14:27:40 +00:00
parent 05316c90ba
commit c9700e38e2
26 changed files with 371 additions and 267 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
resources/views/base.blade.php
View File

@@ -17,6 +17,7 @@
<!-- Scripts -->
<script src="{{ baseUrl('/libs/jquery/jquery.min.js?version=2.1.4') }}"></script>
<script src="{{ baseUrl('/libs/jquery/jquery-ui.min.js?version=1.11.4') }}"></script>
<script src="{{ baseUrl('/translations.js') }}"></script>
@yield('head')

2
resources/views/chapters/move.blade.php
View File

@@ -19,7 +19,7 @@
{!! csrf_field() !!}
<input type="hidden" name="_method" value="PUT">
@include('partials/entity-selector', ['name' => 'entity_selection', 'selectorSize' => 'large', 'entityTypes' => 'book'])
@include('components.entity-selector', ['name' => 'entity_selection', 'selectorSize' => 'large', 'entityTypes' => 'book'])
<a href="{{ $chapter->getUrl() }}" class="button muted">{{ trans('common.cancel') }}</a>
<button type="submit" class="button pos">{{ trans('entities.chapters_move') }}</button>

2
resources/views/partials/entity-selector-popup.blade.php → resources/views/components/entity-selector-popup.blade.php
View File

@@ -5,7 +5,7 @@
<div class="popup-title">{{ trans('entities.entity_select') }}</div>
<button type="button" class="corner-button neg button popup-close">x</button>
</div>
@include('partials/entity-selector', ['name' => 'entity-selector'])
@include('components.entity-selector', ['name' => 'entity-selector'])
<div class="popup-footer">
<button type="button" disabled="true" class="button entity-link-selector-confirm pos corner-button">{{ trans('common.select') }}</button>
</div>

2
resources/views/partials/entity-selector.blade.php → resources/views/components/entity-selector.blade.php
View File

@@ -2,7 +2,7 @@
<div entity-selector class="entity-selector {{$selectorSize or ''}}" entity-types="{{ $entityTypes or 'book,chapter,page' }}">
<input type="hidden" entity-selector-input name="{{$name}}" value="">
<input type="text" placeholder="{{ trans('common.search') }}" ng-model="search" ng-model-options="{debounce: 200}" ng-change="searchEntities()">
<div class="text-center loading" ng-show="loading">@include('partials/loading-icon')</div>
<div class="text-center loading" ng-show="loading">@include('partials.loading-icon')</div>
<div ng-show="!loading" ng-bind-html="entityResults"></div>
</div>
</div>

22
resources/views/partials/image-manager.blade.php → resources/views/components/image-manager.blade.php
View File

@@ -3,7 +3,7 @@
<div class="popup-body" ng-click="$event.stopPropagation()">
<div class="popup-header primary-background">
<div class="popup-title">{{ trans('components.imagem_select') }}</div>
<div class="popup-title">{{ trans('components.image_select') }}</div>
<button class="popup-close neg corner-button button">x</button>
</div>
@@ -12,14 +12,14 @@
<div class="image-manager-content">
<div ng-if="imageType === 'gallery'" class="container">
<div class="image-manager-header row faded-small nav-tabs">
<div class="col-xs-4 tab-item" title="{{ trans('components.imagem_all_title') }}" ng-class="{selected: (view=='all')}" ng-click="setView('all')"><i class="zmdi zmdi-collection-image"></i> {{ trans('components.imagem_all') }}</div>
<div class="col-xs-4 tab-item" title="{{ trans('components.imagem_book_title') }}" ng-class="{selected: (view=='book')}" ng-click="setView('book')"><i class="zmdi zmdi-book text-book"></i> {{ trans('entities.book') }}</div>
<div class="col-xs-4 tab-item" title="{{ trans('components.imagem_page_title') }}" ng-class="{selected: (view=='page')}" ng-click="setView('page')"><i class="zmdi zmdi-file-text text-page"></i> {{ trans('entities.page') }}</div>
<div class="col-xs-4 tab-item" title="{{ trans('components.image_all_title') }}" ng-class="{selected: (view=='all')}" ng-click="setView('all')"><i class="zmdi zmdi-collection-image"></i> {{ trans('components.image_all') }}</div>
<div class="col-xs-4 tab-item" title="{{ trans('components.image_book_title') }}" ng-class="{selected: (view=='book')}" ng-click="setView('book')"><i class="zmdi zmdi-book text-book"></i> {{ trans('entities.book') }}</div>
<div class="col-xs-4 tab-item" title="{{ trans('components.image_page_title') }}" ng-class="{selected: (view=='page')}" ng-click="setView('page')"><i class="zmdi zmdi-file-text text-page"></i> {{ trans('entities.page') }}</div>
</div>
</div>
<div ng-show="view === 'all'" >
<form ng-submit="searchImages()" class="contained-search-box">
<input type="text" placeholder="{{ trans('components.imagem_search_hint') }}" ng-model="searchTerm">
<input type="text" placeholder="{{ trans('components.image_search_hint') }}" ng-model="searchTerm">
<button ng-class="{active: searching}" title="{{ trans('common.search_clear') }}" type="button" ng-click="cancelSearch()" class="text-button cancel"><i class="zmdi zmdi-close-circle-o"></i></button>
<button title="{{ trans('common.search') }}" class="text-button" type="submit"><i class="zmdi zmdi-search"></i></button>
</form>
@@ -31,11 +31,11 @@
<img ng-src="@{{image.thumbs.gallery}}" ng-attr-alt="@{{image.title}}" ng-attr-title="@{{image.name}}">
<div class="image-meta">
<span class="name" ng-bind="image.name"></span>
<span class="date">{{ trans('components.imagem_uploaded', ['uploadedDate' => "{{ getDate(image.created_at) }" . "}"]) }}</span>
<span class="date">{{ trans('components.image_uploaded', ['uploadedDate' => "{{ getDate(image.created_at) }" . "}"]) }}</span>
</div>
</div>
</div>
<div class="load-more" ng-show="hasMore" ng-click="fetchData()">{{ trans('components.imagem_load_more') }}</div>
<div class="load-more" ng-show="hasMore" ng-click="fetchData()">{{ trans('components.image_load_more') }}</div>
</div>
</div>
@@ -51,14 +51,14 @@
</a>
</div>
<div class="form-group">
<label for="name">{{ trans('components.imagem_image_name') }}</label>
<label for="name">{{ trans('components.image_image_name') }}</label>
<input type="text" id="name" name="name" ng-model="selectedImage.name">
</div>
</form>
<div ng-show="dependantPages">
<p class="text-neg text-small">
{{ trans('components.imagem_delete_confirm') }}
{{ trans('components.image_delete_confirm') }}
</p>
<ul class="text-neg">
<li ng-repeat="page in dependantPages">
@@ -72,13 +72,13 @@
<button class="button icon neg"><i class="zmdi zmdi-delete"></i></button>
</form>
<button class="button pos anim fadeIn float right" ng-show="selectedImage" ng-click="selectButtonClick()">
<i class="zmdi zmdi-square-right"></i>{{ trans('components.imagem_select_image') }}
<i class="zmdi zmdi-square-right"></i>{{ trans('components.image_select_image') }}
</button>
</div>
</div>
<drop-zone message="{{ trans('components.imagem_dropzone') }}" upload-url="@{{getUploadUrl()}}" uploaded-to="@{{uploadedTo}}" event-success="uploadSuccess"></drop-zone>
<drop-zone message="{{ trans('components.image_dropzone') }}" upload-url="@{{getUploadUrl()}}" uploaded-to="@{{uploadedTo}}" event-success="uploadSuccess"></drop-zone>
</div>

57
resources/views/components/image-picker.blade.php
View File

@@ -1,10 +1,10 @@
<div class="image-picker" data-default-image="{{ $defaultImage }}" data-resize-height="{{ $resizeHeight }}" data-resize-width="{{ $resizeWidth }}" data-current-id="{{ $currentId or '' }}" data-resize-crop="{{ $resizeCrop or '' }}">
<div class="image-picker" image-picker="{{$name}}" data-default-image="{{ $defaultImage }}" data-resize-height="{{ $resizeHeight }}" data-resize-width="{{ $resizeWidth }}" data-current-id="{{ $currentId or '' }}" data-resize-crop="{{ $resizeCrop or '' }}">
<div>
<img @if($currentImage && $currentImage !== 'none') src="{{$currentImage}}" @else src="{{$defaultImage}}" @endif class="{{$imageClass}} @if($currentImage=== 'none') none @endif" alt="{{ trans('components.image_preview') }}">
</div>
<button class="button" type="button" data-action="show-image-manager">{{ trans('components.imagem_select_image') }}</button>
<button class="button" type="button" data-action="show-image-manager">{{ trans('components.image_select_image') }}</button>
<br>
<button class="text-button" data-action="reset-image" type="button">{{ trans('common.reset') }}</button>
@@ -13,5 +13,54 @@
<button class="text-button neg" data-action="remove-image" type="button">{{ trans('common.remove') }}</button>
@endif
<input type="hidden" name="{{$name}}" id="{{$name}}" value="{{$currentId or $currentImage or ''}}">
</div>
<input type="hidden" name="{{$name}}" id="{{$name}}" value="{{ isset($currentId) && ($currentId !== '' && $currentId !== false) ? $currentId : $currentImage}}">
</div>
<script>
(function(){
var picker = document.querySelector('[image-picker="{{$name}}"]');
picker.addEventListener('click', function(event) {
if (event.target.nodeName.toLowerCase() !== 'button') return;
var button = event.target;
var action = button.getAttribute('data-action');
var resize = picker.getAttribute('data-resize-height') && picker.getAttribute('data-resize-width');
var usingIds = picker.getAttribute('data-current-id') !== '';
var resizeCrop = picker.getAttribute('data-resize-crop') !== '';
var imageElem = picker.querySelector('img');
var input = picker.querySelector('input');
function setImage(image) {
if (image === 'none') {
imageElem.src = picker.getAttribute('data-default-image');
imageElem.classList.add('none');
input.value = 'none';
return;
}
imageElem.src = image.url;
input.value = usingIds ? image.id : image.url;
imageElem.classList.remove('none');
}
if (action === 'show-image-manager') {
window.ImageManager.showExternal((image) => {
if (!resize) {
setImage(image);
return;
}
var requestString = '/images/thumb/' + image.id + '/' + picker.getAttribute('data-resize-width') + '/' + picker.getAttribute('data-resize-height') + '/' + (resizeCrop ? 'true' : 'false');
$.get(window.baseUrl(requestString), resp => {
image.url = resp.url;
setImage(image);
});
});
} else if (action === 'reset-image') {
setImage({id: 0, url: picker.getAttribute('data-default-image')});
} else if (action === 'remove-image') {
setImage('none');
}
});
})();
</script>

15
resources/views/components/toggle-switch.blade.php
View File

@@ -1,4 +1,15 @@
<div toggle-switch class="toggle-switch @if($value) active @endif">
<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>
</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>

4
resources/views/pages/edit.blade.php
View File

@@ -20,7 +20,7 @@
</div>
@include('partials/image-manager', ['imageType' => 'gallery', 'uploaded_to' => $page->id])
@include('partials/entity-selector-popup')
@include('components.image-manager', ['imageType' => 'gallery', 'uploaded_to' => $page->id])
@include('components.entity-selector-popup')
@stop

2
resources/views/pages/move.blade.php
View File

@@ -19,7 +19,7 @@
{!! csrf_field() !!}
<input type="hidden" name="_method" value="PUT">
@include('partials/entity-selector', ['name' => 'entity_selection', 'selectorSize' => 'large', 'entityTypes' => 'book,chapter'])
@include('components.entity-selector', ['name' => 'entity_selection', 'selectorSize' => 'large', 'entityTypes' => 'book,chapter'])
<a href="{{ $page->getUrl() }}" class="button muted">{{ trans('common.cancel') }}</a>
<button type="submit" class="button pos">{{ trans('entities.pages_move') }}</button>

2
resources/views/partials/custom-styles.blade.php
View File

@@ -1,4 +1,4 @@
<style>
<style id="custom-styles" data-color="{{ setting('app-color') }}" data-color-light="{{ setting('app-color-light') }}">
header, #back-to-top, .primary-background {
background-color: {{ setting('app-color') }} !important;
}

19
resources/views/settings/index.blade.php
View File

@@ -56,7 +56,8 @@
'defaultImage' => baseUrl('/logo.png'),
'currentImage' => setting('app-logo'),
'name' => 'setting-app-logo',
'imageClass' => 'logo-image'
'imageClass' => 'logo-image',
'currentId' => false
])
</div>
@@ -125,7 +126,7 @@
</div>
@include('partials/image-manager', ['imageType' => 'system'])
@include('components.image-manager', ['imageType' => 'system'])
@stop
@@ -142,10 +143,16 @@
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');
var customStyles = document.getElementById('custom-styles');
var oldColor = customStyles.getAttribute('data-color');
var 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);
}
});
</script>

4
resources/views/settings/roles/index.blade.php
View File

@@ -20,13 +20,13 @@
<tr>
<th>{{ trans('settings.role_name') }}</th>
<th></th>
<th class="text-right">{{ trans('settings.users') }}</th>
<th class="text-center">{{ trans('settings.users') }}</th>
</tr>
@foreach($roles as $role)
<tr>
<td><a href="{{ baseUrl("/settings/roles/{$role->id}") }}">{{ $role->display_name }}</a></td>
<td>{{ $role->description }}</td>
<td class="text-right">{{ $role->users->count() }}</td>
<td class="text-center">{{ $role->users->count() }}</td>
</tr>
@endforeach
</table>

2
resources/views/users/edit.blade.php
View File

@@ -85,5 +85,5 @@
</div>
<p class="margin-top large"><br></p>
@include('partials/image-manager', ['imageType' => 'user'])
@include('components.image-manager', ['imageType' => 'user'])
@stop