From 163e1fdcc2d0307362b3a814e6580424dbfd1831 Mon Sep 17 00:00:00 2001
From: Hadi Nategh <hn@stylite.de>
Date: Mon, 7 Dec 2015 18:41:19 +0000
Subject: [PATCH] Mobile theme W.I.P.: - Implement template and styling for
 timesheet's listview

---
 timesheet/templates/mobile/index.xet  | 57 +++++++++++++++++++++++++++
 timesheet/templates/pixelegg/app.css  | 37 +++++++++++++++++
 timesheet/templates/pixelegg/app.less | 45 ++++++++++++++++++++-
 3 files changed, 138 insertions(+), 1 deletion(-)
 create mode 100644 timesheet/templates/mobile/index.xet

diff --git a/timesheet/templates/mobile/index.xet b/timesheet/templates/mobile/index.xet
new file mode 100644
index 0000000000..53978df965
--- /dev/null
+++ b/timesheet/templates/mobile/index.xet
@@ -0,0 +1,57 @@
+<?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="timesheet.index.dates" template="" lang="" group="0" version="1.2.001" >
+		<hbox>
+			<description value="Start"/>
+			<date id="startdate"/>
+			<description value="End"/>
+			<date statustext="Leave it empty for a full week" id="enddate"/>
+		</hbox>
+	</template>
+	<template id="timesheet.index.add" template="" lang="" group="0" version="1.7.001">
+		<buttononly label="Add" id="add" onclick="egw.open('timesheet');"/>
+	</template>
+	<template id="timesheet.index.rows" template="" lang="" group="0" version="1.9.001">
+		<grid width="100%">
+			<columns>
+				<column width="110"/>
+				<column width="90%" />
+				<column width="60"/>
+			</columns>
+			<rows>
+				<row class="th">
+					
+				</row>
+				<row class="$row_cont[cat_id] $row_cont[class] timesheetRow">
+					<vbox>
+						<date-time id="${row}[ts_start]" readonly="true" options=",8"/>
+						<menulist class="$cont[ownerClass]">
+							<menupopup type="select-account" id="${row}[ts_owner]" readonly="true"/>
+						</menulist>
+						<menulist class="noWrap">
+							<menupopup type="select-cat" id="${row}[cat_id]" readonly="true"/>
+						</menulist>
+					</vbox>
+					<vbox>
+						<description id="${row}[ts_title]" no_lang="1" class="ts_title $row_cont[titleClass]"/>
+						<description id="${row}[ts_description]" class="ts_description" no_lang="1"/>
+						<link id="${row}[ts_link]" no_lang="1"/>
+					</vbox>
+					<vbox class="timesheet3Col">
+						<date-duration id="${row}[ts_duration]" readonly="true" options=",h,,,1" align="right"/>
+						<textbox type="float" id="${row}[ts_quantity]" no_lang="1" readonly="true" precision="3"/>
+						<textbox type="float" id="${row}[ts_total]" no_lang="1" readonly="true" precision="2"/>
+						<menulist>
+							<menupopup id="${row}[ts_status]" readonly="true"/>
+						</menulist>
+					</vbox>
+				</row>
+			</rows>
+		</grid>
+	</template>
+	<template id="timesheet.index" template="" lang="" group="0" version="1.9.001">
+		<nextmatch id="nm" options="timesheet.index.rows" header_left="timesheet.index.dates"/>
+	</template>
+</overlay>
diff --git a/timesheet/templates/pixelegg/app.css b/timesheet/templates/pixelegg/app.css
index 28a16ae129..59a21a1098 100755
--- a/timesheet/templates/pixelegg/app.css
+++ b/timesheet/templates/pixelegg/app.css
@@ -183,3 +183,40 @@ tr.dialogOperators td,
 #timesheet-edit_pm_id input {
   width: 99% !important;
 }
+/* tablets and smartphones  */
+@media only screen and (max-device-width: 1024px) {
+  #timesheet-index table.egwGridView_outer tbody label[id^='timesheet-index'][id$='ts_start]'] > time {
+    font-weight: bold;
+    float: left;
+  }
+  #timesheet-index table.egwGridView_outer tbody ul[id^='timesheet-index'][id$='ts_owner]'] > li {
+    overflow: hidden;
+    width: 90px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-size: 8pt;
+  }
+  #timesheet-index table.egwGridView_outer tbody tr.timesheetRow td {
+    position: relative;
+  }
+  #timesheet-index table.egwGridView_outer tbody span[id^='timesheet-index'][id$='cat_id]'] {
+    position: absolute;
+    bottom: 5px;
+    font-size: 8pt;
+  }
+  #timesheet-index table.egwGridView_outer tbody span[id^='timesheet-index'][id$='ts_description]'] {
+    height: 30px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  #timesheet-index table.egwGridView_outer tbody div.timesheet3Col {
+    font-size: 8pt;
+  }
+  #timesheet-index table.egwGridView_outer tbody span[id^='timesheet-index'][id$='ts_duration]'] {
+    font-weight: bold;
+  }
+  #timesheet-index table.egwGridView_outer tbody label[id^='timesheet-index'][id$='ts_link]'] > span.et2_link {
+    font-weight: normal;
+  }
+}
diff --git a/timesheet/templates/pixelegg/app.less b/timesheet/templates/pixelegg/app.less
index 96f4062d28..b389d05303 100755
--- a/timesheet/templates/pixelegg/app.less
+++ b/timesheet/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";
 
 // iframe
@@ -150,4 +151,46 @@ span.timesheet_titleDetails {font-weight: bold;}
 #timesheet-edit.et2_container
 {
 }
-//
\ No newline at end of file
+//
+
+/* tablets and smartphones  */
+@media only screen and (max-device-width:1024px) {
+	#timesheet-index {
+		table.egwGridView_outer tbody {
+			label[id^='timesheet-index'][id$='ts_start]'] > time{
+				font-weight: bold;
+				float: left;
+			}
+			ul[id^='timesheet-index'][id$='ts_owner]'] > li {
+				overflow: hidden;
+				width: 90px;
+				white-space: nowrap;
+				text-overflow: ellipsis;
+				.mob-fontsize-s;
+			}
+			tr.timesheetRow td {
+				position: relative;
+			}
+			span[id^='timesheet-index'][id$='cat_id]'] {
+				position: absolute;
+				bottom: 5px;
+				.mob-fontsize-s;
+			}
+			span[id^='timesheet-index'][id$='ts_description]'] {
+				height: 30px;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+			div.timesheet3Col {
+				.mob-fontsize-s;
+			}
+			span[id^='timesheet-index'][id$='ts_duration]'] {
+				font-weight: bold;
+			}
+			label[id^='timesheet-index'][id$='ts_link]'] > span.et2_link {
+				font-weight: normal;
+			}
+		} 
+	}
+}
\ No newline at end of file