Initial mobile theme using ionic

pull/91/head
Francis Lachapelle 2014-08-06 16:11:39 -04:00
parent f248f81583
commit 459c040d8a
7 changed files with 593 additions and 0 deletions

View File

@ -0,0 +1,66 @@
<?xml version="1.0" standalone="yes"?>
<!DOCTYPE container>
<container
xmlns="http://www.w3.org/1999/xhtml"
xmlns:xml="http://www.w3.org/XML/1998/namespace"
xmlns:var="http://www.skyrix.com/od/binding"
xmlns:const="http://www.skyrix.com/od/constant"
xmlns:rsrc="OGo:url"
xmlns:label="OGo:label"
><var:string var:value="doctype" const:escapeHTML="NO" />
<html const:xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en" const:lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"/>
<title><var:string value="title"/></title>
<link rsrc:href="css/mobile.css" rel="stylesheet"><!-- mobile.css --></link>
<!-- ionic/angularjs js -->
<script rsrc:src="js/vendor/ionic.bundle.js"><!-- ionic --></script>
<!-- your app's js -->
<script type="text/javascript">
var ApplicationBaseURL = '<var:string value="modulePath"/>';
var ResourcesURL = '<var:string value="applicationPath"/>.woa/WebServerResources';
var minimumSearchLength = <var:string value="minimumSearchLength"/>;
<var:if condition="isSuperUser"
>var IsSuperUser = true;
</var:if>
<var:if condition="isSuperUser" const:negate="YES"
>var IsSuperUser = false;
</var:if>
<var:if condition="usesCASAuthentication"
>var usesCASAuthentication = true;
</var:if>
<var:if condition="usesCASAuthentication" const:negate="YES"
>var usesCASAuthentication = false;
</var:if>
<var:if condition="shortUserNameForDisplay" const:value="anonymous"
const:negate="YES"
>var UserFolderURL = '<var:string value="userFolderPath" const:escapeHTML="NO"/>';
var UserLogin = '<var:string value="shortUserNameForDisplay" const:escapeHTML="NO"/>';
var UserLanguage = '<var:string value="userLanguage" const:escapeHTML="NO"/>';
</var:if>
<var:string value="commonLocalizableStrings" const:escapeHTML="NO"/>
<var:string value="productLocalizableStrings" const:escapeHTML="NO"/>
</script>
<script type="text/javascript" rsrc:src="js/vendor/underscore-min.js"><!-- space --></script>
<script type="text/javascript" rsrc:src="js/Common/utils.js"><!-- space --></script>
<script type="text/javascript" rsrc:src="js/Common/ui-mobile.js"><!-- space --></script>
<var:if condition="hasProductSpecificJavaScript"><script type="text/javascript"
var:src="productJavaScriptURL"><!-- space --></script></var:if>
<var:if condition="hasPageSpecificJavaScript"><script type="text/javascript"
var:src="pageJavaScriptURL"><!-- space --></script></var:if>
<var:foreach list="additionalJSFiles" item="item"
><script type="text/javascript" var:src="item"><!-- space --></script>
</var:foreach>
<var:foreach list="systemAdditionalJSFiles" item="item"
><script type="text/javascript" var:src="item"><!-- space --></script>
</var:foreach>
</head>
<var:component-content/>
</html>
</container>

View File

