From 9332ce4a803ae63dc240e16c9716ef3be5d8beb9 Mon Sep 17 00:00:00 2001
From: Hadi Nategh <hn@stylite.de>
Date: Thu, 14 Jan 2016 10:56:48 +0000
Subject: [PATCH] Mobile theme WIP: - Add plus button for all apps list views

---
 addressbook/templates/mobile/index.xet |  3 +-
 admin/templates/mobile/index.xet       |  3 +-
 infolog/js/app.js                      | 35 ++++--------
 infolog/templates/mobile/index.xet     |  5 +-
 mail/templates/mobile/index.xet        |  1 +
 pixelegg/css/mobile.css                | 74 ++++++++++++++++----------
 pixelegg/css/mobile.less               | 62 ++++++++++++++-------
 resources/templates/mobile/show.xet    |  7 ++-
 timesheet/templates/mobile/index.xet   |  3 +-
 9 files changed, 114 insertions(+), 79 deletions(-)

diff --git a/addressbook/templates/mobile/index.xet b/addressbook/templates/mobile/index.xet
index f0b2e82a17..792bf099df 100644
--- a/addressbook/templates/mobile/index.xet
+++ b/addressbook/templates/mobile/index.xet
@@ -10,7 +10,7 @@
 			<menulist>
 				<menupopup align="right" label="Type" id="col_filter[tid]" empty_label="All"/>
 			</menulist>
-			<buttononly align="right" statustext="Add a new contact" label="Add" id="add" onclick="egw(window).openPopup(egw::link('/index.php','menuaction=addressbook.addressbook_ui.edit'),'850','440','_blank','addressbook',null,true); return false;"/>
+			<buttononly class="plus_button" align="right" parent_node="addressbook-index_plus_button_container" statustext="Add a new contact" id="plus_button" onclick="egw(window).openPopup(egw::link('/index.php','menuaction=addressbook.addressbook_ui.edit'),'850','440','_blank','addressbook',null,true); return false;"/>
 		</hbox>
 	</template>
 	<template id="addressbook.index.rows" template="" lang="" group="0" version="1.9.005">
@@ -86,6 +86,7 @@
 					<template align="right" id="addressbook.index.right_add"/>
 				</row>
 				<row>
+					<description id="plus_button_container" />
 					<nextmatch id="nm" template="addressbook.index.rows" span="all"/>
 				</row>
 				<row class="noPrint dialogFooterToolbar" disabled="!@nm[selectcols]=/legacy_actions/">
diff --git a/admin/templates/mobile/index.xet b/admin/templates/mobile/index.xet
index 8e338ce0a0..becb400ac9 100644
--- a/admin/templates/mobile/index.xet
+++ b/admin/templates/mobile/index.xet
@@ -3,7 +3,7 @@
 <!-- $Id$ -->
 <overlay>
 	<template id="admin.index.add" template="" lang="" group="0" version="1.9.001">
-		<buttononly label="Add" id="add" onclick='app.admin.account({id:"add"})'/>
+		<buttononly class="plus_button" id="add" parent_node="admin-index_plus_button_container" onclick='app.admin.account({id:"add"})'/>
 	</template>
 	<template id="admin.index.rows" template="" lang="" group="0" version="1.9.001">
 		<grid width="100%">
@@ -41,6 +41,7 @@
 	</template>
 	<template id="admin.index" template="" lang="" group="0" version="1.9.001">
 		<tree autoloading="admin_ui::ajax_tree" id="tree" onclick="app.admin.run" parent_node="admin_tree_target" std_images="bullet"/>
+		<description id="plus_button_container"/>
 		<nextmatch id="nm" template="admin.index.rows"/>
 		<iframe frameborder="1" height="100%" id="iframe" scrolling="auto" width="100%" disabled="true"/>
 	</template>
