Skip to content

Commit 69cfdd4

Browse files
author
skjnldsv
committed
Single contact export button
Added addressbook export button Fixed header css and export button location + add empty div to replace empty space if no picture
1 parent 3e46471 commit 69cfdd4

File tree

4 files changed

+73
-39
lines changed

4 files changed

+73
-39
lines changed

‎css/public/style.css‎

Lines changed: 45 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -7,41 +7,42 @@
77
align-items: center;
88
}
99

10+
.contactdetails__header #details-contact-infos {
11+
width: 80%;
12+
margin: 2px 6px 0px;
13+
flex-grow: 1;
14+
}
1015
.contactdetails__header h2 {
11-
position: absolute;
12-
top: 15px;
13-
left: 100px;
14-
width: 75%;
16+
margin: 0;
1517
}
1618
.contactdetails__header #details-org-container {
17-
position: absolute;
1819
display: flex;
19-
top: 50px;
20-
left: 100px;
21-
width: 70%;
20+
flex-wrap: wrap;
2221
}
2322
.contactdetails__header .contactdetails__name,
2423
.contactdetails__header .contactdetails__org,
2524
.contactdetails__header .contactdetails__title {
26-
font-size: inherit !important;
27-
width: auto !important;
28-
color: #fff !important;
29-
background: transparent !important;
30-
border: none !important;
25+
font-size: inherit;
26+
color: #fff !important; /* override focus,active&hover */
27+
background: transparent;
28+
border: none;
3129
text-overflow: ellipsis;
3230
overflow: hidden;
3331
white-space: nowrap;
3432
max-width: 100%;
35-
min-width: 25%;
36-
margin: 3px 0;
33+
margin: 0;
34+
padding: 4px 5px;
3735
}
3836
.contactdetails__header .contactdetails__org,
3937
.contactdetails__header .contactdetails__title {
4038
max-width: 50%;
39+
min-width: 150px;
4140
}
4241
.contactdetails__header .contactdetails__name {
43-
max-width: 100%;
44-
width: 100% !important;
42+
width: 100%;
43+
}
44+
.contactdetails__header #details-actions {
45+
display: flex;
4546
}
4647
/* fix placeholder color */
4748
.contactdetails__header .contactdetails__name::-webkit-input-placeholder,
@@ -69,18 +70,18 @@
6970
opacity: .8;
7071
}
7172

72-
.contactdetails__header .icon-delete-white {
73-
position: absolute;
74-
right: 0;
73+
.contactdetails__header .icon-delete-white,
74+
.contactdetails__header #contact-export-link {
7575
padding: 15px;
76-
right: 15px;
77-
top: 30px;
7876
background-color: transparent;
7977
border: none;
8078
opacity: .5;
79+
margin: 3px;
8180
}
8281
.contactdetails__header .icon-delete-white:hover,
83-
.contactdetails__header .icon-delete-white:focus {
82+
.contactdetails__header .icon-delete-white:focus,
83+
.contactdetails__header #contact-export-link:hover,
84+
.contactdetails__header #contact-export-link:focus {
8485
opacity: .7
8586
}
8687

@@ -91,6 +92,25 @@
9192
background-color: transparent;
9293
}
9394

95+
.contactdetails__logo.contact__icon {
96+
background-color: transparent;
97+
height: 75px;
98+
width: 75px;
99+
font-size: 2.5em;
100+
line-height: 75px;
101+
margin-right: 0;
102+
}
103+
.contactdetails__logo.contact__icon > span {
104+
display: block;
105+
width: 100%;
106+
height: 100%;
107+
opacity: 0.5;
108+
cursor: pointer;
109+
}
110+
.contactdetails__logo.contact__icon:hover > span {
111+
opacity: 0.7;
112+
}
113+
94114
#check-all + label:before {
95115
position: absolute;
96116
top: 18px;
@@ -239,10 +259,8 @@ ul.addressBook-share-list li {
239259
margin-left: 15px;
240260
}
241261