@ -0,0 +1,139 @@
<?xml version='1.0' standalone='yes'?>
<!DOCTYPE var:component>
<var:component
xmlns="http://www.w3.org/1999/xhtml"
xmlns:var="http://www.skyrix.com/od/binding"
xmlns:const="http://www.skyrix.com/od/constant"
xmlns:uix="OGo:uix"
xmlns:label="OGo:label"
xmlns:rsrc="OGo:url"
const:userDefaultsKeys="SOGoContactsCategories"
const:jsFiles="Common/resource.js, Contacts/card-model.js, Contacts/addressbook-model.js"
className="UIxPageFrame"
title="name"
var:popup="isPopup">
<script type="text/javascript">
var contactFolders = <var:string value="contactFolders" const:escapeHTML="NO"/>;
</script>
<body data-ng-app="SOGo.Contacts">
<ion-nav-view><!-- main view --></ion-nav-view>
<script type="text/ng-template" id="menu.html">
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-stable nav-title-slide-ios7">
<ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"><!-- back --></i> Back</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent" animation="slide-left-right"><!-- content --></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<header class="bar bar-header bar-stable">
<h1 class="title">{{UserLogin}}</h1>
</header>
<ion-content class="has-header">
<ion-list>
<ion-item class="nav-clear menu-close" href="#/app/addressbook">
<var:string label:value="Address Books"/>
</ion-item>
</ion-list>
<a class="button button-full button-assertive" href="#" data-ng-href="{{UserFolderURL}}logoff?theme=mobile"><var:string label:value="Disconnect"/></a>
<a class="button button-small button-outline button-stable button-block" href="#" data-ng-href="{{ApplicationBaseURL}}"><var:string label:value="Desktop Version"/></a>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</script>
<script type="text/ng-template" id="addressbooks.html">
<ion-view title="Address Books">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"><!-- menu toggle --></button>
</ion-nav-buttons>
<ion-content class="has-header">
<ion-list>
<ion-item ng-repeat="folder in addressbooks" option-buttons="buttons" href="#/app/addressbook/{{folder.id}}" class="item-icon-right">
{{folder.name}}
<i class="icon ion-ios7-arrow-right"><!-- right arrow icon --></i>
<ion-option-button class="button-info"
ng-click="edit(item)"><var:string label:value="Edit"/></ion-option-button>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
</script>
<script type="text/ng-template" id="addressbook.html">
<ion-view title="{{addressbook.name}}">
<ion-content class="has-header">
<ion-list>
<ion-item class="item-input">
<i class="icon ion-search placeholder-icon"><!-- search --></i>
<input type="text"
placeholder="Search"
data-ng-model="search.filter"
data-ng-keyup="doSearch($event)"/>
</ion-item>
</ion-list>
<ion-list>
<ion-item ng-repeat="card in addressbook.cards" option-buttons="buttons" href="#/app/addressbook/{{addressbook.id}}/{{card.c_name}}" class="item-icon-right">
{{card.c_cn || card.c_mail}}
<i class="icon ion-ios7-arrow-right"><!-- right arrow icon --></i>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
</script>
<script type="text/ng-template" id="card.html">
<ion-view title="{{addressbook.card.c_cn}}">
<ion-nav-buttons side="right">
<button class="button button-clear button-positive" ng-click="edit()">Edit</button>
</ion-nav-buttons>
<ion-content padding="10" class="has-header">
<h4 data-ng-bind-html="addressbook.card.$fullname()"><!-- fullname --></h4>
<p>{{addressbook.card.$description()}}</p>
<ion-list class="list-clear" data-ng-show="addressbook.card.emails">
<ion-item ng-repeat="email in addressbook.card.emails"
href="{{UserFolderURL}}Mail/Compose/{{email.value}}"
class="item-icon-right">
<i class="icon ion-email"><!-- icon --></i>
<small>{{email.type}}</small> {{email.value}}
</ion-item>
</ion-list>
<ion-list class="list-clear" data-ng-show="addressbook.card.phones">
<ion-item ng-repeat="phone in addressbook.card.phones"
href="tel:{{phone.value}}"
class="item-icon-right">
<i class="icon ion-ios7-telephone-outline"><!-- icon --></i>
<small>{{phone.type}}</small> {{phone.value}}
</ion-item>
</ion-list>
<ion-list class="list-clear" data-ng-show="addressbook.card.urls">
<ion-item ng-repeat="url in addressbook.card.urls"
href="{{url.value}}"
class="item-icon-right">
<i class="icon ion-link"><!-- icon --></i>
<small>{{url.type}}</small> {{url.value}}
</ion-item>
</ion-list>
<ion-list class="list-clear" data-ng-show="addressbook.card.addresses">
<ion-item ng-repeat="address in addressbook.card.addresses">
<small>{{address.type}}</small>
<address data-sg-address="address"><!-- address --></address>
</ion-item>
</ion-list>
<ion-list class="list-clear" data-ng-show="addressbook.card.note">
<ion-item>
<small><var:string label:value="note"/></small>
{{addressbook.card.note}}
</ion-item>
</ion-list>
</ion-content>
</ion-view>
</script>
</body>
</var:component>

View File

