From ce1a5023443381e15a9850f091f437923dff5178 Mon Sep 17 00:00:00 2001
From: Ralf Becker <ralfbecker@outdoor-training.de>
Date: Thu, 25 Feb 2016 15:07:35 +0000
Subject: [PATCH] work in progress: styling mail list, added styling for
 progress-bar/quota in toolbar or nextmatch header

---
 etemplate/templates/default/etemplate2.css |  18 ++-
 mail/templates/default/app.css             |  47 +++----
 mail/templates/default/index.xet           |  17 ++-
 mail/templates/pixelegg/app.css            | 152 ++-------------------
 mail/templates/pixelegg/app.less           | 115 +---------------
 5 files changed, 53 insertions(+), 296 deletions(-)

diff --git a/etemplate/templates/default/etemplate2.css b/etemplate/templates/default/etemplate2.css
index d9f8102729..59f41447f3 100644
--- a/etemplate/templates/default/etemplate2.css
+++ b/etemplate/templates/default/etemplate2.css
@@ -1108,7 +1108,7 @@ div.message.floating {
 }
 .nextmatch_header .header_count {
 	padding: 0px 10px;
-	margin: 1px 6px 1px;
+	margin: 1px 6px 1px 0;
 	height: 22px;
 	border: 1px solid silver;
 	text-align: center;
@@ -1632,9 +1632,7 @@ div.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button {
 	width: 24px;
 	background-position: center;
 	background-size: 16px 16px;
-	border-radius: 3px;
 	padding-left: 0;
-	background-color: #fafafa;
 }
 .et2_toolbar .et2_toolbar_actionlist button.et2_button_with_image.et2_toolbar_hasCaption, .nextmatch_header_row .et2_button_text  {
 	width:auto;
@@ -1648,9 +1646,21 @@ div.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button {
 	width:auto;
 	padding-left: 3px;
 }
-.et2_toolbar button, .nextmatch_header_row button {
+.et2_toolbar button, .nextmatch_header_row button, .et2_toolbar div.et2_progress, .nextmatch_header_row div.et2_progress {
 	margin: 1px 4px 1px 0;
 	height: 24px;
+	border-radius: 3px;
+	background-color: #fafafa;
+	border: 1px solid silver;
+}
+.et2_toolbar div.et2_progress, .nextmatch_header_row div.et2_progress {
+	padding: 0;
+	height: 22px;
+}
+.et2_toolbar .et2_progress > div, .nextmatch_header_row .et2_progress > div {
+	margin: 2px;
+	border-radius: 3px;
+	height: 18px;
 }
 /**
  * Daterange selection in NM header
diff --git a/mail/templates/default/app.css b/mail/templates/default/app.css
index 8aff1c0316..88590a368c 100644
--- a/mail/templates/default/app.css
+++ b/mail/templates/default/app.css
@@ -144,7 +144,7 @@ tr.forwarded span.status_img {
   font-style: italic;
   font-weight : normal !important;
   font-family: Arial;
-  color: grey  !important; 
+  color: grey  !important;
 }
 
 TR.sieveRowActive
@@ -304,21 +304,15 @@ pre {
 	position: relative
 }
 .mail-index_quotabox {
-	position: absolute;
-	top:8px;
-	right:74px;
-	width:200px !important;
-	z-index:99;
+	display: inline-block;
 }
 .mail-index_vacation {
-	position: absolute;
-	top:3px;
-	right:190px;
-	width:250px !important;
-	z-index:99;
+	display: inline-block;
+	vertical-align: top;
 }
 .mail-index_vacation > div {
 	text-align: center;
+	line-height: 110%;
 }
 .mail-index_vacation > div > span {
 	color: red;
@@ -330,20 +324,16 @@ pre {
 	display: none !important;
 }
 .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
@@ -404,16 +394,11 @@ div.mailUploadSection > div.et2_hbox > label {
 	background-position: center;
 	border:none;
 }
-#mail-index_button\[mailcreate\] {
-	width: 99%;
-	text-align: left;
-	font-weight: bold;
-	padding-left: 25px;
-	background-image: url(../default/images/write_mail.png) !important;
-	background-position: left;
-	background-repeat: no-repeat;
+#mail-index_button\[mailcreate\], #composeToolbar-send {
+	color: white;
+	background-color: #189800;
 }
-.mail-compose_composeToolbar{
+.mail-compose_composeToolbar {
 	border-left: 1px solid silver;
 	border-top: 1px solid silver;
 	border-right: 1px solid gray;
@@ -790,16 +775,16 @@ blockquote blockquote blockquote blockquote blockquote blockquote{
 	}
 	.tmpPrintDiv td, textarea {
 		font-family: Verdana, Arial, Helvetica, sans-serif;
-		
+
 	}
 	.tmpPrintDiv .td_display {
 		font-family: Verdana, Arial, Helvetica, sans-serif;
-		
+
 		color: black;
 		background-color: #FFFFFF;
 	}
 	.tmpPrintDiv .td_display span[style] {
-		
+
 	}
 	pre {
 		width:99% !important;
@@ -840,15 +825,15 @@ blockquote blockquote blockquote blockquote blockquote blockquote{
 
 /* MOBILE and tablets (Portrait & Landscape) View --------------*/
 @media only screen and (max-device-width:1024px) {
-	
-	
+
+
 }
 /* tablets and smartphones (portrait) ----------- */
 @media only screen
 and (max-device-width : 1024px)
 and (orientation : portrait) {
 	#mail-index div#mail-index_nm tr.mail.row {
-		
+
 	}
 }
 
@@ -857,7 +842,7 @@ and (orientation : portrait) {
 and (min-width : 321px)
 and (max-device-width:768){
 	#mail-index div#mail-index_nm tr.mail.row {
-		
+
 	}
 }
 
diff --git a/mail/templates/default/index.xet b/mail/templates/default/index.xet
index 0070b859b3..41e4d8f4a3 100644
--- a/mail/templates/default/index.xet
+++ b/mail/templates/default/index.xet
@@ -4,7 +4,7 @@
 <overlay>
 	<template id="mail.index.spliter" height="100%" template="" lang="" group="0" version="1.9.001">
 		<split dock_side="bottomDock" id="mailSplitter" orientation="h">
-			<nextmatch id="nm" onselect="app.mail.mail_preview" template="mail.index.rows"/>
+			<nextmatch id="nm" onselect="app.mail.mail_preview" template="mail.index.rows" header_left="mail.index.add" header_right="mail.index.quota"/>
 			<vbox id="mailPreview" width="100%">
 				<hbox width="100%" id="mailPreviewHeadersFrom" class="mailPreviewHeaders">
 					<description value="From"/>
@@ -70,7 +70,7 @@
 		</split>
 	</template>
 	<template id="mail.index.nospliter" template="" lang="" group="0" version="1.9.001">
-		<nextmatch id="nm" onselect="app.mail.mail_preview" template="mail.index.rows"/>
+		<nextmatch id="nm" onselect="app.mail.mail_preview" template="mail.index.rows" header_left="mail.index.add" header_right="mail.index.quota"/>
 	</template>
 	<template id="mail.index.rows" template="" lang="" group="0" version="1.9.001">
 		<grid width="100%">
@@ -117,15 +117,18 @@
 			</rows>
 		</grid>
 	</template>
-	<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" onopenstart="app.mail.subscription_autoloadingStart" onopenend="app.mail.subscription_autoloadingEnd" highlighting="true"/>
-		<html id="msg"/>
-		<buttononly id="button[mailcreate]" onclick="app.mail.mail_compose(false);" label="Compose" parent_node="mail-index_buttonmailcreate"/>
-		<hbox class="mail-index_quotabox"><progress id="nm[quotainpercent]" label="@nm[quota]" class="@nm[quotaclass]"/></hbox>
+	<template id="mail.index.add" template="" lang="" group="0" version="1.9.001">
+		<buttononly id="button[mailcreate]" onclick="app.mail.mail_compose(false);" label="Compose"/>
+	</template>
+	<template id="mail.index.quota" template="" lang="" group="0" version="1.9.001">
 		<hbox class="mail-index_vacation"><vbox>
 			<description id="nm[vacationnotice]" class="@nm[vacationclass]"/>
 			<description id="nm[vacationrange]" class="@nm[vacationrangeclass]"/></vbox>
 		</hbox>
+		<hbox class="mail-index_quotabox"><progress id="nm[quotainpercent]" label="@nm[quota]" class="@nm[quotaclass]"/></hbox>
+	</template>
+	<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" onopenstart="app.mail.subscription_autoloadingStart" onopenend="app.mail.subscription_autoloadingEnd" highlighting="true"/>
 		<template id="mail.index.spliter" height="100%" template="mail.index.spliter"/>
 		<iframe frameborder="1" id="extra_iframe" scrolling="auto" disabled="true"/>
 	</template>
diff --git a/mail/templates/pixelegg/app.css b/mail/templates/pixelegg/app.css
index 7902d0f90a..bf163c883c 100755
--- a/mail/templates/pixelegg/app.css
+++ b/mail/templates/pixelegg/app.css
@@ -299,21 +299,15 @@ pre {
   position: relative;
 }
 .mail-index_quotabox {
-  position: absolute;
-  top: 8px;
-  right: 74px;
-  width: 200px !important;
-  z-index: 99;
+  display: inline-block;
 }
 .mail-index_vacation {
-  position: absolute;
-  top: 3px;
-  right: 190px;
-  width: 250px !important;
-  z-index: 99;
+  display: inline-block;
+  vertical-align: top;
 }
 .mail-index_vacation > div {
   text-align: center;
+  line-height: 110%;
 }
 .mail-index_vacation > div > span {
   color: red;
@@ -327,20 +321,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
@@ -400,14 +390,10 @@ div.mailUploadSection > div.et2_hbox > label {
   background-position: center;
   border: none;
 }
-#mail-index_button\[mailcreate\] {
-  width: 99%;
-  text-align: left;
-  font-weight: bold;
-  padding-left: 25px;
-  background-image: url(../default/images/write_mail.png) !important;
-  background-position: left;
-  background-repeat: no-repeat;
+#mail-index_button\[mailcreate\],
+#composeToolbar-send {
+  color: white;
+  background-color: #189800;
 }
 .mail-compose_composeToolbar {
   border-left: 1px solid silver;
@@ -989,67 +975,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%;
 }
@@ -1107,19 +1032,7 @@ body {
   background-color: white !important;
 }
 #mail-compose #mail-compose_composeToolbar button#composeToolbar-send {
-  height: 24px;
-  /*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;
+  background-color: #189800;
   color: #ffffff;
 }
 #mail-compose #mail-compose_composeToolbar button#composeToolbar-send:hover {
@@ -2033,53 +1946,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
 */
diff --git a/mail/templates/pixelegg/app.less b/mail/templates/pixelegg/app.less
index c187807c7c..c3f19ae286 100755
--- a/mail/templates/pixelegg/app.less
+++ b/mail/templates/pixelegg/app.less
@@ -76,14 +76,6 @@ body {
     #mail-index_mailPreviewContainer {}
 
 
-    // Message - standdardmäßig ausgeblendet
-    span#mail-index_msg{
-        span {
-            //				background: red;
-            //				height: 30px;
-        }
-    }
-
     // alles
         // Box mit Header und Liste
         div#mail-index_nm{
@@ -230,48 +222,6 @@ body {
 
 .egw_fw_ui_category_content{
 
-    // Create Feld
-    #mail-index_buttonmailcreate{
-        margin-left: 0px;
-
-
-
-                    // #####################################################
-                    // Create Button (mail)
-
-                    button#mail-index_button[mailcreate],
-                    button[id*="mailcreate"]{
-
-                        .Complete_Button_add;
-                                    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: @gray_60;
-                                    height: 32px;
-
-                        &:hover {
-                                .Complete_Button_add_hover;
-                                .box_shadow_standard_light_hover;
-                                .border_radius_button_lefttop ;
-                                color: @gray_90;
-                                }
-
-                        &:active {
-                                background-color: @color_positive_action_active !important;
-                                .border_radius_button_lefttop ;
-                                .box_shadow_standard_light_inset;
-
-                                }
-                    }
-
-
-    }
-
-
     // Mail Liste der Postfächer
     span#mail-tree_target {
         max-height: 50%;
@@ -284,7 +234,7 @@ body {
 
     // color - selected tree item
     .selectedTreeRow, .selectedTreeRow_lor {background-color: @egw_color_1_a; color: @gray_90;text-decoration: none;}
-    
+
 	.standartTreeRow_lor {background-color: rgba(103, 159, 210, 0.2); color: @gray_90;text-decoration: none;}
     /*new mail in FOlder
     span.standartTreeRow b {color: @egw_color_2_a;}
@@ -353,23 +303,10 @@ body {
 
         // Senden Button
         button#composeToolbar-send{
-            height: 24px;
-            /*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: @egw_color_2_a;
+            background-color: @color_positive_action;
             color: @gray_0;
             &:hover {.box_shadow_standard_light_hover; background-color:@color_positive_action;}
             &:disabled {background-color: @color_disabled !important;}
-
         }
 		button#composeToolbar-to_infolog:hover,
 		button#composeToolbar-to_tracker:hover,
@@ -497,7 +434,7 @@ div.mailUploadSection {
 
 #mail-display{
     //	gesamtbreite
-   
+
 	min-height: 768px;
     padding: 5px;
 
@@ -1109,7 +1046,7 @@ tr.forwarded span.status_img {
   font-style: italic;
   font-weight : normal;
   font-family: Arial;
-  color: grey; 
+  color: grey;
 }
 
 TR.sieveRowActive
@@ -1272,50 +1209,6 @@ pre {
 #mail-index {
     position: relative
 }
-.mail-index_quotabox {
-    position: absolute;
-    top:29px;
-    right:-72px;
-    width:200px !important;
-    z-index:99;
-
-    div.et2_progress {background-color: @gray_30 !important;}
-    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