From a46b4fbfea7f28626124dfcd840e495d45e7a25c Mon Sep 17 00:00:00 2001
From: Hadi Nategh <hn@stylite.de>
Date: Thu, 7 Apr 2016 09:13:26 +0000
Subject: [PATCH] Dialog styling W.I.P.: - New design for header & footer in
 dialogs - More styling of calendar edit dialog

---
 calendar/templates/default/edit.xet           | 10 +++---
 calendar/templates/mobile/app.css             | 34 ++-----------------
 calendar/templates/pixelegg/app.css           |  8 +----
 calendar/templates/pixelegg/app.less          |  8 -----
 pixelegg/css/mobile.css                       | 14 ++++++--
 pixelegg/css/pixelegg.css                     | 14 ++++++--
 pixelegg/inc/class.pixelegg_framework.inc.php |  6 +++-
 pixelegg/less/layout_dialog.less              | 12 ++++---
 pixelegg/less/layout_table.less               |  2 +-
 pixelegg/mobile/fw_mobile.css                 | 20 +++++++----
 10 files changed, 59 insertions(+), 69 deletions(-)

diff --git a/calendar/templates/default/edit.xet b/calendar/templates/default/edit.xet
index 96e5578f1e..30c6f5da63 100644
--- a/calendar/templates/default/edit.xet
+++ b/calendar/templates/default/edit.xet
@@ -94,7 +94,7 @@
 				<column width="50%"/>
 			</columns>
 			<rows>
-				<row class="th gray">
+				<row class="th">
 					<description value="Repeating Event Information" span="all"/>
 				</row>
 				<row disabled="!@reference">
@@ -157,19 +157,19 @@
 		</grid>
 	</template>
 	<template id="calendar.edit.links" template="" lang="" group="0" version="1.0.1.001">
-		<grid width="100%" overflow="auto">
+		<grid width="100%">
 			<columns>
 				<column width="95"/>
 				<column/>
 			</columns>
 			<rows>
-				<row class="th gray" disabled="@view">
+				<row class="th" disabled="@view">
 					<description value="Create new links" span="all"/>
 				</row>
 				<row disabled="@view">
 					<link-to id="link_to" span="all"/>
 				</row>
-				<row class="th gray">
+				<row class="th">
 					<description value="Existing links" span="all" />
 				</row>
 				<row class="row_off" valign="top">
@@ -270,7 +270,7 @@
 				<menupopup statustext="Execute a further action for this entry" id="action" onchange="app.calendar.actions_change" options="Actions..."/>
 			</menulist>
 			<checkbox label="Do not notify" id="no_notifications"/>
-			<buttononly statustext="Find free timeslots where the selected participants are availible for the given timespan" label="Freetime search" id="freetime" onclick="app.calendar.freetime_search" image="add" background_image="1" span="all"/>
+			<buttononly statustext="Find free timeslots where the selected participants are availible for the given timespan" label="Freetime search" id="freetime" onclick="app.calendar.freetime_search" image="timesheet" background_image="1" span="all"/>
 			<button align="right" statustext="Delete this event" label="Delete" id="button[delete]" onclick="app.calendar.delete_btn(widget,$cont[query_delete_exceptions]);" image="delete" background_image="1"/>
 			<textbox type="hidden" id="delete_exceptions"/>
 		</hbox>
