Skip to content

Commit

Permalink
Merge pull request #2266 from laws-africa/edit-toolbar
Browse files Browse the repository at this point in the history 
Make edit toolbar a bit easier to use and options more visible
  • Loading branch information
@longhotsummer
longhotsummer authored Oct 18, 2024
2 parents 5a24c4b + 290b6c6 commit 301c358
Show file tree
Hide file tree
Showing 2 changed files with 64 additions and 47 deletions.
15 changes: 13 additions & 2 deletions indigo_app/static/javascript/indigo/views/document_editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@

'click .insert-image': 'insertImage',
'click .insert-remark': 'insertRemark',
'click .toggle-word-wrap': 'toggleWordWrap',
},

initialize: function(options) {
Expand Down Expand Up @@ -498,9 +499,9 @@
triggerEditorAction: function(e) {
// an editor action from the toolbar
e.preventDefault();
const action = e.target.getAttribute('data-action');
this.textEditor.trigger('indigo', action);
const action = e.currentTarget.getAttribute('data-action');
this.textEditor.focus();
this.textEditor.trigger('indigo', action);
},

/**
Expand Down Expand Up @@ -557,6 +558,16 @@
this.textEditor.focus();
},

toggleWordWrap: function(e) {
e.preventDefault();
// 132 = EditorOptions.WordWrap
const wordWrap = this.textEditor.getOption(132);
this.textEditor.updateOptions({wordWrap: wordWrap === 'off' ? 'on' : 'off'});
if (e.currentTarget.tagName === 'BUTTON') {
e.currentTarget.classList.toggle('active');
}
},

resize: function() {},
});

Expand Down
96 changes: 51 additions & 45 deletions indigo_app/templates/indigo_api/document/_toolbar.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{% load i18n %}

<div class="btn-toolbar border-right me-2 pe-2">
<div class="btn-toolbar border-right me-2">
<div class="btn-group btn-group-sm me-2">
<a class="btn btn-outline-secondary" href="#attachments-modal" data-bs-toggle="modal"><i class="fas fa-paperclip"></i> {% trans "Attachments" %}</a>
<button class="btn btn-outline-secondary show-revisions"><i class="fas fa-history"></i> {% trans "Changes" %}</button>
Expand Down Expand Up @@ -33,7 +33,7 @@
</div>
</div>

<div class="document-editor-toolbar">
<div class="document-editor-toolbar flex-grow-1">
<div class="btn-toolbar general-buttons">
<div class="btn-group btn-group-sm me-2">
{% if request.user.is_authenticated %}
Expand All @@ -52,17 +52,50 @@
</a>
{% endif %}
</div>
<div class="btn-group ms-auto">
<div class="btn-group btn-group-sm me-2">
<a class="btn btn-link" href="{% url 'work_tasks' frbr_uri=work.frbr_uri %}"><i class="fas fa-thumbtack me-1"></i>{% trans "Tasks" %}</a>
</div>

<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown"><i class="fas fa-cog"></i> {% trans "Settings" %}</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#properties-modal" data-bs-toggle="modal">{% trans "Properties..." %}</a>
<div class="dropdown-submenu">
<a href="#" class="dropdown-item">{% trans "Download as" %}</a>
<div class="dropdown-menu dropdown-menu-right">
{% for fmt in download_formats %}
<a class="dropdown-item" href="{{ fmt.url }}" target="_blank"><i class="{{ fmt.icon }}"></i> {{ fmt.title }}</a>
{% endfor %}
</div>
</div>
<div class="dropdown-divider"></div>
<a class="dropdown-item delete-document" href="#">{% trans "Delete" %}</a>
</div>
</div>
</div>

</div>

<div class="btn-toolbar text-editor-buttons d-none">
<div class="btn-group">
<div class="btn-group btn-group-sm me-2">
<button class="btn btn-success save"><i class="fas fa-check"></i> {% trans "Update" %}</button>
<button class="btn btn-secondary cancel" title="Cancel"><i class="fas fa-times"></i> {% trans "Cancel" %}</button>
</div>
<div class="btn-group btn-group-sm me-2">
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">{% trans "Edit" %}</button>
<div class="dropdown-menu with-shortcuts">
<a class="dropdown-item editor-action" data-action="actions.find" href="#">{% trans "Find..." %} <span class="shortcut win">Ctrl-F</span><span class="shortcut osx">⌘-F</span></a>
<a class="dropdown-item editor-action" data-action="editor.action.nextMatchFindAction" href="#">{% trans "Find next" %}<span class="shortcut win">Ctrl-K</span><span class="shortcut osx">⌘-G</span></a>
<a class="dropdown-item editor-action" data-action="editor.action.previousMatchFindAction" href="#">{% trans "Find previous" %}<span class="shortcut win">Ctrl-Shift-K</span><span class="shortcut osx">⌘-Shift-G</span></a>
<a class="dropdown-item editor-action" data-action="editor.action.startFindReplaceAction" href="#">{% trans "Find and replace..." %}<span class="shortcut win">Ctrl-H</span><span class="shortcut osx">⌘-⌥-F</span></a>
<hr class="dropdown-divider">
<a class="dropdown-item editor-action" data-action="editor.action.moveLinesUpAction" href="#">{% trans "Move lines up" %}<span class="shortcut win">Ctrl-↑</span><span class="shortcut osx">⌥-↑</span></a>
<a class="dropdown-item editor-action" data-action="editor.action.moveLinesDownAction" href="#">{% trans "Move lines down" %}<span class="shortcut win">Ctrl-↓</span><span class="shortcut osx">⌥-↓</span></a>
<a class="dropdown-item editor-action" data-action="editor.action.joinLines" href="#">{% trans "Join lines" %}<span class="shortcut win">Ctrl-J</span><span class="shortcut osx">^-J</span></a>
<hr class="dropdown-divider">
<a class="dropdown-item editor-action" data-action="editor.action.quickCommand" href="#">{% trans "All commands..." %}<span class="shortcut">F1</span></a>
</div>
</div>
<div class="btn-group btn-group-sm">
Expand All @@ -86,57 +119,30 @@
</div>
</div>
</div>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-outline-secondary dropdown-toggle me-2" data-bs-toggle="dropdown">{% trans "Markup" %}</button>
<div class="dropdown-menu">
<a class="dropdown-item editor-action" data-action="format.bold" href="#">{% trans "Bold" %}</a>
<a class="dropdown-item editor-action" data-action="format.italics" href="#">{% trans "Italics" %}</a>
<a class="dropdown-item editor-action" data-action="format.underline" href="#">{% trans "Underline" %}</a>
<a class="dropdown-item editor-action" data-action="format.superscript" href="#">{% trans "Superscript" %}</a>
<a class="dropdown-item editor-action" data-action="format.subscript" href="#">{% trans "Subscript" %}</a>
<a class="dropdown-item editor-action" data-action="format.remark" href="#">{% trans "Remark" %}</a>
</div>
</div>
</div>
<div class="btn-group btn-group-sm">
<button class="btn btn-success save"><i class="fas fa-check"></i> {% trans "Update" %}</button>
<button class="btn btn-secondary me-2 cancel" title="Cancel"><i class="fas fa-times"></i> {% trans "Cancel" %}</button>
<div class="btn-group btn-group-sm me-2">
<button type="button" class="btn btn-outline-secondary editor-action" data-action="format.bold"><i class="fa fa-bold"></i></button>
<button type="button" class="btn btn-outline-secondary editor-action" data-action="format.italics"><i class="fa fa-italic"></i></button>
<button type="button" class="btn btn-outline-secondary editor-action" data-action="format.underline"><i class="fa fa-underline"></i></button>
<button type="button" class="btn btn-outline-secondary editor-action" data-action="format.superscript"><i class="fa fa-superscript"></i></button>
<button type="button" class="btn btn-outline-secondary editor-action" data-action="format.subscript"><i class="fa fa-subscript"></i></button>
<button type="button" class="btn btn-outline-secondary editor-action" data-action="format.remark">{% trans "Remark" %}</button>
</div>
<div class="btn-group btn-group-sm me-2">
<button type="button" class="btn btn-outline-secondary toggle-word-wrap active">{% trans "Wrap lines" %}</button>
</div>
<div class="btn-group btn-group-sm">
<button class="btn btn-outline-secondary" data-bs-target="#cheatsheet-modal" data-bs-toggle="modal"><i class="fas fa-question-circle fa-fw"></i> {% trans "Editor help..." %}</button>
<div class="btn-group btn-group-sm ms-auto">
<button class="btn btn-outline-secondary" data-bs-target="#cheatsheet-modal" data-bs-toggle="modal"><i class="fas fa-question-circle fa-fw"></i> {% trans "Help" %}</button>
{% if place.settings.styleguide_url %}
<a class="btn btn-outline-secondary ms-2" href="{{ place.settings.styleguide_url }}" target="_blank">
<i class="fas fa-book-open fa-fw"></i>
{% blocktrans trimmed with country=work.country.name %}{{ country }} Style Guide{% endblocktrans %}
<a class="btn btn-outline-secondary" href="{{ place.settings.styleguide_url }}" target="_blank">
<i class="fas fa-book-open fa-fw"></i>
{% blocktrans trimmed with country=work.country.name %}{{ country }} Style Guide{% endblocktrans %}
</a>
{% endif %}
</div>
</div>
</div>

<div class="btn-toolbar ms-auto">
<div class="btn-group btn-group-sm me-2">
<a class="btn btn-link" href="{% url 'work_tasks' frbr_uri=work.frbr_uri %}"><i class="fas fa-thumbtack me-1"></i>{% trans "Tasks" %}</a>
</div>

<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown"><i class="fas fa-cog"></i> {% trans "Settings" %}</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#properties-modal" data-bs-toggle="modal">{% trans "Properties..." %}</a>
<div class="dropdown-submenu">
<a href="#" class="dropdown-item">{% trans "Download as" %}</a>
<div class="dropdown-menu dropdown-menu-right">
{% for fmt in download_formats %}
<a class="dropdown-item" href="{{ fmt.url }}" target="_blank"><i class="{{ fmt.icon }}"></i> {{ fmt.title }}</a>
{% endfor %}
</div>
</div>
<div class="dropdown-divider"></div>
<a class="dropdown-item delete-document" href="#">{% trans "Delete" %}</a>
</div>
</div>
</div>

<!-- this wrapper is removed from the DOM and positioned inline alongside tables in the content view,
it's just useful to write the HTML here and not in Javascript. -->
<div class="table-editor-wrapper d-none">
Expand Down

0 comments on commit 301c358

Please sign in to comment.