Item10247: initial sorting of attachments

git-svn-id: http://svn.foswiki.org/trunk/BaseSkin@12439 0b4bb1d4-4e5a-0410-9cc4-b2b747904278

data/System/BaseSkin.txt

@@ -18,7 +18,7 @@ The progressive loading is done by using a topic template for each part.
 %TABLE{columnwidths="10%,50%,40%" headeralign="left"}%
 | *Part name* | *What it does* | *Defined in topic template* |
 | =base=   | Sets the base structure of the document (HTML page). | %SYSTEMWEB%.BaseSkinViewTemplate (and this loads %SYSTEMWEB%.BaseSkinDocumentTemplate) |
-| =basecss= | Loads CSS files: [[http://html5boilerplate.com/][boilerplate.css]] and [[%PUBURLPATH%/%SYSTEMWEB%/BaseSkinCss/base_src.css][base.css]] that sets default styling for HTML elements and implements Foswiki styles. %BR% =base.css= is not loaded if preference =BASESKIN_USE_CSS= is set to another CSS file. | %SYSTEMWEB%.BaseCssSkinViewTemplate |
+| =basecss= | Loads CSS files: [[http://html5boilerplate.com/][boilerplate.css]] and [[%PUBURLPATH%/%SYSTEMWEB%/BaseSkinCss/base_src.css][base.css]] that sets default styling for HTML elements and implements Foswiki styles. %BR% =base.css= is not loaded if preference =BASESKIN_USE_CSS_FILE= is set to another CSS file. | %SYSTEMWEB%.BaseCssSkinViewTemplate |
 | =basecssgrid= | Loads [[%PUBURLPATH%/%SYSTEMWEB%/BaseSkinCssGrid/grid_src.css][grid_src.css]] that implements a typographic grid and an adaptive grid to cater for different screen sizes. | %SYSTEMWEB%.BaseCssGridSkinViewTemplate |
 | =basejs= | Loads a javascript file that implements dynamic interaction with topic contents. | %SYSTEMWEB%.BaseJsSkinViewTemplate |
 
@@ -56,19 +56,19 @@ To change the default style (set with skin path parts =base= and optionally =bas
    1 Add to the base CSS
 
 ---++++ Overriding the base style
-Use a different style by pointing preference =BASESKIN_USE_CSS= to a CSS file. This may be a comma-separated list of files.
+Use a different style by pointing preference =BASESKIN_USE_CSS_FILE= to a CSS file, or to a comma-separated list of files.
 
 For example:
 <pre class="tml">
-   * <nop>Set BASESKIN_USE_CSS = %<nop>PUBURL%/%<nop>MAINWEB%/<nop>SitePreferences/ourbase.css,%<nop>PUBURL%/%<nop>MAINWEB%/<nop>SitePreferences/company.css
+   * <nop>Set BASESKIN_USE_CSS_FILE = %<nop>PUBURL%/%<nop>MAINWEB%/<nop>SitePreferences/ourbase.css,%<nop>PUBURL%/%<nop>MAINWEB%/<nop>SitePreferences/company.css
 </pre>
 
----++++ Adding to the base style
-Add to the default style by pointing preference =BASESKIN_ADD_CSS= to a CSS file. This may be a comma-separated list of files.
+---++++ Adding CSS files
+Add to the default style by pointing preference =BASESKIN_ADD_CSS_FILE= to a CSS file, or to a comma-separated list of files.
 
 For example:
 <pre class="tml">
-   * <nop>Set BASESKIN_ADD_CSS = %<nop>PUBURL%/%<nop>MAINWEB%/<nop>SitePreferences/nicer_logo.css,%<nop>PUBURL%/%<nop>MAINWEB%/<nop>SitePreferences/projects.css
+   * <nop>Set BASESKIN_ADD_CSS_FILE = %<nop>PUBURL%/%<nop>MAINWEB%/<nop>SitePreferences/nicer_logo.css,%<nop>PUBURL%/%<nop>MAINWEB%/<nop>SitePreferences/projects.css
 </pre>
 
 ---++ Testing

data/System/BaseSkinAttachtablesTemplate.txt

@@ -9,27 +9,38 @@ The attachtables template defines how attachments are displayed:
 ---------------------------------------------------
 Top table row definition for topic attachments and top table in attach screen
 ---------------------------------------------------
-}%%TMPL:DEF{ATTACH:files:header(toprow)}%<div class='foswikiSearchResultsHeader'><div class='foswikiRight'>
-<a href="#" class="jqButton foswikiUnvisited">Attach new file</a>
-</div>%MAKETEXT{"Sort by:"}%</div>%TMPL:END%%{
+}%%TMPL:DEF{ATTACH:files:header(toprow)}%<div class='foswikiToolHeader'>
+%MAKETEXT{"Sort on:"}% <a href='#' class='foswikiSort' data-sort="data-file">%MAKETEXT{"Name"}%</a> <a href='#' class='foswikiSort' data-sort="data-size">%MAKETEXT{"Size"}%</a> <a href='#' class='foswikiSort' data-sort="data-ext">%MAKETEXT{"Extension"}%</a> <a href='#' class='foswikiSort' data-sort="data-user">%MAKETEXT{"User"}%</a>
+<ul class='foswikiToolButtonRow'>
+	<li>
+		<a href="%SCRIPTURLPATH{"attach"}%/%WEB%/%TOPIC%" class="jqButton">Attach new file</a>
+	</li>
+</ul>
+</div>%TMPL:END%%{
 ---------------------------------------------------
 Header definition for topic attachments and top table in attach screen
 ---------------------------------------------------
 }%%TMPL:DEF{ATTACH:files:header(basic)}%<div class="foswikiAttachments foswikiSearchResults">
-%TMPL:P{ATTACH:files:header(toprow)}%%TMPL:END%%{
+%TMPL:P{ATTACH:files:header(toprow)}%<ul>%TMPL:END%%{
 ---------------------------------------------------
 A basic row definition, for attachment table and attach screen
 Use %A_URL% instead of %PUBURLPATH%/%WEB%/%TOPIC%/%A_FILE% to get a viewfile link
 ---------------------------------------------------
-}%%TMPL:DEF{ATTACH:files:row(basic)}%<div class="foswikiAttachment foswikiSearchResult">
-<div class='foswikiRight'><a href="%SCRIPTURLPATH{"attach"}%/%WEB%/%TOPIC%?filename=%ENCODE{"%A_FILE%"}%;revInfo=1" class="foswikiUnvisited" title="%MAKETEXT{"change, update, previous revisions, move, delete..."}%" rel="nofollow">%MAKETEXT{"manage"}%</a>
-</div> %A_ICON%<span class="foswikiHidden">%A_EXT%</span><div class='foswikiSearchResultContents'><span class="foswikiSearchResultTitle"><a href="%ATTACHURLPATH%/%ENCODE{%A_FILE%}%"><noautolink>%A_FILE%</noautolink></a></span><div>
-%A_COMMENT%</div><span class='foswikiSearchResultMeta'> %A_USER% %A_DATE% &sdot; %A_SIZE% <span class='foswikiGrayText'>%IF{
-	"'%A_REV%'!='1'"
-	then="<a href='#' class='foswikiUnvisited'>versions</a>"
-}%</span></span>
-</div>
-</div>%TMPL:END%%{
+}%%TMPL:DEF{ATTACH:files:row(basic)}%<li class="foswikiAttachment foswikiSearchResult" data-size="%A_FILESIZE%" data-ext="%A_EXT%" data-user="%A_USER%" data-file="%A_EFILE%" data-date="%A_EPOCH%" data-rev="%A_REV%" data-comment="<literal>%A_COMMENT%</literal>">
+	<ul>
+		<li class='foswikiAction'>
+			<a href="%SCRIPTURLPATH{"attach"}%/%WEB%/%TOPIC%?filename=%ENCODE{"%A_FILE%"}%;revInfo=1" class="foswikiUnvisited" title="%MAKETEXT{"change, update, previous revisions, move, delete..."}%" rel="nofollow">%MAKETEXT{"manage"}%</a>
+		</li><li>
+			%A_ICON%
+		</li><li class='foswikiSearchResultContents'>
+			<span class="foswikiSearchResultTitle"><a href="%ATTACHURLPATH%/%ENCODE{%A_FILE%}%"><noautolink>%A_FILE%</noautolink></a></span>
+			<div> %A_COMMENT% </div><span class='foswikiSearchResultMeta'>%MAKETEXT{"By [_1] on [_2] &&sdot; [_3]" args="%A_USER%, %A_DATE%, %A_SIZE%"}%%IF{
+				"'%A_REV%'!='1'"
+				then=" - <a href='#' class='foswikiUnvisited'>%MAKETEXT{"view older versions"}%</a>"
+			}%</span>
+		</li>
+	</ul>
+</li>%TMPL:END%%{
 ---------------------------------------------------
 Header for topic attachment table
 ---------------------------------------------------
@@ -44,7 +55,7 @@ Row for topic attachment table
 ---------------------------------------------------
 Footer for topic attachment table
 ---------------------------------------------------
-}%%TMPL:DEF{ATTACH:files:footer}%</div>%TMPL:END%%{
+}%%TMPL:DEF{ATTACH:files:footer}%</ul></div>%TMPL:END%%{
 ---------------------------------------------------
 Header for table at top of attach screen
 ---------------------------------------------------

data/System/BaseSkinFormtablesTemplate.txt

@@ -29,7 +29,7 @@ Footer
 Title link in header
 ---------------------------------------------------
 }%%TMPL:DEF{FORM:display:header:titlelink}%<div class='foswikiRight'><a href='%SCRIPTURL{edit}%/%WEB%/%TOPIC%?t=%GMTIME{$epoch}%;action=form' class='foswikiButton'>%MAKETEXT{"Edit form data"}%</a></div>
-<span class='foswikiLarge foswikiUnvisited'><noautolink>%A_TITLE%</noautolink></span>%TMPL:END%%{
+<div class='foswikiLarge foswikiUnvisited'><noautolink>%A_TITLE%</noautolink></div>%TMPL:END%%{
 ---------------------------------------------------
 Title name in header
 ---------------------------------------------------

data/System/BaseSkinTestPage.txt

@@ -350,6 +350,6 @@ class="simple"
 ---+++ JQuery Tabs
 %META:FORM{name="UserForm"}%
 %META:FIELD{name="FirstName" attributes="M" title="FirstName" value="Test"}%
-%META:FILEATTACHMENT{name="ISS1.jpg" attachment="ISS1.jpg" attr="" comment="The International Space Station" date="1314737307" path="iss-sta2.jpg" size="57087" user="BaseUserMapping_333" version="2"}%
+%META:FILEATTACHMENT{name="ISS1.jpg" attachment="ISS1.jpg" attr="" comment="The International Space Station" date="1314737307" path="iss-sta2.jpg" size="57087" user="BaseUserMapping_666" version="2"}%
 %META:FILEATTACHMENT{name="Paul_Cezanne_169.jpg" attachment="Paul_Cezanne_169.jpg" attr="" comment="Cézanne" date="1314736980" path="Paul_Cezanne_169.jpg" size="226459" user="BaseUserMapping_333" version="1"}%
 %META:FILEATTACHMENT{name="Paper004.pdf" attachment="Paper004.pdf" attr="" comment="" date="1314736990" path="Paper004.pdf" size="717980" user="BaseUserMapping_333" version="1"}%

data/System/BasecssSkinViewTemplate.txt

@@ -4,9 +4,10 @@ Base Skin topic template
 The basecss template adds CSS files to the html head:
 - boilerplate.css
 - TODO: external font files
-- base.css - unless preference BASESKIN_USE_CSS is set
-- files defined in BASESKIN_USE_CSS
-- files defined in BASESKIN_ADD_CSS
+- base.css - unless preference BASESKIN_USE_CSS_FILE is set
+- files defined in BASESKIN_USE_CSS_FILE
+- files defined in BASESKIN_ADD_CSS_FILE
+- CSS text defined in BASESKIN_ADD_CSS
 ===================================================
 }%%TMPL:INCLUDE{"view"}%%{
 ---------------------------------------------------
@@ -15,7 +16,7 @@ HTML5 ✰ Boilerplate contains a reset, font normalization and some base styles
 }%%TMPL:DEF{"head:css"}%%TMPL:PREV%%TMPL:P{
 	"LIBCSS"
 	id="BaseSkinCss/boilerplate"
-	requires=""
+	requires="JQUERYPLUGIN::TABPANE"
 }%%{
 ---------------------------------------------------
 TODO Link to font should be added here
@@ -26,15 +27,15 @@ TODO Link to font should be added here
 	text=""
 }%%{
 ---------------------------------------------------
-Loads CSS files defined in BASESKIN_USE_CSS if set
+Loads CSS files defined in BASESKIN_USE_CSS_FILE if set
 ---------------------------------------------------
 }%%IF{
-	"defined BASESKIN_USE_CSS AND $BASESKIN_USE_CSS!=''"
+	"defined BASESKIN_USE_CSS_FILE AND $BASESKIN_USE_CSS_FILE!=''"
 	then="$percntTMPL:P{
 			\"CSS\"
-			id=\"BASESKIN_USE_CSS\"
+			id=\"BASESKIN_USE_CSS_FILE\"
 			requires=\"BaseSkinCss/boilerplate\"
-			url=\"%BASESKIN_USE_CSS%\"
+			url=\"%BASESKIN_USE_CSS_FILE%\"
 			}$percnt"
 	else="$percntTMPL:P{
 			\"LIBCSS\"
@@ -43,17 +44,16 @@ Loads CSS files defined in BASESKIN_USE_CSS if set
 		}$percnt"
 }%%{
 ---------------------------------------------------
-Loads CSSs file defined in BASESKIN_ADD_CSS if set
+Loads CSSs file defined in BASESKIN_ADD_CSS_FILE if set
 ---------------------------------------------------
 }%%IF{
-	"defined BASESKIN_ADD_CSS AND $BASESKIN_ADD_CSS!=''"
+	"defined BASESKIN_ADD_CSS_FILE AND $BASESKIN_ADD_CSS_FILE!=''"
 	then="$percntTMPL:P{
 			\"CSS\"
-			id=\"BASESKIN_ADD_CSS\"
-			requires=\"BaseSkinCss/base\"
-			url=\"%BASESKIN_ADD_CSS%\"
+			id=\"BASESKIN_ADD_CSS_FILE\"
+			requires=\"BaseSkinCss/base,BASESKIN_USE_CSS_FILE\"
+			url=\"%BASESKIN_ADD_CSS_FILE%\"
 			}$percnt"
-	else=""
 }%%TMPL:END%%{
 ---------------------------------------------------
 Development only: if url param devgrid is 1, adds JavaScript to show a baseline grid on the page.

data/System/BasejsSkinViewTemplate.txt

@@ -13,6 +13,10 @@ The basejs template adds JavaScript files to the html head
 	"LIBJS"
 	id="JavascriptFiles/foswikiPref"
 	requires="JavascriptFiles/foswikilib,JQUERYPLUGIN"
+}%%TMPL:P{
+	"LIBJS"
+	id="BaseSkinJs/base"
+	requires="JavascriptFiles/foswikilib,JavascriptFiles/foswikiPref,JQUERYPLUGIN"
 }%%TMPL:END%%TMPL:END%%{
 ===================================================
 </verbatim>}%

lib/Foswiki/Contrib/BaseSkin/MANIFEST

@@ -10,6 +10,9 @@ data/System/BaseSkinTestPage.txt 0644 # for testing the skin in the browser
 data/System/BaseSkinViewTemplate.txt 0644
 data/System/BaseSkinWebTopBarExample.txt 0644
 data/System/BaseSkinWebTopBarTemplate.txt 0644
+pub/System/BaseSkinJs/base_src.js 0644
+pub/System/BaseSkinJs/base.js 0644
+pub/System/BaseSkinJs/base.js.gz 0644
 pub/System/BaseSkinCss/base_src.css 0644
 pub/System/BaseSkinCss/base.css 0644
 pub/System/BaseSkinCss/base.css.gz 0644

pub/System/BaseSkinCss/base.scss

@@ -199,6 +199,7 @@ pre,
 	}
 
 /* attachments */
+/*
 .foswikiAttachments {}
 	.foswikiAttachment {
 		padding: 10px;
@@ -213,7 +214,8 @@ pre,
 	.foswikiAttachments .foswikiSearchResultContents {
 		margin: 0 0 0 26px;
 	}
-
+*/
+
 /* table */
 .foswikiTable,
 .foswikiTable td,

pub/System/BaseSkinCss/base_src.css

@@ -165,19 +165,22 @@ pre {
   color: #aaa; }
 
 /* attachments */
-.foswikiAttachment {
-  padding: 10px; }
-
-.foswikiAttachments .foswikiSearchResultsHeader {
-  padding: 5px 10px;
-  background: #eee; }
-
-.foswikiAttachments .foswikiSearchResult img {
-  max-width: 16px; }
-
-.foswikiAttachments .foswikiSearchResultContents {
-  margin: 0 0 0 26px; }
-
+/*
+.foswikiAttachments {}
+	.foswikiAttachment {
+		padding: 10px;
+	}
+	.foswikiAttachments .foswikiSearchResultsHeader {
+		padding:5px 10px;
+		background: #eee;
+	}
+	.foswikiAttachments .foswikiSearchResult img {
+		max-width: 16px;
+	}
+	.foswikiAttachments .foswikiSearchResultContents {
+		margin: 0 0 0 26px;
+	}
+*/
 /* table */
 .foswikiTable,
 .foswikiTable td,

pub/System/BaseSkinCssGrid/grid.scss

@@ -461,6 +461,10 @@ a:hover {
 
 /* buttons */
 
+.jqButton {
+	@include em_line_height($size_p);
+}
+
 a.jqButton:hover,
 a.jqButton.jqButtonDefault:hover,
 button.jqButton:hover,
@@ -499,52 +503,89 @@ button.jqButton.jqButtonDefault:hover {
 .foswikiTopicText {
 }
 
+.foswikiToolHeader {
+	position: relative;
+	@include block_padding_small_flattened;
+	background-color: $color_tool_background_gradient_dark;
+	@include gradient($color_tool_background_gradient_light, $color_tool_background_gradient_dark);
+	@include corner($corner_default);
+	border:1px solid $color_tool_background_gradient_dark;
+
+	ul.foswikiToolButtonRow {
+		position: relative;
+		margin: -1px 0 0 0;
+		float: right;
+		padding:0;
+		list-style:none;	
+	}
+
+	a:link,
+	a:visited {
+		color: $color_link_black;
+	}
+
+	a.jqButton {
+		margin: 0;
+		@include em_font_size($size_smallish_font);
+		@include em_line_height($size_smallish_font);
+	}
+	a.jqButton:hover {
+		color: #fff;
+	}
+
+	.foswikiSort {
+		margin-left: $size_block_padding_small_flattened_em;
+	}
+}
+
 /* attachments */
 .foswikiAttachments {
 
 	.foswikiAttachment {
-		@include block_padding_flattened;
+		@include block_padding_small_flattened;
+
 		a:link,
 		a:visited {
 			color: $color_link_black;
 		}
-	}
-	.foswikiSearchResultsHeader {
-		position: relative;
-		@include block_padding_small_flattened;
-		background-color: $color_tool_background_gradient_dark;
-		@include gradient($color_tool_background_gradient_light, $color_tool_background_gradient_dark);
-		@include corner($corner_default);
-		border:1px solid $color_tool_background_gradient_dark;
 
-		.jqButton {
-			position: absolute;
-			right: 0;
-			top: -1px;
-			margin: 0;
-			@include em_font_size($size_smallish_font);
-			@include em_line_height($size_smallish_font);
+		img {
+			max-width: 16px;
 		}
-	}
-	.foswikiSearchResult img {
-		max-width: 16px;
-	}
-	.foswikiSearchResultContents {
-		margin-left: 0px + $strand2_ratio_up_2;
-	}
-	.foswikiSearchResultTitle {
-		a {
-			font-weight: bold;
+
+		.foswikiAction {
+			float: right;
+		}
+
+		.foswikiSearchResultContents {
+			margin-left: 0px + $strand2_ratio_up_2;
+		}
+
+		.foswikiSearchResultTitle {
+			a {
+				font-weight: bold;
+			}
+		}
+
+		.foswikiSearchResultMeta {
+			@include em_line_height($size_smallish_font);
+			@include em_font_size($size_smallish_font);
+			color:#aaa;
+
+			a:link,
+			a:visited {
+				color:#777;
+			}
 		}
 	}
-	.foswikiSearchResultMeta {
-		@include em_line_height($size_small);
-		@include em_font_size($size_small);
-		color:#999;
+	ul, li {
+		margin: 0;
+		padding: 0;
+		list-style: none;
+		list-style-image: none;
 	}
-	.foswikiSearchResultMeta a:link,
-	.foswikiSearchResultMeta a:visited {
-		color:#222;
+	ul {
+		clear: both;
 	}
 }