From 3dbd096054fa221769eccbee6f83d4d3e48ae37e Mon Sep 17 00:00:00 2001
From: Hadi Nategh <hn@stylite.de>
Date: Mon, 7 Dec 2015 18:36:16 +0000
Subject: [PATCH] Mobile theme W.I.P.: - Implement addressbook listview - Add
 mobile fonts definitions

---
 addressbook/templates/mobile/index.xet        |  96 ++++++++++++++++++
 addressbook/templates/pixelegg/app.css        |  67 ++++++++++++
 addressbook/templates/pixelegg/app.less       |  78 ++++++++++++++
 .../templates/pixelegg/images/avatar.png      | Bin 0 -> 3487 bytes
 pixelegg/less/def_mobile.less                 |  20 ++++
 5 files changed, 261 insertions(+)
 create mode 100644 addressbook/templates/mobile/index.xet
 create mode 100644 addressbook/templates/pixelegg/images/avatar.png
 create mode 100644 pixelegg/less/def_mobile.less

diff --git a/addressbook/templates/mobile/index.xet b/addressbook/templates/mobile/index.xet
new file mode 100644
index 0000000000..0a2d7aed5c
--- /dev/null
+++ b/addressbook/templates/mobile/index.xet
@@ -0,0 +1,96 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE overlay PUBLIC "-//Stylite AG//eTemplate 2//EN" "http://www.egroupware.org/etemplate2.dtd">
+<!-- $Id$ -->
+<overlay>
+	<template id="addressbook.index.left" template="" lang="" group="0" version="1.3.001">
+		
+	</template>
+	<template id="addressbook.index.right_add" template="" lang="" group="0" version="1.7.001">
+		<hbox>
+			<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;"/>
+		</hbox>
+	</template>
+	<template id="addressbook.index.rows" template="" lang="" group="0" version="1.9.005">
+		<grid width="100%">
+			<columns>
+				<column width="60%"/>
+				<column width="39%"/>
+				<column width="58"/>
+			</columns>
+			<rows>
+				<row class="th">
+				</row>
+				<row class="$row_cont[cat_id] $row_cont[class]" valign="top">
+					<vbox class="addressbookCol1">
+						<vbox id="${row}[id]">
+							<description id="${row}[line1]" no_lang="1"/>
+							<description id="${row}[line2]" no_lang="1"/>
+						</vbox>
+						<hbox class="workphone">
+							<image src="phone.png"/>
+							<url-phone id="${row}[tel_work]" readonly="true" class="telNumbers"/>
+						</hbox>
+					</vbox>
+					<vbox class="addressbookCol2">
+						<url-email id="${row}[email]" readonly="true" />
+						<description value=" " id="${row}[adr_one_locality]" no_lang="1"/>
+						<hbox class="cellphone">
+							<image src="cellphone.png"/>
+							<url-phone id="${row}[tel_cell]" readonly="true" class="telNumbers"/>
+						</hbox>
+					</vbox>
+					<vbox class="addressbookCol3">
+						<hbox class="avatar">
+							<image src="${row}[photo]" height= "62px"/>
+						</hbox>
+					</vbox>
+				</row>
+			</rows>
+		</grid>
+	</template>
+	<template id="addressbook.index" template="" lang="" group="0" version="1.9.002">
+		<grid width="100%">
+			<columns>
+				<column/>
+				<column/>
+				<column/>
+				<column/>
+				<column/>
+				<column/>
+				<column/>
+				<column/>
+				<column/>
+			</columns>
+			<rows>
+				<row disabled="!@msg">
+					<description align="center" id="msg" no_lang="1" span="all" class="redItalic"/>
+					<description/>
+					<description/>
+					<description/>
+					<description/>
+					<description/>
+					<description/>
+					<description/>
+					<description/>
+				</row>
+				<row disabled="1">
+					<template id="addressbook.index.left"/>
+					<template align="right" id="addressbook.index.right_add"/>
+				</row>
+				<row>
+					<nextmatch id="nm" template="addressbook.index.rows" span="all"/>
+				</row>
+				<row class="noPrint dialogFooterToolbar" disabled="!@nm[selectcols]=/legacy_actions/">
+					<button statustext="Add a new contact" label="Add" id="add" onclick="window.open(egw::link('/index.php','menuaction=addressbook.addressbook_ui.edit'),'_blank','dependent=yes,width=850,height=440,scrollbars=yes,status=yes'); return false;"/>
+					<hbox align="right" span="all">
+						<buttononly statustext="Select action" label="Select action" id="legacy_actions" onclick="if (!egw_globalObjectManager.getObjectById('addressbook.'+({$cont[nm][do_email]} ? 'email' : 'index') + '.rows').executeActionImplementation(this, 'popup')) alert(egw::lang('You need to select some entries first!')); return false;;"/>
+						<button statustext="Check all" label="Check all" id="check_all" needed="1" onclick="egw_globalObjectManager.getObjectById('addressbook.'+({$cont[nm][do_email]} ? 'email' : 'index') + '.rows').toggleAllSelected(); return false;" image="arrow_ltr" class="checkAllArrow"/>
+					</hbox>
+				</row>
+			</rows>
+		</grid>
+	</template>
+</overlay>
diff --git a/addressbook/templates/pixelegg/app.css b/addressbook/templates/pixelegg/app.css
index 4e9972c783..43819a4ca1 100755
--- a/addressbook/templates/pixelegg/app.css
+++ b/addressbook/templates/pixelegg/app.css
@@ -481,3 +481,70 @@ input.et2_radiobox {
     margin-right: 6px;
   }
 }