@ -0,0 +1,79 @@
<?xml version='1.0' standalone='yes'?>
<!DOCTYPE var:component>
<var:component
xmlns="http://www.w3.org/1999/xhtml"
xmlns:var="http://www.skyrix.com/od/binding"
xmlns:const="http://www.skyrix.com/od/constant"
xmlns:uix="OGo:uix"
xmlns:label="OGo:label"
xmlns:rsrc="OGo:url"
const:jsFiles="Common/SOGoAuthentication.js"
className="UIxPageFrame"
title="name"
var:popup="isPopup">
<body data-ng-app="SOGo.RootPage">
<ion-nav-view><!-- main view --></ion-nav-view>
<script type="text/ng-template" id="menu.html">
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-stable nav-title-slide-ios7">
<ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"><!-- back --></i> Back</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent" animation="slide-left-right"><!-- content --></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-content padding="true">
<img class="full-image" alt="SOGo" rsrc:src="img/sogo-logo.png"/>
<a class="button button-balanced button-block button-clear" href="http://sogo.nu/" target="_new">sogo.nu</a>
<small>Version <var:string value="version"/> <span class="buildDate">(<var:string value="buildDate" />)</span></small>
<p><var:string label:value="AboutBox" const:escapeHTML="NO"/></p>
<img class="full-image" const:alt="Inverse" rsrc:src="img/inverse.png"/>
<a class="button button-positive button-block button-clear" href="http://inverse.ca/" target="_new">inverse.ca</a>
<a class="button button-small button-outline button-stable button-block" href="#" data-ng-href="{{ApplicationBaseURL}}"><var:string label:value="Desktop Version"/></a>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</script>
<script type="text/ng-template" id="login.html">
<ion-view label:title="Login">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"><!-- menu toggle --></button>
</ion-nav-buttons>
<ion-content class="has-header">
<form name="loginForm" data-ng-submit="login(creds)">
<ion-list>
<ion-item class="item-input item-floating-label">
<span class="input-label"><var:string label:value="Username"/></span>
<input type="text" placeholder="username" ng-model="creds.username" required="required"/>
</ion-item>
<ion-item class="item-input item-floating-label">
<span class="input-label"><var:string label:value="Password"/></span>
<input type="password" placeholder="password" ng-model="creds.password" required="required"/>
</ion-item>
<ion-item class="item-input item-select">
<div class="input-label"><var:string label:value="Language"/></div>
<var:popup const:name="language"
const:data-ng-model="creds.language"
list="languages"
item="item"
var:value="item"
string="languageText"
label:noSelectionString="choose"
/>
</ion-item>
</ion-list>
<ion-checkbox data-ng-model="creds.rememberLogin"><var:string label:value="Remember username"/></ion-checkbox>
<p class="padding"><input class="button button-block button-positive" type="submit" label:value="Connect"/></p>
</form>
</ion-content>
</ion-view>
</script>
</body>
</var:component>

View File

@ -0,0 +1,41 @@
/* -*- Mode: javascript; indent-tabs-mode: nil; c-basic-offset: 4 -*- */
/* JavaScript for SOGoContacts */
(function() {
'use strict';
/* Constructor */
function Dialog() {
}
Dialog.alert = function(title, content) {
var alertPopup = this.$ionicPopup.alert({
title: title,
template: content
});
// alertPopup.then(function(res) {
// console.log('Thank you for not eating my delicious ice cream cone');
// });
};
Dialog.$factory = ['$ionicPopup', function($ionicPopup) {
angular.extend(Dialog, { $ionicPopup: $ionicPopup });
return Dialog; // return constructor
}];
angular.module('SOGo.UIMobile', ['ionic'])
.factory('sgDialog', Dialog.$factory);
// angular.module('SOGo').factory('sgDialog', Dialog);
// Dialog.prototype.alert = function(title, content) {
// var alertPopup = $ionicPopup.alert({
// title: title,
// template: content
// });
// alertPopup.then(function(res) {
// console.log('Thank you for not eating my delicious ice cream cone');
// });
// };
})();

View File

