Skip to content

Fit contacts list to guidelines #438

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 5 commits into from
Jan 11, 2018
Merged

Fit contacts list to guidelines #438

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
891a511
Fit contacts list to guidelines
skjnldsv Nov 17, 2017
00300d1
Removed star
skjnldsv Nov 18, 2017
f62578a
Bring back the hamburger
skjnldsv Dec 11, 2017
90946d2
Fixed csslint
skjnldsv Dec 11, 2017
4d320f4
Fixed import screen
skjnldsv Dec 21, 2017
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
132 changes: 0 additions & 132 deletions css/_app-content-list.scss
View file
Open in desktop

This file was deleted.

21 changes: 21 additions & 0 deletions css/_contactlist.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,29 @@ contactlist .tooltip {
background-image: url('../img/group.svg');
}

/* Mobile width < 768px */
@media only screen and (max-width: 768px) {
.contacts-list:not(.mobile-show) {
display: none;
}

#app-navigation-toggle.showdetails {
transform: translate(-50px, 0);
}

#app-navigation-toggle-back {
position: fixed;
display: inline-block !important;
top: 45px;
left: 0;
width: 44px;
height: 44px;
z-index: 149;
background-color: rgba(255, 255, 255, .7);
cursor: pointer;
opacity: .6;
transform: rotate(90deg);
}

/* end of media query */
}
1 change: 0 additions & 1 deletion css/_settings.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -257,7 +257,6 @@ contactimport input[type='search']::-webkit-search-cancel-button {
display: flex;
justify-content: center;
align-items: start;
padding-top: 30vh;
background: $color-main-background;
z-index: 500;
}
Expand Down
1 change: 0 additions & 1 deletion css/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
@import "app-content-list";
@import "details";
@import "contactlist";
@import "navigation";
Expand Down
6 changes: 0 additions & 6 deletions js/components/contact/contact_controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,6 @@ angular.module('contactsApp')
errorMessage : t('contacts', 'This card is corrupted and has been fixed. Please check the data and trigger a save to make the changes permanent.'),
};

ctrl.openContact = function() {
$route.updateParams({
gid: $routeParams.gid,
uid: ctrl.contact.uid()});
};

ctrl.getName = function() {
// If lastName equals to firstName then none of them is set
if (ctrl.contact.lastName() === ctrl.contact.firstName()) {
Expand Down
13 changes: 5 additions & 8 deletions templates/contact.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,5 @@
<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="{{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.displayName() | firstCharacter }}</div>
<div class="app-content-list-item-star icon-star" data-starred="false"></div>
<div class="app-content-list-item-failed icon-error" tooltip-placement="auto left" ng-if="ctrl.contact.failedProps.length>0" uib-tooltip="{{ ctrl.t.errorMessage }}"></div>
<div class="app-content-list-item-line-one" ng-class="{'no-line-two':!ctrl.contact.email()}">{{ ctrl.getName() | newContact }}</div>
<div class="app-content-list-item-line-two">{{ctrl.contact.email()}}</div>
</a>
<img class="app-content-list-item-icon contact__icon" ng-show="ctrl.contact.photo()!==undefined" data-ng-src="{{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.displayName() | firstCharacter }}</div>
<div class="app-content-list-item-failed icon-error" tooltip-placement="auto left" ng-if="ctrl.contact.failedProps.length>0" uib-tooltip="{{ ctrl.t.errorMessage }}"></div>
<div class="app-content-list-item-line-one">{{ ctrl.getName() | newContact }}</div>
<div class="app-content-list-item-line-two" ng-if="ctrl.contact.email()">{{ctrl.contact.email()}}</div>
22 changes: 10 additions & 12 deletions templates/contactList.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,12 @@
<div class="contacts-list" ng-class="{loading: ctrl.loading, 'mobile-show': ctrl.show}">
<div class="app-content-list-item"
ng-repeat="contact in ctrl.filteredContacts = (ctrl.contactList | contactGroupFilter:ctrl.routeParams.gid | localeOrderBy:ctrl.sortBy | filter:query | limitTo:ctrl.limitTo) as filtered track by contact.uid()"
contact data="contact"
ng-click="setSelected(contact.uid())"
ng-class="{active: contact.uid() === ctrl.getSelectedId()}">
</div>
<div ng-show="!ctrl.filteredContacts.length && !ctrl.loading && ctrl.searchTerm !== ''">
<div id="emptycontent" class="emptycontent-search">
<div class="icon-search"></div>
<h2>{{ctrl.t.emptySearch}}</h2>
</div>
<a class="app-content-list-item"
ng-repeat="contact in ctrl.filteredContacts = (ctrl.contactList | contactGroupFilter:ctrl.routeParams.gid | localeOrderBy:ctrl.sortBy | filter:query | limitTo:ctrl.limitTo ) as filtered track by contact.uid()"
contact data="contact"
href="#/{{ctrl.routeParams.gid}}/{{contact.uid()}}"
ng-class="{active: contact.uid() === ctrl.getSelectedId()}">
</a>
<div ng-show="!ctrl.filteredContacts.length && !ctrl.loading && ctrl.searchTerm !== ''">
<div id="emptycontent" class="emptycontent-search">
<div class="icon-search"></div>
<h2>{{ctrl.t.emptySearch}}</h2>
</div>
</div>
14 changes: 6 additions & 8 deletions templates/importScreen.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
<div id="importscreen-wrapper" ng-show="ctrl.importing">
<div id="importscreen-content">
<span class="icon-upload"></span>
<h3 id="importscreen-title">{{ctrl.t.importingTo}} {{ctrl.selectedAddressBook}}</h3>
<progress id="importscreen-progress" max="100" value="{{ctrl.importPercent}}"></progress>
<span id="importscreen-user">{{ctrl.importedUser}}</span>
<span id="importscreen-percent">{{ctrl.importPercent}} %</span>
</div>
<div id="importscreen-content" class="emptycontent">
<span class="icon-upload"></span>
<h3 id="importscreen-title">{{ctrl.t.importingTo}} {{ctrl.selectedAddressBook}}</h3>
<progress id="importscreen-progress" max="100" value="{{ctrl.importPercent}}"></progress>
<span id="importscreen-user">{{ctrl.importedUser}}</span>
<span id="importscreen-percent">{{ctrl.importPercent}} %</span>
</div>
9 changes: 5 additions & 4 deletions templates/main.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,10 +47,11 @@
</div>

<div id="app-content">
<div class="app-content-list">
<contactlist></contactlist>
<div id="app-content-wrapper">
<div class="app-content-list" contactlist>
</div>
<div class="app-content-detail" ng-view></div>
<importscreen id="importscreen-wrapper" ng-show="ctrl.importing"></importscreen>
</div>
<div class="app-content-detail" ng-view></div>
<importscreen class="emptycontent"></importscreen>
</div>
</div>