extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-12-31 19:19:43 +01:00
Code Issues Packages Projects Releases Wiki Activity

Mobile theme WIP:

Browse Source 
- Implement nm header for mobile theme
- Fix couple of styling issues
- Add a search icon
This commit is contained in:
Hadi Nategh 2016-01-15 16:54:42 +00:00
parent af70d057f0
commit fe90e4256c
4 changed files with 207 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
etemplate/js/et2_extension_nextmatch.js
View File

@ -2270,7 +2270,7 @@ var et2_nextmatch_header_bar = et2_DOMWidget.extend(et2_INextmatchHeader,
// Search // Search
this.search_box = jQuery(document.createElement("div")) this.search_box = jQuery(document.createElement("div"))
.appendTo(this.row_div) .prependTo(egwIsMobile()?this.nextmatch.div:this.row_div)
.addClass("search"); .addClass("search");
this.search = et2_createWidget("textbox", {"id":"search","blur":egw.lang("search")}, this); this.search = et2_createWidget("textbox", {"id":"search","blur":egw.lang("search")}, this);
this.search.input.attr("type", "search"); 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 // Add category
if(!settings.no_cat) { if(!settings.no_cat) {
settings.cat_id_label = egw.lang("Category"); 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 // Another place to customize nextmatch
this.header_row = jQuery(document.createElement("div")) this.header_row = jQuery(document.createElement("div"))
.addClass('header_row').appendTo(this.right_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); this.favorites = et2_createWidget('favorites', widget_options, this);
// Add into header // 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);
}, },
/** /**

101
pixelegg/css/mobile.css
View File

@ -7548,14 +7548,16 @@ span.egw_tutorial_title {
body button.plus_button:active { body button.plus_button:active {
background-color: #0c5da5; 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; 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; display: block;
width: 100%; width: 100%;
height: 50px; height: 50px;
font-size: large; font-size: 12pt;
background-size: 32px; background-size: 32px;
border-left: none; border-left: none;
border-right: none; border-right: none;
@ -7564,19 +7566,20 @@ span.egw_tutorial_title {
padding-left: 10px; padding-left: 10px;
max-width: none; 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; display: block;
width: 100%; width: 100%;
float: left; 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; display: inline-block;
width: 80%;
float: right; float: right;
margin: 0; margin: 0;
height: 50px; height: 50px;
font-size: large; font-size: 12pt;
} }
body .et2_nextmatch .nextmatch_header.nm_header_hide { body .et2_nextmatch .nextmatch_header.nm_header_hide {
display: none !important; display: none !important;
@ -7584,9 +7587,13 @@ span.egw_tutorial_title {
body .et2_nextmatch .nextmatch_header { body .et2_nextmatch .nextmatch_header {
background-color: white; background-color: white;
padding: 0; padding: 0;
display: none; display: inline-block;
border: 1px solid silver; width: 100%;
border-bottom: 1px solid silver;
border-top: none; border-top: none;
box-shadow: 0px 1px 1px 1px silver;
z-index: 1;
position: relative;
} }
body .et2_nextmatch .nextmatch_header div.et2_box_widget { body .et2_nextmatch .nextmatch_header div.et2_box_widget {
display: block; display: block;
@ -7601,13 +7608,21 @@ span.egw_tutorial_title {
} }
body .et2_nextmatch .search.searchOn input { body .et2_nextmatch .search.searchOn input {
border: none; border: none;
backgroun: #0c5da5; background: white;
outline: none; outline: none;
position: absolute; position: absolute;
left: 110px; left: 110px;
width: 80%; width: 80%;
height: 50px; 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 { body .et2_nextmatch .search {
background: #0c5da5; background: #0c5da5;
margin-top: 0; margin-top: 0;
@ -7625,6 +7640,9 @@ span.egw_tutorial_title {
border: none; border: none;
margin: 0; margin: 0;
color: white; color: white;
background-size: 18px 18px;
box-shadow: none;
outline: none;
} }
body .et2_nextmatch .search button.nm_toggle_header { body .et2_nextmatch .search button.nm_toggle_header {
background-position: center; background-position: center;
@ -7642,8 +7660,8 @@ span.egw_tutorial_title {
outline: none; outline: none;
} }
body .et2_nextmatch .search button.nm_toggle_header:after { body .et2_nextmatch .search button.nm_toggle_header:after {
font-size: xx-large; font-size: 18pt;
content: "\21E9"; content: "\2261";
} }
body .et2_nextmatch .search button.nm_action_header { body .et2_nextmatch .search button.nm_action_header {
background-position: center; background-position: center;
@ -7661,10 +7679,11 @@ span.egw_tutorial_title {
outline: none; outline: none;
} }
body .et2_nextmatch .search button.nm_action_header:after { body .et2_nextmatch .search button.nm_action_header:after {
font-size: xx-large; font-size: 18pt;
content: "\205D"; 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-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
margin-right: 5px; margin-right: 5px;
@ -7676,18 +7695,51 @@ span.egw_tutorial_title {
display: block; display: block;
float: right; float: right;
} }
body .et2_nextmatch .search button.nm_favorites_button:focus { body .et2_nextmatch .search div.nm_favorites_div:focus {
outline: none; outline: none;
} }
body .et2_nextmatch .search button.nm_favorites_button:after { body .et2_nextmatch .search div.nm_favorites_div div[name="favorite"] {
font-size: xx-large; 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"; content: "\2606";
font-weight: bold; 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 { 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; width: 50px;
height: 50px; height: 50px;
font-size: large; font-size: large;
@ -7695,22 +7747,23 @@ span.egw_tutorial_title {
border: 0; border: 0;
opacity: 0; opacity: 0;
background-color: #0c5da5; background-color: #0c5da5;
color: white; color: black;
position: absolute; position: absolute;
} }
body .et2_nextmatch .search input:active { body .et2_nextmatch .search input[type="search"]:active {
border: none; border: none;
background: #0c5da5; background: #0c5da5;
} }
body .et2_nextmatch .search input:focus { body .et2_nextmatch .search input[type="search"]:focus {
border: none; border: none;
backgroun: #0c5da5; background: white;
outline: none; outline: none;
opacity: 1; opacity: 1;
left: 110px; left: 110px;
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 50px; height: 50px;
z-index: 2;
} }
body .et2_nextmatch .header_row_right { body .et2_nextmatch .header_row_right {
height: 50px; height: 50px;

89
pixelegg/css/mobile.less
View File

@ -1098,7 +1098,7 @@
} }
} }
.et2_nextmatch { .et2_nextmatch {
.nextmatch_header_row .nextmatch_header_row, .nextmatch_header
{ {
background-color: background-color-egw-dark; background-color: background-color-egw-dark;
@ -1106,7 +1106,7 @@
display: block; display: block;
width: 100%; width: 100%;
height: @mobile-elem-height; height: @mobile-elem-height;
font-size: large; .mob-fontsize-l;
background-size: 32px; background-size: 32px;
border-left: none; border-left: none;
border-right: none; border-right: none;
@ -1119,14 +1119,13 @@
display:block; display:block;
width: 100%; width: 100%;
float: left; float: left;
font-size: large; .mob-fontsize-l;
select { select {
display: inline-block; display: inline-block;
width: 80%;
float: right; float: right;
margin: 0; margin: 0;
height: @mobile-elem-height; height: @mobile-elem-height;
font-size: large; .mob-fontsize-l;
} }
} }
} }
@ -1136,9 +1135,13 @@
.nextmatch_header { .nextmatch_header {
background-color: white; background-color: white;
padding:0; padding:0;
display:none; display:inline-block;
border: 1px solid silver; width:100%;
border-bottom: 1px solid silver;
border-top: none; border-top: none;
box-shadow: 0px 1px 1px 1px silver;
z-index: 1;
position: relative;
div.et2_box_widget { div.et2_box_widget {
display:block; display:block;
height:@mobile-elem-height; height:@mobile-elem-height;
@ -1162,13 +1165,21 @@
.search.searchOn { .search.searchOn {
input { input {
border:none; border:none;
backgroun:@mobile-nm-search-bg; background: white;
outline: none; outline: none;
position: absolute; position: absolute;
left: 110px; left: 110px;
width:80%; width:80%;
height:@mobile-elem-height; height:@mobile-elem-height;
} }
button[id$="search_button"] {
background-image: none !important;
&:after{
content:"\2613";
font-weight: bold;
font-size:18pt;
}
}
} }
.search { .search {
background: @mobile-nm-search-bg; background: @mobile-nm-search-bg;
@ -1186,6 +1197,9 @@
border: none; border: none;
margin:0; margin:0;
color: white; color: white;
background-size: 18px 18px;
box-shadow: none;
outline: none;
} }
button.nm_toggle_header { button.nm_toggle_header {
@ -1203,8 +1217,9 @@
outline:none; outline:none;
} }
&:after{ &:after{
font-size:xx-large; font-size: 18pt;
content:"\21E9"; content:"\2261";
} }
} }
@ -1223,11 +1238,12 @@
outline:none; outline:none;
} }
&:after{ &:after{
font-size:xx-large; font-size:18pt;
content:"\205D"; content:"\205D";
font-weight: bold;
} }
} }
button.nm_favorites_button { div.nm_favorites_div {
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
margin-right:5px; margin-right:5px;
@ -1241,18 +1257,56 @@
&:focus{ &:focus{
outline:none; 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{ &:after{
font-size: xx-large; font-size: 17pt;
content: "\2606"; content: "\2606";
font-weight: bold; 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 { button.nm_toggle_header_on {
&:after { &:after {
content:"\21E7"; content:"\2613";
} }
} }
input { input[type="search"] {
width: 50px; width: 50px;
height: @mobile-elem-height; height: @mobile-elem-height;
font-size: large; font-size: large;
@ -1260,7 +1314,7 @@
border:0; border:0;
opacity: 0; opacity: 0;
background-color:@mobile-nm-search-bg; background-color:@mobile-nm-search-bg;
color: white; color: black;
position: absolute; position: absolute;
&:active{ &:active{
border:none; border:none;
@ -1268,13 +1322,14 @@
} }
&:focus { &:focus {
border:none; border:none;
backgroun:@mobile-nm-search-bg; background:white;
outline: none; outline: none;
opacity: 1; opacity: 1;
left:110px; left:110px;
position: absolute; position: absolute;
width:100%; width:100%;
height:@mobile-elem-height; height:@mobile-elem-height;
z-index: 2;
} }
} }
} }

BIN
pixelegg/images/topmenu_items/mobile/search_white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB