Merge pull request #10768 from evanxd/bug-881137-v1.1.0hd

Bug 881137 - hdpi/xhdpi resolution assets and layout for Calendar app

apps/calendar/index.html

@@ -154,7 +154,7 @@ <h1 id="current-month-year">
   </header>
 
   <div id="progress-indicator">
-    <img id="throbber" src="/style/ui/progress.png">
+    <div id="throbber"></div>
   </div>
 
 

apps/calendar/js/views/week_child.js

@@ -52,9 +52,9 @@ Calendar.ns('Views').WeekChild = (function() {
 
       // TODO: This is a magic calculation based on current CSS. Fix this so
       // that it can be dynamic based on CSS, or fix CSS to not need this.
-      var pxHeight = (hoursDuration * 2) - 5;
+      var remHeight = ((hoursDuration * 2) - 5) / 10;
 
-      element.style.height = 'calc(' + percHeight + '% + ' + pxHeight + 'px)';
+      element.style.height = 'calc(' + percHeight + '% + ' + remHeight + 'rem)';
     },
 
     create: function() {

apps/calendar/style/building_blocks.css

@@ -14,7 +14,7 @@
   -moz-box-sizing: border-box;
   padding: 0 0.5rem;
   font: 1.4rem/4rem "Open Sans", Sans-serif;
-  border: solid 1px #d1d1d1;
+  border: solid 0.1rem #d1d1d1;
   border-radius: 0.3rem;
   background: #fff url("building_blocks/input_areas/images/ui/shadow.png") repeat-x left top;
  }
@@ -54,7 +54,7 @@ body[role="application"] label .clear[data-state="active"] {
 body[role="application"] .fieldbox {
   background: #fff url("building_blocks/input_areas/images/ui/shadow.png") repeat-x left top;
   border-radius: 0.3rem;
-  border: 1px solid #C8C8C8;
+  border: 0.1rem solid #C8C8C8;
   overflow: hidden;
   font: 1.4rem/1em "Open Sans", Sans-serif;
 }
@@ -100,14 +100,14 @@ body[role="application"] .fieldbox input {
 }
 
 body[role="application"] .fieldbox dd {
-  border-left: 1px solid #DDD;
+  border-left: 0.1rem solid #DDD;
   border-radius: 0 0.3rem 0.3rem 0;
   display: block;
   overflow: hidden;
 }
 
 body[role="application"] .fieldbox label {
-  border-bottom: 1px solid #DDD;
+  border-bottom: 0.1rem solid #DDD;
 }
 
 body[role="application"] .fieldbox label:last-child {
@@ -130,7 +130,7 @@ body[role="application"] > nav > header {
   z-index: 10;
   height: 5rem;
   color: #fff;
-  background: url("building_blocks/drawer/images/ui/header.png") repeat-x left top;
+  background: url("building_blocks/drawer/images/ui/header.png") repeat-x left top / auto 100%;
 }
 
 body[role="application"] > nav > header:after {
@@ -206,9 +206,9 @@ body[role="application"] > nav > header .icon {
   width: 3rem;
   height: 3rem;
   margin: 0 -1rem;
-  background: transparent no-repeat center center;
   text-indent: 100%;
   white-space: nowrap;
+  background: transparent no-repeat center center / 3rem;
   overflow: hidden;
   position: relative;
   height: 4.9rem;
@@ -295,4 +295,4 @@ body[role="application"] > nav .inner > ul > li > a {
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
-}
+}

apps/calendar/style/calendar.css

@@ -1,19 +1,18 @@
 * {
   -moz-box-sizing: border-box;
 }
+html {
+  font-size: 10px;
+}
 
 html, body {
   margin: 0;
   padding: 0;
-  font-size: 10px;
   height: 100%;
-  font-family: 'MozTT';
-  background: white;
   line-height: 100%;
   overflow: hidden;
 }
 
-
 h1,
 h2,
 h3,
@@ -22,8 +21,8 @@ h5,
 section {
   /* unscrew up heights */
   font-size: 100%;
-  padding: 0px;
-  margin: 0px;
+  padding: 0;
+  margin: 0;
 }
 
 section {
@@ -33,22 +32,22 @@ section {
 button {
   border: none;
   background: transparent;
-  padding: 0px;
-  margin: 0px;
+  padding: 0;
+  margin: 0;
 }
 
 ol,
 menu li,
 ol li {
   list-style: none;
-  margin: 0px;
-  padding: 0px;
+  margin: 0;
+  padding: 0;
 }
 
 
 html, body {
-  padding: 0px;
-  margin: 0px;
+  padding: 0;
+  margin: 0;
 }
 
 

apps/calendar/style/day_views.css

@@ -15,7 +15,7 @@
   height: 6rem;
   padding-left: 0.7rem;
   position: relative;
-  border-bottom: 1px solid #D0D0D0;
+  border-bottom: 0.1rem solid #D0D0D0;
 }
 
 .day-events > .hour.hour-allday {
@@ -61,15 +61,15 @@
 .day-events .container {
   /* turn off calendar color bg */
   background: white !important;
-  border-width: 1px;
+  border-width: 0.1rem;
   border-style: solid;
-  border-left-width: 6px;
+  border-left-width: 0.6rem;
   height: 100%;
   padding: 1rem;
 }
 
 .day-events .event.has-alarms .container {
-  background: #FFF url(/style/icons/alarm.png) no-repeat top right !important;
+  background: #FFF url(/style/icons/alarm.png) no-repeat top right / 3rem !important;
 }
 
 .day-events .hour .display-hour {
@@ -81,18 +81,22 @@
 }
 
 .day-events .event h5 {
-  width: calc(100% - 1rem - 6px);
-  min-height: 2rem;
-  padding-top: 0.25rem;
-  font-size: 1.6rem;
+  width: calc(100% - 1rem - 0.6rem);
+  min-height: 2.2rem;
+  padding-top: 0.6rem;
+  font-size: 1.9rem;
+  font-weight: 500;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 
 .day-events .event .details {
-  width: calc(100% - 1rem - 6px);
-  min-height: 2rem;
+  display: block;
+  top: 2.8rem;
+  width: calc(100% - 1rem - 0.6rem);
+  min-height: 2.1rem;
+  padding-top: 0.8rem;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -113,16 +117,16 @@
 
 /* overlap */
 
-.event[data-overlaps="1"] { padding-left: 6px; z-index: 11; }
-.event[data-overlaps="2"] { padding-left: 12px; z-index: 12; }
-.event[data-overlaps="3"] { padding-left: 18px; z-index: 13; }
-.event[data-overlaps="4"] { padding-left: 24px; z-index: 14; }
-.event[data-overlaps="5"] { padding-left: 30px; z-index: 15; }
-.event[data-overlaps="6"] { padding-left: 36px; z-index: 16; }
-.event[data-overlaps="7"] { padding-left: 42px; z-index: 17; }
-.event[data-overlaps="8"] { padding-left: 48px; z-index: 18; }
-.event[data-overlaps="9"] { padding-left: 54px; z-index: 19; }
-.event[data-overlaps="10"] { padding-left: 60px; z-index: 20; }
+.event[data-overlaps="1"] { padding-left: 0.6rem; z-index: 11; }
+.event[data-overlaps="2"] { padding-left: 1.2rem; z-index: 12; }
+.event[data-overlaps="3"] { padding-left: 1.8rem; z-index: 13; }
+.event[data-overlaps="4"] { padding-left: 2.4rem; z-index: 14; }
+.event[data-overlaps="5"] { padding-left: 3rem; z-index: 15; }
+.event[data-overlaps="6"] { padding-left: 3.6rem; z-index: 16; }
+.event[data-overlaps="7"] { padding-left: 4.2rem; z-index: 17; }
+.event[data-overlaps="8"] { padding-left: 4.8rem; z-index: 18; }
+.event[data-overlaps="9"] { padding-left: 5.4rem; z-index: 19; }
+.event[data-overlaps="10"] { padding-left: 6rem; z-index: 20; }
 
 /* months day view */
 
@@ -140,8 +144,8 @@
   height: calc(100% - 8.33rem);
   position: absolute;
   width: 100%;
-  border-left: 1px solid #AAA;
-  border-right: 1px solid #AAA;
+  border-left: 0.1rem solid #AAA;
+  border-right: 0.1rem solid #AAA;
   display: none;
 }
 
@@ -156,7 +160,7 @@
 #day-view .day-events {
   overflow-y: scroll;
   overflow-x: hidden;
-  height: 80%;
+  height: calc(100% - 6rem);
 }
 
 #day-view .day-events.allday {

apps/calendar/style/event_view.css

@@ -30,7 +30,7 @@
 
 #event-view .start-date,
 #event-view .description {
-  border-top: 1px solid #ccc;
+  border-top: 0.1rem solid #ccc;
   margin-top: 0.8rem;
   padding-top: 0.8rem;
 }

apps/calendar/style/modify_account_view.css

@@ -62,7 +62,7 @@
 #modify-account-view .sync-errors p {
   margin: 0;
   height: 3rem;
-  background: transparent url('icons/accountwarning_30x30.png') no-repeat left top;
+  background: transparent url('icons/accountwarning.png') no-repeat left top;
   padding-left: 3.5rem;
   line-height: 3rem;
 }

apps/calendar/style/modify_event_view.css

@@ -37,7 +37,7 @@
 #modify-event-view li.end-time,
 #modify-event-view li.start-time {
   text-align: center;
-  width: calc(40% - 1px);
+  width: calc(40% - 0.1rem);
   float: left
 }
 

apps/calendar/style/settings.css

@@ -14,7 +14,7 @@ body[data-path^='/create-account'] #time-views,
 body[data-path^='/settings'] #time-views {
   position: relative;
   transform: translateX(80%);
-  box-shadow: 1px 1px 5px 5px #222;
+  box-shadow: 0.1rem 0.1rem 0.5rem 0.5rem #222;
   transition: transform 0.5s ease-in-out;
 }
 
@@ -37,7 +37,7 @@ body[data-path^='/settings'] #time-views {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  width: -moz-calc(100% - 20px);
+  width: -moz-calc(100% - 2rem);
   height: 100%;
 }
 
@@ -47,7 +47,7 @@ body[data-path^='/settings'] #time-views {
 }
 
 #settings .calendars .error label {
