From 5002c1c455fd3742698ee3efa14aae986c2a3ac5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Wed, 1 Aug 2018 14:37:47 +0200 Subject: Search, structure and design fixes for 14 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- appinfo/info.xml | 4 +- css/_contactlist.scss | 169 +-------------------- css/_details.scss | 6 - css/_navigation.scss | 22 --- css/style.scss | 1 - .../contactDetails/contactDetails_controller.js | 2 + js/contacts-inject-14.js | 1 + js/services/search_service.js | 27 ++-- templates/main.php | 46 +++--- templates/newContactButton.html | 6 +- 10 files changed, 43 insertions(+), 241 deletions(-) delete mode 100644 css/_navigation.scss create mode 100644 js/contacts-inject-14.js diff --git a/appinfo/info.xml b/appinfo/info.xml index ee348c49..5b6fd4fa 100644 --- a/appinfo/info.xml +++ b/appinfo/info.xml @@ -11,7 +11,7 @@ * 👥 **Sharing of Adressbooks!** You want to share your contacts with your friends or coworkers? No problem! * 🙈 **We’re not reinventing the wheel!** Based on the great and open SabreDAV library. - 2.1.5 + 2.1.6 AGPL Alexander Weidinger Jan-Christoph Borchardt @@ -29,7 +29,7 @@ https://github.com/nextcloud/contacts.git https://raw.githubusercontent.com/nextcloud/screenshots/master/apps/Contacts/contacts.png - + OCA\Contacts\ContactsMenu\Providers\DetailsProvider diff --git a/css/_contactlist.scss b/css/_contactlist.scss index 42159e0a..45070882 100644 --- a/css/_contactlist.scss +++ b/css/_contactlist.scss @@ -58,7 +58,7 @@ contactlist .tooltip { #app-navigation-toggle-back { position: fixed; display: inline-block !important; - top: 45px; + top: $header-height; left: 0; width: 44px; height: 44px; @@ -72,174 +72,9 @@ contactlist .tooltip { /* end of media query */ } -/* STABLE12 FIXES. TO BE DROPPED FOR MIN VERSION 13 */ -#app-content-wrapper { - display: flex; - position: relative; - align-items: start; - height: 100%; - width: 100%; - .app-content-list, - .app-content-detail { - min-height: 100%; - max-height: 100%; - overflow-x: hidden; - overflow-y: auto; - } -} - -.app-content-list { - border-right: 1px solid nc-darken($color-main-background, 8%); - display: flex; - flex-direction: column; - transition: transform 250ms ease-in-out; - min-width: 250px; - max-width: 350px; - flex: 2 2 300px; - - /* Default item */ - .app-content-list-item { - position: relative; - height: 68px; - border-top: 1px solid nc-darken($color-main-background, 8%); - cursor: pointer; - padding: 10px 7px; - display: flex; - flex-wrap: wrap; - align-items: center; - flex: 0 0 auto; - - /* Icon fixes */ - &, - > .app-content-list-item-menu { - > [class^='icon-'], - > [class*=' icon-'] { - order: 4; - width: 24px; - height: 24px; - margin: -10px; - padding: 22px; - opacity: .3; - cursor: pointer; - &:hover, &:focus { - opacity: .7; - } - &[class^='icon-star'], - &[class*=' icon-star'] { - opacity: .7; - &:hover, &:focus { - opacity: 1; - } - } - &.icon-starred { - opacity: 1; - } - } - } - - &:hover, &:focus, - &.active { - background-color: nc-darken($color-main-background, 6%); - } - - .app-content-list-item-checkbox.checkbox + label, - .app-content-list-item-star { - position: absolute; - height: 40px; - width: 40px; - display: flex; - z-index: 50; - + .app-content-list-item-icon { - opacity: .7; - } - } - - .app-content-list-item-checkbox.checkbox + label { - top: 14px; - left: 7px; - &::before { - margin: 0; - } - /* Hide the star, priority to the checkbox */ - ~ .app-content-list-item-star { - display: none; - } - } - - .app-content-list-item-star { - top: 10px; - left: 32px; - background-size: 16px; - height: 20px; - width: 20px; - margin: 0; - padding: 0; - } - - .app-content-list-item-icon { - position: absolute; - display: inline-block; - height: 40px; - width: 40px; - line-height: 40px; - border-radius: 50%; - vertical-align: middle; - margin-right: 10px; - color: #fff; - text-align: center; - font-size: 1.5em; - text-transform: capitalize; - object-fit: cover; - user-select: none; - cursor: pointer; - } - - .app-content-list-item-line-one, - .app-content-list-item-line-two { - display: block; - padding-left: 50px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - order: 1; - flex: 1 1 0; - padding-right: 10px; - cursor: pointer; - } - - .app-content-list-item-line-two { - opacity: .5; - order: 3; - flex: 1 0 calc(100% - 24px); - } - - .app-content-list-item-details { - order: 2; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 100px; - opacity: .5; - font-size: 80%; - user-select: none; - } - - .app-content-list-item-menu { - order: 4; - position: relative; - .popovermenu { - margin: 0; - right: -5px; - } - } - } -} /* App content */ -.app-content-detail { - /* grow full width */ - flex-grow: 1; - +.app-content-details { #app-navigation-toggle-back { display: none; } diff --git a/css/_details.scss b/css/_details.scss index 777ea4a9..645802df 100644 --- a/css/_details.scss +++ b/css/_details.scss @@ -1,9 +1,3 @@ -.contact-details-wrapper { - position: relative; - background: $color-main-background; - min-height: 100%; -} - .wrapper-show { z-index: 201; } diff --git a/css/_navigation.scss b/css/_navigation.scss deleted file mode 100644 index 4b95ba95..00000000 --- a/css/_navigation.scss +++ /dev/null @@ -1,22 +0,0 @@ -#app-navigation { - position: relative; -} - -#app-navigation > ul { - height: calc(100% - 68px); -} - -#app-navigation .app-navigation-entry-utils .app-navigation-entry-utils-counter { - padding: 0 12px 0 0; -} - -/* Contacts List */ -#new-contact-button { - margin: 14px auto; /* to have the same height than a contact */ - width: calc(100% - 20px) !important; - text-align: left; - background-position: 10px center; - padding: 10px; - padding-left: 34px; - display: block; -} diff --git a/css/style.scss b/css/style.scss index 0b0cb144..361a1824 100644 --- a/css/style.scss +++ b/css/style.scss @@ -1,5 +1,4 @@ @import 'details'; @import 'contactlist'; -@import 'navigation'; @import 'settings'; @import 'animations'; diff --git a/js/components/contactDetails/contactDetails_controller.js b/js/components/contactDetails/contactDetails_controller.js index 7b273992..a5b1fdd0 100644 --- a/js/components/contactDetails/contactDetails_controller.js +++ b/js/components/contactDetails/contactDetails_controller.js @@ -56,6 +56,7 @@ angular.module('contactsApp') if (typeof uid === 'undefined') { ctrl.show = false; $('#app-navigation-toggle').removeClass('showdetails'); + $('.app-content-list').removeClass('showdetails'); return; } ctrl.loading = true; @@ -68,6 +69,7 @@ angular.module('contactsApp') ctrl.show = true; ctrl.loading = false; $('#app-navigation-toggle').addClass('showdetails'); + $('.app-content-list').addClass('showdetails'); ctrl.addressBook = _.find(ctrl.addressBooks, function(book) { return book.displayName === ctrl.contact.addressBookId; diff --git a/js/contacts-inject-14.js b/js/contacts-inject-14.js new file mode 100644 index 00000000..7d0e6951 --- /dev/null +++ b/js/contacts-inject-14.js @@ -0,0 +1 @@ +$('#content.app-contacts').attr('ng-app', 'contactsApp'); \ No newline at end of file diff --git a/js/services/search_service.js b/js/services/search_service.js index f12dd8a1..a7e6b669 100644 --- a/js/services/search_service.js +++ b/js/services/search_service.js @@ -1,5 +1,4 @@ -angular.module('contactsApp') -.service('SearchService', function() { +angular.module('contactsApp').service('SearchService', function() { var searchTerm = ''; var observerCallbacks = []; @@ -10,8 +9,8 @@ angular.module('contactsApp') var notifyObservers = function(eventName) { var ev = { - event:eventName, - searchTerm:searchTerm + event: eventName, + searchTerm: searchTerm }; angular.forEach(observerCallbacks, function(callback) { callback(ev); @@ -33,25 +32,19 @@ angular.module('contactsApp') }; this.cleanSearch = function() { - if (!_.isUndefined($('.searchbox'))) { - $('.searchbox')[0].reset(); - } searchTerm = ''; + notifyObservers('changeSearch'); + }; + + this.search = function(search) { + searchTerm = search; + notifyObservers('submitSearch'); }; if (!_.isUndefined(OC.Plugins)) { OC.Plugins.register('OCA.Search', SearchProxy); if (!_.isUndefined(OCA.Search)) { - OC.Search = new OCA.Search($('#searchbox'), $('#searchresults')); - $('#searchbox').show(); + OC.Search = new OCA.Search(this.search, this.cleanSearch); } } - - if (!_.isUndefined($('.searchbox'))) { - $('.searchbox')[0].addEventListener('keypress', function(e) { - if(e.keyCode === 13) { - notifyObservers('submitSearch'); - } - }); - } }); diff --git a/templates/main.php b/templates/main.php index c00cdcf9..a0a242a4 100644 --- a/templates/main.php +++ b/templates/main.php @@ -9,6 +9,7 @@ script('contacts', 'vendor/ui-select/select'); script('contacts', 'vendor/angular-click-outside/clickoutside.directive'); script('contacts', 'vendor/ngclipboard/ngclipboard.min'); +script('contacts', 'contacts-inject-14'); // DAV libraries script('contacts', 'dav/dav'); @@ -25,33 +26,30 @@ script('contacts', 'vendor/jquery-timepicker/jquery.timepicker'); style('contacts', 'style'); style('contacts', 'vendor/ui-select/select.min'); ?> - -
-
-
- -
    -
    -
    - -
    -
    - - - -
    +
    +
    + +
      +
      +
      + +
      +
      + + +
      +
      -
      -
      -
      -
      -
      - +
      +
      +
      +
      +
      diff --git a/templates/newContactButton.html b/templates/newContactButton.html index 9ec3dbae..14b16745 100644 --- a/templates/newContactButton.html +++ b/templates/newContactButton.html @@ -1,2 +1,4 @@ - +
      + +
      \ No newline at end of file -- cgit v1.2.3