+/* tablets and smartphones  */
+@media only screen and (max-device-width: 1024px) {
+  #addressbook-index table.egwGridView_outer tbody .addressbookCol3 div.avatar {
+    border: 1px solid silver;
+    border-radius: 50%;
+    overflow: hidden;
+    width: 50px;
+    height: 50px;
+    background-image: url(/egroupware/addressbook/templates/pixelegg/images/photo.png);
+    background-size: 35px 35px;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+  #addressbook-index table.egwGridView_outer tbody span[id^='addressbook-index_'][id$='line1]'] {
+    font-weight: bold;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    padding-bottom: 5px;
+  }
+  #addressbook-index table.egwGridView_outer tbody span[id^='addressbook-index_'][id$='line2]'] {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  #addressbook-index table.egwGridView_outer tbody .addressbookCol2 {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    width: 99%;
+  }
+  #addressbook-index table.egwGridView_outer tbody td[class^="gridCont"] {
+    position: relative;
+  }
+  #addressbook-index table.egwGridView_outer tbody td[class^="gridCont"] .et2_hbox.et2_box_widget.cellphone {
+    margin-left: -4px;
+    position: absolute;
+    bottom: 0;
+  }
+  #addressbook-index table.egwGridView_outer tbody td[class^="gridCont"] .workphone {
+    position: absolute;
+    bottom: 0;
+  }
+  #addressbook-index table.egwGridView_outer tbody span[id^='addressbook-index_'][id$='adr_one_locality]'] {
+    font-size: 8pt;
+    display: inline-block;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  #addressbook-index table.egwGridView_outer tbody a[id^='addressbook-index_'][id$='email]'] {
+    font-size: 8pt;
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding-bottom: 5px;
+  }
+  #addressbook-index table.egwGridView_outer tbody a[id^='addressbook-index_'][id$='tel_cell]'],
+  #addressbook-index table.egwGridView_outer tbody a[id^='addressbook-index_'][id$='tel_work]'] {
+    font-size: 8pt;
+    display: inline-block;
+    padding-left: 3px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+}
diff --git a/addressbook/templates/pixelegg/app.less b/addressbook/templates/pixelegg/app.less
index 8fe79715a4..bb80d591ec 100755
--- a/addressbook/templates/pixelegg/app.less
+++ b/addressbook/templates/pixelegg/app.less
@@ -14,6 +14,7 @@
 
 
 @import (reference) "../../../pixelegg/less/definitions.less";
