From 0380239cadb9b03535d5eb13559e9643defa57f6 Mon Sep 17 00:00:00 2001 From: Hadi Nategh Date: Tue, 2 Feb 2016 10:26:13 +0000 Subject: [PATCH] Mobile theme W.I.P.: - Fix view mode header - Style AB view dialog --- addressbook/inc/class.addressbook_ui.inc.php | 4 +- addressbook/templates/mobile/view.xet | 5 ++- addressbook/templates/pixelegg/app.css | 39 +++++++++++------ addressbook/templates/pixelegg/app.less | 27 +++++++++++- phpgwapi/js/jsapi/app_base.js | 46 +++++++++++++------- pixelegg/css/mobile.css | 26 +++++++++++ pixelegg/css/mobile.less | 33 ++++++++++++++ 7 files changed, 146 insertions(+), 34 deletions(-) diff --git a/addressbook/inc/class.addressbook_ui.inc.php b/addressbook/inc/class.addressbook_ui.inc.php index 149af79978..038ec9905c 100644 --- a/addressbook/inc/class.addressbook_ui.inc.php +++ b/addressbook/inc/class.addressbook_ui.inc.php @@ -739,7 +739,9 @@ class addressbook_ui extends addressbook_bo ); } if (isset($actions['export']['children']['csv']) && !importexport_helper_functions::has_definitions('addressbook','export')) unset($actions['export']['children']['csv']); - + + // Intercept open action in order to open entry into view mode instead of edit + if (html::$ua_mobile) $actions['open']['onExecute'] = 'javaScript:app.addressbook.viewEntry'; //echo "

".__METHOD__."($do_email, $tid_filter, $org_view)

