mirror of
https://github.com/BookStackApp/BookStack.git
synced 2025-03-30 19:55:31 +08:00
Editor: Started toying with more singificant design update
This commit is contained in:
Dan Brown
parent
a12b60e1ad
commit
45c7409092
@ -155,6 +155,7 @@
|
||||
margin-bottom: $-l;
|
||||
overflow: initial;
|
||||
min-height: 60vh;
|
||||
border-radius: 8px;
|
||||
&.auto-height {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
@ -364,43 +364,4 @@ header .search-box.search-active:focus-within {
|
||||
.faded span.faded-text {
|
||||
display: inline-block;
|
||||
padding: $-s;
|
||||
}
|
||||
|
||||
.action-buttons .text-button {
|
||||
display: inline-block;
|
||||
padding: $-xs $-s;
|
||||
&:last-child {
|
||||
padding-inline-end: 0;
|
||||
}
|
||||
&:first-child {
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.action-buttons .dropdown-container:last-child a {
|
||||
padding-inline-end: 0;
|
||||
padding-inline-start: $-s;
|
||||
}
|
||||
.action-buttons {
|
||||
text-align: end;
|
||||
&.text-left {
|
||||
text-align: start;
|
||||
.text-button {
|
||||
padding-inline-end: $-m;
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
}
|
||||
&.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@include smaller-than($m) {
|
||||
.action-buttons .text-button {
|
||||
padding: $-xs $-xs;
|
||||
}
|
||||
.action-buttons .dropdown-container:last-child a {
|
||||
padding-inline-start: $-xs;
|
||||
}
|
||||
}
|
||||
@ -19,8 +19,21 @@
|
||||
}
|
||||
}
|
||||
|
||||
.page-edit-toolbar .text-button {
|
||||
font-size: $fs-m;
|
||||
.page-editor-page-area {
|
||||
width: 100%;
|
||||
max-width: 1140px;
|
||||
border-radius: 8px;
|
||||
box-shadow: $bs-card;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.page-edit-toolbar {
|
||||
width: 100%;
|
||||
max-width: 1140px;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(max-content, 2fr) 1.5fr minmax(max-content, 2fr);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
body.tox-fullscreen .page-editor .edit-area,
|
||||
@ -155,18 +168,25 @@ body.tox-fullscreen, body.markdown-fullscreen {
|
||||
|
||||
// Attribute form
|
||||
.floating-toolbox {
|
||||
//border-left: 1px solid #CCC;
|
||||
@include lightDark(background-color, #FFF, #222);
|
||||
@include lightDark(border-color, #DDD, #000);
|
||||
right: $-xl*2;
|
||||
width: 40px;
|
||||
overflow: hidden;
|
||||
align-items: stretch;
|
||||
flex-direction: row;
|
||||
display: flex;
|
||||
min-height: 0;
|
||||
max-height: 100%;
|
||||
border-radius: 8px;
|
||||
box-shadow: $bs-card;
|
||||
position: fixed;
|
||||
right: $-s;
|
||||
margin-bottom: auto;
|
||||
&.open {
|
||||
width: 480px;
|
||||
right: 0;
|
||||
position: relative;
|
||||
max-width: 480px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&:not(.open) .toolbox-tab-content {
|
||||
display: none !important;
|
||||
}
|
||||
.toolbox-toggle svg {
|
||||
transition: transform ease-in-out 180ms;
|
||||
@ -185,7 +205,7 @@ body.tox-fullscreen, body.markdown-fullscreen {
|
||||
position: relative;
|
||||
}
|
||||
.tabs {
|
||||
border: 1px solid #CCC;
|
||||
border-right: 1px solid #DDD;
|
||||
width: 40px;
|
||||
flex: 0 1 auto;
|
||||
margin-right: -1px;
|
||||
@ -210,9 +230,9 @@ body.tox-fullscreen, body.markdown-fullscreen {
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
&.open .tabs > button.active {
|
||||
@include lightDark(color, #444, #EEE);
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
&.open .tabs-inner > button.active {
|
||||
background-color: var(--color-primary-light);
|
||||
color: var(--color-primary)
|
||||
}
|
||||
h4 {
|
||||
font-size: 24px;
|
||||
@ -249,7 +269,6 @@ body.tox-fullscreen, body.markdown-fullscreen {
|
||||
display: none;
|
||||
overflow-y: auto;
|
||||
padding-bottom: 45px;
|
||||
border-block-start: 1px solid #CCC;
|
||||
}
|
||||
|
||||
.suggestion-box {
|
||||
|
||||
@ -1,97 +1,116 @@
|
||||
<div class="primary-background-light toolbar page-edit-toolbar px-l">
|
||||
<div class="grid third no-break v-center">
|
||||
<div class="toolbar page-edit-toolbar py-xs">
|
||||
|
||||
<div class="action-buttons text-left px-m py-xs">
|
||||
<div>
|
||||
<div class="inline block">
|
||||
<a href="{{ $isDraft ? $page->getParent()->getUrl() : $page->getUrl() }}"
|
||||
class="text-button text-link">@icon('back')<span class="hide-under-l">{{ trans('common.back') }}</span></a>
|
||||
class="icon-list-item text-link"><span>@icon('back')</span><span class="hide-under-l">{{ trans('common.back') }}</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center px-m">
|
||||
<div component="dropdown"
|
||||
option:dropdown:move-menu="true"
|
||||
class="dropdown-container draft-display text {{ $draftsEnabled ? '' : 'hidden' }}">
|
||||
<button type="button" refs="dropdown@toggle" aria-haspopup="true" aria-expanded="false" title="{{ trans('entities.pages_edit_draft_options') }}" class="text-link text-button py-s px-m"><span refs="page-editor@draftDisplay" class="faded-text"></span> @icon('more')</button>
|
||||
<div class="text-center">
|
||||
<div component="dropdown"
|
||||
option:dropdown:move-menu="true"
|
||||
class="dropdown-container draft-display text {{ $draftsEnabled ? '' : 'hidden' }}">
|
||||
<div class="flex-container-row items-center justify-center">
|
||||
<button type="button"
|
||||
refs="dropdown@toggle"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false"
|
||||
title="{{ trans('entities.pages_edit_draft_options') }}"
|
||||
class="text-link icon-list-item">
|
||||
<span>@icon('time')</span>
|
||||
<span><span refs="page-editor@draftDisplay" class="faded-text"></span> @icon('more')</span>
|
||||
</button>
|
||||
@icon('check-circle', ['class' => 'text-pos draft-notification svg-icon', 'refs' => 'page-editor@draftDisplayIcon'])
|
||||
<ul refs="dropdown@menu" class="dropdown-menu" role="menu">
|
||||
<li>
|
||||
<button refs="page-editor@saveDraft" type="button" class="text-pos icon-item">
|
||||
@icon('save')
|
||||
<div>{{ trans('entities.pages_edit_save_draft') }}</div>
|
||||
</button>
|
||||
</li>
|
||||
@if($isDraft)
|
||||
<li>
|
||||
<a href="{{ $model->getUrl('/delete') }}" class="text-neg icon-item">
|
||||
@icon('delete')
|
||||
{{ trans('entities.pages_edit_delete_draft') }}
|
||||
</a>
|
||||
</li>
|
||||
@endif
|
||||
<li refs="page-editor@discard-draft-wrap" {{ $isDraftRevision ? '' : 'hidden' }}>
|
||||
<button refs="page-editor@discard-draft" type="button" class="text-warn icon-item">
|
||||
@icon('cancel')
|
||||
<div>{{ trans('entities.pages_edit_discard_draft') }}</div>
|
||||
</button>
|
||||
</li>
|
||||
<li refs="page-editor@delete-draft-wrap" {{ $isDraftRevision ? '' : 'hidden' }}>
|
||||
<button refs="page-editor@delete-draft" type="button" class="text-neg icon-item">
|
||||
@icon('delete')
|
||||
<div>{{ trans('entities.pages_edit_delete_draft') }}</div>
|
||||
</button>
|
||||
</li>
|
||||
@if(userCan('editor-change'))
|
||||
<li>
|
||||
<hr>
|
||||
</li>
|
||||
<li>
|
||||
@if($editor === 'wysiwyg')
|
||||
<a href="{{ $model->getUrl($isDraft ? '' : '/edit') }}?editor=markdown-clean" refs="page-editor@changeEditor" class="icon-item">
|
||||
@icon('swap-horizontal')
|
||||
<div>
|
||||
{{ trans('entities.pages_edit_switch_to_markdown') }}
|
||||
<br>
|
||||
<small>{{ trans('entities.pages_edit_switch_to_markdown_clean') }}</small>
|
||||
</div>
|
||||
</a>
|
||||
<a href="{{ $model->getUrl($isDraft ? '' : '/edit') }}?editor=markdown-stable" refs="page-editor@changeEditor" class="icon-item">
|
||||
@icon('swap-horizontal')
|
||||
<div>
|
||||
{{ trans('entities.pages_edit_switch_to_markdown') }}
|
||||
<br>
|
||||
<small>{{ trans('entities.pages_edit_switch_to_markdown_stable') }}</small>
|
||||
</div>
|
||||
</a>
|
||||
@else
|
||||
<a href="{{ $model->getUrl($isDraft ? '' : '/edit') }}?editor=wysiwyg" refs="page-editor@changeEditor" class="icon-item">
|
||||
@icon('swap-horizontal')
|
||||
<div>{{ trans('entities.pages_edit_switch_to_wysiwyg') }}</div>
|
||||
</a>
|
||||
@endif
|
||||
</li>
|
||||
@endif
|
||||
</ul>
|
||||
</div>
|
||||
<ul refs="dropdown@menu" class="dropdown-menu" role="menu">
|
||||
<li>
|
||||
<button refs="page-editor@saveDraft" type="button" class="text-pos icon-item">
|
||||
@icon('save')
|
||||
<div>{{ trans('entities.pages_edit_save_draft') }}</div>
|
||||
</button>
|
||||
</li>
|
||||
@if($isDraft)
|
||||
<li>
|
||||
<a href="{{ $model->getUrl('/delete') }}" class="text-neg icon-item">
|
||||
@icon('delete')
|
||||
{{ trans('entities.pages_edit_delete_draft') }}
|
||||
</a>
|
||||
</li>
|
||||
@endif
|
||||
<li refs="page-editor@discard-draft-wrap" {{ $isDraftRevision ? '' : 'hidden' }}>
|
||||
<button refs="page-editor@discard-draft" type="button" class="text-warn icon-item">
|
||||
@icon('cancel')
|
||||
<div>{{ trans('entities.pages_edit_discard_draft') }}</div>
|
||||
</button>
|
||||
</li>
|
||||
<li refs="page-editor@delete-draft-wrap" {{ $isDraftRevision ? '' : 'hidden' }}>
|
||||
<button refs="page-editor@delete-draft" type="button" class="text-neg icon-item">
|
||||
@icon('delete')
|
||||
<div>{{ trans('entities.pages_edit_delete_draft') }}</div>
|
||||
</button>
|
||||
</li>
|
||||
@if(userCan('editor-change'))
|
||||
<li>
|
||||
<hr>
|
||||
</li>
|
||||
<li>
|
||||
@if($editor === 'wysiwyg')
|
||||
<a href="{{ $model->getUrl($isDraft ? '' : '/edit') }}?editor=markdown-clean" refs="page-editor@changeEditor" class="icon-item">
|
||||
@icon('swap-horizontal')
|
||||
<div>
|
||||
{{ trans('entities.pages_edit_switch_to_markdown') }}
|
||||
<br>
|
||||
<small>{{ trans('entities.pages_edit_switch_to_markdown_clean') }}</small>
|
||||
</div>
|
||||
</a>
|
||||
<a href="{{ $model->getUrl($isDraft ? '' : '/edit') }}?editor=markdown-stable" refs="page-editor@changeEditor" class="icon-item">
|
||||
@icon('swap-horizontal')
|
||||
<div>
|
||||
{{ trans('entities.pages_edit_switch_to_markdown') }}
|
||||
<br>
|
||||
<small>{{ trans('entities.pages_edit_switch_to_markdown_stable') }}</small>
|
||||
</div>
|
||||
</a>
|
||||
@else
|
||||
<a href="{{ $model->getUrl($isDraft ? '' : '/edit') }}?editor=wysiwyg" refs="page-editor@changeEditor" class="icon-item">
|
||||
@icon('swap-horizontal')
|
||||
<div>{{ trans('entities.pages_edit_switch_to_wysiwyg') }}</div>
|
||||
</a>
|
||||
@endif
|
||||
</li>
|
||||
@endif
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-container-row justify-flex-end gap-x-m items-center">
|
||||
<div component="dropdown"
|
||||
option:dropdown:move-menu="true"
|
||||
class="dropdown-container">
|
||||
<button refs="dropdown@toggle" type="button" aria-haspopup="true" aria-expanded="false" class="icon-list-item text-link">
|
||||
<span>@icon('edit')</span>
|
||||
<span refs="page-editor@changelogDisplay">{{ trans('entities.pages_edit_set_changelog') }}</span>
|
||||
</button>
|
||||
<ul refs="dropdown@menu" class="wide dropdown-menu">
|
||||
<li class="px-l py-m">
|
||||
<p class="text-muted pb-s">{{ trans('entities.pages_edit_enter_changelog_desc') }}</p>
|
||||
<input refs="page-editor@changelogInput"
|
||||
name="summary"
|
||||
id="summary-input"
|
||||
type="text"
|
||||
placeholder="{{ trans('entities.pages_edit_enter_changelog') }}" />
|
||||
</li>
|
||||
</ul>
|
||||
<span>{{-- Prevents button jumping on menu show --}}</span>
|
||||
</div>
|
||||
|
||||
<div class="action-buttons px-m py-xs">
|
||||
<div component="dropdown"
|
||||
option:dropdown:move-menu="true"
|
||||
class="dropdown-container">
|
||||
<button refs="dropdown@toggle" type="button" aria-haspopup="true" aria-expanded="false" class="text-link text-button">@icon('edit') <span refs="page-editor@changelogDisplay">{{ trans('entities.pages_edit_set_changelog') }}</span></button>
|
||||
<ul refs="dropdown@menu" class="wide dropdown-menu">
|
||||
<li class="px-l py-m">
|
||||
<p class="text-muted pb-s">{{ trans('entities.pages_edit_enter_changelog_desc') }}</p>
|
||||
<input refs="page-editor@changelogInput"
|
||||
name="summary"
|
||||
id="summary-input"
|
||||
type="text"
|
||||
placeholder="{{ trans('entities.pages_edit_enter_changelog') }}" />
|
||||
</li>
|
||||
</ul>
|
||||
<span>{{-- Prevents button jumping on menu show --}}</span>
|
||||
</div>
|
||||
|
||||
<button type="submit" id="save-button" class="float-left text-link text-button text-pos-hover hide-under-m">@icon('save')<span>{{ trans('entities.pages_save') }}</span></button>
|
||||
<div class="inline block">
|
||||
<button type="submit" id="save-button"
|
||||
class="icon-list-item hide-under-m text-pos fill-width">
|
||||
<span>@icon('save')</span>
|
||||
<span>{{ trans('entities.pages_save') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,4 +1,4 @@
|
||||
<div component="page-editor" class="page-editor flex-fill flex bg-white"
|
||||
<div component="page-editor" class="page-editor flex-fill flex"
|
||||
option:page-editor:drafts-enabled="{{ $draftsEnabled ? 'true' : 'false' }}"
|
||||
@if(config('services.drawio'))
|
||||
drawio-url="{{ is_string(config('services.drawio')) ? config('services.drawio') : 'https://embed.diagrams.net/?embed=1&proto=json&spin=1&configure=1' }}"
|
||||
@ -20,27 +20,32 @@
|
||||
{{--Header Toolbar--}}
|
||||
@include('pages.parts.editor-toolbar', ['model' => $model, 'editor' => $editor, 'isDraft' => $isDraft, 'draftsEnabled' => $draftsEnabled])
|
||||
|
||||
{{--Title input--}}
|
||||
<div class="title-input page-title clearfix">
|
||||
<div refs="page-editor@titleContainer" class="input">
|
||||
@include('form.text', ['name' => 'name', 'model' => $model, 'placeholder' => trans('entities.pages_title')])
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-fill mx-s mb-xs gap-m justify-center">
|
||||
<div class="page-editor-page-area flex-container-column flex flex-fill">
|
||||
{{--Title input--}}
|
||||
<div class="title-input page-title clearfix">
|
||||
<div refs="page-editor@titleContainer" class="input">
|
||||
@include('form.text', ['name' => 'name', 'model' => $model, 'placeholder' => trans('entities.pages_title')])
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-fill flex">
|
||||
{{--Editors--}}
|
||||
<div class="edit-area flex-fill flex">
|
||||
<div class="flex-fill flex">
|
||||
{{--Editors--}}
|
||||
<div class="edit-area flex-fill flex">
|
||||
|
||||
{{--WYSIWYG Editor--}}
|
||||
@if($editor === 'wysiwyg')
|
||||
@include('pages.parts.wysiwyg-editor', ['model' => $model])
|
||||
@endif
|
||||
{{--WYSIWYG Editor--}}
|
||||
@if($editor === 'wysiwyg')
|
||||
@include('pages.parts.wysiwyg-editor', ['model' => $model])
|
||||
@endif
|
||||
|
||||
{{--Markdown Editor--}}
|
||||
@if($editor === 'markdown')
|
||||
@include('pages.parts.markdown-editor', ['model' => $model])
|
||||
@endif
|
||||
{{--Markdown Editor--}}
|
||||
@if($editor === 'markdown')
|
||||
@include('pages.parts.markdown-editor', ['model' => $model])
|
||||
@endif
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@include('pages.parts.editor-toolbox')
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user