Mobile theme W.I.P.:

- Implement standard header for mail compose
- Fix toolbar style
This commit is contained in:
Hadi Nategh 2016-01-26 11:51:56 +00:00
parent 49fc2d9898
commit c8bc389d87
9 changed files with 246 additions and 99 deletions

View File

@ -231,7 +231,16 @@ class mail_compose
{
$actions['prty']['children'][$content['priority']]['default'] = true;
}
if (html::$ua_mobile)
{
foreach ($actions as $key => $action)
{
if (!in_array($key, array('send','button[saveAsDraft]'))) {
$actions[$key]['toolbarDefault'] = false;
}
}
unset($actions['pgp']);
}
return $actions;
}

View File

@ -219,7 +219,8 @@ app.classes.mail = AppJS.extend(
);
break;
case 'mail.compose':
if (this.et2.getWidgetById('composeToolbar')._actionManager.getActionById('pgp').checked ||
if (this.et2.getWidgetById('composeToolbar')._actionManager.getActionById('pgp') &&
this.et2.getWidgetById('composeToolbar')._actionManager.getActionById('pgp').checked ||
this.et2.getArrayMgr('content').data.mail_plaintext &&
this.et2.getArrayMgr('content').data.mail_plaintext.indexOf(this.begin_pgp_message) != -1)
{

View File

@ -4,7 +4,12 @@
<overlay>
<template id="mail.compose" template="" lang="" group="0" version="1.9.001">
<vbox class="mailCompose mailComposeHeaderSection" width="100%">
<toolbar id="composeToolbar" width="et2_fullWidth" view_range="3" flat_list="false"/>
<hbox class="dialogHeadbar">
<hbox>
<toolbar class="et2_head_toolbar" id="composeToolbar" width="100%" view_range="3" flat_list="false"/>
<description/>
</hbox>
</hbox>
<hbox class="mail-compose_toolbar_assist" width="100%">
<vfs-select class="$cont[vfsNotAvailable] compose_egw_icons" id="selectFromVFSForCompose" onchange="app.mail.vfsUploadForCompose" button_caption=""/>
<file class="mail-compose_fileselector" statustext="Select file to attach to message" multiple='true' progress='attachments' onFinish="app.mail.uploadForCompose" onStart="app.mail.composeUploadStart" id="uploadForCompose" drop_target ="mail-compose"/>

View File

@ -8,7 +8,7 @@
<vbox class="mailDisplay">
<hbox class="dialogHeadbar">
<hbox>
<toolbar id="displayToolbar" width="100%" view_range="6" flat_list="true"/>
<toolbar class="et2_head_toolbar" id="displayToolbar" width="100%" view_range="6" flat_list="true"/>
<description/>
</hbox>
</hbox>

View File

@ -2606,6 +2606,63 @@ div.mailComposeHeaderSection > table {
padding: 1px 8px 0 8px;
background: none;
}
body #popupMainDiv div.et2_toolbar.et2_head_toolbar {
padding: 1px 5px 5px 10px !important;
}
body #popupMainDiv div.et2_toolbar.et2_head_toolbar button {
width: 46px;
height: 46px;
background-size: 18px 18px;
}
body #popupMainDiv div.et2_toolbar.et2_head_toolbar button.et2_toolbar_hasCaption {
width: auto;
}
body #popupMainDiv div.et2_toolbar.et2_head_toolbar div.et2_toolbar_actionlist {
margin-left: 50px;
}
body #popupMainDiv div.et2_toolbar.et2_head_toolbar div.et2_toolbar_more h.ui-state-hover {
background: none;
}
body #popupMainDiv div.et2_toolbar.et2_head_toolbar div.et2_toolbar_more h.ui-toolbar-menulistHeader {
color: transparent;
border: none;
height: 46px;
width: 35px;
padding: 0 !important;
margin-right: 15px;
margin-top: -7px;
}
body #popupMainDiv div.et2_toolbar.et2_head_toolbar div.et2_toolbar_more h.ui-toolbar-menulistHeader:after {
font-size: 18pt;
content: "\205D";
font-weight: bold;
color: white;
}
body #popupMainDiv div.et2_toolbar.et2_head_toolbar div.et2_toolbar_more span {
display: none;
}
body #popupMainDiv #mail-compose_composeToolbar button#composeToolbar-send {
height: 46px;
width: auto;
margin-top: 0.7px !important;
padding: 0 3px 0 0;
text-align: left;
font-weight: normal;
padding-left: 20px;
background-image: url(images/mail_send.png);
background-position: left;
background-repeat: no-repeat;
background-size: 16px 16px;
background-color: #fafafa;
color: black;
}
body #popupMainDiv #mail-compose_composeToolbar button#composeToolbar-send:hover {
box-shadow: none;
background-color: none;
}
body #popupMainDiv #mail-compose_composeToolbar button#composeToolbar-send:disabled {
background-color: none;
}
body #popupMainDiv #mail-display .mail-d-h1 {
padding-bottom: 15px;
border-bottom: 1px solid silver;
@ -2650,49 +2707,9 @@ div.mailComposeHeaderSection > table {
padding: 0;
margin-top: 10px;
}
body #popupMainDiv #mail-display .et2_toolbar,
body #popupMainDiv #mail-display #mail-display_toolbar {
padding: 1px 5px 5px 10px !important;
}
body #popupMainDiv #mail-display .et2_toolbar button,
body #popupMainDiv #mail-display #mail-display_toolbar button {
width: 46px;
height: 46px;
background-size: 18px 18px;
}
body #popupMainDiv #mail-display .et2_toolbar button[id="displayToolbar-delete"],
body #popupMainDiv #mail-display #mail-display_toolbar button[id="displayToolbar-delete"] {
body #popupMainDiv #mail-display button[id="displayToolbar-delete"] {
margin-left: 0;
}
body #popupMainDiv #mail-display .et2_toolbar div.et2_toolbar_actionlist,
body #popupMainDiv #mail-display #mail-display_toolbar div.et2_toolbar_actionlist {
margin-left: 50px;
}
body #popupMainDiv #mail-display .et2_toolbar #displayToolbar-actionbox h.ui-state-hover,
body #popupMainDiv #mail-display #mail-display_toolbar #displayToolbar-actionbox h.ui-state-hover {
background: none;
}
body #popupMainDiv #mail-display .et2_toolbar #displayToolbar-actionbox h.ui-toolbar-menulistHeader,
body #popupMainDiv #mail-display #mail-display_toolbar #displayToolbar-actionbox h.ui-toolbar-menulistHeader {
color: transparent;
border: none;
height: 46px;
width: 35px;
padding: 0 !important;
margin-right: 15px;
margin-top: -7px;
}
body #popupMainDiv #mail-display .et2_toolbar #displayToolbar-actionbox h.ui-toolbar-menulistHeader:after,
body #popupMainDiv #mail-display #mail-display_toolbar #displayToolbar-actionbox h.ui-toolbar-menulistHeader:after {
font-size: 18pt;
content: "\205D";
font-weight: bold;
color: white;
}
body #popupMainDiv #mail-display .et2_toolbar #displayToolbar-actionbox span,
body #popupMainDiv #mail-display #mail-display_toolbar #displayToolbar-actionbox span {
display: none;
}
body #popupMainDiv #mail-display .mailDisplay {
position: initial;
margin-top: 20px;

View File

@ -1755,6 +1755,69 @@ div.mailComposeHeaderSection > table {
padding: 1px 8px 0 8px;
background: none;
div.et2_toolbar.et2_head_toolbar {
padding: 1px 5px 5px 10px !important;
button {
width:46px;
height:46px;
background-size: 18px 18px;
}
button.et2_toolbar_hasCaption {
width:auto;
}
div.et2_toolbar_actionlist {
margin-left: 50px;
}
div.et2_toolbar_more {
h.ui-state-hover {
background:none;
}
h.ui-toolbar-menulistHeader {
color:transparent;
border: none;
height: 46px;
width: 35px;
padding: 0 !important;
margin-right: 15px;
margin-top: -7px;
&:hover {
}
&:after {
font-size:18pt;
content:"\205D";
font-weight: bold;
color:white;
}
}
span {
display: none;
}
}
}
#mail-compose_composeToolbar{
// Senden Button
button#composeToolbar-send{
height: 46px;
width: auto;
margin-top: 0.7px !important;
padding: 0 3px 0 0;
text-align: left;
font-weight: normal;
padding-left: 20px;
background-image: url(images/mail_send.png);
background-position: left;
background-repeat: no-repeat;
background-size: 16px 16px;
background-color: #fafafa;
color: black;
&:hover {box-shadow: none; background-color:none;}
&:disabled {background-color: none;}
}
}
#mail-display{
.mail-d-h1{
padding-bottom: 15px;
@ -1799,48 +1862,10 @@ div.mailComposeHeaderSection > table {
padding: 0;
margin-top: 10px;
}
.et2_toolbar,#mail-display_toolbar {
padding: 1px 5px 5px 10px !important;
button {
width:46px;
height:46px;
background-size: 18px 18px;
}
button[id="displayToolbar-delete"] {
margin-left: 0;
}
div.et2_toolbar_actionlist {
margin-left: 50px;
}
#displayToolbar-actionbox {
h.ui-state-hover {
background:none;
}
h.ui-toolbar-menulistHeader {
color:transparent;
border: none;
height: 46px;
width: 35px;
padding: 0 !important;
margin-right: 15px;
margin-top: -7px;
&:hover {
}
&:after {
font-size:18pt;
content:"\205D";
font-weight: bold;
color:white;
}
}
span {
display: none;
}
}
}
.mailDisplay {
position: initial;
margin-top: 20px;

View File

@ -2189,7 +2189,6 @@ body {
* @package pixelegg
* @version $Id$
*/
@import-once "def_colors.less";
#socialMedia {
position: relative;
bottom: 20px;
@ -4267,7 +4266,7 @@ td.message span.message {
text-decoration: none;
height: 32px;
/*font-size: 1.1em;*/
font-size: 12.100000000000001px;
font-size: 12.1px;
line-height: 1.5em;
}
#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul li a:hover {
@ -4291,7 +4290,7 @@ td.message span.message {
}
#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_home:before {
padding-right: 20px;
font-size: 12.100000000000001px;
font-size: 12.1px;
content: " ";
background-image: url(../images/topmenu_items/home.png);
background-repeat: no-repeat;
@ -4687,7 +4686,7 @@ td.message span.message {
padding-left: 3em;
color: #999999;
/*font-size: 12px;*/
font-size: 12.100000000000001px;
font-size: 12.1px;
line-height: 17px;
}
#egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_header object {
@ -4859,7 +4858,7 @@ td.message span.message {
margin: 5px 0px 3px 5px;
padding: 0px 0px 0px 15px;
line-height: 1em;
font-size: 12.100000000000001px;
font-size: 12.1px;
background-image: url(../images/arrow_left.png);
background-repeat: no-repeat;
background-position: left center;
@ -7175,7 +7174,7 @@ span.egw_tutorial_title {
margin: 5px 0px 3px 5px;
padding: 0px 0px 0px 15px;
line-height: 1em;
font-size: 12.100000000000001px;
font-size: 12.1px;
background-image: url(../images/arrow_left.png);
background-repeat: no-repeat;
background-position: left center;
@ -7515,7 +7514,7 @@ span.egw_tutorial_title {
}
/*mobile etemplate2*/
/*mobile etemplate2*/
@media only screen and (min-width: 320px) and (max-width: 1279px) {
@media only screen and (min-width: 320px) and (max-width: 1290px) {
body #egw_fw_basecontainer.sidebar-toggle #egw_fw_top_toolbar div#egw_fw_menu {
background-image: url(../images/topmenu_items/mobile/menu_white.png);
width: 65px;
@ -7953,4 +7952,43 @@ span.egw_tutorial_title {
body .et2_fullWidth input[type="radio"] {
width: auto;
}
body div.et2_toolbar.et2_head_toolbar {
background-color: transparent;
padding: 1px 5px 5px 10px !important;
}
body div.et2_toolbar.et2_head_toolbar button {
width: 46px;
height: 46px;
background-size: 18px 18px;
}
body div.et2_toolbar.et2_head_toolbar div.ui-toolbar-menulist {
min-width: 200px;
}
body div.et2_toolbar.et2_head_toolbar button.et2_toolbar_hasCaption {
width: auto;
}
body div.et2_toolbar.et2_head_toolbar div.et2_toolbar_actionlist {
margin-left: 50px;
}
body div.et2_toolbar.et2_head_toolbar div.et2_toolbar_more h.ui-state-hover {
background: none;
}
body div.et2_toolbar.et2_head_toolbar div.et2_toolbar_more h.ui-toolbar-menulistHeader {
color: transparent;
border: none;
height: 46px;
width: 35px;
padding: 0 !important;
margin-right: 15px;
margin-top: -7px;
}
body div.et2_toolbar.et2_head_toolbar div.et2_toolbar_more h.ui-toolbar-menulistHeader:after {
font-size: 18pt;
content: "\205D";
font-weight: bold;
color: white;
}
body div.et2_toolbar.et2_head_toolbar div.et2_toolbar_more span {
display: none;
}
}

View File

@ -1048,7 +1048,7 @@
@mobile-elem-height: 50px;
@mobile-button-width: 50px;
@mobile-nm-search-bg: #0c5da5;
@media only screen and (min-width: 320px) and (max-width: 1279px) {
@media only screen and (min-width: 320px) and (max-width: 1290px) {
body
{
#egw_fw_basecontainer.sidebar-toggle {
@ -1536,5 +1536,58 @@
width: auto;
}
}
//###########################################
//# #
//# et2_toolbar styles used in headbar #
//# #
//###########################################
div.et2_toolbar.et2_head_toolbar {
background-color: transparent;
padding: 1px 5px 5px 10px !important;
button {
width:46px;
height:46px;
background-size: 18px 18px;
}
div.ui-toolbar-menulist
{
min-width: 200px;
}
button.et2_toolbar_hasCaption {
width:auto;
}
div.et2_toolbar_actionlist {
margin-left: 50px;
}
div.et2_toolbar_more {
h.ui-state-hover {
background:none;
}
h.ui-toolbar-menulistHeader {
color:transparent;
border: none;
height: 46px;
width: 35px;
padding: 0 !important;
margin-right: 15px;
margin-top: -7px;
&:hover {
}
&:after {
font-size:18pt;
content:"\205D";
font-weight: bold;
color:white;
}
}
span {
display: none;
}
}
}
}
}

View File

@ -2178,7 +2178,6 @@ body {
* @package pixelegg
* @version $Id$
*/
@import-once "def_colors.less";
#socialMedia {
position: relative;
bottom: 20px;
@ -4256,7 +4255,7 @@ td.message span.message {
text-decoration: none;
height: 32px;
/*font-size: 1.1em;*/
font-size: 12.100000000000001px;
font-size: 12.1px;
line-height: 1.5em;
}
#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul li a:hover {
@ -4280,7 +4279,7 @@ td.message span.message {
}
#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_home:before {
padding-right: 20px;
font-size: 12.100000000000001px;
font-size: 12.1px;
content: " ";
background-image: url(../images/topmenu_items/home.png);
background-repeat: no-repeat;
@ -4676,7 +4675,7 @@ td.message span.message {
padding-left: 3em;
color: #999999;
/*font-size: 12px;*/
font-size: 12.100000000000001px;
font-size: 12.1px;
line-height: 17px;
}
#egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_header object {
@ -4848,7 +4847,7 @@ td.message span.message {
margin: 5px 0px 3px 5px;
padding: 0px 0px 0px 15px;
line-height: 1em;
font-size: 12.100000000000001px;
font-size: 12.1px;
background-image: url(../images/arrow_left.png);
background-repeat: no-repeat;
background-position: left center;