diff options
author | Jan-Christoph Borchardt <hey@jancborchardt.net> | 2016-02-18 22:10:56 +0100 |
---|---|---|
committer | skjnldsv <fremulon@protonmail.com> | 2016-04-03 12:32:21 +0200 |
commit | 4d85245bd4dd9bb2a6a6ac2277006c059fc7430f (patch) | |
tree | 12886ef90d676fa761a66ed3b1c65174b18ff70e /templates | |
parent | b20f0c5ab10dc256d024a6129fba5b322bfd4338 (diff) |
Add mobile style from Mail app, ref #36
- Maximise the field width and align delete icons
- Added back button
- Don't load first contact when mobile layout
- Hide the contact list when showing contact details
Diffstat (limited to 'templates')
-rw-r--r-- | templates/contact.html | 12 | ||||
-rw-r--r-- | templates/contactDetails.html | 67 | ||||
-rw-r--r-- | templates/contactList.html | 2 |
3 files changed, 41 insertions, 40 deletions
diff --git a/templates/contact.html b/templates/contact.html index c9d59e2f..cf7c9ced 100644 --- a/templates/contact.html +++ b/templates/contact.html @@ -1,9 +1,7 @@ <a class="app-content-list-item-link" ng-click="ctrl.openContact()"> -<img class="app-content-list-item-icon contact__icon" ng-show="ctrl.contact.photo()!==undefined" data-ng-src="data:image/png;base64,{{ctrl.contact.photo()}}" /> -<div class="app-content-list-item-icon contact__icon" ng-show="ctrl.contact.photo()===undefined" ng-style="{'background-color': (ctrl.contact.uid() | contactColor) }">{{ ctrl.contact.fullName() | firstCharacter }}</div> - -<div class="app-content-list-item-star icon-star" data-starred="false"></div> - -<div class="app-content-list-item-line-one" ng-class="{'no-line-two':!ctrl.contact.email()}">{{ctrl.contact.fullName()}}</div> -<div class="app-content-list-item-line-two">{{ctrl.contact.email()}}</div> + <img class="app-content-list-item-icon contact__icon" ng-show="ctrl.contact.photo()!==undefined" data-ng-src="data:image/png;base64,{{ctrl.contact.photo()}}" /> + <div class="app-content-list-item-icon contact__icon" ng-show="ctrl.contact.photo()===undefined" ng-style="{'background-color': (ctrl.contact.uid() | contactColor) }">{{ ctrl.contact.fullName() | firstCharacter }}</div> + <div class="app-content-list-item-star icon-star" data-starred="false"></div> + <div class="app-content-list-item-line-one" ng-class="{'no-line-two':!ctrl.contact.email()}">{{ctrl.contact.fullName()}}</div> + <div class="app-content-list-item-line-two">{{ctrl.contact.email()}}</div> </a> diff --git a/templates/contactDetails.html b/templates/contactDetails.html index 30867e00..94ee8787 100644 --- a/templates/contactDetails.html +++ b/templates/contactDetails.html @@ -1,35 +1,38 @@ -<div ng-if="ctrl.contact===undefined && !ctrl.loading"> - <div id="emptycontent" class=""> - <div class="icon-contacts-dark"></div> - <h2>{{ctrl.t.noContacts}}</h2> +<div class="contact-details-wrapper wrapper-show" ng-class="{'mobile-show':ctrl.show}"> + <div id="app-navigation-toggle-back" class="details-back icon-download" ng-click="ctrl.clearContact()"></div> + <div ng-if="ctrl.contact===undefined && !ctrl.loading"> + <div id="emptycontent" class=""> + <div class="icon-contacts-dark"></div> + <h2>{{ctrl.t.noContacts}}</h2> + </div> </div> -</div> -<div ng-if="ctrl.contact!==undefined"> -<header class="contactdetails__header" ng-style="{'background-color': (ctrl.contact.uid() | contactColor)}"> - <img ng-if="ctrl.photo!==undefined" class="contactdetails__logo avatar" data-ng-src="data:image/png;base64,{{ctrl.photo}}" /> - <h2> - <input type="text" id="details-fullName" class="contactdetails__name" placeholder="{{ctrl.t.placeholderName}}" autocomplete="off" - name="email" ng-model="ctrl.contact.fullName" ng-model-options="{ getterSetter: true, debounce: 500 }" ng-change="ctrl.updateContact()" value="" /> - </h2> - <div> - <input type="text" id="details-org" class="contactdetails__org" placeholder="{{ctrl.t.placeholderOrg}}" autocomplete="off" - name="email" ng-model="ctrl.contact.org" ng-model-options="{ getterSetter: true, debounce: 500 }" ng-change="ctrl.updateContact()" value="" /> - <input type="text" id="details-title" class="contactdetails__title" placeholder="{{ctrl.t.placeholderTitle}}" autocomplete="off" - name="email" ng-model="ctrl.contact.title" ng-model-options="{ getterSetter: true, debounce: 500 }" ng-change="ctrl.updateContact()" value="" /> - </div> - <button ng-click="ctrl.deleteContact()" class="icon-delete-white" title="Delete"></button> -</header> -<section> - <div ng-repeat="prop in ctrl.contact.props | toArray | orderDetailItems:'$key'" ng-class="prop.length > 1 ? '' : 'last-details'"> - <detailsItem ng-repeat="propData in prop" name="prop.$key" data="propData" model="ctrl" index="$index" ng-class="[ 'details-item-' + prop.$key ]"></detailsItem> - </div> - <div class="select-addressbook" ng-if="ctrl.addressBooks.length > 1"> - <select ng-model="ctrl.addressBook" ng-change="ctrl.changeAddressBook(ctrl.addressBook)" ng-options="book.displayName for book in ctrl.addressBooks"> - </select> + <div ng-if="ctrl.contact!==undefined"> + <header class="contactdetails__header" ng-style="{'background-color': (ctrl.contact.uid() | contactColor)}"> + <img ng-if="ctrl.photo!==undefined" class="contactdetails__logo avatar" data-ng-src="data:image/png;base64,{{ctrl.photo}}" /> + <h2> + <input type="text" id="details-fullName" class="contactdetails__name" placeholder="{{ctrl.t.placeholderName}}" autocomplete="off" + name="email" ng-model="ctrl.contact.fullName" ng-model-options="{ getterSetter: true, debounce: 500 }" ng-change="ctrl.updateContact()" value="" /> + </h2> + <div> + <input type="text" id="details-org" class="contactdetails__org" placeholder="{{ctrl.t.placeholderOrg}}" autocomplete="off" + name="email" ng-model="ctrl.contact.org" ng-model-options="{ getterSetter: true, debounce: 500 }" ng-change="ctrl.updateContact()" value="" /> + <input type="text" id="details-title" class="contactdetails__title" placeholder="{{ctrl.t.placeholderTitle}}" autocomplete="off" + name="email" ng-model="ctrl.contact.title" ng-model-options="{ getterSetter: true, debounce: 500 }" ng-change="ctrl.updateContact()" value="" /> + </div> + <button ng-click="ctrl.deleteContact()" class="icon-delete-white" title="Delete"></button> + </header> + <section> + <div ng-repeat="prop in ctrl.contact.props | toArray | orderDetailItems:'$key'"> + <detailsItem ng-repeat="propData in prop" name="prop.$key" data="propData" model="ctrl" index="$index" ng-class="[ 'details-item-' + prop.$key ]"></detailsItem> + </div> + <div class="select-addressbook" ng-if="ctrl.addressBooks.length > 1"> + <select ng-model="ctrl.addressBook" ng-change="ctrl.changeAddressBook(ctrl.addressBook)" ng-options="book.displayName for book in ctrl.addressBooks"> + </select> + </div> + <select class="add-field" ng-model="ctrl.field" ng-change="ctrl.addField(ctrl.field)"> + <option value=''>{{ctrl.t.selectField}}</option> + <option ng-repeat="field in ctrl.fieldDefinitions | fieldFilter: ctrl.contact | orderBy : 'name'" value="{{field.id}}">{{field.name}}</option> + </select> + </section> </div> - <select class="add-field" ng-model="ctrl.field" ng-change="ctrl.addField(ctrl.field)"> - <option value=''>{{ctrl.t.selectField}}</option> - <option ng-repeat="field in ctrl.fieldDefinitions | fieldFilter: ctrl.contact | orderBy : 'name'" value="{{field.id}}">{{field.name}}</option> - </select> -</section> </div> diff --git a/templates/contactList.html b/templates/contactList.html index d22a2283..602904b7 100644 --- a/templates/contactList.html +++ b/templates/contactList.html @@ -1,4 +1,4 @@ -<div style="height: 90%" ng-class="{loading: ctrl.loading}"> +<div style="height: 90%" class="contacts-list" ng-class="{loading: ctrl.loading, 'mobile-show': ctrl.show}"> <button ng-show="!ctrl.loading" class="app-content-list-button" type="button" name="button" ng-click="ctrl.createContact()">{{ctrl.t.addContact}}</button> <div class="app-content-list-item" ng-repeat="contact in ctrl.contactList = (ctrl.contacts | contactGroupFilter:ctrl.routeParams.gid | orderBy:'fullName()' | filter:query) track by contact.uid()" |