From 50aae863b61d87c7266b9b6dc0c8739a6ed66fde Mon Sep 17 00:00:00 2001 From: Hadi Nategh Date: Wed, 6 Apr 2016 16:43:51 +0000 Subject: [PATCH] Edit dialogs style W.I.P.: - Give tab widget new look - Style grid header different - Re-design calendar edit dialog - Some fixes for multi et2_taglist --- addressbook/templates/default/app.css | 5 - addressbook/templates/pixelegg/app.css | 40 +-- addressbook/templates/pixelegg/app.less | 370 +++++++++--------------- admin/templates/pixelegg/app.css | 28 +- admin/templates/pixelegg/app.less | 110 ++----- api/templates/default/etemplate2.css | 47 +-- calendar/templates/default/app.css | 13 +- calendar/templates/default/edit.xet | 184 +++++------- calendar/templates/pixelegg/app.css | 34 +-- calendar/templates/pixelegg/app.less | 22 -- filemanager/templates/pixelegg/app.less | 185 +++++------- infolog/templates/default/app.css | 6 +- infolog/templates/pixelegg/app.css | 11 +- mail/templates/mobile/app.css | 3 + pixelegg/css/mobile.css | 91 ++---- pixelegg/css/pixelegg.css | 91 ++---- pixelegg/less/etemplate2.less | 4 +- pixelegg/less/layout_dialog.less | 193 +++++------- pixelegg/less/layout_table.less | 11 +- pixelegg/less/magicsuggest.css | 8 + pixelegg/less/magicsuggest.less | 6 + pixelegg/mobile/fw_mobile.css | 91 ++---- resources/templates/default/app.css | 7 - resources/templates/pixelegg/app.less | 8 +- timesheet/templates/default/app.css | 7 - timesheet/templates/pixelegg/app.css | 10 - 26 files changed, 522 insertions(+), 1063 deletions(-) diff --git a/addressbook/templates/default/app.css b/addressbook/templates/default/app.css index 44c63d4b51..883b0791f5 100644 --- a/addressbook/templates/default/app.css +++ b/addressbook/templates/default/app.css @@ -70,11 +70,6 @@ div.addressbook_edit_general_picture img { .custom_country { display: none; } -tr.dialogHeader td, tr.dialogHeader2 td, tr.dialogHeader3 td, tr.dialogHeader4 td, -tr.dialogOperators td,.dialogFooterToolbar { - padding: 5px 0 5px 0; - vertical-align: middle; -} input.et2_radiobox { position: relative; left: -16px; diff --git a/addressbook/templates/pixelegg/app.css b/addressbook/templates/pixelegg/app.css index b2acae596a..630409441f 100755 --- a/addressbook/templates/pixelegg/app.css +++ b/addressbook/templates/pixelegg/app.css @@ -83,15 +83,6 @@ div.addressbook_edit_general_picture img { .custom_country { display: none; } -tr.dialogHeader td, -tr.dialogHeader2 td, -tr.dialogHeader3 td, -tr.dialogHeader4 td, -tr.dialogOperators td, -.dialogFooterToolbar { - padding: 5px 0 5px 0; - vertical-align: middle; -} input.et2_radiobox { position: relative; left: -16px; @@ -149,7 +140,7 @@ select#addressbook-index_col_filter\[tid\] { @media all { /* ############################################################################# -// Rahmen + padding**/ + // Rahmen + padding**/ /*##############################################*/ /*# # #*/ /*# Bild # #*/ @@ -191,8 +182,8 @@ select#addressbook-index_col_filter\[tid\] { padding: 2px 0 2px 0; } /** - * Give space to both contact view & infolog list - */ + * Give space to both contact view & infolog list + */ #addressbook-edit { height: auto; min-height: 390px; @@ -201,16 +192,9 @@ select#addressbook-index_col_filter\[tid\] { /*##################################################################*/ /*Infolog*/ .et2_container[id^="infolog-index-addressbook"] { - /*height: auto;*/ - /*padding: 1em;*/ - /*min-height: 250px;*/ /*ADD Button */ - /* div.et2_hbox, - div.et2_box_widget*/ } .et2_container[id^="infolog-index-addressbook"] .et2_hbox_right[id*="_infolog-index-header_right"] div.et2_box_widget { - /*border: 1px solid rgba(0, 0, 0, 0.15);*/ - /*box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);*/ text-shadow: none; height: 32px; margin-top: 5px; @@ -350,24 +334,6 @@ select#addressbook-index_col_filter\[tid\] { button#tracker-index-addressbook_add:active { background-color: #1aa200 !important; } - /*########################################### -# # -# dialogHeader # -############################################# -# # -# # -# # -# # -# # -# dialog # -# # -# # -############################################# -# # -# buttons # -# # -# # -##############################################*/ div.addressbook_edit_general_picture img { top: -4px; width: 70px; diff --git a/addressbook/templates/pixelegg/app.less b/addressbook/templates/pixelegg/app.less index 35eba7bdcd..0c28f2d855 100755 --- a/addressbook/templates/pixelegg/app.less +++ b/addressbook/templates/pixelegg/app.less @@ -21,252 +21,154 @@ @media all { -/* ############################################################################# + /* ############################################################################# -// Rahmen + padding**/ + // Rahmen + padding**/ -/*##############################################*/ -/*# # #*/ -/*# Bild # #*/ -/*# # Infolog #*/ -/*# # #*/ -/*# # #*/ -/*# # #*/ -/*# Sidebar # #*/ -/*# # #*/ -/*# # #*/ -/*# # #*/ -/*# # #*/ -/*# # #*/ -/*##############################################*/ + /*##############################################*/ + /*# # #*/ + /*# Bild # #*/ + /*# # Infolog #*/ + /*# # #*/ + /*# # #*/ + /*# # #*/ + /*# Sidebar # #*/ + /*# # #*/ + /*# # #*/ + /*# # #*/ + /*# # #*/ + /*# # #*/ + /*##############################################*/ -// Image + Data + // Image + Data -div#addressbook_view_sidebox{ + div#addressbook_view_sidebox{ + //img + img.photo { + width: 68px; + padding-right: 3px; + height: auto; + vertical-align: top; + margin-right: 5px; + } + // name + #addressbook-view_n_fn { + .fontsize_xl; + font-weight: bold; + padding: 2px 0 2px 0; + width: 85%; + } + // org + #addressbook-view_org_name { + .fontsize_xl; + padding: 2px 0 2px 0; + width: 85%; + } + // Unit + #addressbook-view_org_unit { + .fontsize_m; + padding: 2px 0 2px 0; + } + // Ort + #addressbook-view_adr_one_locality { + .fontsize_m; + padding: 2px 0 2px 0; + } + } - //img - img.photo { - width: 68px; - padding-right: 3px; - height: auto; - vertical-align: top; - margin-right: 5px; - } + /** + * Give space to both contact view & infolog list + */ - // name - #addressbook-view_n_fn{ - .fontsize_xl; - font-weight: bold; - padding: 2px 0 2px 0; - width: 85%; - } + #addressbook-edit { + height: auto; + min-height: 390px; + overflow: auto; + } - // org - #addressbook-view_org_name { - .fontsize_xl; - padding: 2px 0 2px 0; - width: 85%; - } + /*##################################################################*/ - // Unit - #addressbook-view_org_unit { - .fontsize_m; - padding: 2px 0 2px 0; - } + /*Infolog*/ - // Ort - #addressbook-view_adr_one_locality{ - .fontsize_m; - padding: 2px 0 2px 0; - } + .et2_container[id^="infolog-index-addressbook"] { + /*ADD Button */ + .et2_hbox_right[id*="_infolog-index-header_right"] { + div.et2_box_widget { + text-shadow: none; + .dimension_height_l; + margin-top: 5px; + background-image: none !important; + transition: all 0.5s linear; + -webkit-transition: all 0.5s linear; /* Safari */ + &:before { + content: "+"; + font-size: 2em; + color: @egw_color_1; + line-height: 0.5em; + } + /*Text ""hinzufügen" "*/ + span {display: none;} + // IMG + img { + .Complete_Button_Icon_normal; + .dimension_width_height_s; + margin-left: 0.5em; + padding: 0px; + margin-top: 0px; + vertical-align: middle; + /*.gradient_vertical (@egw_color_2_a, @egw_color_2_a);*/ + &:hover{.Complete_Button_Icon_hover ;} + &:active { .Complete_Button_Icon_active ;} + } + + img:last-child {margin-right: 5px;}; + + /*MouseOver*/ + &:hover { + .box_shadow_standard_light_hover; + background-color: @egw_color_2_a !important; + .border_radius_button_lefttop; + .dimension_height_l; + &:before {content: ""; font-size: 1em;padding-left: 5px;} + /*Text*/ + span {visibility: hidden; display: none;}; + img {.scale; margin: 0.5em; background: @gray_0;} + } + } + } + // Scrollarea in Infolog + .egwGridView_scrollarea{ + overflow-y: scroll !important; + overflow-x: hidden !important; + } + } + + //****************************************************************** + // CRM View - Tracking System + + button#tracker-index-addressbook_add{ + .Complete_Button_add_only_plus; + .dimension_height_m; + + &:hover {.Complete_Button_add_only_plus_hover;} + &:active {background-color: @color_positive_action_active !important;} + } + + // person image + div.addressbook_edit_general_picture img { + top: -4px; + width: 70px; + height: auto; + left: 7px; + } + + // general + #addressbook-edit_addressbook-edit-general{ + .et2_label {margin-right: 6px;} + } } - - -/** - * Give space to both contact view & infolog list - */ - -#addressbook-edit { - height: auto; - min-height: 390px; - overflow: auto; -} - - - -/*##################################################################*/ - -/*Infolog*/ - -.et2_container[id^="infolog-index-addressbook"] { - - /*height: auto;*/ - /*padding: 1em;*/ - /*min-height: 250px;*/ - - -/*ADD Button */ -/* div.et2_hbox, - div.et2_box_widget*/ - .et2_hbox_right[id*="_infolog-index-header_right"]{ - - - div.et2_box_widget{ - /*border: 1px solid rgba(0, 0, 0, 0.15);*/ - /*box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);*/ - text-shadow: none; - .dimension_height_l; - margin-top: 5px; - background-image: none !important; - transition: all 0.5s linear; - -webkit-transition: all 0.5s linear; /* Safari */ - - &:before { - content: "+"; - font-size: 2em; - color: @egw_color_1; - line-height: 0.5em; - } - - /*Text ""hinzufügen" "*/ - span {display: none;} - - - // IMG - img { - .Complete_Button_Icon_normal; - .dimension_width_height_s; - margin-left: 0.5em; - padding: 0px; - margin-top: 0px; - vertical-align: middle; - /*.gradient_vertical (@egw_color_2_a, @egw_color_2_a);*/ - - &:hover{.Complete_Button_Icon_hover ;} - - &:active { .Complete_Button_Icon_active ;} - } - - img:last-child {margin-right: 5px;}; - - - - /*MouseOver*/ - &:hover { - .box_shadow_standard_light_hover; - background-color: @egw_color_2_a !important; - .border_radius_button_lefttop; - .dimension_height_l; - &:before {content: ""; font-size: 1em;padding-left: 5px;} - /*Text*/ - span {visibility: hidden; display: none;}; - img {.scale; margin: 0.5em; background: @gray_0;} - } - } - - - - - } - - // Scrollarea in Infolog - .egwGridView_scrollarea{ - overflow-y: scroll !important; - overflow-x: hidden !important; - } -} - -//****************************************************************** -// CRM View - Tracking System - -button#tracker-index-addressbook_add{ - - .Complete_Button_add_only_plus; - .dimension_height_m; - - &:hover {.Complete_Button_add_only_plus_hover;} - &:active {background-color: @color_positive_action_active !important;} - -} - - - - - - - - -//****************************************************************** -// sidebar -//****************************************************************** - -#egw_fw_sidemenu{ - - //Tabelle mit Ansichten des Kalenders - - .egw_fw_ui_category_content{ - -// table {margin-left: -14px;} - } - - // Bilder für Favoriten - - img.sideboxstar { - - } - -// select {margin-top: -5px;} - -} - -// ############################################################################# -// Addressbook edit dialog - -/*########################################### -# # -# dialogHeader # -############################################# -# # -# # -# # -# # -# # -# dialog # -# # -# # -############################################# -# # -# buttons # -# # -# # -##############################################*/ - -#addressbook-edit.et2_container { -} - -// person image -div.addressbook_edit_general_picture img { - top: -4px; - width: 70px; - height: auto; - left: 7px; -} - - -// general -#addressbook-edit_addressbook-edit-general{ - - .et2_label {margin-right: 6px;} - -} - - -// END DIALOG ############################################################################# - -} // Ende Media all - diff --git a/admin/templates/pixelegg/app.css b/admin/templates/pixelegg/app.css index 731251c422..d7508e3e30 100755 --- a/admin/templates/pixelegg/app.css +++ b/admin/templates/pixelegg/app.css @@ -18,7 +18,7 @@ * @package etemplate * @link http://www.egroupware.org * @author Ralf Becker - * @version $Id: app.css 55140 2016-02-25 08:42:33Z ralfbecker $ + * @version $Id: app.css 55532 2016-03-28 18:51:38Z ralfbecker $ */ .admin_tree table, .admin_tree tr, @@ -166,8 +166,8 @@ select#admin-mailaccount_ident_id { color: #1e1e1e; } /* ############################################################################# -// iframe -// Rahmen + padding**/ + // iframe + // Rahmen + padding**/ /*################## iframe ####################*/ /*# # #*/ /*# # #*/ @@ -177,8 +177,8 @@ select#admin-mailaccount_ident_id { /*# # #*/ /*##############################################*/ /** - * Give space to both contact view & infolog list - */ + * Give space to both contact view & infolog list + */ iframe#admin-index_iframe { background-color: transparent; } @@ -200,22 +200,4 @@ select#admin-mailaccount_ident_id { filter: initial; /* IE 6-9 */ } - /*########################################### -# # -# dialogHeader # -############################################# -# # -# # -# # -# # -# # -# dialog # -# # -# # -############################################# -# # -# buttons # -# # -# # -##############################################*/ } diff --git a/admin/templates/pixelegg/app.less b/admin/templates/pixelegg/app.less index 7b0cb2b879..f564a81d5b 100755 --- a/admin/templates/pixelegg/app.less +++ b/admin/templates/pixelegg/app.less @@ -21,102 +21,42 @@ @media all { // ADMIN in SIDEBAR - div.dhtmlxTree { - - // selected Item td.standartTreeRow { - span.selectedTreeRow { background-color: @egw_color_1_e; color: @gray_90;} - } - - - } + /* ############################################################################# + // iframe + // Rahmen + padding**/ + + /*################## iframe ####################*/ + /*# # #*/ + /*# # #*/ + /*# # ADMIN #*/ + /*# # #*/ + /*# # #*/ + /*# # #*/ + /*##############################################*/ -/* ############################################################################# -// iframe -// Rahmen + padding**/ + /** + * Give space to both contact view & infolog list + */ -/*################## iframe ####################*/ -/*# # #*/ -/*# # #*/ -/*# # ADMIN #*/ -/*# # #*/ -/*# # #*/ -/*# # #*/ -/*##############################################*/ + iframe#admin-index_iframe { + background-color: transparent; + #admin-categories-index{padding: 10px;} -/** - * Give space to both contact view & infolog list - */ + table.egwGridView_grid tr td {color: #000;} -iframe#admin-index_iframe{ + } // iframe - background-color: transparent; - - #admin-categories-index{ - padding: 10px; - - table.et2_grid { - - #admin-categories-index_nm { - - div.egwGridView_outer{ - - td.frame { - - - - } - } - - } - - } - - } - - table.egwGridView_grid tr td {color: #000;} - -} // iframe - -// gray Filter for images + // gray Filter for images table.egwGridView_grid img { - /*filter grey*/ - .img_filter_none; - } - - - - -// ############################################################################# -// Dialog ADMIN - -/*########################################### -# # -# dialogHeader # -############################################# -# # -# # -# # -# # -# # -# dialog # -# # -# # -############################################# -# # -# buttons # -# # -# # -##############################################*/ - - -} // Media -// -// + /*filter grey*/ + .img_filter_none; + } +} diff --git a/api/templates/default/etemplate2.css b/api/templates/default/etemplate2.css index f91b867da5..18f53b1c7e 100644 --- a/api/templates/default/etemplate2.css +++ b/api/templates/default/etemplate2.css @@ -304,6 +304,8 @@ button#cancel { .et2_textbox_ro { white-space: pre-wrap; } +textarea.et2_textbox {border:1px solid silver;} +textarea.et2_textbox_ro {border:none;} /*Switch of FF red border validation*/ .et2_textbox:invalid{ box-shadow: none; @@ -852,7 +854,6 @@ ul.et2_link_string { cursor: pointer; border: 1px solid silver; background-color: #E0E0E0; - background-image: url(images/gradient01.png); background-position: center; background-repeat: repeat-x; -webkit-user-select: none; @@ -865,7 +866,6 @@ ul.et2_link_string { background-color: #D0D0EE; } .et2_tabflag:active { - background-image: url(images/gradient02.png); background-color: #D0D0E0; } .et2_tabs { @@ -1024,7 +1024,7 @@ ul.et2_link_string { } .et2_taglist_toggle > div.ms-ctn { display: inline-block; - width: calc(100% - 16px); + width: calc(100% - 10px); padding-right: 2px; } .et2_taglist_toggle.ui-state-hover, @@ -1034,26 +1034,23 @@ ul.et2_link_string { .et2_taglist_toggle:not(.et2_taglist_single) .ms-ctn { /* height: 100%;*/ } -.et2_taglist_toggle.et2_taglist_single > div.ms-ctn { - padding-right: 7px -} + .et2_taglist_toggle > div.toggle { - margin-left: -1px; - float: right; - - width: 25px; - height: 23px; - position: relative; - - z-index: 5; - - border: 1px solid #BBB; + top: 1px; + width: 23px; + height: 23px; + position: absolute; + right: 5px; + z-index: 5; background-color: white; background-repeat: no-repeat; background-position: center center; background-image: url("../../../phpgwapi/templates/default/images/foldertree_nolines_minus.gif"); } - +.et2_taglist_toggle div.ms-ctn { + padding:0; + padding-left: 10px; +} .et2_taglist_toggle.et2_taglist_single:not(.expanded) > div.toggle { display: none; } @@ -2602,4 +2599,18 @@ td.avatar { } .et2_searchbox .hide { display: none !important; -} \ No newline at end of file +} + + +/*Dialog headers styling*/ +tr.dialogHeader td, tr.dialogHeader2 td, tr.dialogHeader3 td, tr.dialogHeader4 td, +tr.dialogOperators td,.dialogFooterToolbar { + padding: 5px 0 5px 0; + vertical-align: middle; +} +.dialogHeader { + vertical-align: middle; + border-bottom: 1px solid #E6E6E6; + height: 50px; +} +tr.dialogHeader2 td {padding-top:15px;} \ No newline at end of file diff --git a/calendar/templates/default/app.css b/calendar/templates/default/app.css index a6d4ca27c2..6f1c2e94d2 100644 --- a/calendar/templates/default/app.css +++ b/calendar/templates/default/app.css @@ -148,12 +148,7 @@ #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%; } /****************************************************************** @@ -1313,11 +1308,7 @@ img.calendar_print_button, 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; margin: 0; diff --git a/calendar/templates/default/edit.xet b/calendar/templates/default/edit.xet index 170bb81279..96e5578f1e 100644 --- a/calendar/templates/default/edit.xet +++ b/calendar/templates/default/edit.xet @@ -2,98 +2,56 @@ -