holm/egroupware
1
1
Fork 0
forked from extern/egroupware
Code Issues Pull Requests 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

68
etemplate/js/et2_extension_nextmatch.js
View File

@ -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);
},
/**

101
pixelegg/css/mobile.css
View File

@ -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;

97
pixelegg/css/mobile.less
View File

@ -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;
}
}
}

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