Friendica/friendica-github
1
0
Fork 0
mirror of https://github.com/friendica/friendica synced 2024-11-17 23:43:40 +00:00
Code Issues Projects Releases Packages Wiki Activity

Optimisation of the Composer Editor

Browse source 
As a result of the changes, the editor is started in a larger window. In addition, the authorisation settings for the article are hidden for the time being. These can be shown via a sandwitch menu if required.
The reload of the page is prevented so that articles already created in the editor are not lost.
ar.

The Composer Editor is another editor in Friendica that is particularly suitable for entering longer texts (e.g. at the local workstation). The special feature is that the editor is loaded in a separate window and therefore does not distract from the timeline. 
The editor can still be used in mobile applications
This commit is contained in:
loma-one 2024-08-22 10:59:06 +02:00 committed by GitHub
parent 4ac29047dc
commit 59530853de
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 49 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
view/templates/item/compose.tpl
View file

@ -21,53 +21,56 @@
<p class="comment-edit-bb-{{$id}} comment-icon-list"> <p class="comment-edit-bb-{{$id}} comment-icon-list">
<span> <span>
<button type="button" class="btn btn-sm template-icon bb-img" aria-label="{{$l10n.edimg}}" title="{{$l10n.edimg}}" data-role="insert-formatting" data-bbcode="img" data-id="{{$id}}" tabindex="7"> <button type="button" class="btn btn-sm template-icon bb-img" aria-label="{{$l10n.edimg}}" title="{{$l10n.edimg}}" data-role="insert-formatting" data-bbcode="img" data-id="{{$id}}" tabindex="6">
<i class="fa fa-picture-o"></i> <i class="fa fa-picture-o"></i>
</button> </button>
<button type="button" class="btn btn-sm template-icon bb-attach" aria-label="{{$l10n.edattach}}" title="{{$l10n.edattach}}" ondragenter="return commentLinkDrop(event, {{$id}});" ondragover="return commentLinkDrop(event, {{$id}});" ondrop="commentLinkDropper(event);" onclick="commentGetLink({{$id}}, '{{$l10n.prompttext}}');" tabindex="8"> <button type="button" class="btn btn-sm template-icon bb-attach" aria-label="{{$l10n.edattach}}" title="{{$l10n.edattach}}" ondragenter="return commentLinkDrop(event, {{$id}});" ondragover="return commentLinkDrop(event, {{$id}});" ondrop="commentLinkDropper(event);" onclick="commentGetLink({{$id}}, '{{$l10n.prompttext}}');" tabindex="7">
<i class="fa fa-paperclip"></i> <i class="fa fa-paperclip"></i>
</button> </button>
</span> </span>
<span> <span>
<button type="button" class="btn btn-sm template-icon bb-url" aria-label="{{$l10n.edurl}}" title="{{$l10n.edurl}}" onclick="insertFormatting('url',{{$id}});" tabindex="9"> <button type="button" class="btn btn-sm template-icon bb-url" aria-label="{{$l10n.edurl}}" title="{{$l10n.edurl}}" onclick="insertFormatting('url',{{$id}});" tabindex="8">
<i class="fa fa-link"></i> <i class="fa fa-link"></i>
</button> </button>
<button type="button" class="btn btn-sm template-icon underline" aria-label="{{$l10n.eduline}}" title="{{$l10n.eduline}}" onclick="insertFormatting('u',{{$id}});" tabindex="10"> <button type="button" class="btn btn-sm template-icon underline" aria-label="{{$l10n.eduline}}" title="{{$l10n.eduline}}" onclick="insertFormatting('u',{{$id}});" tabindex="9">
<i class="fa fa-underline"></i> <i class="fa fa-underline"></i>
</button> </button>
<button type="button" class="btn btn-sm template-icon italic" aria-label="{{$l10n.editalic}}" title="{{$l10n.editalic}}" onclick="insertFormatting('i',{{$id}});" tabindex="11"> <button type="button" class="btn btn-sm template-icon italic" aria-label="{{$l10n.editalic}}" title="{{$l10n.editalic}}" onclick="insertFormatting('i',{{$id}});" tabindex="10">
<i class="fa fa-italic"></i> <i class="fa fa-italic"></i>
</button> </button>
<button type="button" class="btn btn-sm template-icon bold" aria-label="{{$l10n.edbold}}" title="{{$l10n.edbold}}" onclick="insertFormatting('b',{{$id}});" tabindex="12"> <button type="button" class="btn btn-sm template-icon bold" aria-label="{{$l10n.edbold}}" title="{{$l10n.edbold}}" onclick="insertFormatting('b',{{$id}});" tabindex="11">
<i class="fa fa-bold"></i> <i class="fa fa-bold"></i>
</button> </button>
<button type="button" class="btn btn-sm template-icon quote" aria-label="{{$l10n.edquote}}" title="{{$l10n.edquote}}" onclick="insertFormatting('quote',{{$id}});" tabindex="13"> <button type="button" class="btn btn-sm template-icon quote" aria-label="{{$l10n.edquote}}" title="{{$l10n.edquote}}" onclick="insertFormatting('quote',{{$id}});" tabindex="12">
<i class="fa fa-quote-left"></i> <i class="fa fa-quote-left"></i>
</button> </button>
<button id="button_emojipicker" type="button" class="btn btn-sm template-icon emojis" aria-label="{{$l10n.edemojis}}" title="{{$l10n.edemojis}}" tabindex="14"> <button id="button_emojipicker" type="button" class="btn btn-sm template-icon emojis" aria-label="{{$l10n.edemojis}}" title="{{$l10n.edemojis}}" tabindex="13">
<i class="fa fa-smile-o"></i> <i class="fa fa-smile-o"></i>
</button> </button>
<button type="button" class="btn btn-sm template-icon bb-url" aria-label="{{$l10n.contentwarn}}" title="{{$l10n.contentwarn}}" onclick="insertFormatting('abstract',{{$id}});" tabindex="9"> <button type="button" class="btn btn-sm template-icon bb-url" aria-label="{{$l10n.contentwarn}}" title="{{$l10n.contentwarn}}" onclick="insertFormatting('abstract',{{$id}});" tabindex="14">
<i class="fa fa-eye"></i> <i class="fa fa-eye"></i>
</button> </button>
</span> </span>
</p> </p>
<div id="dropzone-{{$id}}" class="dropzone" style="overflow:scroll"> <div id="dropzone-{{$id}}" class="dropzone" style="overflow:scroll">
<p> <p>
<textarea id="comment-edit-text-{{$id}}" class="comment-edit-text form-control text-autosize expandable-textarea" name="body" placeholder="{{$l10n.default}}" rows="7" tabindex="3" dir="auto" dir="auto" onkeydown="sendOnCtrlEnter(event, 'comment-edit-submit-{{$id}}')">{{$body}}</textarea> <textarea id="comment-edit-text-{{$id}}" class="comment-edit-text form-control text-autosize expandable-textarea" name="body" placeholder="{{$l10n.default}}" rows="18" tabindex="3" dir="auto" onkeydown="sendOnCtrlEnter(event, 'comment-edit-submit-{{$id}}')">{{$body}}</textarea>
</p> </p>
</div> </div>
<p class="comment-edit-submit-wrapper"> <p class="comment-edit-submit-wrapper">
{{if $type == 'post'}} {{if $type == 'post'}}
<span role="presentation" class="form-inline"> <span role="presentation" class="form-inline">
<input type="text" name="location" class="form-control" id="jot-location" value="{{$location}}" placeholder="{{$l10n.location_set}}"/> <button type="button" name="permissions" class="btn btn-sm template-icon" id="toggle-permissions" title="{{$l10n.toggle_permissions_tooltip}}" onclick="togglePermissions()" style="margin-right: 10px;" tabindex="5">
<button type="button" class="btn btn-sm template-icon" id="profile-location" <i class="fa fa-ellipsis-h"></i> {{$l10n.toggle_permissions}}
</button>
<input type="text" name="location" class="form-control" id="jot-location" value="{{$location}}" placeholder="{{$l10n.location_set}}" tabindex="6"/>
<button type="button" class="btn btn-sm template-icon" id="profile-location"
data-title-set="{{$l10n.location_set}}" data-title-set="{{$l10n.location_set}}"
data-title-disabled="{{$l10n.location_disabled}}" data-title-disabled="{{$l10n.location_disabled}}"
data-title-unavailable="{{$l10n.location_unavailable}}" data-title-unavailable="{{$l10n.location_unavailable}}"
data-title-clear="{{$l10n.location_clear}}" data-title-clear="{{$l10n.location_clear}}"
title="{{$l10n.location_set}}" title="{{$l10n.location_set}}"
tabindex="6"> tabindex="7">
<i class="fa fa-map-marker" aria-hidden="true"></i> <i class="fa fa-map-marker" aria-hidden="true"></i>
</button> </button>
</span> </span>
@ -76,12 +79,13 @@
<img role="presentation" id="profile-rotator" src="images/rotator.gif" alt="{{$l10n.wait}}" title="{{$l10n.wait}}" style="display: none;" /> <img role="presentation" id="profile-rotator" src="images/rotator.gif" alt="{{$l10n.wait}}" title="{{$l10n.wait}}" style="display: none;" />
</span> </span>
<span role="presentation" id="character-counter" class="grey text-info"></span> <span role="presentation" id="character-counter" class="grey text-info"></span>
<button type="button" class="btn btn-default" onclick="preview_comment({{$id}});" id="comment-edit-preview-link-{{$id}}" tabindex="5"><i class="fa fa-eye"></i> {{$l10n.preview}}</button> <button type="button" class="btn btn-default" onclick="preview_comment({{$id}});" id="comment-edit-preview-link-{{$id}}" tabindex="8"><i class="fa fa-eye"></i> {{$l10n.preview}}</button>
<button type="submit" class="btn btn-primary" id="comment-edit-submit-{{$id}}" name="submit" tabindex="4"><i class="fa fa-envelope"></i> {{$l10n.submit}}</button> <button type="submit" class="btn btn-primary" id="comment-edit-submit-{{$id}}" name="submit" tabindex="9"><i class="fa fa-envelope"></i> {{$l10n.submit}}</button>
</p> </p>
<div id="comment-edit-preview-{{$id}}" class="comment-edit-preview" style="display:none;"></div> <div id="comment-edit-preview-{{$id}}" class="comment-edit-preview" style="display:none;"></div>
<div id="permissions-section" style="display: none;">
{{if $type == 'post'}} {{if $type == 'post'}}
<h3>{{$l10n.visibility_title}}</h3> <h3>{{$l10n.visibility_title}}</h3>
{{$acl_selector nofilter}} {{$acl_selector nofilter}}
@ -98,8 +102,9 @@
<input type="hidden" name="circle_deny" value="{{$circle_deny}}"/> <input type="hidden" name="circle_deny" value="{{$circle_deny}}"/>
<input type="hidden" name="contact_deny" value="{{$contact_deny}}"/> <input type="hidden" name="contact_deny" value="{{$contact_deny}}"/>
{{/if}} {{/if}}
</form> </div>
</div> </form>
</div>
</div> </div>
<script> <script>
dzFactory.setupDropzone('#dropzone-{{$id}}', 'comment-edit-text-{{$id}}'); dzFactory.setupDropzone('#dropzone-{{$id}}', 'comment-edit-text-{{$id}}');
@ -118,4 +123,31 @@
textarea.style.height = (textarea.scrollHeight) + "px"; textarea.style.height = (textarea.scrollHeight) + "px";
}); });
}); });
function togglePermissions() {
var permissionsSection = document.getElementById('permissions-section');
if (permissionsSection.style.display === 'none' || permissionsSection.style.display === '') {
permissionsSection.style.display = 'block';
} else {
permissionsSection.style.display = 'none';
}
}
// Warn the user before leaving the page
var formSubmitting = false;
function setFormSubmitting() {
formSubmitting = true;
}
window.addEventListener("beforeunload", function (event) {
if (!formSubmitting) {
var confirmationMessage = 'Sind Sie sicher, dass Sie die Seite neu laden möchten? Alle ungespeicherten Änderungen gehen verloren.';
event.returnValue = confirmationMessage;
return confirmationMessage;
}
});
// Set the formSubmitting flag when the form is submitted
document.getElementById('comment-edit-form-{{$id}}').addEventListener('submit', setFormSubmitting);
</script> </script>