Mobile theme W.I.P.:

- Fix view mode header
- Style AB view dialog

addressbook/inc/class.addressbook_ui.inc.php

@@ -740,6 +740,8 @@ class addressbook_ui extends addressbook_bo
 		}
 		if (isset($actions['export']['children']['csv']) && !importexport_helper_functions::has_definitions('addressbook','export')) unset($actions['export']['children']['csv']);
 		
+		// Intercept open action in order to open entry into view mode instead of edit
+		if (html::$ua_mobile) $actions['open']['onExecute'] = 'javaScript:app.addressbook.viewEntry';
 		//echo "<p>".__METHOD__."($do_email, $tid_filter, $org_view)</p>\n"; _debug_array($actions);
 
 		// Allow contacts to be dragged

addressbook/templates/mobile/view.xet

@@ -10,7 +10,6 @@
 			</columns>
 			<rows>
 				<row class="dialogHeadbar" >
-					<buttononly  id="edit" label="edit" class="button_edit"/>
 				</row>
 				<row>
 					<hbox  disabled="@hidebuttons" class="avatar">
@@ -18,7 +17,9 @@
 					</hbox>
 				</row>
 				<row>
-					<textbox id="n_fn" blur="Name" no_lang="1" tabindex="-1" class="cursorHand et2_fullWidth" onclick="jQuery('table.editname').css('display','inline'); var focElem = document.getElementById(form::name('n_prefix')); if (!(typeof(focElem) == 'undefined') &amp;&amp; typeof(focElem.focus)=='function') document.getElementById(form::name('n_prefix')).focus();" autocomplete="name" />
+					<hbox>
+						<textbox id="n_fn" blur="Name" no_lang="1" tabindex="-1" class="cursorHand et2_fullWidth" onclick="jQuery('table.editname').css('display','inline'); var focElem = document.getElementById(form::name('n_prefix')); if (!(typeof(focElem) == 'undefined') &amp;&amp; typeof(focElem.focus)=='function') document.getElementById(form::name('n_prefix')).focus();" autocomplete="name" />
+					</hbox>
 				</row>
 				<row>
 					<description for="org_name" value="Organisation"/>

addressbook/templates/pixelegg/app.css

@@ -493,35 +493,46 @@ input.et2_radiobox {
 }
 /* tablets and smartphones  */
 @media only screen and (max-device-width: 1024px) {
-  #addressbook-edit div.et2_hbox.avatar,
+  .et2_mobile_view div.et2_hbox.avatar {
-  .addressbook_view div.et2_hbox.avatar {
+    width: 100px;
+    display: block;
+    height: 100px;
+    margin: auto;
+  }
+  .et2_mobile_view div.et2_hbox.avatar img {
+    width: 100px;
+  }
+  .et2_mobile_view .et2_email {
+    color: #26537c;
+  }
+  .et2_mobile_view #addressbook-view_n_fn {
+    border: none;
+    text-align: center;
+    font-size: 15pt;
+  }
+  .et2_mobile_view #addressbook-view_n_fn span {
+    font-size: 15pt;
+  }
+  #addressbook-edit div.et2_hbox.avatar {
     width: 70px;
     display: block;
     height: 70px;
     margin: auto;
   }
-  #addressbook-edit div.et2_hbox.avatar img,
+  #addressbook-edit div.et2_hbox.avatar img {
-  .addressbook_view div.et2_hbox.avatar img {
     width: 70px;
   }
-  #addressbook-edit #addressbook-edit_n_fn,
+  #addressbook-edit #addressbook-edit_n_fn {
-  .addressbook_view #addressbook-edit_n_fn,
-  #addressbook-edit #_n_fn,
-  .addressbook_view #_n_fn {
     border: none;
     text-align: center;
     font-size: 12pt;
   }
   #addressbook-edit #addressbook-edit_adr_one_locality,
-  .addressbook_view #addressbook-edit_adr_one_locality,
   #addressbook-edit #addressbook-edit_adr_two_locality,
-  .addressbook_view #addressbook-edit_adr_two_locality,
+  #addressbook-edit #addressbook-edit_room {
-  #addressbook-edit #addressbook-edit_room,
-  .addressbook_view #addressbook-edit_room {
     margin-left: 0;
   }
-  #addressbook-edit a.et2_url.email,
+  #addressbook-edit a.et2_url.email {
-  .addressbook_view a.et2_url.email {
     display: none;
   }
   #addressbook-index table.egwGridView_outer tbody span[id^='addressbook-index_'][id$='line1]'] {

addressbook/templates/pixelegg/app.less

