extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-10-05 09:32:08 +02: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 {
padding: 0px 10px;
margin: 1px 6px 1px;
margin: 1px 6px 1px 0;
height: 22px;
border: 1px solid silver;
text-align: center;
@ -1632,9 +1632,7 @@ div.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button {
width: 24px;
background-position: center;
background-size: 16px 16px;
border-radius: 3px;
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 {
width:auto;
@ -1648,9 +1646,21 @@ div.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button {
width:auto;
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;
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

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

@ -144,7 +144,7 @@ tr.forwarded span.status_img {
font-style: italic;
font-weight : normal !important;
font-family: Arial;
color: grey !important;
color: grey !important;
}
TR.sieveRowActive
@ -304,21 +304,15 @@ pre {
position: relative
}
.mail-index_quotabox {
position: absolute;
top:8px;
right:74px;
width:200px !important;
z-index:99;
display: inline-block;
}
.mail-index_vacation {
position: absolute;
top:3px;
right:190px;
width:250px !important;
z-index:99;
display: inline-block;
vertical-align: top;
}
.mail-index_vacation > div {
text-align: center;
line-height: 110%;
}
.mail-index_vacation > div > span {
color: red;
@ -330,20 +324,16 @@ pre {
display: none !important;
}
.mail-index_QuotaGreen, .mail-index_QuotaYellow, .mail-index_QuotaRed {
height:12px !important;
width:100px !important;
}
.mail-index_QuotaGreen > div {
background-color: green !important;
height:11px !important;
}
.mail-index_QuotaYellow > div {
background-color: yellow !important;
height:11px !important;
}
.mail-index_QuotaRed > div {
background-color: red !important;
height:11px !important;
}
/*
influence the tree display and scrolling behavior
@ -404,16 +394,11 @@ div.mailUploadSection > div.et2_hbox > label {
background-position: center;
border:none;
}
#mail-index_button\[mailcreate\] {
width: 99%;
text-align: left;
font-weight: bold;
padding-left: 25px;
background-image: url(../default/images/write_mail.png) !important;
background-position: left;
background-repeat: no-repeat;
#mail-index_button\[mailcreate\], #composeToolbar-send {
color: white;
background-color: #189800;
}
.mail-compose_composeToolbar{
.mail-compose_composeToolbar {
border-left: 1px solid silver;
border-top: 1px solid silver;
border-right: 1px solid gray;
@ -790,16 +775,16 @@ blockquote blockquote blockquote blockquote blockquote blockquote{
}
.tmpPrintDiv td, textarea {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.tmpPrintDiv .td_display {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: black;
background-color: #FFFFFF;
}
.tmpPrintDiv .td_display span[style] {
}
pre {
width:99% !important;
@ -840,15 +825,15 @@ blockquote blockquote blockquote blockquote blockquote blockquote{
/* MOBILE and tablets (Portrait & Landscape) View --------------*/
@media only screen and (max-device-width:1024px) {
}
/* tablets and smartphones (portrait) ----------- */
@media only screen
and (max-device-width : 1024px)
and (orientation : portrait) {
#mail-index div#mail-index_nm tr.mail.row {
}
}
@ -857,7 +842,7 @@ and (orientation : portrait) {
and (min-width : 321px)
and (max-device-width:768){
#mail-index div#mail-index_nm tr.mail.row {
}
}

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

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

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

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

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

@ -76,14 +76,6 @@ body {
#mail-index_mailPreviewContainer {}
// Message - standdardmäßig ausgeblendet
span#mail-index_msg{
span {
// background: red;
// height: 30px;
}
}
// alles
// Box mit Header und Liste
div#mail-index_nm{
@ -230,48 +222,6 @@ body {
.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
span#mail-tree_target {
max-height: 50%;
@ -284,7 +234,7 @@ body {
// color - selected tree item
.selectedTreeRow, .selectedTreeRow_lor {background-color: @egw_color_1_a; color: @gray_90;text-decoration: none;}
.standartTreeRow_lor {background-color: rgba(103, 159, 210, 0.2); color: @gray_90;text-decoration: none;}
/*new mail in FOlder
span.standartTreeRow b {color: @egw_color_2_a;}
@ -353,23 +303,10 @@ body {
// Senden Button
button#composeToolbar-send{
height: 24px;
/*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;
background-color: @color_positive_action;
color: @gray_0;
&:hover {.box_shadow_standard_light_hover; background-color:@color_positive_action;}
&:disabled {background-color: @color_disabled !important;}
}
button#composeToolbar-to_infolog:hover,
button#composeToolbar-to_tracker:hover,
@ -497,7 +434,7 @@ div.mailUploadSection {
#mail-display{
// gesamtbreite
min-height: 768px;
padding: 5px;
@ -1109,7 +1046,7 @@ tr.forwarded span.status_img {
font-style: italic;
font-weight : normal;
font-family: Arial;
color: grey;
color: grey;
}
TR.sieveRowActive
@ -1272,50 +1209,6 @@ pre {
#mail-index {
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