mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-10-01 01:36:00 -04:00
Default templates: Cleaned up ux, added case for added endpoint
Cleaned up and updated page picker a bit, allowing longer names to show, clicking through to item without triggering popup, and updated to use hidden attributes instead of styles. Added phpunit tests to cover supporting entity-selector-templates endpoint.
This commit is contained in:
parent
d75eb06777
commit
2081a783f3
@ -1,7 +1,7 @@
|
||||
import {Component} from './component';
|
||||
|
||||
function toggleElem(elem, show) {
|
||||
elem.style.display = show ? null : 'none';
|
||||
elem.toggleAttribute('hidden', !show);
|
||||
}
|
||||
|
||||
export class PagePicker extends Component {
|
||||
@ -21,6 +21,7 @@ export class PagePicker extends Component {
|
||||
setupListeners() {
|
||||
this.selectButton.addEventListener('click', this.showPopup.bind(this));
|
||||
this.display.parentElement.addEventListener('click', this.showPopup.bind(this));
|
||||
this.display.addEventListener('click', e => e.stopPropagation());
|
||||
|
||||
this.resetButton.addEventListener('click', () => {
|
||||
this.setValue('', '');
|
||||
|
@ -270,10 +270,14 @@ body.flexbox {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fill-height {
|
||||
.height-fill {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.height-auto {
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.float {
|
||||
float: left;
|
||||
&.right {
|
||||
|
@ -40,18 +40,19 @@
|
||||
<label for="template-manager">{{ trans('entities.books_default_template') }}</label>
|
||||
</button>
|
||||
<div refs="collapsible@content" class="collapse-content">
|
||||
<div class="flex-container-row items-center gap-m justify-space-between pt-s pb-xs">
|
||||
<p class="text-muted small my-none">
|
||||
<div class="flex-container-row gap-l justify-space-between pb-xs wrap">
|
||||
<p class="text-muted small my-none min-width-xs flex">
|
||||
{{ trans('entities.books_default_template_explain') }}
|
||||
</p>
|
||||
|
||||
|
||||
<div class="min-width-m">
|
||||
@include('form.page-picker', [
|
||||
'name' => 'default_template_id',
|
||||
'placeholder' => trans('entities.books_default_template_select'),
|
||||
'value' => $book?->default_template_id ?? null,
|
||||
])
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
@ -1,13 +1,13 @@
|
||||
|
||||
{{--Depends on entity selector popup--}}
|
||||
<div component="page-picker">
|
||||
<div class="input-base overflow-hidden">
|
||||
<span @if($value) style="display: none" @endif refs="page-picker@default-display" class="text-muted italic">{{ $placeholder }}</span>
|
||||
<a @if(!$value) style="display: none" @endif href="{{ url('/link/' . $value) }}" target="_blank" rel="noopener" class="text-page" refs="page-picker@display">#{{$value}}, {{$value ? \BookStack\Entities\Models\Page::query()->visible()->find($value)->name ?? '' : '' }}</a>
|
||||
<div class="input-base overflow-hidden height-auto">
|
||||
<span @if($value) hidden @endif refs="page-picker@default-display" class="text-muted italic">{{ $placeholder }}</span>
|
||||
<a @if(!$value) hidden @endif href="{{ url('/link/' . $value) }}" target="_blank" rel="noopener" class="text-page" refs="page-picker@display">#{{$value}}, {{$value ? \BookStack\Entities\Models\Page::query()->visible()->find($value)->name ?? '' : '' }}</a>
|
||||
</div>
|
||||
<br>
|
||||
<input refs="page-picker@input" type="hidden" value="{{$value}}" name="{{$name}}" id="{{$name}}">
|
||||
<button @if(!$value) style="display: none" @endif type="button" refs="page-picker@reset-button" class="text-button">{{ trans('common.reset') }}</button>
|
||||
<span refs="page-picker@button-seperator" @if(!$value) style="display: none" @endif class="sep">|</span>
|
||||
<button @if(!$value) hidden @endif type="button" refs="page-picker@reset-button" class="text-button">{{ trans('common.reset') }}</button>
|
||||
<span refs="page-picker@button-seperator" @if(!$value) hidden @endif class="sep">|</span>
|
||||
<button type="button" refs="page-picker@select-button" class="text-button">{{ trans('common.select') }}</button>
|
||||
</div>
|
@ -4,7 +4,7 @@
|
||||
|
||||
@section('content')
|
||||
|
||||
<div id="main-content" class="flex-fill flex fill-height">
|
||||
<div id="main-content" class="flex-fill flex height-fill">
|
||||
<form action="{{ $page->getUrl() }}" autocomplete="off" data-page-id="{{ $page->id }}" method="POST" class="flex flex-fill">
|
||||
{{ csrf_field() }}
|
||||
|
||||
|
@ -252,6 +252,31 @@ class EntitySearchTest extends TestCase
|
||||
$this->withHtml($resp)->assertElementContains($baseSelector, "You don't have the required permissions to select this item");
|
||||
}
|
||||
|
||||
public function test_entity_template_selector_search()
|
||||
{
|
||||
$templatePage = $this->entities->newPage(['name' => 'Template search test', 'html' => 'template test']);
|
||||
$templatePage->template = true;
|
||||
$templatePage->save();
|
||||
|
||||
$nonTemplatePage = $this->entities->newPage(['name' => 'Nontemplate page', 'html' => 'nontemplate', 'template' => false]);
|
||||
|
||||
// Visit both to make popular
|
||||
$this->asEditor()->get($templatePage->getUrl());
|
||||
$this->asEditor()->get($nonTemplatePage->getUrl());
|
||||
|
||||
$normalSearch = $this->get('/search/entity-selector-templates?term=test');
|
||||
$normalSearch->assertSee($templatePage->name);
|
||||
$normalSearch->assertDontSee($nonTemplatePage->name);
|
||||
|
||||
$normalSearch = $this->get('/search/entity-selector-templates?term=beans');
|
||||
$normalSearch->assertDontSee($templatePage->name);
|
||||
$normalSearch->assertDontSee($nonTemplatePage->name);
|
||||
|
||||
$defaultListTest = $this->get('/search/entity-selector-templates');
|
||||
$defaultListTest->assertSee($templatePage->name);
|
||||
$defaultListTest->assertDontSee($nonTemplatePage->name);
|
||||
}
|
||||
|
||||
public function test_sibling_search_for_pages()
|
||||
{
|
||||
$chapter = $this->entities->chapterHasPages();
|
||||
|
Loading…
Reference in New Issue
Block a user