extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-11-22 07:53:39 +01:00
Code Issues Packages Projects Releases Wiki Activity

Dialog styling W.I.P.:

Browse Source 
- New design for header & footer in dialogs
- More styling of calendar edit dialog
This commit is contained in:
Hadi Nategh 2016-04-07 09:13:26 +00:00
parent 52247f10b5
commit a46b4fbfea
10 changed files with 59 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
calendar/templates/default/edit.xet
View File

@ -94,7 +94,7 @@
<column width="50%"/> <column width="50%"/>
</columns> </columns>
<rows> <rows>
<row class="th gray"> <row class="th">
<description value="Repeating Event Information" span="all"/> <description value="Repeating Event Information" span="all"/>
</row> </row>
<row disabled="!@reference"> <row disabled="!@reference">
@ -157,19 +157,19 @@
</grid> </grid>
</template> </template>
<template id="calendar.edit.links" template="" lang="" group="0" version="1.0.1.001"> <template id="calendar.edit.links" template="" lang="" group="0" version="1.0.1.001">
<grid width="100%" overflow="auto"> <grid width="100%">
<columns> <columns>
<column width="95"/> <column width="95"/>
<column/> <column/>
</columns> </columns>
<rows> <rows>
<row class="th gray" disabled="@view"> <row class="th" disabled="@view">
<description value="Create new links" span="all"/> <description value="Create new links" span="all"/>
</row> </row>
<row disabled="@view"> <row disabled="@view">
<link-to id="link_to" span="all"/> <link-to id="link_to" span="all"/>
</row> </row>
<row class="th gray"> <row class="th">
<description value="Existing links" span="all" /> <description value="Existing links" span="all" />
</row> </row>
<row class="row_off" valign="top"> <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..."/> <menupopup statustext="Execute a further action for this entry" id="action" onchange="app.calendar.actions_change" options="Actions..."/>
</menulist> </menulist>
<checkbox label="Do not notify" id="no_notifications"/> <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"/> <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"/> <textbox type="hidden" id="delete_exceptions"/>
</hbox> </hbox>

34
calendar/templates/mobile/app.css
View File

@ -141,7 +141,7 @@ form[id^="tracker-"] .dialogHeadbar {
* @package calendar * @package calendar
* @version $Id$ * @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 classes*/
@media print { @media print {
#calendar-view.et2_container, #calendar-view.et2_container,
@ -289,16 +289,6 @@ form[id^="tracker-"] .dialogHeadbar {
#calendar-view_view td { #calendar-view_view td {
padding: 0px; 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 { .calendar_inputFullWidth input {
width: 100%; width: 100%;
} }
@ -1418,8 +1408,8 @@ img.calendar_print_appicon {
#calendar-edit_account + .chzn-container .chzn-results { #calendar-edit_account + .chzn-container .chzn-results {
max-height: 195px; max-height: 195px;
} }
#calendar-edit_category { input#calendar-edit_location {
max-width: 230px; padding-left: 0;
} }
#calendar_sidebox_content .ui-datepicker div.ui-datepicker-buttonpane { #calendar_sidebox_content .ui-datepicker div.ui-datepicker-buttonpane {
border-top: 0; border-top: 0;
@ -1761,24 +1751,6 @@ div.calendar {
background-color: #000; background-color: #000;
color: #0f0; color: #0f0;
} }
/*###########################################
# #
# dialogHeader #
#############################################
# #
# #
# #
# #
# #
# dialog #
# #
# #
#############################################
# #
# buttons #
# #
# #
##############################################*/
#calendar-edit { #calendar-edit {
/*###########################################*/ /*###########################################*/
/*###########################################*/ /*###########################################*/

8
calendar/templates/pixelegg/app.css
View File

