extern/egroupware
1
0
Fork 1
mirror of https://github.com/EGroupware/egroupware.git synced 2024-12-26 00:29:38 +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%"/>
</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>

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

@ -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 {
/*###########################################*/
/*###########################################*/

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

@ -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;

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

@ -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;}

14
pixelegg/css/mobile.css
View File

@ -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;*/

14
pixelegg/css/pixelegg.css
View File

@ -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;*/

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

@ -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*/

12
pixelegg/less/layout_dialog.less
View File

@ -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;}
}

2
pixelegg/less/layout_table.less
View File

@ -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;*/

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
* @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;*/