Standardised dropdown list item styles, Extracted page editor toolbar

- Updated all dropdown list item actions into three specific styles:
  icon-item, text-item & label-item. Allows a stronger structure while
  prevents mixing of styles as we were getting for header dropdown in
  dark mode.
- Extracted out page editor top toolbar to its own view file & split
  editor switch options to different markdown options.
This commit is contained in:
Dan Brown 2022-04-20 14:03:47 +01:00
parent 492ffff0a4
commit 214992650d
No known key found for this signature in database
GPG key ID: 46D9F943C24A2EF9
16 changed files with 171 additions and 95 deletions

View file

@ -131,7 +131,7 @@ class AutoSuggest {
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));

View file

@ -96,7 +96,7 @@ class CodeEditor {
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('');
}

View file

@ -196,8 +196,10 @@ return [
'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',

View file

@ -593,13 +593,22 @@ ul.pagination {
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;
@ -616,15 +625,30 @@ ul.pagination {
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;
}
}
}

View file

@ -163,7 +163,6 @@ em, i, .italic {
small, p.small, span.small, .text-small {
font-size: 0.75rem;
@include lightDark(color, #5e5e5e, #999);
}
sup, .superscript {

View file

@ -28,7 +28,7 @@
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>

View file

@ -31,7 +31,12 @@
<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

View file

@ -62,26 +62,36 @@
</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>

View file

@ -5,9 +5,9 @@
<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>

View file

@ -16,7 +16,7 @@
<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>

View file

@ -19,7 +19,7 @@
<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>

View file

@ -0,0 +1,86 @@
<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>&nbsp; @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>

View file

@ -15,64 +15,8 @@
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>&nbsp; @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">

View file

@ -58,7 +58,10 @@
<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>
@ -72,7 +75,10 @@
<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>

View file

@ -14,9 +14,9 @@
<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>

View file

@ -22,7 +22,7 @@
<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>
@ -93,8 +93,8 @@
<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>