diff --git a/resources/js/components/auto-suggest.js b/resources/js/components/auto-suggest.js index 68de49b4a..d1c15c00a 100644 --- a/resources/js/components/auto-suggest.js +++ b/resources/js/components/auto-suggest.js @@ -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)); diff --git a/resources/js/components/code-editor.js b/resources/js/components/code-editor.js index f44de813d..4ee3531c5 100644 --- a/resources/js/components/code-editor.js +++ b/resources/js/components/code-editor.js @@ -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(''); } diff --git a/resources/lang/en/entities.php b/resources/lang/en/entities.php index 8de379bbb..3921828d8 100644 --- a/resources/lang/en/entities.php +++ b/resources/lang/en/entities.php @@ -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', diff --git a/resources/sass/_lists.scss b/resources/sass/_lists.scss index 9cff52972..26d12a25d 100644 --- a/resources/sass/_lists.scss +++ b/resources/sass/_lists.scss @@ -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; + } } } diff --git a/resources/sass/_text.scss b/resources/sass/_text.scss index 884808bb4..51f315614 100644 --- a/resources/sass/_text.scss +++ b/resources/sass/_text.scss @@ -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 { diff --git a/resources/views/attachments/manager-list.blade.php b/resources/views/attachments/manager-list.blade.php index b48fde9c0..ebb1c24aa 100644 --- a/resources/views/attachments/manager-list.blade.php +++ b/resources/views/attachments/manager-list.blade.php @@ -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> diff --git a/resources/views/comments/comment.blade.php b/resources/views/comments/comment.blade.php index 9f4a12357..6189c65d4 100644 --- a/resources/views/comments/comment.blade.php +++ b/resources/views/comments/comment.blade.php @@ -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 diff --git a/resources/views/common/header.blade.php b/resources/views/common/header.blade.php index d55f3ae2d..b5ac520c1 100644 --- a/resources/views/common/header.blade.php +++ b/resources/views/common/header.blade.php @@ -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> diff --git a/resources/views/entities/export-menu.blade.php b/resources/views/entities/export-menu.blade.php index 2b0f5c19d..dd7231095 100644 --- a/resources/views/entities/export-menu.blade.php +++ b/resources/views/entities/export-menu.blade.php @@ -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> diff --git a/resources/views/entities/sort.blade.php b/resources/views/entities/sort.blade.php index bf9087397..f81ed797f 100644 --- a/resources/views/entities/sort.blade.php +++ b/resources/views/entities/sort.blade.php @@ -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> diff --git a/resources/views/mfa/parts/setup-method-row.blade.php b/resources/views/mfa/parts/setup-method-row.blade.php index e195174c1..271ec1bf4 100644 --- a/resources/views/mfa/parts/setup-method-row.blade.php +++ b/resources/views/mfa/parts/setup-method-row.blade.php @@ -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> diff --git a/resources/views/pages/parts/editor-toolbar.blade.php b/resources/views/pages/parts/editor-toolbar.blade.php new file mode 100644 index 000000000..d7fb76c29 --- /dev/null +++ b/resources/views/pages/parts/editor-toolbar.blade.php @@ -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> @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 diff --git a/resources/views/pages/parts/form.blade.php b/resources/views/pages/parts/form.blade.php index ebad2bd72..2c2ab9b92 100644 --- a/resources/views/pages/parts/form.blade.php +++ b/resources/views/pages/parts/form.blade.php @@ -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> @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"> diff --git a/resources/views/pages/revisions.blade.php b/resources/views/pages/revisions.blade.php index 5508f362d..87949837b 100644 --- a/resources/views/pages/revisions.blade.php +++ b/resources/views/pages/revisions.blade.php @@ -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> diff --git a/resources/views/settings/audit.blade.php b/resources/views/settings/audit.blade.php index ca5dba527..506a735a2 100644 --- a/resources/views/settings/audit.blade.php +++ b/resources/views/settings/audit.blade.php @@ -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> diff --git a/resources/views/settings/recycle-bin/index.blade.php b/resources/views/settings/recycle-bin/index.blade.php index 5f2ec333f..56e2437fe 100644 --- a/resources/views/settings/recycle-bin/index.blade.php +++ b/resources/views/settings/recycle-bin/index.blade.php @@ -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>