Mobile theme W.I.P.:

- Add attach.svg for mail
- Fix miss positioned quota in mail index
- Set toolbar range_view in 2 for compose dialog

mail/templates/mobile/app.css

@@ -311,21 +311,15 @@ pre {
   position: relative;
 }
 .mail-index_quotabox {
-  position: absolute;
+  display: inline-block;
-  top: 8px;
-  right: 74px;
-  width: 200px !important;
-  z-index: 99;
 }
 .mail-index_vacation {
-  position: absolute;
+  display: inline-block;
-  top: 3px;
+  vertical-align: top;
-  right: 190px;
-  width: 250px !important;
-  z-index: 99;
 }
 .mail-index_vacation > div {
   text-align: center;
+  line-height: 110%;
 }
 .mail-index_vacation > div > span {
   color: red;
@@ -339,20 +333,16 @@ pre {
 .mail-index_QuotaGreen,
 .mail-index_QuotaYellow,
 .mail-index_QuotaRed {
-  height: 12px !important;
   width: 100px !important;
 }
 .mail-index_QuotaGreen > div {
   background-color: green !important;
-  height: 11px !important;
 }
 .mail-index_QuotaYellow > div {
   background-color: yellow !important;
-  height: 11px !important;
 }
 .mail-index_QuotaRed > div {
   background-color: red !important;
-  height: 11px !important;
 }
 /*
  influence the tree display and scrolling behavior
@@ -412,14 +402,10 @@ div.mailUploadSection > div.et2_hbox > label {
   background-position: center;
   border: none;
 }
-#mail-index_button\[mailcreate\] {
+#mail-index_button\[mailcreate\],
-  width: 99%;
+#composeToolbar-send {
-  text-align: left;
+  color: white;
-  font-weight: bold;
+  background-color: #189800;
-  padding-left: 25px;
-  background-image: url(../default/images/write_mail.png) !important;
-  background-position: left;
-  background-repeat: no-repeat;
 }
 .mail-compose_composeToolbar {
   border-left: 1px solid silver;
@@ -943,7 +929,6 @@ body {
   background-repeat: repeat-x;
 }
 #mail-index div#mail-index_nm tr.mail div span {
-  height: 12px;
   -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
   -moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
   box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
@@ -1001,67 +986,6 @@ body {
         background-color: @color_hint;
     }*/
 }
-.egw_fw_ui_category_content #mail-index_buttonmailcreate {
-  margin-left: 0px;
-}
-.egw_fw_ui_category_content #mail-index_buttonmailcreate button#mail-index_button[mailcreate],
-.egw_fw_ui_category_content #mail-index_buttonmailcreate button[id*="mailcreate"] {
-  color: #FFF;
-  text-shadow: none;
-  height: 24px;
-  /*    height: auto;*/
-  background-image: none;
-  -webkit-border-radius: 3px;
-  -webkit-border-top-left-radius: 10px;
-  -moz-border-radius: 3px;
-  -moz-border-radius-topleft: 10px;
-  border-radius: 3px;
-  border-top-left-radius: 10px;
-  background-image: url("../pixelegg/images/write_mail_lighter.png") !important;
-  background-position: right center !important;
-  background-repeat: no-repeat;
-  background-size: 20px 20px;
-  padding-left: 25px;
-  text-align: left;
-  width: 93%;
-  background-color: #696969;
-  height: 32px;
-}
-.egw_fw_ui_category_content #mail-index_buttonmailcreate button#mail-index_button[mailcreate]:before,
-.egw_fw_ui_category_content #mail-index_buttonmailcreate button[id*="mailcreate"]:before {
-  content: "+";
-  font-size: 1.5em;
-  color: #ffc200;
-  line-height: 1.1em;
-}
-.egw_fw_ui_category_content #mail-index_buttonmailcreate button#mail-index_button[mailcreate]:hover,
-.egw_fw_ui_category_content #mail-index_buttonmailcreate button[id*="mailcreate"]:hover {
-  background-color: #1aa200 !important;
-  color: #ffc200;
-  -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
-  -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
-  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
-  -webkit-border-radius: 3px;
-  -webkit-border-top-left-radius: 10px;
-  -moz-border-radius: 3px;
-  -moz-border-radius-topleft: 10px;
-  border-radius: 3px;
-  border-top-left-radius: 10px;
-  color: #1e1e1e;
-}
-.egw_fw_ui_category_content #mail-index_buttonmailcreate button#mail-index_button[mailcreate]:active,
-.egw_fw_ui_category_content #mail-index_buttonmailcreate button[id*="mailcreate"]:active {
-  background-color: #1aa200 !important;
-  -webkit-border-radius: 3px;
-  -webkit-border-top-left-radius: 10px;
-  -moz-border-radius: 3px;
-  -moz-border-radius-topleft: 10px;
-  border-radius: 3px;
-  border-top-left-radius: 10px;
-  -webkit-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5);
-  -moz-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5);
-  box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5);
-}
 .egw_fw_ui_category_content span#mail-tree_target {
   max-height: 50%;
 }
@@ -1119,19 +1043,7 @@ body {
   background-color: white !important;
 }
 #mail-compose #mail-compose_composeToolbar button#composeToolbar-send {
-  height: 24px;
+  background-color: #189800;
-  /*margin-right: 3px !important;*/
-  margin-top: 0.7px !important;
-  padding: 0 3px 0 0;
-  text-align: left;
-  font-weight: normal;
-  padding-left: 20px;
-  float: left;
-  background-image: url(../pixelegg/images/mail_send.png);
-  background-position: left;
-  background-repeat: no-repeat;
-  background-size: 16px 16px;
-  background-color: #0c5da5;
   color: #ffffff;
 }
 #mail-compose #mail-compose_composeToolbar button#composeToolbar-send:hover {
