Skip to content

Export contact and addressbook as vcard + header restructuration fix #349

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
skjnldsv merged 2 commits into from
Apr 20, 2016
Merged

Export contact and addressbook as vcard + header restructuration fix #349

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0275c39
Single contact export button
Apr 10, 2016
36aba55
Fix address book download
DeepDiver1975 Apr 18, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 51 additions & 28 deletions css/public/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,41 +7,43 @@
align-items: center;
}

.contactdetails__header #details-contact-infos {
width: 80%;
margin: 2px 6px 0px;
flex-grow: 1;
}
.contactdetails__header h2 {
position: absolute;
top: 15px;
left: 100px;
width: 75%;
margin: 0;
}
.contactdetails__header #details-org-container {
position: absolute;
display: flex;
top: 50px;
left: 100px;
width: 70%;
flex-wrap: wrap;
}
.contactdetails__header .contactdetails__name,
.contactdetails__header .contactdetails__org,
.contactdetails__header .contactdetails__title {
font-size: inherit !important;
width: auto !important;
color: #fff !important;
background: transparent !important;
border: none !important;
font-size: inherit;
color: #fff !important; /* override focus,active&hover */
background: transparent;
border: none;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
max-width: 100%;
min-width: 25%;
margin: 3px 0;
margin: 0;
padding: 4px 5px;
}
.contactdetails__header .contactdetails__org,
.contactdetails__header .contactdetails__title {
max-width: 50%;
min-width: 150px;
}
.contactdetails__header .contactdetails__name {
max-width: 100%;
width: 100% !important;
width: 100%;
}
.contactdetails__header #details-actions {
display: flex;
flex-shrink: 0;
}
/* fix placeholder color */
.contactdetails__header .contactdetails__name::-webkit-input-placeholder,
Expand Down Expand Up @@ -69,26 +71,45 @@
opacity: .8;
}

.contactdetails__header .icon-delete-white {
position: absolute;
right: 0;
.contactdetails__header .icon-delete-white,
.contactdetails__header #contact-export-link {
padding: 15px;
right: 15px;
top: 30px;
background-color: transparent;
border: none;
opacity: .5;
margin: 3px;
}
.contactdetails__header .icon-delete-white:hover,
.contactdetails__header .icon-delete-white:focus {
.contactdetails__header .icon-delete-white:focus,
.contactdetails__header #contact-export-link:hover,
.contactdetails__header #contact-export-link:focus {
opacity: .7
}

.contactdetails__logo {
.contactdetails__header .contactdetails__logo {
height: 75px;
width: 75px;
object-fit: cover;
background-color: transparent;
flex-shrink: 0;
margin: 0;
}
.contactdetails__header .contactdetails__logo.contact__icon {
background-color: transparent;
height: 75px;
width: 75px;
font-size: 2.5em;
line-height: 75px;
}
.contactdetails__header .contactdetails__logo.contact__icon > span {
display: block;
width: 100%;
height: 100%;
opacity: 0.5;
cursor: pointer;
}
.contactdetails__header .contactdetails__logo.contact__icon:hover > span {
opacity: 0.7;
}

#check-all + label:before {
Expand Down Expand Up @@ -239,10 +260,12 @@ ul.addressBook-share-list li {
margin-left: 15px;
}

ul.addressBookList li .action .icon-public,
ul.addressBookList li .action .icon-share,
ul.addressBookList li .action .icon-delete {
padding: 10px 18px;
ul.addressBookList li .action > span {
padding: 10px 14px;
}

ul.addressBookList li .action > a {
padding: 10px 14px;
}

div.addressBookShares ul.dropdown-menu {
Expand Down
4 changes: 4 additions & 0 deletions js/components/addressBook/addressBook_controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,10 @@ angular.module('contactsApp')
var ctrl = this;

ctrl.showUrl = false;
/* globals oc_config */
/* eslint-disable camelcase */
ctrl.canExport = oc_config.versionstring.split('.') >= [9, 0, 2];
/* eslint-enable camelcase */

ctrl.toggleShowUrl = function() {
ctrl.showUrl = !ctrl.showUrl;
Expand Down
7 changes: 7 additions & 0 deletions templates/addressBook.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
<span class="addressBookName">{{ctrl.addressBook.displayName}}</span>
<span class="utils">
<span class="action" ng-show="ctrl.canExport">
<a href="{{ctrl.addressBook.url}}?export"
id="addressBooklist-icon download"
title="Download"
class="icon-download">
</a>
</span>
<span class="action">
<span
class="addressbooklist-icon icon-public"
Expand Down
30 changes: 18 additions & 12 deletions templates/contactDetails.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,19 +9,25 @@ <h2>{{ctrl.t.noContacts}}</h2>
<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 id="details-org-container">
<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=""
inputresize size="{{ctrl.contact.org().length > 1 ? ctrl.contact.org().length : '1'}}" />
<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=""
inputresize size="{{ctrl.contact.title().length > 1 ? ctrl.contact.title().length : '1'}}" />
<div ng-if="ctrl.photo===undefined" class="contactdetails__logo contact__icon avatar--missing"></div>
<div id="details-contact-infos">
<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 id="details-org-container">
<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=""
inputresize size="{{ctrl.contact.org().length > 1 ? ctrl.contact.org().length : '1'}}" />
<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=""
inputresize size="{{ctrl.contact.title().length > 1 ? ctrl.contact.title().length : '1'}}" />
</div>
</div>
<div id="details-actions">
<a href="{{ctrl.contact.data.url}}" id="contact-export-link" class="icon-download-white" title="Download"></a>
<button ng-click="ctrl.deleteContact()" class="icon-delete-white" title="Delete"></button>
</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'">
Expand Down