Fix css and add Show All N feature
This commit is contained in:
parent
f4b5ea60de
commit
69fd26b3bc
|
@ -38,7 +38,40 @@ namespace SparkleLib {
|
||||||
public List<string> MovedTo = new List<string> ();
|
public List<string> MovedTo = new List<string> ();
|
||||||
|
|
||||||
public List<SparkleNote> Notes = new List<SparkleNote> ();
|
public List<SparkleNote> Notes = new List<SparkleNote> ();
|
||||||
}
|
|
||||||
|
public string RelativeTimestamp {
|
||||||
|
get {
|
||||||
|
TimeSpan time_span = DateTime.Now - Timestamp;
|
||||||
|
|
||||||
|
if (time_span <= TimeSpan.FromSeconds (60))
|
||||||
|
return "just now";
|
||||||
|
|
||||||
|
if (time_span <= TimeSpan.FromMinutes (60))
|
||||||
|
return time_span.Minutes > 1
|
||||||
|
? time_span.Minutes + " minutes ago"
|
||||||
|
: "a minute ago";
|
||||||
|
|
||||||
|
if (time_span <= TimeSpan.FromHours (24))
|
||||||
|
return time_span.Hours > 1
|
||||||
|
? time_span.Hours + " hours ago"
|
||||||
|
: "an hour ago";
|
||||||
|
|
||||||
|
if (time_span <= TimeSpan.FromDays (30))
|
||||||
|
return time_span.Days > 1
|
||||||
|
? time_span.Days + " days ago"
|
||||||
|
: "a day ago";
|
||||||
|
|
||||||
|
if (time_span <= TimeSpan.FromDays (365))
|
||||||
|
return time_span.Days > 30
|
||||||
|
? (time_span.Days / 30) + " months ago"
|
||||||
|
: "a month ago";
|
||||||
|
|
||||||
|
return time_span.Days > 365
|
||||||
|
? (time_span.Days / 365) + " years ago"
|
||||||
|
: "a year ago";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
public class SparkleNote {
|
public class SparkleNote {
|
||||||
|
|
|
@ -264,6 +264,9 @@
|
||||||
<Content Include="..\..\data\about.png">
|
<Content Include="..\..\data\about.png">
|
||||||
<Link>Pixmaps\about.png</Link>
|
<Link>Pixmaps\about.png</Link>
|
||||||
</Content>
|
</Content>
|
||||||
|
<Content Include="..\..\data\html\jquery.js">
|
||||||
|
<Link>HTML\jquery.js</Link>
|
||||||
|
</Content>
|
||||||
</ItemGroup>
|
</ItemGroup>
|
||||||
<ItemGroup>
|
<ItemGroup>
|
||||||
<Folder Include="Pixmaps\" />
|
<Folder Include="Pixmaps\" />
|
||||||
|
|
|
@ -312,7 +312,7 @@ namespace SparkleShare {
|
||||||
}
|
}
|
||||||
|
|
||||||
new Thread (new ThreadStart (delegate {
|
new Thread (new ThreadStart (delegate {
|
||||||
FetchAvatars (emails, 36);
|
FetchAvatars (emails, 48);
|
||||||
})).Start ();
|
})).Start ();
|
||||||
|
|
||||||
string event_log_html = EventLogHTML;
|
string event_log_html = EventLogHTML;
|
||||||
|
@ -392,33 +392,27 @@ namespace SparkleShare {
|
||||||
|
|
||||||
string comments = "";
|
string comments = "";
|
||||||
if (change_set.SupportsNotes) {
|
if (change_set.SupportsNotes) {
|
||||||
comments = "<table class=\"comments\">";
|
comments = "<div class=\"comments\">";
|
||||||
|
|
||||||
if (change_set.Notes != null) {
|
if (change_set.Notes != null) {
|
||||||
change_set.Notes.Sort ((x, y) => (x.Timestamp.CompareTo (y.Timestamp)));
|
change_set.Notes.Sort ((x, y) => (x.Timestamp.CompareTo (y.Timestamp)));
|
||||||
|
|
||||||
foreach (SparkleNote note in change_set.Notes) {
|
foreach (SparkleNote note in change_set.Notes) {
|
||||||
comments += "<tr>" +
|
comments += "<div class=\"comment-text\">" + note.Body + "<p class=\"comment-author\">" + note.UserName + "</p></div>";
|
||||||
" <td class=\"comment-author\">" + note.UserName + "</td>" +
|
|
||||||
" <td class=\"comment-timestamp\">" + note.Timestamp.ToString ("d MMM") + "</td>" +
|
|
||||||
"</tr>" +
|
|
||||||
"<tr>" +
|
|
||||||
" <td class=\"comment-text\" colspan=\"2\">" + note.Body + "</td>" +
|
|
||||||
"</tr>";
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
comments += "</table>";
|
comments += "</div>";
|
||||||
}
|
}
|
||||||
|
|
||||||
string avatar_email = "";
|
string avatar_email = "";
|
||||||
if (File.Exists (GetAvatar (change_set.UserEmail, 36)))
|
if (File.Exists (GetAvatar (change_set.UserEmail, 48)))
|
||||||
avatar_email = change_set.UserEmail;
|
avatar_email = change_set.UserEmail;
|
||||||
|
|
||||||
event_entry += "</dl>";
|
event_entry += "</dl>";
|
||||||
event_entries += event_entry_html.Replace ("<!-- $event-entry-content -->", event_entry)
|
event_entries += event_entry_html.Replace ("<!-- $event-entry-content -->", event_entry)
|
||||||
.Replace ("<!-- $event-user-name -->", change_set.UserName)
|
.Replace ("<!-- $event-user-name -->", change_set.UserName)
|
||||||
.Replace ("<!-- $event-avatar-url -->", "file://" + GetAvatar (avatar_email, 36))
|
.Replace ("<!-- $event-avatar-url -->", "file://" + GetAvatar (avatar_email, 48))
|
||||||
.Replace ("<!-- $event-time -->", change_set.Timestamp.ToString ("H:mm"))
|
.Replace ("<!-- $event-time -->", change_set.Timestamp.ToString ("H:mm"))
|
||||||
.Replace ("<!-- $event-folder -->", change_set.Folder)
|
.Replace ("<!-- $event-folder -->", change_set.Folder)
|
||||||
.Replace ("<!-- $event-revision -->", change_set.Revision)
|
.Replace ("<!-- $event-revision -->", change_set.Revision)
|
||||||
|
@ -434,24 +428,24 @@ namespace SparkleShare {
|
||||||
today.Month == activity_day.DateTime.Month &&
|
today.Month == activity_day.DateTime.Month &&
|
||||||
today.Year == activity_day.DateTime.Year) {
|
today.Year == activity_day.DateTime.Year) {
|
||||||
|
|
||||||
day_entry = day_entry_html.Replace ("<!-- $day-entry-header -->", "<b>Today</b>");
|
day_entry = day_entry_html.Replace ("<!-- $day-entry-header -->", "Today");
|
||||||
|
|
||||||
} else if (yesterday.Day == activity_day.DateTime.Day &&
|
} else if (yesterday.Day == activity_day.DateTime.Day &&
|
||||||
yesterday.Month == activity_day.DateTime.Month &&
|
yesterday.Month == activity_day.DateTime.Month &&
|
||||||
yesterday.Year == activity_day.DateTime.Year) {
|
yesterday.Year == activity_day.DateTime.Year) {
|
||||||
|
|
||||||
day_entry = day_entry_html.Replace ("<!-- $day-entry-header -->", "<b>Yesterday</b>");
|
day_entry = day_entry_html.Replace ("<!-- $day-entry-header -->", "Yesterday");
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
if (activity_day.DateTime.Year != DateTime.Now.Year) {
|
if (activity_day.DateTime.Year != DateTime.Now.Year) {
|
||||||
// TRANSLATORS: This is the date in the event logs
|
// TRANSLATORS: This is the date in the event logs
|
||||||
day_entry = day_entry_html.Replace ("<!-- $day-entry-header -->",
|
day_entry = day_entry_html.Replace ("<!-- $day-entry-header -->",
|
||||||
"<b>" + activity_day.DateTime.ToString (_("ddd MMM d, yyyy")) + "</b>");
|
activity_day.DateTime.ToString (_("dddd, MMMM d, yyyy")));
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
// TRANSLATORS: This is the date in the event logs, without the year
|
// TRANSLATORS: This is the date in the event logs, without the year
|
||||||
day_entry = day_entry_html.Replace ("<!-- $day-entry-header -->",
|
day_entry = day_entry_html.Replace ("<!-- $day-entry-header -->",
|
||||||
"<b>" + activity_day.DateTime.ToString (_("ddd MMM d")) + "</b>");
|
activity_day.DateTime.ToString (_("dddd, MMMM d")));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,38 +1,28 @@
|
||||||
<div class='event-entry'>
|
<div class='event-entry' style='background-image: url("<!-- $event-avatar-url -->");'>
|
||||||
<div class='event-entry-content'>
|
<div class='event-user-name'><!-- $event-user-name --></div>
|
||||||
<div class='no-buddy-icon'>
|
<div class='event-folder'><!-- $event-folder --></div>
|
||||||
<div class='buddy-icon' style='background-image: url("<!-- $event-avatar-url -->");'></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stuff">
|
<!-- $event-entry-content -->
|
||||||
<div class='event-user-name' style='background-color:red'><!-- $event-user-name --></div>
|
|
||||||
<div class='event-folder' style='background-color:green'><!-- $event-folder --></div>
|
|
||||||
<div class="clearer"></div>
|
|
||||||
|
|
||||||
<!-- $event-entry-content -->
|
<div class="clearer"></div>
|
||||||
|
<div class="event-timestamp"><!-- $event-time --></div>
|
||||||
|
<div class="action note">Add note</div>
|
||||||
|
<div class="action show">Show all</div>
|
||||||
|
|
||||||
<div class="clearer"></div>
|
<div class="clearer"></div>
|
||||||
<div style="float: left" class="event-timestamp"><!-- $event-time --></div>
|
|
||||||
<div class="action comment">Comment</div>
|
|
||||||
<div class="action"><a href=''>View all</a></div>
|
|
||||||
|
|
||||||
<div class="clearer"></div>
|
<div class="comments-section">
|
||||||
|
<div class="comments-wrapper">
|
||||||
<div class="comments-section">
|
<!-- $event-comments -->
|
||||||
<div class="comments-wrapper">
|
<div class="comment-text">
|
||||||
<!-- $event-comments -->
|
<textarea class="comment-textarea"></textarea>
|
||||||
<textarea class="comment-textarea"></textarea>
|
<input class="comment-button" type="button" value="Add note"
|
||||||
|
id="<!-- $event-folder -->~<!-- $event-revision -->">
|
||||||
<input class="comment-button" type="button" value="Add"
|
<div style='clear: both'></div>
|
||||||
id="<!-- $event-folder -->~<!-- $event-revision -->">
|
</div>
|
||||||
<div style='clear: both'></div>
|
<div style='clear: both'></div>
|
||||||
</div>
|
|
||||||
<div class="clearer"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="clearer"></div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="clearer"></div>
|
<div class="clearer"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="separator" />
|
<div class="clearer"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -19,11 +19,30 @@
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
$('.comment').click(function () {
|
// Show the form when 'Add note' is clicked
|
||||||
|
$('.note').click(function () {
|
||||||
$(this).parent ().find ('.comments-wrapper').show ();
|
$(this).parent ().find ('.comments-wrapper').show ();
|
||||||
//$(this).parent ().find ('.comments-wrapper').css ('cursor', 'default');
|
//$(this).parent ().find ('.comments-wrapper').css ('cursor', 'default');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Hide the 'Show all' link when there are less than 10 events
|
||||||
|
$('.show').each (function () {
|
||||||
|
var entries = $(this).parent ().find ('dl').children ().length;
|
||||||
|
|
||||||
|
if (entries <= 10) {
|
||||||
|
$(this).hide ();
|
||||||
|
} else {
|
||||||
|
// Append the number of entries
|
||||||
|
$(this).html ('Show all ' + entries);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// When 'Show all' is clicked, show all collapsed events
|
||||||
|
$('.show').click(function () {
|
||||||
|
$(this).parent ().find ('dl').children ().show ();
|
||||||
|
$(this).hide ();
|
||||||
|
});
|
||||||
|
|
||||||
$("input").click(function () {
|
$("input").click(function () {
|
||||||
textarea = $(this).parent ().find ('textarea');
|
textarea = $(this).parent ().find ('textarea');
|
||||||
text = textarea.val ();
|
text = textarea.val ();
|
||||||
|
@ -74,20 +93,26 @@
|
||||||
color: <!-- $secondary-font-color -->;
|
color: <!-- $secondary-font-color -->;
|
||||||
}
|
}
|
||||||
|
|
||||||
td {
|
.comment-text {
|
||||||
vertical-align: top;
|
font-size: 90%;
|
||||||
font-size: 12px;
|
padding: 12px;
|
||||||
|
background-color: #FFF4DB;
|
||||||
|
margin-bottom: 1px;
|
||||||
|
<!-- padding-right: 48px; -->
|
||||||
}
|
}
|
||||||
|
|
||||||
.day-entry-header {
|
.day-entry-header {
|
||||||
font-size: <!-- $day-entry-header-font-size -->;
|
opacity: 0.5;
|
||||||
color: #444;
|
|
||||||
padding: 18px;
|
|
||||||
padding-top: 9px;
|
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
display: block;
|
display: block;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.day-entry-content .event-entry:last-child {
|
||||||
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
|
@ -102,12 +127,9 @@
|
||||||
color: <!-- $a-hover-color -->;
|
color: <!-- $a-hover-color -->;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stuff {
|
|
||||||
width: 100%;
|
|
||||||
padding-left: 56px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.event-timestamp {
|
.event-timestamp {
|
||||||
|
float: left;
|
||||||
|
font-size: 80%;
|
||||||
color: <!-- $secondary-font-color -->;
|
color: <!-- $secondary-font-color -->;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -121,15 +143,21 @@
|
||||||
color: <!-- $secondary-font-color -->;
|
color: <!-- $secondary-font-color -->;
|
||||||
}
|
}
|
||||||
|
|
||||||
.event-entry-content {
|
.event-entry {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
padding-bottom: 24px;
|
||||||
|
border-bottom: 1px <!-- $secondary-font-color --> solid;
|
||||||
|
width: 100%;
|
||||||
|
padding-left: 60px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
display: block;
|
display: block;
|
||||||
padding-bottom: 60px;
|
|
||||||
padding: 0px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.action {
|
.action {
|
||||||
|
font-size: 80%;
|
||||||
margin-left: 15px;
|
margin-left: 15px;
|
||||||
float: right;
|
float: right;
|
||||||
|
margin-bottom: 9px;
|
||||||
color: <!-- $a-color -->;
|
color: <!-- $a-color -->;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -147,32 +175,39 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.separator {
|
.separator {
|
||||||
|
clear: both;
|
||||||
border-bottom: 1px #ccc solid;
|
border-bottom: 1px #ccc solid;
|
||||||
margin-top: 24px;
|
margin-top: 24px;
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
dl {
|
dl {
|
||||||
background-color:orange;
|
|
||||||
padding : 0;
|
padding : 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
|
padding-top: 6px;
|
||||||
|
clear: both;
|
||||||
}
|
}
|
||||||
|
|
||||||
dd {
|
dd {
|
||||||
|
display: none;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
width: 90%;
|
width: 90%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
padding-top: 2px;
|
padding-top: 2px;
|
||||||
padding-bottom: 2px;
|
padding-bottom: 2px;
|
||||||
padding-left: 22px;
|
padding-left: 20px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-bottom: 2px;
|
margin-bottom: 1px;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position: center left;
|
background-position: center left;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
dl dd:nth-child(-n+10) {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
.document-added {
|
.document-added {
|
||||||
background-image: url('<!-- $document-added-background-image -->');
|
background-image: url('<!-- $document-added-background-image -->');
|
||||||
}
|
}
|
||||||
|
@ -208,11 +243,16 @@
|
||||||
|
|
||||||
.comments {
|
.comments {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
font-size: 90%;
|
||||||
|
margin-bottom: 9px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment-author {
|
.comment-author {
|
||||||
|
font-size: 90%;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
width: 75%;
|
width: 75%;
|
||||||
|
margin: 0;
|
||||||
|
margin-top: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment-timestamp {
|
.comment-timestamp {
|
||||||
|
@ -229,7 +269,7 @@
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
-webkit-box-sizing: border-box;
|
-webkit-box-sizing: border-box;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 50px;
|
height: 3em;
|
||||||
padding-bottom: 6px;
|
padding-bottom: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -237,6 +277,7 @@
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
-webkit-box-sizing: border-box;
|
-webkit-box-sizing: border-box;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.comments-wrapper {
|
.comments-wrapper {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
Loading…
Reference in a new issue