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

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

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

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

@@ -25,6 +25,11 @@ body{
text-align: left;
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 {
flex-grow: 0;
flex-shrink: 0;
@@ -41,30 +46,29 @@ body{
white-space: nowrap;
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 {
flex-grow: 0;
flex-shrink: 0;
margin-left: .5em;
}
.file_viewer > .list_navigator{
.file_viewer > .list_navigator {
flex-grow: 0;
flex-shrink: 0;
position: relative;
display: none; /* Becomes visible if the page is a list */
width: 100%;
height: 100px;
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;
overflow-x: hidden;
line-height: 1em;
overflow-x: scroll;
overflow-y: hidden;
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 {
flex-grow: 1;
@@ -337,41 +341,3 @@ table > tbody > tr {border: none !important;}
height: 100%;
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 name="viewport" content="width=device-width, initial-scale=1.0"/>
{{template "user_style" .}}
<link rel="stylesheet" href="/res/style/viewer.css?v3"/>
<link rel="stylesheet" href="/res/style/layout.css?v3"/>
<link rel="stylesheet" href="/res/style/viewer.css?v4"/>
<link rel="stylesheet" href="/res/style/layout.css?v4"/>
<link rel="shortcut icon" href="/res/img/tray32.png"/>
<link rel="icon" sizes="180x180" href="/res/img/pixeldrain.png"/>
<link rel="icon" sizes="256x256" href="/res/img/pixeldrain_big.png"/>
@@ -32,12 +32,10 @@
<!-- Yo -->
</a>
<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>
</div>
<div id="listNavigator" class="list_navigator">
<div id="listNavigatorItems"></div>
</div>
<div id="list_navigator" class="list_navigator"></div>
<div id="file_viewer_window" class="file_viewer_window">
<div id="toolbar" class="file_viewer_toolbar">
<!-- 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/script/jquery.js"></script>
<script src="/res/script/Keyboard.js"></script>
<script src="/res/script/Toolbar.js?v2"></script>
<script src="/res/script/Viewer.js?v2"></script>
<script src="/res/script/ListNavigator.js?v2"></script>
<script src="/res/script/Keyboard.js?v4"></script>
<script src="/res/script/Toolbar.js?v4"></script>
<script src="/res/script/Viewer.js?v4"></script>
<script src="/res/script/ListNavigator.js?v4"></script>
<script>
// 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},
HighlightTextColor: hsl{0, 0, 0},
DangerColor: hsl{339, .65, .31},
FileBackgroundColor: hsl{0, 0, .14},
FileBackgroundColor: hsl{0, 0, .20},
ScrollbarForegroundColor: hsl{0, 0, .30},
ScrollbarBackgroundColor: hsl{0, 0, 0},