MOBILE-2131 data: Apply UX changes

Author: crazyserver

www/addons/mod/data/controllers/index.js

@@ -395,6 +395,11 @@ angular.module('mm.addons.mod_data')
         $scope.searchEntries(0);
     };
 
+    // Switches between advanced to normal search
+    $scope.switchAdvanced = function(enable) {
+        $scope.search.searchingAdvanced = enable;
+    };
+
     // Opens add entries form
     $scope.gotoAddEntries = function() {
         var stateParams = {

www/addons/mod/data/scss/styles.scss

@@ -19,6 +19,7 @@
   td {
     padding-left: 2px;
     padding-right: 2px;
+    vertical-align: top;
   }
 }
 
@@ -27,6 +28,9 @@
   table {
     width: 100%;
   }
+  td {
+    vertical-align: top;
+  }
 
   textarea,
   input[type="text"],
@@ -66,6 +70,22 @@
     padding: 16px 0 16px 16px;
   }
 
+  mm-attachments + .item-stacked-label {
+    border-top: 0px;
+    padding: 0;
+    margin-right: 1px;
+
+    ion-label {
+      margin: 0;
+      padding-left: 16px;
+    }
+
+    input {
+      border: 0;
+      margin: 0;
+    }
+  }
+
   mm-attachments .item {
     width: 100%;
     margin: -1px;
@@ -76,10 +96,14 @@
     margin-right: 1px;
   }
 
-  .item-select select {
+  .item-input.item-select {
+    margin-bottom: -6px;
+
+    select {
       width: 100%;
       left: 0;
       max-width: none;
+    }
   }
 
   .item-input.mm-latlong {
@@ -93,4 +117,8 @@
       border: 0;
     }
   }
+
+  .mm-item-has-rich-text-editor {
+    margin-right: 1px;
+  }
 }

www/addons/mod/data/templates/search-modal.html

@@ -5,6 +5,10 @@ <h1 class="title">{{ 'mma.mod_data.search' | translate}}</h1>
         <button class="button button-icon ion-search" ng-click="searchEntries(0)"></button>
     </ion-header-bar>
     <ion-content>
+        <div class="tabs tabs-striped tabs-free mm-tabs-color">
+            <a class="tab-item" ng-class="{'active': !search.searchingAdvanced}" ng-click="switchAdvanced(false)">{{ 'mma.mod_data.search' | translate}}</a>
+            <a class="tab-item" ng-class="{'active': search.searchingAdvanced}" ng-click="switchAdvanced(true)">{{ 'mma.mod_data.advancedsearch' | translate }}</a>
+        </div>
         <div class="list">
             <label class="item item-input" ng-if="!search.searchingAdvanced">
                 <input type="text" placeholder="{{ 'mma.mod_data.search' | translate}}" ng-model="search.text">
@@ -28,9 +32,6 @@ <h1 class="title">{{ 'mma.mod_data.search' | translate}}</h1>
                 <ion-radio ng-model="search.sortDirection" value="ASC">{{ 'mma.mod_data.ascending' | translate }}</ion-radio>
                 <ion-radio ng-model="search.sortDirection" value="DESC">{{ 'mma.mod_data.descending' | translate }}</ion-radio>
             </ion-list>
-            <div ng-if="advancedSearch" class="item item-text-wrap">
-                <ion-toggle ng-model="search.searchingAdvanced" class="item-borderless">{{ 'mma.mod_data.advancedsearch' | translate }}</ion-toggle>
-            </div>
             <form id="mma-mod_data-advanced-search-form" class="padding" ng-if="advancedSearch && search.searchingAdvanced">
                 <mm-format-text component="{{component}}" component-id="{{data.cmid}}" watch="true">
                     {{ advancedSearch }}

www/core/scss/styles.scss

@@ -979,6 +979,23 @@ mm-timer {
   background: transparent;
 }
 
+mm-multiple-select {
+  cursor: pointer;
+
+  .item-stacked-label {
+    ion-label.input-label, p {
+      padding-right: 30px;
+      white-space: normal;
+    }
+  }
+  .icon.ion-android-arrow-dropdown {
+    font-size: 21px;
+    color: #999999;
+    right: 5px;
+  }
+
+}
+
 .button.mm-button-icon-small {
   padding: 0 3px;
   min-height: $mm-button-icon-small-height;