mirror of
https://github.com/the-djmaze/snappymail.git
synced 2025-02-25 07:16:21 +08:00
Improved Contacts dialog layout for mobile
This commit is contained in:
the-djmaze
parent
4085f58b4e
commit
aa842dbc83
2 changed files with 280 additions and 300 deletions
|
|
@ -1,14 +1,8 @@
|
||||||
|
|
||||||
@contacts-popup-left-width: 25%;
|
|
||||||
|
|
||||||
#V-PopupsContacts {
|
#V-PopupsContacts {
|
||||||
|
|
||||||
bottom: 0;
|
|
||||||
width: auto;
|
|
||||||
min-width: 550px;
|
|
||||||
max-width: 900px;
|
max-width: 900px;
|
||||||
min-height: 300px;
|
min-height: 300px;
|
||||||
max-height: 700px;
|
|
||||||
|
|
||||||
.control-group {
|
.control-group {
|
||||||
label.iconsize24 {
|
label.iconsize24 {
|
||||||
|
|
@ -18,32 +12,28 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-body {
|
.modal-body {
|
||||||
|
display: flex;
|
||||||
height: calc(100vh - 49px);
|
height: calc(100vh - 49px);
|
||||||
padding: 0;
|
padding: 0;
|
||||||
position: relative;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Left */
|
||||||
|
|
||||||
.b-list-toolbar {
|
.b-list-toolbar {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
height: 44px;
|
height: 44px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: @contacts-popup-left-width;
|
border-bottom: 1px solid var(--border-color, #ddd);
|
||||||
border-bottom: 1px solid rgba(128,128,128,0.4);
|
|
||||||
|
|
||||||
.e-search {
|
.e-search {
|
||||||
margin: 7px 0 0;
|
margin: 7px 0 0;
|
||||||
width: calc(100% - 20px);
|
width: calc(100% - 10px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.b-list-footer-toolbar {
|
.b-list-footer-toolbar {
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
height: 46px;
|
height: 46px;
|
||||||
width: @contacts-popup-left-width;
|
border-top: 1px solid var(--border-color, #ddd);
|
||||||
background-color: var(--message-list-toolbar-bg-color,#eee);
|
|
||||||
box-shadow: inset 0 1px 0 #ccc;
|
|
||||||
|
|
||||||
.footer-pager {
|
.footer-pager {
|
||||||
padding: 8px 10px 0 0;
|
padding: 8px 10px 0 0;
|
||||||
|
|
@ -52,11 +42,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.b-list-content {
|
.b-list-content {
|
||||||
position: absolute;
|
height: calc(100% - 44px - 46px);
|
||||||
top: 45px;
|
|
||||||
bottom: 46px;
|
|
||||||
left: 0;
|
|
||||||
width: @contacts-popup-left-width;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
scroll-behavior: smooth;
|
scroll-behavior: smooth;
|
||||||
|
|
@ -87,9 +73,8 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
border: 0;
|
|
||||||
border-left: 6px solid #eee;
|
border-left: 6px solid #eee;
|
||||||
border-bottom: 1px solid rgba(128,128,128,0.25);
|
border-bottom: 1px solid var(--border-color, #ddd);
|
||||||
|
|
||||||
&.focused {
|
&.focused {
|
||||||
border-left-color: #bbb;
|
border-left-color: #bbb;
|
||||||
|
|
@ -132,15 +117,17 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Right */
|
||||||
|
|
||||||
|
.right {
|
||||||
|
width: 100%;
|
||||||
|
border-left: 1px solid var(--border-color, #ddd);
|
||||||
|
}
|
||||||
|
|
||||||
.b-view-content-toolbar {
|
.b-view-content-toolbar {
|
||||||
|
border-top: 1px solid var(--border-color, #ddd);
|
||||||
padding: 7px;
|
padding: 7px;
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
right: 0;
|
|
||||||
left: @contacts-popup-left-width;
|
|
||||||
height: 30px;
|
|
||||||
text-align: right;
|
text-align: right;
|
||||||
border-top: 1px solid rgba(128,128,128,0.4);
|
|
||||||
|
|
||||||
.dropdown-menu.right-edge {
|
.dropdown-menu.right-edge {
|
||||||
top: auto;
|
top: auto;
|
||||||
|
|
@ -149,13 +136,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.b-view-content {
|
.b-view-content {
|
||||||
position: absolute;
|
height: calc(100% - 46px);
|
||||||
top: 0;
|
margin: 0;
|
||||||
bottom: 45px;
|
|
||||||
left: @contacts-popup-left-width;
|
|
||||||
right: 0;
|
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
border-left: 1px solid rgba(128,128,128,0.25);
|
|
||||||
|
|
||||||
span {
|
span {
|
||||||
height: 20px;
|
height: 20px;
|
||||||
|
|
@ -179,21 +162,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
input, textarea {
|
input, textarea {
|
||||||
box-shadow: none;
|
|
||||||
border-color: #fff;
|
|
||||||
font-size: 18px;
|
|
||||||
width: 70vw;
|
width: 70vw;
|
||||||
max-width: 400px;
|
max-width: 400px;
|
||||||
|
|
||||||
&:hover {
|
|
||||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
|
||||||
border-color: #ccc;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
|
||||||
border-color: #999;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -227,3 +197,9 @@ html:not(rl-mobile) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 900px) {
|
||||||
|
#V-PopupsContacts {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -43,281 +43,285 @@
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<div class="b-list-toolbar">
|
<div class="left">
|
||||||
<input type="search" class="e-search" placeholder="Search" autofocus="" autocorrect="off" autocapitalize="off" spellcheck="false" data-i18n="[placeholder]GLOBAL/SEARCH" data-bind="value: search">
|
<div class="b-list-toolbar">
|
||||||
</div>
|
<input type="search" class="e-search" placeholder="Search" autofocus="" autocorrect="off" autocapitalize="off" spellcheck="false" data-i18n="[placeholder]GLOBAL/SEARCH" data-bind="value: search">
|
||||||
<div class="b-list-content g-ui-user-select-none" data-bind="css: {'hideContactListCheckbox': !useCheckboxesInList()}">
|
</div>
|
||||||
<div class="content">
|
<div class="b-list-content g-ui-user-select-none" data-bind="css: {'hideContactListCheckbox': !useCheckboxesInList()}">
|
||||||
<div class="listClear" data-bind="visible: !!search()">
|
<div class="content">
|
||||||
<span class="g-ui-link" data-i18n="CONTACTS/CLEAR_SEARCH" data-bind="click: clearSearch"></span>
|
<div class="listClear" data-bind="visible: !!search()">
|
||||||
</div>
|
<span class="g-ui-link" data-i18n="CONTACTS/CLEAR_SEARCH" data-bind="click: clearSearch"></span>
|
||||||
<div class="listEmptyList" data-bind="visible: 0 === contacts().length && '' === search() && !contacts.loading()"
|
</div>
|
||||||
data-i18n="CONTACTS/EMPTY_LIST"></div>
|
<div class="listEmptyList" data-bind="visible: 0 === contacts().length && '' === search() && !contacts.loading()"
|
||||||
<div class="listEmptyListLoading" data-bind="visible: 0 === contacts().length && '' === search() && contacts.loading()">
|
data-i18n="CONTACTS/EMPTY_LIST"></div>
|
||||||
<i class="icon-spinner"></i>
|
<div class="listEmptyListLoading" data-bind="visible: 0 === contacts().length && '' === search() && contacts.loading()">
|
||||||
<span data-i18n="GLOBAL/LOADING"></span>
|
<i class="icon-spinner"></i>
|
||||||
</div>
|
<span data-i18n="GLOBAL/LOADING"></span>
|
||||||
<div class="listEmptySearchList" data-bind="visible: 0 === contacts().length && '' !== search() && !contacts.loading()"
|
</div>
|
||||||
data-i18n="CONTACTS/EMPTY_SEARCH"></div>
|
<div class="listEmptySearchList" data-bind="visible: 0 === contacts().length && '' !== search() && !contacts.loading()"
|
||||||
<div class="e-contact-foreach g-ui-user-select-none" data-bind="foreach: contacts, visible: contacts().length">
|
data-i18n="CONTACTS/EMPTY_SEARCH"></div>
|
||||||
<div class="e-contact-item g-ui-user-select-none" data-bind="css: lineAsCss()">
|
<div class="e-contact-foreach g-ui-user-select-none" data-bind="foreach: contacts, visible: contacts().length">
|
||||||
<div class="checkboxItem fontastic" data-bind="text: checked() ? '☑' : '☐'"></div>
|
<div class="e-contact-item g-ui-user-select-none" data-bind="css: lineAsCss()">
|
||||||
<div class="nameParent actionHandle" data-bind="text: display"></div>
|
<div class="checkboxItem fontastic" data-bind="text: checked() ? '☑' : '☐'"></div>
|
||||||
|
<div class="nameParent actionHandle" data-bind="text: display"></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="b-list-footer-toolbar">
|
||||||
<div class="b-list-footer-toolbar thm-message-list-bottom-toolbar">
|
<div class="footer-pager">
|
||||||
<div class="footer-pager">
|
<!-- ko template: { name: 'Paginator', data: contactsPaginator } --><!-- /ko -->
|
||||||
<!-- ko template: { name: 'Paginator', data: contactsPaginator } --><!-- /ko -->
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<form class="b-view-content" spellcheck="false" data-bind="css: {'read-only': contact() && contact().readOnly()}">
|
<div class="right">
|
||||||
<div class="b-contact-view-desc" data-bind="visible: !contact()"
|
<form class="b-view-content" spellcheck="false" data-bind="css: {'read-only': contact() && contact().readOnly()}">
|
||||||
data-i18n="CONTACTS/CONTACT_VIEW_DESC"></div>
|
<div class="b-contact-view-desc" data-bind="visible: !contact()"
|
||||||
<div class="tabs" data-bind="visible: contact, i18nUpdate: contact">
|
data-i18n="CONTACTS/CONTACT_VIEW_DESC"></div>
|
||||||
<!-- ko with: contact -->
|
<div class="tabs" data-bind="visible: contact, i18nUpdate: contact">
|
||||||
<input type="radio" name="contacttabs" id="tab-contact" checked>
|
<!-- ko with: contact -->
|
||||||
<label for="tab-contact"
|
<input type="radio" name="contacttabs" id="tab-contact" checked>
|
||||||
role="tab"
|
<label for="tab-contact"
|
||||||
aria-selected="true"
|
role="tab"
|
||||||
aria-controls="panel1"
|
aria-selected="true"
|
||||||
tabindex="0"
|
aria-controls="panel1"
|
||||||
data-i18n="CONTACTS/TAB_CONTACT"></label>
|
tabindex="0"
|
||||||
<div class="form-horizontal tab-content" role="tabpanel" aria-hidden="false">
|
data-i18n="CONTACTS/TAB_CONTACT"></label>
|
||||||
<div class="control-group">
|
<div class="form-horizontal tab-content" role="tabpanel" aria-hidden="false">
|
||||||
<label class="fontastic iconsize24">👤</label>
|
<div class="control-group">
|
||||||
<div>
|
<label class="fontastic iconsize24">👤</label>
|
||||||
<div class="property-line" data-i18n="[title]CONTACTS/PLACEHOLDER_ENTER_FIRST_NAME">
|
<div>
|
||||||
<span data-bind="text: givenName"></span>
|
<div class="property-line" data-i18n="[title]CONTACTS/PLACEHOLDER_ENTER_FIRST_NAME">
|
||||||
<input type="text"
|
<span data-bind="text: givenName"></span>
|
||||||
autocomplete="off" autocorrect="off" autocapitalize="off"
|
<input type="text"
|
||||||
data-bind="textInput: givenName" data-i18n="[placeholder]CONTACTS/PLACEHOLDER_ENTER_FIRST_NAME">
|
autocomplete="off" autocorrect="off" autocapitalize="off"
|
||||||
</div>
|
data-bind="textInput: givenName" data-i18n="[placeholder]CONTACTS/PLACEHOLDER_ENTER_FIRST_NAME">
|
||||||
<div class="property-line" data-i18n="[title]CONTACTS/PLACEHOLDER_ENTER_LAST_NAME">
|
</div>
|
||||||
<span data-bind="text: surName"></span>
|
<div class="property-line" data-i18n="[title]CONTACTS/PLACEHOLDER_ENTER_LAST_NAME">
|
||||||
<input type="text"
|
<span data-bind="text: surName"></span>
|
||||||
autocomplete="off" autocorrect="off" autocapitalize="off"
|
<input type="text"
|
||||||
data-bind="textInput: surName" data-i18n="[placeholder]CONTACTS/PLACEHOLDER_ENTER_LAST_NAME">
|
autocomplete="off" autocorrect="off" autocapitalize="off"
|
||||||
</div>
|
data-bind="textInput: surName" data-i18n="[placeholder]CONTACTS/PLACEHOLDER_ENTER_LAST_NAME">
|
||||||
|
</div>
|
||||||
<!--
|
<!--
|
||||||
<div class="property-line" data-i18n="[title]CONTACTS/PLACEHOLDER_ENTER_MIDDLE_NAME">
|
<div class="property-line" data-i18n="[title]CONTACTS/PLACEHOLDER_ENTER_MIDDLE_NAME">
|
||||||
<span data-bind="text: middleName"></span>
|
<span data-bind="text: middleName"></span>
|
||||||
<input type="text"
|
<input type="text"
|
||||||
autocomplete="off" autocorrect="off" autocapitalize="off"
|
autocomplete="off" autocorrect="off" autocapitalize="off"
|
||||||
data-bind="textInput: middleName" data-i18n="[placeholder]CONTACTS/PLACEHOLDER_ENTER_MIDDLE_NAME">
|
data-bind="textInput: middleName" data-i18n="[placeholder]CONTACTS/PLACEHOLDER_ENTER_MIDDLE_NAME">
|
||||||
</div>
|
</div>
|
||||||
<div class="property-line" data-i18n="[title]CONTACTS/PLACEHOLDER_ENTER_NAME_PREFIX">
|
<div class="property-line" data-i18n="[title]CONTACTS/PLACEHOLDER_ENTER_NAME_PREFIX">
|
||||||
<span data-bind="text: namePrefix"></span>
|
<span data-bind="text: namePrefix"></span>
|
||||||
<input type="text"
|
<input type="text"
|
||||||
autocomplete="off" autocorrect="off" autocapitalize="off"
|
autocomplete="off" autocorrect="off" autocapitalize="off"
|
||||||
data-bind="textInput: namePrefix" data-i18n="[placeholder]CONTACTS/PLACEHOLDER_ENTER_NAME_PREFIX">
|
data-bind="textInput: namePrefix" data-i18n="[placeholder]CONTACTS/PLACEHOLDER_ENTER_NAME_PREFIX">
|
||||||
</div>
|
</div>
|
||||||
<div class="property-line" data-i18n="[title]CONTACTS/PLACEHOLDER_ENTER_NAME_SUFFIX">
|
<div class="property-line" data-i18n="[title]CONTACTS/PLACEHOLDER_ENTER_NAME_SUFFIX">
|
||||||
<span data-bind="text: nameSuffix"></span>
|
<span data-bind="text: nameSuffix"></span>
|
||||||
<input type="text"
|
<input type="text"
|
||||||
autocomplete="off" autocorrect="off" autocapitalize="off"
|
autocomplete="off" autocorrect="off" autocapitalize="off"
|
||||||
data-bind="textInput: nameSuffix" data-i18n="[placeholder]CONTACTS/PLACEHOLDER_ENTER_NAME_SUFFIX">
|
data-bind="textInput: nameSuffix" data-i18n="[placeholder]CONTACTS/PLACEHOLDER_ENTER_NAME_SUFFIX">
|
||||||
</div>
|
</div>
|
||||||
-->
|
-->
|
||||||
<div class="property-line" data-bind="visible: null != nickname()" data-i18n="[title]CONTACTS/ADD_MENU_NICKNAME">
|
<div class="property-line" data-bind="visible: null != nickname()" data-i18n="[title]CONTACTS/ADD_MENU_NICKNAME">
|
||||||
<span data-bind="text: nickname"></span>
|
<span data-bind="text: nickname"></span>
|
||||||
|
<input type="text"
|
||||||
|
autocomplete="off" autocorrect="off" autocapitalize="off"
|
||||||
|
data-bind="textInput: 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"
|
||||||
|
data-bind="textInput: 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/ADD_MENU_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"
|
||||||
|
data-bind="textInput: value">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="#" class="btn fontastic" data-bind="visible: !readOnly(), click: addTel">✚</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="control-group" data-bind="visible: url().length">
|
||||||
|
<label class="fontastic iconsize24" data-i18n="[title]CONTACTS/ADD_MENU_URL">🌍</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"
|
||||||
|
data-bind="textInput: value">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="#" class="btn fontastic" data-bind="visible: !readOnly(), click: addUrl">✚</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="control-group" data-bind="visible: null != note()">
|
||||||
|
<label class="fontastic iconsize24" data-i18n="[title]CONTACTS/ADD_MENU_NOTE">🖉</label>
|
||||||
|
<div class="property-line">
|
||||||
|
<span data-bind="text: note"></span>
|
||||||
<input type="text"
|
<input type="text"
|
||||||
autocomplete="off" autocorrect="off" autocapitalize="off"
|
autocomplete="off" autocorrect="off" autocapitalize="off"
|
||||||
data-bind="textInput: nickname" data-i18n="[placeholder]CONTACTS/PLACEHOLDER_ENTER_NICK_NAME">
|
data-bind="textInput: note">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="control-group" data-bind="email().length">
|
<!--
|
||||||
<label class="fontastic iconsize24" data-i18n="[title]GLOBAL/EMAIL">@</label>
|
<input type="radio" name="contacttabs" id="tab-contact-locations">
|
||||||
<div>
|
<label for="tab-contact-locations"
|
||||||
<div data-bind="foreach: email">
|
role="tab"
|
||||||
<div class="property-line">
|
aria-selected="false"
|
||||||
<span data-bind="text: value"></span>
|
aria-controls="panel2"
|
||||||
<input type="text"
|
tabindex="0"
|
||||||
autocomplete="off" autocorrect="off" autocapitalize="off"
|
data-i18n="CONTACTS/TAB_LOCATIONS"></label>
|
||||||
data-bind="textInput: value">
|
<div class="form-horizontal tab-content" role="tabpanel" aria-hidden="false">
|
||||||
</div>
|
<div data-bind="foreach: adr">
|
||||||
|
<div class="control-group">
|
||||||
|
<div data-bind="text: type"></div>
|
||||||
|
<div data-bind="text: street"></div>
|
||||||
|
<div data-bind="text: street_ext"></div>
|
||||||
|
<div data-bind="text: locality"></div>
|
||||||
|
<div data-bind="text: region"></div>
|
||||||
|
<div data-bind="text: postcode"></div>
|
||||||
|
<div data-bind="text: pobox"></div>
|
||||||
|
<div data-bind="text: country"></div>
|
||||||
|
<div data-bind="text: preferred"></div>
|
||||||
</div>
|
</div>
|
||||||
<a href="#" class="btn fontastic" data-bind="visible: !readOnly(), click: addEmail">✚</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="control-group" data-bind="visible: tel().length">
|
-->
|
||||||
<label class="fontastic iconsize24" data-i18n="[title]CONTACTS/ADD_MENU_PHONE">📞</label>
|
<input type="radio" name="contacttabs" id="tab-contact-business">
|
||||||
<div>
|
<label for="tab-contact-business"
|
||||||
<div data-bind="foreach: tel">
|
role="tab"
|
||||||
<div class="property-line">
|
aria-selected="false"
|
||||||
<span data-bind="text: value"></span>
|
aria-controls="panel3"
|
||||||
<input type="text"
|
tabindex="0"
|
||||||
autocomplete="off" autocorrect="off" autocapitalize="off"
|
data-i18n="CONTACTS/TAB_BUSINESS"></label>
|
||||||
data-bind="textInput: value">
|
<div class="form-horizontal tab-content" role="tabpanel" aria-hidden="false">
|
||||||
</div>
|
<div class="control-group">
|
||||||
</div>
|
<label data-i18n="CONTACTS/LABEL_ORGANIZATION"></label>
|
||||||
<a href="#" class="btn fontastic" data-bind="visible: !readOnly(), click: addTel">✚</a>
|
<span data-bind="text: org"></span>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="control-group" data-bind="visible: url().length">
|
|
||||||
<label class="fontastic iconsize24" data-i18n="[title]CONTACTS/ADD_MENU_URL">🌍</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"
|
|
||||||
data-bind="textInput: value">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<a href="#" class="btn fontastic" data-bind="visible: !readOnly(), click: addUrl">✚</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="control-group" data-bind="visible: null != note()">
|
|
||||||
<label class="fontastic iconsize24" data-i18n="[title]CONTACTS/ADD_MENU_NOTE">🖉</label>
|
|
||||||
<div class="property-line">
|
|
||||||
<span data-bind="text: note"></span>
|
|
||||||
<input type="text"
|
<input type="text"
|
||||||
autocomplete="off" autocorrect="off" autocapitalize="off"
|
autocomplete="off" autocorrect="off" autocapitalize="off"
|
||||||
data-bind="textInput: note">
|
data-bind="textInput: org">
|
||||||
|
</div>
|
||||||
|
<div class="control-group">
|
||||||
|
<label data-i18n="CONTACTS/LABEL_DEPARTMENT"></label>
|
||||||
|
<span data-bind="text: department"></span>
|
||||||
|
<input type="text"
|
||||||
|
autocomplete="off" autocorrect="off" autocapitalize="off"
|
||||||
|
data-bind="textInput: department">
|
||||||
|
</div>
|
||||||
|
<div class="control-group">
|
||||||
|
<label data-i18n="CONTACTS/LABEL_TITLE"></label>
|
||||||
|
<span data-bind="text: title"></span>
|
||||||
|
<input type="text"
|
||||||
|
autocomplete="off" autocorrect="off" autocapitalize="off"
|
||||||
|
data-bind="textInput: title">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<input type="radio" name="contacttabs" id="tab-contact-crypto">
|
||||||
|
<label for="tab-contact-crypto"
|
||||||
|
role="tab"
|
||||||
|
aria-selected="false"
|
||||||
|
aria-controls="panel4"
|
||||||
|
tabindex="0"
|
||||||
|
data-i18n="CONTACTS/TAB_CRYPTO"></label>
|
||||||
|
<div class="form-horizontal tab-content" role="tabpanel" aria-hidden="false">
|
||||||
|
<div class="control-group">
|
||||||
|
<label data-i18n="OPENPGP/LABEL_SIGN"></label>
|
||||||
|
<select name="x-crypto[signpref]" data-bind="value: signpref">
|
||||||
|
<option value="Ask" data-i18n="CONTACTS/ASK"></option>
|
||||||
|
<option value="Never" data-i18n="CONTACTS/NEVER"></option>
|
||||||
|
<option value="Always" data-i18n="CONTACTS/ALWAYS"></option>
|
||||||
|
<option value="IfPossible" data-i18n="CONTACTS/ALWAYS_IF_POSSIBLE"></option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="control-group">
|
||||||
|
<label data-i18n="OPENPGP/LABEL_ENCRYPT"></label>
|
||||||
|
<select name="x-crypto[encryptpref]" data-bind="value: encryptpref">
|
||||||
|
<option value="Ask" data-i18n="CONTACTS/ASK"></option>
|
||||||
|
<option value="Never" data-i18n="CONTACTS/NEVER"></option>
|
||||||
|
<option value="Always" data-i18n="CONTACTS/ALWAYS"></option>
|
||||||
|
<option value="IfPossible" data-i18n="CONTACTS/ALWAYS_IF_POSSIBLE"></option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- /ko -->
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<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">
|
||||||
|
<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" data-bind="visible: null == nickname()">
|
||||||
|
<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: addEmail">
|
||||||
|
<i class="fontastic">@</i>
|
||||||
|
<span data-i18n="GLOBAL/EMAIL"></span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li role="presentation">
|
||||||
|
<a href="#" data-bind="click: addTel">
|
||||||
|
<i class="fontastic">📞</i>
|
||||||
|
<span data-i18n="CONTACTS/ADD_MENU_PHONE"></span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li role="presentation">
|
||||||
|
<a href="#" data-bind="click: addUrl">
|
||||||
|
<i class="fontastic">🌍</i>
|
||||||
|
<span data-i18n="CONTACTS/ADD_MENU_URL"></span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li role="presentation" data-bind="visible: null == note()">
|
||||||
|
<a href="#" data-bind="click: addNote">
|
||||||
|
<i class="fontastic">🖉</i>
|
||||||
|
<span data-i18n="CONTACTS/ADD_MENU_NOTE"></span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<!--
|
||||||
|
<li class="dividerbar" role="presentation">
|
||||||
|
<a href="#" data-bind="click: addNewAddress">
|
||||||
|
<span data-i18n="CONTACTS/ADD_MENU_ADDRESS"></span>
|
||||||
|
</a>
|
||||||
|
</li>-->
|
||||||
|
</menu>
|
||||||
</div>
|
</div>
|
||||||
<!--
|
<!--
|
||||||
<input type="radio" name="contacttabs" id="tab-contact-locations">
|
<div class="read-only-sign fontastic iconsize24" data-bind="visible: readOnly" data-i18n="[title]CONTACTS/LABEL_READ_ONLY">🔒</div>
|
||||||
<label for="tab-contact-locations"
|
|
||||||
role="tab"
|
|
||||||
aria-selected="false"
|
|
||||||
aria-controls="panel2"
|
|
||||||
tabindex="0"
|
|
||||||
data-i18n="CONTACTS/TAB_LOCATIONS"></label>
|
|
||||||
<div class="form-horizontal tab-content" role="tabpanel" aria-hidden="false">
|
|
||||||
<div data-bind="foreach: adr">
|
|
||||||
<div class="control-group">
|
|
||||||
<div data-bind="text: type"></div>
|
|
||||||
<div data-bind="text: street"></div>
|
|
||||||
<div data-bind="text: street_ext"></div>
|
|
||||||
<div data-bind="text: locality"></div>
|
|
||||||
<div data-bind="text: region"></div>
|
|
||||||
<div data-bind="text: postcode"></div>
|
|
||||||
<div data-bind="text: pobox"></div>
|
|
||||||
<div data-bind="text: country"></div>
|
|
||||||
<div data-bind="text: preferred"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
-->
|
-->
|
||||||
<input type="radio" name="contacttabs" id="tab-contact-business">
|
|
||||||
<label for="tab-contact-business"
|
|
||||||
role="tab"
|
|
||||||
aria-selected="false"
|
|
||||||
aria-controls="panel3"
|
|
||||||
tabindex="0"
|
|
||||||
data-i18n="CONTACTS/TAB_BUSINESS"></label>
|
|
||||||
<div class="form-horizontal tab-content" role="tabpanel" aria-hidden="false">
|
|
||||||
<div class="control-group">
|
|
||||||
<label data-i18n="CONTACTS/LABEL_ORGANIZATION"></label>
|
|
||||||
<span data-bind="text: org"></span>
|
|
||||||
<input type="text"
|
|
||||||
autocomplete="off" autocorrect="off" autocapitalize="off"
|
|
||||||
data-bind="textInput: org">
|
|
||||||
</div>
|
|
||||||
<div class="control-group">
|
|
||||||
<label data-i18n="CONTACTS/LABEL_DEPARTMENT"></label>
|
|
||||||
<span data-bind="text: department"></span>
|
|
||||||
<input type="text"
|
|
||||||
autocomplete="off" autocorrect="off" autocapitalize="off"
|
|
||||||
data-bind="textInput: department">
|
|
||||||
</div>
|
|
||||||
<div class="control-group">
|
|
||||||
<label data-i18n="CONTACTS/LABEL_TITLE"></label>
|
|
||||||
<span data-bind="text: title"></span>
|
|
||||||
<input type="text"
|
|
||||||
autocomplete="off" autocorrect="off" autocapitalize="off"
|
|
||||||
data-bind="textInput: title">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<input type="radio" name="contacttabs" id="tab-contact-crypto">
|
|
||||||
<label for="tab-contact-crypto"
|
|
||||||
role="tab"
|
|
||||||
aria-selected="false"
|
|
||||||
aria-controls="panel4"
|
|
||||||
tabindex="0"
|
|
||||||
data-i18n="CONTACTS/TAB_CRYPTO"></label>
|
|
||||||
<div class="form-horizontal tab-content" role="tabpanel" aria-hidden="false">
|
|
||||||
<div class="control-group">
|
|
||||||
<label data-i18n="OPENPGP/LABEL_SIGN"></label>
|
|
||||||
<select name="x-crypto[signpref]" data-bind="value: signpref">
|
|
||||||
<option value="Ask" data-i18n="CONTACTS/ASK"></option>
|
|
||||||
<option value="Never" data-i18n="CONTACTS/NEVER"></option>
|
|
||||||
<option value="Always" data-i18n="CONTACTS/ALWAYS"></option>
|
|
||||||
<option value="IfPossible" data-i18n="CONTACTS/ALWAYS_IF_POSSIBLE"></option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="control-group">
|
|
||||||
<label data-i18n="OPENPGP/LABEL_ENCRYPT"></label>
|
|
||||||
<select name="x-crypto[encryptpref]" data-bind="value: encryptpref">
|
|
||||||
<option value="Ask" data-i18n="CONTACTS/ASK"></option>
|
|
||||||
<option value="Never" data-i18n="CONTACTS/NEVER"></option>
|
|
||||||
<option value="Always" data-i18n="CONTACTS/ALWAYS"></option>
|
|
||||||
<option value="IfPossible" data-i18n="CONTACTS/ALWAYS_IF_POSSIBLE"></option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- /ko -->
|
<!-- /ko -->
|
||||||
</div>
|
</div>
|
||||||
</form>
|
|
||||||
<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">
|
|
||||||
<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" data-bind="visible: null == nickname()">
|
|
||||||
<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: addEmail">
|
|
||||||
<i class="fontastic">@</i>
|
|
||||||
<span data-i18n="GLOBAL/EMAIL"></span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li role="presentation">
|
|
||||||
<a href="#" data-bind="click: addTel">
|
|
||||||
<i class="fontastic">📞</i>
|
|
||||||
<span data-i18n="CONTACTS/ADD_MENU_PHONE"></span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li role="presentation">
|
|
||||||
<a href="#" data-bind="click: addUrl">
|
|
||||||
<i class="fontastic">🌍</i>
|
|
||||||
<span data-i18n="CONTACTS/ADD_MENU_URL"></span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li role="presentation" data-bind="visible: null == note()">
|
|
||||||
<a href="#" data-bind="click: addNote">
|
|
||||||
<i class="fontastic">🖉</i>
|
|
||||||
<span data-i18n="CONTACTS/ADD_MENU_NOTE"></span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<!--
|
|
||||||
<li class="dividerbar" role="presentation">
|
|
||||||
<a href="#" data-bind="click: addNewAddress">
|
|
||||||
<span data-i18n="CONTACTS/ADD_MENU_ADDRESS"></span>
|
|
||||||
</a>
|
|
||||||
</li>-->
|
|
||||||
</menu>
|
|
||||||
</div>
|
|
||||||
<!--
|
|
||||||
<div class="read-only-sign fontastic iconsize24" data-bind="visible: readOnly" data-i18n="[title]CONTACTS/LABEL_READ_ONLY">🔒</div>
|
|
||||||
-->
|
|
||||||
<!-- /ko -->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue