From 3ec1847b34932656538654b1a1c1e4a07fa5e65d Mon Sep 17 00:00:00 2001 From: Hadi Nategh Date: Mon, 14 Mar 2016 08:38:30 +0000 Subject: [PATCH] Mobile theme: - Add popupMainDiv a class to be able to use the same styling for semi-popups - Fix color for edit icon - Try to use .popupMainDiv class instead of ID --- etemplate/inc/class.etemplate.inc.php | 2 +- etemplate/inc/class.etemplate_new.inc.php | 2 +- phpgwapi/js/jsapi/app_base.js | 13 +++-- pixelegg/images/edit.svg | 2 +- pixelegg/mobile/fw_mobile.css | 71 +++++++++++++---------- pixelegg/mobile/fw_mobile.less | 28 +++++---- 6 files changed, 67 insertions(+), 51 deletions(-) diff --git a/etemplate/inc/class.etemplate.inc.php b/etemplate/inc/class.etemplate.inc.php index d22482851c..a2225db873 100644 --- a/etemplate/inc/class.etemplate.inc.php +++ b/etemplate/inc/class.etemplate.inc.php @@ -325,7 +325,7 @@ class etemplate extends boetemplate else { echo $GLOBALS['egw']->framework->header(); - echo '
'."\n"; + echo '
'."\n"; if ($GLOBALS['egw_info']['user']['apps']['manual']) // adding a manual icon to every popup { $manual = new etemplate('etemplate.popup.manual'); diff --git a/etemplate/inc/class.etemplate_new.inc.php b/etemplate/inc/class.etemplate_new.inc.php index d9ecb3cb2d..be86337cfe 100644 --- a/etemplate/inc/class.etemplate_new.inc.php +++ b/etemplate/inc/class.etemplate_new.inc.php @@ -263,7 +263,7 @@ class etemplate_new extends etemplate_widget_template } else // mark popups as such, by enclosing everything in div#popupMainDiv { - echo '
'."\n"; + echo '
'."\n"; } // Send any accumulated json responses - after flush to avoid sending the buffer as a response if(egw_json_response::isJSONResponse()) diff --git a/phpgwapi/js/jsapi/app_base.js b/phpgwapi/js/jsapi/app_base.js index 9069d9ae44..505054296d 100644 --- a/phpgwapi/js/jsapi/app_base.js +++ b/phpgwapi/js/jsapi/app_base.js @@ -401,9 +401,9 @@ var AppJS = (function(){ "use strict"; return Class.extend( var rowID = ''; // content to feed to etemplate2 var content = {}; - + var self = this; - + if (id){ var parts = id.split('::'); rowID = parts[1]; @@ -445,6 +445,7 @@ var AppJS = (function(){ "use strict"; return Class.extend( overflow:'auto', "padding":'60px 0 10px 0'}) .attr('id','popupMainDiv') + .addClass('popupMainDiv') .appendTo('body'); // close button @@ -468,19 +469,19 @@ var AppJS = (function(){ "use strict"; return Class.extend( .attr('id', this.appname+'-view') .addClass('et2_mobile-view-container') .appendTo(this.viewContainer); - + var templateName = _action.data.mobileViewTemplate || 'edit'; var templateURL = egw.webserverUrl+ '/' + this.appname + '/templates/mobile/'+templateName+'.xet'+'?1'; var data = {content:content, readonlys:{'__ALL__':true,'link_to':false}, currentapp:this.appname}; - + // etemplate2 object for view this.et2_view = new etemplate2 (this.viewTemplate[0], false); - + if(templateName) { this.et2_view.load(this.appname+'.'+templateName,templateURL, data, typeof et2_callback == 'function'?et2_callback:function(){}, app); } - + // define a global close function for view template // in order to be able to destroy view on action app[this.appname]['close'] = destroy; diff --git a/pixelegg/images/edit.svg b/pixelegg/images/edit.svg index 56a890c87f..338c09c368 100644 --- a/pixelegg/images/edit.svg +++ b/pixelegg/images/edit.svg @@ -5,7 +5,7 @@ width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve"> - diff --git a/pixelegg/mobile/fw_mobile.css b/pixelegg/mobile/fw_mobile.css index b3bd49ff6d..f5d8af5e4e 100644 --- a/pixelegg/mobile/fw_mobile.css +++ b/pixelegg/mobile/fw_mobile.css @@ -6976,6 +6976,8 @@ form[id^="tracker-"] .dialogHeadbar { /*Tablets landscape mode*/ /*Tablets Portrait*/ /*Smartphones*/ +/*Smartphones portrait*/ +/*Smartphones landscape*/ .white-svg { -webkit-filter: brightness(0) invert(1) !important; filter: brightness(0) invert(1) !important; @@ -7302,6 +7304,10 @@ form[id^="tracker-"] .dialogHeadbar { body button.plus_button:active { background-color: #0c5da5; } + body .et2_nextmatch .nextmatch_sortheader { + padding-right: 0px; + margin-right: 0px; + } body .et2_nextmatch .nextmatch_header_row, body .et2_nextmatch .nextmatch_header { background-color: background-color-egw-dark; @@ -7693,27 +7699,28 @@ form[id^="tracker-"] .dialogHeadbar { body .et2_button_icon { height: 32px; } - body #popupMainDiv { + body .popupMainDiv { + padding-top: 60px !important; /* Exceptional cases to not get the general left padding*/ } - body #popupMainDiv * { + body .popupMainDiv * { font-size: 10pt; font-family: Verdana, "Lucida Grande", Helvetica, Sans-Serif; } - body #popupMainDiv .et2_textbox, - body #popupMainDiv .et2_date, - body #popupMainDiv .et2_dropdown, - body #popupMainDiv .et2_link, - body #popupMainDiv .et2_label, - body #popupMainDiv input, - body #popupMainDiv select, - body #popupMainDiv .et2_selectbox { + body .popupMainDiv .et2_textbox, + body .popupMainDiv .et2_date, + body .popupMainDiv .et2_dropdown, + body .popupMainDiv .et2_link, + body .popupMainDiv .et2_label, + body .popupMainDiv input, + body .popupMainDiv select, + body .popupMainDiv .et2_selectbox { height: 46px; padding-left: 8px; } - body #popupMainDiv input, - body #popupMainDiv select, - body #popupMainDiv .et2_selectbox { + body .popupMainDiv input, + body .popupMainDiv select, + body .popupMainDiv .et2_selectbox { padding: 0; padding-left: 0; border-left: 0; @@ -7721,70 +7728,73 @@ form[id^="tracker-"] .dialogHeadbar { border-right: 0; border-radius: 0; } - body #popupMainDiv .et2_label .et2_selectbox { + body .popupMainDiv .et2_label .et2_selectbox { padding-left: 8px; } - body #popupMainDiv ul.et2_selectbox li { + body .popupMainDiv ul.et2_selectbox li { padding-top: 13px; } - body #popupMainDiv .et2_taglist input[type="text"] { + body .popupMainDiv .et2_taglist input[type="text"] { height: 36px; } - body #popupMainDiv .et2_taglist .ms-sel-item { + body .popupMainDiv .et2_taglist .ms-sel-item { margin-left: 3px; line-height: 36px; margin-top: 0; margin-bottom: 0; } - body #popupMainDiv .et2_label .et2_date_ro.et2_label { + body .popupMainDiv .et2_label .et2_date_ro.et2_label { padding-left: 0; } - body #popupMainDiv .et2_button_with_image { + body .popupMainDiv .et2_button_with_image { background-color: transparent; border: none; box-shadow: none; color: #1e1e1e; } - body #popupMainDiv .et2_date { + body .popupMainDiv .et2_date { min-width: 100px; padding-left: 0; } - body #popupMainDiv .et2_button_with_image, - body #popupMainDiv .et2_button_text { + body .popupMainDiv .et2_button_with_image, + body .popupMainDiv .et2_button_text { height: 46px; margin: 1px; margin-left: 3px; } - body #popupMainDiv form { + body .popupMainDiv form { margin-top: 50px; } - body #popupMainDiv .et2_details.et2_details_expanded { + body .popupMainDiv .et2_details.et2_details_expanded { background-color: transparent; height: 100%; } - body #popupMainDiv .et2_details.et2_details_expanded .et2_details_title { + body .popupMainDiv .et2_details.et2_details_expanded .et2_details_title { display: inline-block; background-color: #F0F0F0; width: 100%; padding-top: 6px; height: 32px; } - body #popupMainDiv .et2_details { + body .popupMainDiv .et2_details { position: relative; background-color: #F0F0F0; height: 32px; } - body #popupMainDiv .et2_details .et2_details_toggle { + body .popupMainDiv .et2_details .et2_details_toggle { position: absolute; right: 2px; top: 0px; margin: 0px; } - body #popupMainDiv .et2_details .et2_details_title { + body .popupMainDiv .et2_details .et2_details_title { padding-top: 6px; margin-top: 0; } - body #popupMainDiv .dialogHeadbar button[class*="et2_button_with_image"]:not([class*="et2_toolbar_hasCaption"]) { + body .popupMainDiv .et2_taglist > div { + min-height: auto; + } + body .dialogHeadbar button[class*="et2_button_with_image"]:not([class*="et2_toolbar_hasCaption"]) { -webkit-filter: brightness(0) invert(1) !important; filter: brightness(0) invert(1) !important; background-color: transparent !important; @@ -7792,9 +7802,6 @@ form[id^="tracker-"] .dialogHeadbar { border: none; padding-right: 15px; } - body #popupMainDiv .et2_taglist > div { - min-height: auto; - } body .rowHeader { font-size: 12pt; } diff --git a/pixelegg/mobile/fw_mobile.less b/pixelegg/mobile/fw_mobile.less index dcaabd6a00..145e99970d 100644 --- a/pixelegg/mobile/fw_mobile.less +++ b/pixelegg/mobile/fw_mobile.less @@ -30,12 +30,15 @@ /*All devices landscape mode*/ @handheld-landscape: ~"only screen and (max-device-width : @{tablet-max}) and (orientation : landscape)"; /*Tablets landscape mode*/ -@tablet-portrait: ~"only screen and (max-device-width : @{tablet-max}) and (min-width: @{smartphone-max}) and (orientation : landscape)"; +@tablet-landscape: ~"only screen and (max-device-width : @{tablet-max}) and (min-width: @{smartphone-max}) and (orientation : landscape)"; /*Tablets Portrait*/ @tablet-portrait: ~"only screen and (max-device-width : @{tablet-max}) and (min-width: @{smartphone-max}) and (orientation : portrait)"; /*Smartphones*/ @smartphones: ~"only screen and (max-device-width: @{smartphone-max}) and (min-width: @{smartphone-min})"; - +/*Smartphones portrait*/ +@smartphones-portrait: ~"only screen and (max-device-width: @{smartphone-max}) and (min-width: @{smartphone-min}) and (oriantation:portrait)"; +/*Smartphones landscape*/ +@smartphones-landscape: ~"only screen and (max-device-width: @{smartphone-max}) and (min-width: @{smartphone-min}) and (oriantation:landscape)"; .white-svg { -webkit-filter: brightness(0) invert(1) !important; filter: brightness(0) invert(1) !important; @@ -46,7 +49,6 @@ @media @handheld { - #egw_fw_print { display:none; } @@ -398,6 +400,10 @@ } } .et2_nextmatch { + .nextmatch_sortheader { + padding-right: 0px; + margin-right: 0px; + } .nextmatch_header_row, .nextmatch_header { div.header_row_right { @@ -796,7 +802,8 @@ } .et2_taglist_category span[class*="cat_"] {height: 42px;} .et2_button_icon {height:32px;} - #popupMainDiv { + .popupMainDiv { + padding-top: 60px !important; * { .mob-fontsize-n; font-family: Verdana, "Lucida Grande", Helvetica, Sans-Serif; @@ -871,14 +878,15 @@ margin-top:0; } } - .dialogHeadbar { - button[class*="et2_button_with_image"]:not([class*="et2_toolbar_hasCaption"]) { - .white-svg; - padding-right: 15px; - } - } + .et2_taglist>div{min-height: auto;} } + .dialogHeadbar { + button[class*="et2_button_with_image"]:not([class*="et2_toolbar_hasCaption"]) { + .white-svg; + padding-right: 15px; + } + } .rowHeader { .mob-fontsize-l; }