diff --git a/etemplate/js/et2_extension_nextmatch.js b/etemplate/js/et2_extension_nextmatch.js index 6db9e52c0c..dd9df3ae2f 100644 --- a/etemplate/js/et2_extension_nextmatch.js +++ b/etemplate/js/et2_extension_nextmatch.js @@ -2252,9 +2252,9 @@ var et2_nextmatch_header_bar = et2_DOMWidget.extend(et2_INextmatchHeader, var self = this; var nm_div = this.nextmatch.div; var settings = this.nextmatch.options.settings; - + this.div.prependTo(nm_div); - + // Left & Right (& row) headers this.header_div = jQuery(document.createElement("div")).addClass("ui-helper-clearfix ui-helper-reset").prependTo(this.div); this.headers = [ @@ -2262,7 +2262,7 @@ var et2_nextmatch_header_bar = et2_DOMWidget.extend(et2_INextmatchHeader, {id:this.nextmatch.options.header_right}, {id:this.nextmatch.options.header_row} ]; - + // The rest of the header this.row_div = jQuery(document.createElement("div")) .addClass("nextmatch_header_row") @@ -2270,7 +2270,7 @@ var et2_nextmatch_header_bar = et2_DOMWidget.extend(et2_INextmatchHeader, // Search this.search_box = jQuery(document.createElement("div")) - .appendTo(this.row_div) + .prependTo(egwIsMobile()?this.nextmatch.div:this.row_div) .addClass("search"); this.search = et2_createWidget("textbox", {"id":"search","blur":egw.lang("search")}, this); this.search.input.attr("type", "search"); @@ -2311,7 +2311,55 @@ var et2_nextmatch_header_bar = et2_DOMWidget.extend(et2_INextmatchHeader, } ); } - + + // Set activeFilters to current value + this.nextmatch.activeFilters.search = settings.search; + + /** + * Mobile theme specific part for nm header + * nm header has very different behaivior for mobile theme and basically + * it has its own markup separately from nm header in normal templates. + */ + if (egwIsMobile()) + { + jQuery(this.div).css({display:'inline-block'}).addClass('nm_header_hide'); + // toggle header + // add new button + this.fav_span = jQuery(document.createElement('div')) + .addClass('nm_favorites_div') + .prependTo(this.search_box); + // toggle header menu + this.toggle_header = jQuery(document.createElement('button')) + .addClass('nm_toggle_header') + .click(function(){ + jQuery(self.div).slideToggle('fast'); + jQuery(self.div).removeClass('nm_header_hide'); + jQuery(this).toggleClass('nm_toggle_header_on'); + window.setTimeout(function(){self.nextmatch.resize()},800); + }) + .prependTo(this.search_box); + // Context menu + this.action_header = jQuery(document.createElement('button')) + .addClass('nm_action_header') + .click (function(e){ + jQuery('tr.selected').trigger({type:'taphold',which:3,originalEvent:e}); + }) + .prependTo(this.search_box); + + + this.search_button = et2_createWidget("button", {id: "search_button","background":"pixelegg/images/topmenu_items/mobile/search_white.png"}, this); + this.search.input.on ('focus blur', function (e){ + self.search_box.toggleClass('searchOn'); + }); + } + else + { + this.search_button = et2_createWidget("button", {id: "search_button","label":">"}, this); + this.search_button.onclick = function(event) { + self.nextmatch.applyFilters({search: self.search.getValue()}); + }; + } + // Add category if(!settings.no_cat) { settings.cat_id_label = egw.lang("Category"); @@ -2365,14 +2413,6 @@ var et2_nextmatch_header_bar = et2_DOMWidget.extend(et2_INextmatchHeader, }); } - // Set activeFilters to current value - this.nextmatch.activeFilters.search = settings.search; - - this.search_button = et2_createWidget("button", {id: "search_button","label":">"}, this); - this.search_button.onclick = function(event) { - self.nextmatch.applyFilters({search: self.search.getValue()}); - }; - // Another place to customize nextmatch this.header_row = jQuery(document.createElement("div")) .addClass('header_row').appendTo(this.right_div); @@ -2584,7 +2624,7 @@ var et2_nextmatch_header_bar = et2_DOMWidget.extend(et2_INextmatchHeader, this.favorites = et2_createWidget('favorites', widget_options, this); // Add into header - $j(this.favorites.getDOMNode(this.favorites)).prependTo(this.right_div); + $j(this.favorites.getDOMNode(this.favorites)).prependTo(egwIsMobile()?this.search_box.find('.nm_favorites_div'):this.right_div); }, /** diff --git a/pixelegg/css/mobile.css b/pixelegg/css/mobile.css index 7c7eac92e7..c4fd3ab297 100644 --- a/pixelegg/css/mobile.css +++ b/pixelegg/css/mobile.css @@ -7548,14 +7548,16 @@ span.egw_tutorial_title { body button.plus_button:active { background-color: #0c5da5; } - body .et2_nextmatch .nextmatch_header_row { + body .et2_nextmatch .nextmatch_header_row, + body .et2_nextmatch .nextmatch_header { background-color: background-color-egw-dark; } - body .et2_nextmatch .nextmatch_header_row select { + body .et2_nextmatch .nextmatch_header_row select, + body .et2_nextmatch .nextmatch_header select { display: block; width: 100%; height: 50px; - font-size: large; + font-size: 12pt; background-size: 32px; border-left: none; border-right: none; @@ -7564,19 +7566,20 @@ span.egw_tutorial_title { padding-left: 10px; max-width: none; } - body .et2_nextmatch .nextmatch_header_row label { + body .et2_nextmatch .nextmatch_header_row label, + body .et2_nextmatch .nextmatch_header label { display: block; width: 100%; float: left; - font-size: large; + font-size: 12pt; } - body .et2_nextmatch .nextmatch_header_row label select { + body .et2_nextmatch .nextmatch_header_row label select, + body .et2_nextmatch .nextmatch_header label select { display: inline-block; - width: 80%; float: right; margin: 0; height: 50px; - font-size: large; + font-size: 12pt; } body .et2_nextmatch .nextmatch_header.nm_header_hide { display: none !important; @@ -7584,9 +7587,13 @@ span.egw_tutorial_title { body .et2_nextmatch .nextmatch_header { background-color: white; padding: 0; - display: none; - border: 1px solid silver; + display: inline-block; + width: 100%; + border-bottom: 1px solid silver; border-top: none; + box-shadow: 0px 1px 1px 1px silver; + z-index: 1; + position: relative; } body .et2_nextmatch .nextmatch_header div.et2_box_widget { display: block; @@ -7601,13 +7608,21 @@ span.egw_tutorial_title { } body .et2_nextmatch .search.searchOn input { border: none; - backgroun: #0c5da5; + background: white; outline: none; position: absolute; left: 110px; width: 80%; height: 50px; } + body .et2_nextmatch .search.searchOn button[id$="search_button"] { + background-image: none !important; + } + body .et2_nextmatch .search.searchOn button[id$="search_button"]:after { + content: "\2613"; + font-weight: bold; + font-size: 18pt; + } body .et2_nextmatch .search { background: #0c5da5; margin-top: 0; @@ -7625,6 +7640,9 @@ span.egw_tutorial_title { border: none; margin: 0; color: white; + background-size: 18px 18px; + box-shadow: none; + outline: none; } body .et2_nextmatch .search button.nm_toggle_header { background-position: center; @@ -7642,8 +7660,8 @@ span.egw_tutorial_title { outline: none; } body .et2_nextmatch .search button.nm_toggle_header:after { - font-size: xx-large; - content: "\21E9"; + font-size: 18pt; + content: "\2261"; } body .et2_nextmatch .search button.nm_action_header { background-position: center; @@ -7661,10 +7679,11 @@ span.egw_tutorial_title { outline: none; } body .et2_nextmatch .search button.nm_action_header:after { - font-size: xx-large; + font-size: 18pt; content: "\205D"; + font-weight: bold; } - body .et2_nextmatch .search button.nm_favorites_button { + body .et2_nextmatch .search div.nm_favorites_div { background-position: center; background-repeat: no-repeat; margin-right: 5px; @@ -7676,18 +7695,51 @@ span.egw_tutorial_title { display: block; float: right; } - body .et2_nextmatch .search button.nm_favorites_button:focus { + body .et2_nextmatch .search div.nm_favorites_div:focus { outline: none; } - body .et2_nextmatch .search button.nm_favorites_button:after { - font-size: xx-large; + body .et2_nextmatch .search div.nm_favorites_div div[name="favorite"] { + position: relative !important; + top: 0 !important; + outline: none; + } + body .et2_nextmatch .search div.nm_favorites_div div[name="favorite"] .et2_dropdown button:first-child { + display: none; + } + body .et2_nextmatch .search div.nm_favorites_div div[name="favorite"] .et2_dropdown button:nth-child(2) div:first-child { + display: none; + } + body .et2_nextmatch .search div.nm_favorites_div div[name="favorite"] .et2_dropdown button:nth-child(2):after { + font-size: 17pt; content: "\2606"; font-weight: bold; + vertical-align: super; + } + body .et2_nextmatch .search div.nm_favorites_div div[name="favorite"] ul.favorites { + width: 160px; + box-shadow: 0px 4px 5px 2px silver; + border: 1px solid silver; + } + body .et2_nextmatch .search div.nm_favorites_div div[name="favorite"] ul.favorites li.ui-menu-item { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + border-bottom: 1px solid silver; + } + body .et2_nextmatch .search div.nm_favorites_div div[name="favorite"] ul.favorites li.ui-menu-item a { + width: 100%; + line-height: 30px; + } + body .et2_nextmatch .search div.nm_favorites_div div[name="favorite"] ul.favorites li.ui-menu-item a input { + display: none; + } + body .et2_nextmatch .search div.nm_favorites_div div[name="favorite"] ul.favorites li.ui-menu-item a div.ui-icon-trash { + display: block; } body .et2_nextmatch .search button.nm_toggle_header_on:after { - content: "\21E7"; + content: "\2613"; } - body .et2_nextmatch .search input { + body .et2_nextmatch .search input[type="search"] { width: 50px; height: 50px; font-size: large; @@ -7695,22 +7747,23 @@ span.egw_tutorial_title { border: 0; opacity: 0; background-color: #0c5da5; - color: white; + color: black; position: absolute; } - body .et2_nextmatch .search input:active { + body .et2_nextmatch .search input[type="search"]:active { border: none; background: #0c5da5; } - body .et2_nextmatch .search input:focus { + body .et2_nextmatch .search input[type="search"]:focus { border: none; - backgroun: #0c5da5; + background: white; outline: none; opacity: 1; left: 110px; position: absolute; width: 100%; height: 50px; + z-index: 2; } body .et2_nextmatch .header_row_right { height: 50px; diff --git a/pixelegg/css/mobile.less b/pixelegg/css/mobile.less index 7f98fbd131..69aeebbd26 100644 --- a/pixelegg/css/mobile.less +++ b/pixelegg/css/mobile.less @@ -1098,7 +1098,7 @@ } } .et2_nextmatch { - .nextmatch_header_row + .nextmatch_header_row, .nextmatch_header { background-color: background-color-egw-dark; @@ -1106,7 +1106,7 @@ display: block; width: 100%; height: @mobile-elem-height; - font-size: large; + .mob-fontsize-l; background-size: 32px; border-left: none; border-right: none; @@ -1119,14 +1119,13 @@ display:block; width: 100%; float: left; - font-size: large; + .mob-fontsize-l; select { display: inline-block; - width: 80%; float: right; margin: 0; height: @mobile-elem-height; - font-size: large; + .mob-fontsize-l; } } } @@ -1136,9 +1135,13 @@ .nextmatch_header { background-color: white; padding:0; - display:none; - border: 1px solid silver; - border-top:none; + display:inline-block; + width:100%; + border-bottom: 1px solid silver; + border-top: none; + box-shadow: 0px 1px 1px 1px silver; + z-index: 1; + position: relative; div.et2_box_widget { display:block; height:@mobile-elem-height; @@ -1162,13 +1165,21 @@ .search.searchOn { input { border:none; - backgroun:@mobile-nm-search-bg; + background: white; outline: none; position: absolute; left: 110px; width:80%; height:@mobile-elem-height; } + button[id$="search_button"] { + background-image: none !important; + &:after{ + content:"\2613"; + font-weight: bold; + font-size:18pt; + } + } } .search { background: @mobile-nm-search-bg; @@ -1186,6 +1197,9 @@ border: none; margin:0; color: white; + background-size: 18px 18px; + box-shadow: none; + outline: none; } button.nm_toggle_header { @@ -1203,8 +1217,9 @@ outline:none; } &:after{ - font-size:xx-large; - content:"\21E9"; + font-size: 18pt; + content:"\2261"; + } } @@ -1223,11 +1238,12 @@ outline:none; } &:after{ - font-size:xx-large; + font-size:18pt; content:"\205D"; + font-weight: bold; } } - button.nm_favorites_button { + div.nm_favorites_div { background-position: center; background-repeat: no-repeat; margin-right:5px; @@ -1241,18 +1257,56 @@ &:focus{ outline:none; } - &:after{ - font-size: xx-large; - content: "\2606"; - font-weight: bold; + div[name="favorite"] { + position:relative !important; + top:0 !important; + outline:none; + .et2_dropdown { + button:first-child { + display: none; + } + button:nth-child(2) { + div:first-child { + display: none; + } + &:after{ + font-size: 17pt; + content: "\2606"; + font-weight: bold; + vertical-align: super; + } + } + } + ul.favorites { + width:160px; + box-shadow: 0px 4px 5px 2px silver; + border: 1px solid silver; + li.ui-menu-item { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + border-bottom: 1px solid silver; + + a { + width: 100%; + line-height: 30px; + input{ + display: none; + } + div.ui-icon-trash { + display: block; + } + } + } + } } } button.nm_toggle_header_on { &:after { - content:"\21E7"; + content:"\2613"; } } - input { + input[type="search"] { width: 50px; height: @mobile-elem-height; font-size: large; @@ -1260,7 +1314,7 @@ border:0; opacity: 0; background-color:@mobile-nm-search-bg; - color: white; + color: black; position: absolute; &:active{ border:none; @@ -1268,13 +1322,14 @@ } &:focus { border:none; - backgroun:@mobile-nm-search-bg; + background:white; outline: none; opacity: 1; left:110px; position: absolute; width:100%; height:@mobile-elem-height; + z-index: 2; } } } diff --git a/pixelegg/images/topmenu_items/mobile/search_white.png b/pixelegg/images/topmenu_items/mobile/search_white.png new file mode 100644 index 0000000000..495be42efa Binary files /dev/null and b/pixelegg/images/topmenu_items/mobile/search_white.png differ