pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Style listnavigator better

Browse Source
This commit is contained in:
Wim Brand
2019-07-18 19:53:09 +02:00
parent 3023662894
commit 086a4b77ec
6 changed files with 60 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
res/static/script/ListNavigator.js
View File

@@ -67,17 +67,15 @@ var ListNavigator = {
this.addToHistory(index); this.addToHistory(index);
$("#listNavigatorItems").find("*").removeClass("list_item_selected"); $("#list_navigator").find("*").removeClass("file_button_selected");
$("#listNavigatorItems div").eq(this.position).addClass("list_item_selected"); var selectedItem = $("#list_navigator div").eq(this.position);
selectedItem.addClass("file_button_selected");
var itemWidth = selectedItem.outerWidth(true);
// This centers the scroll bar exactly on the selected item // This centers the scroll bar exactly on the selected item
$("#listNavigatorItems").animate( $("#list_navigator").animate(
{ {scrollLeft: ((this.position * itemWidth) + (itemWidth / 2)) - ($("#list_navigator").width() / 2)},
scrollLeft: ((this.position * 109) + (109/2)) - ($("#listNavigator").width() / 2) {duration: 1000, queue: false}
}, {
duration: 1000,
queue: false
}
); );
this.loadThumbnails(index); this.loadThumbnails(index);
@@ -123,27 +121,25 @@ var ListNavigator = {
} }
console.log(endPos); console.log(endPos);
var navigatorItems = document.getElementById("listNavigatorItems").children var navigatorItems = document.getElementById("list_navigator").children
for (i = startPos; i <= endPos; i++){ for (i = startPos; i <= endPos; i++){
if (navigatorItems[i].innerHTML.includes("listItemThumbnail")) { if (navigatorItems[i].innerHTML.includes("list_item_thumbnail")) {
console.log("skip"); continue; // Thumbnail already loaded
continue;
} }
var thumb = "/api/file/" + this.data[i].id + "/thumbnail"; var thumb = "/api/file/" + this.data[i].id + "/thumbnail";
var name = this.data[i].name; var name = this.data[i].name;
var itemHtml = escapeHTML(name) + "<br>" var itemHtml = "<img src=\"" + thumb + "\" "
+ "<img src=\"" + thumb + "\" " + "class=\"list_item_thumbnail\" alt=\"" + escapeHTML(name) + "\"/>"
+ "class=\"listItemThumbnail\" alt=\"" + escapeHTML(name) + "\"/>"; + escapeHTML(name);
navigatorItems[i].innerHTML = itemHtml; navigatorItems[i].innerHTML = itemHtml;
} }
}, },
init: function(data){ init: function(data){
var hashPos = getHashValue("item");
this.data = data; this.data = data;
this.length = data.length; this.length = data.length;
@@ -156,19 +152,12 @@ var ListNavigator = {
filename = "Removed File"; filename = "Removed File";
} }
listHTML += "<div class=\"listItem\" " listHTML += "<div class=\"file_button list_item\" "
+ "onClick=\"ListNavigator.setItem('" + i + "')\">" + "onClick=\"ListNavigator.setItem('" + i + "')\">"
+ escapeHTML(filename) + "<br>" + escapeHTML(filename) + "<br>"
+ "</div>"; + "</div>";
}); });
document.getElementById("listNavigatorItems").innerHTML = listHTML; document.getElementById("list_navigator").innerHTML = listHTML;
// Skip to this file if the parameter is set
if(Number.isInteger(parseInt(hashPos))){
this.setItem(hashPos);
}else{
this.setItem(0);
}
var btnLastItem = document.createElement("button"); var btnLastItem = document.createElement("button");
btnLastItem.innerText = "◀"; btnLastItem.innerText = "◀";
@@ -221,7 +210,14 @@ var ListNavigator = {
document.getElementById("btnShare").after(btnShuffle); document.getElementById("btnShare").after(btnShuffle);
// Make the navigator visible // Make the navigator visible
document.getElementById("listNavigator").style.display = "inline-block"; document.getElementById("list_navigator").style.display = "inline-block";
// Skip to the file defined in the link hash
if(Number.isInteger(parseInt(getHashValue("item")))){
this.setItem(parseInt(getHashValue("item")));
}else{
this.setItem(0);
}
} }
}; };

6
res/static/script/Viewer.js
View File