@ -11,7 +11,7 @@
* @package calendar * @package calendar
* @version $Id$ * @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 classes*/
@media print { @media print {
#calendar-view.et2_container, #calendar-view.et2_container,
@ -1658,12 +1658,6 @@ div.calendar {
#calendar-edit select#calendar-edit_duration { #calendar-edit select#calendar-edit_duration {
width: 133px; 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 { #calendar-edit #calendar-edit_id {
float: right; float: right;
margin-right: 5px; margin-right: 5px;

8
calendar/templates/pixelegg/app.less
View File

@ -417,14 +417,6 @@ div.calendar { position: relative; }
} }
select#calendar-edit_duration{width: 133px;} 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 // ID
#calendar-edit_id{float: right;margin-right: 5px;} #calendar-edit_id{float: right;margin-right: 5px;}

14
pixelegg/css/mobile.css
View File

@ -2989,6 +2989,7 @@ table.dialog-main-view {
/********** Header Part ********************/ /********** Header Part ********************/
.dialogHeader { .dialogHeader {
color: #000000; color: #000000;
border-bottom: 3px solid #696969;
} }
.dialogHeader img[src*="navbar"] { .dialogHeader img[src*="navbar"] {
padding: 0 0 0 15px; padding: 0 0 0 15px;
@ -3111,6 +3112,7 @@ td.etemplate_tab_active.th {
padding: 5px; padding: 5px;
background-color: #ffffff; background-color: #ffffff;
margin-bottom: 11px; margin-bottom: 11px;
margin-top: 11px;
} }
.tab_body { .tab_body {
border-top-width: 1px; border-top-width: 1px;
@ -3140,7 +3142,6 @@ div#etemplate\.tab_widget {
# dialogOperators # # dialogOperators #
#############################################*/ #############################################*/
.dialogOperators { .dialogOperators {
background-color: #e6e6e6;
border-top: 0px solid #e6e6e6; border-top: 0px solid #e6e6e6;
border-bottom: 0px solid #e6e6e6; border-bottom: 0px solid #e6e6e6;
} }
@ -3157,10 +3158,12 @@ div#etemplate\.tab_widget {
/*# button | button | button delete #*/ /*# button | button | button delete #*/
/*##############################################*/ /*##############################################*/
.dialogFooterToolbar { .dialogFooterToolbar {
background-color: #679fd2; background-color: transparent;
margin: 10px 0 0 0; margin: 10px 0 0 0;
padding: 3px; padding: 3px;
white-space: nowrap; white-space: nowrap;
border-top: 3px solid #696969;
padding-top: 8px !important;
/*.et2_selectbox {height: 32px; top: 0px; font-size: 1em;}*/ /*.et2_selectbox {height: 32px; top: 0px; font-size: 1em;}*/
} }
.dialogFooterToolbar td { .dialogFooterToolbar td {
@ -3170,8 +3173,10 @@ div#etemplate\.tab_widget {
padding-left: 5px; padding-left: 5px;
} }
.dialogFooterToolbar button { .dialogFooterToolbar button {
height: 24px;
min-width: 86px; min-width: 86px;
height: 24px;
border-radius: 3px;
border: 1px solid silver;
} }
.dialogFooterToolbar button:hover { .dialogFooterToolbar button:hover {
height: 24px; height: 24px;
@ -5395,6 +5400,9 @@ table.egwGridView_grid tbody {
table.egwGridView_grid tbody tr:hover { table.egwGridView_grid tbody tr:hover {
background: rgba(103, 159, 210, 0.2); background: rgba(103, 159, 210, 0.2);
} }
table.egwGridView_grid tbody tr.th:hover {
background: transparent;
}
table.egwGridView_grid tbody tr.selected { table.egwGridView_grid tbody tr.selected {
background-image: none; background-image: none;
/*background-color: @egw_color_1_e !important;*/ /*background-color: @egw_color_1_e !important;*/

14
pixelegg/css/pixelegg.css
View File

@ -2978,6 +2978,7 @@ table.dialog-main-view {
/********** Header Part ********************/ /********** Header Part ********************/
.dialogHeader { .dialogHeader {
color: #000000; color: #000000;
border-bottom: 3px solid #696969;
} }
.dialogHeader img[src*="navbar"] { .dialogHeader img[src*="navbar"] {
padding: 0 0 0 15px; padding: 0 0 0 15px;
@ -3100,6 +3101,7 @@ td.etemplate_tab_active.th {
padding: 5px; padding: 5px;
background-color: #ffffff; background-color: #ffffff;
margin-bottom: 11px; margin-bottom: 11px;
margin-top: 11px;
} }
.tab_body { .tab_body {
border-top-width: 1px; border-top-width: 1px;
@ -3129,7 +3131,6 @@ div#etemplate\.tab_widget {
# dialogOperators # # dialogOperators #
#############################################*/ #############################################*/
.dialogOperators { .dialogOperators {
background-color: #e6e6e6;
border-top: 0px solid #e6e6e6; border-top: 0px solid #e6e6e6;
border-bottom: 0px solid #e6e6e6; border-bottom: 0px solid #e6e6e6;
} }
@ -3146,10 +3147,12 @@ div#etemplate\.tab_widget {
/*# button | button | button delete #*/ /*# button | button | button delete #*/
/*##############################################*/ /*##############################################*/
.dialogFooterToolbar { .dialogFooterToolbar {
background-color: #679fd2; background-color: transparent;
margin: 10px 0 0 0; margin: 10px 0 0 0;
padding: 3px; padding: 3px;
white-space: nowrap; white-space: nowrap;
border-top: 3px solid #696969;
padding-top: 8px !important;
/*.et2_selectbox {height: 32px; top: 0px; font-size: 1em;}*/ /*.et2_selectbox {height: 32px; top: 0px; font-size: 1em;}*/
} }
.dialogFooterToolbar td { .dialogFooterToolbar td {
@ -3159,8 +3162,10 @@ div#etemplate\.tab_widget {
padding-left: 5px; padding-left: 5px;
} }
.dialogFooterToolbar button { .dialogFooterToolbar button {
height: 24px;
min-width: 86px; min-width: 86px;
height: 24px;
border-radius: 3px;
border: 1px solid silver;
} }
.dialogFooterToolbar button:hover { .dialogFooterToolbar button:hover {
height: 24px; height: 24px;
@ -5384,6 +5389,9 @@ table.egwGridView_grid tbody {
table.egwGridView_grid tbody tr:hover { table.egwGridView_grid tbody tr:hover {
background: rgba(103, 159, 210, 0.2); background: rgba(103, 159, 210, 0.2);
} }
table.egwGridView_grid tbody tr.th:hover {
background: transparent;
}
table.egwGridView_grid tbody tr.selected { table.egwGridView_grid tbody tr.selected {
background-image: none; background-image: none;
/*background-color: @egw_color_1_e !important;*/ /*background-color: @egw_color_1_e !important;*/

6
pixelegg/inc/class.pixelegg_framework.inc.php
View File

@ -144,7 +144,7 @@ class pixelegg_framework extends jdots_framework
-popup toolbar -popup toolbar
*/ */
div#egw_fw_header, div.egw_fw_ui_category:hover,#loginMainDiv,#loginMainDiv #divAppIconBar #divLogo, 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; 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 else
/* Mobile theme custom colors*/ /* Mobile theme custom colors*/

12
pixelegg/less/layout_dialog.less
View File

@ -155,7 +155,7 @@ table.dialog-main-view {width: 100%;}
/********** Header Part ********************/ /********** Header Part ********************/
.dialogHeader { .dialogHeader {
.color_100_gray; .color_100_gray;
border-bottom: 3px solid @gray_60;
// APP img // APP img
img[src*="navbar"] { img[src*="navbar"] {
padding: 0 0 0 15px; padding: 0 0 0 15px;
@ -284,6 +284,7 @@ td.etemplate_tab_active.th {
padding: 5px; padding: 5px;
background-color: @gray_0; background-color: @gray_0;
margin-bottom: 11px; margin-bottom: 11px;
margin-top:11px;
} }
.tab_body { .tab_body {
@ -318,7 +319,6 @@ div#etemplate\.tab_widget {
# dialogOperators # # dialogOperators #
#############################################*/ #############################################*/
.dialogOperators { .dialogOperators {
background-color: @gray_10;
border-top: 0px solid @gray_10; border-top: 0px solid @gray_10;
border-bottom: 0px solid @gray_10; border-bottom: 0px solid @gray_10;
@ -335,11 +335,12 @@ div#etemplate\.tab_widget {
/*##############################################*/ /*##############################################*/
.dialogFooterToolbar{ .dialogFooterToolbar{
background-color: @color_button_panel_bg_color; background-color: transparent;
margin: 10px 0 0 0; margin: 10px 0 0 0;
padding: 3px; padding: 3px;
white-space: nowrap; white-space: nowrap;
border-top: 3px solid #696969;
padding-top: 8px !important;
td { td {
padding: 0px 5px 0px 0px; padding: 0px 5px 0px 0px;
} }
@ -349,6 +350,9 @@ div#etemplate\.tab_widget {
button { button {
.dimension_height_m; min-width: 86px; .dimension_height_m; min-width: 86px;
height: 24px;
border-radius: 3px;
border: 1px solid silver;
&:hover{.dimension_height_m;} &:hover{.dimension_height_m;}
&:action{.dimension_height_m;} &:action{.dimension_height_m;}
} }

2
pixelegg/less/layout_table.less
View File

@ -202,7 +202,7 @@ table.egwGridView_grid{
/*multiple choise*/ /*multiple choise*/
// Hover State // Hover State
tr:hover {background: @color_hover_row;} tr:hover {background: @color_hover_row;}
tr.th:hover {background: transparent;}
tr.selected{ tr.selected{
background-image: none; background-image: none;
/*background-color: @egw_color_1_e !important;*/ /*background-color: @egw_color_1_e !important;*/

20
pixelegg/mobile/fw_mobile.css
View File

@ -1559,7 +1559,7 @@ div#ui-datepicker-div {
* @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
* @author Stefan Reinhard <stefan.reinhard@pixelegg.de> * @author Stefan Reinhard <stefan.reinhard@pixelegg.de>
* @package pixelegg * @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-ctn,
.ms-res-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 * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
* @author Stefan Reinhard <stefan.reinhard@pixelegg.de> * @author Stefan Reinhard <stefan.reinhard@pixelegg.de>
* @package pixelegg * @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 { /*body {
background-color: @gray_0; background-color: @gray_0;
@ -3000,6 +3000,7 @@ table.dialog-main-view {
/********** Header Part ********************/ /********** Header Part ********************/
.dialogHeader { .dialogHeader {
color: #000000; color: #000000;
border-bottom: 3px solid #696969;
} }
.dialogHeader img[src*="navbar"] { .dialogHeader img[src*="navbar"] {
padding: 0 0 0 15px; padding: 0 0 0 15px;
@ -3122,6 +3123,7 @@ td.etemplate_tab_active.th {
padding: 5px; padding: 5px;
background-color: #ffffff; background-color: #ffffff;
margin-bottom: 11px; margin-bottom: 11px;
margin-top: 11px;
} }
.tab_body { .tab_body {
border-top-width: 1px; border-top-width: 1px;
@ -3151,7 +3153,6 @@ div#etemplate\.tab_widget {
# dialogOperators # # dialogOperators #
#############################################*/ #############################################*/
.dialogOperators { .dialogOperators {
background-color: #e6e6e6;
border-top: 0px solid #e6e6e6; border-top: 0px solid #e6e6e6;
border-bottom: 0px solid #e6e6e6; border-bottom: 0px solid #e6e6e6;
} }
@ -3168,10 +3169,12 @@ div#etemplate\.tab_widget {
/*# button | button | button delete #*/ /*# button | button | button delete #*/
/*##############################################*/ /*##############################################*/
.dialogFooterToolbar { .dialogFooterToolbar {
background-color: #679fd2; background-color: transparent;
margin: 10px 0 0 0; margin: 10px 0 0 0;
padding: 3px; padding: 3px;
white-space: nowrap; white-space: nowrap;
border-top: 3px solid #696969;
padding-top: 8px !important;
/*.et2_selectbox {height: 32px; top: 0px; font-size: 1em;}*/ /*.et2_selectbox {height: 32px; top: 0px; font-size: 1em;}*/
} }
.dialogFooterToolbar td { .dialogFooterToolbar td {
@ -3181,8 +3184,10 @@ div#etemplate\.tab_widget {
padding-left: 5px; padding-left: 5px;
} }
.dialogFooterToolbar button { .dialogFooterToolbar button {
height: 24px;
min-width: 86px; min-width: 86px;
height: 24px;
border-radius: 3px;
border: 1px solid silver;
} }
.dialogFooterToolbar button:hover { .dialogFooterToolbar button:hover {
height: 24px; height: 24px;
@ -5266,7 +5271,7 @@ button.image_button {
* @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
* @author Stefan Reinhard <stefan.reinhard@pixelegg.de> * @author Stefan Reinhard <stefan.reinhard@pixelegg.de>
* @package pixelegg * @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 * et2
@ -5406,6 +5411,9 @@ table.egwGridView_grid tbody {
table.egwGridView_grid tbody tr:hover { table.egwGridView_grid tbody tr:hover {
background: rgba(103, 159, 210, 0.2); background: rgba(103, 159, 210, 0.2);
} }
table.egwGridView_grid tbody tr.th:hover {
background: transparent;
}
table.egwGridView_grid tbody tr.selected { table.egwGridView_grid tbody tr.selected {
background-image: none; background-image: none;
/*background-color: @egw_color_1_e !important;*/ /*background-color: @egw_color_1_e !important;*/