Skip to content
Snippets Groups Projects
Commit 3f9cce27 authored by Janne Mareike Koschinski's avatar Janne Mareike Koschinski
Browse files

Improved "more results" UI, added filtering

parent 16e65040
No related branches found
No related tags found
No related merge requests found
Expand all Show whitespace changes
Inline Side-by-side
Showing
with 149 additions and 52 deletions
database/Database.php
+ 4
− 4
View file @ 3f9cce27
......@@ -126,8 +126,8 @@ class Database
$stmt->bindValue(':sender', !$ignore_sender ? (string)$sender : "", PDO::PARAM_STR);
$stmt->bindParam(':ignore_since', $ignore_since, PDO::PARAM_INT);
$stmt->bindParam(':ignore_before', $ignore_before, PDO::PARAM_INT);
$stmt->bindParam(':ignore_buffer', $ignore_network, PDO::PARAM_INT);
$stmt->bindParam(':ignore_network', $ignore_buffer, PDO::PARAM_INT);
$stmt->bindParam(':ignore_buffer', $ignore_buffer, PDO::PARAM_INT);
$stmt->bindParam(':ignore_network', $ignore_network, PDO::PARAM_INT);
$stmt->bindParam(':ignore_sender', $ignore_sender, PDO::PARAM_INT);
$stmt->execute();
......@@ -155,8 +155,8 @@ class Database
$stmt->bindValue(':sender', !$ignore_sender ? (string)$sender : "", PDO::PARAM_STR);
$stmt->bindParam(':ignore_since', $ignore_since, PDO::PARAM_INT);
$stmt->bindParam(':ignore_before', $ignore_before, PDO::PARAM_INT);
$stmt->bindParam(':ignore_buffer', $ignore_network, PDO::PARAM_INT);
$stmt->bindParam(':ignore_network', $ignore_buffer, PDO::PARAM_INT);
$stmt->bindParam(':ignore_buffer', $ignore_buffer, PDO::PARAM_INT);
$stmt->bindParam(':ignore_network', $ignore_network, PDO::PARAM_INT);
$stmt->bindParam(':ignore_sender', $ignore_sender, PDO::PARAM_INT);
$stmt->bindParam(':limit', $truncatedLimit, PDO::PARAM_INT);
......
res/css/_content.sass
+ 18
− 13
View file @ 3f9cce27
......@@ -4,7 +4,7 @@
.results
max-width: 1136px
padding: 56px 2rem 4rem 2rem
padding: 2rem 2rem 4rem 2rem
margin: 0 auto
transition: opacity 400ms
......@@ -157,27 +157,32 @@
.close
display: initial
.container
> .inline-button
height: 48px
.container
font-size: 13px
> .inline-button
height: 0
overflow: hidden
background: #f5f5f5
font-size: 16px
line-height: 48px
color: rgb(113, 113, 113)
text-align: center
font-style: italic
font-size: 14px
line-height: 24px
padding: 7px 24px
border-bottom: 1px solid #e5e5e5
color: #555
background: #f0f0f0
cursor: pointer
@include vendor-prefix('user-select', 'none')
box-shadow: 0 -1px 0 #e5e5e5, 0 0 2px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .24)
transition: height 400ms
position: relative
box-shadow: 0 -1px 0 #e5e5e5, 0 0 2px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .24)
&:before
content: ""
display: inline-block
height: 20px
width: 20px
background-image: url(../icons/dots-horizontal.svg)
background-size: cover
vertical-align: top
margin-right: 16px
.context
position: relative
......
res/css/_nav.sass
+ 1
− 0
View file @ 3f9cce27
......@@ -55,6 +55,7 @@
line-height: 40px
left: 0
top: 0
cursor: pointer
.search
display: inline-block
......
res/css/_searchoptions.sass 0 → 100644
+ 8
− 0
View file @ 3f9cce27
.search-options
margin: 0 auto
padding: 6px 0
background: #fff
box-shadow: 0 -1px 0 #e0e0e0, 0 0 2px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .24)
max-width: 1072px
overflow-x: scroll
white-space: nowrap
\ No newline at end of file
res/css/_textfield.sass 0 → 100644
+ 1
− 0
View file @ 3f9cce27
.textfield-floating-label
\ No newline at end of file
res/css/search.css
+ 37
− 14
View file @ 3f9cce27
......@@ -45,7 +45,9 @@
body {
background: #F2F2F2;
font-family: "Roboto", sans-serif;
font-size: 81.25%; }
font-size: 81.25%;
padding-top: 56px;
}
*:focus {
outline: none; }
......@@ -106,7 +108,9 @@ body {
text-align: center;
line-height: 40px;
left: 0;
top: 0; }
top: 0;
cursor: pointer;
}
.nav .bar .container .searchBar .search {
display: inline-block;
flex-grow: 1;
......@@ -225,6 +229,16 @@ body {
.nav.focus + .results {
opacity: 0; }
.search-options {
margin: 0 auto;
padding: 6px 0;
background: #fff;
box-shadow: 0 -1px 0 #e0e0e0, 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
max-width: 1072px;
overflow-x: scroll;
white-space: nowrap;
}
[data-sendercolor="0"] {
color: #e90d7f; }
......@@ -380,7 +394,7 @@ body {
.results {
max-width: 1136px;
padding: 56px 2rem 4rem 2rem;
padding: 2rem 2rem 4rem 2rem;
margin: 0 auto;
transition: opacity 400ms; }
@media(max-width: 800px) {
......@@ -512,28 +526,37 @@ body {
display: none; }
.results .buffer.focus .title button .close {
display: initial; }
.results .buffer.focus .container > .inline-button {
height: 48px; }
.results .buffer .container {
font-size: 13px; }
.results .buffer .container > .inline-button {
height: 0;
overflow: hidden;
background: #f5f5f5;
font-size: 16px;
line-height: 48px;
color: #717171;
text-align: center;
font-style: italic;
font-size: 14px;
line-height: 24px;
padding: 7px 24px;
border-bottom: 1px solid #e5e5e5;
color: #555;
background: #f0f0f0;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
box-shadow: 0 -1px 0 #e5e5e5, 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
transition: height 400ms;
position: relative; }
position: relative;
box-shadow: 0 -1px 0 #e5e5e5, 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
}
.results .buffer .container > .inline-button:before {
content: "";
display: inline-block;
height: 20px;
width: 20px;
background-image: url(../icons/dots-horizontal.svg);
background-size: cover;
vertical-align: top;
margin-right: 16px;
}
.results .buffer .container .context {
position: relative; }
.results .buffer .container .context.active {
......
res/css/search.css.map
+ 12
− 2
View file @ 3f9cce27
This diff is collapsed.
res/css/search.sass
+ 2
− 0
View file @ 3f9cce27
......@@ -12,6 +12,7 @@ body
background: #F2F2F2
font-family: 'Roboto', sans-serif
font-size: 81.25%
padding-top: 56px
*:focus
outline: none
......@@ -24,4 +25,5 @@ body
display: none !important
@import "nav"
@import "searchoptions"
@import "content"
\ No newline at end of file
res/icons/dots-horizontal.svg 0 → 100644
+ 7
− 0
View file @ 3f9cce27
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
version="1.1" width="24" height="24" viewBox="0 0 24 24">
<path d="M16,12A2,2 0 0,1 18,10A2,2 0 0,1 20,12A2,2 0 0,1 18,14A2,2 0 0,1 16,12M10,12A2,2 0 0,1 12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12M4,12A2,2 0 0,1 6,10A2,2 0 0,1 8,12A2,2 0 0,1 6,14A2,2 0 0,1 4,12Z"
fill="#555"/>
</svg>
\ No newline at end of file
res/js/app.js → res/js/component/app.jsx
+ 14
− 13
View file @ 3f9cce27
......@@ -8,37 +8,38 @@ class App {
this.loadingQuery = 0;
this.render();
this.navigation.addEventListener("search", (query) => this.search(query));
statehandler.addEventListener("update", (query) => this.search(query));
this.navigation.addEventListener("search", (query) => {
this.search(query)
});
statehandler.addEventListener("update", (query) => {
this.search(query)
});
statehandler.init();
}
render() {
const wrapper = document.createElement("div");
wrapper.appendChild(this.navigation.elem);
const results = document.createElement("div");
results.classList.add("results");
wrapper.appendChild(results);
this.elem = wrapper;
this.resultContainer = results;
this.elem = <div>
{this.navigation.elem}
{this.resultContainer = <div className="results"/>}
</div>;
this.buffers.forEach((buffer) => this.insert(buffer));
}
search(query) {
search(query, sender, buffer, network, before, since) {
this.clear();
this.navigation.input.blur();
this.navigation.historyView.resetNavigation();
this.navigation.historyView.add(new HistoryElement(query));
this.navigation.input.value = query;
statehandler.replace(query);
statehandler.replace(query, sender, buffer, network, before, since);
if (query.trim() === "")
return;
this.loadingQuery++;
const queryId = this.loadingQuery;
load("web/search/", {query: statehandler.state}).then((result) => {
load("web/search/", statehandler.parse()).then((result) => {
if (this.loadingQuery !== queryId)
return;
......@@ -76,7 +77,7 @@ class App {
buffer.setLoading(true);
const offset = buffer.count();
console.log(offset);
load("web/searchbuffer/", {query: statehandler.state, buffer: buffer.id, offset: offset}).then((result) => {
load("web/searchbuffer/", statehandler.parse({buffer: buffer.id, offset: offset})).then((result) => {
buffer.load(result);
buffer.setLoading(false);
});
......
res/js/component/buffer.js
+ 9
− 1
View file @ 3f9cce27
......@@ -8,7 +8,9 @@ class Buffer extends Component {
this.render();
this.contextList.forEach(context => this.insert(context));
this.loadMoreBtn.setVisible(hasMore);
this.hasMore = hasMore;
this.loading = false;
this.neverLoaded = true;
}
render() {
this.elem = function () {
......@@ -57,8 +59,13 @@ class Buffer extends Component {
return this.contextList.length;
}
loadMore() {
console.log(this.neverLoaded);
console.log(this.hasMore);
if (this.elem.classList.contains('focus') || this.hasMore && this.neverLoaded) {
this.sendEvent('loadMore', []);
}
this.focus(true);
}
focus(focus) {
if (focus === undefined)
focus = !this.elem.classList.contains('focus');
......@@ -82,6 +89,7 @@ class Buffer extends Component {
insert(context) {
let container = this.insertContainerFirst.childElementCount < 4 ? this.insertContainerFirst : this.insertContainer;
container.appendChild(context.elem);
this.neverLoaded = false;
}
setLoading(value) {
this.loading = value;
......
res/js/component/buffer.jsx
+ 9
− 1
View file @ 3f9cce27
......@@ -11,7 +11,9 @@ class Buffer extends Component {
this.contextList.forEach((context) => this.insert(context));
this.loadMoreBtn.setVisible(hasMore);
this.hasMore = hasMore;
this.loading = false;
this.neverLoaded = true;
}
render() {
......@@ -45,7 +47,12 @@ class Buffer extends Component {
}
loadMore() {
this.sendEvent("loadMore", [])
console.log(this.neverLoaded);
console.log(this.hasMore);
if (this.elem.classList.contains("focus") || (this.hasMore && this.neverLoaded)) {
this.sendEvent("loadMore", []);
}
this.focus(true);
}
focus(focus) {
......@@ -77,6 +84,7 @@ class Buffer extends Component {
insert(context) {
let container = (this.insertContainerFirst.childElementCount < 4 ? this.insertContainerFirst : this.insertContainer);
container.appendChild(context.elem);
this.neverLoaded = false;
}
setLoading(value) {
......
res/js/util/loader.js
+ 1
− 1
View file @ 3f9cce27
......@@ -26,8 +26,8 @@ function load(url, data = null) {
}
};
request.open(method, url, true);
if (data !== null) {
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
if (data !== null) {
request.send(encodeData(data));
} else {
request.send();
......
res/js/util/statehandler.js
+ 23
− 0
View file @ 3f9cce27
......@@ -32,6 +32,29 @@ class StateHandler extends Component {
this.sendEvent("update", [this.state]);
}
parse(options = {}) {
let query = [];
const words = this.state.split(" ");
words.forEach((word) => {
const parts = word.split(":");
if (parts.length === 2 && [
"sender",
"buffer",
"network",
"before",
"since"
].includes(parts[0])) {
options[parts[0]] = parts[1];
} else {
query.push(word);
}
});
return {
...options,
query: query.join(" ")
}
}
clear() {
this.replace("");
}
......
templates/search.phtml
+ 1
− 1
View file @ 3f9cce27
......@@ -34,6 +34,6 @@
<script src="res/js/component/loadmore.js"></script>
<script src="res/js/component/context.js"></script>
<script src="res/js/component/buffer.js"></script>
<script src="res/js/app.js"></script>
<script src="res/js/component/app.js"></script>
</body>
</html>
web/search/index.php
+ 1
− 1
View file @ 3f9cce27
......@@ -14,7 +14,7 @@ $backend = Database::createFromConfig($config);
function param(string $key, $default = null)
{
return array_key_exists($key, $_REQUEST) ? $_REQUEST[$key] : $default;
return array_key_exists($key, $_REQUEST) ? ($_REQUEST[$key] !== "" ? $_REQUEST[$key] : $default) : $default;
}
if (!$backend->authenticate($session->username ?: '', $session->password ?: '')) {
......
web/searchbuffer/index.php
+ 1
− 1
View file @ 3f9cce27
......@@ -14,7 +14,7 @@ $backend = Database::createFromConfig($config);
function param(string $key, $default = null)
{
return array_key_exists($key, $_REQUEST) ? $_REQUEST[$key] : $default;
return array_key_exists($key, $_REQUEST) ? ($_REQUEST[$key] !== "" ? $_REQUEST[$key] : $default) : $default;
}
if (!$backend->authenticate($session->username ?: '', $session->password ?: '')) {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment