return this.hideSuggestions();
}
- this.list.innerHTML = suggestions.map(value => `<li><button type="button">${escapeHtml(value)}</button></li>`).join('');
+ this.list.innerHTML = suggestions.map(value => `<li><button type="button" class="text-item">${escapeHtml(value)}</button></li>`).join('');
this.list.style.display = 'block';
for (const button of this.list.querySelectorAll('button')) {
button.addEventListener('blur', this.hideSuggestionsIfFocusedLost.bind(this));
this.historyDropDown.classList.toggle('hidden', historyKeys.length === 0);
this.historyList.innerHTML = historyKeys.map(key => {
const localTime = (new Date(parseInt(key))).toLocaleTimeString();
- return `<li><button type="button" data-time="${key}">${localTime}</button></li>`;
+ return `<li><button type="button" data-time="${key}" class="text-item">${localTime}</button></li>`;
}).join('');
}
'pages_edit_draft_save_at' => 'Draft saved at ',
'pages_edit_delete_draft' => 'Delete Draft',
'pages_edit_discard_draft' => 'Discard Draft',
- 'pages_edit_switch_to_markdown' => 'Switch to Markdown editor',
- 'pages_edit_switch_to_wysiwyg' => 'Switch to WYSIWYG editor',
+ 'pages_edit_switch_to_markdown' => 'Switch to Markdown Editor',
+ 'pages_edit_switch_to_markdown_clean' => '(Clean Markdown Content)',
+ 'pages_edit_switch_to_markdown_stable' => '(Stable Markdown Content)',
+ 'pages_edit_switch_to_wysiwyg' => 'Switch to WYSIWYG Editor',
'pages_edit_set_changelog' => 'Set Changelog',
'pages_edit_enter_changelog_desc' => 'Enter a brief description of the changes you\'ve made',
'pages_edit_enter_changelog' => 'Enter Changelog',
li.active a {
font-weight: 600;
}
- a, button {
- display: block;
- padding: $-xs $-m;
+ button {
+ width: 100%;
+ text-align: start;
+ }
+ li.border-bottom {
+ border-bottom: 1px solid #DDD;
+ }
+ li hr {
+ margin: $-xs 0;
+ }
+ .icon-item, .text-item, .label-item {
+ padding: 8px $-m;
@include lightDark(color, #555, #eee);
fill: currentColor;
white-space: nowrap;
- line-height: 1.6;
+ line-height: 1.4;
cursor: pointer;
&:hover, &:focus {
text-decoration: none;
width: 16px;
}
}
- button {
- width: 100%;
- text-align: start;
+ .text-item {
+ display: block;
}
- li.border-bottom {
- border-bottom: 1px solid #DDD;
+ .label-item {
+ display: grid;
+ align-items: center;
+ grid-template-columns: auto min-content;
+ gap: $-m;
}
- li hr {
- margin: $-xs 0;
+ .label-item > *:nth-child(2) {
+ opacity: 0.7;
+ &:hover {
+ opacity: 1;
+ }
+ }
+ .icon-item {
+ display: grid;
+ align-items: start;
+ grid-template-columns: 16px auto;
+ gap: $-m;
+ svg {
+ margin-inline-end: 0;
+ margin-block-start: 1px;
+ }
}
}
small, p.small, span.small, .text-small {
font-size: 0.75rem;
- @include lightDark(color, #5e5e5e, #999);
}
sup, .superscript {
class="drag-card-action text-center text-neg">@icon('close')</button>
<div refs="dropdown@menu" class="dropdown-menu">
<p class="text-neg small px-m mb-xs">{{ trans('entities.attachments_delete') }}</p>
- <button refs="ajax-delete-row@delete" type="button" class="text-primary small delete">{{ trans('common.confirm') }}</button>
+ <button refs="ajax-delete-row@delete" type="button" class="text-primary small delete text-item">{{ trans('common.confirm') }}</button>
</div>
</div>
</div>
<button type="button" refs="dropdown@toggle" aria-haspopup="true" aria-expanded="false" class="text-button" title="{{ trans('common.delete') }}">@icon('delete')</button>
<ul refs="dropdown@menu" class="dropdown-menu" role="menu">
<li class="px-m text-small text-muted pb-s">{{trans('entities.comment_delete_confirm')}}</li>
- <li><button action="delete" type="button" class="text-button text-neg" >@icon('delete'){{ trans('common.delete') }}</button></li>
+ <li>
+ <button action="delete" type="button" class="text-button text-neg icon-item">
+ @icon('delete')
+ <div>{{ trans('common.delete') }}</div>
+ </button>
+ </li>
</ul>
</div>
@endif
</span>
<ul refs="dropdown@menu" class="dropdown-menu" role="menu">
<li>
- <a href="{{ url('/favourites') }}">@icon('star'){{ trans('entities.my_favourites') }}</a>
+ <a href="{{ url('/favourites') }}" class="icon-item">
+ @icon('star')
+ <div>{{ trans('entities.my_favourites') }}</div>
+ </a>
</li>
<li>
- <a href="{{ $currentUser->getProfileUrl() }}">@icon('user'){{ trans('common.view_profile') }}</a>
+ <a href="{{ $currentUser->getProfileUrl() }}" class="icon-item">
+ @icon('user')
+ <div>{{ trans('common.view_profile') }}</div>
+ </a>
</li>
<li>
- <a href="{{ $currentUser->getEditUrl() }}">@icon('edit'){{ trans('common.edit_profile') }}</a>
+ <a href="{{ $currentUser->getEditUrl() }}" class="icon-item">
+ @icon('edit')
+ <div>{{ trans('common.edit_profile') }}</div>
+ </a>
</li>
<li>
<form action="{{ url(config('auth.method') === 'saml2' ? '/saml2/logout' : '/logout') }}"
method="post">
{{ csrf_field() }}
- <button class="text-muted icon-list-item text-primary">
- @icon('logout'){{ trans('auth.logout') }}
+ <button class="icon-item">
+ @icon('logout')
+ <div>{{ trans('auth.logout') }}</div>
</button>
</form>
</li>
<li><hr></li>
<li>
- @include('common.dark-mode-toggle')
+ @include('common.dark-mode-toggle', ['classes' => 'icon-item'])
</li>
</ul>
</div>
<span>{{ trans('entities.export') }}</span>
</div>
<ul refs="dropdown@menu" class="wide dropdown-menu" role="menu">
- <li><a href="{{ $entity->getUrl('/export/html') }}" target="_blank" rel="noopener">{{ trans('entities.export_html') }} <span class="text-muted float right">.html</span></a></li>
- <li><a href="{{ $entity->getUrl('/export/pdf') }}" target="_blank" rel="noopener">{{ trans('entities.export_pdf') }} <span class="text-muted float right">.pdf</span></a></li>
- <li><a href="{{ $entity->getUrl('/export/plaintext') }}" target="_blank" rel="noopener">{{ trans('entities.export_text') }} <span class="text-muted float right">.txt</span></a></li>
- <li><a href="{{ $entity->getUrl('/export/markdown') }}" target="_blank" rel="noopener">{{ trans('entities.export_md') }} <span class="text-muted float right">.md</span></a></li>
+ <li><a href="{{ $entity->getUrl('/export/html') }}" target="_blank" class="label-item"><span>{{ trans('entities.export_html') }}</span><span>.html</span></a></li>
+ <li><a href="{{ $entity->getUrl('/export/pdf') }}" target="_blank" class="label-item"><span>{{ trans('entities.export_pdf') }}</span><span>.pdf</span></a></li>
+ <li><a href="{{ $entity->getUrl('/export/plaintext') }}" target="_blank" class="label-item"><span>{{ trans('entities.export_text') }}</span><span>.txt</span></a></li>
+ <li><a href="{{ $entity->getUrl('/export/markdown') }}" target="_blank" class="label-item"><span>{{ trans('entities.export_md') }}</span><span>.md</span></a></li>
</ul>
</div>
<div refs="dropdown@toggle" aria-haspopup="true" aria-expanded="false" aria-label="{{ trans('common.sort_options') }}" tabindex="0">{{ $options[$selectedSort] }}</div>
<ul refs="dropdown@menu" class="dropdown-menu">
@foreach($options as $key => $label)
- <li @if($key === $selectedSort) class="active" @endif><a href="#" data-sort-value="{{$key}}">{{ $label }}</a></li>
+ <li @if($key === $selectedSort) class="active" @endif><a href="#" data-sort-value="{{$key}}" class="text-item">{{ $label }}</a></li>
@endforeach
</ul>
</div>
<form action="{{ url('/mfa/' . $method . '/remove') }}" method="post">
{{ csrf_field() }}
{{ method_field('delete') }}
- <button class="text-primary small delete">{{ trans('common.confirm') }}</button>
+ <button class="text-primary small text-item">{{ trans('common.confirm') }}</button>
</form>
</div>
</div>
--- /dev/null
+<div class="primary-background-light toolbar page-edit-toolbar">
+ <div class="grid third no-break v-center">
+
+ <div class="action-buttons text-left px-m py-xs">
+ <a href="{{ $isDraft ? $page->getParent()->getUrl() : $page->getUrl() }}"
+ class="text-button text-primary">@icon('back')<span class="hide-under-l">{{ trans('common.back') }}</span></a>
+ </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-primary text-button py-s px-m"><span refs="page-editor@draftDisplay" class="faded-text"></span> @icon('more')</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@discardDraftWrap" class="{{ $isDraft ? '' : 'hidden' }}">
+ <button refs="page-editor@discardDraft" type="button" class="text-neg icon-item">
+ @icon('cancel')
+ <div>{{ trans('entities.pages_edit_discard_draft') }}</div>
+ </button>
+ </li>
+ @if(userCan('editor-change'))
+ <li>
+ @if($editor === 'wysiwyg')
+ <a href="{{ $model->getUrl($isDraft ? '' : '/edit') }}?editor=markdown-clean" 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" 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" class="icon-item">
+ @icon('swap-horizontal')
+ <div>{{ trans('entities.pages_edit_switch_to_wysiwyg') }}</div>
+ </a>
+ @endif
+ </li>
+ @endif
+ </ul>
+ </div>
+ </div>
+
+ <div class="action-buttons px-m py-xs">
+ <div component="dropdown" dropdown-move-menu class="dropdown-container">
+ <button refs="dropdown@toggle" type="button" aria-haspopup="true" aria-expanded="false" class="text-primary 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-primary text-button text-pos-hover hide-under-m">@icon('save')<span>{{ trans('entities.pages_save') }}</span></button>
+ </div>
+ </div>
+</div>
\ No newline at end of file
option:page-editor:draft-discarded-text="{{ trans('entities.pages_draft_discarded') }}"
option:page-editor:set-changelog-text="{{ trans('entities.pages_edit_set_changelog') }}">
- {{--Header Bar--}}
- <div class="primary-background-light toolbar page-edit-toolbar">
- <div class="grid third no-break v-center">
-
- <div class="action-buttons text-left px-m py-xs">
- <a href="{{ $isDraft ? $page->getParent()->getUrl() : $page->getUrl() }}"
- class="text-button text-primary">@icon('back')<span class="hide-under-l">{{ trans('common.back') }}</span></a>
- </div>
-
- <div class="text-center px-m py-xs">
- <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-primary text-button"><span refs="page-editor@draftDisplay" class="faded-text"></span> @icon('more')</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('save'){{ trans('entities.pages_edit_save_draft') }}</button>
- </li>
- @if($isDraft)
- <li>
- <a href="{{ $model->getUrl('/delete') }}" class="text-neg">@icon('delete'){{ trans('entities.pages_edit_delete_draft') }}</a>
- </li>
- @endif
- <li refs="page-editor@discardDraftWrap" class="{{ $isDraft ? '' : 'hidden' }}">
- <button refs="page-editor@discardDraft" type="button" class="text-neg">@icon('cancel'){{ trans('entities.pages_edit_discard_draft') }}</button>
- </li>
- @if(userCan('editor-change'))
- <li>
- <a href="{{ $model->getUrl($isDraft ? '' : '/edit') }}?editor={{ $editor === 'wysiwyg' ? 'markdown' : 'wysiwyg' }}">
- @icon('swap-horizontal'){{ $editor === 'wysiwyg' ? trans('entities.pages_edit_switch_to_markdown') : trans('entities.pages_edit_switch_to_wysiwyg') }}
- </a>
- </li>
- @endif
- </ul>
- </div>
- </div>
-
- <div class="action-buttons px-m py-xs">
- <div component="dropdown" dropdown-move-menu class="dropdown-container">
- <button refs="dropdown@toggle" type="button" aria-haspopup="true" aria-expanded="false" class="text-primary 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-primary text-button text-pos-hover hide-under-m">@icon('save')<span>{{ trans('entities.pages_save') }}</span></button>
- </div>
- </div>
- </div>
+ {{--Header Toolbar--}}
+ @include('pages.parts.editor-toolbar', ['model' => $model, 'editor' => $editor, 'isDraft' => $isDraft, 'draftsEnabled' => $draftsEnabled])
{{--Title input--}}
<div class="title-input page-title clearfix">
<form action="{{ $revision->getUrl('/restore') }}" method="POST">
{!! csrf_field() !!}
<input type="hidden" name="_method" value="PUT">
- <button type="submit" class="text-button text-primary">@icon('history'){{ trans('entities.pages_revisions_restore') }}</button>
+ <button type="submit" class="text-primary icon-item">
+ @icon('history')
+ <div>{{ trans('entities.pages_revisions_restore') }}</div>
+ </button>
</form>
</li>
</ul>
<form action="{{ $revision->getUrl('/delete/') }}" method="POST">
{!! csrf_field() !!}
<input type="hidden" name="_method" value="DELETE">
- <button type="submit" class="text-button text-neg">@icon('delete'){{ trans('common.delete') }}</button>
+ <button type="submit" class="text-neg icon-item">
+ @icon('delete')
+ <div>{{ trans('common.delete') }}</div>
+ </button>
</form>
</li>
</ul>
<label for="">{{ trans('settings.audit_event_filter') }}</label>
<button refs="dropdown@toggle" aria-haspopup="true" aria-expanded="false" aria-label="{{ trans('common.sort_options') }}" class="input-base text-left">{{ $listDetails['event'] ?: trans('settings.audit_event_filter_no_filter') }}</button>
<ul refs="dropdown@menu" class="dropdown-menu">
- <li @if($listDetails['event'] === '') class="active" @endif><a href="{{ sortUrl('/settings/audit', $listDetails, ['event' => '']) }}">{{ trans('settings.audit_event_filter_no_filter') }}</a></li>
+ <li @if($listDetails['event'] === '') class="active" @endif><a href="{{ sortUrl('/settings/audit', $listDetails, ['event' => '']) }}" class="text-item">{{ trans('settings.audit_event_filter_no_filter') }}</a></li>
@foreach($activityTypes as $type)
- <li @if($type === $listDetails['event']) class="active" @endif><a href="{{ sortUrl('/settings/audit', $listDetails, ['event' => $type]) }}">{{ $type }}</a></li>
+ <li @if($type === $listDetails['event']) class="active" @endif><a href="{{ sortUrl('/settings/audit', $listDetails, ['event' => $type]) }}" class="text-item">{{ $type }}</a></li>
@endforeach
</ul>
</div>
<form action="{{ url('/settings/recycle-bin/empty') }}" method="POST">
{!! csrf_field() !!}
- <button type="submit" class="text-primary small delete">{{ trans('common.confirm') }}</button>
+ <button type="submit" class="text-primary small delete text-item">{{ trans('common.confirm') }}</button>
</form>
</div>
</div>
<div component="dropdown" class="dropdown-container">
<button type="button" refs="dropdown@toggle" class="button outline">{{ trans('common.actions') }}</button>
<ul refs="dropdown@menu" class="dropdown-menu">
- <li><a class="block" href="{{ $deletion->getUrl('/restore') }}">{{ trans('settings.recycle_bin_restore') }}</a></li>
- <li><a class="block" href="{{ $deletion->getUrl('/destroy') }}">{{ trans('settings.recycle_bin_permanently_delete') }}</a></li>
+ <li><a class="text-item" href="{{ $deletion->getUrl('/restore') }}">{{ trans('settings.recycle_bin_restore') }}</a></li>
+ <li><a class="text-item" href="{{ $deletion->getUrl('/destroy') }}">{{ trans('settings.recycle_bin_permanently_delete') }}</a></li>
</ul>
</div>
</td>