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

Bug 951084 - [Calendar] Today button design #18415

Closed
wants to merge 1 commit into from
Closed

Bug 951084 - [Calendar] Today button design #18415

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 3 additions & 1 deletion apps/calendar/index.html
View file
Open in desktop
Expand Up @@ -156,7 +156,9 @@ <h1 id="current-month-year">
<section id="week-view"></section>

<ul id="view-selector" role="tablist">
<li class="today" role="tab"><a id="today" data-l10n-id="show-today" href="#today">Today</a></li>
<li class="today" role="tab">
<a id="today" href="#today"><span class="today-label icon-today"></span></a>
</li>
<li class="month" role="tab"><a data-l10n-id="show-month-view" href="/month/">Month</a></li>
<li class="week" role="tab"><a data-l10n-id="show-week-view" href="/week/">Week</a></li>
<li class="day" role="tab"><a data-l10n-id="show-day-view" href="/day/">Day</a></li>
Expand Down
4 changes: 3 additions & 1 deletion apps/calendar/js/app.js
View file
Open in desktop
Expand Up @@ -316,7 +316,9 @@ Calendar.App = (function(window) {
var self = this;
// quick hack for today button
var today = document.querySelector('#view-selector .today');
var now = new Date();

today.querySelector('.today-label').innerHTML = now.getDate();
today.addEventListener('click', function(e) {
var date = new Date();
self.timeController.move(date);
Expand All @@ -338,7 +340,7 @@ Calendar.App = (function(window) {
// transparently. Defaults to off for tests.
this.store('Alarm').autoQueue = true;

this.timeController.move(new Date());
this.timeController.move(now);

this.view('TimeHeader', function(header) {
header.render();
Expand Down
26 changes: 24 additions & 2 deletions apps/calendar/style/ui.css
View file
Open in desktop
Expand Up @@ -39,6 +39,27 @@ ol.link-list li:only-child a {
border-bottom: 0;
}

#today:active {
color: #FFFFFF;
}

#today .today-label {
font-size: 1.4rem;
line-height: 4.6rem;
}

#today .today-label:before {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would change .today-label to .icon-today just to make it clear we are editing the icon style.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure.

position: absolute;
width: 100%;
display: block;
font-size: 3rem;
line-height: 4.5rem;
}

#view-selector > .today {
border-right: 0.1rem solid #CECECE;
}

body[data-path="/month/"] #view-selector > .month > a,
body[data-path="/week/"] #view-selector > .week > a,
body[data-path="/day/"] #view-selector > .day > a {
Expand All @@ -60,8 +81,9 @@ body[data-path="/day/"] #view-selector > .day > a:after {

body[data-path="/month/"] #view-selector > .month a:active,
body[data-path="/week/"] #view-selector > .week a:active,
body[data-path="/day/"] #view-selector > .day > a:active {
color: #5f5f5f;
body[data-path="/day/"] #view-selector > .day > a:active,
#view-selector > [role="tab"] > a:active {
color: #FFFFFF;
}

[role="tablist"] > [role="tab"] > a:after,
Expand Down