-  background: transparent url('icons/accountwarning_30x30.png') no-repeat 2rem 0.5rem;
+  background: transparent url('icons/accountwarning.png') no-repeat 2rem 0.5rem;
   padding-left: 6rem;
 }
 
@@ -82,9 +82,9 @@ body[data-path^='/settings'] #time-views {
 
 #settings > menu {
   position: absolute;
-  bottom: 0px;
-  height: 40px;
-  padding: 5px 0px;
+  bottom: 0;
+  height: 4rem;
+  padding: 0.5rem 0;
   background-color: rgba(0, 0, 0, 0.3);
 }
 
@@ -95,7 +95,7 @@ body[data-path^='/settings'] #time-views {
 #settings .settings {
   width: 5.5rem;
   height: 4rem;
-  background: transparent url('/style/icons/ActionIcons_30x30_settings.png') no-repeat center;
+  background: transparent url('/style/icons/settings.png') no-repeat center / 3rem;
   font-size: 0;
   display: block;
 }
@@ -112,7 +112,7 @@ body[data-path^='/settings'] #time-views {
 #settings .calendars input[type="checkbox"]:checked + span {
   width: 2.2rem;
   height: 1.9rem;
-  background: transparent url('/style/icons/checkmark.png') no-repeat;
+  background: transparent url('/style/icons/checkmark.png') no-repeat center / 1.4rem;
 }
 
 #settings .calendars input[type="checkbox"] + span {