\n"; _debug_array($actions); // Allow contacts to be dragged diff --git a/addressbook/templates/mobile/view.xet b/addressbook/templates/mobile/view.xet index 7952852fad..93667700d4 100644 --- a/addressbook/templates/mobile/view.xet +++ b/addressbook/templates/mobile/view.xet @@ -10,7 +10,6 @@ - @@ -18,7 +17,9 @@ - + + + diff --git a/addressbook/templates/pixelegg/app.css b/addressbook/templates/pixelegg/app.css index 71c0bff5e6..dc3cce7555 100755 --- a/addressbook/templates/pixelegg/app.css +++ b/addressbook/templates/pixelegg/app.css @@ -493,35 +493,46 @@ input.et2_radiobox { } /* tablets and smartphones */ @media only screen and (max-device-width: 1024px) { - #addressbook-edit div.et2_hbox.avatar, - .addressbook_view div.et2_hbox.avatar { + .et2_mobile_view div.et2_hbox.avatar { + width: 100px; + display: block; + height: 100px; + margin: auto; + } + .et2_mobile_view div.et2_hbox.avatar img { + width: 100px; + } + .et2_mobile_view .et2_email { + color: #26537c; + } + .et2_mobile_view #addressbook-view_n_fn { + border: none; + text-align: center; + font-size: 15pt; + } + .et2_mobile_view #addressbook-view_n_fn span { + font-size: 15pt; + } + #addressbook-edit div.et2_hbox.avatar { width: 70px; display: block; height: 70px; margin: auto; } - #addressbook-edit div.et2_hbox.avatar img, - .addressbook_view div.et2_hbox.avatar img { + #addressbook-edit div.et2_hbox.avatar img { width: 70px; } - #addressbook-edit #addressbook-edit_n_fn, - .addressbook_view #addressbook-edit_n_fn, - #addressbook-edit #_n_fn, - .addressbook_view #_n_fn { + #addressbook-edit #addressbook-edit_n_fn { border: none; text-align: center; font-size: 12pt; } #addressbook-edit #addressbook-edit_adr_one_locality, - .addressbook_view #addressbook-edit_adr_one_locality, #addressbook-edit #addressbook-edit_adr_two_locality, - .addressbook_view #addressbook-edit_adr_two_locality, - #addressbook-edit #addressbook-edit_room, - .addressbook_view #addressbook-edit_room { + #addressbook-edit #addressbook-edit_room { margin-left: 0; } - #addressbook-edit a.et2_url.email, - .addressbook_view a.et2_url.email { + #addressbook-edit a.et2_url.email { display: none; } #addressbook-index table.egwGridView_outer tbody span[id^='addressbook-index_'][id$='line1]'] { diff --git a/addressbook/templates/pixelegg/app.less b/addressbook/templates/pixelegg/app.less index 6f4f0947f4..8bc6752472 100755 --- a/addressbook/templates/pixelegg/app.less +++ b/addressbook/templates/pixelegg/app.less @@ -391,7 +391,30 @@ div.addressbook_edit_general_picture img { /* tablets and smartphones */ @media only screen and (max-device-width:1024px) { - #addressbook-edit, .addressbook_view { + .et2_mobile_view { + div.et2_hbox.avatar { + width: 100px; + display: block; + height: 100px; + margin: auto; + + img { + width: 100px; + } + } + .et2_email { + color:#26537c; + } + #addressbook-view_n_fn { + border: none; + text-align: center; + span { + .mob-fontsize-xl; + } + .mob-fontsize-xl; + } + } + #addressbook-edit { div.et2_hbox.avatar { width: 70px; display: block; @@ -402,7 +425,7 @@ div.addressbook_edit_general_picture img { width: 70px; } } - #addressbook-edit_n_fn, #_n_fn { + #addressbook-edit_n_fn { border: none; text-align: center; .mob-fontsize-l; diff --git a/phpgwapi/js/jsapi/app_base.js b/phpgwapi/js/jsapi/app_base.js index 4a8668c799..829811c9fb 100644 --- a/phpgwapi/js/jsapi/app_base.js +++ b/phpgwapi/js/jsapi/app_base.js @@ -405,24 +405,17 @@ var AppJS = Class.extend( content = egw.dataGetUIDdata(id); if (content.data) content = content.data; } + + /* destroy generated etemplate for view mode in DOM*/ + var destroy = function(){ + self.viewContainer.remove(); + delete self.viewTemplate; + delete self.viewContainer; + }; + // view container this.viewContainer = jQuery(document.createElement('div')) .addClass('et2_mobile_view') - .appendTo('body'); - - // close button - var close = jQuery(document.createElement('span')) - .addClass('egw_fw_mobile_popup_close loaded') - .click(function(){ - self.viewContainer.remove(); - delete self.viewTemplate; - delete self.viewContainer; - }) - .appendTo(this.viewContainer); - - // view template main container (content) - this.viewTemplate = jQuery(document.createElement('div')) - .attr('id', this.appname+'_view') .css({"z-index":102, width:"100%", height:"100%", @@ -433,6 +426,29 @@ var AppJS = Class.extend( left:0, overflow:'auto', "padding-top":'60px'}) + .attr('id','popupMainDiv') + .appendTo('body'); + + // close button + var close = jQuery(document.createElement('span')) + .addClass('egw_fw_mobile_popup_close loaded') + .click(function(){destroy();}) + .appendTo(this.viewContainer); + + // edit button + var edit = jQuery(document.createElement('span')) + .addClass('mobile-view-editBtn') + .click(function(){ + egw.open(id_app[1], self.appname); + destroy(); + }) + .text(egw.lang('Edit')) + .appendTo(this.viewContainer); + + // view template main container (content) + this.viewTemplate = jQuery(document.createElement('div')) + .attr('id', this.appname+'-view') + .addClass('et2_mobile-view-container') .appendTo(this.viewContainer); var etemplate = new etemplate2 (this.viewTemplate[0], false); diff --git a/pixelegg/css/mobile.css b/pixelegg/css/mobile.css index c6a3dc323f..53ee7df713 100644 --- a/pixelegg/css/mobile.css +++ b/pixelegg/css/mobile.css @@ -7486,6 +7486,7 @@ span.egw_tutorial_title { @media only screen and (min-width: 320px) and (max-width: 1290px) { body { /*Chosen*/ + /* View mode styles*/ } body #egw_fw_basecontainer.sidebar-toggle #egw_fw_top_toolbar div#egw_fw_menu { background-image: url(../images/topmenu_items/mobile/menu_white.png); @@ -8029,4 +8030,29 @@ span.egw_tutorial_title { body .et2_taglist .ms-sel-ctn { background: white; } + body .et2_mobile_view .et2_mobile-view-container { + padding: 0 14px 0 7px; + } + body .et2_mobile_view table.et2_grid tr td { + padding: 10px 5px 10px 0; + } + body .mobile-view-editBtn { + position: fixed; + top: 2px; + left: 70px; + width: 50px; + height: 50px; + float: left; + z-index: 104; + font-size: 18pt !important; + color: white; + display: block; + } + body .mobile-view-editBtn:before { + content: ""; + font-size: 24pt; + color: white; + padding-left: 5px; + font-weight: bold; + } } diff --git a/pixelegg/css/mobile.less b/pixelegg/css/mobile.less index 7575009486..80971aa60c 100644 --- a/pixelegg/css/mobile.less +++ b/pixelegg/css/mobile.less @@ -1679,5 +1679,38 @@ background: white; } } + + /* View mode styles*/ + .et2_mobile_view { + .et2_mobile-view-container { + padding:0 14px 0 7px; + } + table.et2_grid{ + tr { + td { + padding: 10px 5px 10px 0; + } + } + } + } + .mobile-view-editBtn { + position: fixed; + top:2px; + left: 70px; + width: 50px; + height: 50px; + float:left; + z-index:104; + font-size:18pt !important; + color: white; + &:before { + content: ""; + font-size: 24pt; + color: white; + padding-left: 5px; + font-weight: bold; + } + display: block; + } } } \ No newline at end of file