extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2025-01-03 04:29:28 +01:00
Code Issues Packages Projects Releases Wiki Activity

work in progress: styling mail list, added styling for progress-bar/quota in toolbar or nextmatch header

Browse Source
This commit is contained in:
Ralf Becker 2016-02-25 15:07:35 +00:00
parent d2e26f6e10
commit ce1a502344
5 changed files with 53 additions and 296 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
etemplate/templates/default/etemplate2.css
View File

@ -1108,7 +1108,7 @@ div.message.floating {
} }
.nextmatch_header .header_count { .nextmatch_header .header_count {
padding: 0px 10px; padding: 0px 10px;
margin: 1px 6px 1px; margin: 1px 6px 1px 0;
height: 22px; height: 22px;
border: 1px solid silver; border: 1px solid silver;
text-align: center; text-align: center;
@ -1632,9 +1632,7 @@ div.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button {
width: 24px; width: 24px;
background-position: center; background-position: center;
background-size: 16px 16px; background-size: 16px 16px;
border-radius: 3px;
padding-left: 0; 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 { .et2_toolbar .et2_toolbar_actionlist button.et2_button_with_image.et2_toolbar_hasCaption, .nextmatch_header_row .et2_button_text {
width:auto; width:auto;
@ -1648,9 +1646,21 @@ div.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button {
width:auto; width:auto;
padding-left: 3px; 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; margin: 1px 4px 1px 0;
height: 24px; 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 * Daterange selection in NM header

31
mail/templates/default/app.css
View File

@ -304,21 +304,15 @@ pre {
position: relative position: relative
} }
.mail-index_quotabox { .mail-index_quotabox {
position: absolute; display: inline-block;
top:8px;
right:74px;
width:200px !important;
z-index:99;
} }
.mail-index_vacation { .mail-index_vacation {
position: absolute; display: inline-block;
top:3px; vertical-align: top;
right:190px;
width:250px !important;
z-index:99;
} }
.mail-index_vacation > div { .mail-index_vacation > div {
text-align: center; text-align: center;
line-height: 110%;
} }
.mail-index_vacation > div > span { .mail-index_vacation > div > span {
color: red; color: red;
@ -330,20 +324,16 @@ pre {
display: none !important; display: none !important;
} }
.mail-index_QuotaGreen, .mail-index_QuotaYellow, .mail-index_QuotaRed { .mail-index_QuotaGreen, .mail-index_QuotaYellow, .mail-index_QuotaRed {
height:12px !important;
width:100px !important; width:100px !important;
} }
.mail-index_QuotaGreen > div { .mail-index_QuotaGreen > div {
background-color: green !important; background-color: green !important;
height:11px !important;
} }
.mail-index_QuotaYellow > div { .mail-index_QuotaYellow > div {
background-color: yellow !important; background-color: yellow !important;
height:11px !important;
} }
.mail-index_QuotaRed > div { .mail-index_QuotaRed > div {
background-color: red !important; background-color: red !important;
height:11px !important;
} }
/* /*
influence the tree display and scrolling behavior influence the tree display and scrolling behavior
@ -404,16 +394,11 @@ div.mailUploadSection > div.et2_hbox > label {
background-position: center; background-position: center;
border:none; border:none;
} }
#mail-index_button\[mailcreate\] { #mail-index_button\[mailcreate\], #composeToolbar-send {
width: 99%; color: white;
text-align: left; background-color: #189800;
font-weight: bold;
padding-left: 25px;
background-image: url(../default/images/write_mail.png) !important;
background-position: left;
background-repeat: no-repeat;
} }
.mail-compose_composeToolbar{ .mail-compose_composeToolbar {
border-left: 1px solid silver; border-left: 1px solid silver;
border-top: 1px solid silver; border-top: 1px solid silver;
border-right: 1px solid gray; border-right: 1px solid gray;

17
mail/templates/default/index.xet
View File

@ -4,7 +4,7 @@
<overlay> <overlay>
<template id="mail.index.spliter" height="100%" template="" lang="" group="0" version="1.9.001"> <template id="mail.index.spliter" height="100%" template="" lang="" group="0" version="1.9.001">
<split dock_side="bottomDock" id="mailSplitter" orientation="h"> <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%"> <vbox id="mailPreview" width="100%">
<hbox width="100%" id="mailPreviewHeadersFrom" class="mailPreviewHeaders"> <hbox width="100%" id="mailPreviewHeadersFrom" class="mailPreviewHeaders">
<description value="From"/> <description value="From"/>
@ -70,7 +70,7 @@
</split> </split>
</template> </template>
<template id="mail.index.nospliter" template="" lang="" group="0" version="1.9.001"> <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>
<template id="mail.index.rows" template="" lang="" group="0" version="1.9.001"> <template id="mail.index.rows" template="" lang="" group="0" version="1.9.001">
<grid width="100%"> <grid width="100%">
@ -117,15 +117,18 @@
</rows> </rows>
</grid> </grid>
</template> </template>
<template id="mail.index" template="" lang="" group="0" version="1.9.001"> <template id="mail.index.add" 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"/> <buttononly id="button[mailcreate]" onclick="app.mail.mail_compose(false);" label="Compose"/>
<html id="msg"/> </template>
<buttononly id="button[mailcreate]" onclick="app.mail.mail_compose(false);" label="Compose" parent_node="mail-index_buttonmailcreate"/> <template id="mail.index.quota" template="" lang="" group="0" version="1.9.001">
<hbox class="mail-index_quotabox"><progress id="nm[quotainpercent]" label="@nm[quota]" class="@nm[quotaclass]"/></hbox>
<hbox class="mail-index_vacation"><vbox> <hbox class="mail-index_vacation"><vbox>
<description id="nm[vacationnotice]" class="@nm[vacationclass]"/> <description id="nm[vacationnotice]" class="@nm[vacationclass]"/>
<description id="nm[vacationrange]" class="@nm[vacationrangeclass]"/></vbox> <description id="nm[vacationrange]" class="@nm[vacationrangeclass]"/></vbox>
</hbox> </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"/> <template id="mail.index.spliter" height="100%" template="mail.index.spliter"/>
<iframe frameborder="1" id="extra_iframe" scrolling="auto" disabled="true"/> <iframe frameborder="1" id="extra_iframe" scrolling="auto" disabled="true"/>
</template> </template>

152
mail/templates/pixelegg/app.css
View File

@ -299,21 +299,15 @@ pre {
position: relative; position: relative;
} }
.mail-index_quotabox { .mail-index_quotabox {
position: absolute; display: inline-block;
top: 8px;
right: 74px;
width: 200px !important;
z-index: 99;
} }
.mail-index_vacation { .mail-index_vacation {
position: absolute; display: inline-block;
top: 3px; vertical-align: top;
right: 190px;
width: 250px !important;
z-index: 99;
} }
.mail-index_vacation > div { .mail-index_vacation > div {
text-align: center; text-align: center;
line-height: 110%;
} }
.mail-index_vacation > div > span { .mail-index_vacation > div > span {
color: red; color: red;
@ -327,20 +321,16 @@ pre {
.mail-index_QuotaGreen, .mail-index_QuotaGreen,
.mail-index_QuotaYellow, .mail-index_QuotaYellow,
.mail-index_QuotaRed { .mail-index_QuotaRed {
height: 12px !important;
width: 100px !important; width: 100px !important;
} }
.mail-index_QuotaGreen > div { .mail-index_QuotaGreen > div {
background-color: green !important; background-color: green !important;
height: 11px !important;
} }
.mail-index_QuotaYellow > div { .mail-index_QuotaYellow > div {
background-color: yellow !important; background-color: yellow !important;
height: 11px !important;
} }
.mail-index_QuotaRed > div { .mail-index_QuotaRed > div {
background-color: red !important; background-color: red !important;
height: 11px !important;
} }
/* /*
influence the tree display and scrolling behavior influence the tree display and scrolling behavior
@ -400,14 +390,10 @@ div.mailUploadSection > div.et2_hbox > label {
background-position: center; background-position: center;
border: none; border: none;
} }
#mail-index_button\[mailcreate\] { #mail-index_button\[mailcreate\],
width: 99%; #composeToolbar-send {
text-align: left; color: white;
font-weight: bold; background-color: #189800;
padding-left: 25px;
background-image: url(../default/images/write_mail.png) !important;
background-position: left;
background-repeat: no-repeat;
} }
.mail-compose_composeToolbar { .mail-compose_composeToolbar {
border-left: 1px solid silver; border-left: 1px solid silver;
@ -989,67 +975,6 @@ body {
background-color: @color_hint; 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 { .egw_fw_ui_category_content span#mail-tree_target {
max-height: 50%; max-height: 50%;
} }
@ -1107,19 +1032,7 @@ body {
background-color: white !important; background-color: white !important;
} }
#mail-compose #mail-compose_composeToolbar button#composeToolbar-send { #mail-compose #mail-compose_composeToolbar button#composeToolbar-send {
height: 24px; background-color: #189800;
/*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;
color: #ffffff; color: #ffffff;
} }
#mail-compose #mail-compose_composeToolbar button#composeToolbar-send:hover { #mail-compose #mail-compose_composeToolbar button#composeToolbar-send:hover {
@ -2033,53 +1946,6 @@ pre {
#mail-index { #mail-index {
position: relative; 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 influence the tree display and scrolling behavior
*/ */

109
mail/templates/pixelegg/app.less
View File

@ -76,14 +76,6 @@ body {
#mail-index_mailPreviewContainer {} #mail-index_mailPreviewContainer {}
// Message - standdardmäßig ausgeblendet
span#mail-index_msg{
span {
// background: red;
// height: 30px;
}
}
// alles // alles
// Box mit Header und Liste // Box mit Header und Liste
div#mail-index_nm{ div#mail-index_nm{
@ -230,48 +222,6 @@ body {
.egw_fw_ui_category_content{ .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 // Mail Liste der Postfächer
span#mail-tree_target { span#mail-tree_target {
max-height: 50%; max-height: 50%;
@ -353,23 +303,10 @@ body {
// Senden Button // Senden Button
button#composeToolbar-send{ button#composeToolbar-send{
height: 24px; background-color: @color_positive_action;
/*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;
color: @gray_0; color: @gray_0;
&:hover {.box_shadow_standard_light_hover; background-color:@color_positive_action;} &:hover {.box_shadow_standard_light_hover; background-color:@color_positive_action;}
&:disabled {background-color: @color_disabled !important;} &:disabled {background-color: @color_disabled !important;}
} }
button#composeToolbar-to_infolog:hover, button#composeToolbar-to_infolog:hover,
button#composeToolbar-to_tracker:hover, button#composeToolbar-to_tracker:hover,
@ -1272,50 +1209,6 @@ pre {
#mail-index { #mail-index {
position: relative 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 influence the tree display and scrolling behavior