diff --git a/calendar/templates/mobile/app.css b/calendar/templates/mobile/app.css
index 3fab09379d..56e53f268c 100644
--- a/calendar/templates/mobile/app.css
+++ b/calendar/templates/mobile/app.css
@@ -141,7 +141,7 @@ form[id^="tracker-"] .dialogHeadbar {
  * @package calendar
  * @version $Id$
  */
-/* $Id: app.css 55614 2016-04-04 17:55:49Z nathangray $ */
+/* $Id: app.css 55640 2016-04-05 21:38:49Z nathangray $ */
 /*Media print classes*/
 @media print {
   #calendar-view.et2_container,
@@ -289,16 +289,6 @@ form[id^="tracker-"] .dialogHeadbar {
 #calendar-view_view td {
   padding: 0px;
 }
-/* Header classes */
-tr.dialogHeader td,
-tr.dialogHeader2 td,
-tr.dialogHeader3 td,
-tr.dialogHeader4 td,
-tr.dialogOperators td,
-.dialogFooterToolbar {
-  padding: 5px 0 5px 0;
-  vertical-align: middle;
-}
 .calendar_inputFullWidth input {
   width: 100%;
 }
@@ -1418,8 +1408,8 @@ img.calendar_print_appicon {
 #calendar-edit_account + .chzn-container .chzn-results {
   max-height: 195px;
 }
-#calendar-edit_category {
-  max-width: 230px;
+input#calendar-edit_location {
+  padding-left: 0;
 }
 #calendar_sidebox_content .ui-datepicker div.ui-datepicker-buttonpane {
   border-top: 0;
@@ -1761,24 +1751,6 @@ div.calendar {
   background-color: #000;
   color: #0f0;
 }
-/*###########################################
-#                                           #
-#       dialogHeader                       #
-#############################################
-#                                           #
-#                                           #
-#                                           #
-#                                           #
-#                                           #
-#                   dialog                  #
-#                                           #
-#                                           #
-#############################################
-#                                           #
-#    buttons                                #
-#                                           #
-#                                           #
-##############################################*/
 #calendar-edit {
   /*###########################################*/
   /*###########################################*/
diff --git a/calendar/templates/pixelegg/app.css b/calendar/templates/pixelegg/app.css
index c5038134b6..e7df94a612 100755
--- a/calendar/templates/pixelegg/app.css
+++ b/calendar/templates/pixelegg/app.css
@@ -11,7 +11,7 @@
  * @package calendar
  * @version $Id$
  */
-/* $Id: app.css 55640 2016-04-05 21:38:49Z nathangray $ */
+/* $Id: app.css 55652 2016-04-06 16:43:51Z hnategh $ */
 /*Media print classes*/
 @media print {
   #calendar-view.et2_container,
@@ -1658,12 +1658,6 @@ div.calendar {
 #calendar-edit select#calendar-edit_duration {
   width: 133px;
 }
-#calendar-edit button#calendar-edit_freetime {
-  height: 16px;
-  background-size: 12px auto !important;
-  margin-left: 32px;
-  padding-top: 0px;
-}
 #calendar-edit #calendar-edit_id {
   float: right;
   margin-right: 5px;
diff --git a/calendar/templates/pixelegg/app.less b/calendar/templates/pixelegg/app.less
index 5980db4646..bdaf3316bc 100755
--- a/calendar/templates/pixelegg/app.less
+++ b/calendar/templates/pixelegg/app.less
@@ -417,14 +417,6 @@ div.calendar { position: relative; }
         }
     select#calendar-edit_duration{width: 133px;}
 
-    // Terminsuche
-   button#calendar-edit_freetime {
-       height: 16px;
-       background-size: 12px auto !important;
-       margin-left: 32px;
-       padding-top: 0px;
-   }
-
    // ID
    #calendar-edit_id{float: right;margin-right: 5px;}
 