+@import (reference) "../../../pixelegg/less/def_mobile.less";
 @import (less) "../default/app.css";
 
 
@@ -386,3 +387,80 @@ div.addressbook_edit_general_picture img {
 // END DIALOG #############################################################################
 
 } // Ende Media all
+
+
+/* tablets and smartphones  */
+@media only screen and (max-device-width:1024px) {
+	#addressbook-index {
+		table.egwGridView_outer tbody {
+			.addressbookCol3 div.avatar {
+				border: 1px solid silver;
+				border-radius: 50%;
+				overflow: hidden;
+				width: 50px;
+				height: 50px;
+				background-image: url(/egroupware/addressbook/templates/pixelegg/images/photo.png);
+				background-size: 35px 35px;
+				background-repeat: no-repeat;
+				background-position: center;
+			}
+			span[id^='addressbook-index_'][id$='line1]'] {
+				font-weight: bold;
+				overflow: hidden;
+				white-space: nowrap;
+				text-overflow: ellipsis;
+				padding-bottom: 5px;
+			}
+			span[id^='addressbook-index_'][id$='line2]']{
+				overflow: hidden;
+				white-space: nowrap;
+				text-overflow: ellipsis;
+			}
+			.addressbookCol2 {
+				text-overflow: ellipsis;
+				overflow: hidden;
+				white-space: nowrap;
+				width:99%;
+			}
+			td[class^="gridCont"]{
+				position:relative;
+				.et2_hbox.et2_box_widget.cellphone {
+					margin-left: -4px;
+					position: absolute;
+					bottom:0;
+				}
+				.workphone {
+					position: absolute;
+					bottom:0;
+				}
+			}
+			
+			span[id^='addressbook-index_'][id$='adr_one_locality]']
+			{
+				.mob-fontsize-s;
+				display: inline-block;
+				overflow: hidden;
+				white-space: nowrap;
+				text-overflow: ellipsis;
+				
+			}
+			a[id^='addressbook-index_'][id$='email]']{
+				.mob-fontsize-s;
+				display:block;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				padding-bottom: 5px;
+			}
+			a[id^='addressbook-index_'][id$='tel_cell]'],
+			a[id^='addressbook-index_'][id$='tel_work]']
+			{
+				.mob-fontsize-s;
+				display: inline-block;
+				padding-left: 3px;
+				overflow: hidden;
+				white-space: nowrap;
+				text-overflow: ellipsis;
+			}
+		}
+	}
+}
diff --git a/addressbook/templates/pixelegg/images/avatar.png b/addressbook/templates/pixelegg/images/avatar.png
new file mode 100644
index 0000000000000000000000000000000000000000..604f052c61d4401d18c07f685e03078da3dcdaa7
GIT binary patch
literal 3487
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

literal 0
HcmV?d00001

diff --git a/pixelegg/less/def_mobile.less b/pixelegg/less/def_mobile.less
new file mode 100644
index 0000000000..4e99b66a87
--- /dev/null
+++ b/pixelegg/less/def_mobile.less
@@ -0,0 +1,20 @@
+/**
+ * EGroupware: Stylite Pixelegg template
+ *
+ * Please do NOT change css-files directly, instead change less-files and compile them!
+ *
+ * @link http://www.egroupware.org
+ * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
+ * @author Hadi Nategh <hn@stylite.de>
+ * @package pixelegg
+ * @version $Id: $
+ */
+
+
+@mobile-fontsize-base : 10pt;
+
+.mob-fontsize-xs {font-size: @mobile-fontsize-base*0.6;}
+.mob-fontsize-s {font-size: @mobile-fontsize-base*0.8;}
+.mob-fontsize-n {font-size: @mobile-fontsize-base}
+.mob-fontsize-l {font-size: @mobile-fontsize-base*1.2;}
+.mob-fontsize-xl {font-size: @mobile-fontsize-base*1.5;}
\ No newline at end of file