diff --git a/infolog/js/app.js b/infolog/js/app.js
index deb00a0f45..e4156d78d5 100644
--- a/infolog/js/app.js
+++ b/infolog/js/app.js
@@ -282,6 +282,11 @@ app.classes.infolog = AppJS.extend(
 	{
 		// Show / hide descriptions
         egw.css((dom_node && dom_node.id ? "#"+dom_node.id+' ' : '') + ".et2_box.infoDes","display:" + (show ? "block;" : "none;"));
+		if (egwIsMobile())
+		{
+			var $select = jQuery('.infoDetails');
+			(show)? $select.each(function(i,e){jQuery(e).hide();}): $select.each(function(i,e){jQuery(e).show();});
+		}
 	},
 
 	confirm_delete_2: function (_action, _senders)
@@ -805,35 +810,15 @@ app.classes.infolog = AppJS.extend(
 		//this.mailvelopeAvailable(this.toggleEncrypt);
 		var info_desc = this.et2.getWidgetById('info_des');
 
-		var options = { predefinedText: info_desc.value};
 		var self = this;
-		// check if we have some sort of reply to an encrypted message
-		// --> parse header, encrypted mail to quote and signature so Mailvelope understands it
-		var start_pgp = options.predefinedText.indexOf(this.begin_pgp_message);
-		if (start_pgp != -1)
-		{
-			var end_pgp = options.predefinedText.indexOf(this.end_pgp_message);
-			if (end_pgp != -1)
-			{
-				options = {
-					quotedMailHeader: start_pgp ? options.predefinedText.slice(0, start_pgp).replace(/> /mg, '').trim()+"\n" : "",
-					quotedMail: options.predefinedText.slice(start_pgp, end_pgp+this.end_pgp_message.length+1).replace(/> /mg, ''),
-					quotedMailIndent: start_pgp != 0,
-					predefinedText: options.predefinedText.slice(end_pgp+this.end_pgp_message.length+1).replace(/^> \s*/m,''),
-					keepAttachments:true
-				};
-			}
-		}
-
-		mailvelope.createEditorContainer('#infolog-edit-print_info_des', _keyring, options).then(function(_editor)
+		mailvelope.createDisplayContainer('#infolog-edit-print_info_des', info_desc.value, _keyring).then(function(_container)
 		{
 			var $info_des_dom = jQuery(self.et2.getWidgetById('info_des').getDOMNode());
-			$info_des_dom.children('iframe').height($info_des_dom.height());
-					$info_des_dom.children('span').hide();
-
-					//Trigger print action
+//			$info_des_dom.children('iframe').height($info_des_dom.height());
+			$info_des_dom.children('span').hide();
+			//Trigger print action
 			self.infolog_print_preview();
-				},
+		},
 		function(_err)
 		{
 			self.egw.message(_err, 'error');
diff --git a/infolog/templates/mobile/index.xet b/infolog/templates/mobile/index.xet
index bdbbbf6948..35656424b5 100644
--- a/infolog/templates/mobile/index.xet
+++ b/infolog/templates/mobile/index.xet
@@ -5,9 +5,7 @@
 	<template id="infolog.index.header_right" template="" lang="" group="0" version="1.9.001">
 		<hbox>
 			<description value="Add:" class="infolog_headertext"/>
-			<button statustext="Add a new ToDo" label="ToDo" id="add[task]" onclick="app.infolog.add_with_extras(widget,'task','$cont[action]','$cont[action_id]');" image="task"/>
-			<button statustext="Add a new Phonecall" label="Phonecall" id="add[phone]" onclick="app.infolog.add_with_extras(widget,'phone','$cont[action]','$cont[action_id]');" image="phone"/>
-			<button statustext="Add a new Note" label="Note" id="add[note]" onclick="app.infolog.add_with_extras(widget,'note','$cont[action]','$cont[action_id]');" image="note"/>
+			<button class="plus_button" parent_node="infolog-index_plus_button_container" statustext="Add a new ToDo" id="add[task]" onclick="app.infolog.add_with_extras(widget,'task','$cont[action]','$cont[action_id]');"/>
 		</hbox>
 	</template>
 	<template id="infolog.index.dates" template="" lang="" group="0" version="1.9.001">
@@ -73,6 +71,7 @@
 					<template id="header_right"/>
 				</row>
 				<row>
+					<description id="plus_button_container"/>
 					<nextmatch id="nm" template="infolog.index.rows"  header_left="infolog.index.dates" span="all"/>
 				</row>
 				<row>
diff --git a/mail/templates/mobile/index.xet b/mail/templates/mobile/index.xet
index 831f959773..b8480a2228 100644
--- a/mail/templates/mobile/index.xet
+++ b/mail/templates/mobile/index.xet
@@ -40,6 +40,7 @@
 	<template id="mail.index" template="" lang="" group="0" version="1.9.001">
 		<tree autoloading="mail.mail_ui.ajax_foldertree" id="nm[foldertree]" onclick="app.mail.mail_changeFolder" parent_node="mail-tree_target"/>
 		<html id="msg"/>
+		<buttononly id="composeButton" class="plus_button" onclick="app.mail.mail_compose(false);" parent_node="mail-index_msg"/>
 		<buttononly id="button[mailcreate]" onclick="app.mail.mail_compose(false);" label="Compose" parent_node="mail-index_buttonmailcreate"/>
 		<hbox class="mail-index_vacation"><vbox>
 			<description id="nm[vacationnotice]" class="@nm[vacationclass]"/>
diff --git a/pixelegg/css/mobile.css b/pixelegg/css/mobile.css
index 048cfe3658..64bf2c1c2a 100644
--- a/pixelegg/css/mobile.css
+++ b/pixelegg/css/mobile.css
@@ -1277,7 +1277,7 @@
     margin-top: 2px;
     direction: ltr;
   }
-  .et2_toolbar_activeList {
+  .et2_toolbar_more {
     position: relative;
     float: right;
     direction: rtl;
@@ -2186,7 +2186,6 @@ body {
  * @package pixelegg
  * @version $Id$
  */
-@import-once "def_colors.less";
 #socialMedia {
   position: relative;
   bottom: 20px;
@@ -4264,7 +4263,7 @@ td.message span.message {
   text-decoration: none;
   height: 32px;
   /*font-size: 1.1em;*/
-  font-size: 12.100000000000001px;
+  font-size: 12.1px;
   line-height: 1.5em;
 }
 #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul li a:hover {
@@ -4288,7 +4287,7 @@ td.message span.message {
 }
 #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_home:before {
   padding-right: 20px;
-  font-size: 12.100000000000001px;
+  font-size: 12.1px;
   content: " ";
   background-image: url(../images/topmenu_items/home.png);
   background-repeat: no-repeat;
@@ -4684,7 +4683,7 @@ td.message span.message {
   padding-left: 3em;
   color: #999999;
   /*font-size: 12px;*/
-  font-size: 12.100000000000001px;
+  font-size: 12.1px;
   line-height: 17px;
 }
 #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_header object {
@@ -4856,7 +4855,7 @@ td.message span.message {
   margin: 5px 0px 3px 5px;
   padding: 0px 0px 0px 15px;
   line-height: 1em;
-  font-size: 12.100000000000001px;
+  font-size: 12.1px;
   background-image: url(../images/arrow_left.png);
   background-repeat: no-repeat;
   background-position: left center;
@@ -7171,7 +7170,7 @@ span.egw_tutorial_title {
     margin: 5px 0px 3px 5px;
     padding: 0px 0px 0px 15px;
     line-height: 1em;
-    font-size: 12.100000000000001px;
+    font-size: 12.1px;
     background-image: url(../images/arrow_left.png);
     background-repeat: no-repeat;
     background-position: left center;
@@ -7509,15 +7508,29 @@ span.egw_tutorial_title {
   }
   body button.plus_button {
     position: absolute !important;
-    bottom: 30px !important;
-    right: 30px !important;
-    z-index: 1000 !important;
-    border: 1px solid white !important;
-    border-radius: 50% !important;
-    display: inline !important;
-    width: 60px !important;
-    height: 60px !important;
+    right: 15px;
+    bottom: 15px;
+    border-radius: 50%;
+    width: 60px;
+    height: 60px;
+    background-position: center;
+    z-index: 100;
+    background-color: #0c5da5;
+    border: none;
+    box-shadow: 0px 1px 5px 3px silver;
     background-image: none !important;
+    margin: 0;
+    padding: 0;
+  }
+  body button.plus_button:after {
+    content: '+';
+    font-weight: bold;
+    font-size: 34pt;
+    color: #fafafa;
+  }
+  body button.plus_button:hover,
+  body button.plus_button:active {
+    background-color: #0c5da5;
   }
   body .et2_nextmatch .nextmatch_header_row {
     background-color: background-color-egw-dark;
@@ -7570,6 +7583,15 @@ span.egw_tutorial_title {
   body .et2_nextmatch .egwGridView_outer thead tr {
     visibility: hidden;
   }
+  body .et2_nextmatch .search.searchOn input {
+    border: none;
+    backgroun: #0c5da5;
+    outline: none;
+    position: absolute;
+    left: 110px;
+    width: 80%;
+    height: 50px;
+  }
   body .et2_nextmatch .search {
     background: #0c5da5;
     margin-top: 0;
@@ -7578,22 +7600,12 @@ span.egw_tutorial_title {
   body .et2_nextmatch .search button {
     height: 50px;
     width: 50px;
+    background-repeat: no-repeat;
     font-size: large;
     background-color: #0c5da5;
     border: none;
     margin: 0;
-    border-right: 1px solid silver;
     color: white;
-    background-image: none;
-  }
-  body .et2_nextmatch .search button:active,
-  body .et2_nextmatch .search button:hover {
-    background: transparent;
-    color: white;
-  }
-  body .et2_nextmatch .search button:focus {
-    color: white;
-    box-shadow: none !important;
   }
   body .et2_nextmatch .search button.nm_toggle_header {
     background-position: center;
@@ -7657,13 +7669,15 @@ span.egw_tutorial_title {
     content: "\21E7";
   }
   body .et2_nextmatch .search input {
-    width: 20%;
+    width: 50px;
     height: 50px;
     font-size: large;
     margin: 0;
     border: 0;
+    opacity: 0;
     background-color: #0c5da5;
     color: white;
+    position: absolute;
   }
   body .et2_nextmatch .search input:active {
     border: none;
@@ -7673,8 +7687,11 @@ span.egw_tutorial_title {
     border: none;
     backgroun: #0c5da5;
     outline: none;
+    opacity: 1;
+    left: 110px;
     position: absolute;
     width: 100%;
+    height: 50px;
   }
   body .et2_nextmatch .header_row_right {
     height: 50px;
@@ -7744,6 +7761,9 @@ span.egw_tutorial_title {
     background-color: #ffc200;
     border: none;
   }
+  body .et2_nextmatch .egwGridView_outer thead {
+    max-height: 1px;
+  }
   body .et2_nextmatch .egwGridView_outer thead tr th {
     font-size: large;
   }
diff --git a/pixelegg/css/mobile.less b/pixelegg/css/mobile.less
index 1b035f3a09..5be3f48f07 100644
--- a/pixelegg/css/mobile.less
+++ b/pixelegg/css/mobile.less
@@ -1046,15 +1046,28 @@
 		}
 		button.plus_button {
 			position: absolute !important;
-			bottom: 30px !important;
-			right: 30px !important;
-			z-index: 1000 !important;
-			border: 1px solid white !important;
-			border-radius: 50% !important;
-			display: inline !important;
-			width: 60px !important;
-			height: 60px !important;
+			right: 15px;
+			bottom: 15px;
+			border-radius: 50%;
+			width: 60px;
+			height: 60px;
+			background-position: center;
+			z-index: 100;
+			background-color: #0c5da5;
+			border: none;
+			box-shadow: 0px 1px 5px 3px silver;
 			background-image: none !important;
+			margin: 0;
+			padding: 0;
+			&:after {
+				content: '+';
+				font-weight: bold;
+				font-size: 34pt;
+				color: #fafafa;
+			}
+			&:hover, &:active {
+				background-color: #0c5da5;
+			}
 		}
 		.et2_nextmatch {
 			.nextmatch_header_row 
@@ -1118,6 +1131,17 @@
 					}
 				}
 			}
+			.search.searchOn {
+				input {
+					border:none;
+					backgroun:@mobile-nm-search-bg;
+					outline: none;
+					position: absolute;
+					left: 110px;
+					width:80%;
+					height:@mobile-elem-height;
+				}
+			}
 			.search {
 				background: @mobile-nm-search-bg;
 				margin-top: 0;
@@ -1125,22 +1149,14 @@
 				button {
 					height: @mobile-elem-height;
 					width: @mobile-button-width;
+					background-repeat: no-repeat;
 					font-size:large;
 					background-color: @mobile-nm-search-bg;
 					border: none;
 					margin:0;
-					border-right: 1px solid silver;
 					color: white;
-					background-image:none;
-					&:active, &:hover {
-						background: transparent;
-						color: white;
-					}
-					&:focus {
-						color: white;
-						box-shadow:none !important;
-					}
 				}
+				
 				button.nm_toggle_header {
 					background-position: center;
 					background-repeat: no-repeat;
@@ -1206,13 +1222,15 @@
 					}
 				}
 				input {
-					width: 20%;
+					width: 50px;
 					height: @mobile-elem-height;
 					font-size: large;
 					margin:0;
 					border:0;
+					opacity: 0;
 					background-color:@mobile-nm-search-bg;
 					color: white;
+					position: absolute;
 					&:active{
 						border:none;
 						background: @mobile-nm-search-bg;
@@ -1221,8 +1239,11 @@
 						border:none;
 						backgroun:@mobile-nm-search-bg;
 						outline: none;
+						opacity: 1;
+						left:110px;
 						position: absolute;
 						width:100%;
+						height:@mobile-elem-height;
 					}
 				}
 			}
@@ -1300,6 +1321,9 @@
 				}
 			}
 			.egwGridView_outer {
+				thead{
+					max-height: 1px;
+				}
 				thead tr th {
 					font-size: large;
 				}
diff --git a/resources/templates/mobile/show.xet b/resources/templates/mobile/show.xet
index 571285d8fb..abd69eba9c 100644
--- a/resources/templates/mobile/show.xet
+++ b/resources/templates/mobile/show.xet
@@ -3,7 +3,7 @@
 <!-- $Id$ -->
 <overlay>
 	<template id="resources.show.nm_right" template="" lang="" group="0" version="1.9.002">
-		<buttononly label="Add" id="add" onclick="window.open(egw::link('/index.php','menuaction=resources.resources_ui.edit'),'','dependent=yes,width=800,height=600,location=no,menubar=no,toolbar=no,scrollbars=yes,status=yes'); return false; return false;"/>
+		<buttononly class="plus_button" parent_node="resources-show_plus_button_container" id="add_button" onclick="window.open(egw::link('/index.php','menuaction=resources.resources_ui.edit'),'','dependent=yes,width=800,height=600,location=no,menubar=no,toolbar=no,scrollbars=yes,status=yes'); return false; return false;"/>
 	</template>
 	<template id="resources.show.rows" template="" lang="" group="0" version="1.9.003">
 		<grid width="100%">
@@ -63,7 +63,10 @@
 			</columns>
 			<rows>
 				<row disabled="!@msg">
-					<description align="center" id="msg" span="all" class="message"/>
+						<description align="center" id="msg" span="all" class="message"/>
+				</row>
+				<row>
+					<description id="plus_button_container"/>
 				</row>
 				<row>
 					<nextmatch id="nm" no_lang="1" template="resources.show.rows"/>
diff --git a/timesheet/templates/mobile/index.xet b/timesheet/templates/mobile/index.xet
index dc484ea76e..dbb05fa9af 100644
--- a/timesheet/templates/mobile/index.xet
+++ b/timesheet/templates/mobile/index.xet
@@ -11,7 +11,7 @@
 		</hbox>
 	</template>
 	<template id="timesheet.index.add" template="" lang="" group="0" version="1.7.001">
-		<buttononly label="Add" id="add" onclick="egw.open('timesheet');"/>
+		<buttononly id="add"  class="plus_button" onclick="egw.open('timesheet');" parent_node="timesheet-index_plus_button_container"/>
 	</template>
 	<template id="timesheet.index.rows" template="" lang="" group="0" version="1.9.001">
 		<grid width="100%">
@@ -54,6 +54,7 @@
 		</grid>
 	</template>
 	<template id="timesheet.index" template="" lang="" group="0" version="1.9.001">
+		<description id="plus_button_container"/>
 		<nextmatch id="nm" options="timesheet.index.rows" header_left="timesheet.index.dates"/>
 	</template>
 </overlay>