Opened 11 years ago

Closed 10 years ago

#10417 closed enhancement (fixed)

Create directory listing template for Web+

Reported by: pulkomandy Owned by: pulkomandy
Priority: low Milestone: Unscheduled
Component: Applications/WebPositive Version: R1/Development
Keywords: Cc:
Blocked By: Blocking:
Platform: All

Description

WebPositive got support for listing directories (local ones, and soon FTP). The listing looks very ugly.

Create a self contained HTML/css document to make it look nicer.

It must contain a <table id="ftpDirectoryTable"> element. This will be filled with the directory entries using the following classes: 

<tr class="ftpDirectoryEntryRow">
<td class="ftpDirectoryIcon ftpDirectoryTypeDirectory">
<td class="ftpDirectoryIcon ftpDirectoryTypeFile">
<td class="ftpDirectoryFileName">
<td class="ftpDirectoryFileDate">
<td class="ftpDirectoryFileSize">

It should use UTF-8 encoding (set in the doctype and/or meta tag).

Anything can be added: background pictures, logo, css effects, javascript sorting of the table, whatever. Be creative and make something that looks nice, but don't overdo it.

Change History (4)

comment:1 by waddlesplash, 11 years ago

I'll do it! A few things:

  1. I'd like an example file ;-)
  2. Can you add the icon:// protocol like Firefox has for getting system icons for file types? (e.g. "icon://.pdf?size=64" for a 64px square PDF icon.)

comment:2 by pulkomandy, 11 years ago

If I had an example, I'd be using it ;)

The icon protocol could be added, but I'm not sure how you could use it, as the table content is generated by the browser, and the cell with the icon will not "know" the file type/extension. Unless you manage to grab it from the filename cell content using Javascript, maybe.

I think the current page looks like this: 

<body>
<table id="ftpDirectoryTable">
<tr class="ftpDirectoryEntryRow">
<!--<td class="ftpDirectoryIcon ftpDirectoryTypeDirectory" /> (for directories) -->
<td class="ftpDirectoryIcon ftpDirectoryTypeFile"/>
<td class="ftpDirectoryFileName">Filename.ext</td>
<td class="ftpDirectoryFileDate">Yesteday</td>
<td class="ftpDirectoryFileSize">30MB</td>
</tr>
<!-- more tr follow, with the other files -->
</table>
</body>

comment:3 by waddlesplash, 10 years ago

Here's some CSS taken from the user guide that improves the look: 

body {
	color: #333333;
	line-height: 1.5;
	margin: 0;
	padding: 0;
	font-family: "DejaVu Sans", Arial, Helvetica, sans-serif;
}
a:link { 
	font-weight: bold; 
	text-decoration: none; 
	color: #dc3c01;
}
a:visited { 
	font-weight: bold; 
	text-decoration: none; 
	color: #892601;
}
a:hover, a:active { 
	text-decoration: underline; 
	color: #ff4500;
}

comment:4 by pulkomandy, 10 years ago

Resolution: → fixed
Status: new → closed

Added this in ​https://github.com/haiku/webkit/commit/01314b314f980b696ad76582b83db0a78ec949e4.

Closing the ticket as the infrastructure for loading the file is working, but feel free to submit improvements to the style.

To test your changes, you can:

  • Show some directory listing in Web+ (drag a directory on it)
  • Save the page as MHTML
  • Remove the useless MHTML header and keep only the HTML contents of the file
  • Modify the style which is currently inline (we may move it to a separate file if it gets too big)
  • Test your changes by loading this modified page in Web+
  • Send us your modified page.
Note: See TracTickets for help on using tickets.