diff --git a/www/css/entries-list.css b/www/css/entries-list.css index 618618ac955f853f7f153141efa844a4befa5487..e870a3a78ee30613e77d90b450e14516afdb6a3f 100755 --- a/www/css/entries-list.css +++ b/www/css/entries-list.css @@ -363,10 +363,16 @@ } #feeds-entries-top{ - height: 2px; + height: auto; + min-height: 2px; background: var(--fxos-orange-light); } +#feeds-entries-top > h2{ + margin: 0; + padding: var(--my-spacing); +} + #feeds-entries-content{ width:100%; height: 100%; diff --git a/www/js/app.js b/www/js/app.js index 57759cc187835cd2bbb12e607fe53894c8b50de8..457d09c834021e881c0d4d143c40122659653777 100755 --- a/www/js/app.js +++ b/www/js/app.js @@ -526,66 +526,6 @@ } } - /** - * Open form to do a search - * @param {focus} boolean Set focus hover input field. - * @return {null} - */ - function _searchEntriesOpen(focus) { - liveValues['entries']['search']['visible'] = true; - dom['screens']['entries']['scroll'].style.height = "calc(100% - 17.5rem)"; - searchEntries.classList.remove('enable-fxos-white'); - searchEntries.classList.add('enable-fxos-blue'); - formSearchEntries.classList.remove('_hide'); - formSearchEntries.classList.add('_show'); - if (focus) { - document.getElementById('inputSearchEntries').focus(); - } - _search(document.getElementById('inputSearchEntries').value); - // Show keyword from input value - ui.colorize(document.getElementById('inputSearchEntries').value); - } - - /** - * Close form to do a search - * @param {null} - * @return {null} - */ - function _searchEntriesClose() { - liveValues['entries']['search']['visible'] = false; - dom['screens']['entries']['scroll'].style.height = "calc(100% - 13.5rem)"; - searchEntries.classList.remove('enable-fxos-blue'); - searchEntries.classList.add('enable-fxos-white'); - document.getElementById('formSearchEntries').classList.remove('_show'); - document.getElementById('formSearchEntries').classList.add('_hide'); - _search(''); - // Hide keyword from input value - ui.uncolorize(document.getElementById('inputSearchEntries').value); - } - - searchEntries.onclick = function(string) { - - ui._vibrate(); - - if (liveValues['entries']['search']['visible'] && document.getElementById('formSearchEntries').classList.contains("_hide")) { - } else if (liveValues['entries']['search']['visible'] && document.getElementById('formSearchEntries').classList.contains("_show")) { - liveValues['entries']['search']['visible'] = !liveValues['entries']['search']['visible']; - } else if (!liveValues['entries']['search']['visible'] && document.getElementById('formSearchEntries').classList.contains("_hide")) { - liveValues['entries']['search']['visible'] = !liveValues['entries']['search']['visible']; - } else if (!liveValues['entries']['search']['visible'] && document.getElementById('formSearchEntries').classList.contains("_show")) { - } - - (liveValues['entries']['search']['visible']) ? _searchEntriesOpen(true) : _searchEntriesClose(); - } - - resetSearchEntries.onclick = function() { - params.feeds.selectedKeyword.value = ""; - params.feeds.selectedKeyword.domId = ""; - ui.uncolorize('keywords'); - ui._vibrate(); - _search(''); - } - nextDay.onclick = function(event) { ui._vibrate(); if (params.entries.nbDaysAgo > 0 ) { @@ -1934,15 +1874,20 @@ ui.echo("feeds-entries-content", _htmlEntries, "prepend"); } else { if (params.entries.displaySmallEntries && ((_nbEntriesDisplayed['small'] + _nbEntriesDisplayed['large']) > 0)) { - ui.echo("feeds-entries-content", _htmlFeedTitle + _htmlEntries, ""); + ui.echo("feeds-entries-top", _htmlFeedTitle, ""); + ui.echo("feeds-entries-content", _htmlEntries, ""); } else if (!params.entries.displaySmallEntries && (_nbEntriesDisplayed['large'] > 0)) { - ui.echo("feeds-entries-content", _htmlFeedTitle + _htmlEntries, ""); + ui.echo("feeds-entries-top", _htmlFeedTitle, ""); + ui.echo("feeds-entries-content", _htmlEntries, ""); } else if (!params.entries.displaySmallEntries && (_nbEntriesDisplayed['large'] == 0)) { - ui.echo("feeds-entries-content", _htmlFeedTitle + '
' + document.webL10n.get('no-news-today') + '
', ""); + ui.echo("feeds-entries-top", _htmlFeedTitle, ""); + ui.echo("feeds-entries-content", '
' + document.webL10n.get('no-news-today') + '
', ""); } else if ((_nbEntriesDisplayed['small'] + _nbEntriesDisplayed['large']) == 0) { - ui.echo("feeds-entries-content", _htmlFeedTitle + '
' + document.webL10n.get('no-news-today') + '
', ""); + ui.echo("feeds-entries-top", _htmlFeedTitle, ""); + ui.echo("feeds-entries-content", '
' + document.webL10n.get('no-news-today') + '
', ""); } else { - ui.echo("feeds-entries-content", _htmlFeedTitle + '
' + document.webL10n.get('error-no-network-connection') + '
', ""); + ui.echo("feeds-entries-top", _htmlFeedTitle, ""); + ui.echo("feeds-entries-content", '
' + document.webL10n.get('error-no-network-connection') + '
', ""); } } @@ -2647,7 +2592,7 @@ document.body.addEventListener('dspEntries.done', function(event){ if (liveValues['entries']['search']['visible']) { - _searchEntriesOpen(false); // No focus + ui._searchEntriesOpen(false); // No focus _search(document.getElementById('inputSearchEntries').value); } }); diff --git a/www/js/classes/MyUi.class.js b/www/js/classes/MyUi.class.js index b0012491dad27ae3b0d403f44b24f7febd9a506c..ecd50d1ec544d5a5228ce6684491a17acf47bee2 100755 --- a/www/js/classes/MyUi.class.js +++ b/www/js/classes/MyUi.class.js @@ -644,13 +644,50 @@ MyUi.prototype.isInViewport = function (element) { return rect.bottom > 0 && rect.top < windowHeight && rect.right > 0 && rect.left < windowWidth } +/* ============== */ +/* --- Search --- */ +/* ============== */ + +/** + * Open form to do a search + * @param {focus} boolean Set focus hover input field. + * @return {null} + */ +MyUi.prototype._searchEntriesOpen = function(focus) { + liveValues['entries']['search']['visible'] = true; + dom['screens']['entries']['scroll'].style.height = "calc(100% - 17.5rem)"; + searchEntries.classList.remove('enable-fxos-white'); + searchEntries.classList.add('enable-fxos-blue'); + formSearchEntries.classList.remove('_hide'); + formSearchEntries.classList.add('_show'); + if (focus) { + document.getElementById('inputSearchEntries').focus(); + } + _search(document.getElementById('inputSearchEntries').value); + // Show keyword from input value + ui.colorize(document.getElementById('inputSearchEntries').value); +} + +/** + * Close form to do a search + * @param {null} + * @return {null} + */ +MyUi.prototype._searchEntriesClose = function() { + liveValues['entries']['search']['visible'] = false; + dom['screens']['entries']['scroll'].style.height = "calc(100% - 13.5rem)"; + searchEntries.classList.remove('enable-fxos-blue'); + searchEntries.classList.add('enable-fxos-white'); + document.getElementById('formSearchEntries').classList.remove('_show'); + document.getElementById('formSearchEntries').classList.add('_hide'); + _search(''); + _MyUi.uncolorize(document.getElementById('inputSearchEntries').value); // Hide keyword from input value +} + /* ================= */ /* --- UI Events --- */ /* ================= */ -settingsOpen.onclick = function(event) {ui._vibrate(); ui._translate(dom['screens']['settings'], 'left');} -settingsClose.onclick = function(event) {ui._vibrate(); ui._translate(dom['screens']['settings'], 'right');} - menu.onclick = function(event) { ui._vibrate(); (liveValues.screens.feedsList.opened) ? ui._scrollTo(0) : ui._scrollTo(-1); @@ -658,7 +695,37 @@ menu.onclick = function(event) { closeFeedsList.onclick = function(event) {ui._vibrate(); ui._scrollTo(0);} -/* Class _startAnimation_ */ +/* --- Events Settings --- */ + +settingsOpen.onclick = function(event) {ui._vibrate(); ui._translate(dom['screens']['settings'], 'left');} +settingsClose.onclick = function(event) {ui._vibrate(); ui._translate(dom['screens']['settings'], 'right');} + +/* --- Events Search --- */ + +searchEntries.onclick = function(string) { + + _MyUi._vibrate(); + + if (liveValues['entries']['search']['visible'] && document.getElementById('formSearchEntries').classList.contains("_hide")) { + } else if (liveValues['entries']['search']['visible'] && document.getElementById('formSearchEntries').classList.contains("_show")) { + liveValues['entries']['search']['visible'] = !liveValues['entries']['search']['visible']; + } else if (!liveValues['entries']['search']['visible'] && document.getElementById('formSearchEntries').classList.contains("_hide")) { + liveValues['entries']['search']['visible'] = !liveValues['entries']['search']['visible']; + } else if (!liveValues['entries']['search']['visible'] && document.getElementById('formSearchEntries').classList.contains("_show")) { + } + + (liveValues['entries']['search']['visible']) ? _MyUi._searchEntriesOpen(true) : _MyUi._searchEntriesClose(); +} + +resetSearchEntries.onclick = function() { + params.feeds.selectedKeyword.value = ""; + params.feeds.selectedKeyword.domId = ""; + _MyUi.uncolorize('keywords'); + _MyUi._vibrate(); + _search(''); +} + +/* --- Events Animations --- */ var _animations = document.querySelectorAll("._startAnimation_"); @@ -672,7 +739,5 @@ for (var i = 0; i < _animations.length; i++) { } } -/* Detect end of animation */ - document.addEventListener("transitionend", function(){liveValues.animations.inProgress = false;}, false);