Albirew/nyaa-pantsu
Albirew/nyaa-pantsu
Archivé
1
0
Bifurcation 0
Code Activité

Merge pull request #729 from ElegantMonkey/treeview-fix

Parcourir la source 
Fix tree view show/hide logic
Cette révision appartient à :
akuma06 2017-05-24 22:54:04 +02:00 révisé par GitHub
révision 584fd9a852
3 fichiers modifiés avec 31 ajouts et 20 suppressions
Voir les statistiques Télécharger le patch en tant que fichier Télécharger le fichier diff Développer tous les fichiers Réduire tous les fichiers

32
public/css/main.css
Voir le fichier

@ -533,17 +533,8 @@ td.tr-le { color: #E84C4C; }
content: "\25BC ";
}
.folder-icon {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAADBJREFUOI1jZGBg+M+AHTDiEEcBTMQowgcY8biAKECxCwYeDHwYjBowbAw4SYH+YwB6YwSnsuTkoAAAAABJRU5ErkJggg==');
width: 16px;
height: 16px;
display: inline-block;
}
.file-icon {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAElJREFUOI1jYGBg+I8Dw0ADAwFAyID/hAwhxgC8hhBrAE5DSDEAqyGkGoBiCAsufyEBRnySTEQYQND0/wRV4dZLuQtGDRgMBgAARxw25MUCGPQAAAAASUVORK5CYII=');
width: 16px;
height: 16px;
display: inline-block;
.tr-filelist {
--nest-level: 0;
}
.tr-filelist td {
padding: 4px 4px;
@ -551,7 +542,9 @@ td.tr-le { color: #E84C4C; }
overflow: hidden;
text-overflow: ellipsis;
}
.tr-filelist td:first-child span {
/* The margin that gives the tree-like effect, based on the nest-level */
.tr-filelist td:first-child::before {
margin-left: calc(var(--nest-level) * 2rem);
margin-right: 0.5rem;
}
/* Filesize column */
@ -562,3 +555,18 @@ td.tr-le { color: #E84C4C; }
.tr-folder {
cursor: pointer;
}
/* The folder or file icon */
.tr-folder td:first-child::before {
content: " ";
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAADBJREFUOI1jZGBg+M+AHTDiEEcBTMQowgcY8biAKECxCwYeDHwYjBowbAw4SYH+YwB6YwSnsuTkoAAAAABJRU5ErkJggg==');
width: 16px;
height: 16px;
display: inline-block;
}
.tr-file td:first-child::before {
content: " ";
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAElJREFUOI1jYGBg+I8Dw0ADAwFAyID/hAwhxgC8hhBrAE5DSDEAqyGkGoBiCAsufyEBRnySTEQYQND0/wRV4dZLuQtGDRgMBgAARxw25MUCGPQAAAAASUVORK5CYII=');
width: 16px;
height: 16px;
display: inline-block;
}

4
public/css/tomorrow.css
Voir le fichier

@ -60,5 +60,5 @@ td.tr-le { color: #cc6666; }
margin-bottom: -.5em;
}
.folder-icon { filter: invert(100%); -webkit-filter: invert(100%); }
.file-icon { filter: invert(100%); -webkit-filter: invert(100%); }
.tr-folder td:first-child::before { filter: invert(100%); -webkit-filter: invert(100%); }
.tr-file td:first-child::before { filter: invert(100%); -webkit-filter: invert(100%); }

15
templates/view.html
Voir le fichier

@ -46,8 +46,8 @@
<p class="torrent-hr" id="filelist-control" onclick="javascript:toggleFilelist()" data-filelist-open="true">{{call $.T "files"}}</p>
{{ if gt (len .FileList) 0 }}
{{/* how do i concat lol */}}
{{ $folderFormat := `<tr class='childs-of-{{.ParentIdentifier}} tr-filelist tr-folder' onclick="javascript:toggleFolder('childs-of-{{.Identifier}}')"><td><span class='folder-icon' style='margin-left: calc({{.NestLevel}}*2rem);'></span>{{.FolderName}}</td><td>{{ fileSize .TotalSize .Data.T }}</td></tr>` }}
{{ $fileFormat := `<tr class='childs-of-{{.ParentIdentifier}} tr-filelist'><td><span class="file-icon" style='margin-left: calc({{.NestLevel}}*2rem);'></span>{{.Filename}}</td><td>{{ fileSize .Filesize .Data.T }}</td>` }}
{{ $folderFormat := `<tr id="{{.Identifier}}" class='childs-of-{{.ParentIdentifier}} tr-filelist tr-folder' onclick="javascript:toggleFolder(this)" data-filelist-open="true" style="--nest-level: {{.NestLevel}}"><td>{{.FolderName}}</td><td>{{ fileSize .TotalSize .Data.T }}</td></tr>` }}
{{ $fileFormat := `<tr class='childs-of-{{.ParentIdentifier}} tr-filelist tr-file' style="--nest-level: {{.NestLevel}}"><td>{{.Filename}}</td><td>{{ fileSize .Filesize .Data.T }}</td>` }}
<script>
function toggleFilelist() {
var control = document.getElementById("filelist-control")
@ -57,12 +57,15 @@
control.setAttribute("data-filelist-open", filelist.hidden ? "false" : "true")
}
function toggleFolder(folder) {
var rows = document.querySelectorAll("*[class^='" + folder + "']")
function toggleFolder(folderNode) {
var isOpen = folderNode.getAttribute("data-filelist-open") == "true" ? true : false
var rows = document.querySelectorAll("*[class^='childs-of-" + folderNode.id + "']")
for (var i = 0; i < rows.length; i++) {
var row = rows[i]
row.hidden = !row.hidden
// If it's open (true), will hide, if not, will show.
rows[i].hidden = isOpen
}
folderNode.setAttribute("data-filelist-open", !isOpen ? "true" : "false")
}
</script>
<div class="torrent-info-box" id="filelist">