From e06a8bc1679d77ecb85de3a154fcefdce5d1bed2 Mon Sep 17 00:00:00 2001 From: Hadi Nategh Date: Tue, 16 Feb 2016 11:59:31 +0000 Subject: [PATCH] Mobile theme W.I.P.: - Add some styling for searchbox - Fix contextmenu is not coming on trees - Add back handler for context menu in order to close it --- etemplate/js/et2_widget_textbox.js | 1 + phpgwapi/js/egw_action/egw_action_popup.js | 11 ++++- pixelegg/css/mobile.css | 43 +++++++++++++++--- pixelegg/css/mobile.less | 51 ++++++++++++++++++---- 4 files changed, 90 insertions(+), 16 deletions(-) diff --git a/etemplate/js/et2_widget_textbox.js b/etemplate/js/et2_widget_textbox.js index 2422c794de..2fdf8718e3 100644 --- a/etemplate/js/et2_widget_textbox.js +++ b/etemplate/js/et2_widget_textbox.js @@ -512,6 +512,7 @@ var et2_searchbox = et2_textbox.extend( { jQuery(this.search.getDOMNode()).toggleClass('hide',!_stat); jQuery('span.clear',this.div).toggleClass('hide',!_stat); + jQuery(this.getDOMNode()).toggleClass('expanded', _stat); }, /** diff --git a/phpgwapi/js/egw_action/egw_action_popup.js b/phpgwapi/js/egw_action/egw_action_popup.js index c995c9fe35..b9845c73c6 100644 --- a/phpgwapi/js/egw_action/egw_action_popup.js +++ b/phpgwapi/js/egw_action/egw_action_popup.js @@ -257,7 +257,16 @@ function egwPopupActionImplementation() ai._registerContext = function(_node, _callback, _context) { var contextHandler = function(e) { - if(egwIsMobile() && e.originalEvent.which == 3) return; + if(egwIsMobile()) + { + if (e.originalEvent.which == 3) + { + // Enable onhold trigger till we define a better handler for tree contextmenu + // return; + } + jQuery('.nm-mob-header .nm_action_header').toggleClass('back', _egw_active_menu); + } + //Obtain the event object if (!e) { diff --git a/pixelegg/css/mobile.css b/pixelegg/css/mobile.css index d4f31aa145..834c6aaa3d 100644 --- a/pixelegg/css/mobile.css +++ b/pixelegg/css/mobile.css @@ -7562,18 +7562,12 @@ span.egw_tutorial_title { } body div.dhtmlxMenu_egw_SubLevelArea_Polygon { font-size: medium; - top: 0px !important; + top: 50px !important; right: 0px; left: auto !important; background-color: white; width: 100%; } - body div.dhtmlxMenu_egw_SubLevelArea_Polygon table.dhtmlxMebu_SubLevelArea_Tbl::before { - content: "\2190"; - height: 46px; - padding-left: 8px; - font-size: 24pt; - } body div.dhtmlxMenu_egw_SubLevelArea_Polygon table.dhtmlxMebu_SubLevelArea_Tbl { width: 100%; } @@ -7731,6 +7725,7 @@ span.egw_tutorial_title { padding-left: 60px; box-shadow: 0px 4px 5px 2px silver; position: relative; + height: 50px; z-index: 1; } body .et2_nextmatch .nm-mob-header button { @@ -7789,6 +7784,11 @@ span.egw_tutorial_title { content: "\205D"; font-weight: bold; } + body .et2_nextmatch .nm-mob-header button.nm_action_header.back:after { + font-size: 18pt; + content: "\2190"; + font-weight: bold; + } body .et2_nextmatch .nm-mob-header div.nm_favorites_div { background-position: center; background-repeat: no-repeat; @@ -8178,4 +8178,33 @@ span.egw_tutorial_title { padding-left: 5px; font-weight: bold; } + body .et2_searchbox button.et2_button.searched { + background-image: url(../images/topmenu_items/mobile/search.png); + } + body .et2_searchbox button.et2_button { + background-image: url(../images/topmenu_items/mobile/search_white.png); + } + body .et2_searchbox input { + font-size: 10pt; + } + body .et2_searchbox.expanded { + position: absolute; + width: 100% !important; + height: 50px; + margin-left: 0; + } + body .et2_searchbox.expanded button.et2_button { + display: none; + } + body .et2_searchbox.expanded input { + width: 100%; + height: 45px; + margin: 0; + top: 0; + outline: none; + } + body .et2_searchbox.expanded span.ui-icon.clear { + right: 80px; + top: 14px; + } } diff --git a/pixelegg/css/mobile.less b/pixelegg/css/mobile.less index db63d12578..4dfba76012 100644 --- a/pixelegg/css/mobile.less +++ b/pixelegg/css/mobile.less @@ -1089,17 +1089,11 @@ div.dhtmlxMenu_egw_SubLevelArea_Polygon { font-size:medium; - top:0px !important; + top:50px !important; right:0px; left:auto !important; background-color: white; width: 100%; - table.dhtmlxMebu_SubLevelArea_Tbl::before{ - content: "\2190"; - height: 46px; - padding-left: 8px; - font-size: 24pt; - } table.dhtmlxMebu_SubLevelArea_Tbl{ width:100%; tr.sub_item_selected {height:46px;} @@ -1257,6 +1251,7 @@ padding-left: 60px; box-shadow: 0px 4px 5px 2px silver; position: relative; + height: 50px; z-index: 1; button { height: @mobile-elem-height; @@ -1316,6 +1311,14 @@ font-weight: bold; } } + button.nm_action_header.back { + + &:after{ + font-size:18pt; + content: "\2190"; + font-weight: bold; + } + } div.nm_favorites_div { background-position: center; background-repeat: no-repeat; @@ -1762,5 +1765,37 @@ } display: block; } - } + + .et2_searchbox { + button.et2_button.searched { + background-image: url(../images/topmenu_items/mobile/search.png); + } + button.et2_button { + background-image: url(../images/topmenu_items/mobile/search_white.png); + } + input{ + .mob-fontsize-n; + } + } + .et2_searchbox.expanded { + position: absolute; + width:100% !important; + height:50px; + margin-left:0; + button.et2_button{ + display: none; + } + input { + width:100%; + height:45px; + margin:0; + top:0; + outline: none; + } + span.ui-icon.clear{ + right:80px; + top:14px; + } + } + } }