diff --git a/layouts/v7/modules/Mobile/simple/Header.tpl b/layouts/v7/modules/Mobile/simple/Header.tpl
index 171726e626111d5d451ad2cd85f99e95ba1fc6c0..a194afc72fc9a9f076e50672ffe8c132ed4b2016 100644
--- a/layouts/v7/modules/Mobile/simple/Header.tpl
+++ b/layouts/v7/modules/Mobile/simple/Header.tpl
@@ -10,48 +10,59 @@
**************************************************************************************/
-->*}<!doctype html>
<html ng-app="mobileapp">
- <head>
- <meta charset="utf-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1" />
- <title>Vtiger</title>
- <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
- <link rel="stylesheet" href="../../{$TEMPLATE_WEBPATH}/resources/libs/angularjs/angular-material.min.css">
- <!--link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic"-->
+ <head>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <title>Vtiger</title>
+ <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
+ <link rel="stylesheet" href="../../{$TEMPLATE_WEBPATH}/resources/libs/angularjs/angular-material.min.css">
+ <!--link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic"-->
- {* Include desired styles injected *}
- {if $_styles}
- {foreach item=_style from=$_styles}
- <link type="text/css" rel="stylesheet" href="../../{$TEMPLATE_WEBPATH}/{$_style}">
- {/foreach}
- {/if}
- {* End *}
- <link type="text/css" rel="stylesheet" href="../../{$TEMPLATE_WEBPATH}/resources/libs/md-icons/css/materialdesignicons.min.css">
- <link type="text/css" rel="stylesheet" href="../../{$TEMPLATE_WEBPATH}/resources/libs/Vtiger-icons/style.css">
- <link type="text/css" rel="stylesheet" href="../../{$TEMPLATE_WEBPATH}/resources/css/application.css">
- <link type="text/css" rel="stylesheet" href="../../{$TEMPLATE_WEBPATH}/resources/css/style.css">
+ {* Include desired styles injected *}
+ {if $_styles}
+ {foreach item=_style from=$_styles}
+ <link type="text/css" rel="stylesheet" href="../../{$TEMPLATE_WEBPATH}/{$_style}">
+ {/foreach}
+ {/if}
+ {* End *}
+ <link type="text/css" rel="stylesheet" href="../../{$TEMPLATE_WEBPATH}/resources/libs/md-icons/css/materialdesignicons.min.css">
+ <link type="text/css" rel="stylesheet" href="../../{$TEMPLATE_WEBPATH}/resources/libs/md-datepicker/angular-datepicker.min.css">
+ <link type="text/css" rel="stylesheet" href="../../{$TEMPLATE_WEBPATH}/resources/libs/Vtiger-icons/style.css">
+ <link type="text/css" rel="stylesheet" href="../../{$TEMPLATE_WEBPATH}/resources/css/application.css">
+ <link type="text/css" rel="stylesheet" href="../../{$TEMPLATE_WEBPATH}/resources/css/style.css">
+ {*Date-time-picker*}
+ <link type="text/css" rel="stylesheet" href="../../{$TEMPLATE_WEBPATH}/resources/libs/angularjs/angular-material-datetimepicker/css/material-datetimepicker.min.css">
- <script type="text/javascript" src="../../{$TEMPLATE_WEBPATH}/resources/libs/jquery/jquery2.min.js"></script>
- <script type="text/javascript" src="../../{$TEMPLATE_WEBPATH}/resources/libs/angularjs/angular.js"></script>
- <script type="text/javascript" src="../../{$TEMPLATE_WEBPATH}/resources/libs/angularjs/angular-touch.min.js"></script>
- <script type="text/javascript" src="../../{$TEMPLATE_WEBPATH}/resources/libs/angularjs/angular-animate.min.js"></script>
- <script type="text/javascript" src="../../{$TEMPLATE_WEBPATH}/resources/libs/angularjs/angular-aria.min.js"></script>
- <script type="text/javascript" src="../../{$TEMPLATE_WEBPATH}/resources/libs/angularjs/angular-material.min.js"></script>
- <script type="text/javascript" src="../../{$TEMPLATE_WEBPATH}/resources/libs/angularjs/angular-touch.min.js"></script>
- <script type="text/javascript" src="../../{$TEMPLATE_WEBPATH}/resources/libs/jquery/purl.js"></script>
+ <script type="text/javascript" src="../../{$TEMPLATE_WEBPATH}/resources/libs/jquery/jquery2.min.js"></script>
+ <script type="text/javascript" src="../../{$TEMPLATE_WEBPATH}/resources/libs/angularjs/angular.js"></script>
+ <script type="text/javascript" src="../../{$TEMPLATE_WEBPATH}/resources/libs/angularjs/angular-touch.min.js"></script>
+ <script type="text/javascript" src="../../{$TEMPLATE_WEBPATH}/resources/libs/angularjs/angular-animate.min.js"></script>
+ <script type="text/javascript" src="../../{$TEMPLATE_WEBPATH}/resources/libs/angularjs/angular-aria.min.js"></script>
+ <script type="text/javascript" src="../../{$TEMPLATE_WEBPATH}/resources/libs/angularjs/angular-material.min.js"></script>
+ <script type="text/javascript" src="../../{$TEMPLATE_WEBPATH}/resources/libs/angularjs/angular-touch.min.js"></script>
+ <script type="text/javascript" src="../../{$TEMPLATE_WEBPATH}/resources/libs/jquery/purl.js"></script>
- <script type="text/javascript" src="../../{$TEMPLATE_WEBPATH}/Vtiger/js/application.js"></script>
- <script type="text/javascript" src="../../{$TEMPLATE_WEBPATH}/Vtiger/js/Vtiger.js"></script>
- <script type="text/javascript" src="../../{$TEMPLATE_WEBPATH}/Vtiger/js/Utils.js"></script>
+ <script type="text/javascript" src="../../{$TEMPLATE_WEBPATH}/Vtiger/js/application.js"></script>
+ <script type="text/javascript" src="../../{$TEMPLATE_WEBPATH}/Vtiger/js/Vtiger.js"></script>
+ <script type="text/javascript" src="../../{$TEMPLATE_WEBPATH}/Vtiger/js/Utils.js"></script>
+
+ {*moment-js*}
+ <script type="text/javascript" src="../../{$TEMPLATE_WEBPATH}/resources/libs/moment/moment.min.js"></script>
+ <script type="text/javascript" src="../../{$TEMPLATE_WEBPATH}/resources/libs/moment/moment-timezone.min.js"></script>
+ {*Date-time-picker*}
+ <script type="text/javascript" src="../../{$TEMPLATE_WEBPATH}/resources/libs/angularjs/angular-material-datetimepicker/js/angular-material-datetimepicker.js"></script>
+ <script type="text/javascript" src="../../{$TEMPLATE_WEBPATH}/resources/libs/jquery/date.js"></script>
- {* Include desired script injected *}
- {if $_scripts}
- {foreach item=_script from=$_scripts}
- <script type="text/javascript" src="../../{$TEMPLATE_WEBPATH}/{$_script}"></script>
- {/foreach}
- {/if}
- {* End *}
- </head>
- {literal}
- <body ng-controller="VtigerBodyController" ng-init="init();" ng-cloak md-theme="{{dynamicTheme}}" md-theme-watch>
- {/literal}
\ No newline at end of file
+ {* Include desired script injected *}
+ {if $_scripts}
+ {foreach item=_script from=$_scripts}
+ <script type="text/javascript" src="../../{$TEMPLATE_WEBPATH}/{$_script}"></script>
+ {/foreach}
+ {/if}
+ {* End *}
+
+ </head>
+ {literal}
+ <body ng-controller="VtigerBodyController" ng-init="init();" ng-cloak md-theme="{{dynamicTheme}}" md-theme-watch>
+ {/literal}
\ No newline at end of file
diff --git a/layouts/v7/modules/Mobile/simple/Users/Login.tpl b/layouts/v7/modules/Mobile/simple/Users/Login.tpl
index 65f67456ef30d2d235facd76a11866d22433d589..829a4f8dda9134ccaca2edcad4da96bb9ce3c754 100644
--- a/layouts/v7/modules/Mobile/simple/Users/Login.tpl
+++ b/layouts/v7/modules/Mobile/simple/Users/Login.tpl
@@ -19,7 +19,7 @@
<md-content class="login-background">
<div class="logo-container">
{/literal}
- <img src="../../{$TEMPLATE_WEBPATH}/resources/images/vtiger_logo_white.svg" alt="Vtiger Logo"/>
+ <img src="../../{$TEMPLATE_WEBPATH}/resources/images/vtiger_logo.svg" alt="Vtiger Logo"/>
{literal}
</div>
<form name="loginForm" ng-submit="login()" class="login-form" ng-validate>
diff --git a/layouts/v7/modules/Mobile/simple/Vtiger/Detail.tpl b/layouts/v7/modules/Mobile/simple/Vtiger/Detail.tpl
index b2955f6dbf150257752d4bd2a3c9bbc863557355..5d80368b32eb4ed346bc8c6601abb5b9b9e08593 100644
--- a/layouts/v7/modules/Mobile/simple/Vtiger/Detail.tpl
+++ b/layouts/v7/modules/Mobile/simple/Vtiger/Detail.tpl
@@ -20,38 +20,105 @@
</md-button>
<h2 flex>{{pageTitle}}</h2>
<span flex></span>
- <md-button class="md-icon-button" ng-click="detailViewEditEvent();" aria-label="global-search">
+ <md-button class="md-icon-button" ng-if="module != 'Invoice' && module != 'SalesOrder' && module != 'Quotes' && module != 'PurchaseOrder'" ng-click="detailViewEditEvent();" aria-label="global-search">
<i class="mdi mdi-pencil actionbar-icon"></i>
</md-button>
</div>
</md-toolbar>
</header>
- <section layout="row" flex class="content-section">
- <div flex class="detail-content">
- <div layout="column" layout-fill layout-align="top center" ng-if="fields.length">
- <md-list class="fields-list" ng-controller="InlineEditorController"> <!-- infinite-scroll='loadMoreRecords()' infinite-scroll-distance='10'-->
- <md-list-item class="md-2-line" ng-repeat="field in recordData">
- <div class="md-list-item-text field-row">
- <p class="field-label">
- {{field.label}}
- </p>
- <h3 class="field-value" ng-class="{'value-empty' : !field.value || field.value==='' || field.value==='--None' || field.value==0} ">
- {{field.value || field.label + ' not specified'}}
- </h3>
- <!--div class="tooltip" ng-click="$event.stopPropagation()" ng-show="showtooltip">
- <input type="text" ng-model="value" />
- </div-->
- </div>
- <md-divider ></md-divider>
- </md-list-item>
- </md-list>
-
- </div>
- <div class="no-records-message" ng-if="!fields.length">
- <div class="no-records">No Fields Found</div>
- </div>
- <div flex></div>
+ <md-content style="padding-top: 56px;">
+ <div layout="row" style="width: 100%">
+ <span style="margin: 10px 10px;" class="letter-avatar">{{record_label | limitTo:1:0}}</span>
+ <span style="margin-top: 15px;">{{record_label}}</span>
</div>
- </section>
+ <md-tabs md-dynamic-height md-border-bottom style="width:100%">
+ <md-tab label="Details" style="width:50%">
+ <div flex class="detail-content" style="height:78vh; overflow: scroll;">
+ <div layout="column" layout-fill layout-align="top center" ng-if="fields.length">
+ <md-list style="padding: 0px;" class="fields-list" ng-controller="InlineEditorController"> <!-- infinite-scroll='loadMoreRecords()' infinite-scroll-distance='10'-->
+ <md-list-item class="md-2-line" style="padding: 0px 5px;" ng-repeat="field in recordData">
+ <div class="md-list-item-text field-row">
+ <div layout="row" flex>
+ <div flex="50">
+ <p style="text-align:right; margin-right: 10px; opacity: 0.9; color:black; font-size:14px; line-height:25px; font-weight: 400;" class="field-label">{{field.label}}
+ </p>
+ </div>
+ <div flex="50">
+ <p ng-class="{'value-empty' : !field.value || field.value==='' || field.value==='--None' || field.value==0} ">
+ {{field.value}}
+ </p>
+ </div>
+ </div>
+ </div>
+ </md-list-item>
+ </md-list>
+ <md-list ng-if="lineitems && (module == 'Invoice' || module == 'Quotes' || module == 'SalesOrder' || module == 'PurchaseOrder')">
+ <md-subheader style="margin:0px; padding:0px; background:beige;">Item Details</md-subheader>
+ <md-list-item class="md-2-line" ng-repeat="item in lineitems">
+ <div layout="column" style="width: 100%;">
+ <p style="opacity:0.8; color:#0099FF; font-size: 14px; margin: 4px 0px;">{{item.product_name}}</p>
+ <i style="color:grey; font-size: 11px;">{{item.comment}}</i>
+ <div layout="row" style="opacity: 0.9;">
+ <p style="font-size: 12px; margin: 4px 0px;">{{item.quantity}} * {{item.listprice}}</p>
+ </div>
+ <div layout="column" flex style="opacity: 0.9">
+ <p ng-if="item.discount_amount" style="font-size: 12px; margin: 4px 0px;" flex="100">(-) Discount Amount : {{item.discount_amount}}</p>
+ <p ng-if="item.discount_percent" style="font-size: 12px; margin: 4px 0px;" flex="100">(-) Discount Percentage : {{item.discount_percent}} (%)</p>
+ </div>
+ <div layout="row" style="text-align: right; color:darkgreen;">
+ <p style="font-size: 12px; margin: 4px 0px; width: 100%;">{{item.netPrice}}</p>
+ </div>
+ </div>
+ <md-divider></md-divider>
+ </md-list-item>
+ <md-list-item layout="column" style="font-size: 13px;">
+ <div layout="row" style="width:100%">
+ <p flex="50" style="text-align: left;">Items Total</p>
+ <p flex="50" style="text-align: right; color:darkgreen;">{{lineItemsSummary.sub_total}}</p>
+ </div>
+ <div layout="row" style="width:100%">
+ <p flex="50" style="text-align: left;">(-) Overall Discount</p>
+ <p flex="50" style="text-align: right; color:darkgreen;">{{lineItemsSummary.group_discount}}</p>
+ </div>
+ <div layout="row" style="width:100%">
+ <p flex="50" style="text-align: left;">Total After Discount</p>
+ <p flex="50" style="text-align: right; color:darkgreen;">{{lineItemsSummary.totalAfterDiscount}}</p>
+ </div>
+ <div layout="row" style="width:100%">
+ <p flex="50" style="text-align: left;">Pre Tax Total</p>
+ <p flex="50" style="text-align: right; color:darkgreen;">{{lineItemsSummary.pre_tax_total}}</p>
+ </div>
+ <div layout="row" style="width:100%">
+ <p flex="50" style="text-align: left;">(+) Tax</p>
+ <p flex="50" style="text-align: right; color:darkgreen;">{{lineItemsSummary.total_tax}}</p>
+ </div>
+ <div layout="row" style="width:100%">
+ <p flex="50" style="text-align: left;">Adjustment</p>
+ <p flex="50" style="text-align: right; color:darkgreen;">{{lineItemsSummary.adjustment}}</p>
+ </div>
+ <div layout="row" style="width:100%; color:#0099FF;">
+ <p flex="50" style="text-align: left;">Grand Total</p>
+ <p flex="50" style="text-align: right;">{{lineItemsSummary.grand_total}}</p>
+ </div>
+ </md-list-item>
+ </md-list>
+ </div>
+ <div class="no-records-message" ng-if="!fields.length">
+ <div class="no-records">No Fields Found</div>
+ </div>
+ <div flex></div>
+ </div>
+ </md-tab>
+ <md-tab label="Related">
+ <div ng-if="relatedModules" style="height:75vh; overflow: scroll;">
+ <md-list-item ng-repeat="(module , value) in relatedModules" ng-click="showRelatedList(module)">
+ <p style="font-size: 13px;"><span style="font-size: 12px; color:#FF4068" class="vicon-{{module | lowercase | nospace}}"></span> {{module}}</p>
+ <p style="text-align:right; color:#0099FF">{{value}}</p>
+ <md-divider></md-divider>
+ </md-list-item>
+ </div>
+ </md-tab>
+ </md-tabs>
+ </md-content>
</section>
-{/literal}
+{/literal}
\ No newline at end of file
diff --git a/layouts/v7/modules/Mobile/simple/Vtiger/Edit.tpl b/layouts/v7/modules/Mobile/simple/Vtiger/Edit.tpl
index a92bdbfa02cc15077c6f76773507b6300a636bf6..91fd9fd629720e721ad2d2e40ff2a40b39d05579 100644
--- a/layouts/v7/modules/Mobile/simple/Vtiger/Edit.tpl
+++ b/layouts/v7/modules/Mobile/simple/Vtiger/Edit.tpl
@@ -12,39 +12,202 @@
{include file="../Header.tpl" scripts=$_scripts}
<script type="text/javascript" src="../../{$TEMPLATE_WEBPATH}/Vtiger/js/Edit.js"></script>
{literal}
-
- <form name="editForm" id="field-edit-form" ng-submit="saveThisRecord()" ng-controller="VtigerEditController">
- <header md-page-header fixed-top>
- <md-toolbar>
- <div class="md-toolbar-tools actionbar">
- <md-button ng-click="gobacktoUrl()" class="md-icon-button" aria-label="side-menu-open">
- <i class="mdi mdi-window-close actionbar-icon"></i>
- </md-button>
- <h2 flex>Edit Title</h2>
- <span flex></span>
- </div>
- </md-toolbar>
- </header>
- <section layout="row" flex class="content-section">
- <div layout="column" class="edit-content" layout-fill layout-align="top center" ng-if="fieldsData.length">
- <md-list class="fields-list">
- <md-list-item class="md-1-line" ng-repeat="field in fieldsData" ng-if="field.editable">
- <div class="md-list-item-text field-row">
- <md-input-container style="width:100%;">
+<form name="editForm" id="field-edit-form" ng-submit="saveThisRecord()" ng-controller="VtigerEditController">
+ <header md-page-header fixed-top>
+ <md-toolbar>
+ <div class="md-toolbar-tools actionbar">
+ <md-button ng-click="gobacktoUrl()" class="md-icon-button" aria-label="side-menu-open">
+ <i class="mdi mdi-window-close actionbar-icon"></i>
+ </md-button>
+ <h2 ng-if="record" flex>Edit</h2>
+ <h2 ng-if="!record" flex>Create</h2>
+ <span flex></span>
+ <md-button type="submit" class="md-icon-button" aria-label="notifications">
+ <i class="mdi mdi-check actionbar-icon"></i>
+ </md-button>
+ </div>
+ </md-toolbar>
+ </header>
+ <section layout="row" flex class="content-section">
+ <div layout="column" class="edit-content" layout-fill layout-align="top center">
+ <md-list class="fields-list">
+ <md-list-item ng-repeat="field in fieldsData" class="md-1-line" ng-if="field.editable">
+ <div class="md-list-item-text field-row" ng-switch="field.type.name">
+ <md-input-container ng-switch-when="string">
+ <div class="input-group-addon">
<label>{{field.label}}</label>
- <input name="field.name" ng-model="field.value" type="text" ng-required="field.mandatory">
- <div ng-messages="myForm.name.$error">
- <div ng-show="field.mandatory" ng-message="required"> Mandatory Field.</div>
- </div>
- </md-input-container>
+ <input name="{{field.name}}" ng-model="field.raw" type="text" aria-label="{{field.name}}" ng-required="field.mandatory">
+ </div>
+ <div ng-messages="editForm.{{field.name}}.$error">
+ <div ng-show="field.mandatory && !field.raw" ng-message="required"> Mandatory Field.</div>
+ </div>
+ </md-input-container>
+ <md-input-container ng-switch-when="phone">
+ <div class="input-group-addon">
+ <label>{{field.label}}</label>
+ <input name="{{field.name}}" ng-model="field.raw" type="phone" aria-label="{{field.name}}" ng-required="field.mandatory">
+ </div>
+ <div ng-messages="editForm.{{field.name}}.$error">
+ <div ng-if="editForm[field.name].$error.required" ng-message="required"> Mandatory Field.</div>
+ </div>
+ </md-input-container>
+ <!--*************PICKLIST UI***********************************-->
+ <md-input-container ng-switch-when="picklist" ng-hide="(field.name == 'activitytype' || field.name == 'eventstatus') && module =='Calendar'">
+ <div class="input-group-addon">
+ <label ng-if="field.name == 'taskstatus'">Task Status</label>
+ <label ng-if="field.name == 'eventstatus'">Event Status</label>
+ <label ng-if="field.name != 'taskstatus' && field.name != 'eventstatus'">{{field.label}}</label>
+ <md-select ng-model="field.raw" aria-label="{{field.label}}" ng-required="field.mandatory">
+ <md-option ng-value="opt.value" ng-repeat="opt in field.type.picklistValues">{{opt.label}}</md-option>
+ </md-select>
+ </div>
+ <div ng-messages="editForm.{{field.name}}.$error">
+ <div ng-show="field.mandatory && !field.raw" ng-message="required"> Mandatory Field.</div>
+ </div>
+ </md-input-container>
+ <!--*************PICKLIST UI***********************************-->
+ <md-input-container ng-switch-when="metricpicklist">
+ <div class="input-group-addon">
+ <label ng-if="field.name == 'taskstatus'">Task Status</label>
+ <label ng-if="field.name == 'eventstatus'">Event Status</label>
+ <label ng-if="field.name != 'taskstatus' && field.name != 'eventstatus'">{{field.label}}</label>
+ <md-select ng-model="field.raw" aria-label="{{field.label}}" ng-required="field.mandatory">
+ <md-option ng-value="opt.value" ng-repeat="opt in field.type.picklistValues">{{opt.label}}</md-option>
+ </md-select>
+ </div>
+ <div ng-messages="editForm.{{field.name}}.$error">
+ <div ng-show="field.mandatory && !field.raw" ng-message="required"> Mandatory Field.</div>
+ </div>
+ </md-input-container>
+ <!--*************Owner UI***********************************-->
+ <md-input-container ng-switch-when="owner">
+ <div class="input-group-addon">
+ <label>{{field.label}}</label>
+ <md-select ng-model="field.raw" aria-label="{{field.label}}">
+ <md-optgroup label="Users" aria-label="Users">
+ <md-option ng-value="user_id" ng-repeat="(user_id, user) in field.type.picklistValues.users">{{user}}</md-option>
+ </md-optgroup>
+ <md-optgroup label="Groups" aria-label="Groups">
+ <md-option ng-value="group_id" ng-repeat="(group_id, group) in field.type.picklistValues.groups">{{group}}</md-option>
+ </md-optgroup>
+ </md-select>
+ </div>
+ <div ng-messages="editForm.{{field.name}}.$error">
+ <div ng-show="field.mandatory && !field.raw" ng-message="required"> Mandatory Field.</div>
+ </div>
+ </md-input-container>
+ <!--****************Reference Picklist*******************************-->
+ <div ng-switch-when="reference" style="padding-bottom: 16px;">
+ <div class="input-group-addon">
+ <label>{{field.label}}</label>
+ <md-autocomplete flex
+ ng-model="field.raw"
+ md-search-text="field.valueLabel"
+ md-items="item in getMatchedReferenceFields(field.valueLabel, field)"
+ md-selected-item-change="setReferenceFieldValue(item, field)"
+ md-item-text="item.label"
+ md-min-length="3"
+ md-input-name="{{field.name}}">
+ <md-item-template>
+ <span md-highlight-text="field.valueLabel">{{item.label}}</span>
+ </md-item-template>
+ <md-not-found>
+ No matches found for "{{field.valueLabel}}".
+ </md-not-found>
+ </md-autocomplete>
+ </div>
+ <div ng-messages="editForm.{{field.name}}.$error" ng-if="searchForm.autocompleteField.$touched">
+ <div ng-message="required">You <b>must</b> have a favorite fruit.</div>
+ </div>
</div>
- </md-list-item>
- </md-list>
- </div>
- <div class="no-records-message" ng-if="!fieldsData.length">
- <div class="no-records">No Fields Found</div>
- </div>
- <div flex></div>
- </section>
- </form>
+ <!--****************Multi Select Picklist*******************************-->
+ <md-input-container ng-switch-when="multipicklist">
+ <div class="input-group-addon">
+ <label>{{field.label}}</label>
+ <md-chips ng-model="field.valuelabel" md-autocomplete-snap md-require-match>
+ <md-autocomplete aria-label="{{field.name}}"
+ md-input-name="field.name"
+ md-search-text="field.valuelabel"
+ md-items="item in querySearch2(field.picklist)"
+ md-item-text="item">
+ <span md-highlight-text="fruitsobj.searchText">{{item.display}}</span>
+ </md-autocomplete>
+ <md-chip-template>
+ <span> {{$chip['display']}} </span>
+ </md-chip-template>
+ </md-chips>
+ </div>
+ <div ng-messages="editForm.{{field.name}}.$error">
+ <div ng-show="field.mandatory && !field.raw" ng-message="required"> Mandatory Field.</div>
+ </div>
+ </md-input-container>
+ <!--*************Date Field UI***********************************-->
+ <md-input-container ng-switch-when="date">
+ <div class="input-group-addon">
+ <label ng-if="field.name != 'date_start'">{{field.label}}</label>
+ <label ng-if="field.name == 'date_start'">Start Date</label>
+ <div layout="row">
+ <span class="mdi mdi-calendar editIcon"></span>
+ <div flex="90">
+ <input type="date" ng-model="field.raw">
+ </div>
+ </div>
+ </div>
+ <div ng-messages="editForm.{{field.name}}.$error">
+ <div ng-show="field.mandatory && !field.raw" ng-message="required"> Mandatory Field.</div>
+ </div>
+ </md-input-container>
+ <!--*************Time Field UI***********************************-->
+ <md-input-container class="date-input-container" ng-switch-when="time" ng-hide="field.name == 'time_end' && module =='Calendar'">
+ <div class="input-group-addon">
+ <label>{{field.label}}</label>
+ <div layout="row" class="input-group-addon" flex>
+ <span class="mdi mdi-clock editIcon"></span>
+ <div flex="90">
+ <input mdc-datetime-picker ng-if="userinfo.hour_format == '12'" date="false" time="true" type="text" format="hh:mm a" short-time="true" ng-model="field.raw" aria-label="{{field.label}}" ng-required="field.mandatory" placeholder="Time">
+ <input mdc-datetime-picker ng-if="userinfo.hour_format == '24'" date="false" time="true" type="text" format="HH:mm" short-time="false" ng-model="field.raw" aria-label="{{field.label}}" ng-required="field.mandatory" placeholder="Time">
+ </div>
+ </div>
+ </div>
+ <div ng-messages="editForm.{{field.name}}.$error">
+ <div ng-show="field.mandatory && !field.raw" ng-message="required"> Mandatory Field.</div>
+ </div>
+ </md-input-container>
+ <!--*************Checkbox /Boolean Box UI *********************-->
+ <md-input-container ng-switch-when="boolean">
+ <md-checkbox class="md-primary edit-checkbox" name="{{field.name}}" ng-model="field.raw" aria-label="{{field.name}}" ng-required="field.mandatory">
+ {{field.label}}
+ </md-checkbox>
+ <div ng-messages="editForm.{{field.name}}.$error">
+ <div ng-show="field.mandatory" ng-message="required"> Mandatory Field.</div>
+ </div>
+ </md-input-container>
+ <!--************* TEXT AREA *********************-->
+ <md-input-container ng-switch-when="text">
+ <label>{{field.label}}</label>
+ <textarea ng-model="field.raw" rows="4" md-select-on-focus></textarea>
+ <div ng-messages="editForm.{{field.name}}.$error">
+ <div ng-show="field.mandatory" ng-message="required"> Mandatory Field.</div>
+ </div>
+ </md-input-container>
+
+ <!--*************Default text to be changed Later**********************-->
+ <md-input-container ng-switch-when="image">
+ <h5>Upload image from web verion.</h5>
+ </md-input-container>
+ <md-input-container ng-switch-default>
+ <div class="input-group-addon">
+ <label>{{field.label}}</label>
+ <input name="{{field.name}}" ng-model="field.raw" type="text" aria-label="{{field.name}}" ng-required="field.mandatory">
+ </div>
+ <div ng-messages="editForm.{{field.name}}.$error">
+ <div ng-show="field.mandatory && !field.raw" ng-message="required"> Mandatory Field.</div>
+ </div>
+ </md-input-container>
+ </div>
+ </md-list-item>
+ </md-list>
+ </div>
+ </section>
+</form>
{/literal}
diff --git a/layouts/v7/modules/Mobile/simple/Vtiger/List.tpl b/layouts/v7/modules/Mobile/simple/Vtiger/List.tpl
index 783bc2c4999a70a777c2ea129ace8d2dd030000b..d320cc17e12d2edf9f78fd1277d8904088d267e1 100644
--- a/layouts/v7/modules/Mobile/simple/Vtiger/List.tpl
+++ b/layouts/v7/modules/Mobile/simple/Vtiger/List.tpl
@@ -9,53 +9,47 @@
*
**************************************************************************************/
-->*}
-{*<!--
-/*************************************************************************************
-** The contents of this file are subject to the vtiger CRM Public License Version 1.1
-* ("License"); You may not use this file except in compliance with the License
-* The Original Code is: vtiger CRM Open Source
-* The Initial Developer of the Original Code is vtiger.
-* Portions created by vtiger are Copyright (C) vtiger.
-* All Rights Reserved.
-*
-**************************************************************************************/
--->*}
{include file="../Header.tpl" scripts=$_scripts}
-{include file="../Vtiger/Toolbar.tpl"}
<section layout="row" flex class="content-section" ng-controller="{$_controller}">
+ {include file="../Vtiger/Toolbar.tpl"}
{include file="../Vtiger/SideMenu.tpl"}
{literal}
- <md-button class="md-fab md-primary float-button md-fab-bottom-right" aria-label="addnew">
+ <md-button ng-click="listViewCreateEvent()" class="md-fab md-primary float-button md-fab-bottom-right" aria-label="addnew">
<i class="mdi mdi-plus"></i>
</md-button>
<div flex class="list-content">
- <div class="list-filters" layout="row" >
- <div flex="60" class="change-filter">
+ <div class="list-filters" layout="row" flex>
+ <div flex="100" class="change-filter">
+ <md-button class="filter-btn" aria-label="notifications">
+ <i class="mdi mdi-filter-outline"></i>
+ </md-button>
<md-input-container class="current-filter">
- <md-select ng-model="selectedFilter" aria-label="filter">
- <md-optgroup label="Mine">
- <md-option ng-repeat="filter in filters.Mine" ng-value="filter.id">{{filter.name}}</md-option>
+ <md-select ng-model="selectedFilter" aria-label="filter" ng-change="changeFilter()">
+ <md-optgroup label="Mine" aria-label="Mine">
+ <md-option ng-repeat="filter in filters.Mine track by filter.id" ng-value="filter.id" aria-label="{{filter.name}}">{{filter.name}}</md-option>
</md-optgroup>
- <md-optgroup label="Shared">
- <md-option ng-repeat="filter in filters.Shared" ng-value="filter.id">{{filter.name}}</md-option>
+ <md-optgroup label="Shared" aria-label="Shared">
+ <md-option ng-repeat="filter in filters.Shared track by filter.id" ng-value="filter.id" aria-label="{{filter.name}}">{{filter.name}}</md-option>
</md-optgroup>
</md-select>
</md-input-container>
</div>
- <div flex="40" class="sort-filter" ng-show="records.length">
+ <!--div flex="50" class="sort-filter" ng-if="records.length">
+ <md-button class="filter-btn" aria-label="notifications">
+ <i class="mdi mdi-sort"></i>
+ </md-button>
<md-input-container class="current-sort-field">
- <md-select ng-model="orderBy" aria-label="sortfield" placeholder="Select sort field">
- <md-option ng-repeat="header in headers" ng-value="header.name">{{header.label}}</md-option>
+ <md-select ng-model="orderBy" aria-label="sortfield" placeholder="Sort" ng-change="changeSort(orderBy)">
+ <md-option ng-repeat="nameField in nameFields track by $index" ng-value="nameField.name" aria-label="nameField.name">{{nameField.label}}</md-option>
+ <md-option ng-repeat="header in headers track by $index" ng-value="header.name" aria-label="nameField.name">{{header.label}}</md-option>
</md-select>
</md-input-container>
- </div>
+ </div>-->
</div>
-
<div layout="column" layout-fill layout-align="top center" ng-if="records.length">
<md-list class="records-list">
<md-list-item class="md-3-line" data-record-id="{{record.id}}" aria-label="row+{{record.id}}" ng-model="showActions" md-swipe-right="showActions=false;$event.stopPropagation();" md-swipe-left="showActions=true;$event.stopPropagation();" ng-click="gotoDetailView(record.id)" ng-repeat="record in records">
- <img ng-src="../../layouts/v7/modules/Mobile/simple/resources/images/default_1.png" class="md-avatar" alt="{{item.name}}" />
<div class="md-list-item-text">
<h3>
<span ng-repeat="label in headers">
@@ -63,27 +57,28 @@
</span>
</h3>
<p class="header-fields" ng-repeat="header in headers" ng-if="headerIndex(nameFields,header.name)== -1">
- {{record[header.name] || header.label + ' not specified'}}
- </p>
+ {{record[header.name]}}
+ </p>
</div>
<div class="actions-slider animate-show" ng-show="showActions" ng-swipe-right="hideRecordActions();" ng-animate="{enter: 'animate-enter', leave: 'animate-leave'}">
- <div class="button-wrap">
- <md-button class="list-action-edit md-icon-button" aria-label="list-action-edit" ng-click="listViewEditEvent(record.id);$event.stopPropagation();">
- <i class="mdi mdi-pencil"></i>
- </md-button>
- <md-button class="list-action-delete md-icon-button" aria-label="list-action-delete" ng-click="showConfirmDelete($event, record.id);$event.stopPropagation();">
- <i class="mdi mdi-delete"></i>
- </md-button>
+ <div class="button-wrap" flex layout="row">
+ <div flex layout='column'>
+ <md-button class="list-action-edit md-icon-button" aria-label="list-action-edit" ng-click="listViewEditEvent($event, record.id);$event.stopPropagation();">
+ <span><i class="mdi mdi-pencil"></i></span>
+ </md-button>
+ </div>
+ <div flex layout='column'>
+ <md-button class="list-action-delete md-icon-button" aria-label="list-action-delete" ng-click="showConfirmDelete($event, record.id);$event.stopPropagation();">
+ <span><i class="mdi mdi-delete"></i></span>
+ </md-button>
+ </div>
</div>
</div>
<md-divider ></md-divider>
</md-list-item>
<md-list-item class="md-1-line load-more-link" >
<div ng-click="loadMoreRecords()" ng-show="moreRecordsExists">
- Load more records
- </div>
- <div ng-show="!moreRecordsExists" class="thats-all">
- That's All
+ Load more
</div>
</md-list-item>
</md-list>
diff --git a/layouts/v7/modules/Mobile/simple/Vtiger/SideMenu.tpl b/layouts/v7/modules/Mobile/simple/Vtiger/SideMenu.tpl
index 87383edb4ddf72f9a5042c2074d197e6bd86103a..d85cfd5b8b4ac84099c150742301b10c51fe5fe8 100644
--- a/layouts/v7/modules/Mobile/simple/Vtiger/SideMenu.tpl
+++ b/layouts/v7/modules/Mobile/simple/Vtiger/SideMenu.tpl
@@ -1,41 +1,40 @@
{literal}
<md-sidenav class="md-sidenav-left" md-component-id="left">
<md-toolbar class="app-menu md-locked-open">
- <!--div class="md-toolbar-tools">
- <md-button ng-click="navigationToggle()" class="md-icon-button" aria-label="side-menu-close">
- <i class="mdi mdi-arrow-left actionbar-icon"></i>
- </md-button>
- </div-->
<div class="user-details">
- <md-list-item class="md-1-line">
+ <md-list-item class="md-1-line" style="margin:10px 0px">
{/literal}
- <img src="../../{$TEMPLATE_WEBPATH}/resources/images/butler.jpg" class="md-avatar" alt="butler">
+ <img src="../../{$TEMPLATE_WEBPATH}/resources/images/default_1.png" class="md-avatar" alt="butler">
{literal}
<div class="md-list-item-text">
- <h5>{{userinfo.first_name + " "}}{{userinfo.last_name}}</h5>
- <!--p>{{userinfo.username}}</p>
- <p>{{userinfo.email}}</p-->
+ <small>{{userinfo.first_name + " "}}{{userinfo.last_name}}</small>
+ <h5 style="margin: 0px;">{{userinfo.email}}</h5>
</div>
</md-list-item>
</div>
- <md-input-container class="app-dropdown">
+ <div class="app-dropdown">
<md-select ng-model="selectedApp" aria-label="app_menu">
- <md-option ng-repeat="app in apps" ng-value="app">{{app}}</md-option>
+ <md-option ng-repeat="app in apps" ng-value="app" ng-click="setSelectedApp(app)">{{app}}</md-option>
</md-select>
- </md-input-container>
+ </div>
</md-toolbar>
<md-list class="sidenav-module-list">
- <md-list-item md-ink-ripple class="md-1-line">
- <span class="vicon-grid"></span>
- <span class="vmodule-name">Dashboard</span>
+ <md-list-item ng-click="navigationToggle(); loadList('Events');" md-ink-ripple class="md-1-line">
+ <span style="font-size:14px;" class="vicon-calendar"></span>
+ <span class="vmodule-name">Events</span>
+ </md-list-item>
+ <md-list-item ng-click="navigationToggle(); loadList('Calendar');" md-ink-ripple class="md-1-line">
+ <span style="font-size:14px;" class="vicon-calendar"></span>
+ <span class="vmodule-name">Tasks</span>
</md-list-item>
+ <md-divider></md-divider>
<md-list-item ng-click="navigationToggle();loadList(module.name);" class="md-1-line" ng-click="module.label" ng-repeat="module in menus[selectedApp]">
- <span class="vicon-{{module.name | lowercase | nospace}}"></span>
+ <span style="font-size: 14px;" class="vicon-{{module.name | lowercase | nospace}}"></span>
<span class="vmodule-name">{{module.label}}</span>
</md-list-item>
</md-list>
- <md-divider ></md-divider>
+ <md-divider></md-divider>
<md-list>
<md-list-item md-ink-ripple class="md-1-line">
<div class="md-list-item-text">
diff --git a/layouts/v7/modules/Mobile/simple/Vtiger/Toolbar.tpl b/layouts/v7/modules/Mobile/simple/Vtiger/Toolbar.tpl
index a30addcc1c71c260356bcc857bb2c23274a2059e..7055498d5c332a6639dbd28635a3b5ad6a9aaf20 100644
--- a/layouts/v7/modules/Mobile/simple/Vtiger/Toolbar.tpl
+++ b/layouts/v7/modules/Mobile/simple/Vtiger/Toolbar.tpl
@@ -5,11 +5,7 @@
<md-button ng-click="navigationToggle()" class="md-icon-button" aria-label="side-menu-open">
<i class="mdi mdi-menu actionbar-icon"></i>
</md-button>
- <h2 flex>{{pageTitle}}</h2>
- <span flex></span>
- <md-button class="md-icon-button" aria-label="global-search">
- <i class="mdi mdi-magnify actionbar-icon"></i>
- </md-button>
+ <h2 flex class="toolbar-title">{{pageTitle}}</h2>
</div>
</md-toolbar>
</header>
diff --git a/layouts/v7/modules/Mobile/simple/resources/css/style.css b/layouts/v7/modules/Mobile/simple/resources/css/style.css
index 352f99cfd5814f17dba4d5bbf2ca99309e9b8285..b39dde5dd35bee870a6e580b05755abf92625507 100644
--- a/layouts/v7/modules/Mobile/simple/resources/css/style.css
+++ b/layouts/v7/modules/Mobile/simple/resources/css/style.css
@@ -31,7 +31,7 @@ md-backdrop{
}
.content-section{
height: 100%;
- padding-top: 65px;
+ padding-top: 56px;
box-sizing: border-box;
overflow-y: scroll;
}
@@ -138,6 +138,7 @@ md-input-container.app-dropdown > md-select:focus .md-select-label{
margin-bottom: -3px;
margin-left: 6px;
display: inline-block;
+ font-size: 14px;
}
.md-list-item-text span[class^='vicon'],span[class*='vicon']{
color: #777777;
@@ -188,6 +189,7 @@ md-tooltip{
width: 100%;
z-index: 30;
margin-top: -1px;
+ padding: 0px 10px;
}
.list-filters .change-filter{
text-overflow: ellipsis;
@@ -230,7 +232,7 @@ md-tooltip{
font-size: 1.2em;
}
.current-filter,.current-sort-field{
- width: 76%;
+ width: 80%;
display: inline-block;
padding-bottom: 0;
}
@@ -239,6 +241,11 @@ md-tooltip{
width: 15px;
margin: -4px 4px 0;
}
+.records-list md-list-item.md-3-line .md-list-item-text p{
+ font-size: 0.9em;
+ font-weight: normal;
+ color: black;
+}
.records-list md-list-item.md-3-line .md-list-item-text p.header-fields{
font-size: 0.8em;
}
@@ -284,7 +291,7 @@ md-list-item.md-no-proxy.load-more-link{
.actions-slider{
- background: #2c3b49;
+ background: #4e664e;
width: 100%;
height: 100%;
position: absolute;
@@ -301,10 +308,11 @@ md-list-item.md-no-proxy.load-more-link{
.actions-slider .md-icon-button{
background: transparent;
color: #ffffff !important;
- font-size: 2em;
+ font-size: 1.5em;
visibility: visible;
opacity: 1;
z-index: 30;
+ width: 100%;
}
/* Slider animation */
@@ -335,7 +343,6 @@ md-list-item.md-no-proxy.load-more-link{
position: relative;
}
.detail-content .fields-list .field-row .field-label{
- opacity: 0.6;
font-size: 0.8em;
}
.detail-content .fields-list .field-row .field-value{
@@ -381,6 +388,83 @@ form, .edit-content .md-list-item-text.field-row{
width: 100%;
height: 100%;
}
-md-input-container{
- /*padding-bottom: 15px;*/
+.edit-content md-input-container{
+ padding: 16px 0px;
+}
+
+md-list-item, md-list-item .md-list-item-inner{
+ min-height: 41px;
+}
+.letter-avatar {
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ background-color: #B7AAAA;
+ display: block;
+ text-align: center;
+ margin-right: 10px;
+ line-height: 2em;
+ font-size: 20px;
+ color: #ffffff;
+ text-transform: uppercase;
+}
+md-input-container md-select{
+ width: 100%;
+}
+md-select md-select-label.md-select-label{
+ padding-top : 0px;
+}
+.app-dropdown md-select{
+ width: 100%;
+}
+md-backdrop{
+ margin-top: 0px;
+}
+.editIcon{
+ font-size: 1.5em;
+ opacity: 0.5;
+ margin: 10px 5px;
+}
+
+md-autocomplete[md-floating-label]{
+ padding-bottom: 0px;
+}
+md-checkbox{
+ margin: 0px;
+}
+md-input-container .md-input{
+ width: 100%;
+}
+
+md-autocomplete input:not(.md-input){
+ padding: 0 2px;
+ border-bottom : 1px solid #f1f1f1;
+}
+md-autocomplete{
+ background: #ffffff !important;
+ box-shadow: none;
+}
+.toolbar-title{
+ margin-left: 10px;
+}
+.detail-header-label{
+ opacity: 0.6;
+ margin: 15px;
+}
+
+.lineItem-summaryBlock .lineItem-value{
+ text-align: right;
+ color:#006400;
+}
+.lineItem-summaryBlock{
+ font-size: 0.9em;
+}
+.lineItem-summaryBlock .lineItem-label{
+ text-align: left;
+}
+md-tabs md-tab-item.md-tab{
+ text-transform: none;
+}
+md-ink-bar{
+ background: gray !important;
}
\ No newline at end of file