Files
quicknotes/js/templates/notes.handlebars
Matias De lellis 0b510e5718 Don't trim long titles, and show them in more lines.
Reserve space for header icons, and so no layout occur when show that icons.
2022-05-22 22:22:54 -03:00

114 lines
3.9 KiB
Handlebars

{{#if notes}}
<div id="notes-grid-div" class="notes-grid">
{{#each notes}}
<div class="note-grid-item">
<div class="quicknote noselect {{#if sharedBy.length}}shared{{/if}} {{#if sharedWith.length}}shareowner{{/if}}" style="background-color: {{color}}" data-id="{{ id }}" data-timestamp="{{ timestamp }}" >
<div class='note-header'>
<div class='note-attachts'>
{{#each attachments}}
<div class='note-attach-grid'>
<div class="attach-preview note-attach" attach-file-id="{{file_id}}" data-background-image="{{preview_url}}"></div>
</div>
{{/each}}
</div>
</div>
<div class='note-body'>
{{#if sharedBy}}
<div class="icon-header-note icon-share" title="{{tSB sharedBy.0.display_name}}"></div>
<div class="icon-header-note icon-delete hide-header-icon icon-delete-note" title="{{t "quicknotes" "Leave this shared note"}}"></div>
{{else}}
{{#if isPinned}}
<div class="icon-header-note icon-pinned fixed-header-icon" title="{{t "quicknotes" "Unpin note"}}"></div>
{{else}}
<div class="icon-header-note icon-pin hide-header-icon" title="{{t "quicknotes" "Pin note"}}"></div>
{{/if}}
<div class="icon-header-note icon-delete hide-header-icon icon-delete-note" title="{{t "quicknotes" "Delete note"}}"></div>
{{/if}}
<div class='note-title'>
{{{ title }}}
</div>
<div class='note-content'>
{{{ content }}}
</div>
<div class='note-shares'>
{{#each sharedWith}}
<div class="icon-user slim-share" share-id="{{ shared_user }}" title="{{tSW display_name}}">{{{ display_name }}}</div>
{{/each}}
</div>
<div class='note-tags'>
{{#each tags}}
<div class='icon-tag slim-tag' tag-id="{{ id }}">
{{{ name }}}
</div>
{{/each}}
</div>
</div>
</div>
</div>
{{/each}}
</div>
<div id="modal-note-div" class="hide-modal-note modal-note-background">
<div class="modal-content">
<div class="quicknote note-active" style="background-color: #F7EB96" data-id="-1">
<div class='note-header'>
<div class='note-attachts'></div>
</div>
<div class='note-body'>
<div class="icon-header-note icon-pin fixed-header-icon" title="{{t "quicknotes" "Pin note"}}"></div>
<div contenteditable="true" id='title-editable' class='note-title' data-placeholder="{{t "quicknotes" "Title"}}"></div>
<div contenteditable="true" id='content-editable' class='note-content'></div>
<div class='note-shares'></div>
<div class='note-tags'></div>
</div>
<div class="note-editable-options">
<div class="colors-toolbar">
<button id='color-button' class='round-tool-button'>
<div class="icon-toggle-background" title="{{t "quicknotes" "Colors"}}"></div>
</button>
<button id='share-button' class='round-tool-button'>
<div class="icon-shared" title="{{t "quicknotes" "Share note"}}"></div>
</button>
<button id='tag-button' class='round-tool-button'>
<div class="icon-tag" title="{{t "quicknotes" "Tags"}}"></div>
</button>
<button id='attach-button' class='round-tool-button'>
<div class="icon-picture" title="{{t "quicknotes" "Attach file"}}"></div>
</button>
</div>
<div class="buttons-toolbar">
<button id='cancel-button'>
{{ cancelTxt }}
</button>
<button id='save-button'>
{{ saveTxt }}
</button>
<button id='close-button'>{{t "quicknotes" "Close"}}</button>
</div>
<div style="clear: both;"></div>
</div>
<div class="note-noneditable-options">
<div class="buttons-toolbar">
<button id='close-button'>{{t "quicknotes" "Close"}}</button>
</div>
<div style="clear: both;"></div>
</div>
</div>
</div>
</div>
{{else if loaded}}
<div class="emptycontent">
<div class="icon-quicknotes svg"></div>
<h2>
{{ emptyMsg }}
</h2>
</div>
{{else}}
<div class="emptycontent">
<div class="icon-quicknotes svg"></div>
<h2>
{{loadingMsg}}
</h2>
<img class="loadingimport" src="{{loadingIcon}}" />
</div>
{{/if}}