from angular-material to pure ionic

7 years ago · 8c234cb6f4
13 changed files with 570 additions and 79 deletions
--- a/bower.json
+++ b/bower.json
@ -5,7 +5,6 @@
    "ionic": "driftyco/ionic-bower#1.3.1"
  },
  "dependencies": {
    "angular-material": "^1.1.1",
    "ui-leaflet": "^2.0.0",
    "ngCordova": "0.1.27-alpha"
  }
--- a/www/css/colors.css
+++ b/www/css/colors.css
@ -0,0 +1,497 @@
 /* red */
 .c_red50{
    background: #FFEBEE;
    color: #000000;
 }
 .c_red100{
    background: #FFCDD2;
    color: #000000;
 }
 .c_red200{
    background: #EF9A9A;
    color: #000000;
 }
 .c_red300{
    background: #E57373;
    color: #ffffff!important;
 }
 .c_red400{
    background: #EF5350;
    color: #ffffff!important;
 }
 .c_red500{
    background: #F44336;
    color: #ffffff!important;
 }
 .c_red600{
    background: #E53935;
    color: #ffffff!important;
 }
 .c_red700{
    background: #D32F2F;
    color: #ffffff!important;
 }
 .c_red800{
    background: #C62828;
    color: #ffffff!important;
 }
 .c_red900{
    background: #B71C1C;
    color: #ffffff!important;
 }

 .ctext_red400{
    color: #EF5350;
 }
 .ctext_red500{
    color: #F44336;
 }
 .ctext_red600{
    color: #E53935;
 }

 /* pink */
 .c_pink50{
    background: #FCE4EC;
    color: #000000;
 }
 .c_pink100{
    background: #F8BBD0;
    color: #000000;
 }
 .c_pink200{
    background: #F48FB1;
    color: #000000;
 }
 .c_pink300{
    background: #F06292;
    color: #ffffff;
 }
 .c_pink400{
    background: #EC407A;
    color: #ffffff;
 }
 .c_pink500{
    background: #E91E63;
    color: #ffffff;
 }
 .c_pink600{
    background: #D81B60;
    color: #ffffff;
 }
 .c_pink700{
    background: #C2185B;
    color: #ffffff;
 }
 .c_pink800{
    background: #AD1457;
    color: #ffffff;
 }
 .c_pink900{
    background: #880E4F;
    color: #ffffff;
 }

 /* deepPurple */
 .c_deepPurple50{
    background: #EDE7F6;
    color: #000000;
 }
 .c_deepPurple100{
    background: #D1C4E9;
    color: #000000;
 }
 .c_deepPurple200{
    background: #B39DDB;
    color: #000000;
 }
 .c_deepPurple300{
    background: #9575CD;
    color: #ffffff;
 }
 .c_deepPurple400{
    background: #7E57C2;
    color: #ffffff;
 }
 .c_deepPurple500{
    background: #673AB7;
    color: #ffffff;
 }
 .c_deepPurple600{
    background: #5E35B1;
    color: #ffffff;
 }
 .c_deepPurple700{
    background: #512DA8;
    color: #ffffff;
 }
 .c_deepPurple800{
    background: #4527A0;
    color: #ffffff;
 }
 .c_deepPurple900{
    background: #311B92;
    color: #ffffff;
 }


 /* indigo */
 .c_indigo50{
    background:#E8EAF6;
    color: #000000;
 }
 .c_indigo100{
    background:#C5CAE9;
    color: #000000;
 }
 .c_indigo200{
    background:#9FA8DA;
    color: #000000;
 }
 .c_indigo300{
    background:#7986CB;
    color: #ffffff!important;
 }
 .c_indigo400{
    background:#5C6BC0;
    color: #ffffff!important;
 }
 .c_indigo500{
    background:#3F51B5;
    color: #ffffff;
 }
 .c_indigo600{
    background:#3949AB;
    color: #ffffff;
 }
 .c_indigo700{
    background:#303F9F;
    color: #ffffff;
 }
 .c_indigo800{
    background:#283593;
    color: #ffffff;
 }
 .c_indigo900{
    background:#1A237E;
    color: #ffffff;
 }

 .ctext_indigo500{
    color: #3F51B5!important;
 }

 /* blue */
 .c_blue50{
    background: #E3F2FD;
    color: #000000;
 }
 .c_blue100{
    background: #BBDEFB;
    color: #000000;
 }
 .c_blue200{
    background: #90CAF9;
    color: #000000;
 }
 .c_blue300{
    background: #64B5F6;
    color: #ffffff;
 }
 .c_blue400{
    background: #42A5F5;
    color: #ffffff;
 }
 .c_blue500{
    background: #2196F3;
    color: #ffffff;
 }
 .c_blue600{
    background: #1E88E5;
    color: #ffffff;
 }
 .c_blue700{
    background: #1976D2;
    color: #ffffff;
 }
 .c_blue800{
    background: #1565C0;
    color: #ffffff;
 }
 .c_blue900{
    background: #0D47A1;
    color: #ffffff;
 }


 /* cyan */
 .c_cyan50{
    background: #E0F7FA;
    color: #000000;
 }
 .c_cyan100{
    background: #B2EBF2;
    color: #000000;
 }
 .c_cyan200{
    background: #80DEEA;
    color: #000000;
 }
 .c_cyan300{
    background: #4DD0E1;
    color: #ffffff;
 }
 .c_cyan400{
    background: #26C6DA;
    color: #ffffff;
 }
 .c_cyan500{
    background: #00BCD4;
    color: #ffffff;
 }
 .c_cyan600{
    background: #00ACC1;
    color: #ffffff;
 }
 .c_cyan700{
    background: #0097A7;
    color: #ffffff;
 }
 .c_cyan800{
    background: #00838F;
    color: #ffffff;
 }
 .c_cyan900{
    background: #006064;
    color: #ffffff;
 }

 /* green */
 .c_green50{
    background: #E8F5E9;
    color: #000000;
 }
 .c_green100{
    background: #C8E6C9;
    color: #000000;
 }
 .c_green200{
    background: #A5D6A7;
    color: #000000;
 }
 .c_green300{
    background: #81C784;
    color: #ffffff;
 }
 .c_green400{
    background: #66BB6A;
    color: #ffffff;
 }
 .c_green500{
    background: #4CAF50;
    color: #ffffff;
 }
 .c_green600{
    background: #43A047;
    color: #ffffff;
 }
 .c_green700{
    background: #388E3C;
    color: #ffffff;
 }
 .c_green800{
    background: #2E7D32;
    color: #ffffff;
 }
 .c_green900{
    background: #1B5E20;
    color: #ffffff;
 }

 /* yellow */
 .c_yellow50{
    background: #FFFDE7;
    color: #000000;
 }
 .c_yellow100{
    background: #FFF9C4;
    color: #000000;
 }
 .c_yellow200{
    background: #FFF59D;
    color: #000000;
 }
 .c_yellow300{
    background: #FFF176;
    color: #ffffff;
 }
 .c_yellow400{
    background: #FFEE58;
    color: #ffffff;
 }
 .c_yellow500{
    background: #FFEB3B;
    color: #ffffff;
 }
 .c_yellow600{
    background: #FDD835;
    color: #ffffff;
 }
 .c_yellow700{
    background: #FBC02D;
    color: #ffffff;
 }
 .c_yellow800{
    background: #F9A825;
    color: #ffffff;
 }
 .c_yellow900{
    background: #F57F17;
    color: #ffffff;
 }

 /* orange */
 .c_orange50{
    background: #FFF3E0;
    color: #000000;
 }
 .c_orange100{
    background: #FFE0B2;
    color: #000000;
 }
 .c_orange200{
    background: #FFCC80;
    color: #000000;
 }
 .c_orange300{
    background: #FFB74D;
    color: #ffffff;
 }
 .c_orange400{
    background: #FFA726;
    color: #ffffff;
 }
 .c_orange500{
    background: #FF9800;
    color: #ffffff;
 }
 .c_orange600{
    background: #FB8C00;
    color: #ffffff;
 }
 .c_orange700{
    background: #F57C00;
    color: #ffffff;
 }
 .c_orange800{
    background: #EF6C00;
    color: #ffffff;
 }
 .c_orange900{
    background: #E65100;
    color: #ffffff;
 }

 /* grey */
 .c_grey50{
    background: #FAFAFA;
    color: #000000;
 }
 .c_grey100{
    background: #F5F5F5;
    color: #000000;
 }
 .c_grey200{
    background: #EEEEEE;
    color: #000000;
 }
 .c_grey300{
    background: #E0E0E0;
    color: #ffffff;
 }
 .c_grey400{
    background: #BDBDBD;
    color: #ffffff;
 }
 .c_grey500{
    background: #9E9E9E;
    color: #ffffff;
 }
 .c_grey600{
    background: #757575;
    color: #ffffff;
 }
 .c_grey700{
    background: #616161;
    color: #ffffff;
 }
 .c_grey800{
    background: #424242;
    color: #ffffff;
 }
 .c_grey900{
    background: #212121;
    color: #ffffff;
 }



 /* blue grey */
 .c_blueGrey50{
    background: #ECEFF1;
    color: #000000;
 }
 .c_blueGrey100{
    background: #CFD8DC;
    color: #000000;
 }
 .c_blueGrey200{
    background: #B0BEC5;
    color: #000000;
 }
 .c_blueGrey300{
    background: #90A4AE;
    color: #ffffff;
 }
 .c_blueGrey400{
    background: #78909C;
    color: #ffffff;
 }
 .c_blueGrey500{
    background: #607D8B;
    color: #ffffff;
 }
 .c_blueGrey600{
    background: #546E7A;
    color: #ffffff;
 }
 .c_blueGrey700{
    background: #455A64;
    color: #ffffff;
 }
 .c_blueGrey800{
    background: #37474F;
    color: #ffffff;
 }
 .c_blueGrey900{
    background: #263238;
    color: #ffffff;
 }

 .c_blueGradient1{
    background: #2d4a56;
    background: -moz-linear-gradient(left, #2d4a56 0%, #1c2b36 100%);
    background: -webkit-linear-gradient(left, #2d4a56 0%,#1c2b36 100%);
    background: linear-gradient(to right, #2d4a56 0%,#1c2b36 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2d4a56', endColorstr='#1c2b36',GradientType=1 );

    color: rgba(255,255,255,0.9)!important;
 }
 .c_blue2{
    background: rgb(28,43,54)!important;
    color: rgba(255,255,255,0.8)!important;
 }

 .cf_green2{
    color: rgb(32,158,145)!important;
 }
--- a/www/index.html
+++ b/www/index.html
@ -7,18 +7,12 @@

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/colors.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- material design css framework -->
    <!-- angular-material -->
    <link rel="stylesheet" href="lib/angular-material/angular-material.css">
    <script src="lib/angular/angular.js"></script>
    <script src="lib/angular-aria/angular-aria.js"></script>
    <script src="lib/angular-animate/angular-animate.js"></script>
    <script src="lib/angular-material/angular-material.js"></script>

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>
--- a/www/js/app.js
+++ b/www/js/app.js
@ -6,14 +6,11 @@
 // 'starter.controllers' is found in controllers.js


 //var urlapi = "http://localhost:3000/api/";
 //var urlapi="https://collectivecar.paas.primustech.io/api/";
 //var urlapi="http://147.83.7.158:3000/api/";
 var urlapi = "http://46.105.30.116:3000/api/";
 var urlapi = "http://localhost:3000/api/";
 //var urlapi = "http://51.255.193.106:3000/api/";

 angular.module('starter', [
    'ionic',
    'ngMaterial',
    'ngCordova',
    'pascalprecht.translate',
    'app.login',
--- a/www/js/notifications.js
+++ b/www/js/notifications.js
@ -7,6 +7,10 @@ angular.module('app.notifications', ['pascalprecht.translate'])
        $http.get(urlapi + 'notifications')
        .then(function(data){
            console.log(data); // for browser console
            $scope.storageuser = JSON.parse(localStorage.getItem("cim_app_userdata"));
            $scope.storageuser.notifications = data.data;
            localStorage.setItem("cim_app_userdata", JSON.stringify($scope.storageuser));

            $scope.notifications = data.data; // for UI
            $scope.$broadcast('scroll.refreshComplete');//refresher stop

--- a/www/js/search.js
+++ b/www/js/search.js
@ -23,7 +23,7 @@ angular.module('app.search', ['pascalprecht.translate'])
        }, function(data){
            console.log('data error');
            $scope.$broadcast('scroll.refreshComplete');//refresher stop
            $ionicLoading.show({ template: 'Error connecting server', noBackdrop: true, duration: 2000 });
            $ionicLoading.show({ template: 'Search error, need text to search', noBackdrop: true, duration: 2000 });

        });
    };
--- a/www/templates/editUser.html
+++ b/www/templates/editUser.html
@ -18,9 +18,9 @@
        </p>

        <p ng-show="storageuser._id==user._id">
            <md-button class="o_purple300" ng-click="update()">
            <a class="button o_purple300" ng-click="update()">
                {{'Save_changes' | translate}}
            </md-button>
            </a>
        </p>
    </div>
    <div class="item">
--- a/www/templates/offerCar.html
+++ b/www/templates/offerCar.html
@ -1,33 +1,33 @@
 <ion-view view-title="{{'Offer_Car' | translate}}">
  <ion-content class="has-footer">
      <div class="padding">
          <md-input-container class="md-block" flex-gt-sm>
            <label>{{'Title' | translate}}</label>
            <input ng-model="newtravel.title">
          </md-input-container>
          <label class="item item-input">
            <span class="input-label">{{'Title' | translate}}</span>
            <input type="text" ng-model="newtravel.title">
          </label>
          <div layout="row">
              <md-input-container>
                <label>{{'From' | translate}}</label>
                <input ng-model="newtravel.from.name">
              </md-input-container>
              <md-input-container>
                <label>{{'To' | translate}}</label>
                <input ng-model="newtravel.to.name">
              </md-input-container>
              <label class="item item-input">
                <span class="input-label">{{'From' | translate}}</span>
                <input type="text" ng-model="newtravel.from.name">
              </label>
              <label class="item item-input">
                <span class="input-label">{{'To' | translate}}</span>
                <input type="text" ng-model="newtravel.to.name">
              </label>
          </div>
      </div><!-- end of padding -->
      <md-button ng-click="getGeo()" ng-show="newtravel.from.name && newtravel.to.name"
      class="o_purple300">{{'Get_positions' | translate}}</md-button>
      <a ng-click="getGeo()" ng-show="newtravel.from.name && newtravel.to.name"
      class="button o_purple300">{{'Get_positions' | translate}}</a>

      <leaflet ng-show="markers[0]"
      width="100%" height="40%" markers="markers" center="center"
      tiles="tiles" id="map-simple-map"></leaflet>

      <div class="padding" ng-show="markers[0]">
          <md-input-container class="md-block" flex-gt-sm>
            <label>{{'n_Seats' | translate}}</label>
          <label class="item item-input">
            <span class="input-label">{{'n_Seats' | translate}}</span>
            <input ng-model="newtravel.seats" type="number">
          </md-input-container>
          </label>

          <label class="item-input">
              <span class="input-label">{{'Date' | translate}}</span>
@ -44,14 +44,14 @@
          <ion-toggle ng-model="newtravel.collectivized" toggle-class="toggle-calm">
              {{'Collectivized_car' | translate}}
          </ion-toggle>
          <md-input-container class="md-block" flex-gt-sm>
            <label>{{'Description' | translate}}</label>
            <input ng-model="newtravel.description">
          </md-input-container>
          <label class="item item-input">
            <span class="input-label">{{'Description' | translate}}</span>
            <input type="text" ng-model="newtravel.description">
          </label>
          <p class="padding">
            <md-button ng-click="createTravel()" class="o_purple400 o_floatRight">
            <a ng-click="createTravel()" class="button o_purple400 o_floatRight">
               {{'Create_travel' | translate}}
           </md-button>
           </a>
          </p>
      </div><!-- end of padding -->
  </ion-content>
--- a/www/templates/search.html
+++ b/www/templates/search.html
@ -4,7 +4,7 @@
        <div class="item item-input">
            <i class="icon ion-search placeholder-icon"></i>
            <input type="search" placeholder="{{'search' | translate}}..." ng-model="search.word">
            <md-button class="o_purple300" ng-click="doSearch()"><i class="icon ion-search"></i></md-button>
            <a class="button button-small o_purple300" ng-click="doSearch()"><i class="icon ion-search"></i></a>
        </div>
        <div class="item item-divider o_purple300" ng-show="travels[0]">
            {{'Travels' | translate}}
--- a/www/templates/signup.html
+++ b/www/templates/signup.html
@ -3,34 +3,34 @@
    <h1 class="title">{{'Signup' | translate }}</h1>
  </ion-header-bar>
  <ion-content>
      <div class="padding">
          <md-input-container class="md-block" flex-gt-sm>
            <label>{{'Username' | translate}}</label>
            <input ng-model="signupData.username">
          </md-input-container>
          <md-input-container class="md-block" flex-gt-sm>
            <label>{{'Password' | translate}}</label>
      <div class="list">
          <label class="item item-input">
            <span class="input-label">{{'Username' | translate}}</span>
            <input type="text" ng-model="signupData.username">
          </label>
          <label class="item item-input">
            <span class="input-label">{{'Password' | translate}}</span>
            <input type="password" ng-model="signupData.password">
          </md-input-container>
          <md-input-container class="md-block" flex-gt-sm>
            <label>{{'Email' | translate}}</label>
            <input ng-model="signupData.email">
          </md-input-container>
          <md-input-container class="md-block" flex-gt-sm>
            <label>{{'Phone' | translate}}</label>
          </label>
          <label class="item item-input">
            <span class="input-label">{{'Email' | translate}}</span>
            <input type="text" ng-model="signupData.email">
          </label>
          <label class="item item-input">
            <span class="input-label">{{'Phone' | translate}}</span>
            <input type="number" ng-model="signupData.phone">
          </md-input-container>
          <md-input-container class="md-block" flex-gt-sm>
            <label>{{'Telegram' | translate}}</label>
            <input ng-model="signupData.telegram">
          </md-input-container>
          <md-input-container class="md-block" flex-gt-sm>
            <label>{{'Description' | translate}}</label>
            <input ng-model="signupData.description">
          </md-input-container>
          </label>
          <label class="item item-input">
            <span class="input-label">{{'Telegram' | translate}}</span>
            <input type="text" ng-model="signupData.telegram">
          </label>
          <label class="item item-input">
            <span class="input-label">{{'Description' | translate}}</span>
            <input type="text" ng-model="signupData.description">
          </label>
        <div>
            <md-button class="o_purple100" ng-href="#/app/login">{{'Cancel' | translate}}</md-button>
            <md-button class="o_purple300 o_floatRight" ng-click="doSignup()">{{'Signup' | translate}}</md-button>
            <a class="button o_purple100" ng-href="#/app/login">{{'Cancel' | translate}}</a>
            <a class="button o_purple300 o_floatRight" ng-click="doSignup()">{{'Signup' | translate}}</a>
        </div>
      </div>
  </ion-content>
--- a/www/templates/travel.html
+++ b/www/templates/travel.html
@ -7,10 +7,10 @@
    <div class="item item-icon-left">
      <div class="item-note">
        <p>
            <md-button ng-href="#/app/users/{{travel.user._id}}">
            <a class="button" ng-href="#/app/users/{{travel.user._id}}">
                <img class="o_userImgCircularMini" ng-src="{{travel.user.avatar}}"></img>
                {{travel.user.username}}
            </md-button>
            </a>
            <p  class="text-right">
              <a ng-click="deleteTravel()" class="button button-small o_bRed"
              ng-show="storageuser._id==travel.user._id">
@ -51,22 +51,22 @@
      <p class='text-right'>
        <div ng-show="userHasJoined(travel.joinPetitions, storageuser._id)==-1">
            <div ng-show="userHasJoined(travel.joins, storageuser._id)==-1">
                <md-button ng-show="travel.type=='offering'" ng-click="joinTravel()" class="o_purple300">{{'Ask_to_join' | translate}}</md-button>
                <md-button ng-show="travel.type=='asking'" ng-click="joinTravel()" class="o_purple300">{{'Offer_car' | translate}}</md-button>
                <md-button ng-show="travel.type=='package'" ng-click="joinTravel()" class="o_purple300">{{'Offer_car' | translate}}</md-button>
                <a ng-show="travel.type=='offering'" ng-click="joinTravel()" class="button o_purple300">{{'Ask_to_join' | translate}}</a>
                <a ng-show="travel.type=='asking'" ng-click="joinTravel()" class="button o_purple300">{{'Offer_car' | translate}}</a>
                <a ng-show="travel.type=='package'" ng-click="joinTravel()" class="button o_purple300">{{'Offer_car' | translate}}</a>
            </div>
        </div>

        <div ng-show="userHasJoined(travel.joinPetitions, storageuser._id)>-1">
            <md-button ng-show="travel.type=='offering'" ng-click="unjoinTravel()" class="o_purple100">{{'Unjoin' | translate}}</md-button>
            <md-button ng-show="travel.type=='asking'" ng-click="unjoinTravel()" class="o_purple100">{{'Unoffer_car' | translate}}</md-button>
            <md-button ng-show="travel.type=='package'" ng-click="unjoinTravel()" class="o_purple100">{{'Unoffer_car' | translate}}</md-button>
            <a ng-show="travel.type=='offering'" ng-click="unjoinTravel()" class="button o_purple100">{{'Unjoin' | translate}}</a>
            <a ng-show="travel.type=='asking'" ng-click="unjoinTravel()" class="button o_purple100">{{'Unoffer_car' | translate}}</a>
            <a ng-show="travel.type=='package'" ng-click="unjoinTravel()" class="button o_purple100">{{'Unoffer_car' | translate}}</a>
        </div>

        <div ng-show="userHasJoined(travel.joins, storageuser._id)>-1">
            <md-button ng-show="travel.type=='offering'" ng-click="leaveTravel()" class="o_bRed">{{'Leave' | translate}}</md-button>
            <md-button ng-show="travel.type=='asking'" ng-click="" class="o_purple100">{{'Leave' | translate}}</md-button>
            <md-button ng-show="travel.type=='package'" ng-click="" class="o_purple100">{{'Leave' | translate}}</md-button>
            <a ng-show="travel.type=='offering'" ng-click="leaveTravel()" class="button o_bRed">{{'Leave' | translate}}</a>
            <a ng-show="travel.type=='asking'" ng-click="" class="button o_purple100">{{'Leave' | translate}}</a>
            <a ng-show="travel.type=='package'" ng-click="" class="button o_purple100">{{'Leave' | translate}}</a>
        </div>
      </p>
    </div>
--- a/www/templates/travels.html
+++ b/www/templates/travels.html
@ -2,7 +2,7 @@
  <ion-content class="has-footer">
      <ion-refresher
        pulling-text="{{'Pull_to_refresh' | translate}}..."
        on-refresh="doRefresh()">
        on-refresh="paginationNext()">
      </ion-refresher>
    <div class="list">
        <div>
--- a/www/templates/user.html
+++ b/www/templates/user.html
@ -14,7 +14,7 @@
            {{'view_likes' | translate}}
        </a></p>
        <p ng-show="storageuser._id==user._id">
            <md-button class="o_grey500" ng-href="#/app/editUser">{{'Edit_profile' | translate}}</md-button>
            <a class="button button-small o_grey500" ng-href="#/app/editUser">{{'Edit_profile' | translate}}</a>
        </p>
    </div>
    <div class="">
@ -35,7 +35,7 @@
              </i>
          </a>
          <a class="tab-item" ng-show="arrayObjectIndexOf(user.likes, storageuser._id)>-1">
              <i class="icon ion-heart-broken" ng-click="unlikeUser()"></i>
              <i class="icon ion-heart ctext_red600" ng-click="unlikeUser()"></i>
              <i ng-href="#/app/users/userLikes/{{user._id}}">
                  {{user.likes.length}} {{'likes' | translate}}
              </i>