@ -0,0 +1,167 @@
/* -*- Mode: javascript; indent-tabs-mode: nil; c-basic-offset: 4 -*- */
/* JavaScript for SOGoContacts (mobile) */
(function() {
'use strict';
angular.module('SOGo.Common', []);
angular.module('SOGo.Contacts', ['ionic', 'SOGo.Common', 'SOGo.Contacts'])
.constant('sgSettings', {
'baseURL': '/SOGo/so/francis/Contacts'
})
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "menu.html",
controller: 'AppCtrl'
})
.state('app.addressbooks', {
url: "/addressbooks",
views: {
'menuContent': {
templateUrl: "addressbooks.html",
controller: 'AddressBooksCtrl'
}
}
})
.state('app.addressbook', {
url: "/addressbook/:addressbook_id",
views: {
'menuContent': {
templateUrl: "addressbook.html",
controller: 'AddressBookCtrl'
}
}
})
.state('app.contact', {
url: "/addressbook/:addressbook_id/:card_id",
views: {
'menuContent': {
templateUrl: "card.html",
controller: 'CardCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/addressbooks');
})
// .directive('sgAddress', function() {
// return {
// restrict: 'A',
// replace: false,
// scope: { data: '=sgAddress' },
// controller: ['$scope', function($scope) {
// $scope.addressLines = function(data) {
// var lines = [];
// if (data.street) lines.push(data.street);
// if (data.street2) lines.push(data.street2);
// var locality_region = [];
// if (data.locality) locality_region.push(data.locality);
// if (data.region) locality_region.push(data.region);
// if (locality_region.length > 0) lines.push(locality_region.join(', '));
// if (data.country) lines.push(data.country);
// if (data.postalcode) lines.push(data.postalcode);
// return lines.join('<br>');
// };
// }],
// template: '<address ng-bind-html="addressLines(data)"></address>'
// }
// })
.controller('AppCtrl', ['$scope', '$http', function($scope, $http) {
$scope.UserLogin = UserLogin;
$scope.UserFolderURL = UserFolderURL;
$scope.ApplicationBaseURL = ApplicationBaseURL;
// $scope.logout = function(url) {
// $http.get(url)
// .success(function(data, status, headers) {
// console.debug(headers);
// });
// };
}])
.controller('AddressBooksCtrl', ['$scope', '$rootScope', '$timeout', 'sgAddressBook', function($scope, $rootScope, $timeout, AddressBook) {
// Initialize with data from template
$scope.addressbooks = AddressBook.$all(contactFolders);
// $scope.select = function(rowIndex) {
// $rootScope.selectedAddressBook = $rootScope.addressbooks[rowIndex];
// };
// $scope.rename = function() {
// console.debug("rename folder");
// $scope.editMode = $rootScope.addressbook.id;
// //focus('folderName');
// };
// $scope.save = function() {
// console.debug("save addressbook");
// $rootScope.addressbook.$save()
// .then(function(data) {
// console.debug("saved!");
// $scope.editMode = false;
// }, function(data, status) {
// console.debug("failed");
// });
// };
}])
.controller('AddressBookCtrl', ['$scope', '$rootScope', '$stateParams', 'sgAddressBook', function($scope, $rootScope, $stateParams, AddressBook) {
var id = $stateParams.addressbook_id;
$rootScope.addressbook = AddressBook.$find(id);
$scope.search = { 'status': null, 'filter': null, 'last_filter': null };
$scope.doSearch = function(keyEvent) {
if ($scope.search.last_filter != $scope.search.filter) {
if ($scope.search.filter.length > 2) {
$rootScope.addressbook.$filter($scope.search.filter).then(function(data) {
if (data.length == 0)
$scope.search.status = 'no-result';
else
$scope.search.status = '';
});
}
else if ($scope.search.filter.length == 0) {
$scope.searchStatus = '';
$rootScope.addressbook = AddressBook.$find(id);
}
else {
$scope.search.status = 'min-char';
$rootScope.addressbook.cards = [];
}
}
$scope.search.last_filter = $scope.search.filter;
};
}])
.controller('CardCtrl', ['$scope', '$rootScope', '$stateParams', 'sgAddressBook', 'sgCard', function($scope, $rootScope, $stateParams, AddressBook, Card) {
$scope.UserFolderURL = UserFolderURL;
if (!$rootScope.addressbook) {
$rootScope.addressbook = AddressBook.$find($stateParams.addressbook_id);
}
$rootScope.addressbook.$getCard($stateParams.card_id);
}])
})();

View File

@ -0,0 +1,66 @@
/* -*- Mode: javascript; indent-tabs-mode: nil; c-basic-offset: 4 -*- */
/* JavaScript for SOGoRootPage (mobile) */
(function() {
'use strict';
angular.module('SOGo.RootPage', ['SOGo.Authentication', 'SOGo.UIMobile', 'ionic'])
.constant('sgSettings', {
'baseURL': '/SOGo/so/francis/'
})
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "menu.html",
controller: 'AppCtrl'
})
.state('app.login', {
url: "/login",
views: {
'menuContent': {
templateUrl: "login.html",
controller: 'LoginCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/login');
})
.controller('AppCtrl', function($scope) {
$scope.ApplicationBaseURL = ApplicationBaseURL;
})
.controller('LoginCtrl', ['$scope', 'Authentication', 'sgDialog', function($scope, Authentication, Dialog) {
$scope.creds = { 'username': null, 'password': null };
$scope.login = function(creds) {
Authentication.login(creds)
.then(function(url) {
window.location.href = url;
}, function(msg) {
Dialog.alert(l('Warning'), msg.error);
});
};
}]);
})();

View File

@ -0,0 +1,35 @@
@import "ionic/ionic";
.list-clear {
.list {
border-top: 1px solid $item-light-border;
ion-item {
border: 0;
&, a {
padding-top: 5px !important;
padding-bottom: 5px !important;
}
address {
margin-bottom: 5px !important;
}
}
}
}
ion-content {
a {
&.button {
margin-left: 5px;
margin-right: 5px;
}
}
}
ion-item {
small {
display: block;
color: $positive;
}
.list-clear & {
}
}