Skip to content
This repository has been archived by the owner on Dec 29, 2021. It is now read-only.

Commit

Permalink
VisD that emphasizes times of events today.
Browse files Browse the repository at this point in the history 
Got rid of the card actions (text line below each card), moved the feed
color indicator to the left as a background for the displayed time.
  • Loading branch information
@manastungare
manastungare committed Apr 30, 2014
1 parent dfd2de3 commit 02d9767
Show file tree
Hide file tree
Showing 4 changed files with 115 additions and 96 deletions.
101 changes: 63 additions & 38 deletions src/browser_action.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ header {
display: none;
}

#event-title {
#quick-add-event-title {
width: 100%;
}

Expand Down Expand Up @@ -92,64 +92,89 @@ header {
border-radius: 2px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
color: #333;
cursor: pointer;
display: flex;
font-weight: 300;
margin: 0 0 6px 0;
padding: 6px 0 0 0;
margin: 0 0 4px 0;
overflow: hidden;
position: relative;
}

.start-time {
color: #fff;
flex: 0 0 60px;
font-size: 12px;
overflow: hidden;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
}

.event .feed-color {
bottom: 0;
color: white;
font-weight: bold;
right: 0;
position: absolute;
text-align: center;
top: 0;
width: 6px;
.start-and-end-times {
color: #888;
font-size: 12px;
margin-top: 3px;
}

.detected-event .start-time {
background-color: #fff;
text-align: left;
}

.detected-event .start-time img {
margin: 6px 18px;
}

.event-details {
cursor: pointer;
margin: 0 12px 4px 12px;
flex: 1;
overflow: hidden;
}

.event h1 {
.start-time,
.event-details {
margin: 0;
padding: 6px;
}

.event-title {
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.start-time,
.event-title {
font-weight: 300;
line-height: 17px;
line-height: 1;
margin: 0 0 3px 0;
line-height: 16px;
vertical-align: text-bottom;
}

.event .start-and-end-times {
color: #888;
font-size: 12px;
line-height: 15px;
.all-day:not(.detected-event) .start-time {
flex-basis: 6px;
padding: 0;
}

.event .location {
color: #888;
font-size: 12px;
line-height: 15px;
margin-top: 3px;
.all-day:not(.detected-event) .event-details {
padding-top: 4px;
padding-bottom: 4px;
}

.card-action {
border-top: 1px solid #e5e5e5;
margin: 0 6px;
overflow: hidden;
padding: 6px;
text-overflow: ellipsis;
white-space: nowrap;
.all-day:not(.detected-event) .event-title {
font-size: 13px;
}

.card-action,
.card-action a {
color: #3db5e1;
text-decoration: none;
.location-icon {
float: right;
height: 15px;
padding: 0 3px;
width: 21px;
}

.location {
color: #888;
font-size: 12px;
margin-top: 3px;
}

.kd-button {
Expand Down
2 changes: 1 addition & 1 deletion src/browser_action.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
</div>
<div id="quick-add">
<div class="date-header i18n" id="add_an_event">Add an Event</div>
<textarea id="event-title" rows="5" tabindex="1"></textarea>
<textarea id="quick-add-event-title" rows="5" tabindex="1"></textarea>
<div class="quick-add-buttons">
<button id="quick_add_button" class="kd-button i18n" tabindex="2">Quick Add</button>
</div>
Expand Down
108 changes: 51 additions & 57 deletions src/browser_action.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ browseraction.fillMessages_ = function() {
});

$('[data-href="calendar_ui_url"]').attr('href', browseraction.CALENDAR_UI_URL_);
$('#event-title').attr({
$('#quick-add-event-title').attr({
'placeholder': chrome.i18n.getMessage('event_title_placeholder'
)});
};
Expand All @@ -88,7 +88,7 @@ browseraction.fillMessages_ = function() {
browseraction.installButtonClickHandlers_ = function() {
$('#show_quick_add').on('click', function() {
$('#quick-add').slideDown(200);
$('#event-title').focus();
$('#quick-add-event-title').focus();
});

$('#sync_now').on('click', function() {
Expand All @@ -102,7 +102,7 @@ browseraction.installButtonClickHandlers_ = function() {

$('#quick_add_button').on('click', function() {
var event = /** @type {CalendarEvent} */ ({});
event.title = event.description = $('#event-title').val().toString();
event.title = event.description = $('#quick-add-event-title').val().toString();
event = utils.processEvent(event);
chrome.tabs.create({'url': event.gcal_url});
});
Expand Down Expand Up @@ -217,12 +217,8 @@ browseraction.showEventsFromFeed_ = function(events) {

for (var i = 0; i < events.length; i++) {
var event = events[i];

var start = utils.fromIso8601(event.start);
var end = utils.fromIso8601(event.end);
var allDay = !end ||
(start.hours() === 0 && start.minutes() === 0 &&
end.hours() === 0 && end.minutes() === 0);

// Insert a new date header if the date of this event is not the same as
// that of the previous event.
Expand Down Expand Up @@ -250,75 +246,73 @@ browseraction.createEventDiv_ = function(event) {
var end = utils.fromIso8601(event.end);
var now = moment().valueOf();

var eventDiv = /** @type {jQuery} */ ($('<div>').addClass('event'));
var eventDiv = /** @type {jQuery} */ ($('<div>')
.addClass('event')
.attr({'data-url': event.gcal_url}));

if (!start) { // Some events detected via microformats are malformed.
return eventDiv;
}

var isDetectedEvent = !event.feed;
var isHappeningNow = start.valueOf() < now && end.valueOf() >= now;
if (!isDetectedEvent) { // This event is already on the user's calendar.
$('<div>').addClass('feed-color')
.css({'background-color': event.feed.color})
.attr({'title': event.feed.title})
.text(isHappeningNow ? '!' : '')
.appendTo(eventDiv);
var spansMultipleDays = (end.diff(start, 'seconds') > 86400);
var isAllDay = !end ||
(start.hours() === 0 && start.minutes() === 0 &&
end.hours() === 0 && end.minutes() === 0);
if (isAllDay) {
eventDiv.addClass('all-day');
}

var eventDetails = $('<div>')
.addClass('event-details')
.attr({'data-url': event.gcal_url})
.appendTo(eventDiv);
eventDetails.on('click', function() {
if (isDetectedEvent) {
eventDiv.addClass('detected-event');
}
eventDiv.on('click', function() {
chrome.tabs.create({'url': $(this).attr('data-url')});
});

$('<h1>').text(event.title).appendTo(eventDetails);

var allDay = !end ||
(start.hours() === 0 && start.minutes() === 0 &&
end.hours() === 0 && end.minutes() === 0);

// Pick a time format based on whether the event is an all-day event, and/or
// if it's an event we've detected (versus an event from the feed.)
var timeFormat = options.get(options.Options.TIME_FORMAT_24H) ? 'HH:mm' : 'h:mma';
var dateTimeFormat = allDay ?
(isDetectedEvent ? 'MMM D, YYYY' : '') :
var dateTimeFormat = isAllDay ? 'MMM D, YYYY' :
(isDetectedEvent ? 'MMM D, YYYY ' + timeFormat : timeFormat);

// If it's an all-day event from the feed, we don't need to include any time
// information, because it will already be rendered under the appropriate
// date header. So, skip this section entirely if dateTimeFormat is ''.
if (dateTimeFormat !== '') {
$('<div>').addClass('start-and-end-times')
.append($('<span>').addClass('start').text(start.format(dateTimeFormat)))
.append(' – ')
.append($('<span>').addClass('end').text(end.format(dateTimeFormat)))
.appendTo(eventDetails);
var startTimeDiv = $('<div>').addClass('start-time');
if (isDetectedEvent) {
startTimeDiv.append(
$('<img>').attr({
'width': 19,
'height': 19,
'src': chrome.extension.getURL('icons/calendar_add_38.png'),
'alt': chrome.i18n.getMessage('add_to_google_calendar')
})
);
} else {
startTimeDiv.css({'background-color': event.feed.color});
}
if (!isAllDay && !isDetectedEvent) {
startTimeDiv.text(start.format(dateTimeFormat));
}
startTimeDiv.appendTo(eventDiv);

var eventDetails = $('<div>')
.addClass('event-details')
.appendTo(eventDiv);

if (event.location) {
var mapLink = $('<a>')
.attr({
'href': 'https://maps.google.com?q=' + encodeURIComponent(event.location),
'target': '_blank'
})
.text(event.location);
$('<div>').addClass('card-action')
.append(mapLink)
.appendTo(eventDiv);
$('<a>').attr({
'href': 'https://maps.google.com?q=' + encodeURIComponent(event.location),
'target': '_blank'
}).append($('<img>').addClass('location-icon').attr({
'src': chrome.extension.getURL('icons/ic_action_place.png')
})).appendTo(eventDetails);
}

if (isDetectedEvent) { // This event has not yet been added to the user's calendar.
var addToCalendarLink = $('<a>')
.attr({'href': event.gcal_url, 'target': '_blank'})
.text(chrome.i18n.getMessage('add_to_google_calendar'));
$('<div>').addClass('card-action')
.append(addToCalendarLink)
.appendTo(eventDiv);
}
// The location icon goes before the title because it floats right.
$('<div>').addClass('event-title').text(event.title).appendTo(eventDetails);

if (isAllDay && spansMultipleDays || isDetectedEvent) {
$('<div>')
.addClass('start-and-end-times')
.append(start.format(dateTimeFormat) + ' — ' + end.format(dateTimeFormat))
.appendTo(eventDetails);
}
return eventDiv;
};

Expand Down
Binary file added src/icons/ic_action_place.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 02d9767

Please sign in to comment.