@@ -1164,7 +1076,6 @@ body {
 }
 #mail-compose .mailComposeHeaders span,
 #mail-compose .mailComposeHeadersSection span {
-  font-size: 0.8em;
   text-align: right;
   padding-right: 5px;
 }
@@ -2045,53 +1956,6 @@ pre {
 #mail-index {
   position: relative;
 }
-.mail-index_quotabox {
-  position: absolute;
-  top: 29px;
-  right: -72px;
-  width: 200px !important;
-  z-index: 99;
-}
-.mail-index_quotabox div.et2_progress {
-  background-color: #b4b4b4 !important;
-}
-.mail-index_quotabox div.et2_progress > div {
-  min-height: 4px !important;
-}
-.mail-index_quotaDisplayNone {
-  display: none !important;
-}
-.mail-index_QuotaGreen,
-.mail-index_QuotaYellow,
-.mail-index_QuotaRed {
-  height: 4px !important;
-  width: 100px !important;
-}
-.mail-index_QuotaGreen > div {
-  background-color: green !important;
-  height: 4px !important;
-}
-.mail-index_QuotaYellow > div {
-  background-color: yellow !important;
-  height: 4px !important;
-}
-.mail-index_QuotaRed > div {
-  background-color: red !important;
-  height: 4px !important;
-}
-.mail-index_vacation {
-  position: absolute;
-  top: 3px;
-  right: 190px;
-  width: 250px !important;
-  z-index: 99;
-}
-.mail-index_vacation > div {
-  text-align: center;
-}
-.mail-index_vacation > div > span {
-  color: red;
-}
 /*
  influence the tree display and scrolling behavior
 */
@@ -2905,4 +2769,24 @@ div.mailComposeHeaderSection > table {
     font-size: 8pt;
     padding-top: 5px;
   }
+  #mail-index .mail-index_quotabox {
+    position: absolute;
+    top: 8px;
+    right: 74px;
+    width: 200px !important;
+    z-index: 99;
+  }
+  #mail-index .mail-index_vacation {
+    position: absolute;
+    top: 3px;
+    right: 190px;
+    width: 250px !important;
+    z-index: 99;
+  }
+  #mail-index .mail-index_vacation div {
+    text-align: center;
+  }
+  #mail-index_buttonmailcreate {
+    display: none;
+  }
 }

mail/templates/mobile/app.less

@@ -325,5 +325,24 @@
 				}
 			}
 		}
+		.mail-index_quotabox {
+			position: absolute;
+			top: 8px;
+			right: 74px;
+			width: 200px !important;
+			z-index: 99;
+		}
+		.mail-index_vacation {
+			position: absolute;
+			top: 3px;
+			right: 190px;
+			width: 250px !important;
+			z-index: 99;
+			div {
+				text-align: center;
+			}
+		}
+		
 	}
+	#mail-index_buttonmailcreate {display:none;}
 }

mail/templates/mobile/compose.xet

@@ -6,7 +6,7 @@
 		<vbox class="mailCompose mailComposeHeaderSection" width="100%">
 			<hbox class="dialogHeadbar">
 				<hbox>
-					<toolbar class="et2_head_toolbar" id="composeToolbar" width="100%" view_range="3" flat_list="false"/>
+					<toolbar class="et2_head_toolbar" id="composeToolbar" width="100%" view_range="2" flat_list="false"/>
 					<description/>
 				</hbox>
 			</hbox>

mail/templates/pixelegg/images/attach.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#696969" stroke="#e6e6e6" stroke-miterlimit="10" d="M15.824,28.57
+	c-3.363,3.313-8.773,3.3-12.117-0.045c-3.343-3.345-3.356-8.753-0.045-12.118L3.66,16.406L14.307,5.76l1.521-1.521l1.521-1.521
+	c2.519-2.52,6.606-2.52,9.126,0c2.521,2.52,2.521,6.605,0,9.126l-1.521,1.52l-1.521,1.521l-5.336,5.337l-1.917,1.914l-3.394,3.396
+	l-0.004-0.004c-1.684,1.63-4.368,1.62-6.031-0.044c-1.664-1.662-1.674-4.348-0.042-6.03l-0.005-0.006l1.521-1.521l1.873-1.872
+	l1.917-1.916l2.294-2.293l1.785-1.787l1.725-1.725l1.053-1.052l1.521,1.521l-1.475,1.473l-1.568,1.569l-3.193,3.193l-1.643,1.642
+	l-1.622,1.623l-1.147,1.145L8.223,20.97c-0.84,0.838-0.84,2.2,0,3.041c0.84,0.84,2.202,0.84,3.042,0l2.667-2.667l1.623-1.622
+	l1.642-1.642l1.673-1.674l2.689-2.688l0.353-0.354l1.521-1.52l1.521-1.521l-0.004-0.004c0.016-0.015,0.036-0.027,0.053-0.043
+	c1.679-1.68,1.679-4.404,0-6.083c-1.681-1.68-4.404-1.68-6.085,0c-0.015,0.016-0.028,0.035-0.044,0.051l-0.003-0.003l-1.521,1.521
+	l-1.52,1.521l-0.353,0.353l-2.69,2.689l-3.542,3.542l-4.062,4.061c-2.52,2.521-2.52,6.606,0,9.127c2.521,2.521,6.606,2.521,9.126,0
+	l4.062-4.062l9.625-9.626l1.52-1.52l1.522,1.52l-1.522,1.521L15.828,28.572L15.824,28.57z"/>
+</svg>