diff --git a/pixelegg/css/mobile.css b/pixelegg/css/mobile.css
index 881992bb1d..ea14a020e3 100644
--- a/pixelegg/css/mobile.css
+++ b/pixelegg/css/mobile.css
@@ -2989,6 +2989,7 @@ table.dialog-main-view {
 /**********    Header Part ********************/
 .dialogHeader {
   color: #000000;
+  border-bottom: 3px solid #696969;
 }
 .dialogHeader img[src*="navbar"] {
   padding: 0 0 0 15px;
@@ -3111,6 +3112,7 @@ td.etemplate_tab_active.th {
   padding: 5px;
   background-color: #ffffff;
   margin-bottom: 11px;
+  margin-top: 11px;
 }
 .tab_body {
   border-top-width: 1px;
@@ -3140,7 +3142,6 @@ div#etemplate\.tab_widget {
 #   dialogOperators                        #
 #############################################*/
 .dialogOperators {
-  background-color: #e6e6e6;
   border-top: 0px solid #e6e6e6;
   border-bottom: 0px solid #e6e6e6;
 }
@@ -3157,10 +3158,12 @@ div#etemplate\.tab_widget {
 /*#  button | button | button         delete  #*/
 /*##############################################*/
 .dialogFooterToolbar {
-  background-color: #679fd2;
+  background-color: transparent;
   margin: 10px 0 0 0;
   padding: 3px;
   white-space: nowrap;
+  border-top: 3px solid #696969;
+  padding-top: 8px !important;
   /*.et2_selectbox {height: 32px; top: 0px; font-size: 1em;}*/
 }
 .dialogFooterToolbar td {
@@ -3170,8 +3173,10 @@ div#etemplate\.tab_widget {
   padding-left: 5px;
 }
 .dialogFooterToolbar button {
-  height: 24px;
   min-width: 86px;
+  height: 24px;
+  border-radius: 3px;
+  border: 1px solid silver;
 }
 .dialogFooterToolbar button:hover {
   height: 24px;
@@ -5395,6 +5400,9 @@ table.egwGridView_grid tbody {
 table.egwGridView_grid tbody tr:hover {
   background: rgba(103, 159, 210, 0.2);
 }
+table.egwGridView_grid tbody tr.th:hover {
+  background: transparent;
+}
 table.egwGridView_grid tbody tr.selected {
   background-image: none;
   /*background-color: @egw_color_1_e !important;*/
diff --git a/pixelegg/css/pixelegg.css b/pixelegg/css/pixelegg.css
index 2b4ea8ec24..852a36940c 100644
--- a/pixelegg/css/pixelegg.css
+++ b/pixelegg/css/pixelegg.css
@@ -2978,6 +2978,7 @@ table.dialog-main-view {
 /**********    Header Part ********************/
 .dialogHeader {
   color: #000000;
+  border-bottom: 3px solid #696969;
 }
 .dialogHeader img[src*="navbar"] {
   padding: 0 0 0 15px;
@@ -3100,6 +3101,7 @@ td.etemplate_tab_active.th {
   padding: 5px;
   background-color: #ffffff;
   margin-bottom: 11px;
+  margin-top: 11px;
 }
 .tab_body {
   border-top-width: 1px;
@@ -3129,7 +3131,6 @@ div#etemplate\.tab_widget {
 #   dialogOperators                        #
 #############################################*/
 .dialogOperators {
-  background-color: #e6e6e6;
   border-top: 0px solid #e6e6e6;
   border-bottom: 0px solid #e6e6e6;
 }
@@ -3146,10 +3147,12 @@ div#etemplate\.tab_widget {
 /*#  button | button | button         delete  #*/
 /*##############################################*/
 .dialogFooterToolbar {
-  background-color: #679fd2;
+  background-color: transparent;
   margin: 10px 0 0 0;
   padding: 3px;
   white-space: nowrap;
+  border-top: 3px solid #696969;
+  padding-top: 8px !important;
   /*.et2_selectbox {height: 32px; top: 0px; font-size: 1em;}*/
 }
 .dialogFooterToolbar td {
@@ -3159,8 +3162,10 @@ div#etemplate\.tab_widget {
   padding-left: 5px;
 }
 .dialogFooterToolbar button {
-  height: 24px;
   min-width: 86px;
+  height: 24px;
+  border-radius: 3px;
+  border: 1px solid silver;
 }
 .dialogFooterToolbar button:hover {
   height: 24px;
@@ -5384,6 +5389,9 @@ table.egwGridView_grid tbody {
 table.egwGridView_grid tbody tr:hover {
   background: rgba(103, 159, 210, 0.2);
 }
+table.egwGridView_grid tbody tr.th:hover {
+  background: transparent;
+}
 table.egwGridView_grid tbody tr.selected {
   background-image: none;
   /*background-color: @egw_color_1_e !important;*/
diff --git a/pixelegg/inc/class.pixelegg_framework.inc.php b/pixelegg/inc/class.pixelegg_framework.inc.php
index e29d8d9657..c644d9cbb0 100755
--- a/pixelegg/inc/class.pixelegg_framework.inc.php
+++ b/pixelegg/inc/class.pixelegg_framework.inc.php
@@ -144,7 +144,7 @@ class pixelegg_framework extends jdots_framework
 -popup toolbar
 */
 div#egw_fw_header, div.egw_fw_ui_category:hover,#loginMainDiv,#loginMainDiv #divAppIconBar #divLogo,
-.dialogFooterToolbar, .et2_portlet .ui-widget-header{
+.et2_portlet .ui-widget-header{
 	background-color: $color !important;
 }
 
@@ -168,6 +168,10 @@ div#egw_fw_header, div.egw_fw_ui_category:hover,#loginMainDiv,#loginMainDiv #div
 
 
 ";
+				if ($GLOBALS['egw_info']['user']['preferences']['common']['theme'] == 'traditional')
+				{
+					$ret['app_css'] .= ".dialogFooterToolbar {background-color: $color !important;}";
+				}
 			}
 			else
 			/* Mobile theme custom colors*/
diff --git a/pixelegg/less/layout_dialog.less b/pixelegg/less/layout_dialog.less
index a87ecf7372..622fa4f80f 100755
--- a/pixelegg/less/layout_dialog.less
+++ b/pixelegg/less/layout_dialog.less
@@ -155,7 +155,7 @@ table.dialog-main-view {width: 100%;}
 /**********    Header Part ********************/
 .dialogHeader {
 	.color_100_gray;
-
+	border-bottom: 3px solid @gray_60;
 	// APP img
 	img[src*="navbar"] {
 		padding: 0 0 0 15px;
@@ -284,6 +284,7 @@ td.etemplate_tab_active.th {
     padding: 5px;
     background-color: @gray_0;
     margin-bottom: 11px;
+	margin-top:11px;
 }
 
 .tab_body {
@@ -318,7 +319,6 @@ div#etemplate\.tab_widget {
 #   dialogOperators                        #
 #############################################*/
 .dialogOperators {
-    background-color: @gray_10;
     border-top: 0px solid @gray_10;
     border-bottom: 0px solid @gray_10;
 
@@ -335,11 +335,12 @@ div#etemplate\.tab_widget {
 /*##############################################*/
 
 .dialogFooterToolbar{
-    background-color: @color_button_panel_bg_color;
+    background-color: transparent;
     margin: 10px 0 0 0;
     padding: 3px;
     white-space: nowrap;
-
+	border-top: 3px solid #696969;
+	padding-top: 8px !important;
     td {
 		padding: 0px 5px 0px 0px;
 	}
@@ -349,6 +350,9 @@ div#etemplate\.tab_widget {
 
     button {
         .dimension_height_m; min-width: 86px;
+		height: 24px;
+		border-radius: 3px;
+		border: 1px solid silver;
         &:hover{.dimension_height_m;}
         &:action{.dimension_height_m;}
     }
diff --git a/pixelegg/less/layout_table.less b/pixelegg/less/layout_table.less
index da64f26cfd..0ea389dcf4 100755
--- a/pixelegg/less/layout_table.less
+++ b/pixelegg/less/layout_table.less
@@ -202,7 +202,7 @@ table.egwGridView_grid{
         /*multiple choise*/
 		// Hover State
 		tr:hover {background: @color_hover_row;}
-
+		tr.th:hover {background: transparent;}
         tr.selected{
             background-image: none;
             /*background-color: @egw_color_1_e !important;*/
diff --git a/pixelegg/mobile/fw_mobile.css b/pixelegg/mobile/fw_mobile.css
index f8951b7a72..299768287b 100644
--- a/pixelegg/mobile/fw_mobile.css
+++ b/pixelegg/mobile/fw_mobile.css
@@ -1559,7 +1559,7 @@ div#ui-datepicker-div {
  * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
  * @author Stefan Reinhard <stefan.reinhard@pixelegg.de>
  * @package pixelegg
- * @version $Id: magicsuggest.less 55035 2016-02-16 21:37:19Z nathangray $
+ * @version $Id: magicsuggest.less 55652 2016-04-06 16:43:51Z hnategh $
  */
 .ms-ctn,
 .ms-res-ctn {
@@ -2911,7 +2911,7 @@ div.dhtmlxMenu_egw_SubLevelArea_Polygon table.dhtmlxMebu_SubLevelArea_Tbl tr.sub
  * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
  * @author Stefan Reinhard <stefan.reinhard@pixelegg.de>
  * @package pixelegg
- * @version $Id: layout_dialog.less 55581 2016-03-31 16:59:47Z hnategh $
+ * @version $Id: layout_dialog.less 55652 2016-04-06 16:43:51Z hnategh $
  */
 /*body {
     background-color: @gray_0;
@@ -3000,6 +3000,7 @@ table.dialog-main-view {
 /**********    Header Part ********************/
 .dialogHeader {
   color: #000000;
+  border-bottom: 3px solid #696969;
 }
 .dialogHeader img[src*="navbar"] {
   padding: 0 0 0 15px;
@@ -3122,6 +3123,7 @@ td.etemplate_tab_active.th {
   padding: 5px;
   background-color: #ffffff;
   margin-bottom: 11px;
+  margin-top: 11px;
 }
 .tab_body {
   border-top-width: 1px;
@@ -3151,7 +3153,6 @@ div#etemplate\.tab_widget {
 #   dialogOperators                        #
 #############################################*/
 .dialogOperators {
-  background-color: #e6e6e6;
   border-top: 0px solid #e6e6e6;
   border-bottom: 0px solid #e6e6e6;
 }
@@ -3168,10 +3169,12 @@ div#etemplate\.tab_widget {
 /*#  button | button | button         delete  #*/
 /*##############################################*/
 .dialogFooterToolbar {
-  background-color: #679fd2;
+  background-color: transparent;
   margin: 10px 0 0 0;
   padding: 3px;
   white-space: nowrap;
+  border-top: 3px solid #696969;
+  padding-top: 8px !important;
   /*.et2_selectbox {height: 32px; top: 0px; font-size: 1em;}*/
 }
 .dialogFooterToolbar td {
@@ -3181,8 +3184,10 @@ div#etemplate\.tab_widget {
   padding-left: 5px;
 }
 .dialogFooterToolbar button {
-  height: 24px;
   min-width: 86px;
+  height: 24px;
+  border-radius: 3px;
+  border: 1px solid silver;
 }
 .dialogFooterToolbar button:hover {
   height: 24px;
@@ -5266,7 +5271,7 @@ button.image_button {
  * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
  * @author Stefan Reinhard <stefan.reinhard@pixelegg.de>
  * @package pixelegg
- * @version $Id: layout_table.less 55187 2016-02-29 13:25:21Z ralfbecker $
+ * @version $Id: layout_table.less 55652 2016-04-06 16:43:51Z hnategh $
  */
 /** #####################################################################################
  * et2
@@ -5406,6 +5411,9 @@ table.egwGridView_grid tbody {
 table.egwGridView_grid tbody tr:hover {
   background: rgba(103, 159, 210, 0.2);
 }
+table.egwGridView_grid tbody tr.th:hover {
+  background: transparent;
+}
 table.egwGridView_grid tbody tr.selected {
   background-image: none;
   /*background-color: @egw_color_1_e !important;*/