From d479ed01a1aeb624f226bc6b91fffedea28366f1 Mon Sep 17 00:00:00 2001 From: Anton Tananaev Date: Mon, 10 Aug 2015 16:47:04 +1200 Subject: Implement mobile web layout --- web/app/controller/Root.js | 16 +++++++++++++-- web/app/view/main/MainMobile.js | 45 +++++++++++++++++++++++++++++++++++++++++ web/debug.html | 4 ++++ web/release.html | 4 ++++ 4 files changed, 67 insertions(+), 2 deletions(-) create mode 100644 web/app/view/main/MainMobile.js diff --git a/web/app/controller/Root.js b/web/app/controller/Root.js index 4b9a817ef..7ad8dacc2 100644 --- a/web/app/controller/Root.js +++ b/web/app/controller/Root.js @@ -20,8 +20,16 @@ Ext.define('Traccar.controller.Root', { requires: [ 'Traccar.LoginManager', 'Traccar.view.login.Login', - 'Traccar.view.main.Main' + 'Traccar.view.main.Main', + 'Traccar.view.main.MainMobile' ], + + init: function() { + var indicator = document.createElement('div'); + indicator.className = 'state-indicator'; + document.body.appendChild(indicator); + isPhone = parseInt(window.getComputedStyle(indicator).getPropertyValue('z-index'), 10); + }, onLaunch: function () { Traccar.LoginManager.server({ @@ -59,7 +67,11 @@ Ext.define('Traccar.controller.Root', { loadApp: function() { Ext.getStore('Devices').load(); Ext.getBody().empty(); - Ext.create('Traccar.view.main.Main'); + if (isPhone) { + Ext.create('Traccar.view.main.MainMobile'); + } else { + Ext.create('Traccar.view.main.Main'); + } } }); diff --git a/web/app/view/main/MainMobile.js b/web/app/view/main/MainMobile.js new file mode 100644 index 000000000..f32ad9fb1 --- /dev/null +++ b/web/app/view/main/MainMobile.js @@ -0,0 +1,45 @@ +/* + * Copyright 2015 Anton Tananaev (anton.tananaev@gmail.com) + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +Ext.define('Traccar.view.main.MainMobile', { + extend: 'Ext.container.Viewport', + + requires: [ + 'Traccar.view.device.Device', + 'Traccar.view.map.Map' + ], + + layout: 'border', + + defaults: { + collapsible: true, + split: true + }, + + items: [{ + collapsible: false, + region: 'center', + xtype: 'mapView', + header: false, + flex: 2 + }, { + region: 'south', + xtype: 'deviceView', + header: false, + flex: 1 + }] + +}); diff --git a/web/debug.html b/web/debug.html index 615f9c9e6..811451315 100644 --- a/web/debug.html +++ b/web/debug.html @@ -4,6 +4,10 @@ Traccar + diff --git a/web/release.html b/web/release.html index 110b17d11..9b10b9d7f 100644 --- a/web/release.html +++ b/web/release.html @@ -4,6 +4,10 @@ Traccar + -- cgit v1.2.3