Fix css and add Show All N feature
This commit is contained in:
Hylke Bons
parent
e586638514
commit
9ff8e7cf95
|
|
@ -38,7 +38,40 @@ namespace SparkleLib {
|
|||
public List<string> MovedTo = new List<string> ();
|
||||
|
||||
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 {
|
||||
|
|
|
|||
|
|
@ -264,6 +264,9 @@
|
|||
<Content Include="..\..\data\about.png">
|
||||
<Link>Pixmaps\about.png</Link>
|
||||
</Content>
|
||||
<Content Include="..\..\data\html\jquery.js">
|
||||
<Link>HTML\jquery.js</Link>
|
||||
</Content>
|
||||
</ItemGroup>
|
||||
<ItemGroup>
|
||||
<Folder Include="Pixmaps\" />
|
||||
|
|
|
|||
|
|
@ -312,7 +312,7 @@ namespace SparkleShare {
|
|||
}
|
||||
|
||||
new Thread (new ThreadStart (delegate {
|
||||
FetchAvatars (emails, 36);
|
||||
FetchAvatars (emails, 48);
|
||||
})).Start ();
|
||||
|
||||
string event_log_html = EventLogHTML;
|
||||
|
|
@ -392,33 +392,27 @@ namespace SparkleShare {
|
|||
|
||||
string comments = "";
|
||||
if (change_set.SupportsNotes) {
|
||||
comments = "<table class=\"comments\">";
|
||||
comments = "<div class=\"comments\">";
|
||||
|
||||
if (change_set.Notes != null) {
|
||||
change_set.Notes.Sort ((x, y) => (x.Timestamp.CompareTo (y.Timestamp)));
|
||||
|
||||
foreach (SparkleNote note in change_set.Notes) {
|
||||
comments += "<tr>" +
|
||||
" <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 += "<div class=\"comment-text\">" + note.Body + "<p class=\"comment-author\">" + note.UserName + "</p></div>";
|
||||
}
|
||||
}
|
||||
|
||||
comments += "</table>";
|
||||
comments += "</div>";
|
||||
}
|
||||
|
||||
string avatar_email = "";
|
||||
if (File.Exists (GetAvatar (change_set.UserEmail, 36)))
|
||||
if (File.Exists (GetAvatar (change_set.UserEmail, 48)))
|
||||
avatar_email = change_set.UserEmail;
|
||||
|
||||
event_entry += "</dl>";
|
||||
event_entries += event_entry_html.Replace ("<!-- $event-entry-content -->", event_entry)
|
||||
.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-folder -->", change_set.Folder)
|
||||
.Replace ("<!-- $event-revision -->", change_set.Revision)
|
||||
|
|
@ -434,24 +428,24 @@ namespace SparkleShare {
|
|||
today.Month == activity_day.DateTime.Month &&
|
||||
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 &&
|
||||
yesterday.Month == activity_day.DateTime.Month &&
|
||||
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 {
|
||||
if (activity_day.DateTime.Year != DateTime.Now.Year) {
|
||||
// TRANSLATORS: This is the date in the event logs
|
||||
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 {
|
||||
// TRANSLATORS: This is the date in the event logs, without the year
|
||||
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-content'>
|
||||
<div class='no-buddy-icon'>
|
||||
<div class='buddy-icon' style='background-image: url("<!-- $event-avatar-url -->");'></div>
|
||||
</div>
|
||||
<div class='event-entry' style='background-image: url("<!-- $event-avatar-url -->");'>
|
||||
<div class='event-user-name'><!-- $event-user-name --></div>
|
||||
<div class='event-folder'><!-- $event-folder --></div>
|
||||
|
||||
<div class="stuff">
|
||||
<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 -->
|
||||
|
||||
<!-- $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 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="clearer"></div>
|
||||
|
||||
<div class="comments-section">
|
||||
<div class="comments-wrapper">
|
||||
<!-- $event-comments -->
|
||||
<textarea class="comment-textarea"></textarea>
|
||||
|
||||
<input class="comment-button" type="button" value="Add"
|
||||
id="<!-- $event-folder -->~<!-- $event-revision -->">
|
||||
<div style='clear: both'></div>
|
||||
</div>
|
||||
<div class="clearer"></div>
|
||||
</div>
|
||||
|
||||
<div class="clearer"></div>
|
||||
<div class="comments-section">
|
||||
<div class="comments-wrapper">
|
||||
<!-- $event-comments -->
|
||||
<div class="comment-text">
|
||||
<textarea class="comment-textarea"></textarea>
|
||||
<input class="comment-button" type="button" value="Add note"
|
||||
id="<!-- $event-folder -->~<!-- $event-revision -->">
|
||||
<div style='clear: both'></div>
|
||||
</div>
|
||||
<div style='clear: both'></div>
|
||||
</div>
|
||||
<div class="clearer"></div>
|
||||
</div>
|
||||
<div class="separator" />
|
||||
<div class="clearer"></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').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 () {
|
||||
textarea = $(this).parent ().find ('textarea');
|
||||
text = textarea.val ();
|
||||
|
|
@ -74,20 +93,26 @@
|
|||
color: <!-- $secondary-font-color -->;
|
||||
}
|
||||
|
||||
td {
|
||||
vertical-align: top;
|
||||
font-size: 12px;
|
||||
.comment-text {
|
||||
font-size: 90%;
|
||||
padding: 12px;
|
||||
background-color: #FFF4DB;
|
||||
margin-bottom: 1px;
|
||||
<!-- padding-right: 48px; -->
|
||||
}
|
||||
|
||||
.day-entry-header {
|
||||
font-size: <!-- $day-entry-header-font-size -->;
|
||||
color: #444;
|
||||
padding: 18px;
|
||||
padding-top: 9px;
|
||||
opacity: 0.5;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-bottom: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.day-entry-content .event-entry:last-child {
|
||||
border: none;
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
@ -102,12 +127,9 @@
|
|||
color: <!-- $a-hover-color -->;
|
||||
}
|
||||
|
||||
.stuff {
|
||||
width: 100%;
|
||||
padding-left: 56px;
|
||||
}
|
||||
|
||||
.event-timestamp {
|
||||
float: left;
|
||||
font-size: 80%;
|
||||
color: <!-- $secondary-font-color -->;
|
||||
}
|
||||
|
||||
|
|
@ -121,15 +143,21 @@
|
|||
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;
|
||||
padding-bottom: 60px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.action {
|
||||
font-size: 80%;
|
||||
margin-left: 15px;
|
||||
float: right;
|
||||
margin-bottom: 9px;
|
||||
color: <!-- $a-color -->;
|
||||
}
|
||||
|
||||
|
|
@ -147,32 +175,39 @@
|
|||
}
|
||||
|
||||
.separator {
|
||||
clear: both;
|
||||
border-bottom: 1px #ccc solid;
|
||||
margin-top: 24px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
dl {
|
||||
background-color:orange;
|
||||
padding : 0;
|
||||
margin: 0;
|
||||
margin-bottom: 12px;
|
||||
padding-top: 6px;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
dd {
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 90%;
|
||||
padding: 0;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
padding-left: 22px;
|
||||
padding-left: 20px;
|
||||
margin: 0;
|
||||
margin-bottom: 2px;
|
||||
margin-bottom: 1px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center left;
|
||||
}
|
||||
|
||||
dl dd:nth-child(-n+10) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.document-added {
|
||||
background-image: url('<!-- $document-added-background-image -->');
|
||||
}
|
||||
|
|
@ -208,11 +243,16 @@
|
|||
|
||||
.comments {
|
||||
width: 100%;
|
||||
font-size: 90%;
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
|
||||
.comment-author {
|
||||
font-size: 90%;
|
||||
font-weight: bold;
|
||||
width: 75%;
|
||||
margin: 0;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.comment-timestamp {
|
||||
|
|
@ -229,7 +269,7 @@
|
|||
box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
height: 3em;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
|
||||
|
|
@ -237,6 +277,7 @@
|
|||
box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.comments-wrapper {
|
||||
box-sizing: border-box;
|
||||
|
|
|
|||
Loading…
Reference in a new issue