mirror of
https://github.com/simon987/sist2.git
synced 2025-04-16 08:56:45 +00:00
Settings menu (#30) and UI tweaks
This commit is contained in:
parent
86840b46f4
commit
e03625838b
@ -53,7 +53,6 @@ sist2 (Simple incremental search tool)
|
||||
|
||||
|
||||
\* *Windows users*: **sist2** runs under [WSL](https://en.wikipedia.org/wiki/Windows_Subsystem_for_Linux)
|
||||
\* *Mac users*: See [#1](https://github.com/simon987/sist2/issues/1)
|
||||
|
||||
|
||||
## Example usage
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
#define EPILOG "Made by simon987 <me@simon987.net>. Released under GPL-3.0"
|
||||
|
||||
|
||||
static const char *const Version = "1.2.16";
|
||||
static const char *const Version = "1.2.17";
|
||||
static const char *const usage[] = {
|
||||
"sist2 scan [OPTION]... PATH",
|
||||
"sist2 index [OPTION]... INDEX",
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -244,11 +244,18 @@ body {
|
||||
}
|
||||
|
||||
mark {
|
||||
background: #fff217;
|
||||
background: rgba(251, 191, 41, 0.25);
|
||||
border-radius: 0;
|
||||
padding: 1px 0;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.content-div mark {
|
||||
background: rgba(251, 191, 41, 0.40);
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
.content-div {
|
||||
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
font-size: 13px;
|
||||
@ -438,3 +445,7 @@ option {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group > .custom-select:not(:first-child), .input-group > .form-control:not(:first-child) {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
@ -184,6 +184,7 @@ mark {
|
||||
background: #fff217;
|
||||
border-radius: 0;
|
||||
padding: 1px 0;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.content-div {
|
||||
@ -305,3 +306,7 @@ mark {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group > .custom-select:not(:first-child), .input-group > .form-control:not(:first-child) {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
@ -546,20 +546,24 @@ function makeStatsCard(searchResult) {
|
||||
resultMode.appendChild(gridMode);
|
||||
resultMode.appendChild(listMode);
|
||||
|
||||
if (mode === "grid") {
|
||||
if (CONF.options.display === "grid") {
|
||||
gridMode.classList.add("active")
|
||||
} else {
|
||||
listMode.classList.add("active")
|
||||
}
|
||||
|
||||
gridMode.addEventListener("click", () => {
|
||||
mode = "grid";
|
||||
localStorage.setItem("mode", mode);
|
||||
console.log("what");
|
||||
console.log(CONF.options);
|
||||
CONF.options.display = "grid";
|
||||
console.log(CONF.options);
|
||||
CONF.save();
|
||||
console.log(CONF.options);
|
||||
searchDebounced();
|
||||
});
|
||||
listMode.addEventListener("click", () => {
|
||||
mode = "list";
|
||||
localStorage.setItem("mode", mode);
|
||||
CONF.options.display = "list";
|
||||
CONF.save();
|
||||
searchDebounced();
|
||||
});
|
||||
|
||||
@ -584,7 +588,7 @@ function makeStatsCard(searchResult) {
|
||||
function makeResultContainer() {
|
||||
let resultContainer = document.createElement("div");
|
||||
|
||||
if (mode === "grid") {
|
||||
if (CONF.options.display === "grid") {
|
||||
resultContainer.setAttribute("class", "card-columns");
|
||||
} else {
|
||||
resultContainer.setAttribute("class", "list-group");
|
||||
|
||||
@ -13,13 +13,39 @@ let coolingDown = false;
|
||||
let searchBusy = true;
|
||||
let selectedIndices = [];
|
||||
|
||||
let mode;
|
||||
if (localStorage.getItem("mode") === null) {
|
||||
mode = "grid";
|
||||
} else {
|
||||
mode = localStorage.getItem("mode")
|
||||
const CONF = new Settings();
|
||||
|
||||
const _defaults = {
|
||||
display: "grid",
|
||||
fuzzy: true,
|
||||
highlight: true
|
||||
};
|
||||
|
||||
function Settings() {
|
||||
this.options = {};
|
||||
|
||||
this._onUpdate = function() {
|
||||
$("#fuzzyToggle").prop("checked", this.options.fuzzy);
|
||||
}
|
||||
|
||||
this.load = function() {
|
||||
const raw = window.localStorage.getItem("options");
|
||||
if (raw === null) {
|
||||
this.options = _defaults;
|
||||
} else {
|
||||
this.options = JSON.parse(raw);
|
||||
}
|
||||
|
||||
this._onUpdate();
|
||||
}
|
||||
|
||||
this.save = function() {
|
||||
window.localStorage.setItem("options", JSON.stringify(this.options));
|
||||
this._onUpdate();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function showEsError() {
|
||||
$.toast({
|
||||
heading: "Elasticsearch connection error",
|
||||
@ -54,6 +80,7 @@ window.onload = () => {
|
||||
}
|
||||
window.location.reload();
|
||||
})
|
||||
CONF.load();
|
||||
};
|
||||
|
||||
function toggleFuzzy() {
|
||||
@ -250,7 +277,7 @@ new autoComplete({
|
||||
function insertHits(resultContainer, hits) {
|
||||
for (let i = 0; i < hits.length; i++) {
|
||||
|
||||
if (mode === "grid") {
|
||||
if (CONF.options.display === "grid") {
|
||||
resultContainer.appendChild(createDocCard(hits[i]));
|
||||
} else {
|
||||
resultContainer.appendChild(createDocLine(hits[i]));
|
||||
@ -364,17 +391,6 @@ function search(after = null) {
|
||||
{"_score": {"order": "desc"}},
|
||||
{"_tie": {"order": "asc"}}
|
||||
],
|
||||
highlight: {
|
||||
pre_tags: ["<mark>"],
|
||||
post_tags: ["</mark>"],
|
||||
fields: {
|
||||
content: {},
|
||||
// "content.nGram": {},
|
||||
name: {},
|
||||
"name.nGram": {},
|
||||
font_name: {},
|
||||
}
|
||||
},
|
||||
aggs:
|
||||
{
|
||||
total_size: {"sum": {"field": "size"}},
|
||||
@ -387,6 +403,20 @@ function search(after = null) {
|
||||
q.search_after = [after["_score"], after["_id"]];
|
||||
}
|
||||
|
||||
if (CONF.options.highlight) {
|
||||
q.highlight = {
|
||||
pre_tags: ["<mark>"],
|
||||
post_tags: ["</mark>"],
|
||||
fields: {
|
||||
content: {},
|
||||
// "content.nGram": {},
|
||||
name: {},
|
||||
"name.nGram": {},
|
||||
font_name: {},
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
$.jsonPost("es", q).then(searchResult => {
|
||||
let hits = searchResult["hits"]["hits"];
|
||||
if (hits) {
|
||||
@ -480,7 +510,6 @@ window.onkeyup = function(e) {
|
||||
bar.scrollIntoView();
|
||||
bar.focus();
|
||||
}
|
||||
console.log(e)
|
||||
};
|
||||
|
||||
//Suggest
|
||||
@ -501,3 +530,30 @@ function getPathChoices() {
|
||||
})
|
||||
}
|
||||
|
||||
function updateSettings() {
|
||||
CONF.options.display = $("#settingDisplay").val();
|
||||
CONF.options.fuzzy = $("#settingFuzzy").prop("checked");
|
||||
CONF.options.highlight = $("#settingHighlight").prop("checked");
|
||||
CONF.save();
|
||||
|
||||
searchDebounced();
|
||||
|
||||
$.toast({
|
||||
heading: "Settings updated",
|
||||
text: "Settings saved to browser storage",
|
||||
stack: 3,
|
||||
bgColor: "#00a4bc",
|
||||
textColor: "#fff",
|
||||
position: 'bottom-right',
|
||||
hideAfter: 3000,
|
||||
loaderBg: "#08c7e8",
|
||||
});
|
||||
}
|
||||
|
||||
function loadSettings() {
|
||||
CONF.load();
|
||||
|
||||
$("#settingDisplay").val(CONF.options.display);
|
||||
$("#settingFuzzy").prop("checked", CONF.options.fuzzy);
|
||||
$("#settingHighlight").prop("checked", CONF.options.highlight);
|
||||
}
|
||||
|
||||
@ -11,9 +11,10 @@
|
||||
|
||||
<nav class="navbar navbar-expand-lg">
|
||||
<a class="navbar-brand" href="/">sist2</a>
|
||||
<span class="badge badge-pill version">v1.2.16</span>
|
||||
<span class="badge badge-pill version">v1.2.17</span>
|
||||
<span class="tagline">Lightning-fast file system indexer and search tool </span>
|
||||
<a style="margin-left: auto" id="theme" class="btn" title="Toggle theme" href="/">Theme</a>
|
||||
<button style="margin-left: auto" class="btn" type="button" data-toggle="modal" data-target="#settings" onclick="loadSettings()">Settings</button>
|
||||
<a id="theme" class="btn" title="Toggle theme" href="/">Theme</a>
|
||||
</nav>
|
||||
|
||||
<div class="container">
|
||||
@ -151,6 +152,39 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal" id="settings" tabindex="-1" role="dialog" aria-labelledby="modal-title" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Settings</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" id="settingHighlight">
|
||||
<label class="custom-control-label" for="settingHighlight">Enable highlighting</label>
|
||||
</div>
|
||||
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" id="settingFuzzy">
|
||||
<label class="custom-control-label" for="settingFuzzy">Set fuzzy search by default</label>
|
||||
</div>
|
||||
|
||||
<label for="settingDisplay">Display</label>
|
||||
<select id="settingDisplay" class="form-control form-control-sm">
|
||||
<option value="grid">Grid</option>
|
||||
<option value="list">List</option>
|
||||
</select>
|
||||
|
||||
<br>
|
||||
<button style="float: right" class="btn btn-primary" onclick="updateSettings()">Update settings</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="searchResults"></div>
|
||||
</div>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user