mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-11-07 16:44:20 +01:00
Mobile theme WIP:
- Implement nm header for mobile theme - Fix couple of styling issues - Add a search icon
This commit is contained in:
Hadi Nategh
parent
af70d057f0
commit
fe90e4256c
@ -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");
|
||||
@ -2312,6 +2312,54 @@ 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);
|
||||
},
|
||||
|
||||
/**
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
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: xx-large;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
BIN
pixelegg/images/topmenu_items/mobile/search_white.png
Normal file
BIN
pixelegg/images/topmenu_items/mobile/search_white.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Loading…
Reference in New Issue
Block a user