mirror of
https://github.com/the-djmaze/snappymail.git
synced 2026-09-02 14:07:04 +03:00
199 lines
8.6 KiB
HTML
199 lines
8.6 KiB
HTML
<header class="b-header-toolbar g-ui-user-select-none">
|
||
|
||
<a href="#" class="close" data-bind="click: close">×</a>
|
||
|
||
<div class="btn-toolbar">
|
||
|
||
<a class="btn" data-bind="click: newContact" data-icon="✚" data-i18n="CONTACTS/BUTTON_ADD_CONTACT"></a>
|
||
|
||
<a class="btn btn-success fontastic" data-bind="command: newMessageCommand">✉</a>
|
||
|
||
<a class="btn fontastic" data-bind="command: deleteCommand">🗑</a>
|
||
|
||
<div class="btn-group dropdown" data-bind="registerBootstrapDropdown: true, visible: !contacts.importing() && !contacts.syncing()">
|
||
<a id="contacts-more-dropdown-id" class="btn dropdown-toggle fontastic" href="#">☰</a>
|
||
<menu class="dropdown-menu right-edge" role="menu" aria-labelledby="contacts-more-dropdown-id">
|
||
<li role="presentation">
|
||
<a href="#" data-bind="initDom: importButton">
|
||
<i data-bind="css: {'icon-import': !contacts.importing(), 'icon-spinner': contacts.importing}"></i>
|
||
<span data-i18n="CONTACTS/BUTTON_IMPORT"></span>
|
||
</a>
|
||
</li>
|
||
<li class="dividerbar" role="presentation">
|
||
<a href="#" data-bind="click: exportCsv">
|
||
<i class="icon-export"></i>
|
||
<span data-i18n="CONTACTS/BUTTON_EXPORT_CSV"></span>
|
||
</a>
|
||
</li>
|
||
<li role="presentation">
|
||
<a href="#" data-bind="click: exportVcf">
|
||
<i class="icon-export"></i>
|
||
<span data-i18n="CONTACTS/BUTTON_EXPORT_VCARD"></span>
|
||
</a>
|
||
</li>
|
||
<li class="dividerbar" role="presentation" data-bind="visible: contactsSyncEnabled">
|
||
<a href="#" data-bind="command: syncCommand">
|
||
<i class="fontastic" data-bind="css: {'icon-spinner': contacts.syncing}">⇆</i>
|
||
<span data-i18n="CONTACTS/BUTTON_SYNC"></span>
|
||
</a>
|
||
</li>
|
||
</menu>
|
||
</div>
|
||
<span data-bind="visible: contacts.importing() || contacts.syncing()" class="btn"><i class="icon-spinner"></i></span>
|
||
</div>
|
||
</header>
|
||
<div class="modal-body">
|
||
<div class="b-list-toolbar">
|
||
<input type="search" class="e-search" placeholder="Search" autofocus="" autocorrect="off" autocapitalize="off" data-i18n="[placeholder]GLOBAL/SEARCH" data-bind="value: search">
|
||
</div>
|
||
<div class="b-list-content g-ui-user-select-none" data-bind="css: {'hideContactListCheckbox': !useCheckboxesInList()}">
|
||
<div class="content">
|
||
<div class="listClear" data-bind="visible: !!search()">
|
||
<span class="g-ui-link" data-i18n="CONTACTS/CLEAR_SEARCH" data-bind="click: clearSearch"></span>
|
||
</div>
|
||
<div class="listEmptyList" data-bind="visible: 0 === contacts().length && '' === search() && !contacts.loading()"
|
||
data-i18n="CONTACTS/EMPTY_LIST"></div>
|
||
<div class="listEmptyListLoading" data-bind="visible: 0 === contacts().length && '' === search() && contacts.loading()">
|
||
<i class="icon-spinner"></i>
|
||
<span data-i18n="GLOBAL/LOADING"></span>
|
||
</div>
|
||
<div class="listEmptySearchList" data-bind="visible: 0 === contacts().length && '' !== search() && !contacts.loading()"
|
||
data-i18n="CONTACTS/EMPTY_SEARCH"></div>
|
||
<div class="e-contact-foreach g-ui-user-select-none" data-bind="foreach: contacts, visible: contacts().length">
|
||
<div class="e-contact-item g-ui-user-select-none" data-bind="css: lineAsCss()">
|
||
<div class="checkboxItem fontastic" data-bind="text: checked() ? '☑' : '☐'"></div>
|
||
<div class="nameParent actionHandle" data-bind="text: display"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="b-list-footer-toolbar thm-message-list-bottom-toolbar">
|
||
<div class="footer-pager">
|
||
<!-- ko template: { name: 'Paginator', data: contactsPaginator } --><!-- /ko -->
|
||
</div>
|
||
</div>
|
||
<div class="b-view-content-toolbar btn-toolbar" data-bind="i18nUpdate: contact">
|
||
<!-- ko with: contact -->
|
||
<div class="btn-group">
|
||
<button class="btn button-save-contact" data-bind="visible: !readOnly(), command: $root.saveCommand, css: {'dirty': $root.hasChanges}">
|
||
<i data-bind="css: {'icon-ok': !$root.isSaving(), 'icon-spinner': $root.isSaving()}"></i>
|
||
<span data-i18n="CONTACTS/BUTTON_CREATE_CONTACT" data-bind="visible: !id()"></span>
|
||
<span data-i18n="CONTACTS/BUTTON_UPDATE_CONTACT" data-bind="visible: id"></span>
|
||
</button>
|
||
</div>
|
||
<div class="btn-group dropdown" data-bind="visible: !readOnly(), registerBootstrapDropdown: true">
|
||
<a id="button-add-prop-dropdown-id" href="#" class="btn dropdown-toggle" data-i18n="CONTACTS/ADD_MENU_LABEL"></a>
|
||
<menu class="dropdown-menu right-edge" style="text-align: left" role="menu" aria-labelledby="button-add-prop-dropdown-id">
|
||
<li role="presentation">
|
||
<a href="#" data-bind="click: addEmail">
|
||
<i class="icon-none"></i>
|
||
<span data-i18n="GLOBAL/EMAIL"></span>
|
||
</a>
|
||
</li>
|
||
<li role="presentation">
|
||
<a href="#" data-bind="click: addTel">
|
||
<i class="icon-none"></i>
|
||
<span data-i18n="CONTACTS/ADD_MENU_PHONE"></span>
|
||
</a>
|
||
</li>
|
||
<li role="presentation">
|
||
<a href="#" data-bind="click: addUrl">
|
||
<i class="icon-none"></i>
|
||
<span data-i18n="CONTACTS/ADD_MENU_URL"></span>
|
||
</a>
|
||
</li>
|
||
<li class="dividerbar" role="presentation">
|
||
<a href="#" data-bind="click: addNickname">
|
||
<i class="icon-none"></i>
|
||
<span data-i18n="CONTACTS/ADD_MENU_NICKNAME"></span>
|
||
</a>
|
||
</li>
|
||
<!--
|
||
<li role="presentation">
|
||
<a href="#" data-bind="click: addNewAddress">
|
||
<span data-i18n="CONTACTS/ADD_MENU_ADDRESS"></span>
|
||
</a>
|
||
</li>-->
|
||
</menu>
|
||
</div>
|
||
<!-- /ko -->
|
||
</div>
|
||
<div class="b-view-content">
|
||
<div class="b-contact-view-desc" data-bind="visible: !contact"
|
||
data-i18n="CONTACTS/CONTACT_VIEW_DESC"></div>
|
||
<div data-bind="visible: contact, i18nUpdate: contact">
|
||
<!-- ko with: contact -->
|
||
<div class="form-horizontal top-part" data-bind="css: {'read-only': readOnly}">
|
||
<div class="control-group" data-bind="visible: !readOnly() || hasValidName()">
|
||
<label class="fontastic iconsize24">👤</label>
|
||
<div>
|
||
<div class="property-line">
|
||
<span data-bind="text: givenName"></span>
|
||
<input type="text"
|
||
autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
|
||
data-bind="value: givenName" data-i18n="[placeholder]CONTACTS/PLACEHOLDER_ENTER_FIRST_NAME">
|
||
</div>
|
||
<div class="property-line">
|
||
<span data-bind="text: surName"></span>
|
||
<input type="text"
|
||
autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
|
||
data-bind="value: surName" data-i18n="[placeholder]CONTACTS/PLACEHOLDER_ENTER_LAST_NAME">
|
||
</div>
|
||
<div class="property-line" data-bind="visible: null != nickname()">
|
||
<span data-bind="text: nickname"></span>
|
||
<input type="text"
|
||
autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
|
||
data-bind="value: nickname" data-i18n="[placeholder]CONTACTS/PLACEHOLDER_ENTER_NICK_NAME">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="control-group" data-bind="email().length">
|
||
<label class="fontastic iconsize24" data-i18n="[title]GLOBAL/EMAIL">@</label>
|
||
<div>
|
||
<div data-bind="foreach: email">
|
||
<div class="property-line">
|
||
<span data-bind="text: value"></span>
|
||
<input type="text"
|
||
autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
|
||
data-bind="value: value">
|
||
</div>
|
||
</div>
|
||
<a href="#" class="btn fontastic" data-bind="visible: !readOnly(), click: addEmail">✚</a>
|
||
</div>
|
||
</div>
|
||
<div class="control-group" data-bind="visible: tel().length">
|
||
<label class="fontastic iconsize24" data-i18n="[title]CONTACTS/LABEL_PHONE">📞</label>
|
||
<div>
|
||
<div data-bind="foreach: tel">
|
||
<div class="property-line">
|
||
<span data-bind="text: value"></span>
|
||
<input type="text"
|
||
autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
|
||
data-bind="value: value">
|
||
</div>
|
||
</div>
|
||
<a href="#" class="btn fontastic" data-bind="visible: !readOnly(), click: $root.addTel">✚</a>
|
||
</div>
|
||
</div>
|
||
<div class="control-group" data-bind="visible: url().length">
|
||
<label class="fontastic iconsize24" data-i18n="[title]CONTACTS/LABEL_WEB">🌍</label>
|
||
<div>
|
||
<div data-bind="foreach: url">
|
||
<div class="property-line">
|
||
<span data-bind="text: value"></span>
|
||
<input type="text" placeholder="https://"
|
||
autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
|
||
data-bind="value: value">
|
||
</div>
|
||
</div>
|
||
<a href="#" class="btn fontastic" data-bind="visible: !readOnly(), click: $root.addUrl">✚</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- /ko -->
|
||
<!--
|
||
<div class="e-read-only-sign fontastic iconsize24" data-i18n="[title]CONTACTS/LABEL_READ_ONLY">🔒</div>
|
||
-->
|
||
</div>
|
||
</div>
|
||
</div>
|