@@ -18,6 +18,12 @@ var Viewer = {
Toolbar.toggle(); Toolbar.toggle();
} }
// The close button only works if the window has an opener. So we hide
// the button if it does not
if (window.opener === null) {
$("#button_close_file_viewer").remove();
}
if(type === "file"){ if(type === "file"){
this.isFile = true; this.isFile = true;
this.currentFile = data.id; this.currentFile = data.id;

15
res/static/style/layout.css
View File

@@ -301,27 +301,28 @@ pre{
margin: 6px; margin: 6px;
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
border-radius: 5px; border-radius: 2px;
box-shadow: 2px 2px 8px -3px var(--shadow_color); box-shadow: 2px 2px 8px -3px var(--shadow_color);
/* border: 1px solid var(--accent_color_dark); */
background-color: var(--file_background_color); background-color: var(--file_background_color);
color: #bfbfbf; /* Fallback */ color: #bfbfbf; /* Fallback */
color: var(--text_color); color: var(--text_color);
word-break: break-all; word-break: break-all;
text-align: left; text-align: left;
line-height: 120%; line-height: 1.2em;
display: inline-block; display: inline-block;
transition: box-shadow 0.3s, opacity 2s; transition: box-shadow 0.3s, opacity 2s;
white-space: normal;
} }
.file_button:hover{ .file_button:hover,
box-shadow: 0px 0px 10px 3px var(--highlight_color), inset 0px 0px 6px 1px var(--highlight_color); .file_button_selected {
box-shadow: 0px 0px 3px 3px var(--highlight_color);
text-decoration: none; text-decoration: none;
color: #bfbfbf; /* Fallback */ color: #bfbfbf; /* Fallback */
color: var(--text_color); color: var(--text_color);
} }
.file_button > img{ .file_button > img{
max-height: 60px; max-height: 100%;
max-width: 120px; max-width: 25%;
margin-right: 5px; margin-right: 5px;
float: left; float: left;
display: block; display: block;

62
res/static/style/viewer.css
View File

@@ -25,6 +25,11 @@ body{
text-align: left; text-align: left;
padding: 0.2em; padding: 0.2em;
} }
.file_viewer > .highlight_headerbar > .button_group {
flex-grow: 0;
flex-shrink: 0;
display: inline-flex;
}
.file_viewer > .highlight_headerbar > .button_toggle_toolbar { .file_viewer > .highlight_headerbar > .button_toggle_toolbar {
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
@@ -41,30 +46,29 @@ body{
white-space: nowrap; white-space: nowrap;
line-height: 2em; line-height: 2em;
} }
.file_viewer > .highlight_headerbar > .list_navigator_buttons {
flex-grow: 0;
flex-shrink: 0;
display: inline-flex;
}
.file_viewer > .highlight_headerbar > .button_close_file_viewer { .file_viewer > .highlight_headerbar > .button_close_file_viewer {
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
margin-left: .5em; margin-left: .5em;
} }
.file_viewer > .list_navigator{ .file_viewer > .list_navigator {
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
position: relative; position: relative;
display: none; /* Becomes visible if the page is a list */ display: none; /* Becomes visible if the page is a list */
width: 100%; width: 100%;
height: 100px;
background-color: var(--accent_color_dark); background-color: var(--accent_color_dark);
box-shadow: 2px 2px 8px var(--shadow_color); box-shadow: 0 0 8px var(--shadow_color);
text-align: center; text-align: center;
overflow-x: hidden; line-height: 1em;
overflow-x: scroll;
overflow-y: hidden; overflow-y: hidden;
z-index: 50; z-index: 50;
transition: top 1.5s; white-space: nowrap;
}
.file_viewer > .list_navigator > .list_item{
height: 40px !important;
width: 250px !important;
} }
.file_viewer > .file_viewer_window { .file_viewer > .file_viewer_window {
flex-grow: 1; flex-grow: 1;
@@ -337,41 +341,3 @@ table > tbody > tr {border: none !important;}
height: 100%; height: 100%;
border: none; border: none;
} }
#listNavigatorItems{
position: relative;
top: 0;
left: 0;
right: 0;
height: 100%;
white-space: nowrap;
overflow-x: scroll;
overflow-y: hidden;
border: none;
padding: 0;
}
.listItem{
display: inline-block;
position: relative;
height: 95%;
width: 100px;
margin-right: 5px;
text-align: center;
border: var(--input_color) solid 2px;
border-radius: 2px;
font-size: 12px;
overflow: hidden;
cursor: pointer;
}
.list_item_selected{
border: var(--highlight_color) solid 2px;
}
.listItemThumbnail{
position: relative;
max-width: 100%;
max-height: 84%;
margin: 0;
}

18
res/template/file_viewer.html
View File

@@ -6,8 +6,8 @@
<meta charset="UTF-8"/> <meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
{{template "user_style" .}} {{template "user_style" .}}
<link rel="stylesheet" href="/res/style/viewer.css?v3"/> <link rel="stylesheet" href="/res/style/viewer.css?v4"/>
<link rel="stylesheet" href="/res/style/layout.css?v3"/> <link rel="stylesheet" href="/res/style/layout.css?v4"/>
<link rel="shortcut icon" href="/res/img/tray32.png"/> <link rel="shortcut icon" href="/res/img/tray32.png"/>
<link rel="icon" sizes="180x180" href="/res/img/pixeldrain.png"/> <link rel="icon" sizes="180x180" href="/res/img/pixeldrain.png"/>
<link rel="icon" sizes="256x256" href="/res/img/pixeldrain_big.png"/> <link rel="icon" sizes="256x256" href="/res/img/pixeldrain_big.png"/>
@@ -32,12 +32,10 @@
<!-- Yo --> <!-- Yo -->
</a> </a>
<span id="file_viewer_headerbar_title" class="file_viewer_headerbar_title">{{.Title}}</span> <span id="file_viewer_headerbar_title" class="file_viewer_headerbar_title">{{.Title}}</span>
<div id="list_navigator_buttons" class="list_navigator_buttons"></div> <div id="list_navigator_buttons" class="button_group"></div>
<button id="button_close_file_viewer" class="button_close_file_viewer button_red" onClick="window.close();">X</button> <button id="button_close_file_viewer" class="button_close_file_viewer button_red" onClick="window.close();">X</button>
</div> </div>
<div id="listNavigator" class="list_navigator"> <div id="list_navigator" class="list_navigator"></div>
<div id="listNavigatorItems"></div>
</div>
<div id="file_viewer_window" class="file_viewer_window"> <div id="file_viewer_window" class="file_viewer_window">
<div id="toolbar" class="file_viewer_toolbar"> <div id="toolbar" class="file_viewer_toolbar">
<!-- Ugly workaround to get rid of the scrollbar in non-webkit browsers --> <!-- Ugly workaround to get rid of the scrollbar in non-webkit browsers -->
@@ -164,10 +162,10 @@
<script src="/res/misc/chartjs/Chart.min.js"></script> <script src="/res/misc/chartjs/Chart.min.js"></script>
<script src="/res/script/jquery.js"></script> <script src="/res/script/jquery.js"></script>
<script src="/res/script/Keyboard.js"></script> <script src="/res/script/Keyboard.js?v4"></script>
<script src="/res/script/Toolbar.js?v2"></script> <script src="/res/script/Toolbar.js?v4"></script>
<script src="/res/script/Viewer.js?v2"></script> <script src="/res/script/Viewer.js?v4"></script>
<script src="/res/script/ListNavigator.js?v2"></script> <script src="/res/script/ListNavigator.js?v4"></script>
<script> <script>
// This info gets filled in on the server side to prevent having to make an API call right after the page loads. // This info gets filled in on the server side to prevent having to make an API call right after the page loads.

2
webcontroller/user_style.go
View File

@@ -157,7 +157,7 @@ var defaultPixeldrainStyle = pixeldrainStyleSheet{
HighlightColor: hsl{89, .51, .45}, HighlightColor: hsl{89, .51, .45},
HighlightTextColor: hsl{0, 0, 0}, HighlightTextColor: hsl{0, 0, 0},
DangerColor: hsl{339, .65, .31}, DangerColor: hsl{339, .65, .31},
FileBackgroundColor: hsl{0, 0, .14}, FileBackgroundColor: hsl{0, 0, .20},
ScrollbarForegroundColor: hsl{0, 0, .30}, ScrollbarForegroundColor: hsl{0, 0, .30},
ScrollbarBackgroundColor: hsl{0, 0, 0}, ScrollbarBackgroundColor: hsl{0, 0, 0},