242-
ul.addressBookList li .action .icon-public,
243-
ul.addressBookList li .action .icon-share,
244-
ul.addressBookList li .action .icon-delete {
245-
padding: 10px 18px;
262+
ul.addressBookList li .action > span {
263+
padding: 10px 14px;
246264
}
247265

248266
div.addressBookShares ul.dropdown-menu {

‎js/components/addressBook/addressBook_controller.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@ angular.module('contactsApp')
33
var ctrl = this;
44

55
ctrl.showUrl = false;
6+
/* globals oc_config */
7+
/* eslint camelcase: [2, {properties: "never"}] */
8+
ctrl.canExport = parseFloat(oc_config.version.substring(0, 3)) >= 9.1;
69

710
ctrl.toggleShowUrl = function() {
811
ctrl.showUrl = !ctrl.showUrl;

‎templates/addressBook.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
<span class="addressBookName">{{ctrl.addressBook.displayName}}</span>
22
<span class="utils">
3+
<span class="action" ng-show="ctrl.canExport">
4+
<span href="{{ctrl.addressBook.url}}?export"
5+
id="addressBooklist-icon download"
6+
title="Download"
7+
class="icon-download">
8+
</span>
9+
</span>
310
<span class="action">
411
<span
512
class="addressbooklist-icon icon-public"

‎templates/contactDetails.html‎

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,19 +9,25 @@ <h2>{{ctrl.t.noContacts}}</h2>
99
<div ng-if="ctrl.contact!==undefined">
1010
<header class="contactdetails__header" ng-style="{'background-color': (ctrl.contact.uid() | contactColor)}">
1111
<img ng-if="ctrl.photo!==undefined" class="contactdetails__logo avatar" data-ng-src="data:image/png;base64,{{ctrl.photo}}" />
12-
<h2>
13-
<input type="text" id="details-fullName" class="contactdetails__name" placeholder="{{ctrl.t.placeholderName}}" autocomplete="off"
14-
name="email" ng-model="ctrl.contact.fullName" ng-model-options="{ getterSetter: true, debounce: 500 }" ng-change="ctrl.updateContact()" value="" />
15-
</h2>
16-
<div id="details-org-container">
17-
<input type="text" id="details-org" class="contactdetails__org" placeholder="{{ctrl.t.placeholderOrg}}" autocomplete="off"
18-
name="email" ng-model="ctrl.contact.org" ng-model-options="{ getterSetter: true, debounce: 500 }" ng-change="ctrl.updateContact()" value=""
19-
inputresize size="{{ctrl.contact.org().length > 1 ? ctrl.contact.org().length : '1'}}" />
20-
<input type="text" id="details-title" class="contactdetails__title" placeholder="{{ctrl.t.placeholderTitle}}" autocomplete="off"
21-
name="email" ng-model="ctrl.contact.title" ng-model-options="{ getterSetter: true, debounce: 500 }" ng-change="ctrl.updateContact()" value=""
22-
inputresize size="{{ctrl.contact.title().length > 1 ? ctrl.contact.title().length : '1'}}" />
12+
<div ng-if="ctrl.photo===undefined" class="contactdetails__logo contact__icon avatar--missing"></div>
13+
<div id="details-contact-infos">
14+
<h2>
15+
<input type="text" id="details-fullName" class="contactdetails__name" placeholder="{{ctrl.t.placeholderName}}" autocomplete="off"
16+
name="email" ng-model="ctrl.contact.fullName" ng-model-options="{ getterSetter: true, debounce: 500 }" ng-change="ctrl.updateContact()" value="" />
17+
</h2>
18+
<div id="details-org-container">
19+
<input type="text" id="details-org" class="contactdetails__org" placeholder="{{ctrl.t.placeholderOrg}}" autocomplete="off"
20+
name="email" ng-model="ctrl.contact.org" ng-model-options="{ getterSetter: true, debounce: 500 }" ng-change="ctrl.updateContact()" value=""
21+
inputresize size="{{ctrl.contact.org().length > 1 ? ctrl.contact.org().length : '1'}}" />
22+
<input type="text" id="details-title" class="contactdetails__title" placeholder="{{ctrl.t.placeholderTitle}}" autocomplete="off"
23+
name="email" ng-model="ctrl.contact.title" ng-model-options="{ getterSetter: true, debounce: 500 }" ng-change="ctrl.updateContact()" value=""
24+
inputresize size="{{ctrl.contact.title().length > 1 ? ctrl.contact.title().length : '1'}}" />
25+
</div>
26+
</div>
27+
<div id="details-actions">
28+
<a href="{{ctrl.contact.data.url}}" id="contact-export-link" class="icon-download-white" title="Download"></a>
29+
<button ng-click="ctrl.deleteContact()" class="icon-delete-white" title="Delete"></button>
2330
</div>
24-
<button ng-click="ctrl.deleteContact()" class="icon-delete-white" title="Delete"></button>
2531
</header>
2632
<section>
2733
<div ng-repeat="prop in ctrl.contact.props | toArray | orderDetailItems:'$key'">

0 commit comments

Comments
 (0)