@@ -391,7 +391,30 @@ div.addressbook_edit_general_picture img {
 
 /* tablets and smartphones  */
 @media only screen and (max-device-width:1024px) {
-	#addressbook-edit, .addressbook_view {
+	.et2_mobile_view {
+		div.et2_hbox.avatar {
+			width: 100px;
+			display: block;
+			height: 100px;
+			margin: auto;
+
+			img {
+				width: 100px;
+			}
+		}
+		.et2_email {
+			color:#26537c;
+		}
+		#addressbook-view_n_fn {
+			border: none;
+			text-align: center;
+			span {
+				.mob-fontsize-xl;
+			}
+			.mob-fontsize-xl;
+		}
+	}
+	#addressbook-edit {
 		div.et2_hbox.avatar {
 			width: 70px;
 			display: block;
@@ -402,7 +425,7 @@ div.addressbook_edit_general_picture img {
 				width: 70px;
 			}
 		}
-		#addressbook-edit_n_fn, #_n_fn {
+		#addressbook-edit_n_fn {
 			border: none;
 			text-align: center;
 			.mob-fontsize-l;

phpgwapi/js/jsapi/app_base.js

@@ -405,24 +405,17 @@ var AppJS = Class.extend(
 			content = egw.dataGetUIDdata(id);
 			if (content.data) content = content.data;
 		}
+		
+		/* destroy generated etemplate for view mode in DOM*/
+		var destroy = function(){
+			self.viewContainer.remove();
+			delete self.viewTemplate;
+			delete self.viewContainer;
+		};
+		
 		// view container
 		this.viewContainer = jQuery(document.createElement('div'))
 				.addClass('et2_mobile_view')
-				.appendTo('body');
-		
-		// close button
-		var close = jQuery(document.createElement('span'))
-				.addClass('egw_fw_mobile_popup_close loaded')
-				.click(function(){
-							self.viewContainer.remove();
-							delete self.viewTemplate;
-							delete self.viewContainer;
-						})
-				.appendTo(this.viewContainer);
-		
-		// view template main container (content)
-		this.viewTemplate = jQuery(document.createElement('div'))
-				.attr('id', this.appname+'_view')
 				.css({"z-index":102,
 					width:"100%",
 					height:"100%",
@@ -433,6 +426,29 @@ var AppJS = Class.extend(
 					left:0,
 					overflow:'auto',
 					"padding-top":'60px'})
+				.attr('id','popupMainDiv')
+				.appendTo('body');
+		
+		// close button
+		var close = jQuery(document.createElement('span'))
+				.addClass('egw_fw_mobile_popup_close loaded')
+				.click(function(){destroy();})
+				.appendTo(this.viewContainer);
+		
+		// edit button
+		var edit = jQuery(document.createElement('span'))
+				.addClass('mobile-view-editBtn')
+				.click(function(){
+					egw.open(id_app[1], self.appname);
+					destroy();
+				})
+				.text(egw.lang('Edit'))
+				.appendTo(this.viewContainer);
+		
+		// view template main container (content)
+		this.viewTemplate = jQuery(document.createElement('div'))
+				.attr('id', this.appname+'-view')
+				.addClass('et2_mobile-view-container')
 				.appendTo(this.viewContainer);
 		
 		var etemplate = new etemplate2 (this.viewTemplate[0], false);

pixelegg/css/mobile.css

@@ -7486,6 +7486,7 @@ span.egw_tutorial_title {
 @media only screen and (min-width: 320px) and (max-width: 1290px) {
   body {
     /*Chosen*/
+    /* View mode styles*/
   }
   body #egw_fw_basecontainer.sidebar-toggle #egw_fw_top_toolbar div#egw_fw_menu {
     background-image: url(../images/topmenu_items/mobile/menu_white.png);
@@ -8029,4 +8030,29 @@ span.egw_tutorial_title {
   body .et2_taglist .ms-sel-ctn {
     background: white;
   }
+  body .et2_mobile_view .et2_mobile-view-container {
+    padding: 0 14px 0 7px;
+  }
+  body .et2_mobile_view table.et2_grid tr td {
+    padding: 10px 5px 10px 0;
+  }
+  body .mobile-view-editBtn {
+    position: fixed;
+    top: 2px;
+    left: 70px;
+    width: 50px;
+    height: 50px;
+    float: left;
+    z-index: 104;
+    font-size: 18pt !important;
+    color: white;
+    display: block;
+  }
+  body .mobile-view-editBtn:before {
+    content: "";
+    font-size: 24pt;
+    color: white;
+    padding-left: 5px;
+    font-weight: bold;
+  }
 }

pixelegg/css/mobile.less

@@ -1679,5 +1679,38 @@
 					background: white;
 				}
 			}
+			
+			/* View mode styles*/
+			.et2_mobile_view {
+				.et2_mobile-view-container {
+					padding:0 14px 0 7px;
+				}
+				table.et2_grid{
+					tr {
+						td {
+							padding: 10px 5px 10px 0;
+						}
+					}
+				}
+			}
+			.mobile-view-editBtn {
+				position: fixed;
+				top:2px;
+				left: 70px;
+				width: 50px;
+				height: 50px;
+				float:left;
+				z-index:104;
+				font-size:18pt !important;
+				color: white;
+				&:before {
+					content: "";
+					font-size: 24pt;
+					color: white;
+					padding-left: 5px;
+					font-weight: bold;
+				}
+				display: block;
+			}
 	}
 }